Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
15
ESTRUCTURAS GLOBALES
ESTRUCTURA DEL CUERPO
DENTRO DEL CUERPO
HTML5 Y CSS3 NIVEL I
DENTRO DEL CUERPO
<article>
<meta>
Hasta ahora solo hemos visto etiquetas que ayudan al contenido estructural del documento, pero ninguna, que apoye al contenido del documento
La aplicación de esta etiqueta es semejante a los blogs, hay información principal por cada entrada...
1. Esta la cabecera.
2. Barra de navegación.
3. Sección de Información principal.
4. Barra lateral
4. Pie de página
Cuando en nuestro contenido se presentan imágenes, es importante identificar estos elementos y se da la posibilidad de extraer estos mismos sin necesidad de que se afecte el flujo de información entregada.
Ejemplo:
Ejemplos de uso de la etiqueta <meta>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, Javascript">
Estructuras Globales
"...Más profundo nos introducimos dentro del documento, más cerca nos encontraremos de la definición del contenido..."
...>
<section>
<article>
Este es el texto de mi primer mensaje
</article>
<article>
Este es el texto de mi primer mensaje
</article>
</section>
<...
¿Esta bien como cerramos las etiquetas?
las etiquetas <figure>, pueden ser usadas para identificar estos elementos.
Ing.Esp: Santiago Muñoz de la Rosa
DENTRO DEL CUERPO
ESTRUCTURAS GLOBALES
ESTRUCTURA DEL CUERPO
Ejemplo de <figure>
<title>
Con HTML5 podemos diferenciar cada una de las partes del cuerpo y de esta manera se le dice al navegador para qué es cada sección
La etiqueta <title>, especifica el titulo y que más digo de esta etiqueta.... es solo <title> y yá!
Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas.
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<p>publicado 10-12-2011</p>
</header>
Este es el texto de mi primer mensaje
<figure>
<img src=”http://minkbooks.com/content/myimage.jpg”>
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<figcaption> ???
NUEVAS Y VIEJAS ETIQUETAS
ESTRUCTURAS GLOBALES
ESTRUCTURA DEL CUERPO
ESTRUCTURAS GLOBALES
<Header>
HTML5 fué desarrollado con la intención de simplificar, especificar y organizar el código.
<!DOCTYPE>
<link>
Provee información introductoria (Titulos, subtitulos y logos)
<mark>
Ahora se utiliza para los elementos de busqueda. El elemento <mark> resaltará la palabra que concuerda con la buscada.
Es necesario indicar el tipo de documento que estamos creando.
Este elemento es necesario para incorporar estilos como son las hojas de estilo en cascada (CSS) y también sirve para agregar codigo javascript.
Ejemplo: <span> Mis <mark>zapatos</mark> son cafés </span>
<!DOCTYPE html>
<small>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header><h1>Este es el título principal del sitio web</h1>
</header>
</body>
</html>
El propósito de <small> es presentar la llamada letra pequeña, como impresiones legales, derechos reservados, etc
En HTML5 ya no necesitamos especificar qué tipo de estilo estamos insertando. Asi que "type" pa afueraaaa
<small> Derechos Reservados © 2011 SENA Regional Cauca</small>
<link rel=”stylesheet” href=”misestilos.css”>
Nota: no confundir <head> con <header>
NUEVAS Y VIEJAS ETIQUETAS
ESTRUCTURAS GLOBALES
ESTRUCTURA DEL CUERPO
<cite>
Con <cite> se puede encerrar un titulo de un trabajo, de un libro, pelicula..etc...
<nav>
<html>
Ejemplo:
<span>Amo la película <cite> Batman: El caballero de la noche asciende </cite></span>
Al igual que la anterior gráfica con <nav> se define la barra de navegación.
<address>
No es una nueva etiqueta, pero cambia en un sentido más estructural. Ej: Imaginemos que queremos hacer referencia al contacto de la persona de cierto contenido que nos ha llamado la atención. Entonces ¿Dónde colocaríamos esta etiqueta?
Toda la estructura del documento tiene su raíz en esta etiqueta.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1"/>
<meta name="description" content="Ejemplo de HTML5"/>
<meta name="keywords" content="HTML5, CSS3, JavaScript"/>
<title>Este texto es el título del documento</title>
<link rel=”stylesheet” href=”misestilos.css”>
</head>
<body>
</body>
</html>
HTML5 es Flexible...
Ejemplo:
lang es un atributo
<!DOCTYPE html>
<html lang="es">
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>Inicio</li>
<li>Servicios</li>
<li>Clientes</li>
<li>contacto</li>
</ul>
</nav>
</body>
</html>
Recordar:
<ul> Define la lista
<li> Define item de la lista
<article>
<header>
<h1>Título del mensaje </h1>
</header>
Este es el texto del mensaje
<footer>
<address>
<a href="http://co.linkedin.com/pub/santiago-alberto-mu%C3%B1oz-de-la-rosa/26/543/49a">Santiago M</a>
</address>
</footer>
</article>
Hasta aquí hemos acabado las principales etiquetas de la cabecera. Ahora seguiremos con el cuerpo <body> del documento, donde la magia ocurre...
Nota: Para encontrar otros lenguajes para el atributo lang: www.w3schools.com/tags/ref_language_codes.asp
ESTRUCTURA DEL CUERPO
ESTRUCTURAS GLOBALES
ESTRUCTURA DEL CUERPO
NUEVAS Y VIEJAS ETIQUETAS
<section>
<head>
<time>
Primero apareció la etiqueta <table>...
En cada articulo sería bueno, agradable y lógico colocar la fecha y hora de publicación, para esta tarea aparece la nueva etiqueta <time>
La información principal es el contenido más relevante del documento, y puede ser representada en diversas formas. No obstante HTML5 utiliza la etiqueta <section> para especificar cada sección.
Al igual que en la anterior versión, dentro de la etiqueta de <html> aparecen las dos etiquetas principales. <head> y <body>.
Así que para la plantilla que hemos realizado, lo más indicado sería colocar esta etiqueta dento el <header> de la etiqueta <article>
Ejemplo:
Se necesitaba hacer lo mismo pero con menos código....Aparece <div>...
<article>
<header>
<h1>Título del mensaje dos</h1>
<time datetime="2013-05-27" pubdate>publicado 27-05-2013</time>
</header>
Este es el texto del mensaje</article>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1"/>
<meta name="description" content="Ejemplo de HTML5"/>
<meta name="keywords" content="HTML5, CSS3, JavaScript"/>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css"/>
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>Inicio</li>
<li>Servicios</li>
<li>Clientes</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
</body>
</html>
<head> es llamada la cabecera y definiremos:
- Titulo de la página web
- Set de caracteres
- Informacion general acerca del documento
- Archivos externos con: estilos y código Javascript
<table> y <div> no provee demasiada información acerca de la parte del cuerpo que esta representando.
ESTRUCTURA DEL CUERPO
DENTRO DEL CUERPO
ESTRUCTURAS GLOBALES
ESTRUCTURA DEL CUERPO
DENTRO DEL CUERPO
Preparemos nuestro Entorno de Desarrollo
<article>
<aside>
Ejemplo de <article>
<body>
HTML5 incorpora nuevos elementos permitiendo la identificación de las secciones del documento, como de la organización de su cuerpo.
Aprovechando la portabilidad de los elementos <header> y <footer>, y como se los había comentado antes, estas etiquetas no solo definen el cuerpo del documento, sino que también pueden definir cualquier sección.
Dentro de estas etiquetas se muestra lo visible del documento en HTML
La barra lateral, es una sección que da información relacionada al bloque de información principal. pero no es relevante.
Eso es <aside> Información secundaria...
Las nuevas etiquetas tienen afinidad con los que ellas están representado, es más cada nombre de la etiqueta tiene relación con el área que se desea mostrar .
Entonces tenemos lo siguiente:
Puedes utilizar cualquiera, no obstante te recomiendo:
Notepad++
Ejemplo: Los sitios web siempre están divididos por regiones o areas especificas con el fin de mejorar la experiencia de usuario y mejorar la interactividad. Igualmente en HTML5 existen etiquetas que tienen una estrecha relación con el area a representar
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
Nota: El elemento article no esta limitado por su nombre. Fué creado con la intención de contener unidades INDEPENDIENTES DE CONTENIDO
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1"/>
<meta name="description" content="Ejemplo de HTML5"/>
<meta name="keywords" content="HTML5, CSS3, JavaScript"/>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css"/>
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>Inicio</li>
<li>Servicios</li>
<li>Clientes</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
</body>
</html>
<section>
<article>
<header>
<h1>Título del mensaje uno</h1>
</header>
Este es el texto de mi primer mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<h1>Titulo del mensaje dos</h1>
</header>
Este es el texto de mi segundo mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
vamos a configurarlo!
DENTRO DEL CUERPO
ESTRUCTURA DEL CUERPO
ESTRUCTURAS GLOBALES
<article>
<footer>
Gracias...
<meta>
Lo único que nos resta es cerrar nuestra estructura del cuerpo. Por tanto HTML5 provee un elemento especifico para este propósito: <footer>
Comencemos a hacer lo aprendido
<h1> ha servido como elemento para resaltar el titulo del artículo, no obstante se puede dar la posibilidad de que hayan subtítulos o mas información que explique acerca de la página. Pero para evitar un alto procesamiento por causa de múltiples secciones, se agrupan los elementos H con <hgroup>
Algunos cambios fueron incorporados dentro de la cabecera, y es la especificación de la etiqueta meta. No olvidemos que esta etiqueta sirve para declarar información acerca del documento.
<section>
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
<hgroup>
</header>
Este es el texto de mi primer mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Título del mensaje dos</h1>
<h2>Subtítulo del mensaje dos</h2>
<hgroup>
</header>
Este es el texto de mi segundo mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1"/>
<meta name="description" content="Ejemplo de HTML5"/>
<meta name="keywords" content="HTML5, CSS3, JavaScript"/>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css"/>
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>Inicio</li>
<li>Servicios</li>
<li>Clientes</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>cita número uno</blockquote>
<blockquote>cita número dos</blockquote>
</aside>
<footer>
Sena Derechos Reservados © 2013-2014
</footer>
</body>
</html>
Nota: La información que brinda(n) la(s) etiqueta(s) <meta>, NO APARECE EN PANTALLA. SU FUNCIONALIDAD ESTA EN BRINDAR INFORMACION A LOS MOTORES DE BUSQUEDA O DISPOSITIVOS.