Dedicale un poco de tiempo al HTML y veras como lo aprendes completo y sin dificultades.


Antes de Empezar


Recomendaciones

Para realizar tu pagina Web necesitas en principio un editor de textos para escribir los ficheros que la compondran.

Simplemente usando el NOTEPAD de Windows o el EDIT del MS-DOS puedes realizar tus páginas Web, ya que una pagina Web es simplemente un texto alque se le añaden diferentes plabras clave (directivas) con el objeto de indicar diferentes propiedades. De cualquier manera existen editores específicos para realizar paginas Web. Dichos editores permiten por medio de menus e iconos incluir directivas de HTML sin necesidad de teclearlas. Es decir, para poner un texto en cursiva en una pagina Web deberiamos escribir la instrucción:<I>Texto</I>


En un editor de Html, simplemente marcaríamos el texto con el raton y pulsariamos el icono de cursiva, el editor de encargaria de poner automaticamente las directivas <I></I>.

Existen muchos y muy variados editores de HTML, puedes bajar a tu ordenador alguno de ellos desde la pagina Web de Solo Windows'95.Cuando escribas tu paginas Web te recomiendo que todos los links, nombres de graficos, etc.. los consignes en letra minúscula ya que la mayoria de los servidores Web distinguen entre mayusculas y minusculas. Es decir, las directivas :
<IMG SRC="dibujo.gif">
<IMG SRC="Dibujo.Gif">
hacen referencia a ficheros distintos, aunque en tu disco duro haran referencia al mismo fichero, ya que Windows no distingue entre mayusculas y minusculas. Asi que procura escribir correctamente estos nombres.



Publicar tu web

Una vez tengas tus paginas listas para ser publicadas en Internet, necesitaras un servidor de paginas Web donde alojarlas. Un servidor Web es un ordenador que esta permanentemente conectado a Internet, por lo que situando nuestras paginas en el, estas seran accesibles a todo el mundo. Generalmente los proveedores de Internet ofrecen a sus clientes espacios Web gratuitos para publicar paginas personales.

Geocities te ofrece la posibilidad de publicar tu pagina Web de forma totalmente gratuita de hasta 2 Mb. Para ello solo necesitas tener acceso a internet y disponer de una direccion de correo electronico (e-mail). Los pasos para obtener el espacio en el servidor de Geocities son los siguientes :1º) Accede a la URL http://www.geocities.com/join.
2º) Marca la opcion "Free Personal Home Page Program" y pulsa el boton "JOIN" que se encuentra al final de la pagina.
3º) Rellena con tus datos el formulario que te aparecera en la pagina siguiente. Es MUY IMPORTANTE escribir correctamente la direccion de e-mail, y recordar el "nombre de usuario". Una vez rellenado el formulario pulsa sobre el boton "I AGREE" situado al final de la pagina.
4º) La siguiente pagina te pregunta si deseas recibir informacion periodica sobre diversos temas. Yo personalmente te aconsejo que marques todo como "NO". Pulsa a continuacion sobre el boton "SUBMIT" que se encuentra al final de la pagina.
5º) La siguiente pagina nos pregunta el area de interes, o sea, de que va a tratar nuestra pagina. Marcar lo deseado y pulsar el boton "CONTINUE".
6º) En funcion del area de interes se nos ofrecen las comunidades donde podemos albergar nuestras paginas. (el nombre de la comunidad formara parte de la direccion web de la pagina, p.ej. www.geocities.com/comunidad/numero) Escoger la que deseemos y pulsar el boton "CONTINUE".
7º) En la siguiente pagina se nos muestran las direcciones "libres" dentro de la comunidad escogida. Marcamos la que mas nos guste y pulsamos el boton "Move Me In!"
8º) Si la direccion escogida ya estuviese ocupada, se nos vuelve a mostrar la pagina de direcciones libres, escoger otra y volver a pulsar el boton "Move Me In!"
9º) Se nos muestra la pagina de bienvenida a Geocities. Debemos esperar a que Geocities nos envie por e-mail la password para poder empezar a enviar ficheros a nuestra pagina, cosa que haremos desde la utilidad "File Manager" situada en la pagina http://www.geocities.com/members/
Tu direccion en Geocities sera la formada por tu "comunidad" escogida y tu "numero", por ejemplo si has escogido como "comunidad" Heartland/Hills y el numero escogido fue el 5198, tu URL seria :
http://www.geocities.com/Heartland/Hills/5198



