UNIVERSIDAD NACIONAL AUTÓNOMA DE NICARAGUA, LEÓN

FACULTAD DE CIENCIAS Y TECNOLOGÍA

DEPARTAMENTO DE COMPUTACIÓN

TÉCNICO SUPERIOR EN DESARROLLO WEB, UALN

MÓDULO: FUNDAMENTOS DE HTML

GUÍA DE LA UNIDAD II

MSc. Álvaro Rafael Altamirano Osorio

 BIENVENIDA

Estimados estudiantes: sean todos y todas bienvenidos a esta experiencia digital, donde
irán formándose a través de una serie de cursos para lograr el título de “Técnico Superior
en Desarrollo Web” en modalidad no presencial en el marco de la nueva “Universidad
Abierta en Línea de Nicaragua”.

Docente:

MSc. Álvaro Altamirano Osorio,

Profesor Titular, Departamento de Computación,

UNAN-LEÓN

INTRODUCCIÓN

En este tema veremos “Otros elementos HTML”, donde aprenderemos a crear páginas web que
contienen tablas y formularios. También aprenderemos a agrupar varios elementos en una página
web, para manipularlos como una sola unidad, esto es importante por ejemplo, para aplicarle un
mismo estilo a los elementos de un grupo.

Desarrollaremos el siguiente contenido:

 Tablas
 Formularios
 Agrupando elementos
 Class e Id

Competencia del Módulo:

Diseña páginas web estáticas para la creación de sitios web empleando el lenguaje de marcado de
hipertexto (HTML).

OBJETIVOS DE APRENDIZAJE

El objetivo de aprendizaje de este tema es el siguiente:

 Crear páginas web que contienen los siguientes elementos:

o Tablas
o Formularios
o Agrupación de elementos
ORIENTACIONES GENERALES

En esta unidad puedes participar en el foro de consultas cuando tengas alguna inquietud o duda,
para que recibas una respuesta por parte del profesor y los compañeros.

Recuerda que también puedes participar en el foro de retroalimentación, para que evalúes el
desarrollo de la unidad.

CALENDARIZACIÓN DE LAS ACTIVIDADES

I Parcial
Inicio Finalización Valor o
Tema Actividad
Fecha Hora Fecha Hora ponderación
Foro
10 puntos
Académico 2
Tarea
10 puntos
Individual 3
13/04/2020 08:00 30/04/2020 23:55 Tarea
Tema 2 Colaborativa 10 puntos
2 (WIKI)
Tarea
10 puntos
Individual 4
Examen de la
01/05/2020 08:00 02/05/2020 23:55 10 puntos
unidad II

DESCRIPCIÓN DE LAS ACTIVIDADES

Foro Académico 2
Actividad:
Análisis de caso: Otros elementos de HTML, Tablas y Formularios
Objetivos de
 Utilizar las etiquetas para crear tablas y formularios.
aprendizaje:
A partir de la lectura completa del documento principal de la unidad: “Otros
elementos HTML”:
https://goo.gl/gpdnTg
cada estudiante dará su aporte acerca del siguiente hilo conductor:

Metodología:  Explique qué etiquetas de HTML utilizaría para crear una página web que
presenta un formulario de autenticación, es decir, un formulario que pide
al visitante un nombre de usuario y una contraseña de acceso. Tome en
cuenta que dicho formulario debe quedar ubicado dentro de una tabla de
tamaño 1x1.
Cada estudiante debe participar dos veces: se requiere una intervención
principal y otra opinando acerca de la intervención de un compañero; ambas
 intervenciones deben estar argumentadas basadas en la literatura
recomendada.
Período de Podrán participar en el foro desde el 13 de Abril del 2020 (8:00) hasta el 30
ejecución: de Abril del 2020 (23:55)
Evaluación: Esta actividad tiene un valor de 10 puntos.
Lectura Obligatoria:
Recursos: Documento principal de la unidad: “Otros elementos HTML”. Disponible en:
https://goo.gl/gpdnTg

Tarea Individual 3
Actividad: Entrega de ejercicios sobre el uso de las otras etiquetas del lenguaje HTML
(Parte 1)
Objetivos de
 Utilizar las etiquetas para crear tablas y formularios.
aprendizaje:
A partir de la lectura completa del documento principal de la unidad: “Otros
elementos HTML”,
https://goo.gl/gpdnTg
cada estudiante deberá subir un archivo comprimido ZIP conteniendo los
archivos HTML con la solución de los ejercicios de esta tarea.
En dichos ejercicios se evaluará el uso de las etiquetas para crear tablas y
formularios.
Los enunciados de los ejercicios son los siguientes:

Ejercicio 1:
Crear una página web que contenga una tabla de tamaño 3x4 de tal manera
que en cada celda aparezca el nombre de un mes del año. Para aplicar bordes
a la tabla, utilice el atributo border, así:
Metodología: <table border="1">
Compruebe que sucede si en vez de 1 le pone valores mayores que 1.

