DISEÑO DE INTERFACES DE

PROGRAMACIÓN

LABORATORIO N° 07

HTML 5
CODIGO DEL CURSO:

Alumno(s) Nota

Grupo
Ciclo IV
Fecha de entrega

DISEÑO DE SOFTWARE E INTEGRACIÓN DE SISTEMAS

PROGRAMA DE FORMACIÓN REGULAR
 Diseño de interfaces de programación Nro. DD-106
HTML 5 Página 1 de 10

I.- OBJETIVOS:
 Conocer los aspectos básicos para diseñar una página con HTML.
 Usar herramientas incorporadas a las tecnologías HTML5.
 Entender la estructura de una página HTML, el lenguaje de etiquetas.

II.- SEGURIDAD:
Advertencia:
En este laboratorio está prohibida la manipulación del
hardware, conexiones eléctricas o de red; así como la
ingestión de alimentos o bebidas.

III.- FUNDAMENTO TEÓRICO:

Revise sus diapositivas del tema antes del desarrollo del laboratorio.

IV.- NORMAS EMPLEADAS:

No aplica

V.- RECURSOS:
 En este laboratorio cada alumno trabará con un equipo con Windows 8.

VI.- METODOLOGÍA PARA EL DESARROLLO DE LA TAREA:

 El desarrollo del laboratorio es individual.

VII.- PROCEDIMIENTO:
Nota:
Las secciones en cursivas son demostrativas, pero sirven para que usted pueda instalar las herramientas de
desarrollo en un equipo externo.

CREANDO LA CARPETA DE TRABAJO

1. Una vez encendido el equipo cree una carpeta en la unidad D: con el nombre “D:\suNombre” y reemplace
“suNombre”
2. Listo! Ahora la carpeta que acaba de crear será su carpeta de trabajo durante el resto del semestre.

ESTRUCTURA GLOBAL

Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está
diferenciada, declarada y determinada por etiquetas específicas. En esta parte del laboratorio
vamos a ver cómo construir la estructura global de un documento HTML y los nuevos elementos
semánticos incorporados en HTML5

EJECUTAR UNA PÁGINA WEB

1. Una vez copiado el código de la última imagen proceda a probar el código en un navegador.
2. Guarde el archivo de texto con el nombre miPagina con la extensión .html (reemplace la extensión .txt).
3. Por defecto el ícono del archivo cambiará de un archivo de bloc de notas a un archivo de página web.

4. Ahora haga doble click sobre el archivo html.

5. El resultado debe de asemejarse al siguiente:
 Diseño de interfaces de programación Nro. DD-106
HTML 5 Página 2 de 10

Etiqueta <nav>

Siguiendo con nuestro ejemplo, la siguiente sección es la Barra de Navegación. Esta barra es generada en
HTML5 con el elemento <nav>:

COMPRUEBE EL CÓDIGO

1. Ejecute el archivo html y observe el resultado.

2. Responda ¿A qué representa la etiqueta Nav y qué uso le da a su identificador <ul> y <li>?

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
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>:
 Diseño de interfaces de programación Nro. DD-106
HTML 5 Página 3 de 10

IMPORTANTE: Las etiquetas que representan cada sección del documento están localizadas en el código en forma
de lista, unas sobre otras, pero en el sitio web algunas de estas secciones se ubicarán lado a lado (las columnas
Información Principal y Barra Lateral son un claro ejemplo). En HTML5, la responsabilidad por la representación de
los elementos en la pantalla fue delegada a CSS. El diseño será logrado asignando estilos CSS a cada elemento
HTML.

Etiqueta <aside>

En el diseño de un blog, por ejemplo, la Barra Lateral contendrá una lista de enlaces. En el ejemplo de la Figura, los
enlaces apuntan a cada una de las entradas del blog y ofrecen información adicional sobre el autor (número 4). La
información dentro de esta barra está relacionada con la información principal pero no es relevante por sí misma.
Siguiendo el mismo ejemplo podemos decir que las entradas del blog son relevantes pero los enlaces y las pequeñas
reseñas sobre esas entradas son solo una ayuda para la navegación pero no lo que al lector realmente le interesa.

NOTA: Cuando usamos el elemento “aside” no indicamos que va a ir posicionado en la parte izquierda, derecha o
central, son los estilos los que definen la posición, tamaño, etc. De hecho una etiqueta “aside” puede ir dentro de
un bloque “section”, solo representa la información que contiene.
 Diseño de interfaces de programación Nro. DD-106
