Creación de un sitio web sencillo en HTML
1. ¿Por qué necesitamos un sitio en HTML?
¡Bienvenidos al fascinante mundo del desarrollo web! Hoy vamos a crear un sitio HTML estático sencillo y publicarlo en un servidor web que configuraste en las lecciones anteriores. Incluso si nunca antes has escrito código HTML, no te preocupes: todo será súper claro. Nuestro objetivo no solo será entender los fundamentos de HTML, sino también aprender cómo hacer que tu sitio sea accesible para el mundo mediante un servidor web.
Y ahora daremos el siguiente paso: crearemos nuestro propio sitio en HTML y configuraremos su visualización usando tu servidor web. ¿Listos para conquistar el espacio web? ¡Entonces, comencemos!
HTML (HyperText Markup Language) es la base de todas las páginas web. Es responsable de la estructura y el contenido del sitio. En HTML estándar se pueden describir encabezados, texto, imágenes, enlaces e incluso tablas. Es fácil de aprender, pero suficientemente potente para ser la base de cualquier sitio.
En el mundo real, las habilidades para trabajar con páginas HTML estáticas son útiles en muchas situaciones:
- Creación rápida de prototipos de aplicaciones web.
- Escribir y probar páginas estáticas para documentación.
- Preparar una interfaz básica para aplicaciones backend.
Además, HTML es una excelente manera de crear un currículum en forma de página web (sí, sí, a los reclutadores a veces les gusta esto). Y para nosotros, como programadores, conocer los fundamentos de HTML es simplemente un must-have.
2. Paso 1. Fundamentos de HTML: crea tu primera página
Programar es como LEGO: el pasatiempo favorito de todas las edades. Empecemos con un pequeño "bloque" — nuestra primera página web.
Ejemplo mínimo de un documento HTML
Crea un archivo con el nombre index.html en cualquier editor de texto (por ejemplo, nano, vim o incluso gedit, si te apetece algo gráfico) y escribe el siguiente código:
<!DOCTYPE html>
<html>
<head>
<title>Mi primer sitio</title>
</head>
<body>
<h1>Hola, mundo!</h1>
<p>Esta es mi primera página web en HTML.</p>
</body>
</html>Explicación del código
<!DOCTYPE html>– indica al navegador que estamos usando HTML5.<html>– abre todo el documento. Todo el contenido de la página está dentro de esta etiqueta.<head>– sección para metainformación sobre el sitio (por ejemplo, el título de la página, inclusión de estilos o scripts).<title>– el nombre de la página que se muestra en la pestaña del navegador.<body>– la sección principal donde se coloca todo el contenido visible.<h1>– título de nivel uno de la página (cuanto menor sea el número, más grande será el encabezado).<p>– un párrafo de texto.
¡Sí, son solo siete líneas, pero serán la base de tu sitio!
3. Paso 2. Subiendo el sitio web HTML al servidor
Ahora que nuestra página está lista, es hora de mostrarla al mundo. Para ello, vamos a usar nuestro servidor web.
Preparando la carpeta del sitio
Crea un directorio para almacenar los archivos de tu sitio web. Si, por ejemplo, quieres subir el sitio en un host virtual con el dominio example.com, haz lo siguiente:
sudo mkdir -p /var/www/example.com
Luego, mueve tu archivo index.html a esta carpeta:
sudo cp index.html /var/www/example.com/
La magia real comienza ahora: el archivo está listo para funcionar.
4. Paso 3. Configuración del servidor web para servir el sitio
Configuración para Nginx
Abre el archivo de configuración del host virtual:
sudo nano /etc/nginx/sites-available/example.comInserta la siguiente configuración:
server { listen 80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; } }Activa el host virtual y reinicia el servidor:
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx
Configuración para Apache
Abre el archivo de configuración del host virtual:
sudo nano /etc/apache2/sites-available/example.com.confInserta la siguiente configuración:
<VirtualHost *:80> ServerName example.com DocumentRoot /var/www/example.com <Directory /var/www/example.com> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> </VirtualHost>Activa el host virtual y reinicia el servidor:
sudo a2ensite example.com.conf sudo systemctl restart apache2
Verifica el sitio
Ahora abre tu navegador, escribe http://example.com (o la dirección IP de tu servidor) y disfruta del resultado. Si ves tu bonito "¡Hola, mundo!" – felicidades, ¡todo funciona!
5. Paso 4. Decoramos nuestro sitio
La estática está bien, pero un poco de CSS no le hace daño a nadie. Vamos a añadir un poquito de estilo.
Añade un nuevo archivo style.css en la misma carpeta /var/www/example.com/:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
h1 {
color: #ff5722;
}Ahora actualiza tu index.html añadiendo un enlace al CSS:
<!DOCTYPE html>
<html>
<head>
<title>Mi primer sitio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Esta es mi primera página web en HTML.</p>
</body>
</html>Después de recargar la página, verás pequeños cambios en el estilo. ¡Ahora tu sitio se ve un poquito más bonito!
6. Problemas típicos y cómo solucionarlos
Al trabajar con sitios web puedes encontrarte con varios problemas, pero no te preocupes, ¡te tenemos cubierto!
Error "403 Forbidden". Verifica los permisos de la carpeta del sitio. Usa:
sudo chmod -R 755 /var/www/example.comError "404 Not Found". Asegúrate de que los archivos del sitio están en la carpeta correcta y tienen los nombres adecuados.
El sitio no se muestra. Verifica que el servicio de tu servidor web esté en funcionamiento:
sudo systemctl status nginx sudo systemctl status apache2
Ahora tu sitio está accesible para todos los que conocen su dirección. ¿No te parece inspirador? En las próximas lecciones aprenderás aún más: añadir HTTPS para mayor seguridad y gestionar configuraciones del servidor.
GO TO FULL VERSION