Scribd
Cargar
24 vistas34 páginas

HTML

Cargado por

pararegistrarneentodo2023
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
24 vistas34 páginas

HTML

Cargado por

pararegistrarneentodo2023
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 34

Bloque 1: Introducción a la Web y Fundamentos de HTML

1.1 Introducción a Internet y la Web

¿Te has preguntado alguna vez cómo funcionan las páginas web? Cada vez que visitas una página como YouTube o Google,
hay un lenguaje detrás que le dice al navegador cómo mostrarla. Ese lenguaje se llama HTML (HyperText Markup Language).
HTML es el lenguaje que organiza el contenido de las páginas web y permite que veamos textos, imágenes y videos, ¡todo en
un mismo lugar!

¿Qué es la Web?
La Web, también conocida como la World Wide Web, es un sistema que permite acceder a documentos y recursos
multimedia a través de Internet. Es lo que hace posible que entres a tu sitio favorito escribiendo una dirección en el
navegador. Es importante recordar que Internet es la red global que conecta computadoras, mientras que la Web es solo una
parte de todo ese gran sistema.

Navegadores Web
Cuando visitas una página web, tu navegador (como Chrome o Firefox) lee un archivo HTML y lo convierte en la página visual
que ves. El navegador es el que "traduce" el HTML para mostrártelo de forma agradable y fácil de entender. ¡Así que
podríamos decir que los navegadores son como traductores de la web!

1.2 HTML: Estructura y Elementos Fundamentales

Ahora que sabes qué es la Web y cómo los navegadores interpretan HTML, es hora de aprender cómo se construyen las
páginas web desde cero. Piensa en HTML como el esqueleto de una página web: le da la estructura y la organiza. Sin HTML,
las páginas web no tendrían forma.

Cada página web empieza con una estructura básica que siempre debes incluir. Es como si estuvieras armando la base de un
edificio antes de decorar las paredes. Esta es la estructura mínima que necesitas para que una página funcione
correctamente:

<!DOCTYPE html>

<html>

<head>

<title>Mi primera página</title>

</head>

<body>

<h1>¡Hola, mundo!</h1>

<p>Esta es mi primera página web usando HTML.</p>

</body>

</html>

Vamos a desglosarlo:

• <!DOCTYPE html>: Esta línea le dice al navegador que el documento que sigue es un archivo HTML5, que es la
versión más reciente del lenguaje.

• <html>: Aquí comienza el contenido de la página. Es como decir: "Todo lo que está dentro de esta etiqueta es parte
de la página web".

• <head>: En esta sección colocas información importante sobre la página, como su título.

• <title>: Esta etiqueta le da un título a tu página. Es lo que ves en la pestaña del navegador.

• <body>: Aquí va todo el contenido visible de tu página, como textos, imágenes, videos, etc.

¡Felicidades! Con esta pequeña estructura ya tienes tu primera página web en HTML. Como ves, es sencillo y solo necesitas
algunas etiquetas clave para empezar a crear contenido.

1.3 Etiquetas Semánticas y Organización del Contenido


Hasta ahora hemos visto cómo estructurar una página, pero ¿sabías que también puedes organizar el contenido de forma
lógica para que sea más fácil de entender? Aquí es donde entran las etiquetas semánticas.

Las etiquetas semánticas ayudan a los navegadores (y a las personas que leen el código) a entender cuál es el propósito de
cada parte de tu página. Por ejemplo:

• <header>: Define el encabezado de la página. Aquí puedes poner cosas como el título principal o un menú de
navegación.

• <nav>: Sirve para crear una sección de navegación, como un menú de enlaces.

• <section>: Utilizada para agrupar contenido que forma una sección independiente.

• <article>: Se usa para representar un contenido que puede leerse de forma independiente, como un artículo o una
noticia.

• <footer>: El pie de página. Aquí va la información final, como derechos de autor o enlaces secundarios.

Estas etiquetas hacen que tu código sea más organizado y fácil de leer, tanto para ti como para otros desarrolladores.
¡Incluso los motores de búsqueda como Google las prefieren, porque ayudan a entender mejor el contenido de una página!

1.4 Enlaces y Navegación

¿Sabías que los enlaces son el alma de la web? Los enlaces, también conocidos como hipervínculos, conectan una página
con otra y permiten que naveguemos por todo Internet con un solo clic.

Para crear un enlace en HTML, usamos la etiqueta <a>, que significa anchor (ancla en inglés). Vamos a ver un ejemplo:

<a href="https://www.google.com">Visita Google</a>

En este ejemplo:

• <a> es la etiqueta que crea el enlace.

• href="https://www.google.com" le dice a la página adónde debe llevar el usuario cuando haga clic. Este es el
"destino" del enlace.

• El texto dentro de la etiqueta (en este caso, "Visita Google") es lo que los usuarios ven y pueden hacer clic.

¿Quieres crear un enlace que lleve a otra parte de la misma página?

Puedes usar lo que se llama un enlace interno, que es un enlace que te lleva a una sección específica de la misma página
usando anclas.

<a href="#seccion1">Ir a la Sección 1</a>

<h2 id="seccion1">Sección 1</h2>

¡Listo! Ahora, cuando hagas clic en "Ir a la Sección 1", el navegador te llevará automáticamente a esa parte de la página.

1.5 Imágenes y Multimedia

Para que tu página web sea más atractiva, puedes agregar imágenes. Las imágenes hacen que el contenido sea más visual y
divertido, pero debes saber cómo insertarlas correctamente en HTML.

La etiqueta para añadir imágenes es <img>, y se ve así:

<img src="ruta-de-la-imagen.jpg" alt="Descripción de la imagen">

• src (source) es la ubicación de la imagen. Puede ser una URL si está en Internet o una ruta a un archivo en tu
computadora.

• alt es una descripción alternativa que aparece si la imagen no se carga. También es muy importante para la
accesibilidad, ya que describe la imagen para personas con discapacidad visual.
Además de imágenes, HTML5 permite agregar videos y audios de manera sencilla usando las etiquetas <video> y <audio>.
Por ejemplo:

<video controls>

<source src="video.mp4" type="video/mp4">

Tu navegador no soporta videos.

</video>

Con esto, ¡ya puedes mostrar videos directamente en tu página web!

Este es el final del Bloque 1. ¿Cómo te sientes hasta ahora? ¡Ya has dado el primer paso para construir tu propia página
web! Si tienes todo claro, pasemos al siguiente bloque cuando estés listo.

Bloque 2: Formularios y Entrada de Datos

2.1 Estructura de Formularios

¿Te has preguntado alguna vez cómo los sitios web recogen información de los usuarios? Por ejemplo, ¿cómo es que
puedes registrarte en redes sociales o enviar un mensaje desde la página de contacto de una empresa? La respuesta está en
los formularios.

Los formularios son una parte esencial de casi cualquier página web, y con HTML puedes crearlos de manera fácil y flexible.
Un formulario HTML básico empieza con la etiqueta <form> y se ve algo así:

<form action="enviar.php" method="POST">

<!-- Aquí irán los campos del formulario -->

</form>

• action: Este atributo define a dónde se enviarán los datos del formulario. Normalmente, es un archivo o una URL que
procesará la información.

• method: Hay dos métodos principales para enviar datos: GET y POST.

o GET envía los datos en la URL (visible en la barra de direcciones), ideal para búsquedas simples.

o POST envía los datos de forma segura en el cuerpo de la petición, y es lo que se suele usar para formularios
de inicio de sesión o registros.

2.2 Crear Campos de Entrada

Los campos de entrada son el corazón de cualquier formulario. Son esos lugares donde los usuarios escriben su nombre,
dirección de correo electrónico o cualquier otra información que quieran enviar.

Veamos algunos de los campos más comunes que puedes agregar a tu formulario:

1. Campo de texto:

<label for="nombre">Nombre:</label>

<input type="text" id="nombre" name="nombre">

• <label>: Esta etiqueta describe el campo de entrada, y es importante para la accesibilidad.

• <input type="text">: Crea un campo de entrada para texto corto, como un nombre.

2. Campo de contraseña:

<label for="password">Contraseña:</label>

