Volver al index Ir a portafolios

Tutorial: Mi primera página en Neocities

En esta guía vas a ir construyendo tu página paso a paso, copiando y pegando el código en Neocities.

Cada bloque de código tiene un botón de “Copiar código” para que puedas pegarlo fácilmente.

Paso 1

Plantilla mínima de index.html

Crea un archivo nuevo llamado index.html en Neocities.
Copia este código. Es la estructura básica de cualquier página HTML.

Código completo de index.html (versión 1)
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
</head>

<body>


</body>
</html>
Paso 2

Añadir un título y un primer párrafo

Ahora vamos a mostrar algo en pantalla: un título grande y un texto corto. Sustituye el contenido anterior de index.html por este nuevo código.

Todo lo que se ve en la página va dentro del cuerpo: entre <body> y </body>.
Código completo de index.html (versión 2)
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
</head>

<body>

    <h1>Bienvenid@ a mi página web</h1>
    <p>Esta es mi primera página hecha desde cero con Neocities.</p>

</body>
</html>
Paso 3

Más contenido: párrafos, imagen y enlaces

Añadimos:

Sustituye el contenido de index.html por esta versión 3:

Código completo de index.html (versión 3)
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
</head>

<body>

    <h1>Bienvenid@ a mi página web</h1>

    <p>Esta es mi primera página hecha desde cero con Neocities.</p>
    <p>Aquí iré poniendo mis movidas.</p>

    <img src="gato.jpg" alt="Mi foto" width="100">

    <p>
        <a href="https://www.instagram.com/TU_USUARIO/">Instagram</a><br>
        <a href="trabajos.html">Mis trabajos</a><br>
        <a href="https://TU_USUARIO.neocities.org/galeria">Galería</a>
    </p>

    <p>Gracias por visitar mi página!!!</p>

</body>
</html>
Ahora la página ya tiene contenido, pero todavía no tiene estilos bonitos. Eso lo haremos con CSS.
Paso 4

Conectar el archivo de estilos style33.css

Vamos a decirle al navegador que esta página usará un archivo externo de estilos llamado style33.css. Esto se hace añadiendo una línea dentro de <head>.

Sustituye de nuevo el contenido de index.html por esta versión 4. El cuerpo es el mismo que en la versión 3; lo que cambia es la cabecera.

Código completo de index.html (versión 4)
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
    <link rel="stylesheet" href="style33.css">
</head>

<body>

    <h1>Bienvenid@ a mi página web</h1>

    <p>Esta es mi primera página hecha desde cero con Neocities.</p>
    <p>Aquí iré poniendo mis movidas.</p>

    <img src="gato.jpg" alt="Mi foto" width="100">

    <p>
        <a href="https://www.instagram.com/TU_USUARIO/">Instagram</a><br>
        <a href="trabajos.html">Mis trabajos</a><br>
        <a href="https://TU_USUARIO.neocities.org/galeria">Galería</a>
    </p>

    <p>Gracias por visitar mi página!!!</p>

</body>
</html>
Paso 5

Crear el archivo style33.css

Ahora crea en Neocities un archivo nuevo llamado style33.css y copia dentro exactamente este código.

Este archivo define la paleta de colores y las clases que usaremos luego (.cajablanca, .cajagris, .fila, etc.).

Código completo de style33.css
:root {
  --pink: #ff4da6;
  --blue: #67BBE0;
  --cream: #EDC680;
  --texto1: #141414;
  --texto2: #36240A;
  --lightcream: #FFDEB5;
  --midcream: #FFDCBA;
}





body {
    background: var(--cream);
    font-family: Arial, sans-serif;
    padding: 60px;
    color: var(--texto1);
}

h1 {
    color: var(--texto2);
    text-align: center;
}

h2 {
    color: var(--blue);
    text-align: center;
}

p {
    font-size: 18px;
    color: var(--texto1);
    max-width: 600px;
    margin: auto;
}