De nada sirve tener tu pagina Web en Internet si su direccion no la conoce nadie. Es muy importante "publicitar" tu pagina para que la vean otras personas. En principio es aconsejable incluir la URL de tu pagina Web en todos los correos que envies. Asmimismo debes dar de alta la direccion de tu pagina en los principales buscadores. En la pagina AUTOREGISTRALO podras registrar de una manera comoda tu pagina Web en los principales buscadores.

2- Divisiones de un documento HTML


2.1- Cabecera del documento

La directiva <HEAD></HEAD> delimita la cabecera del documento. Dentro de la cabecera es importante definir el título de la página por medio de la directiva <TITLE></TITLE>. Este título será el que aparezca en la barra de nuestro visor de páginas Web.

Ejemplo :


<TITLE>La página Web de AcMark</TITLE>
 

Dentro de la cabecera de nuestro documento podemos incluir otras directivas adicionales. La directiva <META> indica al visor de Internet las palabras clave y contenido de nuestra página Web. Muchos de los buscadores de páginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la página en sus bases de datos. La directiva <META> lleva generalmente dos parámetros, name y content.


Ejemplos :

<META name="Pagina de Jose" content="Mi pagina personal, Musica y Peliculas">
 
Indica al visor el nombre de la página y sus contenidos principales.


<META name="keywords" content="Jose musica peliculas links españa">

Indica al visor las palabras clave para los buscadores de Internet.


Otro uso de la directiva <META> es la de indicar documentos con "refresco automático". Si se indica una URL se sustituirá el documento por el indicado una vez transcurridos el número de segundos especificados. Si no se incluye ninguna URL se volverá a cargar en el visor el documento en uso transcurridos los segundos indicados. Esto es util para páginas que cambian de contenido con mucha frecuencia o para redireccionar a la persona que visita nuestra pagina Web a una nueva dirección donde se encuentra una versión actualizada de nuestra pagina Web.


Ejemplo :

<META http-equiv="refresh" content="15;URL=http://www.microsoft.com">

Transcurridos 15 segundos se accederá a la pagina Web de Microsoft.


La directiva <BASE> indica la localización de los ficheros, gráficos, sonidos, etc... a los que se hace referencia en nuestra página Web. Si no se incluye esta directiva el visor entiende que dichos elementos se encuentran en el mismo lugar donde se encuentra nuestra página Web.


Ejemplo :

<BASE href="http://www.jet.es/jose/">




2.2- Cuerpo del documento

La directiva <BODY></BODY> indica el inicio y final de nuestra pagina Web. Será entre el inicio y el final de esta directiva donde pongamos los contenidos de nuestra página, textos, gráficos, enlaces, etc.... Esta directiva tiene una serie de parámetros opcionales que nos permiten indicar la "apariencia" global del documento :


background= "nombre de fichero grafico"
Indica el nombre de un fichero gráfico que servirá como "fondo" de nuestra página. Si la imagen no rellena todo el fondo del documento, esta sera reproducida tantas veces como sea necesario.


bgcolor = "codigo de color"
Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parámetro background.

text = "codigo de color"
Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro.

link = "codigo de color"
Indica el color de los textos que dan acceso a un Hyperenlace. Por defecto es azul.

vlink = "codigo de color"
Indica el color de los textos que dan acceso a un Hyperenlace que ya hemos visitado con nuestro visor. Por defecto es purpura.

El codigo de color es un numero compuesto por tres pares de cifras hexadecimales que indican la proporcion de los colores "primarios", rojo, verde y azul. El codigo de color se antecede del símbolo #.


Ejemplos :

#000000  --> Color Negro
#FF0000  --> Color Rojo
#00FF00  --> Color Verde
#0000FF  --> Color Azul
#FFFFFF   --> Color Blanco

El primer par de cifras indican la proporción de color Rojo, el segundo par de cifras la proporcion de color Verde y las dos ultimas la proporcion de color Azul. Cada par de cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las proporciones de cada color primario obtendremos diferentes colores.

De cualquier forma la mayoría de los editores de HTML nos permiten obtener el código de color correspondiente escogiendo directamente el color de una paleta.

