Intro HTML5

Sublime Text o Atom Google Chrome ¿Qué necesito para tomar
este curso? Muchas ganas de aprender

HTML5 Lenguaje de marcado W3.org

< / > Sintaxis HTML5 es sobre etiquetas, atributos y
valores.

<!DOCTYPE html> <etiqueta>  contenido </etiqueta>  Etiquetas que abren y cierran ... bueno a veces. Test

<!DOCTYPE html> <etiqueta> * <etiqueta> <otra-etiqueta> contenido </otra-etiqueta> </etiqueta> Etiquetas
que abren y cierran ... bueno a veces. Test

<!DOCTYPE html> <etiqueta atributo="valor"> Contenido </etiqueta> Etiquetas que tienen atributos
y valores. Test

<!DOCTYPE html> <ariana developer="android"> Imaginemos que soy una etiqueta Y
que quiero pintar algo en el navegador. Test

Etiquetas, etiquetas everywhere.

<!DOCTYPE html> <h1> Soy un título </h1> <p> Soy un
párrafo </p>  Etiquetas básicas Título, párrafo, comentarios. Test

<!DOCTYPE html> <html> <head>  <meta charset="utf-8"> <title> Título de la página </title> </head> <body>  </body> </html> Estructura de árbol <!DOCTYPE html> define el tipo de documento. Test

index.html <!DOCTYPE html> <html> <head> <link rel=”stylesheet” href=”css/style.css”> </head> <body>
<h1> Hola, mundo! </h1> </body> </html> Hola, mundo Output style.css h1 { color: red }

Etiquetas semánticas Nos permiten dividir el contenido. <header> <nav> <article>
<article> <section> <aside> <footer> Resource Test

Etiquetas semánticas Ejemplo

<div id="main"> <div class="article"> <div class="header"> <h1>
Dennis Ritchie </h1> </div> <p> UNIX is basically ... </p> </div> </div> Guidelines Beneficiate del rico vocabulario de HTML5 Resource  <main> <article> <header> <h1> Dennis Ritchie </h1> </header> <p> UNIX is basically ... </p> </article> </main>

1. Usa HTML para la estructura, CSS para la presentación,
JS para el comportamiento. 2. Coloca tu código CSS en un archivo aparte. Guidelines ... Resource

Practica Learn by Doing Front-end Developer Resources

Intro HTML5

Intro HTML5

ariana

More Decks by ariana

Other Decks in Technology

Featured

Transcript

Sublime Text o Atom Google Chrome ¿Qué necesito para tomar

HTML5 Lenguaje de marcado W3.org

< / > Sintaxis HTML5 es sobre etiquetas, atributos y

<!DOCTYPE html> <etiqueta> <!-- Así luce una etiqueta cuando abre

<!DOCTYPE html> <etiqueta> * <etiqueta> <otra-etiqueta> contenido </otra-etiqueta> </etiqueta> Etiquetas

<!DOCTYPE html> <etiqueta atributo="valor"> Contenido </etiqueta> Etiquetas que tienen atributos

<!DOCTYPE html> <ariana developer="android"> Imaginemos que soy una etiqueta Y

Etiquetas, etiquetas everywhere.

<!DOCTYPE html> <h1> Soy un título </h1> <p> Soy un

<!DOCTYPE html> <html> <head> <!-- Aquí va la configuración de

index.html <!DOCTYPE html> <html> <head> <link rel=”stylesheet” href=”css/style.css”> </head> <body>

Etiquetas semánticas Nos permiten dividir el contenido. <header> <nav> <article>

Etiquetas semánticas Ejemplo

<div id="main"> <div class="article"> <div class="header"> <h1>

1. Usa HTML para la estructura, CSS para la presentación,

Practica Learn by Doing Front-end Developer Resources