Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 12 vistas

    Leccion No 3

    Cargado por

    vallejema323

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Leccion No 3

    Cargado por

    vallejema323
    12 vistas4 páginas

    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?

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    12 vistas4 páginas

    Leccion No 3

    Cargado por

    vallejema323

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 4

    LECCIÓN NO 3

    ETIQUETAS

    ¿QUÉ ES UNA ETIQUETA HTML?


    Antes de entrar en materia, conviene explicar de qué vamos a hablar. Las etiquetas
    HTML son pequeños bloques de código, que indican al navegador cómo debe
    interpretar el contenido recogido entre dichas etiquetas. Por ejemplo, si queremos
    “pintar” un párrafo de texto, hay una etiqueta específica para que el navegador
    interprete ese texto como un párrafo. Estas etiquetas cuentan además con atributos
    que podemos añadir y que en sí, pueden determinar como será el comportamiento
    específico que tendrá la etiqueta.

    Las etiquetas HTML comienzan siempre con el símbolo “<” y finalizan con el símbolo
    “>”. Entre medias de estos dos símbolos irá el nombre de la etiqueta que queremos
    que el navegador interprete.

    Todas las etiquetas HTML están compuestas por una etiqueta de apertura, y una
    etiqueta de cierre. Aunque hay excepciones, como por ejemplo la etiqueta para
    cargar una imagen que son llamadas etiquetas huérfanas, ya que solo tienen
    etiqueta de apertura.

    Las etiquetas de cierre se construyen con una barra “/” justo antes de la propia
    etiqueta y los símbolos “<” y “>”. Resumiendo, si queremos «pintar» un párrafo en la
    página web, abriremos con la etiqueta de apertura de párrafo “<p>”, y cerraremos
    con la etiqueta de cierre “</p>”.

    Ejemplo: <p>Esto es un párrafo</p>

    Una vez que conocemos que son las etiquetas y cómo implementarlas en nuestro
    código web, pasemos a ver un listado de las etiquetas HTML más utilizadas.

    ETIQUETAS INICIALES O DE RAÍZ


    ● <!DOCTYPE html> Indica al navegador que el documento está basado en el
    estándar HTML5.
    ● <html> </html> Representa la raíz de un documento HTML. Todos los demás
    elementos de la estructura HTML deben ser recogidos dentro de estas
    etiquetas.

    METADATOS DEL DOCUMENTO


    ● <head> </head> Representa una colección de metadatos acerca del
    documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
    El resto de etiquetas de metadatos, irán recogidas dentro de las etiquetas de
    apertura y cierre del head. Importante explicar que estos metadatos del
    documento, es información para el navegador y no contenido que será visible
    en la página web. A excepción de la etiqueta <title> que veremos a
    continuación.
    ● <title> </title> Etiqueta usada para definir el título de la página web.
    ● <link> Se usa para enlazar recursos externos al documento HTML. El
    ejemplo más común son las hojas de estilos CSS.
    ● <meta> Etiqueta usada para definir otros metadatos que no se pueden definir
    con una etiqueta HTML especifica. Por ejemplo para definir el autor del sitio,
    o la descripción del mismo.
    ● <style> </style> Etiquetas usadas para introducir código CSS en línea, es
    decir, en el propio documento HTML.

    ETIQUETAS DE SECCIONES O PARA ESTRUCTURAR EL HTML


    ● <body> </body> Al contrario que la etiqueta de metadatos < head > <head>,
    todo lo que quieras mostrar en la página web debe ir recogido dentro de las
    etiquetas de apertura y cierre de <body>. Este contenido será el que se
    muestre en la web.
    ● <nav> </nav> Usadas para definir el contenido que será la sección de
    navegación de la web.
    ● <main> </main> Se usa para definir el contenido principal del documento.
    Solamente puede existir uno por documento.
    ● <section> </section> Define una sección del documento.
    ● <article> </article> Define contenido independiente de la web.
    ● <aside> </aside> Dentro de estas etiquetas suele alojarse el contenido
    adicional de la web. Suele ser contenido relacionado con la web pero de poca
    importancia.
    ● <h1>,<h2>,<h3>,<h4>,<h5>,<h6> Son etiquetas HTML muy importantes, ya
    que son usadas para jerarquizar el contenido de la web. Las etiquetas se
    usan para explicar brevemente el contenido que irá a continuación.
    ● <header> </header> Se usan para definir la cabecera de la página web.
    Suele contener el logotipo, menú de navegación, etc.
    ● <footer> </footer> Usadas para definir el pie de página.

    ETIQUETAS PARA LA AGRUPACIÓN DE CONTENIDO


    ● <p> </p> Etiqueta usada para escribir párrafos de texto.
    ● <hr> Etiqueta utilizada para «romper» entre dos secciones de una web.
    Usada comúnmente como separador.
    ● <pre> </pre> Usada para pegar texto manteniendo el pre formato propio del
    texto.
    ● <blockquote> </blockquote> Se usan para indicar que el contenido es texto
    citado.
    ● <ol> </ol> Etiquetas para crear una lista ordenada.
    ● <ul> </ul> Etiquetas para crear una lista desordenada
    ● <li> </li> Etiquetas que recogen el contenido de un elemento de una lista, sea
    ordenada o no.
    ● <div> </div> Etiqueta común utilizada para crear un contenedor genérico.

    ETIQUETAS SEMÁNTICAS PARA TEXTO


    ● <a> </a> Etiqueta utilizada para crear hiperenlaces en el documento HTML.
    ● <strong> </strong> Etiqueta para definir una palabra o conjunto de ellas como
    importantes. Tiene una fuerte importancia en el SEO de la página.
    ● <small> </small> Utilizada para dejar un comentario aparte, del tipo una nota
    de derechos de autoría, u otros textos que no son esenciales para la
    comprensión del documento.
    ● <cite> </cite> Para indicar el título de una obra.
    ● <sub> </sub> y <sup> </sup> Etiquetas utilizadas para representar un
    subíndice o superíndice.
    ● <mark> </mark> Usada para resaltar texto.
    ● <span> </span> Etiqueta HTML sin ningún significado específico. Se usa
    conjuntamente con los atributos «class» o «id» para atribuirle ciertas
    características.
    ● <br> Etiqueta utilizada para crear un salto de línea.

    ETIQUETAS PARA INCRUSTAR CONTENIDO


    ● <img> Etiqueta para «pintar» una imagen en la página web.
    ● <embed> Usada para integrar una aplicación o contenido interactivo externo
    que no suele ser HTML.
    ● <video> </video> Se usa para reproducir video en la página web junto a sus
    archivos de audio y capturas asociadas.

    ETIQUETAS PARA LA CREACIÓN DE TABLAS


    ● <table> </table> Etiquetas de apertura y cierre de una tabla. El resto de
    etiquetas de la tabla han de ir siempre recogidas entre estas dos etiquetas.
    ● <caption> </caption> Usada para indicar el título de la tabla.
    ● <colgroup> </colgroup> Etiqueta utilizada para agrupar dos o más columnas
    de una tabla.
    ● <tbody> </tbody> Usada para describir los datos concretos de una tabla.
    ● <thead> </thead> Indica el bloque de filas que describen las etiquetas de las
    columnas de la tabla.
    ● <tfoot> </tfoot> Indica los bloques de filas que describen los resúmenes, o
    datos totales de una columna de una tabla.
    ● <tr> </tr> Se usa para indicar una fila de celdas de una tabla.
    ● <td> </td> Usada para definir una celda de una tabla.
    ● <th> </th> Etiqueta que se usa para definir el encabezado de una celda.
    ETIQUETAS PARA LA CREACIÓN DE FORMULARIOS
    ● <form> </form> Etiqueta de apertura y cierre de un formulario de una página
    web. El resto de etiquetas de formulario deben ir siempre recogidas entre
    estas etiquetas de apertura y cierre de formulario.
    ● <fieldset> </fieldset> Etiqueta que representa un conjunto o agrupación de
    elementos de un formulario. «Pinta» un recuadro alrededor de las etiquetas
    que estén contenidas dentro del <fieldset>
    ● <legend> </legend> Etiqueta ligada a <fieldset>. Indica el título del <fieldset>
    ● <label> </label> Se usa para definir el nombre o título de un control del
    formulario.
    ● <input> Pinta un campo de introducción de datos para el usuario. Es una de
    las principales etiquetas de un formulario.
    ● <button> </button> Etiqueta utilizada para representar un botón en el
    formulario.
    ● <select> </select> Input que permite una selección entre un conjunto de
    opciones.
    ● <option> </option> Etiqueta ligada a <select>. Permite añadir diferentes
    opciones al <select>
    ● <textarea> </textarea> Añade un campo al usuario para que pueda introducir
    texto en unas líneas máximas de texto que el desarrollador puede definir.

    CONCLUSIÓN
    Además de las etiquetas HTML que aquí hemos mostrado, existen muchas más.
    Pero principalmente, con todas las etiquetas mencionadas anteriormente podremos
    diseñar el 99% de las páginas web.

    También podría gustarte