icono LinkedIn
Iván García Puebla

Consultor tecnológico de desarrollo de proyectos informáticos.

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2009-08-10

Tutorial visitado 96.290 veces Descargar en PDF
Cómo hacer una página web

Cómo Hacer Una Página Web

  1. Cómo Hacer una Página Web
    1. Introducción
    2. ¿Qué entendemos por "hacer" una página web?
    3. Los fundamentos de una página web: el HTML
    4. Nuestra primera página utilizando un editor de páginas web
    5. Pasos para hacer una página web
      1. Reunir el material
      2. Diseñar la plantilla y la estructura del sitio web
      3. Implementar la página en el ordenador
    6. Publicar nuestra página en internet
    7. Para seguir aprendiendo

Introducción

Este tutorial está orientado a todas aquellas personas que no tengan conocimientos previos de edición web, o que utilicen el ordenador únicamente a nivel de usuario y no de programador. Hoy día publicar contenidos en la web por motivos profesionales o de ocio es algo habitual, y poseer unos conocimientos al menos esenciales puede resultarnos de gran ayuda en cualquier momento.

Vamos a aprender, pues, el mecanismo para hacer una página web.

¿Qué entendemos por "hacer" una web?

Hagámonos una pregunta : ¿queremos publicar contenidos al instante, donde nos interesa más el contenido que la apariencia? Por ejemplo:

  • Podemos querer tener un cuaderno de bitácora donde publicar nuestras reflexiones, contar nuestro último viaje... Para ello un weblog (o blog) es adecuado. Son gratis y sólo tenemos que escribir el texto, el aspecto final lo proporciona el propio blog.
  • Podemos querer publicar fotos con posibilidad de poner comentarios (y votar fotos y mucho más). Nada mejor que servicios como los de Flickr o Panoramio
  • Intercambiar preguntas, dudas, opiniones, aficiones, etc. Para ello los foros son la mejor opción.

Si lo anterior no cubre nuestras necesidades o si queremos desarrollar todo un sitio web de manera más artesanal, tenemos las siguientes opciones:

  • Programar nuestra página web con una apariencia y un contenido estático, y publicarla. Por ejemplo, la página de nuestro pueblo, de nuestra pequeña empresa... Este tutorial trata de ello.
  • Utilizar herramientas llamadas gestores de contenidos, que automatizan muchas de las tareas pero requieren conocimientos medios de programación.
  • Programar una página web con lenguajes como PHP, JSP o ASP. Requieren conocimientos medios/altos de programación.

Tras este breve repaso, ¡entremos en materia!

Los fundamentos de una página web: HTML

Una pagina web se compone de texto: el contenido literal (lo que queremos decir) y las llamadas etiquetas para dar la forma. Algunas de ellas son:

Etiqueta Descripción
<h1></h1> Escribir un título. Los subtítulos se consiguen con <h2></h2>... hasta <h5></h5>
<p></p> Esctribir un párrafo
<b></b> Texto en negrita
<i></i> Texto en cursiva
<center></center> Centrar cualquier elemento (texto, imagen, etc)
<br /> Salto de línea
<a href=""></a> Introducir un enlace (hipervínculo), para pulsar sobre él y navegar a otro sitio

Para nuestra primera web abrimos un editor de texto (por ejemplo el Bloc de notas de Windows) y comenzamos escribiendo la siguiente estructura, obligatoria en toda página web:

Ahora demos contenido a la página. Escribamos lo siguiente, prestando atención para no equivocarnos:

A continuación guardamos este texto en un fichero llamado pagina1.html, por ejemplo en el escritorio de Windows. Para hacerlo correctamente, una manera es ir al menú del Bloc de notas: Archivo | Guardar Como | y en el nombre de archivo a guardar poner entre comillas dobles el nombre del archivo: "pagina1.html". Esto es para que el Bloc de notas de Windows no guarde el fichero con el nombre pagina1.html.txt, un error común al principio:

