Las siglas HTML significan HyperText Markup Language, lo que para nosotros quiere decir que es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows).
Un enlace es una zona de texto o gráficos que si son seleccionados nos trasladan a otro documento de hipertexto o a otra posición dentro del documento actual. Siendo HTML el lenguaje habitual en Internet, la diferencia que posee con respecto a otros tipos de hipertexto es que ese otro documento puede estar físicamente en la otra punta del planeta. Son los enlaces lo que hacen de la telaraña o World Wide Web lo que es.
La etiqueta <A>
Para incorporar un enlace hay que utilizar esta etiqueta. Todo lo que encerremos entre <A> y </A>, ya sea texto o imágenes, será considerado como enlace y sufrirá dos modificaciones:
- Se visualizará de manera distinta en el navegador. El texto aparecerá habitualmente subrayado y de un color distinto al habitual, y las imágenes estarán rodeadas por un borde del mismo color que el del texto del enlace.
- Al pulsar sobre el enlace, seremos enviados al documento que apuntaba el enlace.
Para que el enlace sirva para algo debemos especificarle una dirección. Lo haremos de la siguiente manera: <A HREF="direccion">Pulsar aquí</A>
La dirección estará en formato URL (Uniform Resource Locator).
Las URLs
Una URL nos indica tanto una dirección de Internet como el servicio que esperamos nos ofrezca el servidor al que corresponde la dirección. Tiene el siguiente formato:
servicio://máquina:puerto/ruta/fichero@usuario
donde el servicio podrá ser uno de los siguientes:
http
Es el servicio invocado para transmitir páginas web y el que usaremos normalmente en los enlaces.
https
Es una innovación sobre el anterior, que nos permite acceder a servidores seguros, que nos ofrecen el uso de técnicas de enciptación para proteger los datos que intercambiemos con él de terceras personas. Por ejemplo, operaciones con bancos o acceso a SUMA en la universidad de Murcia.
ftp
Permite trasmitir ficheros desde servidores de ftp anónimo. Si no le pedimos un fichero sino un directorio, en general el navegador se encargará de mostrarnos el contenido del mismo para que podamos escogerlo cómodamente. Utilizando la @ podremos acceder a servidores privados, donde es preciso disponer de clave y palabra de paso.
mailto
Para poder mandar un mensaje de correo electrónico.
news
Para poder acceder a foros de discusión (grupos de noticias). Se indica el servidor y el grupo. Por ejemplo news://news.ibernet.es/es.comp.demos nos conectaría con el foro es.comp.demos en el servidor nacional de Telefónica.
telnet
No es implementado generalmente por los navegadores, que suelen invocar un programa externo. Nos permite conectarnos con otros ordenadores y entrar en ellos como si nuestro ordenador fuese una terminal del mismo. Habitualmente se requiere el acceso con claves.
La dirección de la máquina puede ser, o bien una serie de cuatro números entre 0 y 255 (ej. 123.3.5.65) o bien algo más fácil de recordar como es una serie de palabras separadas por puntos (www.um.es). El puerto generalmente no se indica, ya que el servicio predetermina uno.
La ruta es una serie de directorios separados por el símbolo /, que es el utilizado en LINUX (el sistema operativo más extendido en los servidores de Internet). Existe otro formato de URL. Cuando queremos acceder a un fichero situado en la misma máquina que la página web que estamos creando podemos utilizar este formato, ruta_relativa/fichero En la ruta relativa podremos utilizar dos puntos (..) para acceder al directorio padre o comenzar con la barra diagonal (/) para acceder a una ruta absoluta dentro de nuestro ordenador.
Listas
Existen varios tipos de listas en HTML. Todas ellas se pueden meter unas dentro de otras formando árboles. Todos los tipos siguen el siguiente formato:
<tipo_lista>
<LI>Primer elemento
<LI>Segundo elemento
</tipo_lista>
tipo_lista puede ser una de las siguientes: DIR, DL, MENU, OL y UL.
Listas desordenadas La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno. Cada elemento de la lista irá normalmente precedido por un círculo. Por ejemplo,
<UL>
<LI>Primer elemento
<LI>Segundo elemento
</UL>
se verá como
- Primer elemento
- Segundo elemento
La etiqueta <UL> admite estos parámetros:
|
Parámetro |
Utilidad |
Resultado |
|
COMPACT |
Indica al navegador que debe representar la lista de la manera más compacta posible. |
- Primer elemento
-
Segundo elemento |
|
TYPE="disc", "circle", "square" |
Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>. |
|
También son listas desordenadas aquellas que utilizan las etiquetas <DIR> y <MENU>. En principio tenían como propósito representar una lista estilo directorio (multicolumna) o tipo menú (una sola columna). En la práctica los navegadores lo han implementado como sinonimos de <UL>.
Listas ordenadas
La etiqueta <OL> nos permite presentar listas de elementos ordenados de menor a mayor. Normalmente cada elemento de la lista irá precedido por su número en el orden. Por ejemplo,
<OL>
<LI>Primer elemento
<LI>Segundo elemento
</OL>
se verá como
-
Primer elemento
-
Segundo elemento
La etiqueta <OL>admite estos parámetros:
|
Parámetro |
Utilidad |
Resultado |
|
COMPACT |
Indica al navegador que debe representar la lista de la manera más compacta posible. |
-
Primer elemento
-
Segundo elemento |
|
TYPE="1", "a", "A", "i", "I" |
Indica al navegador el tipo de numeración que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>. |
- Tipo 1
- Tipo a
- Tipo A
- Tipo i
- Tipo I
|
|
START="num" |
Indica al navegador el número por el que se empezará a contar los elementos de la lista. |
- Primer elemento
- Segundo elemento
|
|
VALUE="num" |
Atributo de <LI>, actúa como START pero a partir de un elemento predeterminado. |
- Primer elemento
- Segundo elemento
- Tercer elemento
|
Listas de definiciones
Este es el único tipo de lista que no utiliza la etiqueta <LI>. Al tener como objetivo presentar una lista de definiciones, de modo que tiene que representar de manera distinta el objeto definido y la definición. Esto se hace por medio de las etiquetas <DT> y <DD>:
<DL>
<DT>Primer elemento<DD>Es un elemento muy bonito.
<DT>Segundo elemento<DD>Este, en cambio, es peor.
Imágenes
Para incluir gráficos e imágenes en nuestras páginas se utiliza la etiqueta <IMG>de esta manera:
<IMG SRC="fichero_grafico" ALT="descripcion"> El parámetro SRC especifica el nombre del fichero que contiene el gráfico. Los formatos estándar en la red son el GIF y el JPG. La últimas versiones de Mozilla y Explorer aceptan también el formato PNG.
El parámetro ALT especifica el texto que se mostrará en lugar del gráfico en aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de que el usuario haya desactivado la aparición de gráficos. Algunos navegadores lo muestran al pasar el ratón por encima de la imagen. Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo. De hecho, el stándar HTML 4.0 obliga a hacerlo.
Existen dos atributos que, aunque opcionales, conviene indicar: la altura y la anchura del gráfico en pixeles. De este modo, el navegador puede mostrar un recuadro del tamaño de la imagen mientras la va leyendo de la red y así poder mostrar el resto de la página correctamente mientras tanto.
<IMG SRC=../img/Mozilla.PNG" ALT="Icono" WIDTH=60 HEIGHT=60>
Se ve así:
Imágenes y enlaces
Suele ser común incluir enlaces dentro de un gráfico. En ese caso, por defecto, los navegadores le pondrán un borde al gráfico para indicar que efectivamente es un enlace. Práctico, pero la mayoría de las veces bastante poco estético. Por medio del parámetro BORDER podremos alterar el grosor de ese borde o incluso eliminarlo poniéndolo a cero.
<A HREF="http://www.mozilla.org"> <IMG SRC="../IMGTEORIA/Mozilla.PNG" ALT="Mozilla" WIDTH=60 HEIGHT=60>
</A>
Se ve así:
Sin embargo,
<A HREF="http://www.mozilla.org"><IMG SRC="../IMGTEORIA/Mozilla.PNG" ALT="Mozilla" WIDTH=60 HEIGHT=60 >BORDER=1</A>
Se ve así:
Alineación respecto al texto
Para poder maquetar conjuntamente texto y gráficos, el HTML proporciona, por medio del parámetro ALIGN, las siguientes maneras de alinear una imagen respecto del texto que la acompaña:
|
Valor de ALIGN |
Utilidad |
Resultado |
|
TOP |
Coloca el punto más alto de la imagen coincidiendo con más alto de la línea de texto actual. |
Este es el texto |
|
MIDDLE |
Alinea el punto medio (en altura) de la imagen con la base del texto. |
Este es el texto |
|
BOTTOM(Por defecto) |
Alinea el punto más bajo de la imagen con la base del texto. |
Este es el texto |
|
LEFT |
Coloca la imagen a la izquierda del texto. |
Este es el texto |
|
RIGHT |
Coloca la imagen a la derecha del texto. |
Este es el texto |
Hay que aclarar que la base del texto es la línea donde descansan casi todas las letras del alfabeto excepto algunas como la p, la g o la j.
Formateo fino
Lo ideal cuando se trabaja con un texto sería poder cambiarlo al tamaño más adecuado, ponerle colores llamativos y cambiar el tipo de letra. Todo esto se realiza mediante la etiqueta <FONT>.
Cambio de color
Para hacerlo vamos a utilizar el parámetro COLOR. La manera de especificarle el color es común a todas las etiquetas HTML: o bien indicando el nombre, si es un color normal, o bien especificando el porcentaje de rojo, verde y azul (código RGB) del mismo. Los colores reconocidos son los siguientes:
|
Black |
Silver |
Gray |
White |
Maroon |
Red |
Purple |
Fuchsia |
|
Green |
beige |
Olive |
Yellow |
Navy |
Blue |
Teal |
Aqua |
<FONT color="red">Estoy en rojo</FONT>>
El modo de indicar el color RGB es el siguiente:
<FONT COLOR="#FF0000">D</FONT> <FONT COLOR="#EF0000">E</FONT> <FONT COLOR="#DF0000">G</FONT> <FONT COLOR="#CF0000">R</FONT> <FONT COLOR="#BF0000">A</FONT> <FONT COLOR="#AF0000">D</FONT> <FONT COLOR="#9F0000">A</FONT> <FONT COLOR="#8F0000">D</FONT> <FONT COLOR="#7F0000">O</FONT>
Lo que nos mostraría lo siguiente:
DEGRADADO
La primera componente en hexadecimal es el rojo, la segunda el verde y la tercera el azul (Red Green Blue, RGB).
Tamaños del texto
El parámetro utilizado para indicar el tamaño es SIZE. Puede utilizarse para indicar tamaños absolutos:SIZE=1 SIZE=2 SIZE=3 SIZE=4 SIZE=5 SIZE=6 SIZE=7
El tamaño por defecto es 3. También se puede utilizar los modificadores + y - para indicar un incremento (o decremento) relativo del tamaño del tipo de letra. Así, por ejemplo, si indicamos que queremos un tamaño de -2 estaremos pidiendo al navegador que nos muestre el tipo de letra dos veces más pequeño.
Tipo de letra
Por último, podemos especificar el nombre del tipo de letra que queremos utilizar gracias al parámetro FACE. Como en principio no tenemos manera de saber que tipo de letra tiene instalado el ordenador del usuario que está viendo nuestras páginas, podemos indicar más de uno separado por comas. Si el navegador no encuentra ninguno seguirá utilizando el que tiene por defecto.
