CUADERNILLO DE ACTIVIDADES
DISEÑO DE PÁGINAS WEB
Institución: INSUCO APODACA
Asignatura: Diseño de Páginas Web
Docente: Jesús Villarreal
Alumno: ___________________________
Grupo: ___________
Fecha: _____________________________
PRESENTACIÓN
Bienvenido al cuadernillo de actividades de Diseño de Páginas Web. Este material tiene como
propósito desarrollar las competencias necesarias para comprender los fundamentos del diseño
web, la estructura de una página, el uso de HTML y CSS, así como la importancia de crear sitios
atractivos, funcionales y accesibles.
COMPETENCIAS
Al finalizar este cuadernillo el estudiante será capaz de:
• Identificar los elementos básicos de una página web.
• Comprender la estructura de HTML.
• Reconocer la función de CSS.
• Diseñar la estructura de un sitio web.
• Aplicar principios básicos de diseño.
ACTIVIDAD 1
Conocimientos Previos
Instrucciones: Contesta las siguientes preguntas.
1. ¿Qué es una página web?
2. ¿Qué es Internet?
3. ¿Qué significa HTML?
4. ¿Qué significa CSS?
5. ¿Para qué sirve un navegador?
ACTIVIDAD 2
Relaciona Columnas
Escribe la letra correcta.
Columna A Columna B
( ) HTML A. Da estilo a la página
( ) CSS B. Programa para navegar
( ) Chrome C. Lenguaje de estructura
( ) Página Web D. Documento en Internet
ACTIVIDAD 3
Completa las Oraciones
1. HTML significa ____________________________.
2. CSS sirve para ____________________________.
3. Google Chrome es un ________________________.
4. Una página web puede contener __________, __________ y __________.
ACTIVIDAD 4
Verdadero o Falso
Escribe V o F.
( ) HTML sirve para crear la estructura de una página.
( ) CSS reemplaza a HTML.
( ) Una página web puede contener imágenes.
( ) Todo sitio web necesita un navegador para visualizarse.
( ) Internet y una página web significan exactamente lo mismo.
ACTIVIDAD 5
Crucigrama
Horizontales
1. Lenguaje utilizado para crear la estructura de una página.
2. Lenguaje que da diseño y colores.
Verticales
3. Programa para navegar por Internet.
4. Documento que se visualiza en un navegador.
Palabras
• HTML
• CSS
• Chrome
• Página
ACTIVIDAD 6
Sopa de Letras
Busca las siguientes palabras:
HTML
CSS
WEB
INTERNET
NAVEGADOR
SERVIDOR
ENLACE
IMAGEN
TEXTO
DISEÑO
INTERNETAB
HTMLCSSXYZ
POIUYTREWQ
DISEÑOASDF
NAVEGADORG
IMAGENHJKL
WEBPOIUYTR
ENLACESDFG
SERVIDORHJ
TEXTOQWERT
ACTIVIDAD 7
Identifica las Etiquetas
Escribe para qué sirve cada etiqueta.
Etiqueta Función
<html> __________________
<head> __________________
<body> __________________
<h1> __________________
<p> __________________
<img> __________________
ACTIVIDAD 8
Ordena el Código
Numera correctamente.
( ) <body>
( ) <html>
( ) </body>
( ) <head>
( ) </html>
( ) </head>
ACTIVIDAD 9
Diseño de una Página
Dibuja cómo sería la página principal de una escuela.
Debe incluir:
• Logo
• Menú
• Imagen principal
• Noticias
• Contacto
(Área para dibujo)
ACTIVIDAD 10
Colores Web
Escribe cinco colores que utilizarías para una página de una escuela y explica por qué.
Color Motivo
ACTIVIDAD 11
Planeación del Sitio
Diseña el mapa del sitio.
Inicio
├── Nosotros
├── Carreras
├── Inscripciones
├── Galería
└── Contacto
ACTIVIDAD 12
Investigación
Investiga y responde.
1. ¿Qué es un dominio?
2. ¿Qué es un hosting?
3. ¿Qué es un servidor?
4. ¿Qué es una URL?
ACTIVIDAD 13
Observa y Analiza
Visita tres páginas web y escribe qué elementos tienen en común.
Página Elementos encontrados
ACTIVIDAD 14
Proyecto Integrador
Diseña una página web para una empresa, negocio o escuela.
Debe contener:
• Portada
• Menú
• Imagen principal
• Información
• Servicios
• Galería
• Formulario de contacto
• Pie de página
Realiza primero el boceto y después desarrolla el código en HTML y CSS.
AUTOEVALUACIÓN
Marca con ✔.
Indicador Sí No
Comprendo qué es HTML
Comprendo qué es CSS
Sé identificar las partes de una página web
Puedo elaborar un boceto de un sitio web
Conozco la importancia del diseño web
CONCLUSIÓN
El diseño de páginas web combina creatividad, organización y tecnología para crear sitios
atractivos y funcionales. Dominar HTML y CSS es el primer paso para desarrollar aplicaciones y
páginas web profesionales que respondan a las necesidades de los usuarios. Este cuadernillo
permite fortalecer los conocimientos básicos y prepararse para proyectos de mayor complejidad