Guardar una pagina web con el bloc de notas
Guardamos nuestra página con extensión .html en el escritorio de Windows

Hacemos doble click sobre el icono de nuestra nueva página web que estará en el escritorio, y debemos verlo de esta manera:

Pagina web de Aldearriba del Pisuerga

Bienvenida

Bienvenido a la pagina web de Aldearriba del Pisuerga, esperamos que sea de su agrado.

Historia

Los primeros pobladores datan de la epoca celtibera, pues se han localizado asentamientos junto al rio Pisuerga.

Festividades y tradiciones

Como en muchos pueblos, se celebra San Isidro Labrador cada 15 de mayo, asi como la Fiesta de las Animas 15 dias antes el Miercoles de Ceniza

Esperamos verle pronto!!

Pulse aqui para ir a otra pagina

Visite Google

Analizando con cuidado el ejemplo, observamos algunas cosas importantes:

  • Todo documento HTML tiene una estructura base que hay que respetar
  • Para dar formato al texto, hay que utilizar etiquetas HTML, que pueden anidarse
  • Toda etiqueta tiene una parte de apertura <etiqueta> y otra de cierre, con una barra al principio </etiqueta> (salvo alguna excepción, como <br/>)
  • La extensión del archivo que contiene el código HTML debe ser: .html
  • El navegador web interpreta el lenguaje HTML, aplica el formato y lo muestra por pantalla
  • Si ponemos un enlace a una pagina web, hay que comenzar con http:// Si ponemos una página web situada junto con la actual, sólo es necesario escribir el nombre del fichero.

En el ejemplo anterior, si pulsamos sobre Google, nos llevará al buscador. Si pulsamos sobre "Pulse aquí" para ir a la otra página, no la encontrará porque aún no la hemos creado. Vamos a hacerlo. Abrimos otro Bloc de notas y creamos una página web sencilla:

La guardamos con el nombre pagina2.html también en el escritorio, de la misma manera que hemos hecho con pagina1.html. Ahora, al pulsar en la palabra "aqui" de la frase "Pulse aqui para ir a otra pagina", se mostrará segunda página:

Esta es la pagina numero 2

Nuestra primera página utilizando un editor de páginas web

En la sección anterior se han introducido los fundamentos de una página web. Pero hay mucho más, y no tiene sentido memorizar el lenguaje de etiquetas; es más práctico saber qué son para saber comprenderlas en el momento en que las tengamos a la vista.

Vamos, pues, a utilizar herramientas para hacer nuestra página web de manera más rápida y, sobre todo, de manera visual (WISIWYG), evitando tener que escribir código fuente (como mucho, retocando). Estos editores de página web utlizarán lenguaje HTML y otras tecnologías adicionales, como las hojas de estilos en cascada (CSS), HTML dinámico o JavaScript.

Un programa que recomiendo para empezar es Kompozer (una versión mejorada de NVU) por ser de libre uso y muy completo. Hay otros editores más habituales en nuestro entorno, como Microsoft Office Word que permiten que lo que hayamos escrito lo guardemos en formato HTML (menú Archivo | Guardar Como | Página Web), si bien el código HTML que genera no es muy limpio en algunos casos.

Podemos descargar Kompozer desde http://kompozer.net/download.php, en la sección Latest stable version, versión WindowsWin32 binary, el fichero con nombre kompozer-X.X.X-win32.zip. Descomprimimos este fichero descargado en un directorio, entramos en él y ejecutamos el archivo kompozer.exe. El programa tiene el siguiente aspecto:

Kompozer
Interfaz de Kompozer, editor visual de páginas web de libre uso

De manera visual podemos escribir texto, ponerlo en negrita, centrado, convertirlo en un enlace, un título, insertar una imagen, una tabla, dividir en marcos, etc. Asimismo abajo podemos ver las pestañas "Normal", "HTML Tags" y "Preview". Nosotros trabajaremos sobre el modo "Normal", pero podemos comprobar en todo momento el código HTML que se está escribiendo automáticamente por debajo, pulsando en la pestaña "HTML Tags". Para ver el aspecto final de lo que llevamos hecho, podemos pulsar sobre "Preview".

