I Fundamentos del HTML

1. Introduccin
La world wide web (la "telaraa" o "maraa mundial") tiene una
arquitectura cliente / servidor. Un programa cliente que se ejecuta en
tu ordenador (el navegador o browser) solicita informacin de un
programa servidor que se ejecuta en una mquina en cualquier otro
lugar. El servidor enva la informacin solicitada de vuelta a trav!s de
la red al programa navegador" el cual la interpreta para mostrarla en
la pantalla.
#ara que el intercam$io de informacin entre el cliente % el servidor
se realice de acuerdo a unos parmetros que am$os puedan
entender" se utili&an protocolos de comunicaciones. 'nternet se
fundamenta en el protocolo ()#/'#" so$re el cual se constru%en otros
protocolos de aplicacin. En el caso de la world wide web" el protocolo
utili&ado es el *((# (Hipertext Transfer Protocol).
)uando el navegador reci$e la informacin" la interpreta para
mostrarla en la pantalla. Las pginas que se visuali&an estn
formadas" fundamentalmente" por te+tos e imgenes" con una
estructura % un formato especficos. El HTML (Hipertext Markup
Language) es lo que nos permite decirle al navegador cmo
debe mostrar la informacin: formato de los textos, colores,
orden de los prrafos, etc!
, menudo o$servamos como una misma pgina puede visuali&arse de
manera diferente (colores" anc-o de ta$las" formato de te+tos" etc.)
en funcin del navegador que se utilice. el *(/L no es una forma de
codificar la informacin" sino de especificar el formato que de$e darse
a la informacin. #or ejemplo" podemos transmitir la pala$ra "0*ola1"
que tenemos guardada en un fic-ero de te+to. #ero" 2cmo decirle al
navegador que la muestre de color rojo % centrada3 El *(/L es la
respuesta.
Tarea: investiga sobre Worl Wide Web su historia y su Protocolo
HTTP sobre Internet su historia y su !rotocolo T"P#IP.
$. %l conce!to de eti&ueta 'tag(
El *(/L descri$e el aspecto visual que de$e tener una pgina
mediante la utili&acin de etiquetas (tags). Las etiquetas le indicarn
al navegador la posicin relativa de los elementos de la pgina" su
tamao" las tipografas % colores a utili&ar" etc.
Las etiquetas son como instrucciones que le indican al
navegador como mostrar la informacin! Existen dos clases de
etiquetas:
"! Etiquetas vac#as
(iene el siguiente formato.
<etiqueta>
4e utili&an para introducir saltos de lnea" lneas -ori&ontales" % otros
elementos no asociados al formato de te+tos o imgenes. #or
ejemplo.
<BR> 'nserta un interlineado suave. )rea otra lnea
<HR> 'nserta una Linea -ori&ontal
""! Etiquetas contenedoras
(ienen el siguiente formato.
<etiqueta> ... </etiqueta>
Estas etiquetas dan un formato al texto o porcin del
documento que engloban. Este tipo de etiquetas tiene una marca
inicial" % una marca final igual que la inicial" pero con el caracter "/".
(odo lo que est! contenido entre am$as marcas quedar sujeto al
formato indicado por la etiqueta. #or ejemplo" podemos mostrar la
pala$ra "0*ola1" en cursiva de la siguiente forma.
<i>Hola!</i>
La ma%ora de estas etiquetas pueden" a su ve&" contener otras
etiquetas" de cualquiera de los dos tipos. #or ejemplo" para mostrar la
pala$ra "0*ola1" en cursiva % negrita.
<i><b>Hola!</b></i>
). %l conce!to de argumento
Las etiquetas pueden especificar" por ejemplo" que cierta pala$ra
apare&ca en negrita. #ero si queremos que cierta pala$ra apare&ca de
color rojo" necesitamos suministrar un parmetro. el color. La
ma$or#a de las etiquetas tienen parmetros para indicar
m%ltiples aspectos del formato, como el color, el tama&o, la
posicin, etc!
El formato de una etiqueta con parmetros es el siguiente:
<etiqueta parametro1="valor1" parametro2="valor2" ... > ...
</etiqueta>
#or ejemplo" para mostrar la pala$ra "0*ola1" en rojo" utili&amos la
etiqueta font con el parametro color igual a red.
<font color="red">Hola!</font>
*. Mi !rimera !+gina
(oda pgina *(/L de$e comen&ar por la etiqueta '(tml) % terminar
con '*(tml). (odo lo que figure entre estas etiquetas ser
interpretado por el navegador como un documento *(/L. Lo que
quede fuera de ellas ser" en la ma%ora de los casos" ignorado.
El documento *(/L se divide siempre en dos partes. ca$ecera %
cuerpo.
*.1. "abecera
La ca$ecera figura entre las etiquetas '(ead) % '*(ead). En ella
se especifica el ttulo" el autor" % otras caractersticas del documento
que no se muestran fsicamente en la pgina % que sirven para
facilitar su inde+acin (son lo que se conoce como meta tags). En la
ca$ecera tam$i!n de$en incluirse los scripts que necesite el
documento (5ava4cript" 54cript" etc.) % las definiciones de estilos (si
se utili&an -ojas de estilos).
Tarea: investiga sobre ms etiquetas de la cabecera
*.$. "uer!o
El cuerpo es la parte del documento que se coloca entre las etiquetas
'bod$) % '*bod$). En esta parte se inclu%e la pgina propiamente
dic-a.
(eniendo esto en cuenta podemos construir %a nuestra primera
pgina *(/L con los elementos mnimos necesarios para que sea
interpretada correctamente por un navegador.
<html>
<head>
<title>Mi primera pagina HTML</title>
</head>
<body>
Mi primera pgina HTML
</body>
</html>
|
II Insercin de te,tos
1. "reacin de !+rra-os
(oda pgina *(/L est compuesta" principalmente" por prrafos de
te+to com$inados con otros elementos" como pueden ser imgenes"
ta$las o formularios. La insercin de prrafos se reali&a mediante la
utili&acin de la etiqueta <p> % su correspondiente cierre" </p>.
La separacin entre los prrafos queda prefijada al utili&ar las
etiquetas anteriores" aunque depender del navegador con el que se
muestre la pgina. 4in em$argo s podemos modificar la justificacin
del te+to mediante el parmetro align" que puede tomar los valores
left (alineacin i&quierda)" center (alineacin centrada) % right
(alineacin derec-a).
4i se desea dejar poco espacio entre prrafos se pueden insertar
saltos de lnea mediante la etiqueta <br>. , diferencia del tag
<p> ... </p>" esta etiqueta no tiene cierre.
6amos a ver un ejemplo de lo descrito anteriormente.
<html><head>
<title>Ejemplo de creacin de prrafos</title>
</head>
<body>
<p align="right">Prrafo alineado a la derecha.</p>
<p align="center">Prrafo centrado.</p>
<p >Prrafo alineado a la izquierda...<br>y pegado e esta otra
lnea.</p>
</body></html>
El resultado del cdigo anterior es el siguiente.
$. .ando -ormato al te,to
#ara controlar las tipografas" colores % tamaos de los te+tos de tu
pgina puedes utili&ar la etiqueta <font> ... </font>. Este tag est
siendo reempla&ado por la utili&acin de -ojas de estilos ()44)" pero
para usuarios poco avan&ados es mejor comen&ar utili&ando la
etiqueta <font>" ms fcil de entender % de implementar.
#ara elegir el tipo de letra. que desea utili&ar en un prrafo" $asta
con incluirlo entre <font face="tipo-letra"> ... </font>. #or
ejemplo" si queremos escri$ir 0*ola1 con letra )entur% 7ot-ic
utili&amos el siguiente cdigo.
<p><font face="Century Gothic">Hola!</font></p>
Lo que resulta en.
Hola!
4i queremos cambiar el color emplearemos <font color="color">
... </font>" donde color es un n8mero que indica el color. Este
n8mero est codificado en -e+adecimal" % utili&a 9:; bits para cada
uno de los colores primarios (rojo" verde % a&ul). En -e+adecimal con
dos caracteres (de < a = % de la , a la >) se representan valores de
9:; bits. ,s" el color $lanco se e+presa como #FFFFFF % el negro
como #000000. )omo se aprecia" este sistema es poco intuitivo" por lo
que se pueden usar las nomenclaturas estndar de los colores en
ingl!s (red" para el rojo" black para el negro" etc.)" pero este sistema
es menos fle+i$le % ms dependiente del navegador.
6eamos un ejemplo.
<p><font color="red">Hola!</font></p>
?ue resulta en.
0*ola1
>inalmente" si lo que queremos es modificar el tamao" le etiqueta a
usar es <font size="tamao"> ... </font>" donde tamao es un
n8mero que puede indicar el tamao a$soluto (con rango de @ a A) o
el relativo. #or ejemplo" si se utili&a size="2" el te+to se mostrar en
tamao 9. 4i se utili&a size="+2"" se le indica al navegador que
muestre el te+to 9 veces ms grande que el tamao por defecto
definido.
El siguiente ejemplo
<p><font size="5">Hola!</font></p>
muestra el te+to con el siguiente tamao.
0*ola1
#or supuesto" e+iste la posi$ilidad de com$inar los B modificadores
anteriores en un mismo tag 'font)" para especificar el tamao" color
% tipo de letra de una sola ve&. En este ejemplo
<p><font face="Courier" color="red" size="4">Hola!</font></p>
indicamos que el te+to de$e escri$irse con tipografa courier" color
rojo % tamao C" lo que resulta en.
Hola!
III Insercin de im+genes
1. Formatos de im+genes
,unque algunos navegadores soportan otros formatos de imgenes"
fundamentalmente se utili&an los 9 que originalmente soportaron
Detscape % /osaic (uno de los primeros navegadores).
1.1. /IF 'Graphics Interchange Format(
El formato 7'> (Graphics Interchange Format" >ormato de
'ntercam$io de 7rficos) es un formato propietario de )ompu4erve
'nc. cu%a especificacin data de @=EA. Este formato se caracteri&a por
limitar la profundidad del color a 9:; colores % por poseer un sistema
de compresin rudimentario ($asado en el algoritmo LFG) que es
efectivo 8nicamente cuando los colores de la imagen son planos (sin
e+istencia de m8ltiples transiciones de color). He esta forma" es el
formato ideal para iconos" diagramas % grficas.
Itra de sus caractersticas es la posi$ilidad de crear imgenes 7'>
entrela&adas. Esto quiere decir que la informacin de la imagen se
almacena por filas no consecutivas" permitiendo una visuali&acin
progresiva de la imagen completa pero con poca resolucin. 4eg8n se
va descargando la totalidad de la misma" va aumentando la
resolucin" -asta que se tiene la imagen final.
#ero lo que ms juego -a dado del formato 7'> es la posi$ilidad de
crear pequeas animaciones (7'>s animados). 4e $asa en el
almacenamiento en un mismo fic-ero de imagen de varios
fotogramas. El formato inclu%e la definicin de los tiempos entre cada
fotograma. , pesar de ser la forma ms sencilla de crear
animaciones" no es la ms ptima en cuanto a tamao % calidad" por
lo que queda limitado a iconos % pequeos efectos visuales.
1.$. 0P%/ 'Joint Photographic Experts Group(
El estndar 5#7 (Joint Photographic Experts Group) surge con la
necesidad de crear un formato de almacenamiento de imgenes con
calidad similar a la de una fotografa % con un alto grado de
compresin (para reducir el tamao de los arc-ivos). He esta forma"
este formato soporta @; millones de colores % es ideal para imgenes
con multitud de colores" como fotografas.
El formato permite seleccionar el grado de compresin de la imagen"
lo que es ideal para lograr tamaos de arc-ivo ptimos. El algoritmo
de compresin que utili&a es con p!rdidas" lo que implica que a ma%or
grado de compresin" menor es la calidad de la imagen. 4in em$argo"
% de$ido a las caractersticas del ojo -umano" determinadas p!rdidas
de calidad no son aprecia$les" por lo que se pueden conseguir
compresiones del :<J sin que se aprecie p!rdida de calidad.
$. Insercin de una imagen de -ondo
#ara insertar una imagen de fondo $asta con aadir un parmetro a la
etiqueta <body>. #or ejemplo.
<body background="fondo.jpg">
)on este ejemplo indicamos que el fondo de nuestra pgina sea la
imagen fondo!+pg. Esta imagen de$e e+istir en la misma carpeta que
contenga la pgina *(/L. 4i queremos ordenar los arc-ivos en
diferentes carpetas" podemos indicar dnde se encuentra nuestra
imagen. 6emoslo con otro ejemplo.
<body background="imagenes/fondo.jpg">
En este caso" la imagen est dentro de la carpeta imagenes.
(am$i!n es posi$le enla&ar con una imagen que est! en otro servidor"
especificando su UKL (ver apartado B para una e+plicacin del
concepto de UKL).
). Insercin de im+genes en el documento
#ara insertar una imagen en el documento se utili&a la etiqueta
<img>. #ara especificar la imagen a visuali&ar se utili&a el parmetro
src.
<img src="logo.gif">
La imagen aparecer en el lugar donde se encuentre la etiqueta.
/ediante el uso de otros parmetros podemos especificar la
alineacin del te+to alrededor de la imagen" el tamao de la misma %
otras caractersticas. 6amos a ver los ms utili&ados.
align. permite especificar la alineacin de la imagen % del te+to
alrededor de la imagen. #uede tomar los valores left" right" top"
texttop" middle" absmiddle" baseline" bottom" absbottom.
Ejemplos.
<img src="logo.gif" align="middle">Texto alineado en el
centro...
(e+to alineado en el centro...

<img src="logo.gif" align="bottom">Texto alineado abajo...
(e+to alineado a$ajo...

title. este parmetro permite especificar un texto, que se
muestra cuando el puntero del ratn pasa por encima de la
imagen! E+emplo:
<img src="logo.gif" title="Tutorial de HTML">
alt. el argumento de este parmetro se muestra mientras se
est cargando la imagen, $ en caso de que no pueda cargarse
permanece visible (de modo que el usuario pueda saber a qu,
(ace referencia esa imagen)! En los navegadores que no
soportan imgenes (por e+emplo, L$nx) aparece el texto
especificado en este parmetro en lugar de la imagen.
width / height. permiten especificar el tamao de la imagen (anc-o
% alto). 4i no se inclu%en" la imagen se muestra a su tamao real.
,unque se desee mostrar la imagen a tamao real" es conveniente
incluir estos parmetros para permitir que el navegador constru%a la
pgina antes de -a$er finali&ado la carga de todas las imgenes"
mostrando por lo menos el te+to del documento. Ejemplo.
<img src="logo.gif" width="150" height="100">
border. cuando una imagen es un enlace, por defecto, el
navegador la inclu$e en un marco o borde! -i no se desea que
apare.ca este borde, debe especificarse border="0"! Tambi,n
puede tomar una valor distinto de /, en cu$o caso representa
el tama&o (grosor) del borde!
I1 Las listas
HTML permite realizar listados numerados, sin numerar y listas para
definir.
1.Listas sin numerar
Para crear una lista sin numerar
1. Se empieza escribiendo un ta de apertura de lista 23L4
!. Se escribe el ta 2LI4 seuido por el t"rmino #ue se #uiera numerar
(no es necesario la eti#ueta de cierre$.
%. Se termina con el ta de cierre de la lista 2#3L4
He a#u& una lista de dos t"rminos'
23L4
2LI4(acultades
2LI4)nstitutos
2#3L4
$. Listas numeradas: una lista numerada (tambi"n llamada lista ordenada, de
a*& la denominaci+n de la marca$ es id"ntica a una lista sin numerar, e,cepto
#ue se usa 25L4 en luar de 23L4. -elante de los t"rminos se pone la marca
.L)/, #ue es la misma #ue se utiliza en las otras listas.
0l siuiente c+dio HTML' da el siuiente formato'
25L42LI4(acultad de -erec*o 1. (acultad de -erec*o
2LI4(acultad de Medicina !. (acultad de Medicina
2LI4(acultad de 1iencias2#5L4 %. (acultad de 1iencias
T2302' in4estiar type
Las listas de de-iniciones
5na lista de definici+n consiste en t"rminos alternati4os (abre4iados como -T$
y una definici+n (abre4iada como --$. 6ormalmente los bro7sers del 7eb dan
la definici+n en una nue4a l&nea.
He a#u& un e8emplo de una lista de definici+n'
2.L4
2.T4 264HTML2#64:
2..4Hy!erTe,t Mar7u! Language 88 HTML es un 9/ML .T.. 0n
t"rminos pr9cticos, es una colecci+n de estilos (indicados por tas (marcas$ de
mar:up$ #ue definen los componentes 4ariados de un documento ;orld ;ide
;eb.
2#.L4
0l resultado es'
HTML:
Hy!erTe,t Mar7u! Language 88 HTML es un 9/ML .T.. 0n
t"rminos pr9cticos, es una colecci+n de estilos (indicados por tas
(marcas$ de mar:up$ #ue definen los componentes 4ariados de un
documento ;orld ;ide ;eb.
0<031)1)= 1=-)()12 0ST0 0<0MPL= 1=6 ! 0L0M06T=S M2S
Tanto la marca .-T/ como la marca .--/ !ueden contener
m:lti!les !+rra-os 'basta con se!ararlos con las marcas indicativas de
!+rra-o .P/ ( listas o cual&uier otra in-ormacin en la de-inicin.
"omentarios.8 Para incluir un comentario en un documento HTML, es decir,
una aclaraci+n #ue no aparece en la presentaci+n final del documento, se
encierra el te,to #ue formar9 el comentario entre los s&mbolos 2;88 comentario
884.
1 "reacin de tablas
1. Introduccin
?ui& uno de los elementos de presentacin de datos ms comunes
en las pginas web sea la ta$la" que nos a%uda a organi&ar la
informacin cmodamente en filas % columnas" mejorando
nota$lemente el aspecto visual de la misma.
4in em$argo" la utilidad de las ta$las *(/L va muc-o ms all de la
simple presentacin ordenada de la informacin. El lenguaje *(/L
tiene enormes carencias en lo que a maquetacin de los elementos de
una pgina se refiere (posicionamiento de imgenes" mrgenes"
alineacin del te+to...). Los diseadores -an suplido tradicionalmente
estas deficiencias utili&ando ta$las de forma profusa.
*o% en da es com8n la presencia de varias ta$las en una pgina web"
incluso ta$las dentro de celdas de otras ta$las.
$. %structura de una tabla
En *(/L" las ta$las se constru%en especificando filas % celdas. El
conjunto de celdas de una fila ir encerrado en las etiquetas de fila" %
el conjunto de filas de la ta$la" en las etiquetas de ta$la.
El comien&o % fin de una ta$la se define mediante el tag <table> ...
</table>. #ara especificar cada fila de la ta$la se utili&an las
etiquetas <tr> ... </tr>. >inalmente" para especificar cada celda de
una fila -a$r que usar las etiquetas <td> ... </td>.
(eniendo en cuenta estas simples reglas" vamos a mostrar a
continuacin algunos ejemplos.
<table>
<tr>
<td>Fila 1, celda 1</td>
<td>Fila 1, celda 2</td>
</tr>
<tr>
<td>Fila 2, celda 1</td>
<td>Fila 2, celda 2</td>
</tr>
</table>
El ejemplo anterior crea la siguiente ta$la de 9 filas % 9 columnas.
>ila @" celda @ >ila @" celda 9
>ila 9" celda @ >ila 9" celda 9
). .imensionando la tabla
Las etiquetas que definen la ta$la admiten diferentes parmetros para
lograr el correcto dimensionamiento de las celdas % de los $ordes que
forman la ta$la. (am$i!n es posi$le especificar la separacin que
de$e e+istir entre el te+to % el $orde de la ta$la.
Los parmetros que rigen estas caractersticas son los siguientes.
0armetro Etiqueta -ignificado
Width <table>
<td>
,nc-ura total de la ta$la o anc-ura de
la celda. #uede especificarse en J o
en pi+els.
Height <td>
,ltura de la celda. #uede especificarse
en J o en pi+els.
cellspacing <table>
4eparacin entre celdas.
cellpadding <table>
4eparacin entre el te+to % el $orde
de la celda.
El parmetro -eig-t se especifica para el tag <td> que define una
celda" pero afectar siempre a toda la fila. #or otra parte" podramos
especificar anc-uras de celdas inco-erentes (dando diferente anc-ura
a celdas de una misma columna" o -aciendo que la suma de las
anc-uras no coincida). (odos estos errores suelen ser asumidos por
los navegadores sin pro$lemas" pero -a% que tener cuidado" %a que la
forma en la que visuali&an una ta$la errnea diferir entre
navegadores de distintos fa$ricantes.
5ugando con los parmetros anteriores podemos %a modificar la ta$la
del ejemplo anterior para o$tener diferentes presentaciones.
6emoslo con algunos ejemplos.
,umentamos la anc-ura (por defecto" la anc-ura de cada celda se
adapta al te+to de la misma)" % la separacin entre celdas.
<table width="60%" cellspacing="5" cellpadding="0">
<tr>
<td>Fila 1, celda 1</td>
<td>Fila 1, celda 2</td>
</tr>
<tr>
<td>Fila 2, celda 1</td>
<td>Fila 2, celda 2</td>
</tr>
</table>
>ila @" celda @ >ila @" celda 9
>ila 9" celda @ >ila 9" celda 9
,nc-ura % altura de la primera columna diferentes de la de la
segunda" % ma%or espacio entre el te+to % el $orde de la ta$la.
<table width="80%" cellspacing="0" cellpadding="5">
<tr>
<td width="80%" height="70">Fila 1, celda 1</td>
<td width="20%" height="70">Fila 1, celda 2</td>
</tr>
<tr>
<td width="80%">Fila 2, celda 1</td>
<td width="20%">Fila 2, celda 2</td>
</tr>
</table>
>ila @" celda @
>ila @"
celda 9
>ila 9" celda @
>ila 9"
celda 9
*. Posicionamiento del te,to
)omo se o$serva en los ejemplos anteriores" nos falta todava ejercer
control so$re la posicin que ocupa el te+to dentro de cada celda.
#ara estos menesteres e+isten una serie de parmetros que
detallamos a continuacin" % que se aplican al tag <td>.
0armetro -ignificado
Align
,lineacin -ori&ontal. #uede tomar los
valores left (i&quierda)" center
(centro) % right (derec-a).
Valign
,lineacin vertical. #uede tomar los
valores top (superior)" middle
(central)" botton (inferior) % baseline
(lnea de $ase).
5ugando con estos parmetros podemos modificar el ejemplo anterior
para que el te+to de la primera celda est! en la parte inferior de la
misma" % alineado a la derec-a.
<table width="80%" cellspacing="0" cellpadding="5">
<tr>
<td width="80%" height="70" align="right" valign="bottom">
Fila 1, celda 1</td>
<td width="20%" height="70">Fila 1, celda 2</td>
</tr>
<tr>
<td width="80%">Fila 2, celda 1</td>
<td width="20%">Fila 2, celda 2</td>
</tr>
</table>
>ila @" celda @
>ila @"
celda 9
>ila 9" celda @
>ila 9"
celda 9
<. 6ordes y colores
#ara terminar esta introduccin al mundo de la creacin de ta$las en
*(/L" slo nos falta indicar cmo podemos mejorar el aspecto de
nuestras ta$las.
Lo primero que querremos -acer es jugar con la anc-ura del $orde.
#ara ello se -a definido el parmetro border de la etiqueta <table>"
que define la anc-ura de todos los $ordes de la ta$la en pixels. 4i se
especifica con valor <" el $orde no se visuali&a.
El color del $orde lo controla el parmetro bordercolor" que se aplica
al tag <td>. Este parmetro toma valores -e+adecimales o nom$res
de colores predefinidos" seg8n el alfa$eto ingl!s. La forma en que se
indica un color con cdigo -e+adecimal es la misma que se utili&a
para otros elementos de una pgina (por ejemplo" para el color de
fondo).
>inalmente" tam$i!n podemos modificar el color de fondo de cada
celda de forma independiente" aplicando el parmetro bgcolor al tag
<td>. Los colores se especifican de igual forma.
)on todo esto" podemos mejorar el aspecto del ejemplo anterior de la
siguiente forma.
<table width="80%" cellspacing="0" cellpadding="5" border="4">
<tr>
<td width="80%" height="70" align="right" valign="bottom">
Fila 1, celda 1</td>
<td width="20%" height="70">Fila 1, celda 2</td>
</tr>
<tr>
<td width="80%" bgcolor="#FFCCCC">Fila 2, celda 1</td>
<td width="20%" bordercolor="red">Fila 2, celda 2</td>
</tr>
</table>
>ila @" celda @
>ila @"
celda 9
>ila 9" celda @
>ila 9"
celda 9
T2302, )6>0ST)?23 1=LSP26 @ 3=;SP26, @ 302L)A23 0<031)1)=S
P3=P50ST=S 06 1L2S0
1=-)()12'
=. "onclusin
Las ta$las son el cora&n de muc-as pginas Le$. Mien empleadas
pueden mejorar nota$lemente el diseo de nuestra pgina" % facilitar
la navega$ilidad.
La presencia de muc-as ta$las posee" sin em$argo" algunos
inconvenientes.
/a%or complejidad en el cdigo (so$re todo si tenemos muc-as
ta$las anidadas) lo que dificulta el mantenimiento de la pgina
Kalenti&acin de la renderi&acin de la pgina en algunos
navegadores (so$re todo" navegadores antiguos" como los
Davigator de Detscape).
#or estos motivos" aunque es $ueno usar ta$las" conviene no a$usar
de ellas.
1I "reacin de enlaces
1. "once!to de enlace o hi!erv>nculo
Una de las ma%ores virtudes del lenguaje *(/L" % la que le da su
nom$re" es la posi$ilidad de crear enlaces o -ipervnculos que
relacionan diferentes pginas entre s. *(/L son las siglas de
HiperText Markup !anguage" que podra traducirse como lenguaje de
etiquetas -iperte+to.
Los enlaces" vnculos o -ipervnculos (tam$i!n conocidos como links"
su denominacin inglesa) son simplemente caminos -acia otras
pginas de la world wide web. 4u funcionamiento es mu% simple. el
te+to que queramos permita ir a otra pgina se marca de forma
especial (%a veremos cmo). , partir de entonces" en la pgina
aparecer resaltado (originalmente" mediante color a&ul %
su$ra%ado)" % cuando el ratn se mueva so$re dic-o te+to" cam$iar
el puntero para indicar que a- tenemos un enlace. ,l pulsar so$re !l"
instruimos al navegador para a$rir la pgina a la que -ace referencia.
El resultado es la vinculacin de nuestra pgina % la pgina a la que
-ace referencia el enlace. He esta forma" se va creando entre las
pginas de diferentes sitios una maraa de -iperenlaces" que da
nom$re a la world wide web (tela de araa mundial).
$. %nlaces e,ternos e internos
Lo primero que de$emos entender" antes de lan&arnos a la creacin
de enlaces" es el funcionamiento de la world wide web. Duestras
pginas residen en un ordenador (llamado tpicamente host). Este
ordenador est conectado a la red permanentemente" % pone a
disposicin de todos las pginas web que al$erga. 4implificando un
poco" podemos decir que nuestras pginas podrn enla&ar con
pginas de otros hosts (lo que sera un enlace e+terno) o con pginas
de nuestro propio host (enlace interno).
Kealmente" nuestro host puede contener pginas de diferentes sites
(no slo las nuestras" sino tam$i!n las de otras personas o
empresas). 4i enla&amos con ellas tam$i!n creamos enlaces
e+ternos.
La diferencia fundamental est en la necesidad de indicar" para un
enlace e+terno" el nom$re del host que contiene la pgina a la que
estamos enla&ando. #ara los enlaces internos" no ser necesario. El
navegador sa$e que si un enlace no lo indica es interno" lo que quiere
decir que la pgina enal&ada est en el mismo host que la pgina que
contiene el enlace. #uede parecer complicado" pero realmente no lo
es.
). Las rutas o paths
El concepto de ruta o path tam$i!n suele confundir al principio.
)uando creamos un sitio Le$ pequeo" con un centenar de pginas"
qui& no nos preocupe demasiado el orden" % no nos importe que
todas ellas se encuentren en el mismo fic-ero. Los fic-eros son como
los cajones de los espacios de almacenamiento de los hots.
)olocar todo en un mismo cajn no es $uena idea. 4o$re todo si
nuestro site crece" % tenemos miles de pginas. /antener un site en
estas condiciones es ardua tarea.
El orden siempre a%uda" lo que nos induce a crear m8ltiples fic-eros o
cajones para almacenar las pginas. Hentro de un fic-ero o carpeta"
podemos crear su$carpetas para clasificar mejor" % as
sucesivamente. El resultado final es que para locali&ar una pgina
de$emos indicar la ruta o path -acia ella. Esta ruta no es ms que la
sucesin de los nom$res de los fic-eros -asta llegar al que"
finalmente" contiene la pgina.
#or ejemplo" si la pgina ejemplo@.-tml est en la carpeta ejemplos"
la cual a su ve& est en la carpeta tutoriales" su ruta sera.
/tutoriales/ejemplos/ejemplo1.html
El concepto de ruta relativa % ruta absoluta aaden ms
complejidad al asunto. La ruta se dice a$soluta si parte de la ra& de
nuestra &ona de almacenamiento (es decir" parte de la carpeta que
contiene a cualquier otra" % que normalmente se designa simplemente
por el carcter /). El ejemplo anterior es una ruta a$soluta. 4e
caracteri&a por comen&ar con dic-o carcter /.
4i la ruta parte de otra carpeta" entonces es relativa. #or ejemplo"
desde la pgina ejemplo1.html podemos referenciar a una pgina
contenida en la carpeta tutoriales" % de nom$re tutorial1.html"
de este modo.
../tutorial1.html
N desde tutorial1.html" podemos referenciar la pgina
ejemplo1.html as.
ejemplos/ejemplo1.html
)omo se o$serva" estos ejemplos no comien&an con el carcter /" lo
que indica que son rutas relativas. 2Kelativas a qu!3 , la carpeta que
almacena la pgina que contiene el enlace. La cadena .. (dos puntos
seguidos) tiene un significado especial. referencia siempre a la
carpeta padre.
*. "reando enlaces de te,tos
4i comprendemos los conceptos anteriores" no tendremos ninguna
dificultad para crear enlaces. La etiqueta *(/L destinada a tal efecto
es <a href...> ... </a>. La viene de anchor (en ingl!s" ancla).
#or ejemplo" si queremos que el siguiente te+to "Enlace" tenga un
enlace a la pgina ndice de este tutorial" de nom$re html.html"
escri$iremos.
<a href="html.html">Enlace</a>
N el resultado ser.
Enlace
)omo se ve" la sinta+is es mu% sencilla. El enlace anterior es relativo"
porque no inclu%e el nom$re del host. 4i queremos crear un enlace
a$soluto a esta misma pgina" tendremos que escri$ir.
<a href="http://www.elcodigo.net/tutoriales/html/html.html">
Enlace</a>
La codificacin de este ejemplo est partida en 9 por cuestiones de
espacio (de$er estar en una sla lnea). )omo se ve" a-ora aparece
el -ost (www.elcodigo.net) % la ruta
(/tutoriales/html/html.html).
<. "reando enlaces de im+genes
#ara que una imagen se convierta en un enlace" $asta con incluir la
definicin de la imagen dentro de las etiquetas <a href...> % </a>.
#or ejemplo.
<a href="html.html"><img src="../../images/tutoriales2.gif"></a>
En este ejemplo" el enlace est en la imagen imagen.gif. N el
resultado.
)omo se ve" la imagen est especificada con una ruta relativa.
=. %l target u ob?etivo del enlace
La etiqueta <a href...> ... </a> posee un parmetro mu%
importante" el target u o$jetivo. Este parmetro permite indicar en
qu! ventana o marco queremos que se cargue la pgina a la que -ace
referencia el enlace. La forma de especificarlo es la siguiente.
<a href="html.html" target="_blank">Enlace</a>
En este ejemplo le -emos asignado el valor _blank" que indica que la
pgina de$e a$rirse en una ventana nueva del navegador. Los
posi$les valores son.
Target -ignificado
O$lanP Dueva ventana
Oself /ismo marco (o ventana si no -a% marcos)
que el actual
Oparent 6entana padre
Otop 6entana padre de todas las e+istentes
Dom$re del marco o ventana /arco o ventana cu%o nom$re coincida con el
especificado
TAREA: averigua sobre mapas