Scribd
Cargar
73 vistas7 páginas

Lab 11 - HTML5 Boza - Nilda

Este documento proporciona instrucciones para un laboratorio sobre el desarrollo de aplicaciones web utilizando HTML5. Explica la estructura básica de un documento HTML, incluidas las etiquetas <html>, <head>, <body>, <title> y <meta>. También cubre elementos semánticos como <header>, <footer> y <nav>. El documento guía a los estudiantes a través de ejercicios prácticos para crear estructuras de texto y tablas utilizando etiquetas HTML5.

Cargado por

Nilda Boza
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
73 vistas7 páginas

Lab 11 - HTML5 Boza - Nilda

Este documento proporciona instrucciones para un laboratorio sobre el desarrollo de aplicaciones web utilizando HTML5. Explica la estructura básica de un documento HTML, incluidas las etiquetas <html>, <head>, <body>, <title> y <meta>. También cubre elementos semánticos como <header>, <footer> y <nav>. El documento guía a los estudiantes a través de ejercicios prácticos para crear estructuras de texto y tablas utilizando etiquetas HTML5.

Cargado por

Nilda Boza
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 7

DESARROLLO DE APLICACIONES EN

INTERNET

HTML 5
CODIGO DEL CURSO:

Alumno(s) Nota

Boza Collanque, Nilda.

Grupo C
Ciclo 1er semestre
Fecha de entrega 24/11/2022

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 7

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 7

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 7

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:

Etiqueta <title>

La etiqueta <title>, como siempre, simplemente especifica el título del documento, y no hay
nada nuevo para comentar:
Desarrollo de Interfaces de programación Nro. DD-106
HTML 5 Página 4 de 7

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

EJERCICIOS

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


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

Ejercicio 2: 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 6 de 7

CONCLUSIONES

❖ HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las
cuales se determina la forma en la que debe aparecer en el navegados el texto, así como también las
imágenes y los demás elementos, en la pantalla del ordenador.

❖ Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor que <> y algunas
tienen atributos que pueden tomar algún valor.

❖ Las etiquetas se aplican de dos formas especiales:


❖ Se abren y se cierran <b>negrita</b> que se vería en el navegador como negrita.

❖ No pueden abrirse y cerrarse, como <hr /> porque se ve en el navegador como una línea horizontal.

❖ Algunas de las etiquetas básicas son: <html> <head> <body> <p>ejemplo</p> </html> </body>

❖ Vimos que con HTML es muy sencillo de realizar la creación de paginas web a partir de su lenguaje que
no tiene mayor complicación

❖ Este lenguaje es muy común para los programadores ya que se lleva a cabo su uso en la realización de sitios
web.

❖ Con el lenguaje html, se puede crear la estructura interna de páginas web estáticas y dinámicas, para
posteriormente subirlas a internet y puedan estar al alcance de todas las personas.

También podría gustarte