Pasos para hacer una página web

Aunque al principio dediquemos tiempo a hacer pruebas con el editor, escribiendo texto y poniendo imágenes y moviéndolo todo de sitio varias veces, cambiando colores para buscar una combinación que nos guste, la experiencia y la metodología propia de los desarrollos informáticos (bien aplicada es de gran utilidad), recomienda seguir los siguientes pasos:

  1. Reunir el material con el que vayamos a hacer la página web: textos, imágenes, etc.
  2. Diseñar sobre papel el aspecto de nuestro sitio web: dónde va el menú, el encabezado, el pie de página, el cuerpo... es decir, la plantilla (podemos inventarla o elegir una de los recursos gratuitos [1] [2] que hay en internet, pero esto requiere ya cierta de experiencia). Asimismo concretamos cuántas páginas tendrá nuestro sitio web y qué información contendrá.
  3. Una vez claro lo anterior, se traslada el diseño al ordenador, utilizando una herramienta como Kompozer.

Vamos a hacer una página más completa siguiendo estos tres pasos.

1.- Reunir el material

En nuestro ejemplo, usaremos el siguiente:

  • Un texto de bienvenida: bienvenida.txt
  • Un texto con historia del pueblo: historia.txt
  • Un texto con turismo: turismo.txt
  • Fotografías de algunos monumentos, tomadas con una cámara digital y reducidas en dimensiones y tamaño (que no ocupen más de 200 Kb), usando programas como Paint, GIMP o Image Resizer (tutorial) ...
  • Una imagen de fondo: fondo.jpg

Puedes descargar el material aquí: material_pagina_web.zip

2.- Diseñar la plantilla y la estructura del sitio web

Una posible plantilla para la distribución del contenido es la siguiente:

Plantilla para nuestra pagina web
Plantilla de la página web

El sitio web estará compuesto por tres páginas individuales:

  • bienvenida.html, con el texto de bienvenida e imagen de fondo
  • historia.html, con el texto de la historia e imagen de fondo
  • turismo.html, con el texto y las imágenes de turismo, y la imagen de fondo

Una vez tenemos ya en mente nuestra web, vamos a utilizar las herramientas descritas anteriormente para implementarla.

3.- Implementar la página en el ordenador

Creamos una carpeta por ejemplo en el Escritorio de Windows, que se llame paginaweb. Dentro, una subcarpeta denominada imagen, donde copiaremos las imagenes de los monumentos y el fondo. Este material lo hemos descargado antes desde material_pagina_web.zip.

Ininiciamos Kompozer y vamos al menú File | New | dejamos seleccionado A blank document y pulsamos en Create. Guardamos esta pagina desde el menú File | Save As... Aparecerá un diálogo pidiendo el título de la página. Escribimos por ejemplo Página web de Aldearriba de Pisuerga, pulsamos Ok y guardamos la página en una carpeta en el Escritorio de Windows, paginaweb, con el nombre bienvenida (la extensión .html la pone automáticamente el editor).

Comenzamos poniendo el fondo de la página accediendo al menú Format | Page Colors and Background... En la casilla Background Image navegamos hasta la imagen de fondo que estará en: imagen/fondo.jpg. Aseguremonos que la opción URL is relative to page location... queda marcada:

Insertar el fondo d e la pagina web
Insertar el fondo de la pagina web

A continuación escribimos el encabezado de la página. Por ejemplo, "Bienvenido a la pagina web de Aldearriba de Pisuerga", lo damos forma de encabezado de nivel 1 (desplegable izquierdo) y finalmente lo centramos.

Insertar encabezado nivel 1
Insertar la cabecera de la página web