.fila {
    display: flex;       /* hace que los hijos se coloquen en línea */
    gap: 20px;           /* separación entre la imagen y los links */
    align-items: center; /* centra verticalmente la imagen con el texto */
    max-width: 600px;
    margin: auto;
    padding: 20px;
}

.fotomarco {
    padding: 5px;               /* espacio entre el borde y la foto */
    background: var(--texto2);     /* color del marco, usando variable */
    display: inline-block;       /* hace que el div se adapte al tamaño de la foto */
    border-radius: 0px;         /* esquinas redondeadas del marco */
}


.links a {
    display: block;       /* cada link en una línea */
    margin-bottom: 6px;   /* espacio entre links */
    color: var(--blue);   /* usa tu variable de color */
}

.links a:hover {
    color: var(--pink);
}

.cajablanca {
    background: var(--lightcream);
    padding: 20px;
    border-radius: 20px;
    max-width: 600px;
    margin: 20px auto;
}

.cajagris {
    background: var(--midcream);
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
    margin: 20px auto;
}
Después de guardar, recarga tu index.html. El contenido será el mismo, pero los colores, márgenes y cajas vendrán de aquí.
Paso 6

Versión final de index.html con cajas y clases

Ahora que ya tienes el CSS preparado, vamos a usar las clases (.cajablanca, .cajagris, .fila, .fotomarco, .links) para organizar mejor el contenido.

Sustituye el contenido de tu index.html por este código final:

Código completo de index.html (versión final)
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>¡Página de gatos!</title>
    <link rel="stylesheet" href="style33.css">
</head>


<body>
    <h1>Bienvenid@ a mi página web</h1>
<div class="cajablanca">
    <p>Esta es mi primera página hecha desde cero con Neocities.</p>
    <p>Aquí iré poniendo mis movidas.</p>
</div>  
        
<div class="cajagris">
  <div class="fila">
      <div class="fotomarco">
          <img src="gato.jpg" alt="Mi foto" width="100">
      </div>
      <div class="links">
          <a href="https://www.instagram.com/gd.galexy/">Instagram</a><br>
          <a href="portafolios.html">Trabajos</a><br>
          <a href="galeria.html">galeria</a>
      </div>
  </div>
</div>


<div class="cajablanca">
    <p>Gracias por visitar mi página!!!</p>
</div>

</body>


</html>
Más adelante puedes cambiar los enlaces (Instagram, Trabajos, galería) por los tuyos propios. La estructura de cajas y estilos se mantiene igual.
Paso 7

Página de trabajos / portafolio

Por último, crea una página para listar algunos trabajos. Aquí se llama trabajos.html, pero si quieres puedes guardarla como portafolios.html y ajustar el enlace en tu index.html.

Crea un archivo nuevo con ese nombre y copia este contenido:

Código completo de trabajos.html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mis trabajos</title>
    <link rel="stylesheet" href="style33.css">
</head>

<body>

    <div class="links">
        <p><a href="index.html">Volver al menú</a></p>
    </div>

    <div class="cajablanca">
        <h1>Listado de mis trabajos</h1>
    </div>

    <h2>
        <div class="links">
            <a href="trabajo1.html">Trabajo sobre Japón</a>
        </div>
    </h2>
    <p>Este trabajo habla de la cultura japonesa desde una perspectiva sociológica.</p>

    <h2>
        <div class="links">
            <a href="trabajo2.html">Trabajo sobre la identidad digital</a>
        </div>
    </h2>
    <p>Este trabajo explora el concepto de identidad digital.</p>

    <h2>
        <div class="links">
            <a href="trabajo3.html">Trabajo sobre la obesidad infantil</a>
        </div>
    </h2>
    <p>Este trabajo explora la obesidad infantil desde una perspectiva sociológica.</p>

</body>
</html>
Puedes cambiar los títulos y descripciones por trabajos tuyos reales conforme los vayas haciendo.
Extra

Recursos y contacto

Si quieres seguir trasteando después del taller, aquí tienes algunos recursos útiles: