NOVENO GRADO

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">