Intro HTML5

Parte del curso de UX/UI: Web Fundamentals by GDG WonderCoders

Transcript

1. Sublime Text o Atom Google Chrome ¿Qué necesito para tomar este curso? Muchas ganas de aprender
2. HTML5 Lenguaje de marcado W3.org
3. < / > Sintaxis HTML5 es sobre etiquetas, atributos y valores.
4. <!DOCTYPE html> <etiqueta> <!-- Así luce una etiqueta cuando abre --> contenido </etiqueta> <!-- Así cuando cierra--> Etiquetas que abren y cierran ... bueno a veces. Test
5. <!DOCTYPE html> <etiqueta> * <etiqueta> <otra-etiqueta> contenido </otra-etiqueta> </etiqueta> Etiquetas que abren y cierran ... bueno a veces. Test
6. <!DOCTYPE html> <etiqueta atributo="valor"> Contenido </etiqueta> Etiquetas que tienen atributos y valores. Test
7. <!DOCTYPE html> <ariana developer="android"> Imaginemos que soy una etiqueta Y que quiero pintar algo en el navegador. Test
8. Etiquetas, etiquetas everywhere.
9. <!DOCTYPE html> <h1> Soy un título </h1> <p> Soy un párrafo </p> <!-- Soy un comentario --> Etiquetas básicas Título, párrafo, comentarios. Test
10. <!DOCTYPE html> <html> <head> <!-- Aquí va la configuración de la página --> <meta charset="utf-8"> <title> Título de la página </title> </head> <body> <!-- Aquí va el contenido --> </body> </html> Estructura de árbol <!DOCTYPE html> define el tipo de documento. Test
11. 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 }
12. Etiquetas semánticas Nos permiten dividir el contenido. <header> <nav> <article> <article> <section> <aside> <footer> Resource Test
13. Etiquetas semánticas Ejemplo
14. <!-- bad --> <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 <!-- good --> <main> <article> <header> <h1> Dennis Ritchie </h1> </header> <p> UNIX is basically ... </p> </article> </main>
15. 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
16. Practica Learn by Doing Front-end Developer Resources