Maquetación web con html5
Descargar como PPTX, PDF9 recomendaciones28,604 vistas
El documento ofrece una introducción completa a HTML y HTML5, explicando su estructura, etiquetas y uso en la creación de páginas web. Se detallan las diferencias y la evolución de HTML a HTML5, así como las herramientas útiles para el desarrollo. Se incluyen ejemplos de código y la importancia de la semántica en el marcado de contenido.
Maquetación web con html5
- 1. Realizado por: Antonio Cruz Gómez https://www.facebook.com/antonio.cruzgomez.98 https://twitter.com/acruzgomez http://antoniocruzgomez.blogspot.com.es/
- 2. “Los que se enamoran de la práctica sin la teoría son como los pilotos sin timón, ni brújula, que nunca podrán saber a dónde van.” Leonardo Da Vinci (1452-1519) Pintor, escultor e inventor italiano.
- 3. Índice: ∞ ¿Qué es HTML? ∞ ¿En qué consiste HTML? ∞ ¿Cómo se escriben las etiquetas? ∞ ¿Cómo se muestra una página Web? ∞ ¿Qué es la semántica HTML? ∞ ¿Qué es HTML5? ∞ ¿Por qué surge HTML5? ∞ ¿Qué va a pasar con las Web en HTML4? ∞ ¿Cómo se crea una página Web? ∞ ¿Cómo se declara un documento HTML5? ∞ ¿Qué etiquetas se usan para maquetar en HTML5? ∞ ¿Qué herramientas usaremos?
- 4. ¿Qué es HTML? HTML son las siglas de HyperText Markup Language (“lenguaje de marcado de hipertexto”´.
- 5. ¿En qué consiste HTML? HTML consiste hacer una estructura de marcado de la información mediante etiquetas.
- 6. ¿Cómo se escriben las etiquetas? Las “etiquetas” de HTML, van rodeadas por corchetes angulares, cada etiqueta tiene unos atributos y eso atributos tiene unos valores.
- 7. ¿Cómo se muestra una página Web? HTML, es leído e interpretado, por un navegador la Web y nos muestra el contenido.
- 8. ¿Qué es la semántica HTML? La semántica HTML es la utilidad que tienen las etiquetas. Las etiquetas se crearon para realizar unas determinada funciones.
- 9. ¿Qué es la semántica HTML? Por ejemplo: ∞ <p></p> ∞ <blockquote></blockquote> ∞ <h1></h1>
- 10. ¿Qué es HTML5? HTML5 es última la actualización de HTML. Pero en realidad, HTML5 agrupar varias tecnologías de desarrollo de páginas Web.
- 11. ¿Por qué surge HTML5? HTML4, carece de características necesarias para soportar los nuevos contenidos, que se estaban incluyendo en las páginas Web y se necesitaban plugins.
- 12. ¿Por qué surge HTML5? Flash ha sido usado para reemplazar estas carencias, a la hora de desarrollar Web apps.
- 13. ¿Por qué surge HTML5? HTML5 es capaz de hacer esto sin plugins y ha originado: ∞ compatibilidad ∞ competencia
- 14. ¿Por qué surge HTML5? El uso de JavaScript y de FrameWorks, cómo: jQuery, Dojo.js, ExtJS, etc., han ayudado para mostrar los contenidos sin necesidad de usar plugins.
- 15. ¿Qué va a pasar con las Web en HTML4? HTML4 y HTML5 son 100% compatibles. HTML4 seguirá funcionando sin problemas en los navegadores.
- 16. ¿Cómo se crea una página Web? Tenemos que saber que una página Web, se crea a partir de diferentes tecnologías. ∞ HTML ∞ CSS ∞ JavaScript
- 17. ¿Cómo se crea una página Web? Podemos hacer 2 cosas a la hora de generar y maquetar una página Web.
- 18. ¿Cómo se crea una página Web? 1. Podemos escribir el código de JavaScript y CSS, dentro del documento HTML. Pero cómo tengas que hacer alguna modif icación, busca esta pistola.
- 19. ¿Cómo se crea una página Web? 2. Podemos escribir el código de JavaScript y CSS, en diferentes archivos y luego vincularlos al documento HTML. Esta opción te permite modif icar sólo las parte que deseamos.
- 20. ¿Cómo se declara un documento HTML5? Para empezar a usar HTML5, lo único que se tiene que hacer es colocar el DOCTYPE, al principio del documento.
- 21. ¿Cómo se declara un documento HTML5? Ejemplo: <!DOCTYPE html> La declaración está mucho más simplificada con HTML5.
- 22. ¿Cómo se declara un documento XHTML? <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtm l1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1 999/xhtml" xml:lang="es" lang="es" dir="ltr">
- 23. ¿Qué etiquetas se usan para maquetar en HTML5? La mayoría de las nuevas etiquetas de HTML5 no tienen una representación en pantalla y se comportan cómo un <div> o un <span>. Pero tienen un significado semántico superior.
- 24. <header> Hacer lo mismo, que la capa de la cabecera: <div id="header“> <header> está diseñada para reemplazar una capa (div) sin significado semántico.
- 25. <hgroup> Muchos header necesitan múltiples encabezados. Por ejemplo: Blog que tiene un título del nombre y el lema.
- 26. <hgroup> Permite escribir un h1, h2 y h3 dentro del header sin afectar el SEO. Permite usar otra etiqueta h1 dentro del contenido, sin perder prioridad en SEO.
- 27. <nav> Está diseñada para insertar la barra de navegación. Es recomendable usar listas (<ul>). Es aconsejable que sólo haya un elemento <nav> por página Web.
- 28. <section > Se usa para definir la sección donde se incluye el contenido. Se puede crear distintas secciones siempre y cuando cada sección tenga contenido diferentes.
- 29. <article > Define zonas únicas de contenido independiente. Por ejemplo: La página home de un Blog; cada artículo y sus comentarios sería un <article>.
- 30. <aside> El contenido que no esté relacionado con el objetivo primario de la página va en un aside.
- 31. <aside> Por ejemplo: En un Blog, el aside es la barra lateral de información o de enlaces a otro Blog, enlaces a redes sociales, etc.
- 32. <footer> Es el pie de página y representa la sección donde va la información sobre el autor, enlaces a contenido, información de copyright, avisos legales, etc.
- 33. E j e m p l o d e có d i go co n H T M L 5 <header> <hgroup> <h1>El Blog de Freddie Mercury</h1> <h2>Este Blog es un homenaje a la vida profesional de Freddie Mercury</h2> </hgroup> </header> <nav> Aquí va la Barra de navegación con sus botones </nav> <section> <article>Aquí va un post, con su titulo en h1</article> <article>Aquí va un post, con su titulo en h1</article> <article>Aquí va un post, con su titulo en h1</article> </section> <aside> Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook, posts anteriores, etc. </aside> <footer> Pie de página, copyright, avisos legales, etc. </footer>
- 34. E j e m p l o G rá f i co d e l có d i go d e H T M L 5
- 35. Ejemplo de la etiqueta article <section> <article> <header> <hgroup> <h1>El Blog de Freddie Mercury</h1> <h2>Este Blog es un homenaje a la vida profesional de Freddie Mercury</h2> Meta-datos, como fecha de creación del artículo. </hgroup> </header> <p> La etiqueta <b>Article</b> debe usarse para fragmento independientes de contenido... </p> <aside> Enlaces con artículos relacionados. </aside> <footer> Enlaces a las redes sociales. </footer> </article> </section>
- 36. Atención : div no está muerto Div se debe usar cuando se necesite un contendor de objetos, como por ejemplo una imagen. Div es un contender y no van a tener un significado semántico.
- 37. ¿Qué herramientas usaremos? Generadores de Código HTML5 http://switchtohtml5.com/ http://www.initializr.com/
- 38. ¿Qué herramientas usaremos? Generadores de Código HTML5 http://reuze.me/ http://foundation.zurb.com/download.php
- 39. ¿Qué herramientas usaremos? Generadores de Código CSS3 http://www.3dcsstext.com/ http://www.css3maker.com/