UNIVERSIDAD NACIONAL DE SAN ANTONIO ABAD DEL CUSCO
Departamento Académico de Ingeniería Informática y de Sistemas
Desarrollo de Software I
Guía de Laboratorio
Guía 02 – Introducción a HTML
1. TÍTULO: Guía 02 – Introducción a HTML
2. COMPETENCIAS A SEGUIR.
• Conocer los componentes básicos del lenguaje HTML
• Implementar páginas web básicas con HTML
3. REQUISITOS.
• Tener un equipo de cómputo mínimo de 5ta generación.
• Tener instalado algún editor de código HTML (Visual Code, Sublime Text, etc.).
4. BASES TEÓRICAS.
HTML (Lenguaje de Marcado de Hipertexto) es el código que se utiliza para estructurar y
desplegar una página web. HTML no es un lenguaje de programación; es un lenguaje que define la
estructura de un contenido. Consiste en una serie de elementos para encerrar diferentes partes del
contenido para que se vean o se comporten de una determinada manera.
Elementos de HTML:
Son los componentes básicos de una página web. Ejemplo.
Las partes principales del elemento son:
1. La etiqueta de apertura: es el nombre del elemento, encerrado por paréntesis angulares (< >)
de apertura y cierre. Establece dónde comienza a tener efecto el elemento.
2. La etiqueta de cierre: es igual que la etiqueta de apertura, pero incluye una barra de cierre (/)
antes del nombre de la etiqueta. Establece dónde termina el elemento.
3. El contenido: es el contenido del elemento, algún texto.
4. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido.
Los elementos pueden también tener atributos:
Un atributo debe tener siempre:
1. Un espacio entre este y el nombre del elemento (o del atributo previo, si hay otros atributos).
2. El nombre del atributo, seguido por un signo de igual ( = ).
3. Comillas de apertura y de cierre, encerrando el valor del atributo.
Los atributos siempre se incluyen en la etiqueta de apertura de un elemento, nunca en la de cierre.
Docente: Mtro. Ing. Luis Alvaro Monzón Condori Email: [Link]@[Link]
UNIVERSIDAD NACIONAL DE SAN ANTONIO ABAD DEL CUSCO
Departamento Académico de Ingeniería Informática y de Sistemas
Desarrollo de Software I
Guía de Laboratorio
Anidar elementos:
Anidar significa colocar elementos dentro de otros elementos. Por ejemplo, para resaltar una palabra
del texto podemos encerrarla en un elemento <strong>, que significa que dicha palabra se debe
enfatizar:
<p>Invertimos <strong> en tu educación</strong></p>
Debes asegurarte de que los elementos estén correctamente anidados: en el ejemplo, creaste la
etiqueta de apertura del elemento <p> primero, luego la del elemento <strong>, por lo tanto, debes
cerrar esta etiqueta primero, y luego la de <p>.
Esto es incorrecto:
<p>Invertimos <strong> en tu educación</p></strong>
Elementos vacíos:
Algunos elementos no poseen contenido, y son llamados elementos vacíos. Por ejemplo, el elemento
<img>:
<img src="images/[Link]" alt="Mi imagen de prueba">
Posee dos atributos, pero no hay etiqueta de cierre </img> ni contenido encerrado. Un elemento de
imagen no encierra contenido. Su propósito es desplegar una imagen en la página HTML, en el lugar
en que aparece.
Estructura de un documento HTML
• <!DOCTYPE html> El tipo de documento. Indica al navegador qué tipo de versión de HTML
estamos usando.
• <html></html> El elemento <html> . Este elemento encierra todo el contenido de la página
entera, también se le conoce como el elemento raíz (root element).
• <head></head> El elemento <head> Este elemento incluye todo aquello que no es contenido
visible por los visitantes de la página. Ejemplo: código CSS para dar estilo al contenido,
declaraciones del conjunto de caracteres, etc.
• <meta charset="utf-8"> Este elemento establece el conjunto de caracteres que tu documento
usará en utf-8, que incluye casi todos los caracteres de todos los idiomas.
• <title></title> El elemento <title> establece el título de tu página, que es el título que aparece
en la pestaña o en la barra de título del navegador cuando la página es cargada, y se usa para
describir la página cuando es añadida a los marcadores o como favorita.
• <body></body> El elemento <body>. Encierra todo el contenido que deseas mostrar a los
Docente: Mtro. Ing. Luis Alvaro Monzón Condori Email: [Link]@[Link]
UNIVERSIDAD NACIONAL DE SAN ANTONIO ABAD DEL CUSCO
Departamento Académico de Ingeniería Informática y de Sistemas
Desarrollo de Software I
Guía de Laboratorio
usuarios web que visiten tu página, ya sea texto, imágenes, videos, audios, y demás.
Descripción de algunos elementos:
Elementos de encabezados:
Permiten especificar que partes del contenido son encabezados, o sub encabezados. HTML posee
seis niveles de encabezados <h1> – <h6>
Elementos párrafos:
Los elementos <p> se utilizan para encerrar párrafos de texto; se usa frecuentemente.
Elementos listas:
Los dos tipos de listas más comunes son las listas ordenadas y las desordenadas:
• Las listas desordenadas son aquellas en las que el orden de los items no es relevante, como en
una lista de compras. Estas son encerradas en un elemento <ul> (unordered list).
• Las listas ordenadas son aquellas en las que el orden sí es relevante, como en un algoritmo.
Estas son encerradas en un elemento <ol> (ordered list ).
Cada elemento de la lista se coloca dentro de un elemento <li> (list item).
Vínculos:
Para implementar un vínculo, se utiliza el elemento <a>, la “a” es la abreviatura de la palabra inglesa
«anchor» («ancla»).
Docente: Mtro. Ing. Luis Alvaro Monzón Condori Email: [Link]@[Link]
UNIVERSIDAD NACIONAL DE SAN ANTONIO ABAD DEL CUSCO
Departamento Académico de Ingeniería Informática y de Sistemas
Desarrollo de Software I
Guía de Laboratorio
5. DESARROLLO DE LA PRÁCTICA.
5.1. Crear la estructura básica del documento HTML:
• Abre tu editor de código y crea un nuevo archivo con el nombre [Link].
• Escribe el siguiente código base:
• Guarda el archivo y ábrelo en tu navegador para verificar su funcionamiento.
5.2. Agregar contenido estructurado:
• Añade un subtítulo <h2> y un párrafo <p> con información sobre ti o un tema de interés.
• Incluye una lista ordenada <ol> con tres elementos y una lista desordenada <ul> con
otros tres.
Docente: Mtro. Ing. Luis Alvaro Monzón Condori Email: [Link]@[Link]
UNIVERSIDAD NACIONAL DE SAN ANTONIO ABAD DEL CUSCO
Departamento Académico de Ingeniería Informática y de Sistemas
Desarrollo de Software I
Guía de Laboratorio
5.3. Incorporar una imagen y un enlace:
• Agrega una imagen usando <img> con una URL válida o una imagen local.
• Añade un enlace <a> a un sitio web de interés.
5.4. Verificar y probar el código:
• Guarda los cambios y visualiza la página en tu navegador.
• Modifica el contenido y experimenta con diferentes etiquetas HTML.
6. EJERCICIOS PROPUESTOS
6.1. Estructura Básica: Crea un documento HTML con la estructura base (<!DOCTYPE html>,
<html>, <head>, <body>).
6.2. Encabezados y Párrafos: Añade un título principal (<h1>) y al menos tres niveles de
subtítulos (<h2> a <h4>), cada uno con un párrafo explicativo.
6.3. Listas HTML: Crea una lista ordenada <ol> y una lista desordenada <ul> sobre tus comidas,
películas o deportes favoritos, cada uno con mínimo 6 elementos.
6.4. Vínculos: Agrega 5 enlaces (<a>) a diferentes sitios web de interés, asegurándote de que al
menos uno se abra en una nueva pestaña con target="_blank".
6.5. Imágenes: Inserta 5 imágenes locales y 5 imágenes externas desde URL, asegurándote de que
ambas tengan un texto alternativo (alt).
6.6. Multimedia: Inserta un video de YouTube en tu página usando la etiqueta <iframe>.
6.7. Tablas en HTML: Construye una tabla <table> con tres columnas (Nombre, Edad, País) y
cuatro filas de datos.
7. PROCESO DE EVALUACIÓN:
Criterios de evaluación de la guía:
Criterios de evaluación Puntaje por Ítem Puntaje obtenido
1. Ejercicio 6.1 02
2. Ejercicio 6.2 03
3. Ejercicio 6.3 03
4. Ejercicio 6.4 03
5. Ejercicio 6.5 03
6. Ejercicio 6.6 03
7. Ejercicio 6.7 03
TOTAL 20
Docente: Mtro. Ing. Luis Alvaro Monzón Condori Email: [Link]@[Link]
