Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Introducción HTML5

    Cargado por

    Ronald Cruz
    77 vistas21 páginas
    Introducción HTML5

    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
    Introducción HTML5

    Copyright:

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

    Introducción HTML5

    Cargado por

    Ronald Cruz
    Introducción HTML5

    Copyright:

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

    Introducción HTML5

    Julio Proaño
    Introducción
    HTML (Hypertext Markup Language) es un lenguaje de marcado.

    Sirve para definir la estructura y la semántica de nuestra página web.

    Fue creado y es mantenido por W3C (World Wide Web Consortium)


    Objetivos
    Introducir los conceptos generales de HTML5

    Conocer las principales etiquetas de HTML5


    Snippets HTML
    https://libro.cursohtml5desdecero.com/snippets/html/
    HTML: etiquetas
    Las etiquetas sólo pueden ser de dos tipos:

    1.Las que tienen una apertura y un cierre

    Ejemplo:

    <elemento atributo="valor">Contenido</elemento>

    <a href="http://www.google.com">Google</a>

    Tenemos un elemento a donde el valor del atributo href es http://www.google.com,


    y qué su contenido es Google
    HTML: etiquetas
    Las etiquetas están siempre contenidas entre <> y el cierre sólo incluye el nombre
    del elemento precedido de la barra “/”. Ejemplo </elemento>

    las etiquetas siempre están contenidas entre los símbolos < >

    2. Elementos autocontenidos (no se cierran explícitamente)

    <elemento atributo="valor">

    <img src="html-css-js.png" alt="Logotipos de HTML5, CSS3 y


    JavaScript">
    Ejemplos de etiquetas
    Ejemplos de etiquetas en HTML5

    elemento: html, head, meta, title, body, img…

    atributo: charset, src, alt, …

    valor: UTF-8, "url" (la URL a un recurso), "texto", ...


    Anidación de etiquetas
    <head>

    <title>Título de la página</title>

    <meta name="author" content="Raúl Jiménez


    Ortega - @hhkaos">

    </head>

    La etiqueta head es el padre de la etiqueta title y meta.

    La etiqueta title y meta son hijas de la etiqueta head.


    Orden de apertura y cierre
    Cuando se anidan etiquetas, la primera etiqueta en cerrarse tiene que ser la
    última que se abrió.

    <p>El orden es <strong>muy importante</p></strong>

    La forma correcta de hacerlo sería:

    <p>El orden es <strong>muy importante</strong></p>


    Otros aspectos
    No todas las etiquetas son anidables entre sí; por ejemplo: una etiqueta body no
    puede contener una etiqueta head.

    Es muy importante añadir la sangría en el código para distinguir entre las


    etiquetas.

    No existe un límite máximo de anidamiento.


    Estructura básica de una página
    Estructura inicial
    <!DOCTYPE html>

    <html lang="es">

    <head>

    <meta charset="UTF-8">

    <title>Título de la página</title>

    </head>

    <body></body>

    </html>
    Estructura básica de una página
    <!DOCTYPE html>: indicar al navegador que el código HTML en el que está
    escrita la página es en la versión 5, osea que es HTML5.

    <html lang="es">... </html>: indica la raíz del documento y todas las etiquetas
    deben estar incluidas dentro. Además, especifica del idioma.

    <head> ... </head>:se usa para envolver otras etiquetas que ofrecen
    información principalmente a: al navegador, a los buscadores y a otras páginas
    (como pueden ser redes sociales, etc).

    La información especificada dentro del head no se muestra dentro de la página


    web que ve el usuario.
    Estructura básica de una página
    <head> ... </head>:se usa para envolver otras etiquetas que ofrecen
    información principalmente a: al navegador, a los buscadores y a otras páginas
    (como pueden ser redes sociales, etc).

    La información especificada dentro del head no se muestra dentro de la página


    web que ve el usuario.

    <meta charset="UTF-8">: le indica al navegador qué tipo de caracteres contiene


    la página.
    Estructura básica de una página
    <title> ... </title>: indica el título de nuestra página. Este se muestra en la
    pestaña del navegador.

    <body> ... </body>: contiene todo el contenido visible por el usuario.


    Estructura básica de una página
    Etiquetas básicas
    <p></p> : representa un párrafo.

    <br> : representa un salto de línea.

    <ul></ul> : representa una lista, en donde el orden de los elementos no es


    importante.

    <ol></ol> : representa una lista de elementos, donde el orden de los


    elementos es importante.

    <li></li> : representa un elemento de la lista y su padre siempre tiene que ser


    una etiqueta ol o ul.
    <strong></strong> : representa algo muy importante , serio (para avisos o
    precauciones) o urgente (qué debe ser leído antes).

    <em></em> : sirve para enfatizar contenido.

    <!-- --> : se utiliza para añadir comentarios dentro del código qué el usuario
    no podrá ver.
    Resumen
    h1 = heading1; h2 = heading 2; ...

    p = paragraph

    br = break line

    ul = unordered list

    ol = ordered list

    li = list item

    em = emphasis
    Ejercicios 1:

    https://www.w3schools.com/html/exercise.asp?filename=exercise_attributes5

    https://www.w3schools.com/html/exercise.asp?filename=exercise_paragraphs1

    https://www.w3schools.com/html/exercise.asp?filename=exercise_lists1

    https://www.w3schools.com/html/exercise.asp?filename=exercise_formatting1
    Ejercicio 2

    Escribir su CV usando las etiquetas básicas de HTML5

    También podría gustarte