Scribd
Cargar
177 vistas

Lab - HTML5

El documento presenta la estructura básica de una página web en HTML5. Explica cómo crear la estructura global del documento usando las etiquetas <!DOCTYPE>, <html>, <head> y <body>. También describe cómo añadir elementos semánticos como <title>, <meta> y <link> en la cabecera, y cómo organizar el contenido en el cuerpo usando nuevos elementos como <div>. El objetivo es enseñar los conceptos fundamentales para diseñar una página web en HTML5.

Cargado por

Juan Diego Lazaro Mayta
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
177 vistas

Lab - HTML5

El documento presenta la estructura básica de una página web en HTML5. Explica cómo crear la estructura global del documento usando las etiquetas <!DOCTYPE>, <html>, <head> y <body>. También describe cómo añadir elementos semánticos como <title>, <meta> y <link> en la cabecera, y cómo organizar el contenido en el cuerpo usando nuevos elementos como <div>. El objetivo es enseñar los conceptos fundamentales para diseñar una página web en HTML5.

Cargado por

Juan Diego Lazaro Mayta
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 11

Desarrollo de Interfaces de Programación

HTML 5

CODIGO DEL CURSO:

Alumno(s) Nota

Lazaro Mayta Juan Diego

Grupo A
Ciclo I
Fecha de entrega 09/11/2019

DISEÑO DE SOFTWARE E INTEGRACIÓN DE SISTEMAS


PROGRAMA DE FORMACIÓN REGULAR
Desarrollo de Interfaces de programación Nro. DD-106
HTML 5 Página 1 de 11

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:
Desarrollo de Interfaces de programación Nro. DD-106
HTML 5 Página 2 de 11

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:
Desarrollo de Interfaces de programación Nro. DD-106
HTML 5 Página 3 de 11

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:
Desarrollo de Interfaces de programación Nro. DD-106
HTML 5 Página 4 de 11

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.
Desarrollo de Interfaces de programación Nro. DD-106
HTML 5 Página 5 de 11

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:
Desarrollo de Interfaces de programación Nro. DD-106
HTML 5 Página 6 de 11

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.
Desarrollo de Interfaces de programación Nro. DD-106
HTML 5 Página 7 de 11

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:
Desarrollo de Interfaces de programación Nro. DD-106
HTML 5 Página 8 de 11

EJERCICIOS

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


Formatea el texto de instituciones.html según se muestra.

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:
Desarrollo de Interfaces de programación Nro. DD-106
HTML 5 Página 9 de 11
Desarrollo de Interfaces de programación Nro. DD-106
HTML 5 Página 10 de 11

OBSERVACIONES:
 Al momento de visualizar las imágenes del ejercicio nº2 con el internet Explorer, no podía que
tenia ya que presentaba como un pequeño error o bug de visualización. Pero si lo visualizábamos
con otro navegador, se ejecutaba con normalidad.
 Las etiquetas son fáciles de identificar. Están rodeadas por «corchetes angulares» en otras
palabras los símbolos < y >.
 Algunas etiquetas no es obligatorio terminar con “/”.
 Si tenemos un problema más adelante cuando se muestren los acentos en nuestra página web
significa que hay un problema de codificación.
 Para insertar textos con atributos de negrita o cursiva se usaba <b></b> y <i></i>
respectivamente.

CONCLUSIONES:
 HTML es un lenguaje de etiquetas no de programación.
 No necesita de grandes conocimientos cuando se cuenta con un editor de páginas web.
 Lenguaje de fácil aprendizaje.
 Se puede ejecutar en diferentes navegadores.

También podría gustarte