Introducción a HTML
HTML, o lenguaje de marcado de hipertexto, es el lenguaje estándar para crear páginas web y aplicaciones. Es un lenguaje de marcado, lo que significa que proporciona una estructura para el contenido de la web y describe cómo se ve ese contenido.
Estructura básica
Un documento HTML básico tiene una estructura específica, que incluye elementos de tipo de documento, encabezado y cuerpo. El tipo de documento declara que la página es un documento HTML. El elemento de encabezado contiene metadatos sobre el documento, como el título de la página, mientras que el cuerpo contiene el contenido de la página, como texto, imágenes, listas, enlaces, etc.
<!DOCTYPE html>
<html>
<cabeza>
<title>Título de la página</title>
</cabeza>
<cuerpo>
Contenido de la página aquí.
</cuerpo>
</html>
Etiquetas y Atributos
Las etiquetas HTML son los componentes básicos de una página HTML. Definen y describen el contenido. Cada etiqueta comienza con un corchete angular (<) y termina con un corchete angular (>). Algunos ejemplos de etiquetas HTML incluyen <h1> para títulos, <p> para párrafos, <a> para enlaces, etc.
Los atributos HTML proporcionan información adicional sobre los elementos. Vienen en pares de nombre/valor y siempre se incluyen al principio de la etiqueta. Por ejemplo, la etiqueta de enlace (<a>) suele incluir el atributo 'href', que indica la URL a la que conduce el enlace.
<a href="https://www.example.com">Este es un enlace a Ejemplo.com</a>
Consultas de medios
Las consultas de medios son una técnica CSS que le permite adaptar la disposición y el diseño de una página web a diferentes dispositivos y tamaños de pantalla. Son una parte crucial del diseño responsivo.
Una consulta de medios consta de un tipo de medio y una o más expresiones que verifican las condiciones de ciertos recursos del dispositivo. Por ejemplo, puede utilizar una consulta de medios para aplicar un conjunto de estilos CSS si el ancho de la ventana del navegador es inferior a 600 px.
@pantalla multimedia y (ancho máximo: 600 px) {
cuerpo {
color de fondo: azul claro;
}
}
En este ejemplo, el fondo de la página será azul claro si el ancho de la ventana del navegador es inferior a 600 px.
Las consultas de medios son una herramienta poderosa para crear una experiencia de usuario optimizada para diferentes dispositivos. Le permiten crear diseños que responden a cambios en el entorno del usuario, como el tamaño de la pantalla, la orientación (vertical u horizontal) y la resolución de la pantalla.
En conclusión, HTML es la base de cualquier página web. Comprender la estructura básica de HTML, etiquetas y atributos, y cómo utilizar Media Queries para crear diseños responsivos es esencial para convertirse en un desarrollador front-end eficaz.