HTML 5 Página 4 de 10

Etiqueta <footer>

Ya que se cuenta con una cabecera del cuerpo, seguida de secciones con ayuda para la navegación, información
importante y hasta una barra lateral con datos adicionales… Solo hace falta colocar el final del cuerpo. HTML 5
provee un elemento específico para este propósito llamado <footer>.

DENTRO DEL CUERPO

El cuerpo de nuestro documento está listo. La estructura básica de nuestro sitio web fue finalizada, pero aún tenemos
que trabajar en el contenido.

Los elementos HTML5 estudiados hasta el momento nos ayudan a identificar cada sección del diseño y asignar un
propósito intrínseco a cada una de ellas, pero lo que es realmente importante para nuestro sitio web se encuentra
en el interior de estas secciones.

Etiqueta <article>

El diseño considerado anteriormente es el más común y representa una estructura esencial para los sitios web estos
días, pero es además ejemplo de cómo el contenido clave es mostrado en pantalla. Del mismo modo que los blogs
están divididos en entradas, sitios web normalmente presentan información relevante dividida en partes que
comparten similares características. El elemento <article> nos permite identificar cada una de estas partes:
 Diseño de interfaces de programación Nro. DD-106
HTML 5 Página 5 de 10

Como puede observarse en el código, las etiquetas <article> se encuentran ubicadas dentro del elemento <section>.
Las etiquetas <article> en nuestro ejemplo pertenecen a esta sección, son sus hijos, del mismo modo que cada
elemento dentro de las etiquetas <body> es hijo del cuerpo. Y al igual que cada elemento hijo del cuerpo, las
etiquetas <article> son ubicadas una sobre otra como se observa a continuación:

Como una parte independiente del documento, el contenido de cada elemento <article> tendrá su propia estructura.
Para definir esta estructura, podemos aprovechar la versatilidad de los elementos <header> y <footer> estudiados
anteriormente. Estos elementos son portables y pueden ser usados no solo para definir los límites del cuerpo sino
también en cualquier sección de nuestro documento:
 Diseño de interfaces de programación Nro. DD-106
HTML 5 Página 6 de 10

Etiqueta <hgroup>

Dentro de cada elemento <header>, en la parte superior del cuerpo o al comienzo de cada <article>, incorporamos
elementos <h1> para declarar un título. Básicamente, las etiquetas <h1> son todo lo que necesitamos para crear
una línea de cabecera para cada parte del documento, pero es normal que necesitemos también agregar subtítulos
o más información que especifique de qué se trata la página web o una sección en particular. De hecho, el elemento
<header> fue creado para contener también otros elementos como tablas de contenido, formularios de búsqueda o
textos cortos y logos.

Para construir este tipo de cabeceras, podemos aprovechar el resto de las etiquetas H, como <h1>, <h2>, <h3>,
<h4>, <h5> y <h6>, pero siempre considerando que por propósitos de procesamiento interno, y para evitar generar
múltiples secciones durante la interpretación del documento por parte del navegador, estas etiquetas deben ser
agrupadas juntas. Por esta razón, HTML5 provee el elemento <hgroup>:
 Diseño de interfaces de programación Nro. DD-106
HTML 5 Página 7 de 10

Ejercicio 1: TAGs para estructurar y formatear texto; LISTAS.

Formatea el texto de instituciones.html según se muestra.
Formatos:
• Color de fondo: #8CACD4
• Texto de título: fuente arial, color blanco, tamaño 2 puntos mayor que el estándar.
• Resto del documento: listas numeradas y no numeradas; negrita; subrayado; itálica(cursiva); fuente
arial / por defecto.
 Diseño de interfaces de programación Nro. DD-106
HTML 5 Página 8 de 10

Ejercicio 1.3: IMÁGENES; TABLAS.

Añade la última columna de la tabla de turismo.html y modifica la tabla para que muestre este
aspecto:

TAREA:

Investigue sobre algunas etiquetas adicionales que se han incorporado en html 5 y explique el
funcionamiento de cada una de ellas.
 Diseño de interfaces de programación Nro. DD-106
HTML 5 Página 9 de 10

OBSERVACIONES:

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

CONCLUSIONES:
__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________

__________________________________________________________________________________________