3.2- Espaciados y saltos de linea

En HTML solo se reconoce un espacio entre palabra y palabra, el resto de los espacios seran ignorados por el visor.


Ejemplo:
Esto     es    una      frase

Se vera como:
Esto es una frase  


Asimismo tampoco se respetan las tabulaciones, retornos de carro etc... Para ello existen una serie de directivas que indican estos codigos. La directiva <PRE></PRE> obliga al visor a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc..


Ejemplo:
<PRE>
Este texto      ha sido
     preformateado  .

</PRE>

Se vera como:
Este texto       ha sido
     preformateado   .
 

Para indicar un salto de linea se utiliza la directiva <BR> y para un cambio de parrafo (deja una linea en blanco en medio) se utiliza la directiva <P>.


Ejemplo:
Este texto tiene<BR>saltos de linea y <P> de párrafo.  

Se vera como:
Este texto tiene
saltos de linea y
 
de párrafo.
 

La directiva <P> puede usarse tambien como directiva "cerrada" <P></P> indicando de esta manera los atributos de un parrafo en concreto. Cuando se usa de esta manera tiene el parametro align que indica al visor la forma de "justificar" el parrafo. Los valores posibles de este parametro son LEFT, RIGHT y CENTER, estando aun en estudio el valor JUSTIFY.


Ejemplo:
<P Align=right>Este es un ejemplo de un parrafo de texto justificado a la derecha.</P>

Se vera como:

Ejemplo:
<P Align=center>Este es un ejemplo de parrafo de texto centrado.</P>

Se vera como:



La directiva <HR> muestra una linea horizontal de tamaño determinable. Tiene los siguientes parámetros opcionales :

align = posicion
Alinea la linea a la izquierda (left), a la derecha (right) o la centra (center).

noshade
No muestra sombra, evitando el efecto en tres dimensiones.

size = numero
Indica el grosor de la linea en pixels.

width = num / %
Indica el ancho de la linea en tanto por ciento en función del ancho de la ventana del visor. Tambien se puede especificar un número que indicaría el ancho de la línea en pixels.

Ejemplo :
<HR align=center size=20 width=50%>



-------------------------------------------------------------

La directiva <HR> sin ningun parámetro mostraría una linea horizontal que ocuparia todo el ancho de la página. Estas líneas sencillas son las que ves en este manual para separar las diferentes secciones

-------------------------------------------------------------

3.4- Listas de elementos


Existen tres tipos de listas, numeradas, sin numerar y de definición. Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos segun el lugar que ocupan en la lista. Para este tipo de lista se utiliza la directiva <OL></OL>. Cada uno de los elementos de la lista irá precedido de la directiva <LI>. La directiva <OL> puede llevar los siguientes parámetros:


start = num
Indica que número será el primero de la lista. Si no se indica se entiende que empezará por el número 1.

type = tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada numéricamente.

Los tipos posibles son :
1 = Numéricamente. (1,2,3,4,... etc.)
a = Letras minúsculas. (a,b,c,d,... etc.)
A = Letras mayúsculas. (A,B,C,D,... etc.)
i = Numeros romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)


Ejemplo:
<OL>
<LI>España
<LI>Francia
<LI>Italia
<LI>Portugal
</OL>

Resultado:
1. España
2. Francia
3. Italia
4. Portugal


Las listas sin numerar representan los elementos de la lista con un "topo" o marca que antecede a cada uno de ellos. Se utiliza la directiva <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. La directiva <UL> puede contener el parámetro type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk, circle o square, con lo que el topo o marca puede ser un disco, un circulo o un cuadrado.


Ejemplo:
<UL type = disk >
<LI>España
<LI>Francia
<LI>Italia
</UL>
 
Resultado:

• España
• Francia
• Italia

Las listas de definición muestran los elementos tipo Diccionario, o sea, término y definición. Se utiliza para ellas la directiva <DL></DL>. El elemento marcado como término se antecede de la directiva <DT>, el marcado como definición se antecede de la directiva <DD>.


Ejemplo:
<DL>
<DT>WWW
<DD>Abreviatura de World Wide Web
<DT>FTP
<DD>Abreviatura de File Transfer Protocol
<DT>IRC
<DD>Abreviatura de Internet Relay Chat
</DL>

