Como crear una pagina web

Es gratis y relativamente sencillo crear una página web. Solo necesitas un computador con un editor de textos. Si estás en una máquina Windows puedes usar el Bloc de notas. Abre el Bloc de notas y escribe el siguiente código o sólo copia y pégalo.

<html>
<head>
</head>
<body>
Hola mundo!
</body>
</html>

Guárdalo como index.html y asegúrate de que su nombre es index.html, no Index.html, queriendo decir que todos los caracteres deben estar en minúsculas. Ahora abre el archivo con tu navegador. Deberías ver algo parecido a lo siguiente:

Hola mundo primera pagina web

El siguiente paso es subir este archivo a tu servidor web. Abre tu programa FTP y sube el archivo index.html dentro de tu directorio htdocs.

Finalmente, abre tu navegador y visita la dirección de tu sitio web. Deberías ver como carga tu página web. Ahora necesitas comenzar a personalizar tu página web. Una tarea que trataremos en un artículo futuro.

Aparte, te preguntarás cuál fue la primera página web que se creó y tal vez tomarla como ejemplo para desarrollar lo que podría ser tu primer sitio web.

La primera página web en Internet fue creada por Tim Berners-Lee. Su localización original ha cambiado pero, por ahora, se encuentra en algún lugar dentro del dominio w3.org, exactamente aqui. Una vez que estés allí, haz click derecho sobre la página web y pulsa sobre Ver código fuente. Copia todo y pégalo en el Bloc de notas (Windows) o en TextEdit (Mac OS) o en tu editor de texto favorito (cualquier SO). Es preciso que borres el contenido original porque es propiedad de su creador. Deberías añadir tu propio código y escribir tu propio contenido.

De nuevo, guárdalo como index.html y súbelo a tu directorio htdocs. Ahora visita tu URL con tu navegador web y voilá. Ahi la tienes, tu primera página web.

Pero necesitarás más elementos y atributos HTML para dar algo de estilo a tu contenido. Cubriremos:

Estilos de texto

Puede que quieras marcar algunas palabras con texto más grande y oscuro, o en negrita:

Lorem ipsum. Tu 
<b>
texto en negrita va aqui.
</b>

O puede que quieras marcar algunas palabras con una ligera inclinación, o texto en itálica:

Lorem ipsum. Tu 
<i>
texto en italica va aqui.
</i>

Tal vez quieres remarcar algunas palabras con una línea bajo el texto, o texto subrayado:

Lorem ipsum. Tu 
<u>
texto subrayado va aqui.
</u>

Tal vez hallaste algunas palabras a eliminar en la próxima versión de tu documento, o texto tachado:

Lorem ipsum. Tu 
<strike>
texto tachado va aqui.
</strike>

Puedes hacer que tu texto se muestre como texto mono-espaciado o de teletipo también, usando el siguiente código:

Lorem ipsum. Tu 
<tt>
texto mono-espaciado o de teletipo viene aqui.
</tt>

Puedes hacer texto más grande y/o más pequeño con el siguiente código:

Lorem ipsum. Tu 
<big>
texto grande va aqui 
</big>
y tu 
<small>
texto pequeño va aqui.
</small>

Quieres separar dos sentencias con un salto de línea? Puedes usar el elemento BR como en el siguiente ejemplo:

Lorem ipsum. Tu primera sentencia.
<br>
Tu segunda.
<br>
Y la tercera sentencia.
Estilos de frase

Es posible enfatizar texto también con los elementos EM y STRONG, por ejemplo:

Lorem ipsum. Tu 
<em>
texto enfatizado EM va aqui 
</em>
y tu 
<strong>
texto enfatizado STRONG va aqui.
</strong>

Si deseas mostrar algunas líneas de texto de código de programa, usa el elemento CODE, por ejemplo:

Lorem ipsum. tu 
<code>
texto de codigo de programa viene aqui.
</code>

De una manera similar, puedes usar el elemento CITE para referencias y citas, por ejemplo:

Lorem ipsum. Tu 
<cite>
cita o fuente de referencia va aqui.
</cite>

Y si lo que deseas es mostrar una dirección postal? Entonces, puedes usar el elemento ADDRESS para detalles de contacto y envío, por ejemplo:

<address>
Editor jefe
J. Smith
1234 Santa Clara
Tel: +1-123-456-7890 </address>
Parrafos

Es una buena idea dividir tu texto en párrafos para hacerlo más sencillo de leer. El elemento HTML para los párrafos es P:

<p>
Lorem ipsum. Este es tu parrafo.
</p>

Puedes ajustar la alineación del texto de párrafo con el atributo ALIGN. Por defecto esta definido a IZQUIERDA. Lo puedes cambiar a DERECHA o CENTRADO. Ejemplos:

<p>
Este parrafo esta alineado por el valor por defecto.
</p>
<p align=center>
Este parrafo esta alineado para ser centrado.
</p>
<p align=right>
Este parrafo esta alineado a la derecha.
</p>
<p align=left>
Este parrafo es forzado a alinearse a la izquierda.
</p>
Encabezados

Hay varios elementos HTML para distintas tallas de título. Son conocidos como encabezados y hay 6 tamaños predefinidos:

<h1>
Titulo de talla 1
</h1>
<h2>
Titulo de talla 2
</h2>
<h3>
Titulo de talla 3
</h3>
<h4>
Titulo de talla 4
</h4>
<h5>
Titulo de talla 5
</h5>
<h6>
Titulo de talla 6
</h6>

Opcional: puedes usar el atributo ALIGN aquí también. Ejemplos:

<h1 align=center>
Titulo de talla 1
</h1>
<h2 align=right>
Titulo de talla 2
</h2>
<h3 align=left>
Titulo de talla 3
</h3>
<h4 align=center>
Titulo de talla 4
</h4>
<h5 align=right>
Titulo de talla 5
</h5>
<h6>
Titulo de talla 6
</h6>
Tamaño de fuente

Puedes cambiar y definir el tamaño de la fuente a un tamaño distinto en cualquier sección de tu documento HTML. El elemento HTML para hacer esto es FONT con el atributo SIZE y puedes usar el atributo COLOR para cambiar el color de tu texto. Así que si deseas tener diferentes tamaños de texto deberías tomar el siguiente código:

<font size=1 color=green>
Tamaño de texto 1
</font>
<br>
<font size=2 color=maroon>
Tamaño de texto 2
</font>
<br>
<font size=3 color=olive>
Tamaño de texto 3
</font>
<br>
<font size=4 color=black>
Tamaño de texto 4
</font>
<br>
<font size=5 color=yellow>
Tamaño de texto 5
</font>
<br>
<font size=6 color=purple>
Tamaño de texto 6
</font>
<br>
<font size=7 color=gray>
Tamaño de texto 7
</font>
Listas

Si quieres crear listas, tienes más elementos HTML para ello. Si quieres crear una lista numerada deberías utilizar el siguiente código:

<ol>
<li>
objeto 1
</li>
<li>
objeto 2
</li>
</ol>

Pero si quieres crear una lista no ordenada entonces deberías usar el siguiente código:

<ul>
<li>
objeto 1
</li>
<li>
objeto 2
</li>
</ul>
Enlaces

Los enlaces son el lado más importante de una página web. Los enlaces son conexiones a otras páginas web, documentos y diferentes recursos. Estas conexiones pueden apuntar a páginas web externas y sitios web. Después de clicar en el enlace estarás visitando el recurso solicitado. Imagina que quieres incluir un enlace a un buscador en tu página web. Ejemplo propuesto:

<a href="http://yahoo.com/" title="yahoo buscador">Yahoo!</a>

Los enlaces se definen con el elemento A seguido del atributo href. El atributo title es opcional pero se recomienda fuertemente incluirlo, especialmente al enlazar con recursos externos por el bien de la accesibilidad.

Los enlaces también pueden apuntar a lugares internos dentro de tu página web. Imagina una página web muy larga y digamos que quieres incluir un enlace a un párrafo posterior en tu documento. Código de ejemplo propuesto:

<a href="#paragraph10">Enlace a parrafo 10</a>
+++ other lines of code +++
<p id="paragraph10">Parrafo 10</p>

Y los enlaces también pueden apuntar a páginas web internas y otros recursos. Digamos que tienes dos páginas diferentes index.html y contact.html EN EL MISMO DIRECTORIO. Y quieres enlazar los dos uno al otro. Código de ejemplo propuesto:

+++ en tu archivo index.html +++
<a href="contact.html" title="contact">Enlace al documento contact</a>
+++ en tu archivo contact.html +++
<a href="index.html" title="index">Enlace al documento index</a>

Ahora puedes crear muchas páginas web y enlazarlas entre ellas. Si haces que tus páginas web compartan un patrón de diseño común entonces el resultado es un sitio web.

Existen más elementos HTML no cubiertos aquí tales como

Tablas
Imagenes
Objetos y applets
Marcos
Formularios
Hojas de estilo

Vamos a postergar esta tarea para un artículo futuro. Visita el siguiente enlace para leer más: HTML 4.01

Otros recursos:

El Chequeador HTML de W3C validará tu código HTML e informará sobre cualquier incidente

El Chequeador CSS de W3C validará tu código CSS e informará sobre cualquier incidente