1.1.C.

Seleccin de los elementos de la pgina HTML

Estructura de la pgina.
- Cuerpo
- Ttulo
- Cabecera.
- Prrafo
Etiquetas
- pertura
- Cero o ms atributos
- Te!to encerrado por la etiqueta
- Cierre
Hiper"nculos
Los lenguajes de marcas
Un lenguaje de marcas es un conjunto de palabras o marcas que se colocan junto al
texto de un documento para especificar una propiedad del mismo.
Ejemplo: <negrita>Diseo de pginas web<negrita> <t!tulo>Diseo de pginas
web<t!tulo>
"ipos de marcado: f!sico # semntico. $or ejemplo% para enfati&ar caracteres se puede
utili&ar el estilo f!sico ' o el estilo semntico E(.
Estilo f!sico Estilo semntico
)intaxis <'>texto en itlica<'><E(>texto enfati&ado<E(>
*esultado texto en itlica texto enfati&ado
+"(, es un lenguaje de marcas orientado a la publicaci-n de documentos en 'nternet.
,a ma#or!a de las marcas son semnticas. +"(, es un lenguaje extensible % al que se
le pueden aadir nue.as caracter!sticas% marcas # funciones.
,os documentos +"(, estn formados por una serie de bloques de texto con una
entidad l-gica /titulares% prrafos% listas% ...0. ,a interpretaci-n de estas entidades se
deja al na.egador% lo cual da una gran flexibilidad a la presentaci-n del documento%
que puede ser mostrado% por ejemplo% en terminales grficos o de texto.
El HTML% es el lenguaje que permite disear los 1ipertextos. +o# en d!a% la ma#or!a de
los procesadores de textos disponen de opciones para guardar los documentos en este
formato% por lo que no presenta dificultad.
)i queremos incluir efectos complicados% con imgenes en tres dimensiones% sonidos%
imgenes en mo.imiento% consultar bases de datos% etc. entonces debemos utili&ar un
.erdadero lenguaje de programaci-n% como Java % ideal para 'nternet pues tiene la
.entaja de que funciona independientemente de la plataforma /mac% pc% unix% etc.0
donde se ejecuta.
Caractersticas del lenguaje HTML
Elementos
2ada elemento de un documento +"(, consta de una marca de comien&o% un bloque
de texto # una marca de fin. <(3*23>bloque de texto<(3*23>. $or
ejemplo% <+4>"itular de ni.el 4<+4>
Estos elementos se denominan contenedores % porque contienen un bloque de texto
entre las dos marcas. "ambi5n existen elementos .ac!os % que no afectan a bloques de
texto #% por tanto% no contienen marca de fin.
$or ejemplo% l!nea 4 <6*> l!nea 7
Atributos
(uc1os elementos tienen atributos que definen propiedades del elemento: <(3*23
3"*'6U"89:;3,8*:> bloque de texto <(3*23>. $or ejemplo% <+4
3,'<=9:2E="E*:>"itular de ni.el 4 centrado<+4>
Es recomendable encerrar los .alores de los atributos entre comillas dobles. En algunos
casos es adems obligatorio /por ejemplo% si contienen espacios en blanco0.
Distincin entre maysculas y minsculas
+"(, no distingue entre ma#>sculas # min>sculas. 2uando es importante 1acerlo% cosa
que puede ocurrir con los .alores de algunos atributos /por ejemplo% nombres de
fic1eros0% es preciso encerrar el .alor entre comillas dobles. $or ejemplo% <'(< 3,"9::
)*29:6ola*oja.gif:>
Comentarios
,os comentarios se escriben en +"(, de la siguiente forma: <?@@ Esto es un
comentario @@ >. ,os caracteres de inicio del comentario% <?@@ deben ir juntos% pero se
permiten espacios entre los @@ # el > del final. ,os comentarios pueden expandirse
.arias l!neas% aunque no es con.eniente porque algunos .isuali&adores pueden no
interpretarlos.
nter!retacin de es!acios" tabulaciones y retornos de carro
,os espacios% tabulaciones% l!neas en blanco # retornos de carro del documento +"(,
se ignoran% tomndose como un >nico espacio en blanco. Esto permite aadir espacios
para aumentar la claridad del documento. 2uando se quiere for&ar un espacio en
blanco% se 1ace de la siguiente forma: AnbspB
Estructuracin
+"(, es un lenguaje estructurado. Existen unas reglas estructurales sobre d-nde
pueden # no pueden ir los elementos. $or ejemplo%
2iertos elementos no pueden contener otros elementos. $or ejemplo% no es
correcto colocar un titular dentro de otro. 3dems% tampoco tiene sentido
1acerlo. <+4><+7>"exto<+7><+4>
,os elementos no se pueden solapar. =o es correcto
escribir <E(><+4>"exto<E(><+4>
Estructura de un documento HTML
<+"(,>
<+E3D> ... Encabe&amiento del documento <+E3D>
<68DC> ... 2uerpo del documento <68DC>
<+"(,>
Elementos ms importantes del encabe#amiento : "'",E # (E"3.
<"'",E>"!tulo de la pgina<"'",E>
<(E"3 =3(E9:description: 28="E="9:$gina dedicada al diseo eficiente de pginas
web para internet mediante el lenguaje +"(, # otras 1erramientas auxiliares:>
<(E"3 =3(E9:De#words: 28="E="9:web diseo +"(, 1ipermedia:>
<(E"3 +""$@EEU';9:refres1: 28="E="9:FB U*,91ttp:dominiopagina7.1tml:>
<(E"3 +""$@EEU';9:expires: 28="E="9:Gri% HF Ian 7HH4 4J:HH:HH <(":>
El cuer!o del documento .iene a continuaci-n del encabe&amiento% # contiene todo el
texto # material del documento que se .a a mostrar.
<68DC 6<28,8*9:color: 632K<*8U=D9:fic1ero imagen:
"EL"9:color: ,'=K9:color: ;,'=K9:color: 3,'=K9:color:>
...
<68DC>
El formato de los colores se puede especificar de dos maneras distintas:
(ediante el nombre del color. $or ejemplo% aqua% blacD% blue% fuc1sia% gra#%
green% lime% maroon% na.#% oli.e% purple% red% sil.er% teal% w1ite% #ellow /# otros
47M colores extendidos0.
(ediante la intensidad % en 1exadecimal% de los componentes *<6 /rojo% .erde%
a&ul0 del color: N**<<66 /siendo HH la intensidad nula # GG el mximo brillo0.
Titulares o Encabe#ados
)e pueden utili&ar distintos ni.eles de titulares para las distintas secciones de un
documento. $ara ello se usa el elemento +n% siendo n un n>mero del 4 al O que indica
el ni.el del titular. <+n>titular n<+n>. El titular de ni.el J coincide en tamao con el
texto normal.
,os O ni.eles de titulares tienen el siguiente aspecto:
titular 1
titular 2
titular 3
titular 4
titular 5
titular 6
$eal#ado de caracteres
Existen distintos estilos para real&ar caracteres. ,a ma#or!a de ellos son semnticos.
Pnfasis
)intaxis <E(>texto enfati&ado<E(>
*esultado texto enfatizado
(uc1o 5nfasis
)intaxis <)"*8=<>texto mu# enfati&ado<)"*8=<>
*esultado te%to muy en&ati#ado
2-digo de ordenador
)intaxis <28DE>texto de ordenador<28DE>
*esultado
texto de ordenador
Entrada de teclado
)intaxis <K6D>texto introducido por teclado<K6D>
*esultado texto introducido por teclado
$reformateado
)intaxis <$*E>texto preformateado<$*E>
*esultado
texto preformateado
Estilos &sicos'
=egrita
)intaxis <6>texto en negrita<6>
*esultado te%to en negrita
'tlica
)intaxis <'>texto en itlica<'>
*esultado texto en itlica
)ubra#ado
)intaxis <U>texto subra#ado<U>
*esultado texto subra#ado
Guente de mquina de escribir
)intaxis <"">texto en fuente de mquina de escribir<"">
*esultado
texto en fuente de mquina de escribir
Caracteres es!eciales
)e escriben con el carcter ampersand /A0 seguido del nombre asociado al carcter #
un punto # coma /B0.
Ejemplos:
9 AaacuteB
5 9
AeacuteB
! 9 AiacuteB - 9 AocauteB > 9 AuacuteB 9 AntildeB < 9 AltB
Q 9
A3acuteB
P 9
AEacuteB
R 9
A'acuteB
S 9
A8acuteB
T 9
AUacuteB
U 9
A=tildeB
> 9
AgtB
Centrado de te%to
$ara centrar texto se utili&a el elemento 2E="E*:
)intaxis <2E="E*>texto centrado<2E="E*>
*esultado texto centrado
()rra&os
,a marca $ indica un comien&o de prrafo. <$>"exto del prrafo alineado a la
i&quierda<$>
<$ 3,'<=9:*'<+":>"exto del prrafo alineado a la derec1a<$>
Es!aciado vertical y *ori#ontal
Espaciado .ertical: salto de l!nea: <6*> B salto de prrafo /intro0 <$>
Espaciado 1ori&ontal:
<$>$rimer prrafo% sin indentaci-n<$>
<6,82KEU8"E>)egundo prrafo% con
indentaci-n<6,82KEU8"E>
<$>"ercer prrafo% sin indentaci-n<$>
$rimer prrafo% sin indentaci-n
)egundo prrafo% con indentaci-n
"ercer prrafo% sin indentaci-n
Lista de de&iniciones o glosario
)ir.e para definir listas de tipo glosario% en las cuales aparecen una serie de elementos
con sus correspondientes definiciones.
)intaxis *esultado
<D,>
<D">$rimer elemento a definir
<DD>definici-n del primer elemento
<D">)egundo elemento a definir
<DD>definici-n del segundo elemento
<D">"ercer elemento a definir
<DD>definici-n del tercer elemento
<D">2uarto elemento a definir
<DD>definici-n del cuarto elemento
<D">Euinto elemento a definir
<DD>definici-n del quinto elemento
<D,>
$rimer elemento a definir
definici-n del primer elemento
)egundo elemento a definir
definici-n del segundo elemento
"ercer elemento a definir
definici-n del tercer elemento
2uarto elemento a definir
definici-n del cuarto elemento
Euinto elemento a definir
definici-n del quinto elemento
Lista regular numerada
$ermite enumerar una serie de elementos. 2ada elemento de la lista comien&a con la
marca ,' / list item 0 # termina con ,'% aunque 5sta no es necesaria. ,a lista regular
puede ser numerada o sin numerar.
)intaxis *esultado
<8,>
<,'>$rimero
<,'>)egundo
<,'>"ercero
<,'>2uarto
<,'>Euinto
<8,>
1. $rimero
2. )egundo
3. "ercero
4. 2uarto
5. Euinto
Lista regular sin numerar
)intaxis *esultado
<U,>
<,'>$rimero
<,'>)egundo
<,'>"ercero
<,'>2uarto
<,'>Euinto
<U,>
$rimero
)egundo
"ercero
2uarto
Euinto
,as listas se pueden anidar unas dentro de otra% aunque sean de tipos distintos% como
se muestra en el siguiente ejemplo
)intaxis *esultado
<8,>
<,'>$rimero
<U,>
<,'>$rimero a
1. $rimero
o $rimero a
o $rimero b
2. )egundo
<,'>$rimero b
<U,>
<,'>)egundo
<U,>
<,'>)egundo a
<,'>)egundo b
<,'>)egundo c
<U,>
<,'>"ercero
<,'>2uarto
<,'>Euinto
<8,>
o )egundo a
o )egundo b
o )egundo c
3. "ercero
4. 2uarto
5. Euinto
Una lista s-lo puede contener elementos ,'% que a su .e& pueden contener otros
elementos +"(,. Es importante no poner espacios entre <,'> # el texto% porque este
espacio s! es significati.o # modifica la indentaci-n del item aadiendo un espaciado
extra. En general% nunca se debe poner espacio entre una marca de comien&o # el
texto que le sigue.
Lneas *ori#ontales
Una l!nea 1ori&ontal se dibuja mediante el elemento .ac!o +*: <+* )'VE9:altura en
puntos: W'D"+9:anc1ura en puntos:>
Ejemplos: <+*> <+* )'VE9:7H:> <+* W'D"+9:JHH:> <+* )'VE9:7H:
W'D"+9:JHH:>
m)genes
,as imgenes se colocan con el elemento '(<: <'(< )*29:fic1ero imagen:
W'D"+9:anc1ura: +E'<+"9:altura:
3,'<=9:alineaci-n:>
Enlaces de *i!erte%to
$ermiten conectar un documento con otros documentos u objetos. ,os enlaces se
colocan mediante el elemento ancla% 3: <3 +*EG9:url del documento:>texto del
enlace<3>
,a parte acti.a del ancla puede ser tambi5n una imagen: <3 +*EG9:url del
documento:><'(< )*29:fic1ero imagen: 68*DE*9:H:><3>
+$L , +ni&orm $esource Locator -
El U*, de un documento es el nombre que identifica un!.ocamente al documento en la
red. El U*, se compone de .arias partes /no todas las partes tienen por qu5 estar
presentes0:
$rotocolo mediante el cual se accede al documento.
=ombre de dominio.
=ombre de la carpeta de la mquina donde se encuentra el documento. Este
nombre indica la ruta desde la carpeta ra!& de la web 1asta la carpeta donde se
encuentra el documento.
=ombre del fic1ero.
Ejemplo: 1ttp:www.deciencias.netalumnado7HH7@7HHJ.1tm
Ejem!los
Enlace con url absoluto. <3 +*EG9:1ttp:www.softonic.com:>$ortal del software
)8G"8='2<3>
Enlace con url relati.o. <3 +*EG9:index.1tml:>2rear web docente<3>
Enlace a un punto del interior de una pgina.
<3 +*EG9:1ttp:www.deciencias.netappletsquimicaindex.1tmNorg:> Eu!mica del
carbono <3>
Enlace asociado a una imagen
<a 1ref9:....index.1tm: /o a 1ref::1ttp:www.deciencias.net:0>
<img src9:....imagesdeciencias.net: alt9:$ortal www.deciencias.net: widt19:XF:
1eig1t9:FH: border9:H: ><a>
Enlace a un !unto del interior de una !)gina
)e puede establecer un enlace a un punto del interior de un documento. $ara ello se
escribe el U*, del documento seguido del s!mbolo N # una etiqueta% que es una
combinaci-n de caracteres:
<3 +*EG9:url del documentoNetiqueta:>texto o imagen del enlace<3>
En un lugar del documento debe existir un anclaje de la forma: <3
=3(E9:etiqueta:>texto<3>
Este es el punto al que se saltar cuando se acti.e el enlace. El texto es opcional #
puede no aparecer si lo >nico que interesa es marcar el punto de destino del salto.
$or ejemplo% el siguiente enlace lle.a al comien&o de la secci-n denominada :3plicaci-n
de comportamientos: de la pgina :comporta.1tm:: 3plicaci-n de un comportamiento
<a 1ref9:comporta.1tmNaplica:>3plicaci-n de un comportamiento<a>
En el comien&o de la secci-n a la que se quiere saltar se deber colocar lo siguiente:
<3 =3(E9:aplica:><3>
El U*, puede omitirse si el enlace se refiere al propio documento. $or ejemplo a la
,ista regular numerada de este mismo documento: ,ista numerada
<a 1ref9:Nnumerada:>,ista numerada<a>
Enlaces a otros documentos
Un enlace no s-lo puede lle.ar a otro documento +"(,B tambi5n puede lle.ar a una
imagen% un sonido% un .ideo% etc. En general% puede lle.ar a cualquier tipo de
documento. $or ejemplo:
/ 1ttp:www.deciencias.netdisenowebdisen#oanali&arweb.doc 0
Direccin
El elemento 3DD*E)) se suele utili&ar para proporcionar informaci-n sobre el autor de
la pgina # permitir contactar con 5l para 1acerle comentarios acerca de ella.
)intaxis <3DD*E))>direcci-n<3DD*E))>
*esultado direcci-n
En la direcci-n se suele incluir la direcci-n de correo del mismo% a .eces con un enlace
que permite en.iarle un mensaje con s-lo 1acer clicD sobre 5l.
,a forma es la siguiente: <3 +*EG9:(3',"8:direcci-n de correo:>texto del
enlace<3>
$or ejemplo: puedes comentarme cualquier cosa que se te ocurra a prop-sito de esta
pgina.
<a 1ref9:mailto:m.aqueroYwanadooadsl.net: target9:ZblanD:>comentarme<a>
Estructura de un documento HTML
Todas las pginas web tienen la siguiente estructura:
<html>
<head>
<title>Primera pgina</title>
</head>
<body>
</body>
</html>
En la primer linea encontramos la etiqueta <html>. Esta le indica al cliente que comienza
un documento HTML.
Luego viene <head>, la cabecera, donde se pone informacin sobre el documento, que no
se ve en la pantalla del navegador. !qu" puede ir el t"tulo <title> del documento, es lo que
veremos como t"tulo de la ventana en los navegadores que lo permitan # como se conocer
nuestra pgina en algunos buscadores # en la lista de favoritos de los usuarios $es
importante pensar bien el t"tulo del documento%.
Tras la cabezera viene <body>, el cuerpo, que es donde se coloca la informacin que
queremos mostrar en la pantalla principal del navegador.
Comandos bsicos de formateo de
texto
<p>...</p>
Indica un comienzo de prrafo. Tiene como
opciones align="center" ,"left" o "right",
para centrar o alinear a derecha o izquierda el
texto. ada comienzo de prrafo de!a un
espacio separador.
<h>...</h>
"e usan para di#idir correctamente en secciones
nuestra p$ina, tal % como se hace en un
documento de texto normal. &l mas importante
'$rande( es <h>, lue$o <h!> % as) hasta <h">.
<center>...</center>
*ermite centrar.
<pre>...</pre>
+epresenta el texto encerrado en ella con un
tipo de letra de paso fi!o.
<bloc#quote>...</bloc#quote>
*ara de!ar mr$enes tanto a izquierda como a
derecha 'san$rar(.
<br>
uando escri,imos un documento -T./ los
retornos de carro no tienen nin$0n efecto 'sal#o
si estn contenidos ,a!o la directi#a <pre>(.
1$rupaciones de ms de un carcter en ,lanco
se traducen en un solo carcter ,lanco.
<hr>
Inserta una linea horizontal o separador. 2e ellos
pueden modificarse #arios atri,utos3
si$e="num"% "&"
$rosor de la ,arra horizontal, en pixels o el
porcenta!e del ancho de p$ina.
'idth="num"
anchura de la ,arra horizontal en pixels.
align="..."
alineamiento de la ,arra, puede
#aler left, right o center .
noshade
elimina el aspecto tridimensional .
Cambiando el estilo de letra
Todas estas etiquetas nos permiten cambiar el aspecto
del tipo de letra que estemos utilizando.
<b>...</b>
*one el texto en ne$rita.
<i>...</i>
+epresenta el texto en cursi#a.
<u>...</u>
*ara su,ra%ar al$o.
<s>...</s>
*ara tachar.
<tt>...</tt>
*ermite representar el texto en un tipo de letra
de paso fi!o.
^...
/etra super)ndice.
_...
/etra su,)ndice.
Caracteres especiales
&uando editamos una pgina HTML con un editor de
te'to, podemos poner las tildes # los caracteres propios
del espa(ol $, !, ), *, ..., +, (, ,, -, .%. / nuestro
navegador los representa de manera adecuada en la
pantalla, #a que suponen por defecto que la pgina est
escrita en caracteres de un idioma europeo occidental.
0ero no todo el mundo tiene configurado su navegador
igual $en 1usia ven la pginas con caracteres cir"licos #
en 2apn en caracteres 3aponeses% 0ara indicar a otro
navegador que estamos utilizando los caracteres de un
idioma europeo occidental, la primera l"nea de la
cabecera debe ser
<meta http-equi(=")ontent-*ype"
content="text/html+ charset=,-.-//01-">
4tra posibilidad es utilizar los nombres simblicos
definidos en HTML
2aacute+% 23acute+% 2eacute+% 24acute+...
, 4, 5, 6, ), 7, 8, 9, 0 % :
2ntilde+ y 25tilde+
; % <
2nbsp+
&spacio en ,lanco que no puede ser usado para
saltar de l)nea. uando escri,imos un
documento -T./ las a$rupaciones de ms de
un carcter en ,lanco se traducen en un solo
carcter ,lanco 'sal#o si estn contenidos ,a!o
la directi#a <pre>(.
2iquest+
=
2iexcl+
>
2ordm+
?
2ordf+
@
2copy+
A
2reg+
B
Caracteres de control
En el HTML e'isten cuatro caracteres de control, que se
usan para formar etiquetas, establecer parmetros, etc..
0ara poder emplearlos sin riesgo deberemos escribir los
siguiente cdigos:
2lt+
C
2gt+
D
2amp+
E
2quot+
"
Enlaces
El HTML es un lengua3e para 5iperte'to. E'isten
m6ltiples formatos de 5iperte'to $por e3emplo, los
fic5eros de a#uda de 7indows% # lo que tienen en com6n
es que todos poseen enlaces.
8n enlace es una zona de te'to o grfico que al ser
seleccionado nos traslada a otra posicin dentro del
documento actual o a otro documento, que puede
encontrarse en el mismo ordenador o en otro de
cualquier parte del planeta. 9on los enlaces lo que 5acen
de la 7orld 7ide 7eb o telara(a lo que es.
0ara incorporar un enlace 5a# que utilizar esta
etiqueta <a>. Todo lo que encerremos entre <a> # </a>,
#a sea te'to o imgenes, ser considerado como enlace #
sufrir dos modificaciones:
1. &l texto aparecer su,ra%ado % de un color
distinto al ha,itual, % las im$enes estarn
rodeadas por un ,orde del mismo color que el
del texto del enlace.
2. 1l pulsar so,re el enlace, se a,rir en el
na#e$ador el documento al que apunta,a el
enlace.
&n el enlace de,emos especificar una direcci8n. /o
haremos de la si$uiente manera3
<a href="direcci6n">P2uacute+lsame</a>
La direccin estar en formato 81L $Uniform Resource
Locator%.
ser(icio7//mquina/ruta/fichero
:onde el ser(icio podr ser uno de los siguientes:
http
&s el ser#icio in#ocado para transmitir p$inas
Fe, % el que usaremos normalmente en los
enlaces.
https
&s una inno#aci8n so,re el anterior, que nos
permite acceder a ser#idores '$eneralmente
comerciales( que nos ofrecen el uso de t5cnicas
de encriptaci8n para prote$er los datos que
intercam,iemos con 5l de terceras personas.
ftp
*ermite trasmitir ficheros desde ser#idores de ftp
an8nimo. "i no le pedimos un fichero sino un
directorio, en $eneral el na#e$ador se encar$ar
de mostrarnos el contenido del mismo para que
podamos esco$erlo c8modamente. Gtilizando la
H podremos acceder a ser#idores pri#ados.
mailto
*ara poder mandar un mensa!e. *or e!emplo, la
G+/
mailto7iesga(iota8a(erroes.cec.9unta
-andalucia.es
mandar)a un mensa!e a nuestro Instituto.
ne's
*ara poder acceder a $rupos de noticias. "e
indica el ser#idor % el $rupo. *or e!emplo
ne's7//ne's.cica.es/es.comp.demos
nos conectar)a con el $rup es.comp.demos en el
ser#idor del I1.
/a direcci8n de la mquina puede ser su I* o la 2I".
La ruta es una serie de directorios separados por el
s"mbolo ;, que es el utilizado en 8<=> $el sistema
operativo ms e'tendido en los servidores de =nternet%.
&uando queremos acceder a un fic5ero situado en la
misma mquina que la pgina web que estamos creando,
no es necesario ni recomendable, escribir toda la ruta
5asta el fic5ero, bastar relativizar todos los enlaces al
directorio actual. Esto quiere decir que no tendremos que
escribir:
<a href="http7//a(erroes.cec.9unta-
andalucia.es
/ies:ga(iota/pagina!.html">
9i el fic5ero al que queremos acceder est en el mismo
directorio, bastar con escribir:
<a href="pagina!.html">
/ si esr en otro directorio, lo nombrar) de forma
relativa al directorio actual de esta forma:
<a href="otro:directorio/pagina!.html">
o bien de esta otra:
<a href="../../otro:directorio/pagina!.html">
donde los dos puntos $..% se utilizan para acceder al
directorio padre.
nclas
&omo di3imos, es posible acceder a una posicin del
documento HTML. 0ara 5acerlo, primero debemos
especificar el lugar del documento al que queremos
acceder:
<a name="ancla">
0ara poder acceder a ese lugar incluimos el enlace de
esta manera:
<a href=";ancla"><amos a ancla</a>
Tambi)n podemos acceder a anclas situadas en
documentos remotos. 0ara ello a(adiremos el nombre del
ancla al 81L as":
<a href="enlaces.html;ancla"><amos a ancla en
los enlaces</a>
Listas
E'isten varios tipos de listas en HTML, todas ellas se
pueden meter unas dentro de otras formando rboles, #
siguen el siguiente formato:
<tipo:lista>
<li>Primer elemento
<li>-egundo elemento
</tipo:lista>
<tipo:lista> puede ser :
<ul>
Ios permite presentar listas de elementos sin
orden al$uno. ada elemento de la lista ir
normalmente precedido por un c)rculo.
La etiqueta <ul> admite estos parmetros:
compact
Indica al na#e$ador que de,e representar la lista
de la manera ms compacta posi,le.
type="disc"% "circle"% "square"
Indica al na#e$ador el di,u!o que preceder a
cada elemento de la lista. *ara ma%or flexi,ilidad
se admite tam,i5n como parmetro de <li>.
<ol>
Ios permite presentar listas de elementos
ordenados de menor a ma%or. Iormalmente
cada elemento de la lista ir precedido por su
n0mero o letra en el orden.
La etiqueta <ol> admite estos parmetros:
compact
Indica al na#e$ador que de,e representar la lista
de la manera ms compacta posi,le.
type=""% "a"% "3"% "i" o ","
Indica al na#e$ador el tipo de numeraci8n que
preceder a cada elemento de la lista. *ara
ma%or flexi,ilidad se admite tam,i5n como
parmetro de <li>.
start="num"
Indica al na#e$ador el n0mero por el que se
empezar a contar los elementos de la lista.
La etiqueta <li> admite el
atributo (alue="num", que act6a
como start pero a partir de ese elemento.
<dl>
&ste tipo de lista que no utiliza la etiqueta <li>.
Tiene como o,!eti#o presentar una lista de
definiciones, de modo que tiene que representar
de manera distinta el o,!eto definido % la
definici8n. &mplearemos la etiqueta <dt> para el
o,!eto definido % <dd> para la definici8n.
La etiqueta <dl> slo admite como parmetro el
#a conocido compact, que tiene el mismo
comportamiento que con los otros dos tipos de
lista anteriores.
!nclu"endo im#enes
0ara incluir grficos e imgenes en nuestras pginas
utilizaremos la etiqueta <img> de esta manera:
<img src="fichero:grafico" alt="descripcion">
El parmetro src especifica el nombre del fic5ero que
contiene el grfico. Los formatos estndar en la red son
el ?=@ # el 20?. La 6ltimas versiones de <etscape #
E'plorer aceptan tambi)n el formato 0<?.
El parmetro alt especifica el te'to que se mostrar en
lugar del grfico en aquellos navegadores que no sean
capaces de mostrarlos $como el L#n'% o en el supuesto
de que el usuario los 5a#a desactivado. Es por todo eso
que conviene ponerlo siempre. !dems algunos
navegadores lo muestran cuando pasamos el ratn por
encima de la imagen.
E'isten dos atributos que, aunque opcionales, tambi)n
conviene indicar
siempre: 'idth="num" # height="num", la anc5ura # la
altura del grfico en pi'els. :e este modo, el navegador
puede mostrar un recuadro del tama(o de la imagen
mientras la va le#endo de la red # as" poder mostrar el
resto de la pgina correctamente mientras tanto. Estos
atributos tambi)n nos pueden valer para ampliar o
reducir el tama(o original de las imgenes, poniendo el
valor en pi'el o el A del anc5o # alto con que queremos
ver la imagen en el navegador.
0ara poder maquetar con3untamente te'to # grficos, el
HTML proporciona, por medio del parmetro align, las
siguientes maneras de alinear una imagen respecto del
te'to que la acompa(a:
align="top"
oloca el punto ms alto de la ima$en
coincidiendo con ms alto de la l)nea de texto
actual.
align="middle"
1linea el punto medio 'en altura( de la ima$en
con la ,ase del texto.
align="bottom"
*or defecto 1linea el punto ms ,a!o de la
ima$en con la ,ase del texto.
align="left"
oloca la ima$en a la izquierda del texto.
align="right"
oloca la ima$en a la derecha del texto.
-a% que aclarar que la ,ase del texto es la l)nea donde
descansan casi todas las letras del alfa,eto excepto
al$unas 'p, q, %, ! ...(.
El atributo hspace="num" indica el espacio en blanco,
en pi'el, que se insertar a derec5a e izquierda de la
imagen # (space="num" el espacio por encima # deba3o
de la imagen.
!m#enes " enlaces
9uele ser com6n incluir enlaces dentro de un grfico. En
ese caso, por defecto, los navegadores le pondrn un
borde al grfico para indicar que efectivamente es un
enlace. 0rctico, pero la ma#or"a de las veces bastante
poco est)tico. 0or medio del
parmetro border podremos alterar el grosor de ese
borde o incluso eliminarlo poni)ndolo a cero.
<a href="ruta/fichero"><img src="imagen"
border="="></a>
$%& o &!'
8na buena regla general es usar 20? cuando la imagen
sea una foto # cuando sea un logotipo, letras, o un dibu3o
utilizar ?=@. Lo principal es que la imagen ocupe lo
m"nimo posible $una imagen de ms de BCD es mu#
grande para =nternet% # que tenga una calidad aceptable.
8n ?=@ de EBF colores generalmente es un desperdicio,
con FG colores casi no 5a# diferencia # puede ocupar
bastante menos. 8na foto en ?=@ de EBF colores, en 20?
puede quedar reducida a menos de la mitad.
9i 5ubiese que poner una imagen grande no la
pondremos directamente en la pgina, pondremos un
versin reducida de unos HBC ' HCC pi'els con un enlace
a la grande, e indicaremos cunto ocupa la grande.
Tablas
Las tablas son posiblemente la manera ms clara de
organizar la informacin. Tambi)n es el modo ms
adecuado de maquetar te'to # grficos de una manera
algo ms controlada que con los parmetros align.
/a ta,la est contenida entre las
etiquetas <table> % </table>.
ada fila de la ta,la est delimitada
por <tr> % </tr>
ada celda est determinada por las
etiquetas <td> % </td>.
/as etiquetas <th> % </th> sir#en para indicar
que el texto contenido es la ca,ecera de la
columna. /as ca,eceras de la ta,la no son
o,li$atorias.
/a etiquetas <caption> % </caption> delimitan
el t)tulo de la ta,la.
Io es necesario definir de antemano cuantas filas o
columnas tendr la ta,la, ,asta con colocar tantas
celdas como queramos. /a distri,uci8n de las celdas la
a!ustaremos con las etiquetas que delimitan las filas.
8na tabla con E filas # I columnas se declarar as":
<table>
<tr> <td>%a</td> <td>%b</td> <td>%c</td
> </tr>
<tr> <td>!%a</td> <td>!%b</td> <td>!%c</td
> </tr>
</table>
Los atributos de <table> son:
border="num"
&specifica el $rosor del ,orde que se di,u!ar
alrededor de las celdas. *or defecto es cero, lo
que si$nifica que no di,u!ar ,orde al$uno.
cellspacing="num"
2efine el n0mero de pixels que separarn las
celdas.
cellpadding="num"
&specifica el n0mero de pixels que ha,r entre
el ,orde de una celda % su contenido.
'idth="num"% "&"
&specifica la anchura de la ta,la. *uede estar
tanto en pixels como en porcenta!e de la
anchura total disponi,le para ella
'pondremos "==&" si queremos que ocupe
todo el ancho de la #entana del na#e$ador(.
align="..."
1linea la ta,la a izquierda '"left"(, derecha
'"right"( o centro '"center"(.
bgcolor=";xxxxxx"
olorea todo el rea de la ta,la con el color
indicado. Jer colores en /etras % colores.
(efinir las filas
!5ora que 5emos definido la tabla nos toca 5acer lo
mismo con las filas. &ada fila se define con una etiqueta
T1, que tiene los siguientes atributos:
align="..."
1linea el contenido de las celdas de la fila
horizontalmente a izquierda'"left"(, derecha
'"right"( o centro '"center"(
(align="..."
1linea el contenido de las celdas de la fila
#erticalmente arri,a '"top"(, a,a!o '"bottom"( o
centro '"middle"(.
(efinir las celdas
0or 6ltimo, nos queda definir cada celda gracias a la
etiquetas <td> # <th>. Estas etiquetas son equivalentes,
pero la 6ltima se utiliza para encabezados, de modo que
su interior se escribir por defecto en negrita # centrado.
Estos son los atributos de ambas:
align="..."
1linea el contenido de las celdas de la fila
horizontalmente a izquierda'"left"(, derecha
'"right"( o centro '"center"(
(align="..."
1linea el contenido de las celdas de la fila
#erticalmente arri,a '"top"(, a,a!o '"bottom"( o
centro '"middle"(.
'idth="num"% "&"
&specifica la anchura de la celda . Tam,i5n se
puede especificar tanto en pixels como en
porcenta!e, teniendo en cuenta que, en este
0ltimo caso, ser un porcenta!e respecto al
ancho total de la ta,la 'no de la #entana del
na#e$ador(.
no'rap
Impide que, en el interior de la celda, se rompa
la l)nea en un espacio.
colspan="num"
&specifica el n0mero de celdas de la fila
situadas a la derecha de la actual que se unen a
5sta 'inclu%endo la celda en que se declara este
parmetro(. &s por defecto uno. "i se pone i$ual
a cero, se unirn todas las celdas que queden a
la derecha.
ro'span="num"
&specifica el n0mero de celdas de la columna
situadas de,a!o de la actual que se unen a 5sta.
bgcolor=";xxxxxx"
olorea todo el rea de la celda con el color
indicado. Jer colores en /etras % colores.
T)tulo de la tabla
0or medio de la etiqueta <caption> se indica el t"tulo de
una tabla. Esta etiqueta admite slo un
parmetro: align, que es por defecto top. 9i lo
definimos como bottom el t"tulo se colocar al final de
la tabla en lugar del comienzo.
Tipos de letra* tama+o " colores
?racias a la etiqueta <font> vamos a poder cambiar el
tama(o, el tipo # el color de las letras en nuestras
pginas.
Cambio de color
0ara 5acerlo se utiliza el parmetro color. La manera de
especificarle el color es com6n a todas las etiquetas
HTML: bien indicando el nombre, si es un color normal
$>lac#% -il(er% ?ray% @hite% Aaroon% Bed%
Purple% Cuchsia% ?reen% Dime% .li(e% Eello'%
5a(y% >lue% *eal% 3qua%,
<font color="red">4stoy en ro9o</font>
o bien especificando la intensidad de ro3o, verde # azul
$cdigo 1?J% del mismo.
<font color=";xxxxxx">color</font>
:onde cada x es un d"gito 5e'adecimal, del C a la @. Las
dos primeras x corresponden al ro3o, las E siguientes al
verde # las restantes al azul. 0or e3emplo: para el blanco
pondremos todos los valores al m'imo, ;CCCCCC+ #
para el ro3o, ;CC====.
<font color=";CC====">4stoy en ro9o</font>
Tama+o de la letra
El parmetro utilizado para indicar el tama(o es si$e.
0uede tomar valores desde H a K, siendo el tama(o por
defecto I.
<font si$e="!">*amaFo !</font>
Tambi)n se puede utilizar los modificadores G # - para
indicar un incremento $o decremento% relativo del
tama(o del tipo de letra. !s", por e3emplo, si indicamos
que queremos un tama(o de "-!" estaremos pidiendo al
navegador que nos muestre el tipo de letra dos veces ms
peque(o.
<font si$e="GH">*amaFo I</font>
Tipo de letra
0or 6ltimo, podemos especificar el nombre del tipo de
letra que queremos utilizar gracias al parmetro face.
&omo en principio no tenemos manera de saber que tipo
de letra tiene instalado el ordenador del usuario que est
viendo nuestras pginas, podemos indicar ms de uno
separado por comas. 9i el navegador no encuentra
ninguno seguir utilizando el que tiene por defecto:
<font face="Jel(etica%3rial%*imes">5o sK como
(oy
a salir exactamente</font>
La cabecera
!dems del t"tulo de la pgina, uno de los elementos que
se pueden incluir aqu" son los meta. Entre otras cosas,
sirven para indicar propiedades de la pgina como pueda
ser el nombre de su autor. 0or e3emplo,
<meta name="autor" content="LosK Cernando">
Estas son las propiedades ms comunes:
author
1utor de la p$ina.
generator
-erramienta utilizada para hacer la p$ina.
classification
*ala,ras que permite clasificar la p$ina dentro
de un ,uscador !errquico.
#ey'ords
*ala,ras cla#e por las que se encontrar la
p$ina en los ,uscadores.
description
2escripci8n del contenido de la p$ina.
Tam,i5n suele ser el lu$ar ms indicado para colocar
aquellos elementos de la p$ina que no alteran el
contenido de la misma, aunque si la forma de
presentarla % su comportamiento. &s por eso que es el
lu$ar ms recomenda,le para colocar los scripts % las
ho!as de estilo.
El cuerpo
La etiqueta <body> admite los siguientes parmetros :
bgcolor=";xxxxxx"
*ermite definir el color de fondo de la p$ina.
bac#ground="imagen.gif"
*ermite poner un $rfico de fondo para la
p$ina. Io se de,e poner una ima$en mu%
"pesada" de fondo, no mas de 15K. Ii ol#idar
#erificar que no dificulte la lectura del texto.
bgproperties="fixed"
&l $rfico definido como fondo de la p$ina
permanecer inm8#il aunque utilicemos las
,arras de desplazamiento.
text=";xxxxxx"
am,ia el color del texto.
lin#=";xxxxxx"
am,ia el color de un enlace no #isitado 'por
defecto azul(.
(lin#=";xxxxxx"
am,ia el color de un enlace %a #isitado 'por
defecto p0rpura(.
alin#=";xxxxxx"
am,ia el color que toma un enlace mientras lo
estamos pulsando 'por defecto ro!o(.
leftmargin="num"% topmargin="num"
&specifican el n0mero de pixels que de!ar de
mar$en entre el ,orde de la #entana % el
contenido de la p$ina. "e suelen utilizar para
de!arlos a cero.
margin'idth="num"% marginheight="num"
.s o menos equi#alentes a los anteriores, pero
5stos funcionan en Ietscape.
Io resulta recomenda,le cam,iar los colores del texto %
enlaces a no ser que exista al$una dificultad al leerlos
por ha,er cam,iado el fondo, %a que en muchas
ocasiones el usuario ha podido cam,iarlos en las
opciones de su na#e$ador % estarn %a a su $usto.