Ejercicio 2:
Crear una página web que contenga una tabla como la siguiente:
Estadísticas del Examen de Admisión
Año Aprobados Reprobados Total
2010 1500 500 2000
2011 1800 300 2100
2012 1300 400 1700
Gran Total 5800

Ejercicio 3:
Crear una página web que contenga el siguiente formulario:
 Nota: la lista de selección contiene las opciones: opción1, opción2 y opción3.

Período de Podrán entregar la tarea desde el 13 de Abril del 2020 (8:00) hasta el 30 de
ejecución: Abril del 2020 (23:55)
Evaluación: Esta actividad tiene un valor de 10 puntos.
Lectura Obligatoria:
Recursos: Documento principal de la unidad: “Otros elementos HTML”. Disponible en:
https://goo.gl/gpdnTg

Tarea Colaborativa 2 (WIKI)

Actividad:
Resumen reflexivo sobre el diseño web adaptativo o responsivo
Objetivos de  Elaborar un resumen reflexivo sobre la temática del diseño web adaptativo
aprendizaje: o responsivo.

A partir de la lectura completa de la página sobre “Diseño web adaptivo o

responsivo”
http://www.ru.tic.unam.mx/tic/bitstream/handle/123456789/2097/art07_20
13.pdf?sequence=1&isAllowed=y
Metodología: cada grupo compuesto de 3 estudiantes, elaborará un resumen reflexivo de
50 palabras como mínimo y 300 palabras como máximo. El tema a desarrollar
será “Diseño web adapativo o responsivo” y los subtemas: qué es el diseño
web adaptivo o responsivo y sus beneficios. Cada grupo elegirá un
responsable que coordine el turno de edición.
Período de Podrán entregar la tarea desde el 13 de Abril del 2020 (08:00) hasta el 30 de
ejecución: Abril del 2020 (23:55)
Evaluación: Esta actividad tiene un valor de 10 puntos.
Lectura Obligatoria:
“Diseño web adaptativo o responsivo” Disponible en:
Recursos:
http://www.ru.tic.unam.mx/tic/bitstream/handle/123456789/2097/art07_20
13.pdf?sequence=1&isAllowed=y
 Tarea Individual 4
Actividad: Entrega de ejercicios sobre el uso de las otras etiquetas del lenguaje HTML
(Parte 2)
Objetivos de  Utilizar las etiquetas de HTML para agrupar elementos y aplicarles un
aprendizaje: estilo.

A partir de la lectura completa del documento principal de la unidad: “Otros

elementos HTML”,
https://goo.gl/gpdnTg
cada estudiante deberá subir un archivo comprimido ZIP conteniendo los
archivos HTML con la solución de los ejercicios de esta tarea.
En dichos ejercicios se evaluará el uso de las etiquetas para agrupar
elementos con el objetivo de aplicarles un estilo.
Los enunciados de los ejercicios son los siguientes:

Ejercicio 1:

¿Qué hace el siguiente código HTML? Observe los resultados en el navegador

y analice el código:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo uso del elemento div y del atributo class</title>
Metodología: <style>
.rojo {color:red;}
.azul {color:blue;}
</style>
</head>
<body>
<p>Primer párrafo.</p>
<div class="rojo">
<p>Segundo párrafo.</p>
<p>Tercer párrafo.</p>
</div>
<p>Cuarto párrafo.</p>
<div class="azul">
<p>Quinto párrafo.</p>
<p>Sexto párrafo.</p>
</div>
<div class="rojo">
<p>Séptimo párrafo.</p>
</div>
<p>Octavo párrafo.</p>
</body>
</html>
 Ejercicio 2:

Tomando como ejemplo el código HTML del ejercicio anterior, cree una
página web que contenga la tabla del ejercicio 2 y el formulario del ejercicio 3
de tal manera que el texto de la tabla aparezca en color azul y el texto del
formulario en color rojo. Utilice un DIV distinto para cada uno de ellos.

Período de Podrán entregar la tarea desde el 13 de Abril del 2020 (8:00) hasta el 30 de
ejecución: Abril del 2020 (23:55)
Evaluación: Esta actividad tiene un valor de 10 puntos.
Lectura Obligatoria:
Recursos: Documento principal de la unidad: “Otros elementos HTML”. Disponible en:
https://goo.gl/gpdnTg

REFERENCIAS