<input type="password" id="password" name="password">

• Este campo es similar al de texto, pero oculta los caracteres que el usuario escribe, ¡perfecto para contraseñas!
3. Área de texto grande:

<label for="mensaje">Mensaje:</label>

<textarea id="mensaje" name="mensaje"></textarea>


<textarea> permite que los usuarios escriban mensajes más largos, como comentarios o preguntas.

2.3 Selectores y Botones

Además de campos de texto, también puedes ofrecer a los usuarios la posibilidad de seleccionar opciones o marcar casillas.

1. Listas desplegables (también llamadas selectores):

<label for="pais">País:</label>

<select id="pais" name="pais">

<option value="mx">México</option>

<option value="es">España</option>

<option value="us">Estados Unidos</option>

</select>

1.

o <select> crea una lista desplegable.

o <option> es cada una de las opciones que el usuario puede seleccionar.

2. Botones de radio:

<label>Género:</label>

<input type="radio" id="hombre" name="genero" value="hombre">

<label for="hombre">Hombre</label>

<input type="radio" id="mujer" name="genero" value="mujer">

<label for="mujer">Mujer</label>

Los botones de radio permiten que los usuarios elijan solo una opción entre varias.

3. Casillas de verificación:

<label for="newsletter">Suscribirse al boletín:</label>

<input type="checkbox" id="newsletter" name="newsletter">

A diferencia de los botones de radio, las casillas de verificación permiten seleccionar más de una opción.

2.4 Botones de Envío y Restablecimiento

Para que los usuarios puedan enviar la información, necesitarás un botón de envío. También puedes agregar un botón para
restablecer el formulario, lo que significa que los campos volverán a estar vacíos.

1. Botón de envío:

<input type="submit" value="Enviar">

Este es el botón que envía los datos del formulario al servidor. El atributo value es el texto que aparece en el botón.

2. Botón de restablecimiento:

<input type="reset" value="Restablecer">

Este botón limpia todos los campos del formulario, volviendo a su estado inicial.

2.5 Validación Básica de Formularios con HTML5

¿Te ha pasado que olvidas rellenar un campo obligatorio en un formulario? Con HTML5, puedes agregar validaciones
básicas directamente en el HTML, sin necesidad de JavaScript.

Aquí algunos atributos útiles para validar formularios:

1. required: Hace que el campo sea obligatorio.

<input type="text" id="nombre" name="nombre" required>

2. pattern: Permite definir una expresión regular para validar el formato del campo. Por ejemplo, podrías usarlo para
asegurarte de que un campo de correo electrónico tenga el formato correcto.
<input type="text" id="telefono" name="telefono" pattern="[0-9]{10}" placeholder="10 dígitos">

3. min y max: Son útiles para validar números o fechas.

<input type="number" id="edad" name="edad" min="18" max="100">

Y listo! Ahora ya sabes cómo crear un formulario básico, recoger datos y validar la información antes de que el usuario la
envíe. Los formularios son súper útiles y los verás en casi cualquier tipo de sitio web, desde páginas de contacto hasta
plataformas de redes sociales.

Bloque 3: Introducción a CSS

3.1 Conceptos Básicos de CSS

¿Alguna vez has querido cambiar los colores o hacer que tu página web se vea más atractiva? Si HTML es el esqueleto de
una página web, CSS (Cascading Style Sheets) es la piel, la ropa, y el maquillaje que le dan estilo y belleza. CSS es el lenguaje
que usamos para darle estilo a las páginas web, desde los colores y las fuentes hasta la disposición de los elementos.

Cómo agregar CSS a HTML

Hay tres formas principales de agregar CSS a una página HTML:

1. CSS en línea: Puedes agregar estilos directamente a una etiqueta HTML usando el atributo style:

<p style="color: red;">Este texto es rojo</p>

Ventajas: Es rápido y fácil para hacer cambios pequeños.


Desventajas: No es muy recomendable porque hace difícil mantener el código limpio.

2. CSS interno: Puedes escribir el CSS dentro de la etiqueta <style> en la parte de <head> de tu HTML:

<head>

<style>

