Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Diseño Web Programación

    Cargado por

    jhoan ciccone
    2 vistas6 páginas
    El documento explica los elementos básicos para diseñar la estructura de una página web utilizando HTML, incluyendo elementos obligatorios como <html>, <head> y <body>, y elementos opcionales como <p>, <img>, <form> e <input> para agregar párrafos, imágenes, formularios y campos de entrada. También describe cómo usar atributos como src, alt, type, name, placeholder, action y href para personalizar estos elementos.

    Descripción original:

    Primeros pasos en HTML

    Título original

    Diseño Web programación

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    El documento explica los elementos básicos para diseñar la estructura de una página web utilizando HTML, incluyendo elementos obligatorios como <html>, <head> y <body>, y elementos opcionales como <p>, <img>, <form> e <input> para agregar párrafos, imágenes, formularios y campos de entrada. También describe cómo usar atributos como src, alt, type, name, placeholder, action y href para personalizar estos elementos.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    2 vistas6 páginas

    Diseño Web Programación

    Cargado por

    jhoan ciccone
    El documento explica los elementos básicos para diseñar la estructura de una página web utilizando HTML, incluyendo elementos obligatorios como <html>, <head> y <body>, y elementos opcionales como <p>, <img>, <form> e <input> para agregar párrafos, imágenes, formularios y campos de entrada. También describe cómo usar atributos como src, alt, type, name, placeholder, action y href para personalizar estos elementos.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 6

    Diseño Web

    Para diseñar la estructura de una página web utilizamos el lenguaje HTML, es decir, escribiremos un código que está
    compuesto por una declaración y elementos.

    Existen muchos elementos que son los que componen un código, estos los podemos separar en obligatorios y
    opcionales.

    Sintaxis de un elemento: Contenido del elemento

    <p> Bienvenidos a HTML </p>


    Etiqueta de apertura Etiqueta de cierre

     La etiqueta de apertura indica que es ahí donde inicia el elemento


     El contenido dependerá de cada elemento, si el elemento es un titulo, el contenido será titulo, si como en el
    ejemplo el elemento es un párrafo contendrá un párrafo.
     La etiqueta de cierre indica que el contenido de ese elemento termino.

    Una página Web

    Toda página web inicia con la declaración <!DOCTYPE html> es la que indica que versión de HTML estamos usando.
    (Es lo primero que se pone al iniciar el código)

    Una vez escrita la declaración comenzaremos con los elementos básicos y obligatorios de una página web, se dicen
    obligatorios, porque en cualquier página web que exista o estemos por crear deben estar presentes. Son 3:
    Código de una página
    Web en blanco

    1. <html> <html>

    Se llama elemento raíz o elemento padre porque es el que contiene a todos los elementos restantes. Todo el
    código de una página (excepto la declaración <!doctype html>) debe estar entre su etiqueta de apertura y la
    de cierre.

    2. <head> <head>

    Como su nombre lo indica es la cabeza del código y dentro de sus etiquetas se colocarán datos técnicos
    necesarios para el navegador.
    Los datos que coloquemos dentro de sus etiquetas no serán vistas por el usuario de la página web.

    3. <body> <body>

    Es el cuerpo de toda página web. Todo lo que vamos a ver al abrir la página web debe estar dentro de estas
    etiquetas.

    Con la declaración DOCTYPE y estos 3 elementos se crea una página web en blanco y todas deben tenerlos,
    por eso son los obligatorios.
    1
    Elementos Opcionales
    El resto de los elementos son opcionales, los colocaremos solo en caso de ser necesarios para la página que
    deseamos crear.

    Por el momento el elemento <head> </head> solo lo escribiremos, aún no vamos a trabajar con él.
    Veremos elementos que utilizaremos dentro del cuerpo de la página web, por eso en el caso de querer
    utilizarlos debemos escribirlos entre la etiqueta de apertura <body> y la de cierre </body>

    Elementos:

     Títulos: cuando queremos colocar un titulo debemos utilizar el elemento h. Existen seis elementos h y
    se diferencian por su tamaño.

    Como se escribe en el código Como aparece en la página

    Recordemos que son elementos opcionales, puedo utilizar uno solo, dos, todos o ninguno y la página
    funcionará igual. Aquí solo los estamos aprendiendo a usar y como se escriben.

     Párrafo: nos permitirá colocar párrafos para que aparezcan en la página y el usuario pueda leerlo.
    Lo llamaremos elemento p y sus etiquetas son <p> </p>

     Listas ordenadas: las podemos utilizar para hacer una lista de cosas relacionadas a nuestra página o
    una lista de opciones y se mostraran enumeradas.
    Sus etiquetas son <ol> </ol> y para escribir cada objeto de la lista debemos utilizar las etiquetas
    <li> </li> para cada uno de ellos como se muestra en el ejemplo de una lista de compras

    2
     Listas desordenadas: son al igual que las ordenadas, listas relacionadas a la página pero con la
    diferencia que no serán enumeradas. Sus etiquetas son <ul> </ul>

     Fieldset: se utiliza para agrupar elementos relacionados en un formulario web. Se puede utilizar en
    conjunto con el elemento <legend></legend> para proporcionar un titulo a está sección.

    Como podemos ver el fieldset hará un recuadro donde luego podremos poner más elementos para
    separarlos de otros. Mientras que el legend nos permitirá poner un titulo o descripción a esa
    sección.

     Línea divisoria: el elemento hr con su etiqueta de apertura <hr> nos permitirá colocar una línea
    horizontal divisoria qué atraviese toda la página para separar contenido.
    (el elemento hr es uno de los elementos que no necesitan etiqueta de cierre, se denominan de auto
    cierre)

    Antes de comenzar a ver el resto de los elementos opcionales, tenemos que aprender sobre los atributos.

    Los atributos son herramientas que le proporcionan a determinados elementos información, configuración, valores
    específicos o propiedades adicionales.

    Los atributos se colocan dentro de la etiqueta de apertura del elemento y un elemento puede tener varios atributos.

    La sintaxis de los atributos es la siguiente:


    El nombre del atributo, el signo
    Atributo="valor" igual, y entre comillas su valor
    Para ver un ejemplo hablaremos del elemento imagen

     Imagen: el elemento imagen es de auto-cierre por lo que solo tendrá etiqueta de apertura, como su
    nombre lo indica nos permite colocar una imagen en la página web. Su etiqueta es <img>

    Pero para poder colocar esa imagen necesitaremos ayuda de un atributo, en este caso el nombre del
    atributo es src y su valor será la ubicación en donde se encuentra la imagen que queremos colocar, ya
    sea que esté en nuestra computadora o una imagen de internet.

    3
    La primer línea mostrara una imagen de nuestra computadora, mientras que la segunda mostrará la
    imagen de internet que se encuentra en esa url

    Dentro del elemento imagen es recomendable utilizar el atributo alt


    El atributo alt permitirá colocar una breve descripción de la imagen que pongamos. Entonces en el
    caso de que la imagen no cargue por fallas de internet o alguna otra razón, se vera ese texto,
    explicando de que se trata la imagen.

     Formularios: el elemento <form> </form> permitirá crear un formulario interactivo en donde el


    usuario podrá responder cuestionarios o interactuar con la página.
    Por sí solo, el elemento form no mostrará nada en la página, pero indicará al navegador que la página
    contiene un formulario. El atributo action dentro de la etiqueta de apertura, nos permitirá colocar a
    donde se enviarán los datos una vez completado el formulario.

     Input: es otro de los elementos de auto-cierre, se utiliza para crear un campo de entrada interactivo,
    donde los usuarios podrán ingresar, editar o seleccionar datos. Puede tomar diferentes formatos con
    la ayuda del atributo type.
    Por el momento veremos 3 de estos formatos, tipo radio, tipo text, y tipo checkbox.

    Ahora que pasa si tenemos dos o más input tipo radio dando opciones a un usuario, pero queremos
    que puede elegir solo una de ellas. Para eso agregaremos un atributo llamado name en cada una de
    esas opciones, el atributo name debe tener el mismo valor en cada una de esas opciones así cuando
    el usuario quiera seleccionar más de una no podrá.

    4
    Como se muestra en el ejemplo el usuario solo podrá seleccionar una de las 3 opciones.

    En el input tipo text tendremos un atributo que le ayudará al usuario a entender que tipo de texto
    debe escribir en el recuadro, el atributo es placeholder y su valor será el texto explicativo que
    deseamos el usuario pueda leer, una vez se seleccione el cuadro para escribir, ese texto
    desaparecera.
    Ejemplo:

     Label: el elemento se utiliza para asociar un texto descriptivo con un elemento de formulario, como
    un campo de entrada input. Esto mejorara la usabilidad y accesibilidad del formulario, ya que permite
    al usuario hacer clic en el texto para marcar la opción elegida.

    El usuario podrá tildar la opción haciendo clic en la palabra Ejemplo.

     Button: el elemento <button></button> se utiliza para crear un botón interactivo. Puedes crear
    botones que realicen acciones cuando se le hace clic. Usando el atributo type para darle un valor de
    submit crea un botón que al hacer clic, envía el formulario a la dirección que se especifico en el
    atributo action del elemento <form></form>

    Como podemos ver en el ejemplo creamos un botón con la palabra Enviar en su interior, y al hacer
    clic sobre él enviará la información del formulario a la pagina que se encuentra en el atributo action

     Enlaces: el elemento <a></a> se utiliza para crear un enlace que nos enviará a otra página web, a una
    ubicación especifica de nuestra misma página, a un archivo del mismo directorio o a un recurso en
    línea. Se utiliza el atributo href y su valor será la dirección de hacia a donde deseamos vaya el
    usuario.

    5
    En el ejemplo podemos ver un enlace para el usuario, que lo enviará a la página principal de
    Wikipedia si desea buscar información

    Podemos ver que en el código también aparece un atributo target con su valor igual a _blank lo que hace
    esté atributo es indicar que al hacer clic en el enlace la página se abrirá en otra pestaña del navegador, si no lo
    utilizamos la página Wikipedia en el caso del ejemplo se abrirá en la misma pestaña reemplazando a nuestra página.

     El elemento <footer></footer> se utiliza como un pie de página, generalmente al final del código
    indicando: información adicional, las fuentes de la información, enlaces, derechos de autor, créditos,
    datos personales entre otras opciones.

    También podría gustarte