1. VAN LANCKER, Luc. (2012). HTML 5, Los fundamentos del Lenguaje. Ediciones ENI.
2. VAN LANCKER, Luc. (2011). HTML 5 y CSS 3. Ediciones ENI.
3. VEGA, John Freddy. VAN DER HENST, Christian. (2011). Guía HTML5, el presente de la web.
HTML5, CSS3 y Javascript.
4. GAUCHAT, Juan Diego. El gran libro de HTML5, CSS3 y Javascript. Ediciones técnicas
Marcombo.
5. CCM. (Publicado 10-04-2017). Formularios HTML. Disponible en sitio web:
http://es.ccm.net/contents/236-formularios-html
6. ComoCrearTuWeb. (Publicado 2005-2013). Curso de HTML5. Disponible en sitio web:
http://www.comocreartuweb.com/curso-de-html.html
7. Pes, Carlos en abrirllave.com. (Publicado 2014-2017). Tutorial de HTML. Disponible en sitio
web: http://www.abrirllave.com/html/
8. W3C. (Publicado Septiembre-2005). Accesibilidad Web. Disponible en sitio web:
https://www.w3c.es/Traducciones/es/WAI/intro/accessibility
9. Arturo, Carlos en FalconMasters, canal Youtube. (Publicado 30-05-2014). El lenguaje HTML.
Disponible en: https://www.youtube.com/watch?time_continue=17&v=cqMfPS8jPys

10. Lewis, Joe en eHow en Espñol. Lineamientos para escribir un resumen y un ensayo reflexivo
http://www.ehowenespanol.com/lineamientos-escribir-resumen-ensayo-reflexivo-info_258445/
11. Moodle.com. (Publicado 18-08-2009). Tutorial para estudiantes. Disponible en:
https://docs.moodle.org/all/es/Tutoriales_para_Estudiantes
12. Moodle.com. (Publicado 29-10-2017). Actividad Wiki de Moodle. Disponible en:
https://docs.moodle.org/all/es/Actividad_de_wiki
13. Labrada Martínez, Esther; Salgado Ceballos, Cristina. (Publicado 01-01-2013). Diseño web
adaptativo o responsivo. Disponible en:
http://www.ru.tic.unam.mx/tic/bitstream/handle/123456789/2097/art07_2013.pdf?sequen
ce=1&isAllowed=y
14. Pes, Carlos en abrirllave.com. (Publicado 2014-2017). Tablas en HTML. Disponible en sitio
web: http://www.abrirllave.com/html/tablas.php
15. Pes, Carlos en abrirllave.com. (Publicado 2014-2017). Formularios en HTML. Disponible en
sitio web: http://www.abrirllave.com/html/formularios.php
16. Pes, Carlos en abrirllave.com. (Publicado 2014-2017). Divisiones en HTML. Disponible en
sitio web: http://www.abrirllave.com/html/divisiones.php

17. Video2brain en LinkedIn Learning Español, canal Youtube. (Publicado 20-03-2014). Qué es el
responsive design?. Disponible en:
https://www.youtube.com/watch?v=yaWlH3KEitc&pbjreload=10
18. Arturo, Carlos en FalconMasters, canal Youtube. (Publicado 30-05-2014). Curso básico de
HTML. Tablas. Disponible en:
https://www.youtube.com/watch?time_continue=17&v=cqMfPS8jPys
19. Arturo, Carlos en FalconMasters, canal Youtube. (Publicado 30-05-2014). Curso básico de
HTML. Formularios. Disponible en:
https://www.youtube.com/watch?v=QDOfODwsfuQ&list=PLhSj3UTs2_yVHt2DgHky_MzzRC5
8UHE4z&index=7
20. Pímentel, Víctor en nobbot.com. (Publicado 13-06-2009). Las novedades de HTML5.
Disponible en: http://www.nobbot.com/personas/las-novedades-de-html5-i/
21. En Mi Hola Mundo, canal Youtube. (Publicado 09-01-2016). ¿Qué es HTML5? Disponible en:
https://www.youtube.com/watch?v=wuwZitgm8eQ
22. Mirchan, Jonathan en bextlan lugar de bits vectores y pixeles, canal Youtube. (Publicado 16-
01-2012). Tutoriales HTML5: Estructura Básica. Disponible en:
https://www.youtube.com/watch?v=2VKHklZl4-I
23. Cañas, Alberto J. & Novak, Joseph D. (Publicado 28-09-2009). ¿Qué es un mapa conceptual?
Disponible en: https://es.wikipedia.org/wiki/Mapa_conceptual
24. LKCollab, LLC en bubbl.us. (2017). Bubbl.us Brainstorming made simple!. Disponible en:
https://bubbl.us/
25. DGarCam en developer.mozilla.org. (Publicado 13-09-2015). Formularios en HTML5.
Disponible en: https://developer.mozilla.org/es/docs/HTML/HTML5/Forms_in_HTML5
26. En DevCode, canal Youtube. (Publicado 22-08-2013). Tutorial HTML5: Formularios en
HTML5. Disponible en: https://www.youtube.com/watch?v=daDVAUrt13k
27. En Aula Formativa, canal Youtube. (Publicado 11-06-2014). Validar Formularios con HTML5.
Disponible en: https://www.youtube.com/watch?v=MNf7gCVmY90