DESARROLLO DE

APLICACIONES WEB
¿Qué es internet?
Es una red de computadoras global.
¿Qué hace internet?
Permite que cualquier computadora conectada a esta
red pueda comunicarse con cualquier otra
computadora que también esté conectada a esta red.
¿Cómo es la estructura de internet?
Por lo general esta estructura es de cables aunque en la
actualidad tenemos conexiones inalámbricas.
¿Qué es WWW?
El término www (word-wide web) se refiere a la
«Telaraña Mundial» (red mundial de datos).
¿Qué es el hipertexto?
El término hipertexto lo acuñó Ted Nelson en 1965
para hacer referencia a una colección de documentos
(nodos) con referencias cruzadas (enlaces), la cual
podría explorarse con la ayuda de un programa
interactivo (navegador) que nos permitiese movernos
fácilmente de un documento a otro.
¿Qué es HTML?
HTML [HyperText Markup Language]. Dichos
documentos no son más que ficheros de texto a los que
se le añaden una serie de etiquetas. Dichas etiquetas
delimitan fragmentos del texto que han de aparecer en
un formato determinado y también sirven para crear
enlaces de un documento a otro (o, incluso, de una
parte de un documento a otra parte del mismo
documento).
Markup Lenguage
Un lenguaje de marcado o lenguaje de marcas es una
forma de codificar un documento que, junto con el
texto, incorpora etiquetas o marcas que contienen
información adicional acerca de la estructura del texto
¿Qué es la web?
Es uno de los tantos servicios que funciona dentro de
internet.

• Es una red absoluta mente virtual de

archivos conectados en principio por
links
¿Cómo funciona la web?
Cuando usamos un navegador (google crome, zafari,
Mozila firefox) estamos usando la web
¿Qué es un servidor?
Un servidor, como la misma palabra indica, es un
ordenador o máquina informática que está al “servicio”
de otras máquinas, ordenadores o personas llamadas
clientes y que le suministran a estos, todo tipo de
información.
Esquema general Cliente_servidor
¿Qué es un sitio web?
Es una colección de páginas de internet relacionadas y
comunes a un dominio de Internet o subdominio en la
World Wide Web en Internet. Una página web es un
documento HTML/XHTML que es accesible
generalmente mediante el protocolo HTTP de
Internet.
¿Qué es una página web?
Una página web es el nombre de un documento o
información electrónica capaz de contener texto,
sonido, vídeo, programas, enlaces y muchas otras
cosas, adaptada para la World Wide Web y que puede
ser accedida mediante un navegador.
¿Qué es una aplicación web?
Las aplicaciones web reciben este nombre porque se
ejecutan en la internet. Es decir que los datos o los
archivos en los que trabajas son procesados y
almacenados dentro de la web. Estas aplicaciones, por lo
general, no necesitan ser instaladas en tu computador.
El concepto de aplicaciones web está relacionado con el
almacenamiento en la nube. Toda la información se
guarda de forma permanente en grandes servidores de
internet y nos envian a nuestros dispositivos o equipos
los datos que requerimos en ese momento, quedando
una copia temporal dentro de nuestro equipo.
HTML5
HTML5 provee básicamente tres características:
ESTRUCTURA, ESTILO Y FUNCIONABILIDAD
HTML está a cargo de la estructura, CSS está a cargo
del estilo y JAVASCRIPT de la funcionabilidad

Ejemplo página volaris

HTML5
Las órdenes de HTML5 pueden ser de dos tipos,
cerradas o abiertas.

Las órdenes cerradas son aquellas que tienen una

palabra clave que indica el principio de la orden y otra
que indica el final.

Entre la orden inicial y la final se pueden encontrar otras

