Añadir un blog
Los blogs son una parte importante de la web. Probablemente haya oído hablar de varias plataformas de blogs populares como WordPress, Tumblr o Blogger. Y hay un montón más de plataformas de blogueo más pequeñas e independientes.
Pero no necesita ninguna de estas plataformas para tener un blog. Un blog no es más que una serie de artículos en orden cronológico (normalmente en orden inverso, es decir las más recientes primero). ¡Podemos hacer todo eso simplemente con HTML!
Añadiré tres artículo al blog que vamos a crear. No pondré todo el código en este capítulo ya que sería excesivo. Puede echar un vistazo al sitio de prueba y ver los artículos completos o al código de esa web. Pero le mostraré cómo estructurar los archivos y revisaré algunas de las diferentes etiquetas HTML que utilizaré.
Crear el blog de inicio
Siga los pasos de sitename.neocities.org/blog
para tener disponible también usted su propio blog dentro de su sitio web.
- Cree una carpeta llamada
blog
, dentro de ella cree un archivo llamadoindex.html
. - Copie el contenido de una de sus páginas y péguelo dentro de este nuevo y vacío archivo llamado
index.html
. - Cambie el texto dentro de la etiqueta
<h1>
a “Blog,” “Mi Blog,” o con cualquier nombre que quiera llamarlo. - Cambie el
<título>
para cambiar el texto que aparecerá en la pestaña del navegador web al visitarlo. Por ejemplo, “Blog - de la web de Victorhck.” - Limpie el contenido principal, así tendrá una etiqueta
<main>
vacía. Añadiremos contenido más adelante.
Vamos a abrirlo en el navegador para ver el aspecto que tiene.
¿¡Qué ha pasado, todo se ha roto!? Tiene que ver con la estructura de archivos. Mire nuestra etiqueta de <link>
, donde añadimos la hoja de estilos Simple.css.
<link rel="stylesheet" href="css/simple.css">
Está buscando el archivo css/simple.css
pero no puede encontrarlo ¿Por qué? La ruta que le dimos es relativa al archivo actual. El archivo actual está en la carpeta blog
, así que busca en blog/css/simple.css
, que no existe.
Así que, ¿Cómo hacemos referencia a archivos que no están en la carpeta actual? Podemos utilizar la siguiente sintaxis ..
.
<link rel="stylesheet" href="../css/simple.css">
Con los dos puntos ..
le estamos diciento "sube un nivel en la estructura de carpetas" y ahí busca css/simple.css.”
¡Esto ya está mejor! Ahora vamos a actualizar la barra superior de navegación. Ya que la página de inicio y en la de Acerca de no se encuentran en la carpeta actual, necesitaremos utilizar la misma sintaxis que en el caso anterior, añadiendo los dos puntos ..
para enlazarlos.
<nav>
<a href="../index.html">Inicio</a>
<a href="index.html" aria-current="page">Blog</a>
<a href="../about.html">Acerca de</a>
</nav>
También deberá actualizar la navegación en las otras páginas para incluir un enlace al blog. Por ejemplo, la navegación de la página de inicio debería verse así.
<nav>
<a href="index.html" aria-current="page">Inicio</a>
<a href="blog/index.html">Blog</a>
<a href="about.html">Acerca de</a>
</nav>
Crear el primer artículo
Voy a escribir una publicación tonta sobre cómo enseñar HTML a un gato. Crearé un archivo llamado 2024-04-12-whiskers.html
dentro de la carpeta del blog
. Puede nombrar el archivo de publicación de tu blog como quiera. Lo bueno de incluir la fecha es que, a medida que cree más publicaciones, aparecerán ordenadas en el sistema de archivos de su computadora.
Como punto de partida, copiaremos el contenido de blog/index.html
en nuestro nuevo archivo. Cambiaré <h1>
(y el <título>
) para que sea el nombre de mi artículo, "Cómo le enseñé a mi gato a crear un sitio web con HTML". También modificaré la navegación. No estamos en la página de listado del Blog, por lo que es inexacto decir aria-current="page"
en el enlace de navegación del blog. Pero está dentro de la sección del Blog de nuestro sitio web. Así que cambiaré el atributo a algo más general aria-current="true"
. Esto es únicamente para páginas de artículos individuales dentro de los artículos del blog.
<nav>
<a href="../index.html">Inicio</a>
<a href="index.html" aria-current="true">Blog</a>
<a href="../about.html">Acerca de</a>
</nav>
Añadiré un enlace para regresar al blog al final del artículo. Ya que estamos en la carpeta del blog
, apuntar al archivo index.html
es todo lo que necesitamos para regresar al inicio del blog.
<a href="index.html" class="button">← Regresar al blog</a>
La parte class="button"
es un estilo que Simple.css hace que un enlace de texto parezca un botón. El código ←
es un código especial llamado una entidad HTML. Se utilizan para codificar caracteres especiales. Este en particular es una flecha hacia la izquierda. Puede ver una lista de otras entidades en este enlace.
Añadiré tres artículos al blog fechados con unos pocos días de separación entre ellos, solo como ejemplo. cuando termine tendré estos artículos.
- Cómo le enseñé a mi gato a hacer un sitio web con HTML
- La vez que construí un sitio web para extraterrestres
- Por qué el chocolate negro es lo mejor que existe
Mi estructura de archivos tendrá un aspecto como este:
blog
2024-04-12-whiskers.html
2024-04-15-aliens.html
2024-04-20-chocolate.html
index.html
css
simple.css
imagenes
victorhck.jpg
espacio.jpg
about.html
index.html
Dando formato al texto
Vamos echar un vistazo a algunas de las etiquetas que puede utilizar en sus artículos del blog y también en otras páginas.
Para las negritas o cursivas, podemos utilizar las etiquetas <strong>
y <em>
, respectivamente.
<p>
¡Después de tres días, <strong>mi gato Whiskers puede crear páginas web</strong> mejor que <em>yo</em> lo puedo hacer!
</p>
Que daría este resultado.
Bloque de citas
Podemos utilizar la etiqueta <blockquote>
para citar una frase de otra persona, un libro, otro sitio web o incluso una cita propia.
<blockquote>
"HTML es <strong>elemental</strong> mi querido Watson."<br>
<cite>— Whiskers, probablemente</cite>
</blockquote>
Aquí estoy utilizando <strong>
para dar un énfasis extra a la cita del gato. Estoy utilizando la etiqueta <cite>
para mostrar el origen de la cita. La etiqueta <br>
se cierra sola, por lo que no utiliza otra etiqueta de cierre, crea un salto de línea, que mueve el elemento de <cite>
en la línea siguiente. He utilizado también otro caracter especial, —
, para crear un guión medio.
Los bloques de citas están normalmente creados como bloques de texto con una sangría diferente, a menudo con un borde o fondo de color para dar un énfasis extra. La imagen anterior muestra cómo Simple.css le da ese estilo (a menos que indique lo contrario, todas las imágenes del ejemplo están con el estilo que les proporciona Simple.css).
Resumen: encabezados y listas
Ya tratamos estos dos elementos de manera rápida en el capítulo 2, Añadir contenido a su sitio web, pero creo que está bien recapitular un poco. Los artículos de nuestro blog ya utilizan el encabezado principal <h1>
, pero si quiere escribir artículos que necesitan más encabezados, se puede hacer sin problema.
Los encabezados en HTML son jerárquicos, esto significa que el encabezado <h2>
debería ir detrás del encabezado de tipo <h1>
, el encabezado de tipo <h3>
debería seguir al encabezado <h2>
, y así sucesivamente. Técnicamente, HTML ofrece seis niveles de encabezado <h1>
hasta <h6>
. Pero la moderación aquí es la clave. Pregúntese si realmente necesita tantos niveles de encabezado en su página web para hacerla sencilla de comprender. Mi consejo es utilizar tres niveles de encabezado como máximo o incluso menos.
Y por supuesto, también tenemos las listas, que las vimos en el capítulo 2 y que vamos a repasar a continuación. Tenemos dos tipos de listas, una que llamamos sin orden porque los elementos no están numerados y la lista ordenada porque a los elementos los precede un número.
Este es un ejemplo de lista sin orden en la que utilizamos la etiqueta <ul>
para englobar a todos los elementos de la lista y la etiqueta <li>
para cada elemento de la lista. Estas son las 4 libertades del software libre:
<ul>
<li>La libertad de ejecutar el programa como se desee, con cualquier propósito (libertad 0).</li>
<li>La libertad de estudiar cómo funciona el programa, y cambiarlo para que haga lo que se desee (libertad 1). El acceso al código fuente es una condición necesaria para ello.</li>
<li>La libertad de redistribuir copias para ayudar a otros (libertad 2).</li>
<li>La libertad de distribuir copias de sus versiones modificadas a terceros (libertad 3).</li>
</ul>
Que tendrá este aspecto:
- La libertad de ejecutar el programa como se desee, con cualquier propósito (libertad 0).
- La libertad de estudiar cómo funciona el programa, y cambiarlo para que haga lo que se desee (libertad 1). El acceso al código fuente es una condición necesaria para ello.
- La libertad de redistribuir copias para ayudar a otros (libertad 2).
- La libertad de distribuir copias de sus versiones modificadas a terceros (libertad 3).
Y aquí veremos un ejemplo de lista ordenada (con algunos puntos en negrita para darles énfasis).
<ol>
<li>
<strong>Felicidad en cualquier parte:</strong> Puede comer chocolate en cualquier sitio: en el trabajo, en el parque en casa.
</li>
<li>
<strong>Mejora instantánea del estado de ánimo:</strong> Comiendo con prudencia una pequeña porción de chocolate le hará sentirse mejor. Científicamente probado*. (*La verdad es que creo que no, pero es cierto.)
</li>
<li>
<strong>Creatividad sin límites:</strong> Diferentes formas, con otros alimentos. Es una delicia probar nuevas combinaciones de chocolate negro.
</li>
</ol>
Así es como se ve.
- Felicidad en cualquier parte: Puede comer chocolate en cualquier sitio: en el trabajo, en el parque o en casa.
- Mejora instantánea del estado de ánimo: Comiendo con prudencia una pequeña porción de chocolate le hará sentirse mejor. Científicamente probado*. (*La verdad es que creo que no, pero es cierto.)
- Creatividad sin límites: Diferentes formas, con otros alimentos. Es una delicia probar nuevas combinaciones de chocolate negro.
Puede incluso crear listas anidadas como esta.
<ul>
<li>
Primer punto principal
<ul>
<li>sub punto</li>
<li>Otro sub punto</li>
</ul>
</li>
<li>
Segundo punto principal
<ul>
<li>sub punto</li>
<li>Otro sub punto</li>
</ul>
</li>
</ul>
Que quedaría algo así.
- Primer punto principal
- Sub punto
- Otro sub punto
- Segundo punto principal
- Sub punto
- Otro sub punto
Dividir el contenido
Una de las maneras en las que podemos añadir espacio entre los elementos es mediante el uso de la etiqueta <br>
o con la etiqueta break. La etiqueta break, añade un salto de línea. Por ejemplo, veamos este haiku (de Robert Cole).
<p>
Un orbe rojo atemporal
flota perezosamente en el éter
sin impresionarse por la guerra.
</p>
De manera predeterminada, el navegador mostrará todo el texto en una única línea ignorando los espacios en blanco en su HTML.
Por un lado, esto es algo bueno: significa que podemos formatear nuestro código como queramos sin que nuestros visitantes vean un montón de saltos de línea y sangrías en la página que no pretendíamos. Pero a veces, queremos tener saltos de línea, como en el ejemplo del haiku anterior para que se vea correctamente.
Podemos arreglar nuestro haiku añadiendo un par de etiquetas <br>
.
<p>
Un orbe rojo atemporal<br>
flota perezosamente en el éter<br>
sin impresionarse por la guerra.
</p>
Esto es útil en pequeñas dosis, pero úselo con moderación. La mayoría de las veces, el espacio entre elementos debe controlarse con CSS, aplicando margin
o padding
, por ejemplo. Afortunadamente, nuestra hoja de estilo Simple.css tiene un buen espaciado predeterminado. Trataremos sobre el uso de CSS para espacios personalizados en el capítulo extra al final del libro.
Otra forma de dividir el contenido manualmente es utilizar una regla horizontal, o la etiqueta <hr>
. Por lo general, tiene el estilo de una línea horizontal. Esto puede resultar útil cuando desea separar contenido, como una nueva sección o una nueva escena, en el caso de una historia. Así es como puede verse.
Código y texto preformateado
He estado utilizando estas etiquetas un montón en las páginas que ha estado leyendo en este libro. Considere este párrafo:
<p>
Al final del primer día, estaba familiarizado con etiquetas básicas como <code>html</code>,
<code>head</code>, y <code>body</code>. El segundo día, estaba creando párrafos y listas. Al tercer día, ya había pasado a crear impresionantes diseños con <code>article</code> y <code>section</code>.
</p>
Que mostrará las partes del texto del código en una fuente monoespaciada y en un color diferente, como esta:
Me ha visto incluir los símbolos menor que (<
) y mayor que (>
) en los elementos de mi código en las páginas de este libro (como este, <a>
). Eso requiere un poco de trabajo extra. Ya que si quiero mencionar una etiqueta <a>
, no puedo simplemente escribir <code><a></code>
porque el navegador pensará que estoy creando un enlace literal dentro de la etiqueta <code>
. Para incluir los símbolos menor que y mayor que (a veces llamados "corchetes angulares"), necesitaremos las entidades HTML <
y >
, respectivamente. Eso le indicará al navegador que queremos representar los símbolos reales.
<p>
Al final del primer día, estaba familiarizado con etiquetas básicas como
<code><html></code>, <code><head></code>, y
<code><body></code>. El segundo día, estaba creando párrafos y listas.
Al tercer día, ya había pasado a crear diseños impresionantes con
<code><article></code> y <code><section></code>.
</p>
Eso nos mostraría lo siguiente.
Como vimos anteriormente, al representar su contenido, el navegador ignora la mayor parte de los espacios en blanco de su código. Pero a veces desea conservar el espaciado exacto y los saltos de línea. Un ejemplo divertido es el arte ASCII, que es el arte creado con caracteres de texto sin formato.
___ ___ ___ ___
/\__\ /\ \ /\__\ /\__\
/:/__/_ \:\ \ /::L_L_ /:/ /
/::\/\__\ /::\__\ /:/L:\__\ /:/__/
\/\::/ / /:/\/__/ \/_/:/ / \:\ \
/:/ / \/__/ /:/ / \:\__\
\/__/ \/__/ \/__/
Lo anterior debería aparecer como las letras “HTML” usando un efecto 3D. Funciona porque utiliza una fuente monoespaciada y conserva todos los espacios en blanco. ¿Cómo lo hice? utilicé la etiqueta <pre>
, que es para texto preformateado. Úselo así
<pre>
___ ___ ___ ___
/\__\ /\ \ /\__\ /\__\
/:/__/_ \:\ \ /::L_L_ /:/ /
/::\/\__\ /::\__\ /:/L:\__\ /:/__/
\/\::/ / /:/\/__/ \/_/:/ / \:\ \
/:/ / \/__/ /:/ / \:\__\
\/__/ \/__/ \/__/
</pre>
Si quiere jugar con más arte de texto ASCII, eche un vistazo a este generador de arte con texto.
Apartes
La etiqueta <aside>
es divertida ya que Simple.css lo diseña de una manera interesante. Son útiles para llamadas o asides para el contenido principal. Por ejemplo,incluí un aparte que enumera los ingredientes en mi artículo del blog sobre el chocolate.
Simple.css diseñará el lado como un cuadro redondeado y lo desplazará hacia un lado. Esta es una forma sencilla de agregar notas adicionales o contenido secundario a una página.
Marcar, tachar, eliminar, insertar
Aquí hay más etiquetas de formato de texto para usted. Utilice <mark>
para resaltar un texto. Si quiere tachar un texto no deseado, encierre el texto con la etiquetas <s>
. Si desea mostrar explícitamente las ediciones de un documento, utilice la opción de la etiqueta <del>
para indicar una eliminación y la etiqueta <ins>
para mostrar el texto insertado. Por ejemplo, esto es de mi publicación de chocolate.
Complete la página de índice de nuestro blog
Bien, hemos cubierto una variedad de etiquetas que puedes usar para marcar los diferentes tipos de contenido. Puede tomarse un tiempo y jugar con estos. ¡No hay prisa! Estaré aquí cuando quiera continuar. Una vez que tenga dos o tres publicaciones de blog, pongámoslas en la página principal del blog.
Si abre blog/index.html
, tiene un aspecto un poco vacío. Lo solucionaremos ahora mostrando el título de cada publicación del blog, la más reciente primero, la fecha de publicación y un resumen de una oración. Al hacer clic en el título de una publicación del blog, el lector debería acceder a ella.
Usemos la etiqueta <article>
para cada uno porque cada uno representa una composición independiente. Como beneficio adicional, Simple.css los diseñará como tarjetas. Usemos <h2>
para el título de la publicación del blog, dentro del cual pondremos un enlace (la etiqueta <a>
). Utilizaremos la etiqueta time
para la fecha. Usaremos un párrafo normal, o la etiqueta <p>
, para el resumen. El código final se ve así.
<main>
<article>
<h2>
<a href="2024-04-20-chocolate.html">
Por qué el chocolate es lo mejor que existe
</a>
</h2>
<p><time datetime="2024-04-20">20 de abril de 2024</time></p>
<p>
El chocolate es la comida reconfortante por excelencia debido a su versatilidad.
variedad, portabilidad, poder para mejorar el estado de ánimo y un sinfín de sabores creativos.
</p>
</article>
</main>
El enlace en la cabecera llevará un atributo href
, al destino del enlace. Ya que estamos en la carpeta del blog
, podemos utilizar el nombre del archivo como destino.
Estamos utilizando la etiqueta <time>
para proporcionar una versión de la fecha compatible con máquinas. Esto podría ser útil para los motores de búsqueda que buscan en su sitio o admiten posibles funciones del navegador que se basan en fechas. La etiqueta <time>
toma un atributo llamado datetime
donde puede proporcionar la versión legible por máquina..
Añada un <article>
como el anterior para cada publicación de blog a la que desee vincular. Terminará con algo como esto.
Una tabla de los elementos (HTML)
¡Uf! Hemos visto bastantes etiquetas y hemos agregado mucho contenido durante este capítulo. Puede haber mucho que recordar. Si alguna vez necesita buscar cómo usar una etiqueta HTML en particular, o si desea ver qué etiquetas HTML están disponibles, consulte esta útil Referencia de elementos HTML en MDN. MDN Es más o menos el manual de usuario oficial de la web. Simplemente busque cualquier etiqueta, atributo o concepto sobre el que desee saber más.
Actualizar el sitio en vivo (opcional)
Si desea cargar sus cambios en Neocities, siga el mismo proceso que en capítulos anteriores. Arrastre y suelte la carpeta blog
en la zona de colocación para cargar la carpeta completa a la vez. Dado que actualizó el menú de navegación en todas las páginas, también querrá volver a cargar las páginas Inicio y Acerca de.
Por supuesto, también puede seguir trabajando. de manera local en lugar de cargar su progreso ahora. ¡Usted decide!
A continuación
¡Uf, hemos terminado nuestro recorrido relámpago de agregar un blog con varias etiquetas! A continuación, reduciremos el ritmo y nos centraremos en la estructura de la página agregando una página de currículum que pueda compartir con potenciales empleadores.