INICIO DEL PROYECTO 1 - ETIQUETA HEADER Y DIV
TEMA: PROYECTO 1 Y EXAMEN DE PERIODO: Mi Presentación Web
1. LINK DE MUESTRA DEL PROYECTO
https://edutechsiglo21.com/2025/presentacion.html
Práctica: Cada estudiante crea una página web sencilla para presentarse. Debe incluir un texto de sus aficiones, es decir, que le gusta hacer (hoby / pasatienpo), una foto personal (ya se proporciona una de ejemplo), una descripción de sus cualidades, y enlaces a sus redes sociales (si las tienen), o en su defecto link a por lo menos 3 redes sociales.
2. IMAGENES DE EJEMPLO PARA SU PROYECTO, ELIJA 1 PARA SU PROYECTO:
<img src="https://edutechsiglo21.com/2025/imgs/jovencito.jpg">
<img src="https://edutechsiglo21.com/2025/imgs/jovencita.jpg">
3. EXPLICACION CLASE DE HOY:
Etiqueta Semántica <header>
Propósito: La etiqueta <header> es un elemento semántico que representa la sección de encabezado de un documento o de una sección específica dentro de un documento HTML.
Generalmente, contiene información introductoria o de navegación, como el título principal del sitio o sección, un logo, una barra de navegación, etc.
Semántica: La palabra "semántico" significa que esta etiqueta tiene un significado claro para los navegadores y los motores de búsqueda. Indican cuál es el propósito del contenido dentro de la etiqueta (en este caso, que es un encabezado). Esto ayuda a mejorar la accesibilidad y el SEO.
Cuándo usarla:Al principio de un documento HTML para el encabezado principal del sitio web. Al principio de secciones dentro de un documento, como en un artículo o un apartado de contenido.
Etiqueta <div>
Propósito: La etiqueta <div> (abreviatura de "division") es un elemento genérico de contenedor. Se utiliza para agrupar otros elementos HTML y aplicarles estilos (CSS) o para realizar ciertas operaciones con JavaScript. No tiene un significado semántico específico en sí misma.
Semántica: A diferencia de <header>, <div> es un elemento sin un significado semántico inherente. Simplemente define una división o sección dentro del documento, pero no le dice al navegador qué tipo de sección es.
Cuándo usarla: Para crear secciones o bloques de contenido en tu página.
- Como contenedores para aplicar estilos específicos (CSS) a un grupo de elementos.
- Como contenedores para manipular el DOM con JavaScript.
- Cuando no encuentras una etiqueta semántica más específica para ese contenido (por ej.,<article>, <aside>, etc.).
------------------------------------------------------------------
4. PLANTILLA PARA CREAR EL PROYECTO - APLICACION DE ETIQUETA
SEMANTICA Header Y ETIQUETA DIV
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página de Presentación</title>
</head>
<body>
<header>
<h1>¡Hola, soy Javier!</h1>
</header>
<div>
<img src="https://edutechsiglo21.com/sistrini/static/img/P73121092.jpg" alt="Foto de perfil">
</div>
<div>
<p>
Soy un apasionado de la tecnología y la informatica. Me encanta aprender, crear y compartir mis conocimientos con los demás.
Si deseas saber más sobre mí o trabajar juntos, no dudes en contactarme.
</p>
</div>
<div>
<a href="https://facebook.com/" target="_blank">Facebook</a>
<a href="https://twitter.com/" target="_blank">Twitter</a>
<a href="https://linkedin.com/" target="_blank">LinkedIn</a>
</div>
</body>
</html>
5. APLICACION DE CSS
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
text-align: center;
}
6. EXPLICACION
A. body { ... } (Selector del Cuerpo):
body es un selector CSS. En este caso, selecciona el elemento <body> de HTML, que representa todo el contenido visible de una página web.
Las llaves {} delimitan el bloque de reglas CSS que se aplicarán al elemento <body>.
Las siguientes reglas de estilo van a afectar a todo el contenido de nuestra página web."
B. font-family: Arial, sans-serif; (Familia de Fuentes):
font-family es una propiedad CSS que define la fuente (tipo de letra) que se utilizará en el texto.
Arial es el nombre de una fuente específica. Si el navegador puede encontrarla (porque está instalada en la computadora), la usará.
sans-serif es una fuente genérica. Si Arial no está disponible, el navegador utilizará alguna fuente de la categoría "sans-serif" (una fuente sin serifa, como Helvetica). Esto asegura que siempre haya una fuente que se muestre en el texto.
Tipo de letra vamos a usar. Le dijimos al navegador que use Arial, pero si no la encuentra, que use cualquier letra 'sans-serif' (sin adornos) que tenga instalada."
C. margin: 0; (Márgenes):
margin es una propiedad CSS que define el espacio alrededor del borde de un elemento, separándolo de otros elementos.
0 (cero) indica que no habrá margen (espacio) alrededor del elemento <body>.
Aquí estamos eliminando el espacio que puede haber alrededor de toda nuestra página, así pegamos el contenido a los bordes de la ventana del navegador.
D. padding: 0; (Relleno):
padding es una propiedad CSS que define el espacio entre el contenido de un elemento y su borde.
0 (cero) indica que no habrá relleno (espacio) dentro del elemento <body>.
Igual que el margen, pero ahora controlamos el espacio entre el contenido de la página y su propio borde. Con 0, pegamos el contenido al borde interior.
E. background-color: #f4f4f9; (Color de Fondo):
background-color es una propiedad CSS que define el color de fondo de un elemento.
#f4f4f9 es un código hexadecimal que representa un color específico (un gris muy claro). Puedes buscar un selector de colores en internet para encontrar el código hexadecimal de cualquier color.
Aquí elegimos el color de fondo para nuestra página web. El código #f4f4f9 representa un gris claro, pero podemos usar cualquier otro color que queramos.
F. color: #333; (Color del Texto):
color es una propiedad CSS que define el color del texto de un elemento.
#333 es un código hexadecimal que representa un gris oscuro.
Aquí elegimos el color para el texto de nuestra página. El código #333 representa un gris oscuro, que combina bien con el fondo gris claro. Así se ve legible.
G. text-align: center; (Alineación del Texto):
text-align es una propiedad CSS que define la alineación horizontal del texto dentro de un elemento.
center centra el texto horizontalmente.
Aquí le decimos que todo el texto dentro del cuerpo de la página se centre horizontalmente.
7.QUE HACE ESTE BLOQUE DE CSS?
Este bloque de código CSS define el aspecto general de nuestra página web:
El cuerpo de la página (todo el contenido visible).
El tipo de letra que usaremos.
Eliminamos el espacio alrededor y dentro del cuerpo.
El color de fondo de la página.
El color del texto en la página.
Y centramos todo el texto horizontalmente."
No hay comentarios:
Publicar un comentario