ordenes.
Las órdenes abiertas constan de una sola palabra clave.
Para diferenciar las órdenes del resto del texto del
documento se encierran entre los símbolos
<y>
Las órdenes cerradas incluyen el carácter / antes de la
palabra clave para indicar el final de la misma.
Una orden puede contener "parámetros". Estos
parámetros se indican a continuación de la palabra clave
de la orden.
Practica_1.html
Crear una carpeta con el nombre de ejercicios html.
Abrir el block de notas.
Guardar el documento como Practica_1.html en la
carpeta previamente creada.
Abrir el documento con el navegador de tu
preferencia.
Ingresar en el block de notas la frase “Esta es mi
primera página web”.
Guardar los cambios y actualizar el documento en el
navegador.
Incluir la etiqueta <strong> en la frase.
Incluir la etiqueta <I> en la frase.
Agregar el comentario “Este es un texto rojo”
Incluir la etiqueta <Font> en el comentario.
Agregar la atributo color=“red” después de la etiqueta
Font pero dentro del símbolo >.
Agregar el atributo size=7 después del atributo color.
Etiqueta <meta>
Es la etiqueta que define el juego de caracteres a
utilizar para mostrar el documento.
La nueva etiqueta para la definición del tipo de
caracteres es más corta y simple. Por supuesto,
podemos cambiar el tipo iso-8859-1 por UTF-8 o el
necesario para nuestros documentos y agregar otras
etiquetas como description o keywords para definir
otros aspectos de la página web, como es mostrado en
el siguiente ejemplo:
Ejemplo etiqueta <meta>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3,
JavaScript">
</head>
<body>
</body>
</html>
Etiqueta <title> </title>
Simplemente especifica el título del documento, y no
hay nada nuevo para comentar:
Ejemplo etiqueta <title>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset=“UTF-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
</head>
<body>
</body>
</html>
Etiqueta <link>
Otro importante elemento que va dentro de la cabecera del
documento es link . Este elemento es usado para
incorporar estilos, códigos Javascript, imágenes o iconos
desde archivos externos. Uno de los usos más comunes
para es la incorporación de archivos con estilos CSS.
Solo necesitamos dos atributos para incorporar nuestro
archivo de estilos: rel y href. El atributo rel significa
“relación” y es acerca de la relación entre el documento y el
archivo que estamos incorporando por medio de href.
Ejemplo de la etiqueta link
 <!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>
Estructura del cuerpo: Representación
visual de un clásico diseño web
Ejemplo:
Representación visual de un diseño
utilizando HTML5
Etiqueta <header>
Uno de los nuevos elementos incorporados en HTML5
es <header>. El elemento <header> no debe ser
confundido con <head> usado antes para construir la
cabecera del documento. Del mismo modo que
<head>, la intención de <header> es proveer
información introductoria (títulos, subtítulos, logos),
pero difiere con respecto a <head> en su alcance.
Mientras que el elemento <head> tiene el propósito
de proveer información acerca de todo el documento,
<header> es usado solo para el cuerpo o secciones
específicas dentro del cuerpo, ejemplo:
<!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>
Etiqueta <nav>
Barra de navegación
El elemento <nav> se encuentra dentro de las
etiquetas <body> pero es ubicado después de la
etiqueta de cierre de la cabecera (</header>), no
dentro de las etiquetas <header>. Esto es porque
<nav> no es parte de la cabecera sino una nueva
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>principal</li>
 <li>fotos</li>
 <li>videos</li>
 <li>contacto</li>
 </ul>
 </nav>
 </body>
Etiqueta <section>
Siguiendo nuestro diseño estándar nos encontramos
con las columnas que en la Figura 1-1 llamamos
Información Principal y Barra Lateral. Como
explicamos anteriormente, la columna Información
Principal contiene la información más relevante del
documento y puede ser encontrada en diferentes
formas (por ejemplo, dividida en varios bloques o
columnas). Debido a que el propósito de estas
columnas es más general, el elemento en HTML5 que
especifica estas secciones se llama simplemente
<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>principal</li>
 <li>fotos</li>
 <li>videos</li>
 <li>contacto</li>
 </ul>
 </nav>
 <section>
 </section>
 </body>

Párrafos, etiqueta <p>
Cuando llegamos al final de la línea de texto, éste
saltará automáticamente a la línea siguiente, pero si
queremos crear párrafos separados por una línea en
blanco utilizaremos la etiqueta <P>
<!DOCTYPE HTML>
<HTML>

