Lab 11 - CCS 1

DESARROLLO DE APLICACIONES EN
INTERNET
LABORATORIO N° 01
HTML 5
DISEÑO DE SOFTWARE E INTEGRACIÓN DE SISTEMAS

PROGRAMA DE FORMACIÓN REGULAR
Desarrollo de Aplicaciones en Internet – Lab. 01 Nro. DD-106
HTML 5 Página 2 de 17
CODIGO DEL CURSO:
Alumno(s) Nota
Sebastian Andre Carrion Castro
Grupo B
Ciclo IV
Fecha de entrega
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
ESTRUCTURA DE LA CABECERA
Etiqueta <!DOCTYPE>
En primer lugar necesitamos indicar el tipo de documento que estamos

creando. Esto en HTML5 es extremadamente sencillo:
Etiqueta <html>
Luego de declarar el tipo de documento, debemos comenzar a construir

la estructura HTML. Como siempre, la estructura tipo árbol de este
lenguaje tiene su raíz en el elemento <html>. Este elemento envolverá al
resto del código:
NOTA: El atributo lang en la etiqueta de apertura <html> es el único atributo que necesitamos especificar en
HTML5. Este atributo define el idioma humano del contenido del documento que estamos creando, en este
caso es por español.
Conceptos básicos: HTML usa un lenguaje de etiquetas para construir páginas web.
Estas etiquetas HTML son palabras clave y atributos rodeados de los signos mayor y
menor (por ejemplo, <html lang="es">). En este caso, html es la palabra clave y lang es el
atributo con el valor es. La mayoría de las etiquetas HTML se utilizan en pares, una
etiqueta de apertura y una de cierre, y el contenido se declara entre ellas. En nuestro
ejemplo, <html lang="es"> indica el comienzo del código HTML y </html> indica el final.
Compare las etiquetas de apertura y cierre y verá que la de cierre se distingue por una
barra invertida antes de la palabra clave (por ejemplo, </html>). El resto de nuestro
código será insertado entre estas dos etiquetas: <html> ... </html>.
Etiqueta <head>
El código HTML insertado entre las etiquetas <html> tiene que ser dividido entre dos secciones
principales. Al igual que en versiones previas de HTML, la primera sección es la cabecera y la
segunda el cuerpo. El siguiente paso, por lo tanto, será crear estas dos secciones en el código
usando los elementos <head> y <body> ya conocidos.
El elemento <head> va primero, por supuesto, y al igual que el resto de los elementos
estructurales tiene una etiqueta de apertura y una de cierre:
Etiqueta <body>
La siguiente gran sección que es parte principal de la organización de un documento HTML es

el cuerpo. El cuerpo representa la parte visible de todo documento y es especificado entre
etiquetas <body>. Estas etiquetas tampoco han cambiado en relación con versiones previas de
HTML:
Etiqueta <meta>
Es momento de construir la cabecera del documento. Algunos cambios e innovaciones fueron

incorporados dentro de la cabecera, y uno de ellos es la etiqueta que define el juego de
caracteres a utilizar para mostrar el documento. Ésta es una etiqueta <meta> que especifica
cómo el texto será presentado en pantalla:
La innovación de este elemento en HTML5, como en la mayoría de los casos, es solo

simplificación. La nueva etiqueta <meta> para la definición del tipo de caracteres es más
corta y simple. Por supuesto, podemos cambiar el tipo iso-8859-1 por el necesario para
nuestros documentos y agregar otras etiquetas <meta> como description o keywords para
definir otros aspectos de la página web, como es mostrado en el siguiente ejemplo:
Etiqueta <title>
La etiqueta <title>, como siempre, simplemente especifica el título del documento, y no hay
nada nuevo para comentar:
NOTA: El texto que va entre la etiqueta TITTLE es el texto que aparece en la ventana superior del navegador.
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 <link> es la incorporación de archivos con estilos CSS:
NOTA: El identificador “rel” significa “relación” y es acerca de la relación entre el documento y el archivo que
estamos incorporando por medio de “href”.
* Con esta última etiqueta finalizamos nuestro trabajo en la cabecera, ahora es tiempo de trabajar con el
cuerpo… Donde la magia ocurre*
ESTRUCTURA DEL CUERPO
La estructura del cuerpo (el código entre las etiquetas <body>) generará la parte visible del documento. Este es el
código que producirá nuestra página web.
El elemento DIV
<div> </div>
El elemento <div> comenzó a dominar la escena. Con el surgimiento de webs más interactivas y la integración de
HTML, CSS y Javascript, el uso de <div> se volvió una práctica común. Pero este elemento, así como <table>, no
provee demasiada información acerca de las parte del cuerpo que está representando. Desde imágenes a menús,
textos, enlaces, códigos, formularios, cualquier cosa puede ir entre las etiquetas de apertura y cierre de un
elemento <div>. En otras palabras, la palabra clave div solo especifica una división en el cuerpo, como la celda de
una tabla, pero no ofrece indicio alguno sobre qué clase de división es, cuál es su propósito o qué contiene.
Organización
El siguiente esquema representa un diseño común encontrado en la mayoría de los sitios webs estos días. A
pesar del hecho de que cada diseñador crea sus propios diseños, en general podremos identificar las siguientes
secciones en cada sitio web estudiado:
Donde todo
desarrollador coloca un
menú de la página Web.
En la parte superior,
descripto como
Cabecera, se encuentra
el espacio donde
usualmente se ubica el
logo, título, subtítulos y
una corta descripción
del sitio web o la página
Complemento de la cabecera, donde