A continuación, debajo del título, insertamos una tabla, desde el menú Insert | Table... pulsamos sobre la pestaña Precisely y ponemos los siguientes datos, y pulsamos OK.

Insertar tabla
Insertar una tabla de 1x2 sin borde

En la celda izquierda escribimos: Menú: y debajo tres líneas, una cada una con "Bienvenida", "Historia" y "Turismo", dando el tamaño y tipo de letra que queramos, por ejemplo Helvetica, Arial (desplegable izquierdo, expandiendo "Variable Width"). La tabla seguramente se descoloque; podemos ajustar su forma poniedo el cursor sobre los límites de la misma en la barra superior e izquierda, y arrastrando:

Ajustar los limites de la tabla
Con el ratón deslizamos a la izquierda el límite de la celda

Bajo la tabla escribimos el pie de página, con información de la última actualización: "Última actualización: 06 de agosto de 2009". Para finalizar con la plantilla base de la página, vamos a convertir las palabras bajo el menú izquierdo en enlaces reales. Por ejemplo, seleccionamos la palabra "Bienvenida" y vamos al menú Insert | Link... e introducimos en el área de texto: bienvenida.html y pulsamos OK:

Convertir un texto en enlace
Propiedades del enlace: insertando una página web

Repetimos el proceso con "Historia", siendo la página historia.html y "Turismo" siendo la página turismo.html. Conviene indicar que estras tres páginas estarán juntas en la misma carpeta del Escritorio paginaweb y por eso no hace falta escribir la ruta de directorios de las páginas a las que enlazamos. Si estuviesen en otro directorio habría que poner la ruta. Si lo que queremos en enlazar con una página de internet, habrá que poner la dirección con formato http://......

En este punto tenemos completada la plantilla:

Plantilla HTML
Plantilla diseñada al principio, implementada en HTML

Hasta aquí, el procedimiento es común para las tres páginas, y lo repetiremos para cada una de ellas, o bien haremos dos copias del fichero bienvenida.html en el mismo directorio paginaweb y lo renombraremos como historia.html y turismo.html.

Como estamos editanto la página de bienvenida, en el cuerpo de la página vamos a pegar el texto del fichero bienvenida.txt, y lo damos formato al gusto:

Pagina web de bienvenida
Página web de bienvenida visualizada en el navegador

El proceso para la página de historia es similar: sobre la plantilla, rellenamos el cuerpo con texto. Si hicimos copia del fichero bienvenida.html y cambiamos el nombre por historia.html, podemos abrir esta página desde Kompozer en el menú File | Open File y seleccionando historia.html. Un ejemplo del resultado final puede ser:

Pagina web de historia
Página web de bienvenida visualizada en el navegador

De manera similar, abrimos la página de turismo y en el cuerpo insertaremos el texto e imágenes. Para insertar una imagen, ponemos el cursor antes de la primera palabra del primer párrafo "Transitando por..." y pulsamos en el menú Insert | Image para acceder a las propiedades de inserción. En la pestaña Location seleccionamos la imagen con el explorador y se inserta la ruta relativa a la página. Escribimos un texto alternativo, como se muestra en la imagen:

Insertar Imagen en una pagina web
Propiedades de inserción de imagen, pestaña Location

En la pestaña Appearance podemos seleccionar la situación de la imagen respecto al texto: alineado medio, superior o inferior, a la izquierda, derecha, espacio alrededor de la imagen... La imagen del puente la dispondremos a la izquierda del párrafo y a su misma altura, separando unos píxeles el texto de la imagen. Estableceremos las siguientes propiedades:

Propiedades de la imagen respecto al texto
Propiedades de la imagen respecto al texto

Pulsamos OK y vemos el resultado:

Pagina web de turismo con foto del puente
Página web con imagen a nivel de texto

Debajo del segundo párafo, y en el medio, insertaremos la imagen del rollo de justicia. Guardamos la página, y el aspecto final de la página de turismo será:

Pagina web de turismo
Página web de turismo con las dos imágenes

En este punto podemos probar los enlaces del menú izquierdo. Si hemos seguido bien todos los pasos, es decir, hemos escrito bien los nombres de las páginas .html en el editor web y los ficheros .html en disco están al mismo nivel y con los nombres correctos, podremos pasar de una página a otra de nuestro pequeño sitio web.

Publicar nuestra página en internet

Una vez que la página está terminada y comprobamos que es correcta en nuestro equipo, es momento de publicarlo en internet. Si no disponemos de alojamiento web privado, podemos darnos de alta en un servicio de webhosting gratuito (que posiblemente inserte algo de publicidad en nuestras páginas). Sin ánimo de publicitar ninguna empresa, yo voy a explicar cómo se hace con Lycos.

Accedemos a http://www.tripod.lycos.es/ y nos registramos. Recibiremos un correo de confirmación en nuestra cuenta de correo electrónico indicada. Al confirmar, accederemos a una página web donde podemos escoger el nombre de nuestro espacio web y el dominio:

Nombre y dominio del espacio de alojamiento en Lycos
Selección del nombre del espacio web y dominio de nuestro webhosting en Lycos

Una vez confirmado, podemos hacer inicio de sesión en Lycos y accedemos al panel de control. Para subir nuestra página web a nuestro espacio, podemos usar FTP habitual, a la dirección ftp.usuarios.lycos.es, con nuestro nombre de usuario y contraseña. O bien podemos utilizar una herramienta online para subir los ficheros y gestionar nuestro espacio: el WebFTP. Usando WebFTP subimos primero las tres páginas .html, y luego creamos una nueva carpeta llamada imagen, donde subiremos en ella posteriormente las tres imágenes:

WebFTP de Lycos
WebFTP de Lycos. Debemos subir nuestra web con la misma estructura de carpetas

¡Ahora ya podemos visitar nuestra pequeña obra maestra en internet! http://usuarios.lycos.es/aldearriba/bienvenida.html

Para seguir aprendiendo

Obviamente este tutorial ofrece unas pinceladas básicas sobre el proceso de construcción de una web. Ahora que tenemos unos mínimos fundamentos, podemos seguir estudiando y hacer páginas más elaboradas. A continuación ofrezco algunos recursos para profundizar en materia:

Este tutorial está dedicado a Laura y a todas las personas que están aprendiendo. ¡Ánimo!

 

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2011-10-05-13:33:58

Autor: EmmaTwain

Muy agradable ver a expertos en tecnología aquí! Gracias por el aviso.
Record screen http://freescreenrecorder.net/

Fecha publicación: 2011-07-07-11:48:50

Autor: alias

Gran post, que era Muy interesante para que lo lea porque me encanta el software de todos los diferentes tipos. Mi favorito es YouTube to MP3 Converter, lo he descargado desde aquí http://videotomp3converter.com/ Es un programa maravilloso software que convierte los vídeos de youtube a mp3, es digno de ser dado una oportunidad!

Fecha publicación: 2011-03-31-22:46:06

Autor: argon

Buen dia

esta es una pagina con buenos aportes

Saludos

Fecha publicación: 2009-08-27-03:50:53

Autor:

[Iván] Hola "www". Si indicas un medio de contacto válido podremos intentar ayudarte. Un saludo

Fecha publicación: 2009-08-26-07:42:34

Autor:

[www] por ejemplo a es.geoticies.com

Fecha publicación: 2009-08-26-07:41:25

Autor:

[www] me ha parecido que es muy buen tutorial, ¿pero podrias explicar tambien como subir la pagina web a otra sitio web gratuito ademas de a lycos? Gracias. :)

Fecha publicación: 2009-08-15-02:17:05

Autor:

[GABRIEL GUTIERREZ] Didactico y entendible. Gracias

Fecha publicación: 2009-08-14-12:48:20

Autor:

[r] muy bueno