<HEAD><TITLE> Párrafos</TITLE></HEAD>

<BODY>
<P>Esto es un párrafo dentro de una página
Web.
<P> Esto es otro párrafo que está separado del
anterior por una línea en blanco.
</BODY>

</HTML>
Encabezados
También podemos crear diferentes tamaños de
encabezados (también llamados cabeceras) para el texto
por ejemplo para señalar los distintos encabezados
tenemos los siguiente:
<!DOCTYPE HTML>
<HTML>
<HEAD><TITLE> Encabezados</TITLE></HEAD>
<BODY>
<H1>Secretaría de Educación Pública</H1>
<H2>Subsecretaría de Educación Media
Superior</H2>
<H3>Dirección General de Educación
Tecnológica Industrial</H3>
<H4>Centro de Bachillerato Tecnológico
industrial y de servicios No 171</H4>
<H5>Mariano Abasolo</H5>
<H6>Programación</H6>
</BODY>
</HTML>
Separador horizontal <hr>
Podemos utilizar una línea horizontal para separar
distintas partes de una página Web, y para ello
utilizaremos la etiqueta

<HR>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>SEPARADOR HORIZONTAL</TITLE>
</HEAD>
<BODY>

<CENTER>CBTis No. 171 </CENTER>

<HR>
Podemos utilizar una línea horizontal para
separar distintas partes de una página Web,
y para ello utilizaremos esta etiqueta
</BODY>
</HTML>
Separador horizontal acho
Se puede hacer más ancha la línea de separador
horizontal, utilizando la etiqueta:

<HR WIDTH="50%">
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset=“UTF-8”>
<TITLE>SEPARADOR HORIZONTAL
ANCHO</TITLE>
</HEAD>

<BODY>
<HR WIDTH="50%">
<CENTER>CBTis No. 171</CENTER>
<HR WIDTH="50">
</BODY>

</HTML>
Separador Noshade
Si queremos que el separador horizontal aparezca
incrustado en la página, podemos añadir a la etiqueta
<HR> el comando NOSHADE
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset=“utf-8”>
<TITLE>SEPARADOR HORIZONTAL
NOSHADE</TITLE>
</HEAD>
<BODY>
<HR NOSHADE>
<CENTER>C B T I s N o. 1 7 1</CENTER>
<HR NOSHADE>
</BODY>
</HTML>
Separador noshade size
Podemos hacer el que separador horizontal sea más grueso
añadiendo el comando SIZE=“grueso en píxeles” a la etiqueta
HR.

Si queremos crear un separador horizontal con un grosor de

20 píxeles y con sombras tendríamos que escribir la siguiente
línea de código

<HR NOSHADE SIZE="20">

<!DOCTYPE HTML>
<HTML>
<HEAD><meta charset=“utf-8”>
<TITLE>SEPARADOR
HORIZONTAL</TITLE></HEAD>

<BODY>
<HR NOSHADE SIZE="20">
<CENTER>CBTis No 171</CENTER>
<HR NOSHADE SIZE="20">
</BODY>

</HTML>
ALINEACIÓN DEL SEPARADOR
HORIZONTAL
Se puede alinear el separador horizontal a la izquierda o
a la derecha. Si no se especifica la alineación, el
separador aparecerá siempre centrado.

Para alinearlo a la izquierda utilizaremos el comando

ALIGN="LEFT“

Añadiendo a la etiqueta <HR>, <HR WIDTH="50%"

ALIGN="LEFT">
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset=“utf-8”>
<TITLE>SEPARADOR HORIZONTAL</TITLE>
</HEAD>

<BODY>
<HR WIDTH="50%" ALIGN="LEFT">
<CENTER>CBTis No. 171</CENTER>
<HR WIDTH="50%" ALIGN=“RIGHT">
</BODY>
</HTML>
Salto de línea
Para conseguir que las líneas nos sean continuas,
utilizaremos la etiqueta

