Añadir una página Acerca de
Para el resto de este libro, vamos a expandir nuestra página personal de la que ya hemos sentado las bases, en un sitio web completo con múltiples páginas e incluso un blog. El ejemplo continuará siendo La web de Victorhck, y el contenido será relacionado conmigo para el ejemplo. Usted puede personalizar el contenido a su gusto para que se adapte a lo que quiere mostrar en su propio sitio web.
Si no quiere crear una página web personal y prefiere hacerlo sobre otra temática, ¡eso también es genial! Los conceptos que tratamos se aplican a todo tipo de sitios web, así que puede seguirlos y adaptarlos según lo vea necesario.
Si quiere echar un vistazo de cómo es el resultado de lo que estamos construyendo, puede hacerlo en la web de ejemplo en esta web de Victorhck.
Tiene las siguientes páginas y características:
- Un encabezado con botones de navegación
- Un blog con tres artículos
- Una página de Acerca de con una fotografía
- Un currículum digital
- Una página divertida con vídeos de YouTube incrustados
Incluiré muchos ejemplos del código en los próximos capítulos, pero también puede ir al repositorio que contiene el código de la página de ejemplo y ver el código fuente de cualquier página como referencia en cualquier punto.
Las páginas son solo archivos a los que usted enlaza
Crearemos una nueva página en nuestro sitio creando un nuevo archivo. Crearemos el archivo about.html junto con index.html. Para ahorrar algo de escritura, copie todo el contenido de index.html y péguelo en about.html.
Y ahora, limpiémoslo un poco. Eliminaré el encabezado "Cómo crear un sitio web" y el párrafo con el enlace a neal.fun. Esta página debería ser sobre mí. Hablando de eso, también cambiaré la imagen a una foto mía (si no se siente cómodo usando una foto suya, puede utilizar cualquier otra imagen que quiera).
Ampliaré el contenido añadiendo un par de párrafos. Este también es un excelente lugar para proporcionar cualquier información de contacto que desee. Agregaré un enlace a mi cuenta de Mastodon (con un emoji de elefante).
<p>🐘 <a href="https://mastodon.social/@victorhck">Puedes contactarme en Mastodon</a></p>Recuerde, un enlace es una etiqueta <a>. Se puede hacer clic en cualquier texto que envuelva la etiqueta. Luego proporciona el atributo href, que es el destino del enlace, normalmente una URL.
Este es mi código dentro de la etiqueta <body>.
<header>
<h1>Acerca de Victorhck</h1>
</header>
<main>
<img src="imagenes/victorhck.jpg" alt="Fotografía de mí, agachado detrás de un viejo ordenador Amstrand 128K. No se me ve la cara.">
<p>
Mi nick es Victorhck. Soy un aficionado al software libre y me gusta difundir lo bueno de esta filosofía. Y usuario de GNU/Linux desde 2011.
</p>
<p>
Participo en varios proyectos en la web donde traduzco y ayudo a otras personas. Tengo un blog personal donde escribo tutoriales y difundo noticias relacionadas con GNU/Linux y el software libre. Me gusta el chocolate negro.
</p>
<p>🐘 <a href="https://mastodon.social/@victorhck">Puedes contactarme en Mastodon</a></p>
<h2>Juegos de mesa favoritos</h2>
<ul>
<li>Dungeons & Dragons</li>
<li>Risk</li>
<li>Pandemic</li>
</ul>
</main>
<footer>
<p>Hecho con ❤️ y ☕️ por Victorhck.</p>
</footer>Y así es como quedaría.
¡Sorpresa, ese soy yo! Esto parece una página Acerca de adecuada. Bueno, no hay mucha información personal, pero sirva como ejemplo. Por favor, siéntase libre de escribir todo lo que quiera en esta página sobre usted o el proyecto sobre el que trate su página web.
Navegando entre páginas
Ahora tenemos una página Acerca de, pero necesitamos una forma de navegar entre nuestras dos páginas. Necesitamos un menú de navegación o nav. Un menú de navegación es solo una lista de enlaces. A Simple.css parece gustarle que el menú de navegación esté encima del encabezado, así que lo haré, aunque podría colocarlo debajo.
HTML tiene una etiqueta <nav> justamente para este propósito. Vamos a poner dos enlaces en nuestro menú de navegación. Uno para la página principal y otro para la página Acerca de.
<header>
<nav>
<a href="index.html">Inicio</a>
<a href="about.html" aria-current="page">Acerca de</a>
</nav>
<h1>Acerca de Victorhck</h1>
</header>Dado que esta es actualmente la página Acerca de, agregué un atributo especial al enlace. ARIA significa Aplicaciones de Internet enriquecidas accesibles. Podemos hacer que nuestro sitio sea más accesible agregando el atributo aria-current="page". Hace un par de cosas por nosotros.
- Hará que nuestra página sea más accesible para tecnologías de asistencia como lectores de pantalla.
- Simple.css diseñará el enlace de manera diferente para que sea fácil saber en qué página estamos.
Agreguemos el mismo menú de navegación a la página de inicio. Abra el archivo index.html y añada el menú como lo hicimos en la página Acerca de. Dado que esta es la página de inicio, debemos poner el atributo aria-current en el enlace de Inicio.
<header>
<nav>
<a href="index.html" aria-current="page">Inicio</a>
<a href="about.html">Acerca de</a>
</nav>
<h1>La web de Victorhck</h1>
</header>¡Cárgalo en el navegador y maravíllese con su sitio web de varias páginas! Clic, clic, clic…
Limpieza de la página de inicio
Dado que ahora tenemos una página Acerca de, parte del contenido de nuestra página de inicio es redundante. Algo de esto está en la página Acerca de. Eliminaré el texto de la biografía, el enlace de Neal.fun y la lista de juegos de mesa. Mantendré la imagen del espacio y agregaré un pequeño párrafo de bienvenida. También podría conservar la lista de "cómo crear un sitio web".
Aunque, hablando de la imagen del espacio, hagámosla más interesante. Quiero ponerle un título a esta imagen y un enlace a donde la obtuve. Podemos marcar aún más una imagen envolviéndola en una etiqueta <figure> e incluyendo un <figcaption>.
<figure>
<img src="imagenes/espacio.jpg" alt="Fotografía del espacio con estrellas y polvo de estrellas.">
<figcaption>
El espacio es genial. <a href="https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg">Fuente de la imagen </a>
</figcaption>
</figure>El contenido <principal> de mi página web ahora tiene este aspecto.
<main>
<figure>
<img src="imagenes/espacio.jpg" alt="Fotografía del espacio con estrellas y polvo de estrellas.">
<figcaption>
El espacio es genial. <a href="https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg">Fuente de la imagen</a>
</figcaption>
</figure>
<p>
¡Bienvenidos y bienvenidas a mi sitio web! Aquí puede encontrar más información sobre mí, leer mis publicaciones del blog muy interesantes y nada artificiales, y ver algunos de los pasatiempos divertidos que tengo. No pasará mucho tiempo hasta que se pregunte qué hechicería he usado para crear esta alucinante experiencia basada en la web. La respuesta es HTML.
</p>
<h2>Cómo hacer un sitio web</h2>
<ol>
<li>Crear un archivo HTML</li>
<li>Escribir algo de HTML en él</li>
<li>Abrirlo en el navegador web</li>
</ol>
<p class="notice">
<strong>¿Quiere aprender cómo hacer un sitio web como este?</strong><br> Eche un vistazo a esta web <a href="https://victorhck.gitlab.io/htmlparapersonas/">HTML para personas</a>. Está hecho para todo el mundo y le enseña cómo crear una página web de una manera amigable y accesible.
</p>
</main>¿Qué es ese class="notice"? Puede obtener más información sobre las clases en los capítulos adicionales de CSS al final de este libro. Pero, en resumen, esto activará algunos estilos proporcionados por Simple.css para crear un pequeño cuadro con algo de texto.
Actualizar el sitio web
Puede actualizar su sitio web con estos últimos cambios realizados si lo desea. También está bien seguir trabajando en ello en su computadora. Muchos sitios web se construyen de esa manera: la persona trabaja en su sitio web en su propia computadora hasta que termina y luego lo publica. Pero muchas personas también crean su sitio web en público y lo actualizan a medida que avanzan.
Si desea actualizarlo, regrese a su panel de Neocities y cargue ambos archivos index.html y about.html ya que esos archivos han cambiado. Si agregó alguna imagen, debe hacer clic en la carpeta de imágenes en Neocities y subirla allí (o puede arrastrar la carpeta de imagenes a la zona de archivos de Neocities, lo que reemplazará todo el contenido de la carpeta).
A continuación
¡Hemos convertido nuestra página web en un sitio web! A continuación, añadiremos un blog y exploraremos varias etiquetas HTML.