GUÍA N° 2– HTML (Práctica 2)

Diseño Digital Publicitario

FACULTAD CURSO AMBIENTE

CIENCIAS DE LA COMUNICACIÓN DISEÑO MULTIMEDIA LABORATORIO MAC-PC
INTERACTIVO

ELABORADO POR Shirley APROBADO POR ----------------

Carreño
VERSIÓN 001 FECHA DE -----------------
APROBACIÓN

1. LOGRO GENERAL DE LA UNIDAD DE APRENDIZAJE

Estructura adecuadamente un sitio web haciendo uso de la sintaxis y elementos HTML5.

2. OBJETIVOS ESPECÍFICOS DE LA PRÁCTICA DE LABORATORIO

Reconoce las etiquetas HTML5 como estructura básica para el diseño de una web. Optimiza e
incorpora imágenes en una página web haciendo uso de etiquetas y reglas para su uso. Inserta
hipervínculos entre distintos elementos de una web. Inserta sonidos, videos, tablas y
formularios como parte de una estructura de contenidos de una web.

3. MATERIALES Y EQUIPOS

● Cuaderno de apuntes
● Equipo de computo
● Aplicación Web: Dreamweaver
● Canvas

4. PAUTAS DE SEGURIDAD

Procedimientos para el uso de equipos

a. Mantener en el aula de laboratorio el orden y limpieza.
b. Revisar el estado de los periféricos y equipos de cómputo antes de ser utilizados y
comunicar de modo inmediato al Asistente de Operaciones quien enviará un correo al
Coordinador informando la ausencia o deterioro de los mismos de ser el caso.
c. Verificar que los equipos estén debidamente conectados esto con la finalidad de prevenir
los accidentes por riesgo eléctrico.
d. Mantener la puerta de salida despejada y libre de obstáculos

100000C11P– Diseño Multimedia Interactivo Guía N°2 - rev0001

Página 1 | 9
 Seguridad e higiene al terminar la clase en el laboratorio
a. Por ningún motivo se podrá desconectar y/o retirar los periféricos del laboratorio sin
autorización del Asistente de Operaciones.
b. El área de trabajo debe quedar ordenada y libre de residuos tal como se recibió.
c. Si durante el desarrollo de la clase se produjera algún derrame de líquido, el usuario debe
comunicar con el Asistente de Operaciones para gestionar la limpieza del mobiliario y/o
equipo correspondiente.

5. FUNDAMENTO

INTRODUCCIÓN:
En esta unidad se enseñará sobre el uso y aplicación de etiquetas HTML5 y reglas CSS3 para el
diseño y maquetado de una página web, insertaran imágenes en la web, incorporaran tablas,
formularios y videos que forman parte del maquetado y estructura de una web.

TEMARIO

Introducción al HTML.
HTML (HyperText Markup Language) es el primer lenguaje que una persona debe conocer si
desea comenzar a realizar páginas web. HTML no es un lenguaje de programación, sino una
lenguaje descriptivo, una serie de etiquetas que el navegador interpretará de una u otra forma
para mostrar distintos contenidos por pantalla.

Optimización de imágenes. Incorporación de imágenes en documentos html.

La optimización para Web es el proceso de compresión de imágenes y de definición de opciones
de visualización para un uso óptimo en Internet.

Elementos de una web

Una página web, o página electrónica, página digital, o ciberpágina es un documento o
información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes
y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser
accedida mediante un navegador web.

6. PROCEDIMIENTO

SEMANA 5
● Introducción al HTML.
● Sintaxis.

100000C11P– Diseño Multimedia Interactivo Guía N°2 - rev0001

Página 2 | 9
 ● La estructura básica.
● Validación.
● Los elementos h1-h6, p, ul, ol, li.
● El entorno de Dreamweaver.

GUÍA DE APOYO:
Armado básico de una página web con HTML y CSS:
https://www.youtube.com/watch?v=hSdoDZB89eQ&t=24s

SEMANA 6:
● Optimización de imágenes. Incorporación de imágenes en documentos html.
● Rutas.

100000C11P– Diseño Multimedia Interactivo Guía N°2 - rev0001

Página 3 | 9
 GUÍA DE APOYO:

Optimización de imágenes para Web:

