Una página web, no es más que un archivo (o fichero) en formato magnético, donde el texto está formateado mediante una especie de lenguaje de programación llamado «HTML». Este fichero se graba normalmente con un programa editor de texto (similar al Bloc de notas pero más completo) con la extensión html, y se sube la carpeta donde se encuentra a un servidor, es decir, a un ordenador conectado a Internet con el software necesario para proporcionar acceso a todos los ficheros públicos con formato html.
Si quieres verlo con tus propios ojos, aquí tienes un ejemplo escrito en «HTML». Si seleccionas todo el texto, lo copias y pegas en un fichero y lo guardas en una carpeta de tu ordenador, al hacer doble clic encima se abrirá un navegador y «voila», verás la página web.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>¡Hola mundo!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>¡Hola mundo!</h1>
<p>Esta es mi primera página web</p>
</body>
</html>Como puedes ver, existen unas etiquetas que marcan el inicio y fin de cada una de las partes del documento e indican qué es cada cosa. Por ejemplo, la etiqueta <h1> indica el principio de un título de nivel 1. La etiqueta <p> indica el principio de un párrafo. La etiqueta </p> indica la finalización del párrafo. Y así sucesivamente…
Dentro de la etiqueta <body> encuentras el cuerpo de la página o contenido principal. Y hay una serie de etiquetas por las cuales de momento no debes preocuparte, que no forman parte del contenido principal, pero que debe incuirse. Me refiero a las etiquetas que se hallan dentro de la etiqueta <head>.
Lo que caracteriza al lenguaje HTML, acrónimo que significa lenguaje de formateo de hipertexto, es que se pueden añadir archivos multimedia como imágenes, audios, vídeos y, además, se pueden enlazar unos documentos con otros a través de enlaces.
A continuación tienes nuestro ejemplo inicial modificado con una imagen (sólo código HTML) y un enlace.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>¡Hola mundo!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>¡Hola mundo!</h1>
<p>Esta es mi primera página web</p>
<img src="una-imagen.jpg" alt="ejemplo de imagen">
<p>Esto es un
<a href="/enlace.html">ejemplo de enlace</a>.</p>
</body>
</html>Si abres este ejemplo de página web, verás que no tiene ningún tipo de diseño y tiene una tipografía muy sencilla. Por tanto, aquí nos hace falta algo adicional para que nuestras páginas web tengan un aspecto más bonito y personalizado: los estilos.
Los estilos se añaden mediante otra especie de lenguaje de programación llamado CSS. Acrónimo de las palabras «página de estilos en cascada» del original en inglés «cascaded style sheet».
Una forma de añadir estilos a la página que acabamos de hacer es añadir un enlace al archivo de estilos, y añadir esos estilos en el archivo que hemos creado. Aquí tienes un ejemplo de archivo de estilos:
body {
background-color: bisque;
max-width: 400px;
margin: 0 auto;
padding: 0 0.5rem;
}
a {
color: black;
text-decoration: underline;
}
a:hover {
color: blue;
}Este archivo contiene las instrucciones para hacer varias cosas: nos muestra el cuerpo del documento en un color de fondo en concreto, nos limita el ancho, nos ubica el contenido centrado dentro de la ventana del navegador, especifica un color por el texto, subraya los enlaces y modifica el color de los enlaces cuando estás encima con el ratón (evento «hover»).
Con el fin de aplicar estos estilos a nuestra página web, debemos incluirlos añadiendo una línea dentro de las etiquetas de la cabecera («head»):
<link rel="stylesheet" href="style.css">El fichero resultante final es el que puedes ver a continuación:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>¡Hola mundo!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>¡Hola mundo!</h1>
<p>Esta es mi primera página web</p>
<img src="una-imagen.jpg" alt="ejemplo de imagen">
<p>Esto es un
<a href="/enlace.html">ejemplo de enlace</a>.</p>
</body>
</html>Por último, si hacemos doble clic en el fichero, se abrirá el navegador y podremos ver nuestra página con un aspecto completamente diferente.
Ten en cuenta que aquí hemos añadido una imagen en la misma carpeta, si tu no dispones de esa imagen no la verás y en su lugar te aparecerá el texto alternativo.
De todas formas, esto tiene una solución muy fácil: solamente tienes que coger una imagen que te guste en formato jpg, renombrarla tal y como se llama en el ejemplo «una-imagen.jpg» y ponerla en la misma carpeta.
Éste sería un procedimiento «artesanal» de hacer páginas web. Puedes imaginar que a medida que se complican las cosas hacen falta herramientas adicionales. Tampoco es viable pedirle a alguien que no tiene conocimientos de dichos lenguajes (HMTL y CSS) que se haga cargo del mantenimiento del contenido de su web de esta forma.
En el siguiente artículo veremos una solución: el gestor de contenidos o CMS. Espero que este artículo te haya resultado útil.