NOTA: Este post va a ser muy, pero que muy largo, ¡así que ten agüita a mano!
También he utilizado los subrayados para destacar cosas. Los enlaces siempre estarán en otro color.

Hace poco salió la noticia de que Linktree ha cambiado su política y que, a partir del 5 de julio de 2026, empezará a alimentar a la IA (Dall-E, de OpenAI) con las imágenes, textos y links que la gente suba a sus cuentas. Así que ahí va otra empresa que se une a la secta de la IA. Y es un problema porque Linktree es usada por muchas personas a modo de pequeño portfolio, puesto que permite añadir distintos enlaces y mostrarlos en formato lista, que luego creo que se puede personalizar hasta cierto punto para dejarlo más bonito (no lo he usado nunca, así que no sé muy bien cómo funciona).

Y, para variar en cómo soy yo, he pensado en que, quizá, estaría bien enseñaros cómo hacer algo sencillo y básico en neocities (un sitio donde poder hacer páginas web) y así no estar pendiente de si las compañías usan mis datos para alimentar a la IA o si van a cerrar o cualquier cosa. Vaya por delante que yo no soy una experta en html, de hecho, no sé programar; pero sí que sé lo básico como para dejar las cosas un poco en condiciones (como prueba de ello es esta web en la que estás). Hay un montón de plantillas que podéis utilizar, pero para esto voy a usar un generador de plantillas para crear una muy básica que tendrá un encabezado, cuerpo para texto, una columna lateral y una barra de enlaces. Este generador tiene varias opciones que igual os interesan más, pero esto ya es a gusto de cada une. También es un poco para salir del paso, en el momento en el que le pilléis el truco, seguramente queráis buscar otra plantilla que os guste más o, incluso, crearla desde cero. Eso sí, recordad hacer una copia de seguridad de la web antes de cambiar nada, por si tocáis lo que no debéis.

Os dejo el enlace a neocities y también al generador de plantillas.

Acto seguido, clicáis en "generate layout" y copiáis el código que aparece en un recuadro justo debajo. Es un código muy largo, así que os aconsejo que coloquéis el cursor al principio y, después, seleccionéis todo con ctrl+shift+ tecla fin.

Una vez hemos copiado el texto, nos vamos a neocities. Creo que si creabas una cuenta nueva aparecían algunos documentos de ejemplo, así que buscaremos index.html y al pasar el cursor encima elegiremos "edit" y entonces nos encontraremos con un editor de texto pero enfocado al código. Seleccionamos todo el texto que hay en él, borramos y pegamos el código que hemos sacado del generador de plantillas. Guardamos (botón "save" o ctrl+s) y si hacemos clic en "view", podremos ver que la web que aparece es idéntica a la del generador.

Bien, vayamos por partes con el código html. No voy a entrar en la modificación del tamaño de los recuadros ni nada de eso, tan solo en el tema de los colores, fondos, añadir texto, enlaces e imágenes. De todas formas, tras echarle un vistazo a la plantilla, viene muy bien detallada con las cosas que se pueden editar, así que si os sentís valientes, podéis darle caña a ver qué sale, que siempre es divertido.

◼ Barra horizontal de enlaces

Esta parte de aquí es la que afecta a la barra horizontal en la que hay una serie de enlaces. Las etiquetas <ul></ul> significan que lo que se va a mostrar es una lista de elementos sin numeración. <li></li> es para indicar que se va a añadir un elemento a dicha lista. En el caso de esta plantilla, el css (el estilo) aplicado hará que aparezcan en horizontal y sin ningún "iconito" delante. Si queréis eliminar alguna línea, simplemente seleccionáis y borráis; y si queréis añadir más, simplemente copiad escribid lo que queráis entre las etiquetas <li></li>. Para añadir enlaces, deberéis escribir siempre <a href="URL">NOMBRE DE LA URL</a>. La url, o enlace, siempre va entre las comillas. Y siempre que abráis una etiqueta tenéis que cerrarla. Por ejemplo, si escribo <li> estoy abriendo una etiqueta y para cerrarla y que no se desconfigure todo, tengo que escribir, después del texto que quiera añadir, </li>. De todas formas, el editor de texto suele marcar con una X roja la línea en la que falla algo y, si pasáis el cursor por encima, os da información del error.

