Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML5 II

No description
by

santiago muñoz

on 14 November 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML5 II

Gracias...
HTML5 Y CSS3 NIVEL I
Estructuras Globales
Ing.Esp: Santiago Muñoz de la Rosa
ESTRUCTURAS GLOBALES
<!DOCTYPE>
ESTRUCTURAS GLOBALES
Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas.
Es necesario indicar el tipo de documento que estamos creando.
<!DOCTYPE html>
ESTRUCTURAS GLOBALES
<html>
Toda la estructura del documento tiene su raíz en esta etiqueta.
<!DOCTYPE html>
<html lang="es">
</html>
ESTRUCTURAS GLOBALES
<head>
Al igual que en la anterior versión, dentro de la etiqueta de <html> aparecen las dos etiquetas principales. <head> y <body>.
ESTRUCTURAS GLOBALES
<body>
Dentro de estas etiquetas se muestra lo visible del documento en HTML
Entonces tenemos lo siguiente:
ESTRUCTURAS GLOBALES
<meta>
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.
ESTRUCTURAS GLOBALES
<link>
Este elemento es necesario para incorporar estilos como son las hojas de estilo en cascada (CSS) y también sirve para agregar codigo javascript.
ESTRUCTURAS GLOBALES
La etiqueta <title>, especifica el titulo y que más digo de esta etiqueta.... es solo <title> y yá!
ESTRUCTURAS GLOBALES
lang es un atributo
Nota: Para encontrar otros lenguajes para el atributo lang: www.w3schools.com/tags/ref_language_codes.asp
<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
<!DOCTYPE html>
<html lang="es">
<head>

</head>
<body>
</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.
<meta>
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">
¿Esta bien como cerramos las etiquetas?
<title>
<!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>
En HTML5 ya no necesitamos especificar qué tipo de estilo estamos insertando. Asi que "type" pa afueraaaa
<link rel=”stylesheet” href=”misestilos.css”>
ESTRUCTURAS GLOBALES
Hasta aquí hemos acabado las principales etiquetas de la cabecera. Ahora seguiremos con el cuerpo <body> del documento, donde la magia ocurre...
ESTRUCTURA DEL CUERPO
Primero apareció la etiqueta <table>...
Se necesitaba hacer lo mismo pero con menos código....Aparece <div>...
<table> y <div> no provee demasiada información acerca de la parte del cuerpo que esta representando.
ESTRUCTURA DEL CUERPO
HTML5 incorpora nuevos elementos permitiendo la identificación de las secciones del documento, como de la organización de su cuerpo.
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 .
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
ESTRUCTURA DEL CUERPO
Representación visual de un clasico diseño web
ESTRUCTURA DEL CUERPO
1. Esta la cabecera.
2. Barra de navegación.
3. Sección de Información principal.
4. Barra lateral
4. Pie de página
ESTRUCTURA DEL CUERPO
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
ESTRUCTURA DEL CUERPO
ESTRUCTURA DEL CUERPO
ESTRUCTURA DEL CUERPO
ESTRUCTURA DEL CUERPO
ESTRUCTURA DEL CUERPO
<Header>
Provee información introductoria (Titulos, subtitulos y logos)
Nota: no confundir <head> con <header>
<!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>
<nav>
Al igual que la anterior gráfica con <nav> se define la barra de navegación.
HTML5 es Flexible...
Recordar:
<ul> Define la lista
<li> Define item de la lista
<!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>
<section>
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.
<!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>
<aside>
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...
<!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>
<footer>
Lo único que nos resta es cerrar nuestra estructura del cuerpo. Por tanto HTML5 provee un elemento especifico para este propósito: <footer>
<!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 &copy; 2013-2014
</footer>

</body>
</html>
Hasta ahora solo hemos visto etiquetas que ayudan al contenido estructural del documento, pero ninguna, que apoye al contenido del documento
DENTRO DEL CUERPO
DENTRO DEL CUERPO
DENTRO DEL CUERPO
DENTRO DEL CUERPO
<article>
DENTRO DEL CUERPO
<article>
<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>
DENTRO DEL CUERPO
DENTRO DEL CUERPO
<article>
DENTRO DEL CUERPO
NUEVAS Y VIEJAS ETIQUETAS
NUEVAS Y VIEJAS ETIQUETAS
NUEVAS Y VIEJAS ETIQUETAS
Preparemos nuestro Entorno de Desarrollo
"...Más profundo nos introducimos dentro del documento, más cerca nos encontraremos de la definición del contenido..."
<article>
La aplicación de esta etiqueta es semejante a los blogs, hay información principal por cada entrada...
Ejemplo:
...>
<section>
<article>
Este es el texto de mi primer mensaje
</article>
<article>
Este es el texto de mi primer mensaje
</article>
</section>
<...
Ejemplo de <article>
Nota: El elemento article no esta limitado por su nombre. Fué creado con la intención de contener unidades INDEPENDIENTES DE CONTENIDO
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.
<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>
<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>
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.
las etiquetas <figure>, pueden ser usadas para identificar estos elementos.
Ejemplo de <figure>
<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> ???
HTML5 fué desarrollado con la intención de simplificar, especificar y organizar el código.
<mark>
Ahora se utiliza para los elementos de busqueda. El elemento <mark> resaltará la palabra que concuerda con la buscada.
Ejemplo: <span> Mis <mark>zapatos</mark> son cafés </span>
<small>
El propósito de <small> es presentar la llamada letra pequeña, como impresiones legales, derechos reservados, etc
<small> Derechos Reservados &copy; 2011 SENA Regional Cauca</small>
<cite>
Con <cite> se puede encerrar un titulo de un trabajo, de un libro, pelicula..etc...
Ejemplo:
<span>Amo la película <cite> Batman: El caballero de la noche asciende </cite></span>
<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?
Ejemplo:
<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>
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>
<time>
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:
<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>
Puedes utilizar cualquiera, no obstante te recomiendo:
Notepad++
vamos a configurarlo!
Comencemos a hacer lo aprendido
Full transcript