Embedded Files
GUÍA TEÓRICO-PRÁCTICA – UNIDAD II
GUÍA TEÓRICO-PRÁCTICA – UNIDAD II
CONSTRUCCIÓN Y ORGANIZACIÓN DE CONTENIDOS WEB CON HTML5
CONSTRUCCIÓN Y ORGANIZACIÓN DE CONTENIDOS WEB CON HTML5
INSTITUTO UNIVERSITARIO DE TECNOLOGÍA INDUSTRIAL
RODOLFO LOERO ARISMENDI
ASIGNATURA: Desarrollo de la Web
SECCIÓN: 4DA
UNIDAD: II | SEMANAS: 6-10
📚 INTRODUCCIÓN A LA UNIDAD II
📚 INTRODUCCIÓN A LA UNIDAD II
En esta unidad aprenderás a organizar y enriquecer el contenido de páginas web utilizando etiquetas HTML5. No solo crearás texto, sino que integrarás multimedia, formularios, tablas y navegación, con enfoque en accesibilidad y experiencia de usuario.
🗂️ TEMAS Y EJERCICIOS PRÁCTICOS
🗂️ TEMAS Y EJERCICIOS PRÁCTICOS
TEMA 1: ETIQUETAS BÁSICAS DE TEXTO
TEMA 1: ETIQUETAS BÁSICAS DE TEXTO
📖 Teoría Sencilla
Etiqueta | Función | Ejemplo
-------------------------|--------------------------------------------------------------|----------------------------------------
<h1> a <h6> | Encabezados por jerarquía (h1 más importante, h6 menos) | <h1>Título Principal</h1>
<p> | Párrafo de texto en bloque | <p>Este es un párrafo</p>
<strong> | Énfasis importante (negrita semántica) | <strong>Importante</strong>
<em> | Énfasis leve (cursiva semántica) | <em>Destacado</em>
<ul> / <ol> | Listas desordenadas (puntos) / ordenadas (números) | <ul><li>Ítem</li></ul>
<blockquote> | Cita de texto externo con sangría | <blockquote>Cita famosa</blockquote>
<code> / <pre> | Código en línea / bloque preformateado con espacios | <code>console.log()</code>
✍️ Ejercicio Práctico 1: "Artículo de Blog"
Crea un documento HTML que contenga:
Un título principal con <h1>
Dos subtítulos con <h2>
Tres párrafos con <p>, usando <strong> y <em> al menos una vez cada uno
Una lista ordenada con 3 pasos de un proceso
Una cita con <blockquote> que incluya autor
Pista: Prueba tu código en https://www.w3schools.com/html/tryit.asp
TEMA 2: NAVEGACIÓN Y ENLACES
TEMA 2: NAVEGACIÓN Y ENLACES
📖 Teoría Sencilla
Concepto | Descripción | Ejemplo
------------------|---------------------------------------------------------------|----------------------------------------------
Enlace interno | Apunta a otra sección de la misma página | <a href="#contacto">Ir a Contacto</a>
Enlace externo | Apunta a un sitio web externo | <a href="https://ejemplo.com">Visitar</a>
Ruta relativa | Referencia a archivo en la misma carpeta o estructura | <a href="pagina2.html">Siguiente</a>
Ruta absoluta | URL completa con protocolo y dominio | <a href="https://sitio.com/ruta">Enlace</a>
target="_blank" | Abre el enlace en una nueva pestaña o ventana | <a href="..." target="_blank">Nuevo</a>
Ancla (#) | Salta a una sección específica usando el atributo id | <a href="#seccion2">Ir</a> + <div id="seccion2">
✍️ Ejercicio Práctico 2: "Menú de Navegación"
Crea una estructura de navegación que incluya:
Una lista no ordenada con 4 enlaces: Inicio, Servicios, Galería, Contacto
El enlace "Servicios" debe contener una sublista con 3 opciones (menú anidado)
El enlace "Contacto" debe abrirse en nueva pestaña
Un enlace ancla que salte a una sección "Formulario" más abajo en la página
Usa rutas relativas para los enlaces internos
Pista: Recuerda que para el menú anidado, una <ul> puede ir dentro de un <li>.
TEMA 3: MULTIMEDIA Y CONTENIDO EXTERNO
TEMA 3: MULTIMEDIA Y CONTENIDO EXTERNO
📖 Teoría Sencilla
Etiqueta | Atributos Clave | Función
-----------|----------------------------------------|--------------------------------------------------------
<img> | src, alt, width, height | Insertar imagen con texto alternativo y dimensiones
<audio> | src, controls, autoplay, loop | Reproductor de audio nativo (MP3, WAV, OGG)
<video> | src, controls, poster, width, height | Reproductor de video nativo (MP4, WebM, OGG)
<iframe> | src, width, height, allow, loading | Incrustar contenido externo (YouTube, Google Maps, PDFs)
Regla de oro: Siempre usa el atributo alt en imágenes para accesibilidad.
✍️ Ejercicio Práctico 3: "Galería Multimedia"
Crea una sección que contenga:
Una imagen con src de https://picsum.photos/300/200?random=1 y alt descriptivo
Un reproductor de audio con controles (usa un archivo .mp3 de prueba o URL pública)
Un video incrustado de YouTube usando <iframe> (busca un video educativo)
Cada elemento debe tener un título con <h3> y una breve descripción con <p>
Pista: Para YouTube, usa la opción "Compartir → Insertar" para obtener el código iframe.
TEMA 4: CONTENEDORES, TABLAS Y SEMÁNTICA
TEMA 4: CONTENEDORES, TABLAS Y SEMÁNTICA
📖 Teoría Sencilla
Etiqueta | Función | Buenas Prácticas
------------------------|---------------------------------------------------------------|----------------------------------------------------
<div> | Contenedor genérico de bloque | Usar con clases o IDs para estilos y estructura
<section> | Sección temática de contenido relacionado | Agrupar contenido con un encabezado y tema común
<article> | Contenido independiente (blog, noticia, comentario) | Puede existir fuera del contexto por sí mismo
<header> / <footer> | Encabezado y pie de página o sección | Usar una vez por página o dentro de cada sección
<table> | Tabla de datos estructurados | Usar <thead>, <tbody>, <tfoot> y <th> para accesibilidad
<figure> / <figcaption> | Imagen, gráfico o video con leyenda descriptiva | Mejora accesibilidad, SEO y comprensión del contenido
✍️ Ejercicio Práctico 4: "Tabla de Horarios"
Crea una tabla que muestre horarios de clase con:
Encabezados: Día, Materia, Hora, Aula, Docente
3 filas de datos de ejemplo
Bordes visibles usando el atributo border="1"
Una celda con texto en negrita usando <strong>
Envuelve la tabla en un <section> con título "Mi Horario Semanal"
Pista: Usa <thead> para encabezados y <tbody> para filas de datos.
TEMA 5: FORMULARIOS Y METADATOS
TEMA 5: FORMULARIOS Y METADATOS
📖 Teoría Sencilla
Elemento | Atributos Comunes | Uso
--------------------|------------------------------------------------------|--------------------------------------------------------
<form> | action, method, id, enctype, novalidate | Contenedor de campos para enviar datos al servidor
<label> | for (vincula con id del input), id, class | Etiqueta descriptiva para accesibilidad (obligatoria)
<input> | type, name, placeholder, required, value, min, max | Campo de entrada de datos (texto, email, password, etc.)
<textarea> | rows, cols, placeholder, name, maxlength, required | Área de texto multilínea para comentarios o mensajes
<select> / <option> | name, id, multiple, value, selected | Lista desplegable de opciones para seleccionar una o varias
<meta> | name, content, charset, http-equiv | Metadatos para SEO, codificación, viewport, etc.
Tipos de input más usados: text, email, password, number, date, checkbox, radio, submit
✍️ Ejercicio Práctico 5: "Formulario de Contacto"
Crea un formulario que solicite:
Nombre (texto, obligatorio)
Correo electrónico (type="email", obligatorio)
Materia de interés (lista desplegable con 3 opciones)
Mensaje (textarea, 4 filas)
Botón de envío
Requisitos adicionales:
Cada campo debe tener su <label> vinculado con for
Los campos obligatorios deben tener required
Agrega dos etiquetas <meta> en el <head>: charset y description
🧠 EJERCICIOS DE REFUERZO (OPCIONAL)
🧠 EJERCICIOS DE REFUERZO (OPCIONAL)
Investiga: ¿Cuál es la diferencia entre <b> y <strong>? ¿Cuándo usar cada uno?
Prueba: Crea un enlace que descargue un archivo PDF usando el atributo download.
Explora: Incrusta un mapa de Google Maps usando <iframe> en tu página.
Page updated
Google Sites
Report abuse