Volviendo a los enlaces, si queréis que el enlace se abra en otra pestaña, tendréis que añadir target="_blank" dentro de la etiqueta <a></a>. Por ejemplo: <a href="URL" target="_blank">NOMBRE URL</a>. Si queréis que al pasar el cursor por encima aparezca un texto informativo, deberéis añadir title="TEXTO INFORMATIVO" de la misma manera que antes. Por ejemplo: <a href="URL" title="TEXTO INFORMATIVO">NOMBRE URL</a>.

◼ Barra lateral izquierda

Esta parte de aquí es la relacionada con la barra lateral izquierda.

<h2></h2> es la etiqueta para los encabezados. Si no me falla la memoria, van del 1 al 6, siendo el 1 el más grande. Se pueden editar en el css, pero ya llegaremos a ello.

<div class="box"> es la etiqueta que abre la "cajita" de texto que podéis ver en la barra lateral. Si seguís la línea vertical que nace de dicha etiqueta, veréis que está cerrada por un </div>. Esto no tenéis que tocarlo, pero podéis copiar la etiqueta si queréis añadir más cajitas de este estilo. class="NOMBRE" significa que hay una "clase" de estilo en el css para que haga "cosas"; en este caso, la base "box" indica que en el css hay una serie de parámetros para dibujar una cajita de texto cuando se escribe en el código. Cada programadore nombra las cosas como quiere, así que no son iguales entre códigos, tenedlo en cuenta.

<p></p> es la etiqueta para el texto normal y corriente (como este que estáis leyendo). Voy a añadir aquí las etiquetas para las negritas <b></b>, las cursivas <i></i> y los subrayados <u></u>. En algunos sitios veréis etiquetas como <strong></strong> y <em></em>, que también ponen el texto en negrita y en cursiva, respectivamente, pero no tienen la misma función. Podéis leer sobre esto en aquí.

Volvemos a encontrarnos las etiquetas de las listas (<ul></ul><li></li>) y tenemos en una de ellas un añadido que es style="padding-left:10px;". Esto significa que está añadiendo un "estilo" a la lista, que en este caso es añadir 10px entre el texto y el borde de la cajita. Básicamente para que el texto no aparezca encima de ella.

El resto del código es más de lo que hemos visto ya. (</aside> es la etiqueta que cierra la apertura de la barra lateral, no lo borréis).

◼ Cuerpo del texto

El siguiente bloque de código que nos encontramos es el principal, el que contiene la mayor parte el texto.

◼ Pie de página

La última parte del código es la del pie de página.

Aquí lo único que tendríais que cambiar es lo que aparece entre los >< (en este caso de ejemplo, sería "CCO PUBLIC DOMAIN, 2022"). Si no queréis pie de página, podéis eliminar la línea, pero por si en un futuro queréis añadirlo de nuevo (por la razón que sea), podéis "anularlo" convirtiéndolo en un comentario. ¿Cómo? Bueno, simplemente escribiendo <!-- --> delante y detrás de la línea. Ejemplo: <!-- <footer id="footer" style="margin-top: 0px;">CC0 Public Domain, 2022</footer> -->. Esto hará que el código siga visible dentro del editor pero que no aparezca en la web. Es útil si quieres dejarte códigos a modo de plantilla dentro del propio código (para copiar y pegar en lugar de tener que escribirlo todo).

CSS

Y ahora llegamos a la parte del CSS. Por suerte, en la plantilla viene bastante bien explicado, así que tan solo tenéis que seguir las instrucciones. Aún así, os mostraré las que creo que son las que podáis necesitar editar.

--header-image: url('https://sadhost.neocities.org/images/layouts/wp.jpeg'); Aquí es donde vais a poder cambiar la imagen del encabezado. Podéis subir la imagen a dropbox u otro sitio similar y copiar la url para evitar subirla a neocities. Si queréis subirla a neocities, mi consejo es que creéis una carpeta para las imágenes (por tenerlo todo un poco más ordenado). En mi página web tengo las imágenes hosteadas en una carpeta llamada "images", con lo cual, si quisiera añadir una imagen subida a esta carpeta tendría que escribirlo así: --header-image: url('images/NOMBREDELAIMAGEN.PNG'); (png o jpg o gif o la extensión que tenga el archivo). También podéis ir a la carpeta de imágenes y, al renombrar el archivo, os saldrá el nombre con la url y todo.

