«

»

Dic 24

Haciendo su primer sitio web desde cero

Este artículo te mostrará cómo hacer tu propio sitio web, completamente desde cero sin tener que aprender prácticamente nada de html, es completamente gratuito, aunque se necesita alguna habilidad en un programa de pintura, pero si no la tienes puedes buscar en Internet.

 

 

 

Lista de cosas necesarias:

  • Acceso a Internet (lo más probable es que si estás leyendo esto lo tienes)
  • Un programa de pintura
  • Aproximadamente una hora de tiempo (incluso más corta dependiendo de tu habilidad)
  • Y unas pocas descargas que por supuesto son freeware (gratuitas).

 

La primera descarga se llama Gimp que es básicamente una versión simplificada Photoshop, o una versión más voluminosa de Paint de Windows. Gimp también tiene versiones para los usuarios de Linux y Mac.

A continuación, es algo que realmente me gusta es un editor de HTML que es, lo adivinaste, gratis. Esto es lo que lo hace que no tienes que aprender html. Pero si quieres hacer la codificación, puedes hacerla con este programa: NVU.

Conseguido todo eso, estás listo para dar el paso en el mundo del interweb.

 

Paso 1: Realización de las imágenes

 

Este es la etapa en la cual se hacen todas las imágenes de tu sitio, por supuesto, tendrás que tener un nombre para tu sitio en esta etapa.

Un método probado y verdadero es hacer una imagen 1000×600, muchas páginas a principios son solo un banner en la parte superior, una barra de color con los botones y algunas barras de menú.

Basta con hacer la cosa entera como una sola imagen (simplemente dejar fuera el área de contenido, es decir, donde el texto está en la página central, sólo deja ese punto en blanco) y no hacer un fondo, sólo llenar el fondo con un color sólido que va bien con tu página.

No voy a decirte consejos de pintura o cualquier cosa que puedes mirar por tu cuenta. Una vez que tengas lo que quieres que tu página principal se parezca, una vez que hayas terminado, corta y pega todo lo que se puede hacer en clic, incluyendo el banner y los botones de forma individual en una nueva ventana, y guardarlo por separado. Asegúrate de guardarlos como PNG. El punto aquí es separar todo para que puedas codificarlo.

Otra pista es hacer una nueva carpeta para guardarlas, depende como prefieres organizarte.

 

Paso 2: Poner todo de nuevo juntos

 

Ahora para esto vas a abrir NVU, me tomó un poco de tiempo para entenderlo, pero no es complicado. Te voy a indicar cómo hacer paso a paso.

Primero tendrás que tomar la barra superior que se establece en el valor predeterminado a 600 (estoy bastante seguro), pero querrás arrastrar esto y hacer que tenga 1000 de ancho, haz lo mismo al lado ponle 600.

A continuación, querrás hacer el fondo del sitio primero, no vas a utilizar el relleno que utilizaste en tu programa de Paint, sino que en lugar vas en “formato > colores de página y de fondo”, haz clic en utilizar colores personalizados. Y cambiar el color de fondo para que sea como en lo que hiciste en el programa de pintura.

Lo siguiente que querrás hacer es añadir el banner superior. Haz clic en el botón de imagen de la barra de herramientas y encuentra tu banner. Haz clic en “no utilizar texto alternativo”. Y ahora tienes tu primera imagen en tu página.

* Haz clic en la barra de fuentes en la parte inferior del programa para ver cuánta codificación entró en eso. También es una buena manera de aprender HTML.

Descargar el resto de los botones, puedes utilizar texto alternativo o no, depende de ti. Sin embargo, tendrás que hacer clic en el botón y entrar en la barra de formato en las propiedades de imagen y enlace. Haz clic en la barra de vínculos y haz que enlace a lo que debe, el botón de inicio sería index.htm, el botón de enlaces sería links.htm escribir lo que los botones están vinculados porque lo necesitarás más tarde.
Lo último que querrás hacer es hacer una tabla en el centro de la página debajo de los botones, puedes cambiar el color y los bordes en la barra de menús, aquí es donde irá tu texto principal. Escribir algo para que tengas algo en tu sitio.

 

 

Paso 3: Preparación de todo

 

Ahora tienes el sitio web bastante bien hecho. Pero probablemente no tienes el tiempo o el espacio necesario para configurar un servidor, además de que no sería gratis. Pero hay lugares que alojan tu sitio web de forma gratuita en sus servidores. Mi favorito es Freewebs.

Créate una cuenta en freewebs, si el nombre de tu sitio web no está disponible, no te preocupes y añade un 2 al final de tu dominio por ahora, es decir, por ejemplo, las minas punkholy, si está ya tomado lo llamaría punkholy2.

Por último, al hacer el sitio web asegúrate de configurarlo en modo html.

Terminarás en una pantalla, haz clic en el administrador del sitio, y haz clic para editar la página llamada index.htm y elimina las cosas que que están, entra en la barra de origen en NVU y copia y pega que en el editor de texto que está en blanco.

Por último, carga las imágenes en el directorio principal y haz clic en el pequeño globo para ver la página.

 

Paso 4: Terminando

 

Hacer algunas nuevas páginas con los nombres indicados previamente para los enlaces. Ahora vas a copiar el código html de la página de índice y copiarlo en las nuevas páginas, después de la comprobación. Debes ver dónde está el texto que has introducido en la página principal. Puedes suprimir eso y escribir algo más que entraría en la página, después necesitarás mirar para arriba un poco el html si quieres agregar enlaces a otro sitio o cosas así.

* Como paso opcional si no conseguiste tu nombre porque ya estaba tomado y tuviste que poner un 2 en el dominio pincha aquí y registra el nombre que quieres.

 

¡Suerte!