p{

color: blue;

</style>

</head>

Ventajas: Funciona bien para páginas pequeñas o con pocos estilos.


Desventajas: Si tienes muchas reglas de estilo, tu archivo HTML puede volverse muy largo.

3. CSS externo: La mejor forma de organizar tus estilos es con un archivo CSS externo. Puedes escribir todo tu código
CSS en un archivo separado y enlazarlo desde tu HTML con la etiqueta <link>:

<head>

<link rel="stylesheet" href="estilos.css">

</head>

Luego, en el archivo estilos.css puedes escribir todos los estilos para tu página:

p{

color: green;

}
Ventajas: Es más fácil de mantener, reutilizable, y puedes aplicar los mismos estilos a varias páginas.
Desventajas: Ninguna, esta es la forma preferida para proyectos más grandes.

3.2 Selectores en CSS

Ahora que sabes cómo agregar CSS a tu página, es hora de aprender a seleccionar los elementos que quieres estilizar. Los
selectores son la forma en que le dices a CSS qué partes del HTML deben aplicar un estilo.

1. Selectores básicos:

o Selector de tipo: Aplica estilos a todas las etiquetas de un tipo específico. Por ejemplo, esto aplicará el color
rojo a todos los párrafos (<p>) de la página:

p{

color: red;

2. Selector de clase: Si solo quieres aplicar un estilo a ciertos elementos, puedes usar clases. Las clases se definen en el
HTML con el atributo class:

<p class="importante">Este es un párrafo importante.</p>

<p class="importante">Este también es importante.</p>

Y luego puedes usar el selector de clase en tu CSS, usando un punto . antes del nombre de la clase:

.importante {

color: red;

font-weight: bold;

3. Selector de ID: Los IDs son similares a las clases, pero se usan cuando quieres aplicar estilos a un único elemento. Los
IDs se definen con el atributo id en HTML:

<h1 id="titulo-principal">Bienvenido</h1>

Y en CSS, puedes seleccionar un ID usando el símbolo #:

#titulo-principal {

font-size: 24px;

color: blue;

Nota: Es recomendable usar IDs solo cuando necesitas identificar un elemento único, y usar clases para estilos más
generales.

3.3 Especificidad y Herencia

En CSS, puede ocurrir que varios estilos se apliquen al mismo elemento. ¿Cómo decide el navegador qué estilo aplicar? Aquí
es donde entra en juego el concepto de especificidad.

La especificidad determina cuál estilo tiene más importancia. Piensa en esto como un "poder" que tienen los selectores:
mientras más específico sea un selector, más poder tiene. Aquí tienes algunos ejemplos:

1. Selectores de tipo (p) tienen menos poder.

2. Clases (.importante) tienen más poder.

3. IDs (#titulo-principal) tienen aún más poder.

Si tienes varios estilos que podrían aplicarse al mismo elemento, el que tenga mayor especificidad será el que el navegador
utilice.
3.4 Colores en CSS

¿Te gustaría cambiar el color de texto o fondo en tu página? Con CSS, puedes hacerlo fácilmente. Hay varias formas de
definir colores:

1. Nombres de colores: CSS tiene algunos nombres de colores predefinidos, como red, blue, green, etc.

h1 {

color: red;

2. Colores hexadecimales: Esta es una forma más precisa de definir colores usando el sistema hexadecimal. Un color
hexadecimal se ve así: #RRGGBB (donde RR es rojo, GG es verde, y BB es azul). Por ejemplo, el rojo es #FF0000 y el
azul es #0000FF.

h1 {

color: #FF0000;

3. Colores RGB: Los colores también pueden definirse usando el sistema RGB (Red, Green, Blue). Por ejemplo:

h1 {

color: rgb(255, 0, 0); /* Rojo */

4. Colores RGBA: Similar al RGB, pero con un cuarto valor que indica la opacidad (A de alpha). El valor de alpha va de 0
(completamente transparente) a 1 (completamente opaco):

h1 {

color: rgba(255, 0, 0, 0.5); /* Rojo con 50% de transparencia */

Con estas opciones puedes experimentar con diferentes combinaciones de colores para hacer tu página mucho más
visualmente atractiva.

3.5 Tipografía y Estilos de Texto

La tipografía juega un papel importante en la apariencia de tu sitio web. Vamos a ver algunas de las propiedades más
comunes para estilizar el texto:

1. font-family: Cambia la fuente de tu texto. Puedes usar fuentes comunes como Arial o Times New Roman, o agregar
fuentes personalizadas como las de Google Fonts:

p{

font-family: Arial, sans-serif;

2. font-size: Define el tamaño del texto. Puedes usar unidades como px (píxeles), em (relativo al tamaño de la fuente
del padre) o % (relativo al tamaño base del texto):

p{

font-size: 16px;

3. font-weight: Cambia el grosor del texto. Puedes usar valores como normal, bold o números como 400 (normal) y 700
(negrita):

p{

font-weight: bold;

}
4. text-align: Alinea el texto a la izquierda, derecha o centro:

p{

text-align: center;

Y eso es todo para el Bloque 3! Ahora ya tienes una comprensión sólida de cómo aplicar estilos básicos con CSS. ¿Listo para
seguir con el próximo bloque?

Bloque 4: Colores, Fondos y Bordes

4.1 Trabajar con Colores

¿Te has dado cuenta de que el color puede cambiar completamente la sensación de una página web? Los colores juegan un
papel muy importante en el diseño de cualquier sitio, y con CSS puedes aplicarlos a casi cualquier parte de tu página.

Aquí te mostramos cómo manejar colores de manera más avanzada:

1. Color de fondo: Para cambiar el color de fondo de un elemento o de toda la página, puedes usar la propiedad
background-color. Por ejemplo, para que el fondo de la página sea azul:

body {

background-color: lightblue;

2. Color de texto: La propiedad color cambia el color del texto de un elemento. Si quieres que todos los párrafos tengan
texto verde, puedes hacerlo así:

p{

color: green;

3. Transparencia con RGBA: ¿Sabías que puedes hacer que un color sea parcialmente transparente? Con rgba, puedes
agregar transparencia a cualquier color. El último valor en rgba (de 0 a 1) controla cuán transparente es el color:

p{

background-color: rgba(255, 0, 0, 0.5); /* Rojo con 50% de transparencia */

4.2 Estilos de Fondo

Las imágenes de fondo pueden hacer que tu página luzca más atractiva, y CSS te ofrece muchas maneras de personalizar los
fondos. Aquí te mostramos cómo:

1. Agregar una imagen de fondo: Puedes agregar una imagen de fondo a cualquier elemento con la propiedad
background-image. Recuerda que debes usar la ruta de la imagen entre url():

body {

background-image: url('fondo.jpg');

2. Repetición de fondo: Por defecto, las imágenes de fondo se repiten para llenar todo el espacio. Puedes controlar
esta repetición con background-repeat:

body {

background-repeat: no-repeat; /* No repetir la imagen */

3. Posición de fondo: Si no quieres que la imagen comience en la esquina superior izquierda, puedes cambiar su
posición con background-position:
body {

background-position: center; /* Centra la imagen de fondo */

4. Tamaño de fondo: Para asegurarte de que la imagen de fondo cubra toda el área, puedes usar background-size:

body {

background-size: cover; /* Asegura que la imagen cubra todo el fondo */

4.3 Bordes, Sombras y Gradientes

¿Te gustaría darle a tus elementos un marco o una sombra para que resalten más? CSS te permite hacer esto fácilmente
con bordes y sombras.

1. Agregar bordes a un elemento: Con la propiedad border, puedes agregar un borde a cualquier elemento. Puedes
definir el ancho, el estilo y el color:

p{

border: 2px solid black; /* Un borde negro sólido de 2 píxeles */

o Ancho: Especifica el grosor del borde (en píxeles, px).

o Estilo: Puedes elegir entre estilos como solid (sólido), dashed (guiones), dotted (puntos), etc.

o Color: El color del borde, puede ser cualquier valor de color.

2. Esquinas redondeadas: Si quieres que los bordes de tu elemento tengan esquinas redondeadas, puedes usar la
propiedad border-radius:

p{

border-radius: 10px; /* Esquinas redondeadas de 10 píxeles */

3. Sombras para texto: Si quieres que tu texto resalte, puedes agregar una sombra con text-shadow:

h1 {

text-shadow: 2px 2px 5px gray; /* Sombra gris de 5 píxeles */

La primera y segunda coordenadas (2px 2px) determinan el desplazamiento de la sombra, y el último valor (5px) es la
"difusión" de la sombra.

4. Sombras para cajas: Las sombras no solo son para el texto, también puedes agregarlas a cualquier elemento con box-
shadow:

div {

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Sombra negra con transparencia */

5. Gradientes: ¿Sabías que puedes crear un fondo con una transición suave de un color a otro? Esto se llama un
gradiente. Los gradientes lineales se crean así:

div {

background: linear-gradient(to right, red, yellow);

En este ejemplo, el color rojo cambia gradualmente al amarillo de izquierda a derecha. Puedes hacer gradientes con más de
dos colores e incluso en direcciones diferentes.
Con este bloque finalizado, ya sabes cómo usar colores, fondos y bordes para darle vida a tu página web. Estos detalles
pueden hacer que un sitio web pase de ser simple a profesional.

Bloque 5: El Modelo de Caja (Box Model)

5.1 Concepto del Modelo de Caja

¿Sabías que cada elemento en una página web es como una caja? Ya sea un párrafo, un encabezado o una imagen, todos
los elementos están encerrados en lo que llamamos el modelo de caja de CSS.

El modelo de caja es un concepto fundamental que describe cómo se calcula el tamaño de un elemento y cómo interactúan
las distintas propiedades para formar la "caja" que lo rodea. Cada elemento de HTML es como una caja que está compuesta
de cuatro partes:

1. Contenido: El área donde se muestra el texto, imagen, o cualquier contenido del elemento.

2. Padding (Relleno): El espacio entre el contenido y el borde del elemento.

3. Borde: El contorno alrededor del padding, que puede ser visible o no, dependiendo de si lo defines.

4. Margen: El espacio entre el borde del elemento y los elementos vecinos.

Piensa en un regalo: el contenido es el objeto dentro, el padding es el papel de envolver, el borde es la caja del regalo y el
margen es el espacio que hay entre esa caja y otros regalos.

Este es un ejemplo gráfico:

div {

width: 200px; /* Ancho del contenido */

padding: 20px; /* Espacio entre el contenido y el borde */

border: 5px solid black; /* Borde sólido */

margin: 10px; /* Espacio fuera del borde */

Nota importante: El ancho total del elemento será la suma de width + padding + border + margin. En este ejemplo, el ancho
total de la caja sería:

200px (ancho del contenido) + 20px (padding izquierdo) + 20px (padding derecho)

+ 5px (borde izquierdo) + 5px (borde derecho) = 250px.

5.2 Tamaño y Espaciado

Cuando trabajas con el diseño de una página web, controlar el tamaño y el espacio entre elementos es crucial. Aquí están
algunas propiedades clave para manejarlo:

1. width y height: Estas propiedades definen el ancho y alto del contenido de un elemento. Aquí tienes un ejemplo
básico:

div {

width: 300px;

height: 150px;

Esto define que el elemento tendrá un ancho de 300 píxeles y una altura de 150 píxeles. Recuerda que estas propiedades
solo controlan el contenido, no el padding, borde o margen.

2. padding: El padding es el espacio interno entre el contenido y el borde de un elemento. Puedes especificarlo para
todos los lados o individualmente:

div {

padding: 10px; /* Aplica 10px de padding en todos los lados */

}
div {

padding: 10px 20px; /* 10px arriba y abajo, 20px a los lados */

div {

padding: 10px 15px 5px 20px; /* padding arriba, derecha, abajo, izquierda */

3. margin: El margen es el espacio entre el borde del elemento y otros elementos. Funciona de manera similar al
padding:

div {

margin: 20px; /* 20px de margen en todos los lados */

div {

margin: 10px 15px; /* 10px arriba y abajo, 15px a los lados */

4. box-sizing: De manera predeterminada, width y height solo se aplican al contenido del elemento, pero a veces es útil
que incluyan también el padding y el borde. Aquí es donde entra la propiedad box-sizing. Cuando le damos valor
border-box, el padding y el borde se incluyen en el ancho y alto total del elemento:

div {

box-sizing: border-box; /* Ahora el padding y el borde están dentro del tamaño definido */

Esto significa que, si defines un ancho de 200px, ese será el tamaño total del elemento, independientemente del padding y el
borde.

5.3 Margen y Padding

¿Has notado alguna vez que los márgenes se comportan de manera extraña en algunos casos? Hay un fenómeno en CSS
llamado colapso de márgenes, que puede hacer que los márgenes se "fusionen" si están directamente adyacentes.

Esto sucede cuando tienes dos elementos seguidos con márgenes hacia arriba o abajo. En lugar de sumar ambos márgenes,
el navegador solo aplica el mayor de los dos. Aquí tienes un ejemplo:

<h1 style="margin-bottom: 20px;">Título</h1>

<p style="margin-top: 10px;">Este es un párrafo.</p>

En este caso, no se suman los márgenes (20px + 10px = 30px). En lugar de eso, el navegador usará solo el mayor (20px).

Para evitar problemas con los márgenes colapsados, puedes utilizar padding si necesitas un espaciado más predecible, o
jugar con las propiedades margin de manera consciente.

Con esto terminamos el Bloque 5 sobre el Modelo de Caja. Este concepto es uno de los más importantes en CSS porque te
permite controlar cómo se ven y se comportan los elementos en tu página
Bloque 6: Diseño de Páginas Web con CSS

6.1 Posicionamiento y Display

¿Alguna vez has querido mover los elementos de tu página a lugares específicos? Ya sea para centrar un botón o alinear
imágenes, CSS te ofrece diferentes formas de posicionar y mostrar elementos. Vamos a empezar con dos conceptos clave:
posicionamiento y display.

Tipos de display

La propiedad display controla cómo se muestran los elementos en la página. Aquí tienes los tipos más comunes:

1. block: Los elementos de tipo bloque (como <div>, <p>, <h1>) ocupan todo el ancho disponible y se colocan uno
debajo del otro.

div {

display: block;

2. inline: Los elementos en línea (como <span>, <a>) solo ocupan el espacio necesario y pueden estar en la misma línea
que otros elementos.

span {

display: inline;

3. inline-block: Combina lo mejor de los dos mundos: se comporta como inline pero puedes establecer propiedades de
ancho y alto como si fuera un bloque.

img {

display: inline-block;

4. none: Si quieres ocultar un elemento, puedes usar display: none. Esto hará que el elemento desaparezca
completamente de la página.

div {

display: none;

Posicionamiento en CSS

CSS te ofrece diferentes formas de posicionar los elementos dentro de la página. Aquí tienes los tipos más comunes:

1. static (por defecto): Los elementos están posicionados de acuerdo con el flujo normal de la página. Si no defines un
tipo de posicionamiento, este es el comportamiento predeterminado.

div {

position: static;

2. relative: Los elementos con posición relativa se posicionan en relación a su posición normal. Esto significa que
puedes moverlos arriba, abajo, izquierda o derecha, pero siguen ocupando su espacio original en el flujo de la
página.

div {

position: relative;

top: 10px; /* Mueve el div 10px hacia abajo */

}
3. absolute: Los elementos con posición absoluta se colocan en relación a su contenedor más cercano con position:
relative o absolute. De lo contrario, se posicionan en relación a la ventana del navegador.

div {

position: absolute;

top: 50px;

left: 100px;

4. fixed: Los elementos con posición fija se mantienen en la misma posición en la ventana del navegador, incluso
cuando haces scroll. Un buen ejemplo son los menús fijos en la parte superior de una página.

div {

position: fixed;

top: 0;

left: 0;

5. sticky: Un elemento con posición sticky actúa como relative hasta que alcanzas un cierto punto en la página,
momento en el que se "pega" como si fuera fixed.

div {

position: sticky;

top: 0;

6.2 Diseño con Flexbox

¿Alguna vez te ha frustrado intentar alinear elementos en tu página? CSS Flexbox es una herramienta poderosa que te
permite controlar la disposición y alineación de elementos de manera mucho más sencilla.

Flexbox se basa en dos conceptos: un contenedor flexible y sus elementos flexibles.

1. Configurar el contenedor flexible: Para usar Flexbox, debes primero convertir un contenedor en un "flex container"
aplicándole la propiedad display: flex. Esto hará que todos los elementos hijos dentro de este contenedor se
comporten como "elementos flexibles".

.contenedor {

display: flex;

2. Dirección del eje principal: Flexbox organiza los elementos en una fila (por defecto) o en una columna usando la
propiedad flex-direction.

.contenedor {

display: flex;

flex-direction: row; /* Los elementos se alinean en una fila */

.contenedor-column {

display: flex;

flex-direction: column; /* Los elementos se alinean en una columna */

}
3. Alineación y justificación: Uno de los grandes beneficios de Flexbox es la facilidad para alinear elementos en el eje
principal (horizontal) y en el eje cruzado (vertical).

o justify-content: Controla la alineación en el eje principal (horizontal en una fila).

.contenedor {

justify-content: center; /* Alinea los elementos al centro de la fila */

o align-items: Controla la alineación en el eje cruzado (vertical en una fila).

.contenedor {

align-items: center; /* Alinea los elementos al centro vertical */

4. Espaciado entre elementos: Puedes usar space-between para distribuir los elementos uniformemente en el
contenedor, dejando espacio entre ellos, o space-around para agregar espacio antes y después de cada elemento.

.contenedor {

justify-content: space-between; /* Deja espacio entre los elementos */

Flexbox es increíblemente flexible (de ahí su nombre) y es ideal para centrar elementos, crear layouts complejos y mantener
tu diseño organizado sin demasiado esfuerzo.

6.3 Grid Layout Avanzado

¿Sabías que CSS Grid te permite organizar los elementos de una página en una cuadrícula compleja con facilidad? Con CSS
Grid Layout, puedes crear diseños avanzados con filas y columnas definidas, ideal para layouts más estructurados.

1. Configurar el contenedor Grid: Similar a Flexbox, primero debes convertir un contenedor en un grid container con
display: grid. Luego defines las filas y columnas.

.contenedor-grid {

display: grid;

grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual tamaño */

grid-template-rows: 200px 100px; /* 2 filas con diferentes alturas */

o grid-template-columns: Define el número y tamaño de las columnas.

o grid-template-rows: Define el número y tamaño de las filas.

2. Colocar los elementos en la cuadrícula: Cada elemento dentro del grid se coloca automáticamente en una celda,
pero puedes controlar en qué posición exacta estará usando grid-column y grid-row.

.elemento {

grid-column: 1 / 3; /* Este elemento ocupará las columnas 1 y 2 */

grid-row: 1; /* Se posiciona en la primera fila */

3. Espaciado entre celdas: Puedes controlar el espacio entre las celdas usando grid-gap o las propiedades más
específicas row-gap y column-gap:

.contenedor-grid {

grid-gap: 10px; /* Espacio de 10px entre las filas y columnas */

4. Alineación en el Grid: CSS Grid también te permite alinear el contenido dentro de las celdas:
.contenedor-grid {

justify-items: center; /* Alinea horizontalmente el contenido */

align-items: center; /* Alinea verticalmente el contenido */

CSS Grid es extremadamente poderoso para crear layouts complejos de forma ordenada y eficiente. Puedes combinar filas,
columnas y crear zonas para diferentes partes de tu página, como un encabezado, un menú de navegación y el contenido
principal.

¡Felicidades! Has completado el Bloque 6. Ahora sabes cómo organizar y diseñar páginas web con técnicas avanzadas de CSS
como Flexbox y Grid

Bloque 7: Diseño Responsivo

7.1 Concepto de Diseño Responsivo

¿Te has dado cuenta de que algunas páginas web se ven bien tanto en una computadora de escritorio como en un teléfono
móvil? Esto es gracias al diseño responsivo, una técnica que asegura que los sitios web se adapten a diferentes tamaños de
pantalla y dispositivos, proporcionando una experiencia de usuario agradable en cualquier entorno.

En el diseño web moderno, es esencial que tu sitio funcione bien en pantallas grandes y pequeñas. Para lograr esto, CSS nos
ofrece una poderosa herramienta llamada media queries.

7.2 Uso de Media Queries

Las media queries permiten aplicar estilos CSS según el tamaño de la pantalla, la resolución, la orientación (vertical u
horizontal) y otros factores. La sintaxis básica de una media query es la siguiente:

@media (max-width: 768px) {

/* Estilos para pantallas de hasta 768px de ancho */

Esto significa que los estilos dentro de la media query solo se aplicarán cuando el ancho de la pantalla sea igual o menor a
768 píxeles, lo que es común en tablets o dispositivos móviles en orientación vertical.

Veamos algunos ejemplos para hacer tu sitio más responsivo:

1. Cambiar el diseño en pantallas pequeñas: Imagina que tienes un diseño de tres columnas en pantallas grandes,
pero.contenedor {

display: flex;

flex-direction: row;

@media (max-width: 768px) {

.contenedor {

flex-direction: column; /* Cambia a una columna en pantallas pequeñas */

2. Ocultar elementos en dispositivos móviles: A veces, ciertos elementos solo tienen sentido en pantallas grandes,
como menús complejos o imágenes grandes. Puedes ocultar estos elementos en pantallas más pequeñas con
display: none:

@media (max-width: 600px) {


.elemento-grande {

display: none; /* Oculta el elemento en pantallas menores a 600px */

3. Adaptar el tamaño del texto: Quizás en pantallas grandes quieras que los títulos sean más grandes, pero en pantallas
pequeñas sería mejor que sean más pequeños para mejorar la legibilidad:

h1 {

font-size: 36px;

@media (max-width: 600px) {

h1 {

font-size: 24px; /* Reduce el tamaño del texto en móviles */

Las media queries te permiten crear un diseño que se ajuste a cualquier dispositivo, garantizando que la experiencia del
usuario sea excelente sin importar el tamaño de pantalla.

7.3 Unidades Relativas y Viewports

Cuando trabajamos con diseño responsivo, es importante no solo usar media queries, sino también emplear unidades que se
adapten a diferentes tamaños de pantalla. Aquí te mostramos las más útiles:

1. Porcentajes (%): Los porcentajes son relativos al tamaño del contenedor principal. Son muy útiles cuando quieres
que los elementos se ajusten automáticamente al espacio disponible.

.contenedor {

width: 80%; /* El contenedor ocupará el 80% del ancho del elemento padre */

2. Unidades relativas a la fuente (em, rem):

o em: El tamaño de 1em es igual al tamaño de la fuente del elemento padre.

o rem: El tamaño de 1rem es igual al tamaño de la fuente raíz del documento.

Usar estas unidades te permite escalar tamaños de texto de manera fluida:

p{

font-size: 1.5rem; /* Tamaño 1.5 veces mayor que la fuente raíz */

3. Unidades relativas al viewport (vh, vw):

o vh (viewport height): Es el 1% de la altura de la ventana del navegador.

o vw (viewport width): Es el 1% del ancho de la ventana del navegador.

Estas unidades son muy útiles para crear elementos que se adapten dinámicamente al tamaño de la pantalla:

.hero {

height: 100vh; /* El elemento tendrá una altura igual al 100% de la pantalla */

}
Usar unidades relativas garantiza que tu diseño sea flexible y se vea bien en cualquier dispositivo, ya sea un teléfono móvil,
una tablet o una pantalla grande de escritorio.

7.4 Estrategia Mobile First

¿Sabías que cada vez más personas navegan por Internet desde sus teléfonos móviles? Es por eso que muchos diseñadores
adoptan una estrategia llamada Mobile First (Primero Móvil).

El enfoque Mobile First sugiere que diseñes primero tu sitio para dispositivos móviles y luego lo adaptes para pantallas más
grandes. Así, en lugar de pensar en cómo "reducir" un diseño de escritorio para pantallas pequeñas, te concentras en crear
una experiencia excelente para móviles desde el principio.

Aquí te mostramos cómo aplicar esta estrategia con media queries:

1. Diseñar primero para móviles: En lugar de usar media queries para pantallas pequeñas, escribes tus estilos básicos
para dispositivos móviles. Luego, agregas media queries para pantallas más grandes:

/* Estilos para dispositivos móviles */

.contenedor {

width: 100%;

@media (min-width: 768px) {

/* Estilos para pantallas más grandes */

.contenedor {

width: 50%;

De esta manera, los dispositivos móviles reciben el diseño por defecto, y solo los dispositivos más grandes obtienen estilos
adicionales.

7.5 Optimización para Dispositivos de Alta Resolución

¿Te has dado cuenta de que algunas imágenes se ven borrosas en pantallas Retina o de alta densidad de píxeles? Los
dispositivos modernos, como los iPhones y los MacBooks, tienen pantallas de alta resolución, lo que significa que muestran
muchos más píxeles por pulgada.

Para asegurarte de que tu sitio web se vea bien en estos dispositivos, aquí tienes algunas buenas prácticas:

1. Imágenes para pantallas Retina: Si estás utilizando imágenes, asegúrate de que sean lo suficientemente grandes
para verse bien en pantallas de alta resolución. Una buena práctica es proporcionar imágenes con el doble de la
resolución que normalmente usarías.

Por ejemplo, si necesitas una imagen que se muestre a 300px de ancho, usa una imagen de 600px de ancho y ajusta su
tamaño con CSS:

img {

width: 300px; /* Se muestra a 300px, pero la imagen tiene 600px de ancho */

2. Media queries para alta resolución: También puedes usar media queries para detectar dispositivos de alta densidad
de píxeles y aplicar estilos específicos:

@media only screen and (min-resolution: 2dppx) {

/* Estilos para pantallas de alta resolución */

}
¡Felicidades! Has terminado el Bloque 7 sobre Diseño Responsivo. Ahora ya tienes las herramientas para asegurarte de que
tus sitios web se vean y funcionen bien en cualquier dispositivo, desde pantallas grandes de escritorio hasta teléfonos
móviles.

Bloque 8: Animaciones y Transiciones

8.1 Transiciones en CSS

¿Te has dado cuenta de que algunos sitios web tienen efectos suaves cuando mueves el cursor sobre un botón o un
enlace? Estos efectos suaves se logran usando transiciones en CSS. Las transiciones permiten que los cambios en las
propiedades CSS, como colores o tamaños, se realicen de manera suave en lugar de ser instantáneos.

La propiedad clave para esto es transition. Veamos un ejemplo básico:

button {

background-color: blue;

transition: background-color 0.3s ease; /* Transición de 0.3 segundos */

button:hover {

background-color: red; /* Cambia a rojo cuando el usuario pasa el ratón */

En este ejemplo:

• transition: Le dice al navegador que cuando la propiedad background-color cambie, debe hacerlo gradualmente en
0.3 segundos.

• ease: Controla cómo se realiza la transición. Los valores comunes son:

o ease: Transición suave (rápido al principio, luego lento).

o linear: Transición constante.

o ease-in: Empieza lento y acelera.

o ease-out: Empieza rápido y se ralentiza.

Resultado: Cuando el usuario pasa el ratón sobre el botón, el color de fondo cambia de azul a rojo de forma suave en 0.3
segundos.

8.2 Crear Efectos Suaves con Varias Propiedades

Las transiciones no se limitan a los colores. Puedes aplicar transiciones a varias propiedades a la vez, como el tamaño, el
margen, o la opacidad. Aquí tienes un ejemplo:

div {

width: 200px;

height: 200px;

background-color: lightblue;

transition: width 0.5s, height 0.5s, background-color 1s;

div:hover {

width: 300px;
height: 300px;

background-color: lightcoral;

• width y height: La transición dura 0.5 segundos para el ancho y el alto.

• background-color: La transición de color dura 1 segundo.

Resultado: Cuando el usuario pasa el ratón sobre el div, este se agranda suavemente y cambia de color.

8.3 Animaciones en CSS

Las animaciones en CSS te permiten crear movimientos y efectos más complejos que las simples transiciones. Mientras que
las transiciones requieren un cambio en las propiedades (como pasar el ratón sobre un elemento), las animaciones pueden
ser completamente automáticas y cíclicas.

Para crear una animación en CSS, necesitas dos cosas:

1. @keyframes: Define los pasos de la animación.

2. animation: Aplica la animación al elemento.

Vamos a ver un ejemplo sencillo de una animación que hace que un cuadrado se mueva de izquierda a derecha:

@keyframes mover {

from {

transform: translateX(0);

to {

transform: translateX(300px);

div {

width: 100px;

height: 100px;

background-color: lightgreen;

animation: mover 2s infinite; /* Animación dura 2 segundos y se repite */

• @keyframes mover: Define la animación. En este caso, empezamos con translateX(0) (posición inicial) y terminamos
con translateX(300px) (300 píxeles hacia la derecha).

• animation: mover 2s infinite: Aplica la animación. Dura 2 segundos y se repite indefinidamente (infinite).

Resultado: El cuadrado se mueve de izquierda a derecha continuamente.

8.4 Control de las Animaciones

Puedes personalizar aún más las animaciones usando diferentes propiedades. Aquí te mostramos algunas de las más
importantes:

1. animation-duration: Define la duración de la animación.

animation-duration: 3s; /* La animación dura 3 segundos */


2. animation-timing-function: Controla cómo se distribuyen los tiempos de la animación (similar a ease en
transiciones). Los valores más comunes son ease, linear, ease-in, ease-out, y ease-in-out.

3. animation-delay: Añade un retraso antes de que la animación comience.

animation-delay: 1s; /* La animación empieza 1 segundo después */

4. animation-iteration-count: Controla cuántas veces se repite la animación. Puedes establecer un número específico o
usar infinite para repetirla indefinidamente.

animation-iteration-count: 3; /* La animación se repite 3 veces */

5. animation-direction: Controla la dirección de la animación. Los valores más comunes son:

o normal: La animación se ejecuta hacia adelante.

o reverse: La animación se ejecuta en dirección inversa.

o alternate: La animación va hacia adelante y luego hacia atrás en cada repetición.

animation-direction: alternate; /* Alterna entre avanzar y retroceder */

8.5 Ejemplo Completo: Animación de un Botón

Vamos a combinar todo lo que hemos aprendido para crear un botón que cambie de tamaño, color y posición cuando el
usuario pase el ratón sobre él, y que también tenga una animación automática:

@keyframes crecer {

0% {

transform: scale(1);

background-color: blue;

50% {

transform: scale(1.5);

background-color: green;

100% {

transform: scale(1);

background-color: blue;

button {

padding: 10px 20px;

font-size: 16px;

color: white;

background-color: blue;

border: none;

animation: crecer 4s infinite; /* La animación dura 4 segundos y es infinita */

transition: transform 0.3s ease;

}
button:hover {

transform: translateY(-10px); /* El botón se mueve hacia arriba cuando el ratón lo toca */

En este ejemplo:

• El botón tiene una animación llamada crecer, que cambia su tamaño y color en un ciclo de 4 segundos.

• Además, cuando el usuario pasa el ratón sobre el botón, este se mueve hacia arriba con una transición suave.

Resultado: El botón se agranda y cambia de color continuamente, y cuando el usuario lo toca, se mueve hacia arriba.

Bloque 9: Accesibilidad y SEO en HTML y CSS

9.1 Mejores Prácticas de Accesibilidad

¿Alguna vez te has preguntado cómo hacen las personas con discapacidades para navegar por Internet? La accesibilidad
web busca garantizar que todas las personas, independientemente de sus capacidades, puedan usar y entender el contenido
de una página. Esto incluye a personas con discapacidades visuales, auditivas o motoras.

¿Por qué es importante la accesibilidad? Además de ser un aspecto ético, es importante porque mejora la usabilidad general
de tu sitio, facilita la navegación a un mayor número de personas y mejora tu posicionamiento en los motores de búsqueda
(SEO).

Aquí te dejamos algunas prácticas clave para mejorar la accesibilidad de tu página web:

1. Uso adecuado de las etiquetas HTML: Las etiquetas HTML semánticas (como <header>, <nav>, <main>, <article>,
<section>, <footer>) ayudan a los navegadores y lectores de pantalla a interpretar mejor la estructura de tu
contenido. Esto permite que las personas con discapacidad visual puedan entender el contenido de una página a
través de un lector de pantalla.

Ejemplo de estructura semántica:

<header>

<h1>Título de la Página</h1>

</header>

<main>

<section>

<h2>Sección Principal</h2>

<p>Contenido de la página...</p>

</section>

</main>

<footer>

<p>Derechos reservados</p>

</footer>

2. Descripciones alternativas para imágenes (alt): Las imágenes deben tener una descripción alternativa (atributo alt),
que es un texto que describe la imagen en caso de que no se cargue o para que los lectores de pantalla puedan
describirla a las personas con discapacidad visual.

Ejemplo:

<img src="imagen.jpg" alt="Una playa con aguas cristalinas y arena blanca">

Consejo: El texto alt debe ser descriptivo y explicar lo que aparece en la imagen, pero si la imagen es decorativa, puedes
dejar el alt vacío: alt="".

3. Atributos aria para accesibilidad: ARIA (Accessible Rich Internet Applications) es un conjunto de atributos que
puedes usar para hacer tu página más accesible a personas con discapacidades. Algunos ejemplos:
o aria-label: Proporciona una etiqueta a un elemento interactivo.

o aria-hidden="true": Indica que un elemento no debe ser leído por un lector de pantalla.

Ejemplo:

<button aria-label="Cerrar ventana">X</button>

4. Contraste adecuado entre texto y fondo: Asegúrate de que haya suficiente contraste entre el color del texto y el
color de fondo para que el contenido sea fácil de leer. Esto es especialmente importante para personas con
dificultades visuales.

Recomendación: Usa herramientas en línea que verifiquen si el contraste entre los colores de tu página cumple con los
estándares de accesibilidad.

9.2 Estructura de un Documento Optimizado para SEO

¿Te gustaría que más personas encontraran tu página web en Google? El SEO (Search Engine Optimization) o optimización
para motores de búsqueda es un conjunto de prácticas que te ayudan a mejorar la visibilidad de tu sitio en los resultados de
búsqueda. Aunque el SEO incluye muchos factores, aquí nos enfocaremos en las prácticas más relevantes relacionadas con
HTML y CSS.

1. Uso adecuado de encabezados (<h1> a <h6>): Los encabezados ayudan a los motores de búsqueda a entender la
estructura y jerarquía de tu contenido. Usa un solo <h1> para el título principal de la página, y luego usa <h2>, <h3>,
etc., para los subtítulos de las secciones.

Ejemplo:

<h1>Título Principal</h1>

<h2>Subtítulo 1</h2>

<h3>Subtítulo del Subtítulo 1</h3>

2. Metaetiquetas (<meta>): Las metaetiquetas proporcionan información sobre tu página web a los motores de
búsqueda. Aquí te mostramos dos de las más importantes:

o <meta name="description">: Describe brevemente el contenido de la página. Esta descripción es la que a


menudo aparece debajo del título en los resultados de búsqueda.

o <meta name="keywords"> (menos relevante en la actualidad): Proporciona palabras clave relacionadas con
el contenido de la página.

Ejemplo:

<meta name="description" content="Aprende HTML y CSS desde cero con este curso para principiantes.">

<meta name="keywords" content="HTML, CSS, tutorial, curso, principiantes">

3. URLs amigables: Usa URLs claras y descriptivas que expliquen el contenido de la página. Esto no es solo bueno para
los motores de búsqueda, sino también para los usuarios.

Ejemplo de URL amigable:

https://mipagina.com/curso-html-css

4. Uso de enlaces internos y externos: Los enlaces ayudan a los motores de búsqueda a entender la relevancia de tu
contenido. Usa enlaces internos para conectar diferentes páginas de tu sitio web y enlaces externos para dirigir a los
usuarios a fuentes confiables y relacionadas.

Ejemplo de enlace interno:

<a href="/contacto">Contáctanos</a>

9.3 Importancia de las Etiquetas Semánticas

¿Sabías que el uso de etiquetas semánticas no solo mejora la accesibilidad, sino que también ayuda al SEO? Los motores
de búsqueda prefieren las páginas que tienen una estructura clara y organizada. Las etiquetas semánticas como <header>,
<nav>, <article>, <section>, y <footer> hacen que tu página sea más fácil de entender tanto para los usuarios como para los
motores de búsqueda.
Por ejemplo:

<header>

<h1>Bienvenido a mi sitio web</h1>

</header>

<nav>

<ul>

<li><a href="/inicio">Inicio</a></li>

<li><a href="/sobre-nosotros">Sobre Nosotros</a></li>

<li><a href="/contacto">Contacto</a></li>

</ul>

</nav>

<main>

<article>

<h2>Últimas Noticias</h2>

<p>Este es el contenido de la sección de noticias.</p>

</article>

</main>

<footer>

<p>&copy; 2024 Mi Sitio Web</p>

</footer>

Esta estructura no solo mejora la legibilidad y accesibilidad de la página, sino que también facilita que los motores de
búsqueda clasifiquen tu contenido correctamente.

9.4 Accesibilidad y SEO Trabajando Juntos

La accesibilidad y el SEO están estrechamente relacionados. Una página web accesible suele tener mejor posicionamiento
en los motores de búsqueda, porque proporciona una mejor experiencia de usuario y facilita que los motores de búsqueda
interpreten y clasifiquen tu contenido.

Algunos puntos clave donde la accesibilidad y el SEO se superponen:

• Las descripciones alternativas (alt) en las imágenes no solo ayudan a los usuarios con discapacidades, sino que
también permiten a Google comprender mejor el contenido visual de tu página.

• Encabezados bien estructurados no solo mejoran la accesibilidad, sino que también le indican a Google cuáles son
los temas más importantes de tu página.

• Las etiquetas semánticas mejoran tanto la navegación para personas con discapacidades como la interpretación del
contenido por parte de los motores de búsqueda.

Con esto terminamos el Bloque 9 sobre Accesibilidad y SEO en HTML y CSS.


Bloque 10: Herramientas y Buenas Prácticas

10.1 Herramientas para Desarrolladores

¿Te has preguntado cómo algunos desarrolladores pueden depurar problemas en sus sitios web tan rápido? La respuesta
está en las herramientas para desarrolladores que ofrecen los navegadores. Estas herramientas te permiten inspeccionar,
modificar y depurar el código HTML, CSS y JavaScript directamente en el navegador.

Aquí te mostramos algunas de las características más útiles:

1. DevTools (Herramientas de Desarrollo): La mayoría de los navegadores como Chrome, Firefox y Edge tienen
herramientas de desarrollo incorporadas. Puedes acceder a ellas haciendo clic derecho en cualquier parte de la
página y seleccionando "Inspeccionar" o presionando la tecla F12.

Dentro de las DevTools, puedes:

o Inspeccionar HTML y CSS: Ver y modificar el HTML y CSS en tiempo real. Esto es muy útil cuando quieres
probar cambios rápidos sin tener que modificar tu archivo original.

o Verificar diseño y disposición: Puedes ver cómo se distribuyen los elementos en tu página, revisar el modelo
de caja, y ajustar el tamaño o el espaciado.

o Depurar JavaScript: Si tu página incluye JavaScript, puedes ver los errores en la consola y depurar el código
paso a paso.

2. Validadores de código: Los validadores son herramientas que te ayudan a asegurarte de que tu código cumple con
los estándares web. Una página web sin errores es más accesible, tiene mejor SEO y es más compatible con
diferentes navegadores.

o W3C Validator: Valida tu HTML y CSS para asegurarte de que cumples con los estándares. Puedes usar el
validador oficial del W3C aquí: W3C Validator.

o CSS Lint: Una herramienta que analiza tu CSS en busca de errores o posibles mejoras. Puedes usarla aquí:
CSS Lint.

10.2 Inspección y Edición en Tiempo Real

Con las DevTools, puedes modificar el diseño de tu página sobre la marcha y ver los resultados al instante sin tener que
recargar o guardar tu archivo. Esto te permite probar diferentes diseños o corregir errores rápidamente.

Veamos cómo puedes hacerlo:

1. Inspección de elementos: Si quieres ver el estilo de un elemento específico, puedes hacer clic derecho sobre él y
seleccionar "Inspeccionar". Esto te llevará directamente al HTML y CSS correspondiente en las herramientas de
desarrollo, donde podrás ver todos los estilos aplicados y modificarlos.

2. Edición en tiempo real: Puedes cambiar cualquier propiedad CSS en las DevTools y ver cómo cambia la apariencia de
tu página inmediatamente. Por ejemplo, si quieres cambiar el color de un botón, puedes buscar su propiedad
background-color y modificarla directamente en el navegador.

Consejo: Los cambios que hagas en las DevTools no se guardan en tus archivos originales. Úsalas para experimentar, y luego
copia los cambios que te gusten a tu código fuente.

10.3 Organización de Proyectos y Buenas Prácticas

A medida que trabajas en proyectos más grandes, es importante mantener tu código organizado y fácil de mantener. Aquí
tienes algunas buenas prácticas que te ayudarán a mantener tu código limpio y ordenado:

1. Estructura de carpetas y archivos: A medida que tu proyecto crece, es útil tener una estructura de carpetas bien
organizada. Una estructura común para un proyecto web puede verse así:

/mi-proyecto

├── /css

│ └── estilos.css

├── /images
│ └── logo.png

├── /js

│ └── app.js

├── index.html

└── contacto.html

o /css: Aquí puedes almacenar todos tus archivos CSS.

o /images: Aquí se almacenan las imágenes que utiliza tu sitio web.

o /js: Para tus archivos JavaScript.

o Archivos HTML: Puedes mantenerlos en la raíz del proyecto o en una carpeta separada si tienes muchos.

2. Comentarios y legibilidad del código: Asegúrate de escribir comentarios en tu código para explicar partes
importantes, especialmente si son complejas. Los comentarios hacen que el código sea más fácil de entender, tanto
para ti como para cualquier otra persona que trabaje en el proyecto.

o En HTML:

<!-- Este es un comentario -->

o En CSS:

/* Este es un comentario */

3. Los comentarios también pueden ayudar a dividir tu código en secciones lógicas, lo que hace que sea más fácil de
navegar.

4. Nombres claros y consistentes: Usa nombres descriptivos y consistentes para las clases e IDs en tu HTML y CSS. Esto
no solo hará que tu código sea más fácil de leer, sino que también te ayudará a evitar confusiones cuando trabajes en
proyectos grandes.

Ejemplo de nombres claros:

<div class="navbar-menu">

<ul class="menu-list">

<li class="menu-item">Inicio</li>

<li class="menu-item">Sobre Nosotros</li>

</ul>

</div>

5. Reutilización de estilos: Usa clases para aplicar estilos que puedas reutilizar en diferentes partes de la página. Esto
hace que tu código sea más eficiente y fácil de mantener.

.btn {

background-color: #3498db;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

Luego puedes reutilizar la clase .btn para aplicar el mismo estilo a diferentes botones en tu página.

10.4 Metodologías de Organización en CSS


Existen varias metodologías que puedes usar para estructurar tu CSS de manera modular y organizada. Aquí te mostramos
dos de las más populares:

1. BEM (Block, Element, Modifier): BEM es una metodología para nombrar clases en CSS que facilita la creación de
componentes reutilizables. Funciona dividiendo los elementos en bloques, elementos y modificadores.

o Bloque: Es un contenedor independiente que agrupa una funcionalidad.

o Elemento: Una parte del bloque que tiene una función específica.

o Modificador: Una variación o estado del bloque o elemento.

Ejemplo de BEM:

<div class="menu">

<ul class="menu__list">

<li class="menu__item menu__item--active">Inicio</li>

<li class="menu__item">Servicios</li>

</ul>

</div>

En este caso:

o menu es el bloque.

o menu__list y menu__item son elementos del bloque.

o menu__item--active es un modificador que indica que el elemento está activo.

2. SMACSS (Scalable and Modular Architecture for CSS): SMACSS es otra metodología que te ayuda a estructurar tu
CSS en diferentes categorías, como base, diseño, módulos, estado y tema. Su objetivo es hacer que el CSS sea
escalable y fácil de mantener a medida que el proyecto crece.

En SMACSS, podrías dividir tu CSS en diferentes archivos para cada categoría:

o base.css: Aquí defines los estilos generales como los tipos de fuente y los colores.

o layout.css: Define el diseño general de la página, como el encabezado, el pie de página y la disposición de las
columnas.

o module.css: Define los estilos para componentes reutilizables, como botones o menús.

o state.css: Define los estilos para diferentes estados de los componentes, como hover o active.

Con esto completamos el Bloque 10 sobre Herramientas y Buenas Prácticas. Ahora sabes cómo mantener tu código
organizado, usar las herramientas para desarrolladores y aplicar metodologías para crear proyectos escalables y fáciles de
mantener

Bloque 11: Proyecto Final

En este bloque, vamos a crear un sitio web estático completamente funcional que pondrá a prueba tus habilidades en HTML,
CSS y diseño responsivo. El objetivo es que construyas una página web atractiva y bien organizada, utilizando las técnicas que
hemos cubierto hasta ahora.

11.1 Definición del Proyecto

Vamos a crear un sitio web sencillo de una página que podría servir como página personal o de un pequeño negocio. Este
sitio tendrá las siguientes secciones:

1. Encabezado con logotipo y menú de navegación.

2. Sección de bienvenida con un llamado a la acción.

3. Sección sobre nosotros con una breve descripción.

4. Galería de imágenes con una disposición atractiva.


5. Formulario de contacto funcional.

6. Pie de página con enlaces a redes sociales.

Este proyecto integrará HTML semántico, CSS para estilos y disposición de elementos, y media queries para asegurarnos de
que sea responsivo y se vea bien en dispositivos móviles.

11.2 Estructura HTML del Sitio

Vamos a empezar por escribir la estructura básica del HTML. Esta estructura incluirá todas las secciones mencionadas
anteriormente y usará etiquetas semánticas.

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Página personal o de negocio con información sobre nosotros y contacto">

<title>Mi Sitio Web</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<!-- Encabezado -->

<header class="header">

<div class="container">

<h1 class="logo">Mi Sitio Web</h1>

<nav class="nav">

<ul class="nav__list">

<li class="nav__item"><a href="#welcome" class="nav__link">Inicio</a></li>

<li class="nav__item"><a href="#about" class="nav__link">Sobre Nosotros</a></li>

<li class="nav__item"><a href="#gallery" class="nav__link">Galería</a></li>

<li class="nav__item"><a href="#contact" class="nav__link">Contacto</a></li>

</ul>

</nav>

</div>

</header>

<!-- Sección de Bienvenida -->

<section id="welcome" class="welcome">

<div class="container">

<h2>Bienvenido a Mi Sitio Web</h2>

<p>Estamos encantados de tenerte aquí. Explora más sobre nosotros y nuestros servicios.</p>

<a href="#about" class="btn">Saber más</a>


</div>

</section>

<!-- Sección Sobre Nosotros -->

<section id="about" class="about">

<div class="container">

<h2>Sobre Nosotros</h2>

<p>Somos un equipo apasionado por lo que hacemos, con años de experiencia en el sector.</p>

</div>

</section>

<!-- Galería -->

<section id="gallery" class="gallery">

<div class="container">

<h2>Galería</h2>

<div class="gallery__grid">

<img src="imagen1.jpg" alt="Descripción de imagen 1" class="gallery__item">

<img src="imagen2.jpg" alt="Descripción de imagen 2" class="gallery__item">

<img src="imagen3.jpg" alt="Descripción de imagen 3" class="gallery__item">

</div>

</div>

</section>

<!-- Formulario de Contacto -->

<section id="contact" class="contact">

<div class="container">

<h2>Contacto</h2>

<form action="enviar.php" method="POST" class="contact__form">

<div class="form__group">

<label for="nombre">Nombre:</label>

<input type="text" id="nombre" name="nombre" required>

</div>

<div class="form__group">

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

</div>

<div class="form__group">

<label for="mensaje">Mensaje:</label>

<textarea id="mensaje" name="mensaje" rows="5" required></textarea>


</div>

<button type="submit" class="btn">Enviar</button>

</form>

</div>

</section>

<!-- Pie de Página -->

<footer class="footer">

<div class="container">

<p>&copy; 2024 Mi Sitio Web</p>

<ul class="social">

<li><a href="#" class="social__link">Facebook</a></li>

<li><a href="#" class="social__link">Instagram</a></li>

<li><a href="#" class="social__link">Twitter</a></li>

</ul>

</div>

</footer>

</body>

</html>

11.3 Estilos CSS para el Proyecto

El siguiente paso es agregar estilos a nuestro sitio para hacerlo más atractivo. Vamos a centrarnos en el diseño, el uso de
flexbox para el layout y algunos efectos básicos de transición.

/* Estilos generales */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: Arial, sans-serif;

line-height: 1.6;

color: #333;

.container {

max-width: 1200px;

margin: 0 auto;
padding: 0 20px;

/* Encabezado */

.header {

background-color: #3498db;

padding: 20px 0;

.logo {

color: white;

font-size: 24px;

text-transform: uppercase;

.nav {

text-align: right;

.nav__list {

list-style: none;

.nav__item {

display: inline-block;

margin: 0 10px;

.nav__link {

color: white;

text-decoration: none;

font-size: 18px;

.nav__link:hover {

text-decoration: underline;

/* Sección de Bienvenida */
.welcome {

background-color: #f4f4f4;

padding: 40px 0;

text-align: center;

.welcome h2 {

margin-bottom: 20px;

font-size: 32px;

.btn {

background-color: #3498db;

color: white;

padding: 10px 20px;

text-decoration: none;

border-radius: 5px;

transition: background-color 0.3s ease;

.btn:hover {

background-color: #2980b9;

/* Sección Sobre Nosotros */

.about {

padding: 40px 0;

text-align: center;

/* Galería */

.gallery {

padding: 40px 0;

text-align: center;

.gallery__grid {

display: flex;

gap: 20px;
justify-content: center;

.gallery__item {

width: 200px;

height: auto;

border-radius: 5px;

transition: transform 0.3s ease;

.gallery__item:hover {

transform: scale(1.1);

/* Formulario de Contacto */

.contact {

background-color: #f4f4f4;

padding: 40px 0;

.contact__form {

max-width: 600px;

margin: 0 auto;

.form__group {

margin-bottom: 20px;

.form__group label {

display: block;

margin-bottom: 5px;

.form__group input,

.form__group textarea {

width: 100%;

padding: 10px;

border: 1px solid #ccc;


border-radius: 5px;

button {

background-color: #3498db;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

transition: background-color 0.3s ease;

button:hover {

background-color: #2980b9;

/* Pie de página */

.footer {

background-color: #333;

color: white;

padding: 20px 0;

text-align: center;

.footer p {

margin-bottom: 10px;

.social {

list-style: none;

padding: 0;

.social__link {

color: white;

margin: 0 10px;

text-decoration: none;

}
.social__link:hover {

text-decoration: underline;

11.4 Optimización y Publicación

Una vez que hayas finalizado el proyecto, asegúrate de realizar los siguientes pasos para prepararlo para la publicación:

1. Minificación de archivos: Reduce el tamaño de los archivos CSS y HTML eliminando espacios en blanco y
comentarios innecesarios. Esto ayuda a que tu página cargue más rápido.

o Puedes usar herramientas en línea como CSS Minifier y HTML Minifier para hacerlo.

2. Validación del código: Asegúrate de que tu HTML y CSS cumplen con los estándares utilizando el validador del W3C.

3. Subida al servidor: Puedes usar servicios como GitHub Pages o Netlify para publicar tu sitio web de manera gratuita.

¡Felicidades! Con esto concluye el Bloque 11 y el proyecto final.

También podría gustarte