https://www.youtube.com/watch?v=DnpnuEWPpGM

SEMANA 7:
● Enlaces.
● Secciones HTML5.

GUÍA DE APOYO:
HTML - Agregar una página al sitio web - hipervínculos:
https://www.youtube.com/watch?v=Z7L7Ef_uwgQ&t=198s

SEMANA 8:
● Video.
● Audio.
● Tablas.
● Formularios.

100000C11P– Diseño Multimedia Interactivo Guía N°2 - rev0001

Página 4 | 9
 GUÍA DE APOYO:
HTML5 - Video:
https://www.youtube.com/watch?v=kaPcI5_PTsk
HTML5 - Audio:
https://www.youtube.com/watch?v=Z26Rp1fgeJ4

Tablas en HTML5:

100000C11P– Diseño Multimedia Interactivo Guía N°2 - rev0001

Página 5 | 9
 https://www.youtube.com/watch?v=X-6qJRVsP8o
Formularios en HTML5:
https://www.youtube.com/watch?v=22yUaLH_tcg

SEMANA 9:
● Estructura funcional.

GUÍA DE APOYO:
Estructura básica en HTML5:
https://www.youtube.com/watch?v=yD9-2zyQhdo

7. ENTREGABLES

100000C11P– Diseño Multimedia Interactivo Guía N°2 - rev0001

Página 6 | 9
 PC2
Consistirá en una evaluación presencial, donde se le solicitará a los estudiantes un caso práctico
donde tendrán que diseñar una página web funcional haciendo uso de las etiquetas HTM5 y Reglas
CSS3.

100000C11P– Diseño Multimedia Interactivo Guía N°2 - rev0001

Página 7 | 9
 NIVELES / CRITERIOS LOGRADO EN PROCESO EN INICIO
Hace uso correcto al Hace uso correcto al Hace uso correcto al
100% de etiquetas 50% de etiquetas 25% de etiquetas
HTML5 para HTML5 para HTML5 para
Uso de etiquetas
estructurar la página estructurar la página estructurar la página
HTML5
web, respetando las web, respetando las web, respetando las
(6 PUNTOS)
reglas gramaticales reglas gramaticales reglas gramaticales
de una web. de una web. de una web.
6 puntos 3 puntos 2 puntos

Hace uso correcto al Hace uso correcto al Hace uso correcto al

100% de las reglas 50% de las reglas 25% de las reglas
CSS3 para dar CSS3 para dar CSS3 para dar
Uso de reglas CSS3 formato a la página formato a la página formato a la página
(8 PUNTOS) web, respetando los web, respetando los web, respetando los
estándares de calidad estándares de calidad estándares de calidad
web. web. web.
8 puntos 5 puntos 2 punto

La estructura de la web La estructura de la web La estructura de la web

es 100% funcional con es 50% funcional con es 25% funcional con
enlaces y demás enlaces y demás enlaces y demás
Estructura funcional
elementos que elementos que elementos que
(6 PUNTOS)
permitan su permitan su permitan su
navegabilidad. navegabilidad navegabilidad
6 puntos 3 puntos 1 punto

8. FUENTES DE INFORMACIÓN COMPLEMENTARIA

Armado básico de una página web con HTML y CSS:

https://www.youtube.com/watch?v=hSdoDZB89eQ&t=24s
Optimización de imágenes para Web:
https://www.youtube.com/watch?v=DnpnuEWPpGM
HTML - Agregar una página al sitio web - hipervínculos:
https://www.youtube.com/watch?v=Z7L7Ef_uwgQ&t=198s
HTML5 - Video:
https://www.youtube.com/watch?v=kaPcI5_PTsk
HTML5 - Audio:
https://www.youtube.com/watch?v=Z26Rp1fgeJ4

100000C11P– Diseño Multimedia Interactivo Guía N°2 - rev0001

Página 8 | 9
 Tablas en HTML5:
https://www.youtube.com/watch?v=X-6qJRVsP8o
Formularios en HTML5:
https://www.youtube.com/watch?v=22yUaLH_tcg
Estructura básica en HTML5:
https://www.youtube.com/watch?v=yD9-2zyQhdo

100000C11P– Diseño Multimedia Interactivo Guía N°2 - rev0001

Página 9 | 9