Resultado:
WWW
       Abreviatura de World Wide Web
FTP
       Abreviatura de File Transfer Protocol
IRC
       Abreviatura de Internet Relay Chat


Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio se comportan igual que las listas sin numerar. La lista de Menú utiliza la directiva <MENU></MENU> y los elementos se anteceden de <LI> El resultado es una lista sin numerar mas "compacta" es decir, con menos espacio interlineal entre los elementos. La lista de Directorio utiliza la directiva <DIR></DIR> y los elementos se anteceden de <LI>. Los elementos tienen un limite de 20 caracteres.

Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo "indice de materias".

Ejemplo:
<UL type= disk>
<LI>Buscadores
<UL>
<LI>Yahoo
<LI>Google
</UL>
<LI>Links
<UL>
<LI>IBM
</UL>
</UL>

Resultado:

• Buscadores

• Lycos
• Google

• Links
  • IBM

3.6- Hyperenlaces


La característica principal de una página Web es que podemos incluir Hyperenlaces. Un Hyperenlace es un elemento de la página que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc..

Para incluir un Hyperenlace se utiliza la directiva <A></A>. El texto o imagen que se encuentre dentro de los límites de esta directiva será sensible, esto quiere decir que si pulsamos con el raton sobre el, se realzará la funcion de hyperenlace indicada por la directiva <A></A>. Si el Hyperenlace esta indicado por un texto, este aparecerá subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde rodeándola. Esta directiva tiene el parámetro href que indica el lugar a donde nos llevará el Hyperenlace si lo pulsamos.


Ejemplo:
<A href="http://www.prehackers.com/"> Pulse para ir a la página de Prehackers</A>

Se vera:
Pulse para ir a la página de Prehackers


Si situamos el ratón encima de la frase y pulsamos, el navegador accederá a la página Web indicada por el parámetro href, es decir, accederá a la página situada en http://www.microsoft.com/

Lo mismo podríamos hacer con un gráfico.


Ejemplo:
Gran web sobre hacking en Internet:
<A href="http://usuarios.lycos.es/thecreature/creature-prehackers.gif">
<IMG src="yahoo.gif"></A>

Se vera como:
Gran web sobre hacking en Internet:



Pulsando sobre la imagen se accedería a la pagina situada en http://www.prehackers.com/.

Un Hyperenlace tambien puede llevarnos a una zona de nuestra página. Para ello debemos marcar en nuestra pagina las diferentes secciones en las que se divide. Lo haremos con el parametro name.

Ejemplo:
<A name = "seccion1"></A>  

Esta instrucción marca el inicio de una sección dentro de nuestra página. La sección se llamará seccion1. Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la siguiente forma :


<A href="#seccion1">Primera Parte</A>  

O tambien :
<A href="http://www.jet.es/mipagina.htm#seccion1">Primera Parte</A>  

Un Hyperenlace puede hacerse a cualquier tipo de fichero. Con las directivas anteriores hemos visto como hacer enlaces a páginas Web o secciones dentro de una página web, pero podríamos hacer un Hyperenlace a un grupo de noticias, o a otro servicio de Internet.


Ejemplo:
<A href="news://news.actualidad.es/">Noticias de actualidad</A>  

Asimismo podemos hacer que el Hyperenlace de como resultado el envío de un correo electrónico a una dirección de correo determinada.


Ejemplo:
<A href="mailto: luisfd@jet.es">Envíame tus sugerencias</A>  

También podemos realizar un Hyperenlace a un fichero cualquiera. En este caso el navegador intentará "ejecutar" el fichero, y si no puede hacerlo nos preguntará si deseamos grabarlo en nuestro ordenador. Esta es una forma sencilla de permitir a los visitantes de nuestra página copiar ficheros a su ordenador.


Ejemplo:
<A href="winzip.zip">Pulsa aqui para llevarte un ZIP.</A>
 
Pulsa aqui para llevarte un ZIP.

El parámetro onMouseOver permite que se muestre en la barra inferior del navegador un texto explicativo sobre el Hyperenlace, en vez de mostrar su direccion. Este parametro no funciona en todos los navegadores.


Ejemplo:
<A href="winzip.zip" onMouseOver="window.status='Este link copia el manual a tu disco duro'; return true;">Pulsa aqui para llevarte una copia del manual.</A>