4.16. Introducción a HTML
HTML, acrónimo de HyperText Markup Language, es el lenguaje de marcado utilizado para desarrollar páginas web. Este lenguaje permite la creación de documentos que se pueden leer en prácticamente cualquier tipo de dispositivo conectado a internet. HTML es la base de cualquier sitio web o aplicación web.
Estructura básica de HTML
Un documento HTML tiene una estructura básica que incluye etiquetas de apertura y cierre. La etiqueta de apertura indica el comienzo de un elemento y la etiqueta de cierre indica el final de ese elemento. Además, un documento HTML se compone de un encabezado y un cuerpo.
El <html> Indica el principio y el final de un documento HTML. Dentro de esta etiqueta, tenemos la etiqueta <head> que contiene información sobre el documento, como el título que aparece en la barra de título del navegador y enlaces a archivos CSS y JavaScript. El <cuerpo> contiene el contenido principal del documento, como texto, imágenes, enlaces, tablas, listas, etc.
Etiquetas y Atributos
Las etiquetas HTML son los elementos que definen la estructura del documento. Cada etiqueta tiene su propio significado y le dice al navegador cómo debe mostrarse el contenido. Algunos ejemplos de etiquetas son: <h1> para títulos, <p> para párrafos, <a> para enlaces, <img> para imágenes, entre otros.
Los atributos se utilizan para proporcionar información adicional sobre los elementos. Aparecen en la etiqueta de apertura y van seguidos de un signo igual y un valor entre comillas. Por ejemplo, en la etiqueta <a href="https://www.example.com">Ejemplo</a>, href es un atributo que indica la dirección del enlace.
Introducción a CSS
CSS, u hojas de estilo en cascada, es un lenguaje de estilo utilizado para describir la apariencia de un documento escrito en HTML. Con CSS, puedes controlar el diseño de varias páginas a la vez, así como varios aspectos del diseño, como colores, fuentes y espaciado.
Estructura CSS básica
Una hoja de estilos CSS consta de una lista de reglas. Cada regla o conjunto de reglas consta de un selector y un bloque de declaración. El selector apunta al elemento HTML al que desea aplicar estilo. El bloque de declaración contiene una o más declaraciones separadas por punto y coma. Cada declaración incluye una propiedad CSS y un valor, separados por dos puntos.
Selectores y propiedades
Los selectores definen a qué elementos se aplica la regla. Pueden seleccionar elementos por tipo, clase o ID, entre otros. Las propiedades son aspectos del elemento a los que puede aplicar estilo, como color, fuente, tamaño, margen, relleno, etc. El valor de la propiedad define cómo desea diseñar este aspecto.
Por ejemplo, la siguiente regla CSS aplica el color rojo al texto de todos los párrafos (<p>):
<estilo>
p {
color: rojo;
}
</estilo>
En la regla anterior, 'p' es el selector, 'color' es la propiedad y 'rojo' es el valor.
Al combinar HTML y CSS, puede crear páginas web con estructura y diseño sofisticados. Sin embargo, para agregar interactividad y funcionalidad a un sitio web, necesitarás aprender JavaScript, que es el siguiente paso en el camino para convertirte en desarrollador front-end.
