• Author / Uploaded
• Omar Rivera Zarate

Citation preview

HTML5 y CSS3 HTML es el acrónimo en inglés de HyperText Markup Language (en español se traduce como lenguaje de marcado de hipertexto). HTML 5 es el nombre que se usa para referirse a la quinta revisión del lenguaje HTML Las principales diferencias entre HTLM 5 y HTML 4 se pueden agrupar en cuatro grandes grupos: 

Sintaxis.- La sintaxis de HTML 5 es compatible con HTML 4 y XHTML 1. Con HTML 5 se puede usar sintaxis de XML. Con HTML 5 se puede usar sintaxis de MathML, que es un lenguaje usando para describir notaciones matemáticas, permitiendo la integración de fórmulas matemáticas a Internet.



Nuevos elementos y nuevos atributos.- Además de agregar elementos nuevos al lenguaje, a algunos elementos existentes se le agregan atributos, y otros elementos cambian. Para información detallada de estas diferencias, puedes consultar la página oficial de WC3 que describe las diferencias en lenguaje entre HTML 4 y HTML 5.



Modelo del contenido.- HTML 5 busca reducir la confusión en el concepto de bloques existente entre HTML 4 y CSS. Con este fin, define nuevas categorías y define qué elementos son parte de cada una. Para mayor información, puedes consultar la sección de cambios al modelo del contenido, descrito en la página oficial de WC3.



APIs.- HTML5 agregó nuevas APIs (un API son las siglas en inglés de Application Programming Interface, que es una biblioteca de utilerías que puede ser utilizada por algún software, en este caso aplicaciones de Internet), además de que extendió, cambió o hizo obsoletas algunas de las ya existentes.

Estructura básica del HTML5

Elementos HTML semánticos: El HTML 5 introduce una serie de elementos estructurales que facilitarán tanto el desarrollo de las páginas como también el análisis de las mismas por buscadores. 1

Lic. Omar A. Rivera Zarate

Los elementos de HTML 5 que ayudan a estructurar la parte semántica de la página son:  header: El elemento header debe utilizarse para marcar la cabecera de una página (contiene el logotipo del sitio, una imagen, un cuadro de búsqueda etc). El elemento header puede estar anidado en otras secciones de la página (es decir que no solo se utiliza para la cabecera de la página). 

nav: El elemento nav representa una parte de una página que enlaza a otras páginas o partes dentro de la página. Es una sección con enlaces de navegación. No todos los grupos de enlaces en una página deben ser agrupados en un elemento nav. Únicamente las secciones que consisten en bloques de navegación más importantes son adecuadas para el elemento de navegación.



section: El elemento section representa un documento genérico o de la sección de aplicación. Una sección, en este contexto, es una agrupación temática de los contenidos. Puede ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio encabezado. Una página de inicio de un sitio Web puede ser dividida en secciones para una introducción, noticias, información de contacto etc.



footer: El elemento footer se utiliza para indicar el pié de la página o de una sección. Un pie de página contiene información general acerca de su sección el autor, enlaces a documentos relacionados, datos de derechos de autor etc.



aside: El elemento aside representa una nota, un consejo, una explicación. Esta área es representada a menudo como barras laterales en las revistas impresas. El elemento puede ser utilizado para efectos de atracción, como las comillas tipográficas o barras laterales, para la publicidad, por grupos de elementos de navegación, y por otro contenido que se considera por separado del contenido principal de la página.



article: El elemento article representa una entrada independiente en un blog, revista, periódico etc. Cuando se anidan los elementos article, los artículos internos están relacionados con el contenido del artículo exterior. Por ejemplo, una entrada de blog en un sitio que acepta comentarios, el elemento article principal agrupa el artículo propiamente dicho y otro bloque article anidado con los comentarios de los usuario.

Para entender cómo se debe estructurar el HTML5 diseñaremos una página con las etiquetas mencionadas para ello debemos tener en consideración lo siguiente:   

Utilizaremos el editor de texto Sublime Text, para poder codificar las etiquetas. Crear una carpeta donde guardaremos el archivo index.html y las hojas de estilo que crearemos para este ejemplo. Trabajaremos con páginas de ayuda para agregar párrafos y colores a nuestro diseño. - http://es.lipsum.com/ - http://www.color-hex.com/

DESARROLLO: Pasó 01: Escribir la estructura básica de HTML5 en el editor Sublime Text.

2

Lic. Omar A. Rivera Zarate

Pasó 02: Agregaremos las etiquetas semánticas de HTML5

Pasó 03: Guardar el archivo con el nombre index.html y visualizar en el navegador.

Pasó 04: Ahora le daremos estilos al documento que creamos para darle una mejor apariencia. Crearemos un nuevo archivo al cual lo llamaremos estilo.css 3

Lic. Omar A. Rivera Zarate

Pasó 05: En el index.html, agregaremos la etiqueta para enlazar a la hoja de estilos llamado estilo.css para llamarlo, para ello agregamos la siguiente línea.

Pasó 06: Ahora empecemos a trabajar con el archivo estilo.css, daremos estilo al body que es el cuerpo del documento:

Guarde el archivo con las teclas CTRL+S y visualice en el navegador:

Aplicando estilos a las etiquetas semánticas de HTML5 Pasó 07: Ahora aplicaremos estilo a la etiqueta , recuerde los estilos se trabajan en el archivo estilo.css 4

Lic. Omar A. Rivera Zarate

Guarde el archivo con las teclas CTRL+S y visualice en el navegador:

Pasó 08: Ahora aplicaremos estilo a la etiqueta .

Guarde el archivo con las teclas CTRL+S y visualice en el navegador:

5

Lic. Omar A. Rivera Zarate

Pasó 09: Importante, por estructura del HTML5 la etiqueta se debe ubicar dentro de la etiqueta , así que vamos a ubicar el dentro del .

Pasó 10: Ahora aplicaremos estilo al .

6

Lic. Omar A. Rivera Zarate

Guarde el archivo con las teclas CTRL+S y visualice en el navegador:

Paso 11: Aplicaremos estilo a la etiqueta .

7

Lic. Omar A. Rivera Zarate

Guarde el archivo con las teclas CTRL+S y visualice en el navegador:

Pasó 12: Ahora aplicaremos estilo a la etiqueta .

8

Lic. Omar A. Rivera Zarate

Guarde el archivo con las teclas CTRL+S y visualice en el navegador:

Pasó 13: Agregaremos a nuestra página un artículo más, copie el articulo ya creado y péguelo al pie.

9

Lic. Omar A. Rivera Zarate

Guarde el archivo con las teclas CTRL+S y visualice en el navegador:

Pasó 14: Ahora alinearemos el texto del pie de página al centro, y le daremos un color.

10

Lic. Omar A. Rivera Zarate

Guarde el archivo con las teclas CTRL+S y visualice en el navegador:

Paso 15: Y por último a la palabra Orivezasoft del pie de página, le agregamos una etiqueta de enlace para que nos dirija a otra página web.

11

Lic. Omar A. Rivera Zarate

Guarde el archivo con las teclas CTRL+S y visualice en el navegador:

12

Lic. Omar A. Rivera Zarate