<BR>
<!doctype html>
<HTML>
<HEAD><meta charset=“utf-8”>
<TITLE>SALTO DE LÍNEA</TITLE></HEAD>
<BODY>
SALTOS DE LÍNEA
<BR>
<HR>
<CENTER><H1>CBTis No 171</H1></CENTER>
<BR>
<BR>
<BR>
<CENTER><H1>Programación</H1></CENTER >
<BR>
<BR>
<BR>
<HR>
</BODY>
</HTML>
CITA TEXTUAL
Se insertará una cita textual utilizando las etiquetas:

<BLOCKQUOTE>.</BLOCKQUOTE>
<!doctype html>
<HTML>
<HEAD>
<meta charset=“utf-8”>
<TITLE>CITA TEXTUAL</TITLE></HEAD>
<BODY>
CITA TEXTUAL
<HR>
<CENTER><H1><B><I>CBTis No 171</I></B></H1></CENTER>
<CENTER><H1>Programación</H1></CENTER>
<HR>
<BLOCKQUOTE>
ISMAEL. HACE AÑOS, NO IMPORTA CUANTOS
EXACTAMENTE, HALLÁNDOME CON POCO O NINGÚN
DINERO EN LA BOLSA Y SIN NADA DE ESPECIAL INTERÉS
QUE ME TUVIERA EN TIERRA, PENSÉ QUE LO MEJOR
SERÍA DARME A LA MAR POR UNA TEMPORADA PARA
VER LA PARTE ACUÁTICA DEL MUNDO.
</BLOCKQUOTE>
</BODY>
</HTML>
VIÑETAS
Para poner una lista con viñetas se utilizarán las
siguientes etiquetas:

<UL>
<LI>
<LI>
<LI>
</UL>
<!doctype html>
<HTML>
<HEAD><meta charset=“utf-8”>
<TITLE>LISTA CON VIÑETAS></TITLE></HEAD>
<BODY>
<HR>
LISTA CON VIÑETAS
<HR>
<BR>
<BR>
<UL>
<LI>CAPITULO 1
<LI>CAPITULO 2
<LI>CAPITULO 3
</UL>
</BODY>
</HTML>
VIÑETAS CUADRADAS
Para agregar una lista con viñetas cuadradas se utilizará
la etiqueta:

<UL TYPE="square">
<!doctype html>
<HTML>
<HEAD><meta charset=“utf-8”>
<TITLE>LISTAS CON VIÑETAS CUADRADAS </TITLE> </HEAD>
<BODY>
<BR>
<BR>
LISTAS CON VIÑETAS CUADRADAS
<BR>
<BR>
<HR>
<CENTER><H1><B><I>CBTis No 171</I></B></H1></CENTER>
<CENTER><H1>Programación<H1></CENTER>
<HR>
<UL>
<LI>CAPITULO 1
<UL TYPE="square">
<LI>INTRODUCCIÓN
<LI>DESARROLLO
<LI>CONCLUSIONES
</UL>
<LI>CAPITULO 2
<LI>CAPITULO 3
</UL>
</BODY>
</HTML>
VIÑETAS ANIDADAS
Son listas de varios niveles que pueden combinar diferentes
tipos de listas.
<!doctype html>
<HTML>
<HEAD><TITLE>LISTAS CON VIÑETAS
ANIDADAS</TITLE></HEAD>
<BODY>
<HR>
<CENTER><H1><B><I>CBTis No 171</I></B></H1></CENTER>
<CENTER><H1>Programación</H1></CENTER>
<HR>
<UL>
<LI>CAPITULO 1
<UL>
<LI>INTRODUCCIÓN
<LI>DESARROLLO
<LI>CONCLUSIONES
</UL>
<LI>CAPITULO 2
<LI>CAPITULO 3
</UL>
</BODY>
</HTML>
Colores de fondo
Si se desea cambiar el color de fondo se utilizará la etiqueta
del atributo
<BGCOLOR=”#RRVVAA”>
dentro de la etiqueta <BODY>.
<!doctype html>
<HTML>
<HEAD><meta charset=“utf-8”><TITLE>Colores de
fondo</TITLE></HEAD>
<BODY BGCOLOR="#00FF00">
<FONT FACE="ARIAL"SIZE="14">
<HR>
<CENTER>CBTis No 171</CENTER>
<CENTER>Programación</CENTER>
<HR>
Podemos crear un texto que aparezca haber sido escrito con una máquina
de escribir,
para ello utilizamos las etiquetas
el texto aparecerá con el tipo de letra de las máquinas de escribir antiguas
(tipo Courier)
respetará los espacios en blanco y los saltos de línea sin necesidad de
incluir
ninguna etiqueta más.
</FONT>
</BODY>
</HTML>
Etiqueta <aside>
 <!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>principal</li>
 <li>fotos</li>
 <li>videos</li>
 <li>contacto</li>
 </ul>
 </nav>
 <section>
 </section>
 <aside>
 <blockquote>Mensaje número uno</blockquote>
 <blockquote>Mensaje número dos</blockquote>
 </aside>
 </body>
