Un sitio web con estilo
Creo que nuestro sitio web es agradable. Su tranquila sencillez resulta acogedora en un mundo lleno de distracciones. Sin embargo, parece muy simple y sin estilo propio.
Estamos viendo los estilos predeterminados del navegador: cómo muestra texto e imágenes sin más instrucciones sobre cómo deben verse. Pero la mayoría de los sitios web que visita no tienen este aspecto. Han sido diseñados para tener diferentes estilos. Sus diseñadores han dado instrucciones sobre qué fuentes de texto utilizar, qué colores y qué diseño debe tener la página.
En la tierra del HTML, sólo nos preocupamos con qué cosas existen, esto es un encabezado, esta otra cosa es un párrafo, aquí una imagen y así. Para definir qué aspecto tienen las cosas el navegador utiliza un lenguaje pariente del HTML que se llama: Cascading Style Sheets, o más conocido por sus siglas en inglés CSS.
Una forma de incluir CSS es utilizando la etiqueta de <style>
y poner directamente el código CSS en él. Por ejemplo, considera en añadir lo siguiente:
<style>
body {
font-family: 'Gill Sans', sans-serif;
}
</style>
Si incluyera este código en algna parte de su sitio web añadiéndolo en el archivo index, eso cambiaría la fuente tipográfica de todo lo que está dentro de la etiqueta <body>
, es decir, de todo el texto visible de la página. Este conjunto de reglas de CSS dice, “establecer la fuente tipográfica del cuerpo de la web a Gill Sans o, si esa fuente no está disponible, establecerla a cualquier fuente de tipo sans-serif.”
Esa es una forma totalmente válida de utilizar CSS. Pero a menudo encontrará personas que ponen sus reglas de estilo en un archivo separado. Algo similar a styles.css
. La razón principal para hacerlo es que hace que sea más fácil compartir estilos en varias páginas: le evita copiar y pegar su etiqueta <style>
por todas y cada una de las páginas que cree.
CSS es un lenguaje muy potente. Todos los sitios web que ve lo utilizan. Todos esos diseños complejos, gran parte de la animación y la ubicación de las imágenes y la tipografía: eso es CSS.
Sin embargo, también existe una curva de aprendizaje para CSS. Y aunque le animo totalmente a que explore CSS, este libro es sobre HTML para personas. Por lo que quiero mantener el foco en el propio HTML. ¡Pero está bien! Podemos usar CSS para hacer que nuestro sitio web se vea bien sin tener que escribir todo nosotros mismos.
Marcos o frameworks CSS
Incluso los desarrolladores web profesionales que conocen CSS utilizarán CSS preescrito como punto de partida. Haremos algo similar. Nos referiremos a estos marcos por su palabra en inglés como
Para nuestros propósitos, eso es perfecto. Usaremos uno llamado Simple.css. Pero aquí hay algunos otros que quizá quiera ver. Son similares en espíritu pero con diferentes estilos.
Estos harán que su HTML se vea bien y le brindarán un excelente punto de partida para un sitio web básico. ¡Siéntase cómodo usando cosas que otras personas han hecho, porque hay muchas cosas geniales por ahí!
Simple.css
Le recomiendo que eche un vistazo al sitio web Simple.css, en particular a su página de demostración, ya que le muestra cómo usar diferentes elementos HTML y cómo se ven con Simple. Descarguemos Simple.css.
El documento Simple.css nos da algunas formas de empezar, pero para simplificar, le daré directamente la URL del archivo CSS:
¡No se deje intimidar por todo el código que contiene! No es necesario que lo entienda ahora (ni nunca, en realidad). Solo pulse Archivo > Guardar página como en su navegador (Command-S en macOS o Control-S en Windows) y guarde el archivo en la carpeta de su proyecto de sitio web donde reside el archivo index.html
junto con la imagen.
Muy bien, lo ha guardado y lo agregaremos a la página pronto. Pero primero, hagamos un poco de limpieza.
Organizando nuestros archivos
Hasta ahora, sólo tenemos tres archivos: nuestra página web, un archivo de imagen y el archivo simple.css
que acabamos de descargar. Pero pronto agregaremos más archivos. Vamos a crear un par de carpetas y organicemos las cosas. Queremos que nuestra nueva estructura de archivos se vea así:
- carpeta
css
simple.css
- carpeta
imagenes
espacio.jpg
index.html
Bonito y limpio. Con Visual Studio Code, puede crear archivos y carpetas directamente en la barra lateral. Pase el mouse sobre sus archivos y verá estos botones.

