Introducción a html
•Transferir como PPTX, PDF•
0 gostou•1,246 visualizações
Taller dictado en el marco de "Chicas Poderosas Argentina", septiembre 2015.
Recomendados
Mais conteúdo relacionado
Mais procurados
Semelhante a Introducción a html
Semelhante a Introducción a html (20)
Último
Último (20)
Introducción a html
- 1. Introducción a HTML María Evangelina Ferreira Twitter: @evaferreira92
- 3. Introducción a HTML 1. ¿Qué es y cómo se trabaja? 2. Sintaxis básica 1. Etiquetas 2. Atributos 3. Enlaces 3. ¡Mi artículo de Wikipedia! 4. Notas finales y links útiles
- 4. ¿Qué es HTML? Es el lenguaje básico de la web.
- 5. ¿Qué es HTML? • HyperText Markup Language • La extensión del archivo es .html • Estándar mundial a cargo de la W3C • Lenguaje de etiquetas • Cada etiqueta define un elemento de nuestra página • Data de 1991
- 6. ¿Qué necesito para trabajarlo? 1. Un editor de texto plano • Notepad++ • Brackets.io • SublimeText 2. Un navegador web • Firefox • Chrome • Safari • Internet Explorer/Edge
- 8. Etiquetas • Definen cada elemento en la página • Tienen la forma de <nombre>, donde nombre es el elemento que estoy definiendo y el interior será el contenido: <title>Este es el título</title> <p>Este es un párrafo.</p>
- 9. Estructura • Los documentos HTML se dividen en dos partes: 1. Head: Información sobre el documento 2. Body: Todo lo que el usuario ve en su pantalla
- 10. Etiquetas fundamentales • <html> • Comienzo y final del documento (con una sola excepción) • <head> • Información de la página • <body> • Todo lo que ve el usuario
- 11. Ejemplo de HTML básico <!doctype html> <html> <head> <title>Título de la página</title> </head> <body> Cuerpo de la página </body> </html>
- 12. El <!doctype html> • Define la versión de HTML que estamos utilizando • La versión actual es HTML 5.1 • El doctype de la versión 4 era: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 13. Uso de caracteres especiales • Definir el charset del archivo <meta charset=“utf-8”>
- 14. Comentarios del código • No se ejecutan <!-- Comentario en HTML -->
- 15. Encabezados • Etiquetas <h1> hasta <h6> • Jerarquizan el contenido
- 16. Encabezados • No es necesario utilizar todos los niveles
- 18. Los párrafos <p>Párrafo de texto</p> <br> Salto de línea
- 19. Los enlaces Absolutos y relativos
- 20. Enlaces • Absolutos • Externos, necesitan el protocolo http:// • Es conveniente que se abran en una nueva pestaña • Relativos • El destino debe estar en la misma carpeta • O en el mismo archivo (necesidad de un ID)
- 21. Enlaces absolutos <a href=“http://www.google.com” target=“_blank”> Ir a Google </a> Atributos: Href: Destino Target: Nueva pestaña
- 22. Enlaces relativos <a href=“contacto.html”> Ir a Contacto </a> Atributos: Href: Destino, el archivo debe estar dentro de la misma carpeta
- 23. Enlaces relativos en mismo archivo <a href=“#biografia”> Ir a Contacto </a> <h2 id=“biografia”>Biografía</h2> Atributos: Href: # + ID de sección Importante: El ID no puede contener espacios, ni tildes, ni ñs y es ideal que no tenga mayúsculas.
- 25. Ejercicio Práctico • Archivo biografia.html
- 26. Notas finales Y links útiles
- 27. Notas finales • HTML + CSS + JavaScript • HTML para contenido • CSS para diseño, animaciones e interacción • JavaScript para animaciones, interacción y APIs
- 28. Links útiles • W3C: estándar HTML 5.1 • Webplatform • Codecademy • Codrops • CSS Reference