Qué es HTML y CSS y porqué son importantes
Curso básico de HTML y CSS. Unidad I
Introducción
Bienvenidos a un nuevo curso de Puntocomunica. En esta ocasión, vamos a tratar con dos lenguajes que son esenciales para la creación de páginas web: HTML y CSS.
HTML, que significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje que se utiliza para estructurar el contenido en la web. Fue creado por Tim Berners-Lee en 1991 como parte de su trabajo en el desarrollo de la World Wide Web. HTML permite a los desarrolladores definir la estructura de las páginas web mediante el uso de etiquetas que indican cómo se debe presentar el contenido.
CSS, que significa Cascading Style Sheets (Hojas de Estilo en Cascada), fue desarrollado por Håkon Wium Lie en 1996. CSS permite a los desarrolladores aplicar estilos visuales a los documentos HTML, separando así el contenido de su presentación. Esta separación no solo facilita el mantenimiento de las páginas web, sino que también permite una mayor flexibilidad en el diseño.
Breve historia del desarrollo de HTML y CSS
- HTML: La primera versión de HTML fue lanzada en 1993, y desde entonces ha evolucionado a través de varias versiones. HTML5, la versión más reciente, se lanzó en 2014 y trajo consigo muchas mejoras, como nuevos elementos semánticos, soporte para multimedia y APIs que permiten una mayor interactividad en las páginas web. Para más información sobre la historia de HTML, puedes consultar este enlace.
- CSS: Desde su creación, CSS ha pasado por varias revisiones. CSS1 fue lanzado en 1996, seguido por CSS2 en 1998. CSS3, que se introdujo en 1999, se dividió en módulos, lo que permitió un desarrollo más ágil y la incorporación de nuevas características. CSS3 ha permitido a los desarrolladores crear diseños más complejos y atractivos. Para conocer más sobre la evolución de CSS, puedes visitar este enlace.
A lo largo de este curso, exploraremos en profundidad cómo utilizar HTML y CSS para crear páginas web efectivas y atractivas. Comenzaremos por entender qué son y por qué son importantes en el desarrollo web. Vamos allá!
1. Qué es HTML y CSS y por qué son importantes
1.1. Introducción a HTML
- Definición: HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear y estructurar contenido en la web. Permite definir la estructura de las páginas web mediante el uso de etiquetas
- Estructura básica: Un documento HTML se compone de elementos que incluyen encabezados, párrafos, enlaces, imágenes, listas, tablas, y más
- Ejemplo de un documento HTML simple:
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página</title>
</head>
<body>
<h1>Bienvenido a mi página web</h1>
<p>Este es un párrafo de ejemplo.</p>
</body>
</html>Así se vería l código en un editor de texto (en esta caso es Gedit, para Linux):
Y así una vez guardado el documento como .html y abierto con un navegador web:
NOTA: Para visualizar el código fuente de cualquier página web, solo tenemos que seguir estos pasos:
- Abrir el navegador web: Utiliza cualquier navegador como Chrome, Firefox, Safari, etc.
- Ir a la página web: Escribe la URL de la página que deseas inspeccionar y presiona «Enter»
- Ver el código fuente:
- En Windows: Haz clic derecho en la página y selecciona «Ver código fuente de la página» o presiona
Ctrl + U - En Mac: Haz clic derecho y selecciona «Ver código fuente de la página» o presiona
Command + Option + U - En la mayoría de los navegadores: También puedes acceder al código fuente a través del menú del navegador, generalmente en «Desarrollador» o «Herramientas»
Esto abrirá una nueva pestaña o ventana con el HTML de la página web.
1.2. Introducción a CSS
- Definición: CSS (Cascading Style Sheets) es un lenguaje de estilo utilizado para describir la presentación de un documento HTML. Permite aplicar estilos visuales a los elementos HTML, como colores, fuentes, márgenes y diseño
- Separación de contenido y presentación: CSS permite mantener el contenido (HTML) separado de la presentación (CSS), lo que facilita la gestión y el mantenimiento de las páginas web
- Ejemplo de CSS básico:
body {
background-color: lightblue;
}
h1 {
color: navy;
font-family: Arial, sans-serif;
}1.3. Importancia de HTML y CSS
- Fundamentos del desarrollo web: HTML y CSS son los pilares del desarrollo web. Sin ellos, no sería posible crear páginas web visualmente atractivas y funcionales
- Accesibilidad: Un buen uso de HTML semántico mejora la accesibilidad de las páginas web, permitiendo que sean más fácilmente interpretadas por tecnologías de asistencia
- SEO (Optimización para Motores de Búsqueda): Un HTML bien estructurado ayuda a los motores de búsqueda a indexar el contenido de manera más efectiva, mejorando la visibilidad de la página en los resultados de búsqueda
- Diseño responsivo: CSS permite crear diseños que se adaptan a diferentes tamaños de pantalla, lo que es esencial en un mundo donde el acceso a la web se realiza a través de dispositivos móviles y de escritorio
1.4. Herramientas para crear una página web
Para comenzar a crear una página web, no necesitas herramientas complicadas ni costosas. De hecho, puedes utilizar editores de texto simples que están disponibles en casi todos los sistemas operativos. Aquí te presento algunas opciones:
1. Bloc de Notas (Windows)
El Bloc de Notas es un editor de texto básico que viene preinstalado en Windows. Puedes usarlo para escribir tu código HTML y CSS. Solo asegúrate de guardar el archivo con la extensión .html para que el navegador lo reconozca como un documento HTML.
2. TextEdit (MacOS)
TextEdit es el editor de texto predeterminado en MacOS. Para usarlo como un editor de texto plano, debes configurarlo. Ve a «Formato» y selecciona «Hacer texto sin formato». Luego, puedes escribir tu código y guardarlo con la extensión .html.
3. Gedit (Linux)
Gedit es un editor de texto simple y fácil de usar que viene con muchas distribuciones de Linux. Puedes abrirlo desde el menú de aplicaciones y comenzar a escribir tu código HTML. Al igual que con los otros editores, asegúrate de guardar el archivo con la extensión .html.
4. Visual Studio Code
Si buscas algo más avanzado, Visual Studio Code es un editor de código gratuito y muy popular que está disponible para Windows, MacOS y Linux. Ofrece características como resaltado de sintaxis, autocompletado y una amplia gama de extensiones que pueden facilitar el desarrollo web.
5. Sublime Text
Sublime Text es otro editor de texto muy utilizado por desarrolladores. Es rápido y tiene una interfaz limpia. Aunque es de pago, puedes usarlo de forma gratuita con algunas limitaciones.
Ejemplo de código HTML con CSS
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página</title>
<style>
body {
background-color: lightblue; /* Color de fondo */
font-family: Arial, sans-serif; /* Tipo de letra */
text-align: center; /* Alineación del texto */
}
h1 {
color: navy; /* Color del encabezado */
}
p {
color: darkslategray; /* Color del párrafo */
font-size: 18px; /* Tamaño de la fuente */
}
</style>
</head>
<body>
<h1>Bienvenido a mi página web</h1>
<p>Este es un párrafo de ejemplo con un poco de estilo.</p>
</body>
</html>Instrucciones para usar el código
- Escribe el código: Abre tu editor de texto y copia el código anterior.
- Guarda el archivo: Guarda el archivo con un nombre como
mi_primera_pagina.html. - Abre en el navegador: Haz doble clic en el archivo guardado o ábrelo desde tu navegador web preferido (como Chrome, Firefox o Safari) para ver tu primera página web con estilo.
Descripción del CSS
body: Se establece un color de fondo azul claro y se define la fuente del texto como Arial. Además, se centra el texto en la páginah1: Se cambia el color del encabezado a un tono de azul marinop: Se establece el color del párrafo a un gris oscuro y se aumenta el tamaño de la fuente a 18 píxeles
Con este ejemplo estás creando una estructura básica de HTML y aplicando también estilos simples con CSS para mejorar la apariencia de este sencillo ejemplo de página web.