--body-bg-image: url('https://sadhost.neocities.org/images/tiles/purplesky.gif'); Esta es la imagen del fondo. En este caso, es un gif morado como con brillos. Podéis elegir una imagen que queráis pero, si no queréis imagen alguna, podéis eliminar la línea o convertirla en un comentario por si más adelante cambiáis de opinión. Para marcar una línea como comentario en css se hace así: /* */. Ejemplo: /*--body-bg-image: url('https://sadhost.neocities.org/images/tiles/purplesky.gif');*/. La manera de añadir las imágenes con la url es igual que en el paso anterior.

La siguiente parte es la que afecta a la tipografía de la página. No estoy muy puesta en el tema de importar o no fuentes, así que aquí no os puedo ayudar mucho; en cualquier caso, si queréis cambiarla, podéis hacerlo en esta línea de aquí: font-family: 'Nunito', sans-serif;. Sustituís 'Nunito' (con las comillas inicial y final) y escribís el nombre de una de las fuentes más comunes, como Arial, Tahoma, Garamond, etc. Con una rápida búsqueda en la web os saldrán varios listados con las distintas tipografías "universales" que podéis añadir ahí. Eso sí, si usáis una de estas fuentes, recordad que no debe ir entre las dos comillas (ejemplo: font-family: Arial, sans-serif;). El `sans-serif;` significa que no tiene serifa (ver imagen de abajo).

Vayamos con la siguiente parte.

Lo siguiente que vemos en el código es lo que afecta al tamaño de las cajitas de texto y demás. Está muy bien explicado, así que no voy a entrar en ello.

Este código afecta a la franja en la que van los enlaces que editamos justo al principio.

Siguiendo con dicha cajita de texto, aquí podéis editar el color de los enlaces (color: #ED64F5;)

Y el color del enlace al pasar el ratón por encima (también en el apartado color).

Esta parte de aquí afecta al pie de página, si lo estáis usando.

Este código hace referencia al color de los encabezados, el tamaño de la fuente del encabezado más grande y el color del texto al ser puesto en negrita.

En este código podréis editar la cajita que está dentro de la barra lateral izquierda.

Y en principio, estaría. Si queréis añadir más páginas, siempre podéis copiar y pegar el código de la que habéis utilizado (para mantener los colores y el estilo) y pegarlo en un nuevo documento (new file -> nombredelapagina.html, acordaos siempre de añadir el html al final, de lo contrario no cargará). Aquí ya podéis dejar volar vuestra imaginación. Una página para contar quiénes sois, otra para hablar de vuestros proyectos, etc. ¿Podéis tener distintas plantillas para cada cosa? Sí, pero tened en cuenta que si la plantilla que os descargáis contiene un archivo css aparte, podría entrar en conflicto con el css que podáis estar utilizando ya. Mi consejo es que, si queréis utilizar plantillas diferentes para cada cosa, creéis carpetas para ello. En mi caso, la página que uso de portfolio tiene una plantilla completamente diferente a la que estáis viendo, y es que he creado una carpeta específicamente para "tener un blog" y que no afecte a cómo se ve el portfolio.

Para quienes necesiten un portfolio de arte y quieran hacer una galería, he encontrado un tutorial en W3 Schools que habla de ello. No lo he probado porque, hasta ahora, no lo he necesitado, pero me ha parecido bastante fácil de hacer. Hablando de lo cual, os dejo también un enlace de dicha página en la que podréis acceder a todas las etiquetas. W3 es una página a la que acudo cuando no sé hacer algo y el 99% de las veces me resuelve la duda, así que os recomiendo que la tengáis a mano por si necesitáis algo (que seguramente sea así porque aquí he tocado lo más básico).

Y bueno, creo que es todo. Seguro que me dejo cosas en el tintero y que es todo muy farragoso, pero es la primera vez que explico algo de html y no sé si he pecado de exceso o de defecto o si me he liado. Siempre me podéis preguntar (tanto por email como por rrss) y si puedo ayudaros, lo haré (si no, pues podemos buscar otra solución). Y si sabéis más que yo (que seguro que sí) y me he colado en algún sitio, avisadme para corregirlo :')