normalmente se muestra información
acerca del sitio web, el autor o la empresa
El contenido más relevante de una página web se encuentra, en casi todo diseño, ubicado en su centro.
Esta sección presenta información y enlaces valiosos. La mayoría de las veces es dividida en varias
filas y columnas. En el ejemplo de la Figura 1-1 se utilizaron solo dos columnas: Información
Principal y Barra Lateral, pero esta sección es extremadamente flexible y normalmente diseñadores la
adaptan acorde a sus necesidades insertando más columnas, dividiendo cada columna entre bloques
más pequeños o generando diferentes distribuciones y combinaciones
En la siguiente imagen se aprecian los campos mencionados en un ejemplo sencillo de una página Web bien
estructurada.
Identificadores:
1. Cabecera
2. Barra de Navegación
3. Sección de Información Principal
4. Barra Lateral
5. El pie o la barra institucional
NOTA: Esta simple presentación de un blog nos puede ayudar a entender que cada sección definida en un sitio
web tiene un propósito. A veces este propósito no es claro pero en esencia se encuentra siempre allí,
ayudándonos a reconocer cualquiera de las secciones descriptas anteriormente en todo diseño.
HTML5 considera esta estructura básica y provee nuevos elementos para diferenciar y declarar cada una de sus
partes. A partir de ahora podemos decir al navegador para qué es cada sección:
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:
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:
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>:
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.
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:
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:
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>:
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.
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:
OBSERVACIONES:
El laboratorio trata de desarrollar una pequeña plataforma o una base de

sitio web esta tiene como finalidad aprender a ver los errores que
corresponden al momento de trabajar en el sistema css y asi poder
cambiarlo de una manera concurrente para asi tener los conocimientos
básicos y medio avanzados ante las realizaciones de las plataformas
virtuales.
CONCLUSIONES:
Tener el conocimiento básico avanzado para poder hacer las practicas del laboratorio y poder tener
como base clave del trabajo final.
Abrir varios tipos de documentos a la par para poder hacer las practicas con una guía y no tener errores
al realizar los laboratorios; tambien para poder ver de manera correcta todo lo que nos pida realizar.
Realizar la configuración pequeña de una página web y todas las opciones que esta nos proporciona y
que nosotros mismos podemos tener algo mas que realizar en esta plataforma.
Tener conocimiento de las herramientas que nos da a conocer el CSS y las acciones o comandos
permitidos que tenemos para configurar a lo largo de la plataforma digital.

Lab 11 - CCS 1

Cargado por

Copyright:

Formatos disponibles

Lab 11 - CCS 1

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Lab 11 - CCS 1

Cargado por

Copyright:

Formatos disponibles

DESARROLLO DE APLICACIONES EN

DISEÑO DE SOFTWARE E INTEGRACIÓN DE SISTEMAS

CODIGO DEL CURSO:

Sebastian Andre Carrion Castro

III.- FUNDAMENTO TEÓRICO:

IV.- NORMAS EMPLEADAS:

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

CREANDO LA CARPETA DE TRABAJO

En primer lugar necesitamos indicar el tipo de documento que estamos

Luego de declarar el tipo de documento, debemos comenzar a construir

La siguiente gran sección que es parte principal de la organización de un documento HTML es

Es momento de construir la cabecera del documento. Algunos cambios e innovaciones fueron

La innovación de este elemento en HTML5, como en la mayoría de los casos, es solo

ESTRUCTURA DEL CUERPO

Complemento de la cabecera, donde

EJECUTAR UNA PÁGINA WEB

4. Ahora haga doble click sobre el archivo html.

1. Ejecute el archivo html y observe el resultado.

DENTRO DEL CUERPO

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

Ejercicio 1.3: IMÁGENES; TABLAS.

El laboratorio trata de desarrollar una pequeña plataforma o una base de

También podría gustarte