¿Cómo crear una página web a partir de una plantilla?

Código HTML de una página web
Aquí encontrarás una guía básica para diseñar tu propia página web con una plantilla HTML. Se trata de un proceso muy sencillo en el que son pocos los detalles a cuidar.

Hace ya tiempo que crear una página web está al alcance de cualquiera sin conocimientos profundos en lenguaje HTML. Los propios proveedores de hosting ofrecen herramientas muy flexibles para que estos creen sus propios sitios con total libertad, limitando así los obstáculos a las ideas que los usuarios puedan tener. Además se dispone de recursos que por sí mismo pueden dotar a una web de un aspecto prácticamente profesional y no es otro que las plantillas. Hablando de un modo mundano, se trata de diseños de páginas que están listas para ser aplicados con mínimas ediciones o modificaciones: tan sólo el contenido de texto que se quiera publicar.

Las plantillas están formadas por diferentes elementos:

  • Archivo HTML: es la plantilla en sí misma. Si la abres verás qué aspecto tiene.
  • Subcarpeta IMAGES: son los elementos gráficos que utiliza.
  • Hojas de estilo: archivos como STYLE o DEFAULT con extensión CSS son los que definen sus aspectos estilísticos y gráficos.

Todas las reglas de edición de uso y diseño de HTML cumplen un estándar regulado por el World Wide Web Consortium. Gracias a esta organización sin ánimo de lucro se consigue la uniformidad a la hora de aplicar criterios en el diseño y, por tanto, se facilita tanto el desarrollo de páginas como el del software orientado a ellas.

¿Qué requisitos son necesarios para crear una página web con una plantilla?

Antes de ponerte manos a la obra es aconsejable haber hecho un trabajo previo:

  • El texto que contendrá la web: prepara un documento en el que figure el contenido de la web. Título, estructura, división del contenido, subtítulos, imágenes… todo esto agilizará tu trabajo. Si no tienes un programa de edición de páginas web puedes recurrir a un editor de texto plano como el Bloc de notas de Windows u otros más avanzados como Notepad++. No recurras a procesadores de texto como Word y similares pues generan código que repercuten en el código de la página y, por tanto, en la presentación online del contenido.
  • La plantilla: aunque parezca una perogrullada no lo es. Busca bien y selecciona de forma adecuada… no te dejes llevar por el primer diseño que te llame la atención. Hay un montón de sitios donde encontrar miles de plantillas de diseño web. Ten en cuenta qué piensas ofrecer y qué imagen quieres dar; todos no se van a adaptar igual a tu idea.
Ejemplo de plantilla HTML adaptable a diferentes dispositivosEjemplo de plantilla HTML adaptable a diferentes dispositivos

¿Cómo editar una plantilla HTML?

En primer lugar has de abrir el archivo HTML, que normalmente recibe el nombre de index. A continuación sigue estos pasos:

Título y contenido

  • Reemplaza el texto entre las etiquetas title con el título de tu web. y con el título de tu web.
  • Introduce entre las etiquetas body y la información que quieres que se muestre al usuario. ¿Recuerdas el contenido que unas líneas más arriba hemos recomendado que tuvieses preparado? Pues va todo entre estas dos etiquetas.

Si simplemente estás haciendo una prueba puedes recurrir a herramientas como Lorem Ipsum para generar texto aleatorio. Aunque bueno, la experimentación no tiene por qué estar exenta de buen humor, así que mejor recurre a Chiquito Ipsum y verás qué fistro de web vas a crear…

Editar y crear vínculos

Es importante que tengas en cuenta una cosa: las plantillas suelen mostrar los nombres predeterminados de los vínculos en inglés por lo que mejor modifícalos. Ya sabes, cosas como Home o Contact.

Los vínculos tienen el formato a href=”#”>texto Sustituye # por la URL correspondiente y texto por lo que quieres que se vea. Esto podría ser un ejemplo si quisieras enviar a alguien a un sitio externo: a href=”http://www.malavida.com/es/soft/www/.

Por el contrario, si lo que quieres es que siga a un enlace interno de tu web sustituye # por tu URL con el directorio donde esté el archivo de la página.

Insertar imágenes en la página web

Antes te hablamos de la carpeta IMAGES. En ella debes poner las imágenes que quieras incluir. Para que se muestren en el lugar que quieres haz esto en las etiquetas de imagen img src="images/imagen.jpg" width="x" height="x" alt="Descripción"/ :

  • Sustituye imagen.jpg por el nombre de la imagen en su carpeta (con la extensión de formato que corresponda.
  • Modifica el ancho (width) y la altura (height) con las propiedades que indique la propia imagen (ya sabes: botón derecho del ratón sobre ella y Propiedades.
  • Incluye una descripción de la imagen en el campo alt. Ésta servirá para que se pueda encontrar vía buscador.

¿Cómo subir la página al servidor web para su publicación?

Ya has creado tu página web. Estas son unas directrices muy básicas pero a poco que investigues encontrarás excelentes recursos que te enseñarán muchísimos aspectos del diseño web… y también consejos que no tienen que ver con el diseño pero no son menos importantes.

En la zona de usuario que te proporciona tu proveedor web encontrarás la carpeta donde subir tus archivos. Suelen tener nombres como public_html o httpdocs y normalmente puedes llevar a cabo la operación desde el propio navegador.

Servidor para alojar páginas webServidor para alojar páginas web / Andrew Hart editada con licencia CC 2.0 Shared-Alike

No obstante, si son muchos elementos los que se van a subir, se puede utilizar un cliente FTP como FileZilla, diseñado precisamente para estas cosas.

Hay una cosa conveniente a tener en cuenta y es que lo aconsejable es que tu sitio web no cuente con una sola página. Lo normal es que tengas tus contenidos bien parcelados. Es decir, que tu información de contacto, lo que quieras contar de ti, galerías de imágenes o cualquier otro contenido que quieras mostrar de una forma ordenada, vaya en una sección propia. Si tienes mucho contenido y lo muestras todo desde una única página puede ser un caos para el usuario. Para crear estas nuevas páginas con subdominios sólo tienes que seguir los pasos descritos anteriormente, con la misma plantilla o con la que sea que quieras utilizar.

Relacionados

Nos encanta escucharte ¿Nos dejas tu opinión?