DESARROLLO WEB
Introducción a HTML y CSS
En la era de la información, contar con un sitio web es fundamental para cualquier persona o empresa que desee conectarse con el mundo. Y aunque existen diversas herramientas y plataformas para crear sitios web sin necesidad de conocer programación, conocer las bases de HTML y CSS resulta fundamental para lograr un sitio web atractivo, funcional y accesible.
¿Qué es HTML?
HTML es el acrónimo de HyperText Markup Language. Es un lenguaje de programación que se utiliza para crear páginas web. HTML utiliza una serie de etiquetas y elementos para definir la estructura, el contenido y los elementos visuales de una página web.
HTML fue creado en 1989 por Tim Berners-Lee, un científico de la computación británico, como parte de un proyecto para compartir información entre investigadores de diferentes universidades. La primera versión de HTML, conocida como HTML 1.0, se lanzó en 1993. Desde entonces, se han creado nuevas versiones de HTML, con mejoras en la estructura, la sintaxis y la funcionalidad.
Un documento HTML básico consta de dos partes: el encabezado (head) y el cuerpo (body). El encabezado contiene información sobre la página, como el título, las metatags, el enlace a hojas de estilo, entre otras cosas. El cuerpo contiene todo el contenido visible de la página, como texto, imágenes, videos y otros elementos.
Algunas de las etiquetas más comunes son las siguientes:
<html>: indica el inicio y el fin del documento HTML.
<head>: contiene la información del encabezado, como el título, las metatags y el enlace a hojas de estilo.
<body>: contiene todo el contenido visible de la página.
<h1> a <h6>: se utilizan para definir los títulos y subtítulos de una página.
<p>: se utiliza para definir un párrafo de texto.
<img>: se utiliza para insertar una imagen en la página.
<a>: se utiliza para crear un enlace a otra página o sitio web.
¿Qué es CSS?
CSS es el acrónimo de Cascading Style Sheets. Es un lenguaje de diseño que se utiliza para definir la apariencia y presentación visual de una página web.
CSS fue creado en 1996 por Håkon Wium Lie y Bert Bos, en un esfuerzo por separar el diseño visual de una página web del contenido en HTML.
CSS se utiliza por varias razones:
- Permite separar el contenido de la presentación visual, lo que facilita el mantenimiento y la actualización de un sitio web.
- Permite crear diseños más complejos y flexibles, con más opciones de personalización y más control sobre la apariencia visual de la página.
- Permite crear sitios web más accesibles, al separar la estructura y el contenido del diseño visual, lo que hace que los sitios sean más fáciles de leer y navegar para personas con discapacidades visuales o cognitivas.
Sintaxis básica de CSS
CSS utiliza una sintaxis sencilla y clara, basada en reglas y selectores. Cada regla define un conjunto de propiedades de estilo para aplicar a un elemento HTML específico. Algunos ejemplos de reglas y selectores CSS son los siguientes:
- Selector de etiqueta
Se utiliza para aplicar un estilo a un tipo de elemento HTML en particular, como <h1> o <p>.
- Selector de clase
se utiliza para aplicar un estilo a un grupo de elementos HTML con una clase específica, como <div class=»contenedor»>.
- Selector de ID
Se utiliza para aplicar un estilo a un elemento HTML con un ID específico, como <div id=»cabecera»>.
- Propiedades de estilo
Se utilizan para definir la apariencia visual de un elemento HTML, como el color de fondo, el tamaño de letra o el margen.
Creando un sitio web básico
Para crear un documento HTML básico, necesitas un editor de texto, como Notepad o Sublime Text. Aquí te mostramos los pasos para crear un documento HTML básico:
Abre tu editor de texto y crea un nuevo archivo.
Escribe las etiquetas HTML básicas:
Guarda el archivo con la extensión .html (por ejemplo, «index.html») en una carpeta en tu computadora. Acabas de crear un documento HTML
Añadir estilos con CSS
Una vez que tienes tu documento HTML básico, puedes añadir estilos con CSS para darle una apariencia visual más atractiva. Aquí te mostramos cómo añadir estilos CSS a tu documento HTML:
Dentro de la etiqueta <head> de tu documento HTML, añade una etiqueta <link> que apunte al archivo CSS que acabas de crear:
En el archivo CSS, define las reglas y propiedades de estilo que deseas aplicar a tu sitio web:
Guarda el archivo CSS en la misma carpeta que el archivo HTML. Acabas de añadir estilos CSS a tu documento HTML.
Previsualización del sitio web en un navegador
Ahora que tienes tu documento HTML y CSS, es importante previsualizar tu sitio web en un navegador para ver cómo se ve. Aquí te mostramos cómo previsualizar tu sitio web:
Abre el archivo HTML en un navegador (como Google Chrome o Mozilla Firefox). Si todo está correcto, deberías ver tu sitio web con los estilos que añadiste con CSS. Acabas de previsualizar tu sitio web en un navegador. Si algo no se ve bien, revisa el código HTML y CSS para ver si hay algún error que necesite corregirse.
¡No pierdas la oportunidad de seguir aprendiendo! Lee más artículos como este y conviértete en un experto en desarrollo web.