Etiqueta <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>principal</li>
 <li>fotos</li>
 <li>videos</li>
 <li>contacto</li>
 </ul>
 </nav>
 <section>
 </section>
 <aside>
 <blockquote>Mensaje número uno</blockquote>
 <blockquote>Mensaje número dos</blockquote>
 </aside>
 <footer>
 Derechos Reservados &copy; 2010-2011
 </footer>
 </body>
Etiqueta <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>principal</li>
 <li>fotos</li>
 <li>videos</li>
 <li>contacto</li>
 </ul>
 </nav>
 <section>
 <article>
 Este es el texto de mi primer mensaje
 </article>
 <article>
 Este es el texto de mi segundo mensaje
 </article>
 </section>
 <aside>
 <blockquote>Mensaje número uno</blockquote>
 <blockquote>Mensaje número dos</blockquote>
 </aside>
 <footer>
 Derechos Reservados &copy; 2010-2011
 </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>principal</li>
 <li>fotos</li>
 <li>videos</li>
 <li>contacto</li>
 </ul>
 </nav>
 <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>
 <aside>
 <blockquote>Mensaje número uno</blockquote>
 <blockquote>Mensaje número dos</blockquote>
 </aside>
 <footer>
 Derechos Reservados &copy; 2010-2011
 </footer>
 </body>
Etiqueta <hgroup>
 <!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>principal</li>
 <li>fotos</li>
 <li>videos</li>
 <li>contacto</li>
 </ul>
 </nav>
 <section>
 <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
 <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>
 <p>publicado 15-12-2011</p>
 </header>
Este es el texto de mi segundo mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados &copy; 2010-2011
</footer>
</body>
</html>
Etiqueta <figure>
La etiqueta <figure> fue creada para ayudarnos a ser
aún más específicos a la hora de declarar el contenido
del documento. Antes de que este elemento sea
introducido, no podíamos identificar el contenido que
era parte de la información pero a la vez independiente,
como ilustraciones, fotos, videos, etc… Normalmente
estos elementos son parte del contenido relevante pero
pueden ser extraídos o movidos a otra parte sin afectar o
interrumpir el flujo del documento. Cuando nos
encontramos con esta clase de información, las
etiquetas <figure> pueden ser usadas para identificarla:
 <!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>principal</li>
 <li>fotos</li>
 <li>videos</li>
 <li>contacto</li>
 </ul>
 </nav>
 <section>
 <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>
 <article>
 <header>
 <hgroup>
 <h1>Título del mensaje dos</h1>
 <h2>Subtítulo del mensaje dos</h2>
 </hgroup>
 <p>publicado 15-12-2011</p>
 </header>
 Este es el texto de mi segundo mensaje
 <footer>
 <p>comentarios (0)</p>
 </footer>
 </article>
 </section>
 <aside>
 <blockquote>Mensaje número uno</blockquote>
 <blockquote>Mensaje número dos</blockquote>
 </aside>
 <footer>
 Derechos Reservados &copy; 2010-2011
 </footer>
 </body>
 </html>