La creación de un sitio web puede parecer una tarea complicada, pero con los conocimientos básicos de HTML y CSS, cualquier principiante puede empezar a construir sus propias páginas web. Este tutorial te guiará a través de los conceptos fundamentales y te enseñará cómo utilizarlos para crear un sitio web simple. Aprender cómo crear una página web básico es una habilidad valiosa en el mundo digital actual.
HTML (HyperText Markup Language) y CSS (Cascading Style Sheets) son los pilares de la construcción de páginas web. HTML proporciona la estructura del sitio, mientras que CSS se encarga de su estilo y presentación. Si alguna vez te has preguntado cómo se construyen las páginas web que visitas todos los días, estás en el lugar correcto.
¿Qué preguntas responderá este artículo?
- ¿Cómo se estructura un documento HTML básico?
- ¿Cómo se aplican estilos CSS a un documento HTML?
- ¿Cuáles son las etiquetas HTML más importantes para empezar?
- ¿Cómo puedo crear un diseño simple con HTML y CSS?
¿Qué es HTML y CSS?
HTML es el lenguaje de marcado utilizado para crear la estructura de las páginas web. Consiste en una serie de elementos o etiquetas que definen diferentes partes del contenido, como encabezados, párrafos, imágenes y enlaces. CSS, por otro lado, es el lenguaje de estilos utilizado para describir la presentación de un documento HTML. CSS permite ajustar colores, fuentes, márgenes, bordes y la disposición de los elementos en la página.
Estructura de un documento HTML básico
Un documento HTML básico sigue una estructura específica y es la forma más certera de responder inicialmente cómo crear una página web:
<!DOCTYPE html>
<html>
<head>
<title>Mi primer sitio web</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>Bienvenidos a mi sitio web</h1>
</header>
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Sobre mí</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
<section id="home">
<h2>Inicio</h2>
<p>Esta es la página de inicio de mi primer sitio web.</p>
</section>
<section id="about">
<h2>Sobre mí</h2>
<p>Aquí puedes escribir sobre ti.</p>
</section>
<section id="contact">
<h2>Contacto</h2>
<p>Puedes contactarme a través de este formulario.</p>
</section>
</body>
</html>Etiquetas HTML importantes
Etiquetas HTML más relevantes para empezar
Para aprender cómo crear una página web, es esencial familiarizarse con las etiquetas HTML más comunes:
- <html>: La etiqueta raíz de un documento HTML.
- <head>: Contiene metadatos, como el título de la página y enlaces a archivos CSS.
- <title>: Define el título del documento que se muestra en la pestaña del navegador.
- <body>: Contiene todo el contenido visible de la página web.
- <header>: Representa la sección de encabezado.
- <nav>: Define un conjunto de enlaces de navegación.
- <section>: Agrupa contenido temático.
- <footer>: Representa el pie de página del documento.
- <h1> a <h6>: Encabezados, donde <h1> es el más importante y <h6> el menos.
- <p>: Define un párrafo de texto.
Cómo crear una página web y aplicar estilos CSS
Para darle estilo a tu documento HTML, necesitarás un archivo CSS. Aquí hay un ejemplo de cómo podría verse tu archivo styles.css:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
color: #333;
}
section {
margin: 20px;
padding: 20px;
background: #fff;
border: 1px solid #ddd;
}Un documento CSS (Cascading Style Sheets) es esencial para definir la apariencia de un sitio web. Se utiliza para separar la presentación del contenido, permitiendo cambios en el diseño sin alterar el HTML subyacente. A continuación, describimos las partes fundamentales de un documento CSS.
Selectores
Los selectores son esenciales en CSS, ya que determinan a qué elementos HTML se aplicarán las reglas de estilo. Hay varios tipos de selectores:
- Selector de elemento: Selecciona todos los elementos de un tipo específico.
p {
color: blue;
}- Selector de clase: Selecciona elementos que tienen un atributo de clase específico.
.miClase {
font-size: 18px;
}- Selector de ID: Selecciona un único elemento que tiene un atributo ID específico
#miID {
margin: 10px;
}- Selector de atributo: Selecciona elementos que tienen un atributo específico.
input[type="text"] {
border: 1px solid #ccc;
}- Selectores combinados: Puedes combinar selectores para una mayor especificidad
div.miClase {
background-color: yellow;
}Propiedades y valores
Las propiedades definen qué aspecto del elemento HTML se va a modificar, y los valores especifican cómo se modificará. Cada propiedad se escribe seguida de dos puntos y luego el valor, terminando con un punto y coma.
h1 {
color: red; /* Propiedad: color, Valor: red */
font-size: 24px; /* Propiedad: font-size, Valor: 24px */
margin: 20px; /* Propiedad: margin, Valor: 20px */
}Reglas de CSS
Una regla CSS consiste en un selector y un bloque de declaración. El bloque de declaración contiene una o más declaraciones separadas por punto y coma, y cada declaración incluye una propiedad CSS y su valor asociado.
/* Selector */
body {
/* Bloque de declaración */
background-color: #f0f0f0; /* Declaración 1 */
color: #333; /* Declaración 2 */
}Comentarios
Los comentarios en CSS se utilizan para explicar el código y no son procesados por el navegador. Se encierran entre /* y */.
/* Este es un comentario */
p {
font-family: Arial, sans-serif;
}Importación de hojas de estilo
Puedes importar hojas de estilo externas usando @import, lo que permite organizar y reutilizar CSS en varios archivos.
@import url("otraHojaDeEstilo.css");Reglas @media
Las reglas @media se utilizan para aplicar estilos diferentes en función de las características del dispositivo, como el tamaño de la pantalla. Son fundamentales para el diseño responsive.
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}Reglas @font-face
Las reglas @font-face permiten definir fuentes personalizadas que se pueden utilizar en el documento.
@font-face {
font-family: 'MiFuente';
src: url('MiFuente.woff2') format('woff2');
}
body {
font-family: 'MiFuente', sans-serif;
}Herencia y cascada
En CSS, las propiedades pueden ser heredadas de elementos padre a elementos hijo. La cascada se refiere a cómo las reglas CSS se aplican en un orden de prioridad, determinado por la especificidad de los selectores y la regla de precedencia.
/* Estilo heredado */
body {
color: black;
}
p {
/* Este color sobrescribe el color heredado del body */
color: blue;
}Estas son las partes fundamentales de un documento CSS. Con estos conocimientos, puedes empezar a dar estilo a tus páginas web de manera efectiva y organizada.
Creación de un diseño simple
Con los conocimientos básicos de HTML y CSS, puedes crear un diseño simple para tu sitio web. Aquí tienes un ejemplo de cómo combinar HTML y CSS para estructurar y estilizar una página web básica.
<!DOCTYPE html>
<html>
<head>
<title>Mi primer sitio web</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>Bienvenidos a mi sitio web</h1>
</header>
<nav>
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Sobre mí</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
<section id="home">
<h2>Inicio</h2>
<p>Esta es la página de inicio de mi primer sitio web.</p>
</section>
<section id="about">
<h2>Sobre mí</h2>
<p>Aquí puedes escribir sobre ti.</p>
</section>
<section id="contact">
<h2>Contacto</h2>
<p>Puedes contactarme a través de este formulario.</p>
</section>
</body>
</html>Recuerda que la práctica es esencial para dominar cómo crear una página web. Experimenta con diferentes etiquetas y estilos para ver cómo afectan a tu diseño. Con el tiempo y la práctica, podrás crear sitios web más complejos y personalizados. También existen cursos gratuitos de programación que pueden ayudar a cualquier persona a profundizar y mejorar a través de la creación de diversos proyectos.
Crear una página web básica con HTML y CSS es el primer paso para adentrarse en el desarrollo web. Con los fundamentos que has aprendido en este tutorial, estás bien encaminado para explorar más y mejorar tus habilidades. Si tienes dudas, requieres una asesoría o deseas el servicio de un profesional para crear tu página Web, puedes contactarnos por nuestras redes sociales.
Referencias
- A Beginner’s guide to HTML and CSS. (n.d.). https://webguide.neocities.org/
- Jakoš, F., & Verber, D. (2016). Learning basic programing skills with educational games. Journal of Educational Computing Research, 55(5), 673–698. https://doi.org/10.1177/0735633116680219