Una vez que realice los cambios, si recarga la página en el navegador, notará que nuestra imagen ya no funciona. Observe cómo el navegador vuelve a mostrar el texto alt
que escribimos en lugar de la imagen.
Esto es debido a que hemos movido el archivo de la imagen espacio.jpg
a otra ubicación. Ahora está ubicada en una carpeta llamada imagenes
. Podemos solucionar esto actualizando el valor src
de la imagen. Vamos a añadir el nombre de la carpeta y una barra inclinada delante del nombre del archivo. Esa es la ruta donde irá a buscar la imagen.
<img src="imagenes/espacio.jpg" alt="Fotografía del espacio con estrellas y polvo de estrellas.">
Cuando necesitamos proporcionar la ubicación de archivos en nuestro sitio web, ya sea un enlace a otra página o la ubicación de una imagen, podemos proporcionar lo que se llama una URL relativa.
Cuando está en la página index.html
, puede pensar como en la ubicación actual o punto de partida. Si quiere referenciar una imagen, necesita decirle al navegador dónde encontrarla. Una URL relativa es una forma de hacer eso. Describe cómo ir "desde aquí hasta allí” por decirlo así.
De manera similar a cómo funciona una URL en su navegador, se utilizan barras diagonales para separar niveles en la URL. La URL imagenes/espacio.jpg
, significa “busca una carpeta llamada imagenes
en el nivel actual, y dentro de ella, busca un archivo llamado espacio.jpg
.”
Añadir Simple.css a nuestra página web
Podemos añadir una hoja de estilo de manera similar a como hemos añadido la imagen. Utilizaremos una etiqueta <link>
para vincular el archivo CSS. La pondremos dentro de la etiqueta <head>
.
<head>
<title>La web de Victorhck</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/simple.css">
</head>
La etiqueta <link>
es de auto cierre, de manera similar a la etiqueta <a>
que vimos anteriormente, no necesita una etiqueta de cierre. Necesitamos darle dos atributos. rel
Especifica la relación que tiene el archivo que estamos vinculando con nuestra página web. Los archivos CSS se llaman hojas de estilo o stylesheets entonces proporcionamos eso como la relación. El atributo href
es donde especificamos el archivo, incluyendo la ruta de la carpeta.
Así, nuestro sitio web se transforma. Ahora vemos una página centrada, texto más grande y una fuente sans-serif.
Añadir un encabezado, un pie y contenido principal
Podemos ver que el archivo Simple.css tuvo efecto inmediato. Pero las cosas se verán aún mejor una vez que agreguemos algunas secciones a nuestro sitio web que Simple.css espera: un encabezado o <header>
para el título del sitio web y <main>
para el contenido principal. No los usamos antes (no son obligatorios), pero usarlos es una buena práctica.
Y esto es totalmente opcional, pero podríamos agregar también un pie de página o <footer>
ya que estamos metidos en la tarea. A veces, la gente pone en él información de derechos de autor o información relacionada con el autor o la licencia de la página. A veces, las personas tienen pies de página grandes con muchos enlaces a cosas. A veces, es sólo su nombre. Lo mantendré simple, pero puede agregar aquí lo que quiera.
Entonces pondremos el nombre de nuestro sitio web en una etiqueta <header>
y nuestro contenido principal en una etiqueta <main>
. Después añadiremos una etiqueta <footer>
con un poco de información.
<body>
<header>
<h1>La web de Victorhk.</h1>
</header>
<main>EL CONTENIDO DE LA PÁGINA IRÁ AQUÍ</main>
<footer>
<p>Hecho con ❤️ y ☕️ por Victorhck.</p>
</footer>
</body>
Después de estos ajustes, el título de nuestro sitio web tiene un estilo especial y los párrafos y listas están espaciados de manera más apropiada.
Vamos a actualizar el sitio web
¡Pongamos nuestras novedades en línea! En Neocities, no puede cargar carpetas usando el botón de carga. Debe crear la carpeta en el panel haciendo clic en "Nueva carpeta o New Folder, " o puede arrastrar la carpeta desde su computadora a la zona donde están los archivos en el panel.
Probablemente sea más fácil arrastrar las carpetas, pero si las crea manualmente, deberá abrir cada carpeta y cargar su contenido. Una vez creada una carpeta, puede pasar el ratón sobre ella para ver las opciones. Querrá hacer clic en "Administrar" para abrir la carpeta. Desde allí, puede hacer clic en "Cargar" para cargar los archivos apropiados en esa carpeta.
Mueva archivos existentes cambiándoles el nombre. Por ejemplo, si quiero mover espacio.jpg
En la carpeta de imágenes, puedo hacer clic en "Cambiar nombre" e incluir la carpeta en la ruta: imagenes/espacio.jpg
.
Es engorroso pero no tan malo. Cualquiera que sea la forma en que lo haga, asegúrese de que los archivos en Neocities coincidan con los que tienes en tu computadora.
A continuación
En este capítulo solo hemos agregado muy poco en términos de escritura de código, pero nos preparamos para el éxito organizándonos, adquiriendo algunos estilos y poniendo secciones a nuestra página web.
El resto de este libro web se centrará en la construcción de nuestro sitio web. En el próximo capítulo, agregaremos una página Acerca de.