Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Introducción a HTML

    Cargado por

    Angie Hernandez
    13 vistas18 páginas

    Título original

    Introduccion a HTML

    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

    Copyright:

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

    Introducción a HTML

    Cargado por

    Angie Hernandez

    Copyright:

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

    Introducción a HTML

    By Goye
    Hello There!
    Mi nombre es Carlos Goyeneche (mas conocido como
    Goye), actualmente soy Staff Engineer en Wizeline.

    Me apasiona la musica, los videojuegos y ser un


    abrazador profesional de gatos!

    https://github.com/Goye
    @goyesays
    Introducción a HTML
    Que es?
    HTML (HyperText Markup Language) es un lenguaje que nos permite definir la estructura de las páginas
    Web.

    HTML se compone de elementos como párrafos, encabezados, imágenes y vínculos (links), entre muchos
    otros.

    Los elementos se definen utilizando etiquetas. Una etiqueta es una palabra encerrada entre < y > (p.e.
    <hr> muestra una línea horizontal en el documento).

    La mayoría de etiquetas necesitan una etiqueta de cierre que es muy similar a una etiqueta pero tiene un
    slash (/) antes de la palabra. Por ejemplo, para mostrar un párrafo se utilizan la etiqueta <p> y la etiqueta
    de cierre </p>. En el medio de las dos etiquetas va el contenido del párrafo:

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

    https://guias.makeitreal.camp/html-y-css/introduccion-a-html

    Anatomía de un elemento HTML

    https://tinyurl.com/bdfaubev
    Elementos
    Un elemento HTML consiste generalmente de una etiqueta de inicio (p.e. <p>) y una etiqueta de cierre
    (p.e. </p>).

    Las etiquetas se pueden anidar. Por ejemplo, para resaltar un texto en negrilla dentro de un párrafo se
    utiliza el elemento strong:

    <p>Mi gato es <strong>muy</strong> gruñón.</p>

    https://guias.makeitreal.camp/html-y-css/introduccion-a-html

    Pero que pasaría si…


    Elementos
    <p>Mi gato es <strong>muy gruñón.</p></strong>

    https://tinyurl.com/mvf34eph

    Elementos de bloque y elementos en línea


    Hay dos categorías importantes de elementos en HTML — Estos son los elementos de bloque y los
    elementos en línea.

    • Los elementos de bloque forman un bloque visible en la página. Aparecerán en una línea nueva después
    de cualquier contenido anterior. Cualquier contenido que vaya después también aparecerá en una línea
    nueva. Los elementos a nivel de bloque suelen ser elementos estructurales de la página. Por ejemplo, un
    elemento a nivel de bloque puede representar encabezados, párrafos, listas, menús de navegación o pies
    de página. Un elemento a nivel de bloque no estaría anidado dentro de un elemento en línea, pero podría
    estar anidado dentro de otro elemento a nivel de bloque.
    • Los elementos en línea están contenidos dentro de elementos de bloque y delimitan solo pequeñas
    partes del contenido del documento; (no párrafos enteros o agrupaciones de contenido) Un elemento en
    línea no hará que aparezca una nueva línea en el documento. Suele utilizarse con texto. Por ejemplo es
    el caso de un elemento <a> (hipervínculo) o elementos de énfasis como <em> o <strong>.

    https://tinyurl.com/mvf34eph

    Atributos
    Los atributos contienen información extra sobre el elemento que no se mostrará en el contenido. En este
    caso, el atributo class asigna al elemento un identificador que se puede utilizar para dotarlo de información
    de estilo.

    https://tinyurl.com/mvf34eph
    Anatomía de un documento HTML
    Un documento HTML es un archivo con extensión .html que contiene código HTML. Veamos un ejemplo de
    un documento HTML. (no son muy útiles por sí mismos)

    <!DOCTYPE html>
    <html>
    <head>
    <title>El título de la página</title>
    </head>
    <body>
    <p>Este es un párrafo</p>
    </body>
    </html>

    https://guias.makeitreal.camp/html-y-css/introduccion-a-html#documentos-de-html

    Anatomía de un documento HTML


    Aquí tenemos: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    • <!DOCTYPE html> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    • <html></html>
    • <head></head>
    • <meta charset=“utf-8">
    • <title></title>
    • <body></body>

    https://tinyurl.com/mvf34eph

    Comentarios + Otras etiquetas


    En HTML hay un mecanismo para escribir comentarios en el código. Los comentarios son ignorados por el
    navegador y, por tanto, son invisibles para el usuario. El propósito de los comentarios es permitirte incluir
    notas en el código para explicar tu lógica o codificación. Esto es muy útil si regresas a un código base
    después de estar ausente el tiempo suficiente como para no recordarlo por completo. Del mismo modo, los
    comentarios son invaluables ya que diferentes personas están realizando cambios y actualizaciones.

    <p>No soy un comentario</p>

    <!-- <p>¡Yo sí!</p> -->

    https://guias.makeitreal.camp/html-y-css/introduccion-a-html#vinculos-links

    Estructura web

    https://tinyurl.com/3f5zww8p
    Partes básicas de un documento

    HTML dispone de etiquetas adecuadas que puedes usar para establecer estas secciones semánticas, por
    ejemplo:

    • encabezado: <header/>
    • menú de navegación : <nav/>
    • contenido principal: <main/>, <article/>, <section/>,<div/>
    • barra lateral: <aside/>
    • pie de página: <footer/>

    https://tinyurl.com/3f5zww8p

    PLAY TIME
    HTML Debugging Example & NodeSchool
    https://codepen.io/Goyesays/pen/GRxRRBj

    https://github.com/denysdovhan/learnyouhtml
    Q/A

    También podría gustarte