COMUNIDAD ACADÉMICA: TECNOLOGÍA E INFORMÁTICA
ASIGNATURA: TECNOLOGÍA E INFORMÁTICA
TERCER PERIODO
APRENDIZAJE: Conocer y usar los elementos básicos y necesarios en el diseño gráfico de una web utilizando software especializado para la creación de páginas web personales.
Semana 1: del 07 al 11 de Julio.
TEMA: Html
ESTRUCTURA DE UN SITIO WEB:
A. Página de Inicio (Home)
B. Páginas Principales (Secciones Esenciales)
Quiénes Somos / About Us
Misión, visión y valores.
Historia o equipo.
Productos/Servicios
Catálogo organizado por categorías.
Filtros y descripciones detalladas.
Blog/Noticias (Opcional pero recomendado para SEO)
Artículos relacionados con el sector.
Actualizaciones de la empresa.
Contacto
3. Elementos Clave en la Arquitectura Web
Menú de navegación (claro y consistente).
Footer (Pie de página) con enlaces útiles (Políticas, Mapa del sitio).
URLs amigables (ej: tusitio.com/servicios/diseno-web).
Migajas de pan (Breadcrumbs) para facilitar la navegación.
Diseño responsive (adaptable a móviles).
ACTIVIDAD PARA LA SEMANA 1
Paso1
Copia y pega este código en el editor html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textos de distintos tamaños y colores</title>
<style>
body {
background-color: green;
font-family: Arial, sans-serif;
padding: 20px;
}
.texto1 {
font-size: 12px;
color: red;
}
.texto2 {
font-size: 18px;
color: blue;
position: relative;
animation: mover 3s infinite alternate;
}
.texto3 {
font-size: 24px;
color: yellow;
}
.texto4 {
font-size: 30px;
color: purple;
}
.texto5 {
font-size: 36px;
color: white;
}
@keyframes mover {
0% {
left: 0px;
}
100% {
left: 100px;
}
}
</style>
</head>
<body>
<p class="texto1">Este es el primer texto pequeño y rojo</p>
<p class="texto2">Este texto se mueve de lado a lado y es azul</p>
<p class="texto3">Este texto es amarillo y más grande</p>
<p class="texto4">Texto en morado y aún más grande</p>
<p class="texto5">¡Este es el texto más grande y es blanco!</p>
</body>
</html>
Paso2
Modifica las caracteristicas de la web acorde a las indicaciones dadas por el maestro
Paso3
Inserta este código en cualquiera de las lineas.
<img src="https://hosting.profekadi.com/estudiante/kadi/pato.gif">
Paso4
Descarga la pagina web creada, abrela en pantalla completa