Componentes HTML
- AGR
- Web , Programación
- 15 Feb, 2025
Componentes HTML y Estilos CSS
En este blog explicativo se muestran los componentes principales de HTML y estilos CSS para modificar el color de letra, fondo, imágenes, redondeos, videos, botones, tablas, etc. Se presentan 15 componentes HTML y 20 estilos CSS, cada uno explicado con su código correspondiente.
Índice
- Componentes HTML y Estilos CSS
- Índice
- Componentes HTML
- Estilos CSS
- 1. Color de Texto
- 2. Color de Fondo
- 3. Fuente (font-family)
- 4. Tamaño de Fuente
- 5. Alineación de Texto
- 6. Bordes
- 7. Sombra en el Texto
- 8. Padding
- 9. Margin
- 10. Bordes Redondeados (Border Radius)
- 11. Ancho y Altura
- 12. Transición
- 13. Efecto Hover en Botones
- 14. Opacidad
- 15. Estilo de Lista
- 16. Estilos de Tabla
- 17. Estilos para Imágenes
- 18. Sombra en Cajas (Box Shadow)
- 19. Estilos para Enlaces
- 20. Media Queries y Diseño Responsivo
- Ejemplos interesantes de estilos para el elemento
<body>
Componentes HTML
1. Estructura Básica HTML
La estructura mínima de un documento HTML, que define el encabezado y el cuerpo del contenido.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Estructura Básica</title>
</head>
<body>
<h1>Bienvenido a mi blog</h1>
<p>Este es un ejemplo de estructura básica en HTML.</p>
</body>
</html>Explicación: Define la estructura inicial y los elementos esenciales del documento.
2. Encabezados
Se utilizan para marcar títulos y subtítulos en la página.
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Encabezado de Nivel 3</h3>Explicación: De <h1> a <h6> se utilizan para jerarquizar el contenido.
3. Párrafos
Agrupa bloques de texto con la etiqueta <p>.
<p>Este es un párrafo de ejemplo que contiene texto descriptivo.</p>Explicación: Facilita la lectura y organización del contenido textual.
4. Enlaces
Crea vínculos a otras páginas o secciones internas.
<a href="https://www.ejemplo.com" target="_blank">Visita Ejemplo</a>Explicación: El atributo target="_blank" abre el enlace en una nueva pestaña.
5. Imágenes
Permite insertar imágenes en la página.
<img src="imagen.jpg" alt="Descripción de la imagen" width="300">Explicación: src indica la ruta de la imagen y alt provee texto alternativo para accesibilidad.
6. Listas
Existen dos tipos: listas ordenadas <ol> y listas desordenadas <ul>, con elementos <li>.
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<ol>
<li>Primer Elemento</li>
<li>Segundo Elemento</li>
<li>Tercer Elemento</li>
</ol>Explicación: Organizan información en forma secuencial o con viñetas.
7. Tablas
Presenta datos en filas y columnas.
<table >
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>Explicación: <tr> define las filas, <th> los encabezados y <td> las celdas de datos.
8. Formularios
Recoge datos ingresados por el usuario.
<form action="/enviar" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<button type="submit">Enviar</button>
</form>Explicación: Los formularios envían información al servidor, utilizando atributos como action y method.
9. Videos
Inserta videos en la página mediante la etiqueta <video>.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta la etiqueta de video.
</video>Explicación: controls añade controles de reproducción (play, pause, etc.).
10. Botones
Elementos interactivos que permiten ejecutar acciones.
<button type="button">Haz clic aquí</button>Explicación: Pueden usarse en formularios o para activar scripts.
11. Divisiones
La etiqueta <div> agrupa elementos para organizarlos o aplicarles estilos.
<div class="contenedor">
<p>Contenido dentro de un div.</p>
</div>Explicación: Útil para estructurar y estilizar bloques de contenido.
12. Secciones
Define áreas temáticas en el contenido usando <section>.
<section>
<h2>Sección de Noticias</h2>
<p>Últimas noticias y actualizaciones.</p>
</section>Explicación: Ayuda a estructurar el contenido de manera semántica.
13. Navegación
Agrupa enlaces de navegación mediante la etiqueta <nav>.
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>Explicación: Facilita el acceso a diferentes secciones del sitio.
14. Encabezado
El <header> contiene el título y elementos introductorios.
<header>
<h1>Mi Blog</h1>
<p>Bienvenido a mi espacio personal.</p>
</header>Explicación: Suele incluir el logo, título y menú principal.
15. Pie de Página
El <footer> contiene información final y de copyright.
<footer>
<p>© 2025 Mi Blog. Todos los derechos reservados.</p>
</footer>Explicación: Se utiliza al final de la página para información complementaria.
Estilos CSS
A continuación se presentan 20 estilos CSS con ejemplos y sus respectivas explicaciones:
1. Color de Texto
Modifica el color del texto.
p {
color: #333333;
}Explicación: Cambia el color del texto de los párrafos a un gris oscuro.
2. Color de Fondo
Define el color de fondo de un elemento.
body {
background-color: #f0f0f0;
}Explicación: Aplica un fondo gris claro a toda la página.
3. Fuente (font-family)
Establece la familia tipográfica para el contenido.
body {
font-family: 'Arial', sans-serif;
}Explicación: Utiliza la fuente Arial, o cualquier fuente sans-serif disponible.
4. Tamaño de Fuente
Controla el tamaño del texto.
h1 {
font-size: 2.5em;
}Explicación: Aumenta el tamaño del texto en los encabezados <h1>.
5. Alineación de Texto
Alinea el contenido textual.
p {
text-align: justify;
}Explicación: Justifica el contenido de los párrafos para una mejor lectura.
6. Bordes
Agrega bordes a los elementos.
img {
border: 2px solid #000;
}Explicación: Rodea las imágenes con un borde negro de 2 píxeles.
7. Sombra en el Texto
Aplica un efecto de sombra al texto.
h1 {
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}Explicación: Añade una sombra sutil a los encabezados <h1>.
8. Padding
Agrega espacio interno dentro de un elemento.
div.contenedor {
padding: 20px;
}Explicación: Proporciona 20px de espacio interno en el contenedor.
9. Margin
Controla el espacio externo alrededor de los elementos.
p {
margin: 15px 0;
}Explicación: Aplica un margen superior e inferior de 15px a los párrafos.
10. Bordes Redondeados (Border Radius)
Redondea las esquinas de los elementos.
img {
border-radius: 10px;
}Explicación: Las imágenes tendrán esquinas redondeadas de 10px.
11. Ancho y Altura
Especifica dimensiones fijas o relativas para un elemento.
.video {
width: 100%;
height: auto;
}Explicación: Hace que el video se ajuste al ancho del contenedor manteniendo la proporción.
12. Transición
Añade efectos de transición al cambiar propiedades.
button {
transition: background-color 0.3s ease;
}Explicación: Suaviza el cambio de color de fondo en los botones en 0.3 segundos.
13. Efecto Hover en Botones
Modifica el estilo de los botones al pasar el mouse.
button:hover {
background-color: #555;
color: #fff;
}Explicación: Al pasar el mouse, el botón cambia a fondo gris oscuro y texto blanco.
14. Opacidad
Controla la transparencia del elemento.
img {
opacity: 0.8;
}Explicación: Hace que las imágenes sean un 80% opacas.
15. Estilo de Lista
Personaliza las viñetas o numeración de las listas.
ul {
list-style-type: square;
}Explicación: Cambia el marcador predeterminado a un cuadrado en las listas desordenadas.
16. Estilos de Tabla
Define la apariencia de las tablas.
table {
border-collapse: collapse;
width: 100%;
}
table, th, td {
border: 1px solid #ddd;
padding: 8px;
}Explicación: Colapsa los bordes y aplica un borde ligero y padding a celdas y encabezados.
17. Estilos para Imágenes
Hace que las imágenes sean responsivas y se adapten al contenedor.
img {
max-width: 100%;
height: auto;
}Explicación: Evita que las imágenes se desborden del contenedor.
18. Sombra en Cajas (Box Shadow)
Agrega una sombra al contenedor para darle profundidad.
div.contenedor {
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}Explicación: Proporciona un efecto de elevación sutil al contenedor.
19. Estilos para Enlaces
Personaliza la apariencia y el comportamiento de los enlaces.
a {
color: #0066cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}Explicación: Los enlaces se muestran en azul y se subrayan al pasar el mouse.
20. Media Queries y Diseño Responsivo
Adapta el diseño a diferentes tamaños de pantalla.
@media (max-width: 768px) {
body {
font-size: 14px;
}
nav ul {
flex-direction: column;
}
}Explicación: Modifica el tamaño de la fuente y la disposición del menú en dispositivos con un ancho máximo de 768px.
Ejemplos interesantes de estilos para el elemento <body>
1. Fondo con Degradado Animado
body {
/* Fondo con degradado animado */
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4);
background-size: 600% 600%;
animation: gradientAnimation 15s ease infinite;
/* Estilos generales */
font-family: 'Helvetica', sans-serif;
color: #333;
margin: 0;
padding: 20px;
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}Explicación:
Este estilo crea un fondo animado que cambia de posición, generando un efecto de degradado en movimiento. Es ideal para sitios modernos y dinámicos.
2. Fondo con Imagen y Overlay
body {
/* Fondo con imagen centrada y fija */
background: url('fondo.jpg') no-repeat center center fixed;
background-size: cover;
/* Estilos generales */
font-family: 'Arial', sans-serif;
color: #fff;
position: relative;
margin: 0;
padding: 0;
}
/* Overlay semitransparente */
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}Explicación:
Este ejemplo utiliza una imagen de fondo que cubre toda la pantalla y añade un overlay oscuro semitransparente para mejorar la legibilidad del contenido superpuesto.
3. Estilo Minimalista y Centrado con Flexbox
body {
background-color: #f4f4f4;
font-family: 'Roboto', sans-serif;
color: #444;
/* Centramos el contenido vertical y horizontalmente */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}Explicación:
Este estilo ofrece una apariencia limpia y minimalista. Utiliza Flexbox para centrar todo el contenido tanto vertical como horizontalmente, ideal para landing pages o secciones de bienvenida.
4. Fondo con Efecto Parallax (Simulado)
body {
background-image: url('parallax.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Georgia', serif;
color: #fff;
margin: 0;
padding: 0;
}Explicación:
El uso de background-attachment: fixed genera un efecto parallax donde la imagen de fondo permanece fija mientras se hace scroll, aportando una sensación de profundidad.
5. Estilo Moderno con Tipografía y Sombras
body {
background-color: #ffffff;
font-family: 'Montserrat', sans-serif;
color: #333;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
line-height: 1.6;
margin: 0;
padding: 30px;
}Explicación:
Este estilo combina una tipografía moderna con un sutil efecto de sombra en el texto para mejorar la legibilidad. La mayor separación entre líneas y el padding adecuado ofrecen un diseño limpio y profesional.
