HTML estructura documento
•Als KEY, PDF herunterladen•
1 gefällt mir•1,592 views
Reconocer la estructura principal de un HTML, crearlo simulando una página de receta.
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie HTML estructura documento
Ähnlich wie HTML estructura documento (20)
Mehr von Maximiliano Martin
Mehr von Maximiliano Martin (19)
HTML estructura documento
- 1. HTML Estructura principal Computación Multimedia - I Clase 2 Maximiliano Martin - DUOC 2010
- 3. Para qué sirve Describir estructura y contenido www.maximiliano.cl
- 4. Para qué sirve Describir estructura y contenido Complementar el texto con Objetos www.maximiliano.cl
- 5. Para qué sirve Describir estructura y contenido Complementar el texto con Objetos Se escribe en forma de “Etiquetas” www.maximiliano.cl
- 6. Para qué sirve Describir estructura y contenido Complementar el texto con Objetos Se escribe en forma de “Etiquetas” Rodeada por Corchetes Angulares < www.maximiliano.cl >
- 7. Estructura de documento <html> </html> www.maximiliano.cl
- 8. Estructura de documento <html> <head> </head> </html> www.maximiliano.cl
- 9. Estructura de documento <html> <head> </head> <body> </body> </html> www.maximiliano.cl
- 10. Estructura de documento <html> <head> </head> <body> </body> </html> www.maximiliano.cl
- 11. Estructura de documento Módulos de: <html> •Estructura •html, head, title, body <head> •Metainformación <title> y otros elementos •Estilos •Link </head> •Base <body> </body> </html> www.maximiliano.cl
- 12. Estructura de documento Módulos de: <html> •Estructura •html, head, title, body <head> •Metainformación <title> y otros elementos •Estilos •Link </head> •Base Módulos de: •Texto <body> •p, code, div, em, strong, span, q, pre, elementos samp, h1, h2, h3, etc •Hipertexto •Lista •Objetos •Presentación •Edición </body> •Formularios •Tablas </html> •Imágen www.maximiliano.cl
- 13. ¿Para quién? Usuarios Comunicamos/Informamos www.maximiliano.cl
- 14. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos www.maximiliano.cl
- 15. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” www.maximiliano.cl
- 16. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 www.maximiliano.cl
- 17. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p www.maximiliano.cl
- 18. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. www.maximiliano.cl
- 19. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. Datos en excel ➡ table, td, tr, www.maximiliano.cl
- 20. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. Datos en excel ➡ table, td, tr, ➡ Valores de atributos www.maximiliano.cl
- 21. ¿Para quién? Humanos Usuarios Máquinas Comunicamos/Informamos Visible “Invisible” Titular principal ➡ h1 Contenido del artículo ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. Datos en excel ➡ table, td, tr, ➡ Valores de atributos www.maximiliano.cl
- 22. Modularización (XHTML) de elementos Declaración / DOCTYPE www.maximiliano.cl
- 23. Modularización (XHTML) de elementos Declaración / DOCTYPE Elemento Raiz / <html> www.maximiliano.cl
- 24. Modularización (XHTML) de elementos Declaración / DOCTYPE Elemento Raiz / <html> Modularización. Módulo de: Estructura / body, head, html, title Texto / abbr, acronym, address, etc. Hipertexto / a Lista / dl, dt, dd, ol, ul, li. Objetos / object, param. Presentación / b, big, hr, i, etc. etc. / www.maximiliano.cl
- 25. Actividad 1 Crear nuestro primer HTML en TextEdit utilizando al menos los siguientes elementos H1 a H6 p, strong, em ul, ol, li El contenido será una receta
- 26. Estructura de Elementos Elemento <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
- 27. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final> <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
- 28. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final> Contenido <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
- 29. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final> Atributo=”valor” Contenido <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
- 30. Estructura de Elementos Elemento <Etiqueta inicial> </Etiqueta final> Atributo=”valor” Contenido <a href=”” title=””>texto de enlace</a> www.maximiliano.cl
- 32. Declaración / DOCTYPE No es una etiqueta sino una instrucción •Definición del Tipo de Documento (DTD) •El DTD especifica las reglas para el lenguaje de marcado •XHTML 1.0 Strict / XHTML 1.0 Transitional •XHTML 1.1 •HTML 4.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd"> www.maximiliano.cl
- 33. Elemento Raiz / <html> www.maximiliano.cl
- 34. Elemento Raiz / <html> Etiqueta que contiene todo el HTML •Informa al navegador que lo contenido por él debe ser interpretado como HTML •Inicio y término del documento <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd"> <html> <head> ...elementos del head... </head> <body> ...elementos del body... </body> </html> www.maximiliano.cl
- 35. Actividad 2 Crear una nueva página y vincularlas entre si
- 36. Tarea Publicar un post con: Tipos de HTML DTD Otros tipos de Listas ¿Qué son los div? Ejemplificar utilizando el editor de HTML de WordPress Apuntes de la clase, lo que les quedó claro y los que no y les gustaría ver nuevamente. Instalar el plugin Web Developer en FireFox
Hinweis der Redaktion
- Multipurpose Internet Mail Extensions), (Extensiones de Correo de Internet Multiprop&#xF3;sito
- Multipurpose Internet Mail Extensions), (Extensiones de Correo de Internet Multiprop&#xF3;sito
- Multipurpose Internet Mail Extensions), (Extensiones de Correo de Internet Multiprop&#xF3;sito
- Multipurpose Internet Mail Extensions), (Extensiones de Correo de Internet Multiprop&#xF3;sito
- Multipurpose Internet Mail Extensions), (Extensiones de Correo de Internet Multiprop&#xF3;sito