MANUAL BSICO DE CREACIN DE PGINAS WEB MANUAL BSICO DE CREACIN DE PGINAS WEB

MANUAL BSICO DE CREACIN DE PGINAS WEB 7

INTRODUCCIN 7
EL LENGUAJE HTML. 8
MI PRIMER DOCUMENTO HTML. 8
CARACTERSTICAS GENERALES DEL LENGUAJE HTML.. 9
Marcas y atributos. 9
Concatenacin de marcas. 10
CUATRO NORMAS FUNDAMENTALES 10
HTML es simplemente texto 10
Igualdad de maysculas y minsculas. 10
o importan los tabuladores! ni los saltos de l"nea 10
Caracteres especiales 10
ESTRUCTURA DE UN DOCUMENTO HTML. 11
COMANDOS BSICOS DE HTML 12
#e$inicin de p%rra$os& ' 1(
)uptura de l"neas& *). 1(
Titulos de encabe+amiento 1(
#ando estilo al texto 1,
Tipos de letras 13
Tamao del texto. 13
Colores del texto. 15
Listas 1-
Listas ordenadas: OL. 15
Listas desordenadas: UL. 16
Listas de definicin: DL. 16
Texto pre$ormateado& ').. 1/
Centrando texto. 1/
L"neas 0ori+ontales. 11
Comentarios no 2isibles en la pantalla 11
ENLACES A. 19
.nlaces a otras +onas de la misma p%gina (0
.nlaces a otras p%ginas ((
.nlaces a una +ona de otra p%gina (,
IMGENES 2!
'rincipales $ormatos gr%$icos en Internet. (3
Formato !F. "#
Formato $%&. "#
Inclusin de im%genes (-
Tamao de las im'(enes. "5
&scalado de im'(enes. "5
)ordes de la ima(en. "5
*lineacin de texto con las im'(enes. "6
!m'(enes con texto alternati+o. "6
Uso de im'(enes como enlaces. "6
!m'(enes como fondo de ,n doc,mento. "6
-apas sensiti+os. ".
TABLAS 28
T"tulo de la tabla. (1
*ordes de la tabla. (9
Cabeceras de $ilas y de columnas. (9
Tama4o de la tabla. (9
5usti$icacin de la tabla. ,0
.spacio dentro de las celdas. ,0
6orma de las celdas indi2iduales. ,0
$,stificacin del texto de las celdas. 3/
Celdas de diferentes tamaos. 31
Celdas irre(,lares. 31
Color de cada celda. 3"
Texto en ,na solo l0nea. 3"
EDITORES " CON#ERSORES !2
.ditores ,,
Con2ersores ,3
PUBLICAR LAS PGINAS EN INTERNET. !$
DIRECCIONES INTERNET DE INTER%S. !&
BIBLIOGRAFA. !&
MANUAL BSICO DE CREACIN DE PGINAS WEB MANUAL BSICO DE CREACIN DE PGINAS WEB
INTRODUCCIN
&ste man,al est' pensado para aprender los conceptos 1'sicos necesarios para constr,ir s,s
propias p'(inas 2e1. %ara 3,ien 3,iera ampliar s,s conocimientos se s,ministran tam1i4n
,nas referencias de cons,lta a otros sitios del 2e1.
&n s, confeccin se 5a proc,rado se(,ir siempre ,n criterio eminentemente pr'ctico. %ara
me6or asimilar los conceptos tratados7 se propone al final de cada apartado ,n e6emplo
pr'ctico.
Primeras herramientas: %ara comen8ar slo son necesarios dos elementos:
Un editor de texto. 9ale c,al3,iera7 siempre 3,e no formatee el texto. %or ello7 los m's
adec,ados son los m's sencillos :como por e6.7 &l 1loc; de notas de<. =i se ,tili8an
procesadores como el 2ord7 se de1en (,ardar los fic5eros como >=lo Texto>7 para 3,e
no introd,8ca rdenes de formateo7 3,e p,eden pro+ocar errores al car(arlo en el
na+e(ador.
Un visualizador o navegador del 2e1: ?etscape7 -=! &xplorer7 -osaic7 etc.
&l editor de texto lo ,saremos para ir escri1iendo los doc,mentos @T-L7 3,e ser'
posteriormente interpretado por el na+e(ador7 con lo 3,e iremos compro1ando los cam1ios
A aadidos 3,e +aAamos efect,ando.
&xisten ciertos pro(ramas 3,e nos aA,dan a a,tomati8ar este proceso7 pero es m,A
con+eniente comen8ar a 5acerlo de ,na manera man,al7 para comprender 1ien la estr,ct,ra
del len(,a6e @T-L
Mtodo de trabajo: Con el editor de texto crearemos ,n fic5ero con el nom1re 3,e
3,eramos :p. e6. e6emplo1<7 pero 3,e de1e tener necesariamente la extensin .5tml :o .5tm
si n,estro sistema operati+o no soporta extensiones de m's de tres letras<.
@a1r' ,n fic5ero distinto para cada apartadoB con+iene crear ,n directorio espec0fico en s,
ordenador e irlos (,ardando en 4l7 para poder repasar lo aprendido7 aparte de 3,e p,eden
ser necesarios para e6ec,tar otros e6emplos pr'cticos.
EL LENGUAJE HTML.
@T-L es ,n len(,a6e 3,e se ,tili8a para la creacin de p'(inas en la 222. %or p'(ina
entenderemos el doc,mento 3,e aparece en el +is,ali8ador.
@T-L se compone de ,na serie de comandos7 3,e son interpretados por el +is,ali8ador7 o
pro(rama 3,e ,tili8amos para na+e(ar por el 222. &n Cltima instancia es el +is,ali8ador
el 3,e e6ec,ta todas las rdenes contenidas en el cdi(o @T-L7 de forma 3,e ,n
+is,ali8ador p,ede estar capacitado para ,nas prestaciones7 pero no para otras. *s07
podremos especificar 3,e ,na p'(ina ten(a ,na ima(en de fondo7 o ,n texto parpadeando7
pero si n,estro +is,ali8ador no est' capacitado para esas f,nciones7 no podremos +erlas.
&n esta (,0a se expondr'n los comandos f,ndamentales de @T-L.
MI PRIMER DOCUMENTO HTML.
=i(a las si(,ientes instr,cciones atentamenteB ellas le permitir'n crear ,n doc,mento
@T-L en s, ordenadorB este arc5i+o no ser' +isi1le para otros ,s,arios de !nternet.
Le recomiendo 3,e cree ,n directorio en s, ordenador para almacenar las p'(inas De1 3,e
+aAa 5aciendo al aprenderB A 3,e practi3,e ,n tiempo antes de poner p'(inas en !nternet.
1. *1ra el editor de textos: en 2indoDs a1ra el )loc; de ?otas
2. Teclee lo si(,iente:
<HTML>
<HEAD>
<TITLE>Ejemplo 1 - Mi primera pagina Web</TITLE>
</HEAD>
<BODY>
<CETE!><H1>Mi primera pagina Web</H1></CETE!>
<H!>
E"#a e" mi primera pagina$ a%n&%e #o'a(ia e" m%) "en*illa+ <B!>Como
el leng%aje HTML no e" 'i,i*il$ pron#o e"#are en *on'i*ione" 'e
-a*er *o"a" ma" in#ere"an#e"+
<.> A&%/ (a %n "eg%n'o parra,o+</.>
</BODY>
</HTML>
3. ra1e este arc5i+o con el nom1re: ejemplo1.html
4. *1ra el +is,ali8ador. ?o necesita conectarse a !nternet para +er las p'(inas en s,
comp,tador. %,ede tra1a6ar OffEline
5. &li6a F*rc5i+oG*1rir p'(inaF en la 1arra de menC del na+e(ador.
. =eleccione el arc5i+o e6emplo1.5tml 3,e aca1a de crear.
Las l0neas en 1lanco A las indentaciones del texto se 5an p,esto para maAor claridad7 pero
no son necesarias. De 5ec5o7 podr0a estar todo en ,na sola l0nea. Lo importante es el orden
correcto de las eti3,etas. %or cierto7 ,na eti3,eta p,ede estar anidada dentro de otra. 94ase
en el e6emplo cmo lo est' la eti3,eta HC&?T&IJ dentro de la eti3,eta H@1J. &s m,A
importante7 en estos casos7 3,e las eti3,etas de inicio A de cierre +aAan en el orden correcto7
p,es de lo contrario se prod,cir0an errores.
O1s4r+ese adem's la falta de los acentos. =e 5a1lar' m's adelante so1re el moti+o de ello.
KUsted 5a creado s, primer doc,mento @T-LL.
CARACTERSTICAS GENERALES DEL LENGUAJE HTML..
Marcas y atributos.
&l len(,a6e @T-L se estr,ct,ra ,tili8ando marcas o eti3,etas o comandos :a partir de
a5ora ,tili8aremos indistintamente ,no de 3 t4rminos para denominar a los elementos 3,e
se estr,ct,ra @T-L<. La forma (eneral de ,na marca es la de ,n comando @T-L
encerrado entre dos si(nos de menor A maAor como a contin,acin se m,estra:
Hmarca Matri1,tosNJ ......................................MHGmarcaJN
&l mecanismo de f,ncionamiento de estas marcas es m,A sencillo. C,ando el +is,ali8ador
enc,entra el si(no menor :H<7 examina todos los caracteres 5asta 3,e enc,entra el final de
la marca E el s0m1olo maAor :J<. &ntonces7 interpreta el contenido de la marca7 A aplica esa
propiedad al texto 3,e +iene a contin,acin.
@aA marcas 3,e se aplican a todo el doc,mento @T-L7 o slo desde el p,nto en 3,e son
insertadas 5asta el final del doc,mento. Otras se aplican excl,si+amente a ,n fra(mento del
texto. &n ese caso7 el final de la aplicacin se especifica con la misma marca precedida de
la 1arra inclinada 5acia atr's :G<.
Las marcas p,eden contener de forma opcional , o1li(atoria7 lo 3,e se denominan atri1,tos
o modificadores. Los atri1,tos mati8an el si(nificado de la marca7 A 3,e se expresan de la
si(,iente forma:
Hmarca atri11OP+alor1Q atri1"OP+alor"Q..............J
&l +alor de los atri1,tos se expresan encerrados entre comillas.
&n la maAor parte de los +is,ali8adores es posi1le omitir las comillas A colocar
directamente el +alor del atri1,to. &sta pr'ctica. a pesar de estar extendida7 no es m,A
aconse6a1le Aa 3,e no est' normali8ada7 A no esta soportada por la totalidad de los
+is,ali8adores.
*l(,nos atri1,tos slo +iene definidos por s, nom1re :no tienen +alor<B son los atri1,tos
llamados !ompa!tos.
Concatnaci!n " #arcas.
Las marcas se p,eden anidar o encadenar ,na a contin,acin de otra7 de forma 3,e se
p,eden aplicar sim,lt'neamente +arias propiedades a ,na misma porcin de doc,mento.
*s0 el texto encerrado en las marcas:
H-*IC*1JH-*IC*"J Texto HG-*IC*"JHG-*IC*1J
3,eda afectado tanto por las propiedades de la -*IC*1 como por los de la -*IC*".
Todas las marcas son independientes entre s07 por los las si(,ientes l0neas de cdi(o @T-L7
tiene efectos id4nticos7 sean c,ales sean las marcas concretas:
H-*IC*1JH-*IC*"J Texto HG-*IC*"JHG-*IC*1J
H-*IC*1JH-*IC*"J Texto HG-*IC*1JHG-*IC*"J
H-*IC*"JH-*IC*1J Texto HG-*IC*1JHG-*IC*"J
H-*IC*"JH-*IC*"J Texto HG-*IC*"JHG-*IC*1J
* pesar de 3,e son expresiones completamente id4nticas7 es recomenda1le se(,ir el orden
l(ico de la concatenacin7 Aa 3,e esto facilita de forma s,stancial la edicin de
doc,mentos @T-L. De las c,atro opciones anteriores7 las correctas ser0an la primera A la
tercera.
CUATRO NORMAS FUNDAMENTALES
$%ML s si#&'#nt t(to
Lo primero es sa1er 3,e ,n doc,mento @T-L es ,n arc5i+o de texto simple7 l,e(o7 se
p,ede editar con c,al3,ier editor de texto sencillo7 como el )loc; de ?otas de 2indoDs.
I)ua'"a" " #ay*scu'as y #in*scu'as.
@T-L no distin(,e entre maACsc,las A minCsc,las en la especificacin de marcas A s,s
atri1,tos. =in em1ar(o7 por le(i1ilidad7 es aconse6a1le codificar tanto marcas como
atri1,tos en maACsc,las.
No i#&ortan 'os tabu'a"ors+ ni 'os sa'tos " ',na
Los +is,ali8adores no toman en c,enta las ta1,laciones7 los saltos de l0nea ni los espacios
en 1lanco extra. &sto tiene +enta6as A des+enta6as. La principal +enta6a es 3,e permite
o1tener res,ltados ,niformes A de 1,ena presentacin de manera 1astante f'cil.
La principal des+enta6a es 3,e ,n doc,mento @T-L7 por lo menos se de1e ,sar las marcas
H%J...HG%J o H)IJ para e+itar 3,e 3,ede todo el texto en ,na sola l0nea.
Caractrs s&cia's
&n @T-L existen al(,nos caracteres 3,e son especiales por3,e 6,e(an ,n papel dentro del
mecanismo del f,ncionamiento de @T-L7 como s,cede con los s0m1olos maAor 3,e :J< A
menor 3,e :H<7 A otros por3,e en los primeros tiempos de @T-L7 no forma1an parte del
6,e(o de caracteres internacionales del alfa1eto7 como s,cede con los acentos.
=ea por los moti+os 3,e f,ere7 el caso es 3,e existen ciertos s0m1olos 3,e no p,eden
escri1irse directamente7 sino 3,e de1en s,stit,irse por ,na cadena de caracteres 3,e el
+is,ali8ador interpretar' de forma correcta. &stas cadenas de caracteres comien8an siempre
por el s0m1olo :R< se(,ido de ,na com1inacin de caracteres alfa14ticos 3,e tienen ,n
si(nificado especial en @T-L. &n la si(,iente ta1la se m,estra cmo escri1ir al(,nos de
estos caracteres:
Car'cter especial Transcripcin @T-L Comentario
Los acentos RH+ocal a acent,arJ ac,teB &n la act,alidad la maAor0a
de los 1roDsers los soportan
=0m1olo menor 3,e :H< Rlt:
=0m1olo maAor 3,e :J< R(tB
La ee RntildeB &n la act,alidad la maAor0a
de los 1roDsers la soportan
&spacios en 1lanco Rn1spB :non 1rea;in(
space<
@T-L slo reconoce ,n
espacio en 1lanco entre
pala1ras
De manera m's (eneral7 para representar s0m1olos reser+ados o s0m1olos partic,lares7 se
p,ede ,tili8ar el cdi(o *=C!! del s0m1olo mediante la sintaxis si(,iente:
RScdi(oT*=C!!B
ESTRUCTURA DE UN DOCUMENTO HTML.
Un doc,mento @T-L7 no es m's 3,e el texto definido entre las marcas:
H@T-LJ
.....................
HG@T-LJ
Un doc,mento @T-L siempre se compone de las si(,ientes " partes:
H@T-LJ
H@&*DJ Ca1ecera del doc,mento
HG@&*DJ
H)ODUJ Contenido del doc,mento
HG)ODUJ
HG@T-LJ
Ca1ecera: =e inicia mediante el comando H@&*DJ A se termina con HG@&*DJ.
Dentro de la ca1ecera 5aA informacin del doc,mento7 3,e no se +e en la pantalla
principal7 A 3,e precisa las caracter0sticas del doc,mento7 principalmente el t0t,lo del
doc,mento.
&l t0t,lo del doc,mento se declara entre las eti3,etas HT!TL&J A HGT!TL&J. &l t0t,lo
de1e ser 1re+e A descripti+o de s, contenido7 p,es ser' lo 3,e +ean los dem's c,ando
aadan n,estra p'(ina a s, 1oo;mar; :o a(enda de direcciones fa+oritas<.
C,erpo: se inicia mediante el comando H)ODUJ A se termina con el comando
HG)ODUJ. &ste comando acepta n,merosos modificadores. Dentro del c,erpo del
doc,mento se incl,Ae c,al3,ier car'cter imprimi1le.
&n la pr'ctica al(,nos +is,ali8adores no necesitan las eti3,etas de comien8o A cierre de
H@T-LJ7 H@&*DJ7 A H)ODUJ para interpretar ,n doc,mento @T-L. =in em1ar(o7
c,ando diseemos ,n p'(ina 2e1 de1emos tener en c,enta a la maAor0a de ,s,arios
posi1les7 por lo 3,e es m,A recomenda1le incl,ir estas marcas.
COMANDOS BSICOS DE HTML
* contin,acin se descri1en las marcas 1'sicas de @T-L 3,e se p,eden incl,ir en el
c,erpo de ,n doc,mento @T-L.
D-nici!n " &.rra/os0 P
La marca H%J sir+e para separar p'rrafos en @T-L. *dem's de introd,cir ,n retorno de
carro7 f,er8a ,n se(,ndo retorno de carro para de6ar ,na l0nea en 1lanco entre ,n p'rrafo A
el si(,iente. De esta manera los p'rrafos 3,edan m's espaciados A el texto se +,el+e m's
le(i1le
&n esta marca la eti3,eta de fin es opcional.
%or defecto7 el p'rrafo de ,n doc,mento @T-L est' 6,stificado a la i83,ierda. %ero
podemos modificar la alineacin 5ori8ontal de ,n p'rrafo mediante el atri1,to *L!? de la
marca H%J7 3,e p,ede tomar los +alores si(,ientes.
L&FT: el p'rrafo es 6,stificado a la i83,ierda. 9alor por defecto.
C&?T&I: el p'rrafo es centrado.
I!@T: el p'rrafo es 6,stificado a la derec5a.
Ru&tura " ',nas0 BR.
La marca H)IJ introd,ce ,n retorno de carro :o salto de l0nea< en el p,nto del doc,mento
en el 3,e es colocada. &s e3,i+alente al p,nto A aparte de ,n texto normal.
&sta marca es +ac0a de manera 3,e no necesita de la eti3,eta de fin de marca.
%itu'os " ncab1a#into
@T-L dispone de seis ca1eceras7 o tipos de letra predefinidos de distinto tamao7 3,e se
,tili8an para marcar los t0t,los o resaltes en las p'(inas. =e acti+an con el comando H@nJ A
se desacti+an con HG@nJ7 donde n es ,n nCmero de 1 a 6. siendo el nCmero indicati+o del
tamao. &l tamao maAor es el correspondiente al nCmero 1.
H@1J?i+el de enca1e8ado 1HG@1J
H@"J?i+el de enca1e8ado "HG@"J
H@3J?i+el de enca1e8ado 3HG@3J
H@#J?i+el de enca1e8ado #HG@#J
H@5J?i+el de enca1e8ado 5HG@5J
H@6J?i+el de enca1e8ado 6HG@6J
%,ede experimentar en el e6emplo anterior7 cam1iando el nCmero para compro1ar el efecto
3,e se lo(ra.
Los t0t,los de enca1e8ado re3,ieren la marca de fin7 A siempre pro+ocan ,n salto de l0nea7
a,n3,e no se le indi3,e.
Dan"o sti'o a' t(to
Las marcas de estilo de texto especifican el tipo de letra :ne(rita7 c,rsi+a7 ..<7 tamao7 color
3,e se desea 3,e apare8ca el texto.
%i&os " 'tras
*l(,nas de las marcas 3,e permiten especificar la tipo(raf0a de los caracteres son las
si(,ientes:
H)J?e(rita :)old<HG)J
H!JC,rsi+a :!talic<HG!J
H)L!?VJ%arpadeante :)lin;<HG)L!?VJ
HTTJTamano fi6o :TApe2riter<HGTTJ
H&-J4nfasis :&mp5asis<HG&-J
H=TIO?Jran 4nfasis :=tron(<HG=TIO?J
HUJ=,1raAado :Underline<HGUJ
Todas estas marcas re3,ieren eti3,etas de comien8o A fin7 A se p,eden anidar.
%a#a2o "' t(to.
%ara modificar el tamao se ,tili8a el atri1,to =!W& de la marca HFO?TJ7 de la manera
si(,iente:
HFO?T =!W&OFtamaoFJTextoHGFO?TJ
&l comando HFO?TJ re3,iere la eti3,eta de cierre.
@T-L define siete tamaos de letra distintos7 siendo el tamao 3 el 3,e se adopta por
defecto. =in em1ar(o7 la maAor0a de los na+e(adores permiten esta1lecer c,'l es la
correspondencia real del tamao 3. *s07 se p,ede 5acer 3,e el tamao 3 corresponda a ,na
f,ente *rial de 167 o a ,na Times de X.
&xisten dos formas de esta1lecer el tamao de ,n tro8o de texto.
Tamao de texto a1sol,to.
HFO?T =!W&OQar(,mentoQJTextoHGFO?TJ
donde ar(,mento es ,n nCmero entre 1 A .
Tamao de letra relati+os.
HFO?T =!W&OQar(,mentoQJTextoHGFO?TJ
donde ar(,mento es ,na cadena de caracteres 3,e nos indica7 con ,n si(no Y
E7 el nCmero de +eces 3,e esa f,ente +a ser maAor o menor 3,e el tamao
de la f,ente por defecto
&l ,so de tamaos relati+os nos permite ol+idarnos de c,al es el tamao de letra 3,e se est'
,tili8ando en el momento act,al7 por lo 3,e7 en (eneral7 ser' preferi1le a ,tili8ar tamaos de
letra a1sol,tos.
=i 3,eremos modificar el tamao de todo el texto del doc,mento7 ,na forma de 5acerlo
ser0a en(lo1ar todo el c,erpo del doc,mento en ,na eti3,eta con el tamao de letra 3,e
7ueremos ,tili8ar. *s0 escri1iremos al(o parecido a lo 3,e si(,e:
H@T-LJ
H@&*DJ
...........
HG@&*DJ
H)ODUJHFO?T =!W&OP#QJ
........
:contenido del doc,mento<
.......
HGFO?TJHG)ODUJ
HG@T-LJ
=in em1ar(o7 5aA otra forma de 5acerlo m's ele(ante A le(i1le7 ,tili8ando la si(,iente
eti3,eta:
H)*=&FO?T =!W&OFtamaoFJ
&ste eti3,eta p,ede sit,arse en c,al3,ier l,(ar del doc,mento. =in em1ar(o7 como se trata
de ,na eti3,eta 3,e afecta a todo el doc,mento7 para mantener la le(i1ilidad lo m's l(ico
es colocarlo en la ca1ecera.
=i fi6amos ,n tamao de letra 1'sico distinto del 37 de1emos tener en c,enta 3,e es posi1le
3,e al(,no de los tamaos relati+os no p,eda lle+arse a ca1o7 p,esto 3,e se sale de los
l0mites especificados.
Co'ors "' t(to.
%ara dar color a ,n texto se ,tili8a el comando si(,iente:
HFO?T COLOIOFcolorFJTextoHGFO?TJ
&n ,n principio la forma de especificar ,n color en @T-L7 era mediante el formato
5exadecimal. Consist0a en tres nCmeros 5exadecimales :nCmeros expresados en 1ase 16< de
dos d0(itos cada ,no. Con ,n nCmero 5exadecimal de dos d0(itos podemos expresar 5asta
"56 +alores distintos. &l primer nCmero 5exadecimal nos +a a indicar la cantidad de ro6o
3,e tiene n,estro color7 el se(,ndo la cantidad de +erde7 A el tercero la cantidad de a8,l :el
1lanco ser' FFFFFF7 el ne(ro //////<. &sta forma de definir los colores como com1inacin
de los colores ro6o7 +erde7 A a8,l se denomina I) :red E (reen E 1l,e<.
*fort,nadamente7 la maAor0a de los +is,ali8adores7 al menos en s,s Cltimas +ersiones7
admiten otra forma de insertar colores. &n l,(ar de expresarlos7 en formato 5exadecimal7 se
expresan como cadena de caracteres. &sta cadena es el nom1re del color en in(l4s.
%ara dar color a todo el texto del doc,mento podemos 5acerlo con:
H)ODU T&ZTOP1l,eQJ
%ara especificar el color de fondo del doc,mento de1eremos ,tili8ar:
H)ODU )COLOIOP1l,eQJ
Listas
Las listas en @T-L proporcionan ,na forma de clasificar la informacin7 A 5acer 3,e 4sta
sea m's inteli(i1le por parte del +isitante de las p'(inas.
Listas or"na"as0 OL.
Tam1i4n llamadas listas n,meradas son a3,ellas en las 3,e cada elemento tiene delante ,n
nCmero 3,e indica el orden del elemento dentro del con6,nto de la lista.
La marca para crear ,na lista ordenada es HOLJ .... HGOLJ. =on o1li(atorias las eti3,etas
de comien8o A fin de estas marcas.
Cada elemento de la lista ordenada se identifica escri1i4ndolo dentro de la marca HL!J ....
HGL!J. La eti3,eta de fin p,ede ser omitida.
Con la marca L! no es necesario introd,cir ,n retorno de carro detr's de cada elemento de
la lista.
&s posi1le especificar el tipo de n,meracin 3,e se dar' :nCmeros ar'1i(os7 nCmeros
romanos7 letras7 etc.<7 por defecto se si(,e la n,meracin 'ra1e.
Las listas n,meradas p,eden ser anidadas ,na dentro de otra.
Listas "sor"na"as0 UL.
Tam1i4n llamadas listas no n,meradas son listas en las 3,e no es necesario n,merar de
al(,na manera los elementos 3,e la componen7 sino 3,e cada elemento tiene delante ,n
s0m1olo :,n p,nto7 ,n c,adrado7 etc..<.
La forma de especificar ,na lista desordenada es mediante la marca HULJ. Las eti3,etas de
comien8o A fin de esta marca son o1li(atorias.
Cada elemento de la lista se identifica mediante la marca HL!J. La eti3,eta de fin para la
marca HL!J se p,ede omitir
Tam1i4n es posi1le en las listas desordenadas especificar el s0m1olo 3,e +a a aparecer
delante de cada elemento de la lista.
Las listas desordenadas tam1i4n p,eden ser anidadas ,na dentro de otra.
Listas " "-nici!n0 DL.
* diferencia de los dos tipos anteriores de listas7 las listas de definicin7 se ,tili8an para
presentar la informacin sin marcas7 ni nCmeros7 sino 3,e ,tili8a los san(rados de los
p'rrafos.
Las listas de definicin est'n constit,idas por t4rminos A s, s,1si(,iente definicin.
La forma de implementar las listas de definicin es con la marca HDLJ de la si(,iente
forma:
HDLJ
HDTJ ?om1re del termino
HDDJ Definicin del t4rmino
HGDLJ
Cada t4rmino de la lista de definicin se indica con la marca HDTJ A no san(rar'7 mientras
3,e la descripcin del t4rmino se indica con la marca HDDJ A san(rar' 5acia la derec5a
para resaltarla del t4rmino.
*ntes A desp,4s de la descripcin de cada pala1ra cla+e7 las listas de definicin incorporan
,n retorno de carro7
Las listas de definicin tam1i4n p,eden anidarse.
%(to &r/or#ata"o0 PRE.
&l 5ec5o de 3,e @T-L i(nore los retornos de carro a la 5ora de mostrar ,n texto no es ,n
comportamiento ar1itrario7 sino 3,e es la forma 3,e tenemos de 3,e7 independientemente
de la +entana del +is,ali8ador7 n,estro p'rrafo 3,ede con+enientemente 6,stificado
=in em1ar(o7 es posi1le 3,e en al(,na ocasin 3,eramos 3,e el texto apare8ca en el
+is,ali8ador tal A como lo 5emos introd,cido7 respetando los retornos de carro e incl,so los
espacios 3,e podamos 5a1er de6ado entre caracteres. %ara ello podemos ,tili8ar la marca
H%I&J A en(lo1ar en ella todo el texto del doc,mento.
La marca H%I&J respeta tanto los retornos de carro como los espacios en 1lanco del
arc5i+o ori(inal7 A la letra aparece como tipo de letra de espacio no proporcional :&l tipo de
letra ,sado por el texto preformateado es el mismo 3,e el de HTTJ ... HGTTJ<7 A no con el
tipo de letra 5a1it,al del +is,ali8ador. &sta marca permite mostrar el texto preformateado
tal c,al.
*dem's7 en el texto preformateado no se interpretan los caracteres especiales @T-L: H7 J
A R.
&sta marca re3,iere de las eti3,etas de comien8o A fin.
Cntran"o t(to.
%ara centrar ,na parte del doc,mento7 se delimita lo 3,e se desea centrar mediante el
comando HC&?T&IJ ... HGC&?T&IJ.
L,nas 3ori1onta's.
La marca H@IJ permite tra8ar ,na l0neas 5ori8ontales para separar distintas secciones de
,na p'(ina @T-L
%or defecto7 las l0neas 5ori8ontales +an de la parte i83,ierda de la +entana del +is,ali8ador a
la derec5a.. %or otro lado tienen la parte s,perior osc,ra A la inferior clara7 por lo 3,e dan
,na sensacin de relie+e.
&sta marca slo re3,iere la eti3,eta de comien8o.
&sta eti3,eta tiene +arios modificadores 3,e permite cam1iar el aspecto de la l0nea
5ori8ontal :anc5o7 lon(it,d7...<.
Co#ntarios no 4isib's n 'a &anta''a
* +eces es m,A Ctil escri1ir comentarios en el doc,mento @T-L so1re el cdi(o 3,e
escri1imos7 3,e nos p,eden ser+ir para recordar posteriormente so1re lo 3,e 5icimos7 A 3,e
no 3,eremos 3,e se +ean en pantalla.
&sto se consi(,e encerrando dic5os comentarios entre estos dos s0m1olos: HLEE A EEJ
&6emplo:
HLEE &sto es ,n comentario al cdi(o 3,e no se +er' en pantalla EEJ
&6emplo pr'ctico n["
&n el editor de textos copiamos:
<HTML>
<HEAD>
<TITLE>Ejemplo 0 - Coman'o" b1aa*%#e2"i*o"</TITLE>
</HEAD>
<BODY>
<CETE!><H1>Coman'o" b1aa*%#e2"i*o"</H1></CETE!>
<3-- E"#e 'o*%men#o *on#iene #o'o lo &%e -e apren'i'o -a"#a a-ora "obre
HTMl -->
<H0>.1aa*%#e2rra,o"</H0>
<.>E"#e e" mi primer p1aa*%#e2rra,o 'el ejemplo 0</.>
<.>E"#e e" mi "eg%n'o parr1aa*%#e2,o+ A&%/ -a) %na r%p#%ra 'e l/nea<B!>'e
#e4#o</.>
<H!>
<H0>Li"#a"</H0>
<H5>Or'ena'a"</H5>
<.>La <6OT 7I8E9:;1:><I>m%"i*a</I></6OT> &%e ma" me g%"#a e" <I> <en
or'en 'e pre,eren*ia=> </I></.>
<OL>
<LI>El ro*?</LI>
<LI>El ja@@ <3-- la mar*a LI no ne*e"i#a 'e la e#i&%e#a 'e *ierre
-->
<LI>La m%"i*a *la"i*a
</OL>
<H5>De"or'ena'a"</H5>
<.>7in %n or'en par#i*%lar$ mi" <6OT COLO!9:green:><B> a,i*ione"
</B></6OT> "on la" "ig%ien#e"></.>
<AL>
<LI>El *ine
<LI>El 'epor#e
<LI>a#a*ion
<LI>Balon*e"#o
</AL>
<H0>De 'e,ini*iBn</H0>
<DL>
<DT>De"*rip*ion</DT>
<DD>E" nombrar la" propie'a'e" 'e algo
<DT>Li"#a 'e"*rip#i(a</DT>
<DD>E" nombrar la" propie'a'e" 'e (ario" obje#o"
</DL>
<H!>
<CETE!>Tambi1ea*%#e2n "abemo" *en#rar el #e4#o</CETE!>
<.!E> ) e"*ribir pre,orma#ea'o </.!E>
<BLIC>) a e"*ribir #e4#o parpa'ean#e</BLIC>
<H!>
</BODY>
</HTML>
,ardamos el fic5ero de texto con el nom1re ejemplo2.html A lo car(amos en el na+e(ador.
ENLACES: A.
La cla+e de la facilidad de ,so de los doc,mentos @T-L7 reside f,ndamentalmente en los enlaces.
Los enlaces :o lin;s< proporciona al 3,e +isita las p'(inas ,n mecanismo m,A sencillo para mo+erse
entre distintos doc,mentos7 permiti4ndole mo+erse en a3,ellos aspectos 3,e considere m's
importantes7 mientras 3,e desde el p,nto de +ista del 3,e crea las p'(inas permite distri1,ir de
forma transparente al +isitante el l,(ar o l,(ares en los 3,e se +an a almacenar los distintos
doc,mentos.
%ara definir enlaces 5ipertexto se ,tili8a la marca H*J de la manera si(,iente:
H* @I&FOQdireccionQJTexto del enlaceHG*J
donde:
direccion: es el destino del enlace.
texto del enlace: es el texto indicati+o del enlace 3,e aparece en la
pantalla normalmente con color especial A s,1raAado.
H*J re3,iere de la marca de fin.
9amos a distin(,ir tres tipos de enlaces:
1. &nlaces a otras 8onas de la misma p'(ina
". &nlaces a otras p'(inas.
3. &nlaces a otras 8onas de otras p'(inas.
En'acs a otras 1onas " 'a #is#a &.)ina
* +eces7 en el caso de doc,mentos :o p'(inas< m,A extensos7 nos p,ede interesar dar ,n
salto desde ,na posicin a otra determinada.
*s0 es posi1le 5acer enlaces 3,e lle+en al ,s,ario de ,na parte del doc,mento a otra dentro
del mismo doc,mento con solo 5acer clic;. * este tipo de enlaces los llamaremos enlaces
locales.
&stos enlaces constan de dos o16etos:
&l enlace:
Corresponde a la 8ona en la c,al el ,s,ario 5ar' clic;7 para +ia6ar a otra parte del
doc,mento.
&sta 8ona aparece s,1raAada en el doc,mento. Un enlace local se crea delimitando
la 8ona con el comando H* 5refOFSnom1reFJ ... HG*J7 en 3,e nom1re es la eti3,eta
3,e se est' referenciando.
&l nom1re enla8ado o referenciado
Corresponde a la 8ona del doc,mento a la c,al el ,s,ario lle(ar' al 5acer clic; en la
referencia correspondiente. Un nom1re local se crea delimitando la 8ona con el
comando H* ?*-&OFnom1reFJ ... HG*J7 en 3,e nom1re es la eti3,eta 3,e
asi(namos a esta 8ona.
&6emplo pr'ctico n[ 3 de enlaces locales
<HTML>
<HEAD>
<TITLE>Ejemplo 5 - Enla*e" lo*ale"</TITLE>
</HEAD>
<BODY>
<H0>Enla*e" lo*ale"</H0>
<H5><A AME9:in'i*e:>In'i*e</A></H5>
<AL>
<LI><A H!E69:D%no:>7e**iBn %no</A>
<LI><A H!E69:D'o":>7e**iBn 'o"</A>
<LI><A H!E69:D#re":>7e**iBn #re"</A>
<LI><A H!E69:D*%a#ro:>7e**iBn *%a#ro</A>
<LI><A H!E69:D*in*o:>7e**iBn *in*o</A>
<LI><A H!E69:D"ei":>7e**iBn "ei"</A>
<LI><A H!E69:D"ie#e:>7e**iBn "ie#e</A>
<LI><A H!E69:Do*-o:>7e**iBn o*-o</A>
</AL>
<H5><A AME9:%no:>7e**iBn %no</A></H5>
<.>E"#a e" la "e**i1oa*%#e2n 1 'e la pagina 'e enla*e" lo*ale"</.>
<.>Cli*? a&%i para <A -re,9:Din'i*e:>(ol(er al /n'i*e</A>
<H5><A AME9:'o":>7e**iBn 'o"</A></H5>
<.>E"#a e" la "e**i1oa*%#e2n 0 'e la pagina 'e enla*e" lo*ale"</.>
<.>Cli*? a&%i para <A -re,9:Din'i*e:>(ol(er al /n'i*e</A>
<H5><A AME9:#re":>7e**iBn #re"</A></H5>
<.>E"#a e" la "e**i1oa*%#e2n 5 'e la pagina 'e enla*e" lo*ale"</.>
<.>Cli*? a&%i para <A -re,9:Din'i*e:>(ol(er al /n'i*e</A>
<H5><A AME9:*%a#ro:>7e**iBn *%a#ro</A></H5>
<.>E"#a e" la "e**i1oa*%#e2n E 'e la pagina 'e enla*e" lo*ale"</.>
<.>Cli*? a&%i para <A -re,9:Din'i*e:>(ol(er al /n'i*e</A>
<H5><A AME9:*in*o:>7e**iBn *in*o</A></H5>
<.>E"#a e" la "e**i1oa*%#e2n F 'e la pagina 'e enla*e" lo*ale"</.>
<.>Cli*? a&%i para <A -re,9:Din'i*e:>(ol(er al /n'i*e</A>
<H5><A AME9:"ei":>7e**iBn "ei"</A></H5>
<.>E"#a e" la "e**i1oa*%#e2n G 'e la pagina 'e enla*e" lo*ale"</.>
<.>Cli*? a&%i para <A -re,9:Din'i*e:>(ol(er al /n'i*e</A>
<H5><A AME9:"ie#e:>7e**iBn "ie#e</A></H5>
<.>E"#a e" la "e**i1oa*%#e2n H 'e la pagina 'e enla*e" lo*ale"</.>
<.>Cli*? a&%i para <A -re,9:Din'i*e:>(ol(er al /n'i*e</A>
<H5><A AME9:o*-o:>7e**iBn o*-o</A></H5>
<.>E"#a e" la "e**i1oa*%#e2n I 'e la pagina 'e enla*e" lo*ale"</.>
<.>Cli*? a&%i para <A -re,9:Din'i*e:>(ol(er al /n'i*e</A>
</BODY>
</HTML>
,ardamos el fic5ero de texto con el nom1re ejemplo3.html A lo car(amos en el na+e(ador.
Como +emos7 las referencias locales son m,A Ctiles para crear 0ndices al comien8o del
doc,mento.
En'acs a otras &.)inas
%ara enla8ar a otro doc,mento7 es necesario conocer la ,1icacin exacta del doc,mento 3,e
se referenciar'. Una ,1icacin7 p,ede ser referenciada en forma relati+a o a1sol,ta
U1icacin relati+a:
=e indica especificando la posicin del doc,mento en la estr,ct,ra de s,1directorios
a partir de la ,1icacin del doc,mento act,al. =lo se p,ede ,sar para doc,mentos
,1icados en el mismo ordenador.
Una referencia relati+a a otro doc,mento se 5ace ,sando el comando:
H* @I&FOF,1icacinFJ ... HG*J
U1icacin a1sol,ta:
=e indica especificando el UIL :,niform res,rce locator< de la p'(ina 3,e se est'
referenciando.
Los UIL son ,na manera ,ni+ersal de especificar ,na direccin. La forma m's
1'sica de referenciar ,n 5Apertexto es ,sar el comando:
H* 5refOF5ttp:GGordenadorGdirectorioGarc5i+oFJ ...
&l ordenador indica la m'3,ina donde se enc,entra el doc,mento. &l directorio A
arc5i+o indican s, posicin dentro de ese ordenador. Los UIL tienen m,c5as
formas distintas para referenciar distintos o16etos.
&6emplo pr'ctico n\ #
HHTML>
<HEAD>
<TITLE>Ejemplo E - Enla*e" a o#ra" p1aa*%#e2gina"</TITLE>
</HEAD>
<BODY>
<H1>Enla*e" a o#ra" p1aa*%#e2gina"</H1>
<H0>!e,eren*ia" rela#i(a"</H0>
<.>7e p%e'e re,eren*iar$ por ejemplo$ a %n ar*-i(o lo*ali@a'o en el
mi"mo 'ire*#orio$ *omo por ejemplo$ al <A
-re,9:ejemplo1+-#ml:>ejemplo nJmero 1</A>+ TambiKn a %n ar*-i(o
lo*ali@a'o en o#ro 'ire*#orio$ por ejemplo$ e"#a
<A H!E69:++/g%ia-#ml+-#ml:>g%ia HTML</a></.>
<H0>!e,eren*ia" ab"ol%#a"</H0>
<H5>Alg%no" "er(i*io" WWW en E"paLa</H5>
<.>La <A
H!E69:-##p>//MMM+%m+e"/Nbiblio/:>biblio#e*a 'e la Ani(er"i'a' 'e
M%r*ia</A> &%e permi#e
a**e"o al *a#alogo 'e la biblio#e*a+ TambiKn e"#O el "er(i'or WWW 'e <A
H!E69:-##p>//MMM+re'iri"+e"/:>!e'Iri"</A> ) el "er(i'or
'e <A H!E69:-##p>//MMM+boe+e"/:>BOE</A> para leer *on"%l#ar 'e BOE"
</.>
<H5>Alg%no" "er(i*io" en el e4#ranjero</H5>
<.>.ara in,ormar"e 'e la a*#%ali'a' m%n'ial$ "e p%e'e a**e'er al
"er(i*io <A H!E69:-##p>//MMM+*nn+*om/:>C</A>+ .ara lo" aman#e" 'e
la mJ"i*a "e en*%en#ra el "er(i'or o,i*ial 'e la <A
H!E69:-##p>//m#(+*om/:>MTP</A> ) para lo*ali@ar 'i"#in#o" #ipo" 'e
in,orma*iBn e"#O <A H!E69:-##p>//MMM+)a-oo+*om/:>Ya-oo3</A>+
</BODY>
</HTML>
,ardamos el fic5ero de texto con el nom1re ejemplo4.html A lo car(amos en el na+e(ador.
En'acs a una 1ona " otra &.)ina
%ara este tipo de enlaces se ,tili8a ,na me8cla de las dos formas anteriores. =e indica el
UIL de la p'(ina a referenciar7 l,e(o ,n si(no S A l,e(o el nom1re de la 8ona a referenciar.
&6emplo pr'ctico n[5
<HTML>
<HEAD>
<TITLE>Ejemplo F- Enla*e" a @ona" 'e o#ra" pOgina"</TITLE>
</HEAD>
<BODY>
<H1>Enla*e" a @ona" 'e o#ra" pOgina"</H1>
<.>Enla@amo" a la
<A H!E69:ejemplo5+-#mlD%no:>la
"e**ion 1 'el ejemplo 5</A>+</.>
<.>Enla@amo" a la
<A H!E69:ejemplo5+-#mlD*in*o:>la
"e**i1oa*%#e2n F 'el ejemplo 5</A>+</.>
</BODY>
</HTML>
,ardamos el fic5ero de texto con el nom1re ejemplo5.html A lo car(amos en el na+e(ador.
IMGENES
Las im'(enes son ,n elemento esencial para disear p'(inas atracti+as. ?o o1stante7 ,n
excesi+o nCmero de im'(enes en ,na p'(ina p,eden 5acer ralenti8ar el proceso de
+is,ali8acin :las im'(enes son las partes de las p'(inas 3,e m's espacio oc,pan7 por lo
3,e s, transferencia re3,iere m's tiempo 3,e la del texto<. &s importante conse(,ir ,n
compromiso entre ,na p'(ina atracti+a :lo 3,e lle+a incl,ir (r'ficos<7 A ,na p'(ina 3,e
p,eda car(arse en ,n tiempo ra8ona1le
Princi&a's /or#atos )r.-cos n Intrnt.
&xisten ,na (ran cantidad de formatos (r'ficos en el m,ndo de los ordenadores7 cada ,no
de ellos con s,s +enta6as e incon+enientes. =in em1ar(o7 a la 5ora de p,1licar en !nternet7
solamente de1emos tener en c,enta dos formatos m,A espec0ficos: el !F A el $%&. =,
eleccin no es en a1sol,to ,n capric5o7 adem's de la alta resol,cin 3,e consi(,en7 se trata
como +eremos7 de dos formatos 3,e comprimen el tamao de las im'(enes7 por lo 3,e 4stas
p,eden transmitirse m's r'pidamente por !nternet.
%ara crear A manip,lar im'(enes 5aA 3,e ,tili8ar ,n editor de im'(enes7 entre los m's
conocidos se enc,entran: %aint =5op %ro7 if Constr,ction =et7 A rap5ic 2or;s5op.
5or#ato GI5.
Las si(las !F pro+ienen del in(l4s rap5ics !nterc5an(e Format o formato de intercam1io
de (r'ficos. &st formato f,e desarrollado por Comp,=er+e para proporcionar ,n mecanismo
de transmisin de arc5i+os de im'(enes mediante l0neas telefnicas. &ste mecanismo
consiste en comprimir las im'(enes para ,na transmisin m's r'pida en ,n medio de 1a6a
capacidad como son los 5ilos telefnicos.
Las im'(enes en formato !F est'n limitadas a "56 colores sim,lt'neos.
Una propiedad interesante del formato !F es la de poder seleccionar ,n color
PtransparenteQ. *s07 c,ando la ima(en en c,estin es mostrada en ,n +is,ali8ador7 la 8ona
de la ima(en con el color transparente toma el color del fondo del doc,mento.
Otra propiedad interesante del formato !F7 es la poder crear (r'ficos animados7 el formato
de este tipo de im'(enes se le denomina !F X].
Los arc5i+os de im'(enes en este formato tienen asociados la extensin .(if.
5or#ato 6PEG.
$%& son las iniciales de $oint %5oto(rap5ic &xpert ro,p :r,po de &xpertos
Foto(r'ficos Ie,nidos<. *l i(,al 3,e el formato !F7 comprime las im'(enes para ,na
transmisin m's r'pida7 a,n3,e difiere en el al(oritmo de compresin.
-ientras 3,e con el formato !F la comprensin de ,n arc5i+o de im'(enes +iene
determinada7 $%& nos permite especificar la relacin de compresin deseada7 por lo 3,e
podemos +ariar el tamao del arc5i+o. ?at,ralmente7 a maAor relacin de compresin7
menor tamao A peor calidad en la ima(en final. Dismin,Aendo la compresin o1tenemos
im'(enes de maAor calidad pero tam1i4n de maAor tamao.
?o de1emos o1sesionarnos con la calidad de las im'(enes. @aA 3,e tener presente 3,e
!nternet es en ocasiones ,n medio de transmisin 1astante lento7 por lo 3,e a +eces es
preferi1le perder al(o de calidad en las im'(enes antes de a1,rrir al +isitante con n,estros
doc,mentos.
Los arc5i+os de im'(enes en este formato tienen asociado la extensin .6p(.
Inc'usi!n " i#.)ns
La eti3,eta 3,e se ,tili8a para la incl,sin de im'(enes en ,na p'(ina 2e1 es la si(,iente:
H!- =ICOQima(en.6p(QJHG!-J
donde ima(en.6p( es ,n arc5i+o de ima(en
%a#a2o " 'as i#.)ns.
=i no especificamos nada m's7 las im'(enes aparecer'n en el na+e(ador con el tamao 3,e
tienen ori(inalmente.
%ara modificar el tamao de las im'(enes se ,tili8an los si(,ientes modificadores en la
eti3,eta H!-J:
2!DT@: especifica la anc5,ra en pixels de la ima(en.
@&!T@: especifica el nCmero de pixels 3,e tendr' de alto la ima(en.
Esca'a"o " i#.)ns.
Con el ,so de loa modificadores @&!@T A 2!DT@ podemos ampliar7 A red,cir las
im'(enes sin deformarlas7 es decir7 escalarlas. Una manera cmoda de 5acerlo es solamente
especificar ,na de las dos dimensiones7 se as,me 3,e la red,ccin o la ampliacin es
proporcional a la otra.
Bor"s " 'a i#a)n.
-ediante el modificador )OID&I se p,ede aadir 1ordes a n,estras im'(enes.
A'inaci!n " t(to con 'as i#.)ns.
La alineacin del texto con las im'(enes se reali8a mediante el modificador *L!?. Los
+alores 3,e este modificador p,ede tomar son: TO%7 T&ZTO%7 C&?T&I7 *)=C&?T&I7
-!DDL&7 *)=-!DDL&7 )OTTO-7 L&FT7 A I!T@.
*dem's podemos especificar la distancia 3,e 3,eremos esta1lecer entre el (r'fico A el
texto. =i este par'metro no se esta1lece7 el texto es sit,ado 6,sto a contin,acin de la
ima(en. %ara introd,cir espacios 5ori8ontales A +erticales a contin,acin de la ima(en se
,tili8an los modificadores 9=%*C& A @=%*C&.
I#.)ns con t(to a'trnati4o.
Los +is,ali8adores tienen la opcin de no mostrar las im'(enes7 en ,n intento de acelerar el
acceso a las p'(inas. -,c5as +eces7 las im'(enes incl,idas en ,na p'(ina son
f,ndamentales para comprender la informacin 3,e se ofrece. %or e6emplo7 ,na
p'(ina destinada a al,mnos ,ni+ersitarios de asi(nat,ras de estad0stica o matem'ticas
p,ede contener im'(enes de frm,las matem'ticas. %ara estos casos se p,ede aadir a la
ima(en ,n texto *LTernati+o7 3,e d4 ,na idea del contenido de la ima(en. %ara aadir ,n
texto alternati+o7 se ,tili8a la orden como se m,estra a contin,acin:
H!- =ICOFnom1reTima(enF *LTOFTextoTalternati+oFJ
Uso " i#.)ns co#o n'acs.
%ara ,tili8ar ,na ima(en como enlace a otra parte de la p'(ina o a otra p'(ina7 simplemente
5aA 3,e introd,cirlas dentro de la eti3,eta H* @I&FJ de la si(,iente manera:
H* @I&FOQenlaceQJ H!- =ICOQima(enQJ HG*J
I#.)ns co#o /on"o " un "ocu#nto.
Un efecto m,A ,tili8ado es el ,so de im'(enes como fondo de ,n doc,mento @T-L. La
manera de 5acerlo es con el atri1,to )*CVIOU?D de la marca H)ODUJ.
La ima(en de fondo en (eneral ser' m's pe3,ea 3,e el 'rea de doc,mento del na+e(ador.
Lo 3,e 5ace entonces el na+e(ador es repetir7 partiendo de la es3,ina s,perior i83,ierda7 la
ima(en 3,e 5emos ele(ido como fondo del doc,mento.
* la 5ora de ele(ir la ima(en de fondo7 es preciso tener en c,enta 3,e el texto del
doc,mento de1e ser le(i1le por encima de la ima(en7 por lo 3,e 5aA 3,e e+itar colocar
im'(enes con colores demasiado f,ertes.
Ma&as snsiti4os.
Los mapas sensiti+os o mapas de im'(enes son ,n tipo determinado de enlace mediante
(r'ficos. Constit,Aen ,na 5erramienta de (ran potencia7 a,n3,e son al(o complicados de
constr,ir A mantener.
Los mapas sensiti+os est'n comp,estos de dos elementos f,ndamentales: la ima(en del
mapa A los enlaces de cada 8ona del mapa.
La ima(en del mapa es la ima(en 3,e +amos a di+idir en 8onas distintas. %,lsando en cada
,na de esas 8onas ir0amos a ,n enlace distinto.
Los mapas sensiti+os no se explican en esta (,0a. %,ede encontrar informacin m's
informacin so1re los mapas sensiti+os en las referencias 3,e se incl,Aen en el apartado
FDirecciones !nternet de inter4sF.
&6emplo pr'ctico n[6
<HTML>
<HEAD>
<TITLE>Ejemplo G - Imagene" </TITLE>
</HEAD>
<BODY BACCQ!OAD9:n%be"+jpg: TERT9:DAASSSS:>
<CETE!>
<H1>Im1aa*%#e2gene"</H1>
</CETE!>
<H!>
E"#a e" mi p1aa*%#e2gina 'el Web+ o e" m%) e4#en"a$ pero #iene #o'o" lo"
elemen#o" b1aa*%#e2"i*o"+ E"pero &%e o" g%"#e+ .o*o a po*o le ir1ea*%#e2
a1n#il'e2a'ien'o m1aa*%#e2" *o"a" in#ere"an#e"+
<.> <A H!E69:ejemplo0+-#ml:> <IMQ 7!C9:-ombre+gi,:> </A> <6OT
7I8E9;5>Mi" a,i*ione"</6OT>
<.> <A H!E69:ejemploE+-#ml:> <IMQ 7!C9:*a"a+gi,:> </A> <6OT 7I8E9;5>Mi"
p1aa*%#e2gina"
,a(ori#a"</6OT>
<CETE!>
<H5> An l%gar i'eal para mi" (a*a*ione" </H5>
<IMQ 7!C9:i"la+gi,: ALT9:i"la:>
<H!>
<CETE!>
<H5>E4pe'ien#e R - M%l'er</H5>
<IMQ 7!C9:5m%l'er+gi,: WIDTH911T HEIQHT91GS></CETE!>
<H!>
</BODY>
</HTML>
</CETE!>
</BODY>
</HTML>
,ardamos el fic5ero de texto con el nom1re ejemplo.html A lo car(amos en el na+e(ador.
TABLAS
Una ta1la es ,na manera m,A compacta A clara de mostrar la informacin. Una ta1la en
@T-L se entiende como ,n con6,nto de filas :filaO5ori8ontal<7 apiladas ,na so1re otra.
Cada fila contiene a s, +e8 ,n con6,nto de celdas7 p,estas ,na al lado de la otra.
Una ta1la se declara ,sando el comando HT*)L&J ... HGT*)L&J. Dentro de la ta1la7 se
,sa HTIJ.. HGTIJpara indicar ,na fila A dentro de ,na fila7 HTDJ ... HGTDJ para delimitar
el contenido de ,na celda. &l elemento de cierre de fila A de celda es optati+o.
&l texto incl,ido dentro de cada celda p,ede ser formateado con c,al3,iera de las eti3,eta
+istas anteriormente
Todos estos comandos aceptan n,merosos modificadores. =e p,eden7 entre otras cosas7 ,nir
celdas7 especificar la alineacin del contenido de la celda7 A m,c5o m's.
%ara entender me6or el comando HT*)L&J ... HGT*)L&J7 est' disponi1le ,na m,A amplia
(ama de e6emplos.
&6emplo de ta1la
*3,0 se m,estra ,na ta1la m,A simple:
HT*)L&J
HTIJHTDJCelda *1HGTDJHTDJCelda )1HGTDJHTDJCelda C1HGTDJHGTIJ
HTIJHTDJCelda *"HGTDJHTDJCelda )"HGTDJHTDJCelda C"HGTDJHGTIJ
HTIJHTDJCelda *3HGTDJHTDJCelda )3HGTDJHTDJCelda C3HGTDJHGTIJ
HGT*)L&J
%,tu'o " 'a tab'a.
&s con+eniente 3,e las ta1las ten(an ,n t0t,lo 3,e las identifi3,e A aclare s, contenido.
*,n3,e ese t0t,lo p,ede ser contenido colocando texto formateado antes de la ta1la7 @T-L
dispone de la eti3,eta HC*%T!O?J para darle nom1re a la ta1la7 de la si(,iente forma:
HT*)L&J
HC*%T!O?J ?om1re de la ta1la HGC*%T!O?J
^^^.
HGT*)L&J
&sta eti3,eta tiene la +enta6a 3,e el texto formateado se coloca a,tom'ticamente en el
centro de la anc5,ra de la ta1la.
Bor"s " 'a tab'a.
%ara colocar 1ordes a ,na ta1la en @T-L se ,tili8a el modificador )OID&I dentro de la
eti3,eta HT*)L&J. La sintaxis es:
HT*)L& )OID&IOFanc5,raFJ
^^^.
HGT*)L&J
donde anc5,ra indica la anc5,ra en pixels del 1orde exterior de la ta1la.
&l modificador )OID&I coloca 1ordes externos e internos en la ta1la7 pero la anc5,ra 3,e
se especifica solo afecta a los 1ordes externos.
&l efecto de som1reado del 1orde exterior se prod,ce c,ando el modificador )OID&I
toma ,n +alor s,perior a ,no. =i 3,eremos 3,e el 1orde exterior de la ta1la sea i(,al 3,e los
1ordes interiores7 de1emos 5acer )OID&IOQ1Q.
Cabcras " -'as y " co'u#nas.
La incl,sin de ca1eceras en cada fila A col,mna aA,da a comprender el contenido de la
ta1la.
?o 5aA nin(,na dific,ltad para 5acer esto con las eti3,etas 3,e 5emos +isto. =in em1ar(o7
existe ,na forma alternati+a de indicar la ca1ecera de ,na fila o col,mna mediante la
eti3,eta HT@J. La des+enta6a de ,sar esta eti3,eta es 3,e el texto 3,e +a dentro de ella no
admite formateado como el de las otras celdas.
%a#a2o " 'a tab'a.
%or defecto el tamao de la ta1la +iene dado por el texto o los (r'ficos 3,e contiene. =in
em1ar(o7 es posi1le 3,e en ocasiones 3,eramos cam1iar la anc5,ra de n,estra ta1la.
La forma de esta1lecer ,na anc5,ra fi6a en ,na ta1la es ,tili8ar el modificador 2!DT@
dentro de la eti3,eta HT*)L&J. La sintaxis es:
HT*)L& 2!DT@OFanc5,raFJ ^^^ HGT*)L&J
*3,0 anc5,ra p,ede ser ,n nCmero 3,e especifi3,e en pixels la anc5,ra a1sol,ta de la
ta1la7 o 1ien ,n porcenta6e 3,e indi3,e la anc5,ra de la ta1la en relacin a la anc5,ra del
'rea del doc,mento del na+e(ador.
* pesar de 3,e podemos especificar la anc5,ra de la ta1la7 si el texto de las celdas oc,pa
,na anc5,ra maAor7 la ta1la tomar' la anc5,ra m0nima para 3,e el texto de las celdas p,eda
+erse 0nte(ramente.
6usti-caci!n " 'a tab'a.
%or defecto7 n,estra ta1la 3,edar' 6,stificada a la i83,ierda. La forma de centrarla es
mediante la eti3,eta HC&?T&IJ.
Es&acio "ntro " 'as c'"as.
&s posi1le 3,e 3,eramos 3,e n,estro texto no 3,ede apretado dentro de las celdas7 sino 3,e
exista m's espacio entre los textos de las celdas conti(,as de forma 3,e p,eda leerse me6or.
&sto p,ede 5acerse mediante los dos si(,ientes modificadores:
C&LL%*DD!?: esta1lece la distancia m0nima en pixels entre los 1ordes de
cada celda A el texto 3,e +a encerrado en ellas. =, +alor por defecto es 1.
C&LL=%*C!?: esta1lece la anc5,ra en pixels de los 1ordes de cada celda.
5or#a " 'as c'"as in"i4i"ua's.
6usti-caci!n "' t(to " 'as c'"as.
@T-L permite 6,stificar 5ori8ontal A +erticalmente el texto dentro de cada celda. %ara ello
implementa los modificadores *L!? A 9*L!? dentro de la eti3,eta HTDJ. La forma de
5acerlo es:
HT*)L&J
HTIJ
HTD *L!?OQ5ori8ontalQ 9*L!?OQ+erticalQJ
^..
HGTDJ
HGTIJ
^^^.
HGT*)L&J
donde:
5ori8ontal p,ede tomar los +alores C&?T&I7 L&FT A I!@T. %or
defecto +ale L&FT.
+ertical: p,ede tomar los +alores TO%7 -!DDL&7 )OTTO-7 A
)*=&L!?&. %or defecto +ale C&?T&I.
=i 3,eremos 3,e ,na determinada 6,stificacin 5ori8ontal o +ertical afecte a todas las celdas
de ,na fila7 podemos 5acerlo incl,Aendo el modificador *L!? o 9*L!? dentro de la
eti3,eta HTIJ.
C'"as " "i/rnts ta#a2os.
%or defecto7 todas las celdas 3,e constit,Aen ,na ta1la en @T-L tienen el mismo tamao.
=in em1ar(o7 es posi1le esta1lecer el tamaos de ,na determinada celda mediante dos
modificadores de la eti3,eta HTDJ7 3,e son 2!DT@ A @&!@T:
2!DT@: especifica la anc5,ra del texto en ,na celda concreta. =e p,ede
especificar como +alor a1sol,to o 1ien como relati+o en forma de porcenta6e de
la anc5,ra de la ta1la.
@&!@T: esta1lece la alt,ra de ,na celda indi+id,al.
?o es posi1le ,sar los modificadores 2!DT@ A @&!T@ para aplicarlos a toda ,na fila. La
Cnica forma de 5acerlo es poniendo en cada celda de la fila los +alores correspondientes de
2!DT@ A @&!@T.
C'"as irr)u'ars.
%odemos desear 3,e ,na de n,estras celdas oc,pe +arias filas AGo col,mnas. La forma de
5acerlo es introd,cir los modificadores COL=%*? A IO2=%*? en la eti3,eta HTDJ:
COL=%*?O especifica la alt,ra de ,na celda en concreta en f,ncin de la alt,ra
de las celdas adAacentes. =e especifica en nCmero de celdas adAacentes.
IO2=%*?: especifica la anc5,ra de ,na concreta en f,ncin del celdas 3,e
est'n de1a6o. =e especifica en nCmero de celdas de de1a6o.
Co'or " ca"a c'"a.
%ara especificar el color de cada celda de la ta1la se ,tili8a el modificador )COLOI en la
eti3,eta HTDJ. Como formato de colores se acepta el 5exadecimal o ,na cadena de
caracteres.
%(to n una so'o ',na.
=i 5emos indicado la anc5,ra de ,na celda A 4sta es menor 3,e el texto incl,ido en ella7 A
3,eremos 3,e el texto no oc,pe m's l0neas7 sino 3,e se ampl0e la anc5,ra de la celda7
de1emos aadir el modificador ?O2I*% dentro de la eti3,eta HTDJ.
&6emplo pr'ctico n[.
<HTML>
<HEAD>
<TITLE>Ejemplo H - Tabla"</TITLE>
</HEAD>
<BODY>
<CETE!><H1>Tabla"</H1></CETE!>
<H0>Demo"#ra*ion 'e COL7.A ) En*abe@a'o"</H0>
<TABLE WIDTH9:1SSU: BO!DE!9:1:>
<T!>
<TH COL7.A9:0:>Hea'1</TH>
<TH COL7.A9:0:>Hea'0</TH>
</T!>
<T!>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</T!>
<T!>
<TD>E</TD> <TD>6</TD> <TD>Q</TD> <TD>H</TD>
</T!>
</TABLE>
</BODY>
</HTML>
,ardamos el fic5ero de texto con el nom1re ejemplo".html A lo car(amos en el na+e(ador.
EDITORES Y CONVERSORES
&n el presente apartado se pro+ee de al(,nos comentarios A reflexiones acerca del ,so de
5erramientas a,tomati8adas para la (eneracin de p'(inas 2e1: editores A con+ersores.
E"itors
=e(,ramente ,sted 5a +isto o conoce pro(ramas 3,e p,eden asistir a ,na persona en la
creacin de p'(inas 2e17 A 3,i8's se 5a pre(,ntado: _ ,so ,n editor o aprendo @T-L `
La resp,esta 3,e Ao le dar0a es la misma 3,e si ,sted me pre(,ntara si es me6or sa1er
aritm4tica o oc,par ,na calc,ladora: am1as cosas no se contraponen entre s0.
Un editor @T-L es ,na (ran aA,da al diseador 2e1: 1rinda la posi1ilidad de disponer A
+er la p'(ina mientras se crea7 A de o1ser+ar inmediatamente cmo aparecer'n distri1,idos
los colores A los elementos dentro del doc,mento7 es ,na aA,da para recordar las marcas A
s,s atri1,tos7 sin em1ar(oB p,ede res,ltar inadec,ado por lo si(,iente:
%oca flexi1ilidad7 A en al(,nas ocasiones el cdi(o 3,e (eneran en (eneral es dif0cil
de editar o mantener.
&l con6,nto de comandos 3,e incorpora p,ede ser limitado7 en caso de 3,e sea ,n
editor prod,cido por al(,na empresa 3,e 5a(a +is,ali8adores7 o p,ede estar
o1soleto.
&l @T-L 3,e (eneran est' f,ertemente orientado al formato f0sico7 m's 3,e a la
estr,ct,ra7 con lo c,al se pierde ,ni+ersalidad en el doc,mento.
&s recomenda1le comen8ar por lo 1'sico7 proc,rando aprender @T-L 1ien7 creando
doc,mentos con editores de texto plano. Desp,4s si se desea se p,ede oc,par ,na
com1inacin editor de texto plano m's editor @T-L para crear doc,mentos7 a fin de
explotar al m'ximo las capacidades de am1os sistemas.
Los editores @T-L se clasifican en dos tipos:
2AsiDA( FD5at Ao, see is D5at Ao, (etF: en ellos se p,ede ir +iendo en pantalla
inmediatamente lo 3,e se +a creando. son m,A Ctiles para apreciar los colores A la
disposicin en pantalla de los elementos.
?o 2AsiDA(: ellos ,s,almente in+ocan ,na aplicacin externa :,n 1roDser< para
mostrar lo 3,e se +a creando. =on m,A Ctiles para recordar los comandos @T-L A s,s
atri1,tos.
&xisten editores mixtos: presentan la pantalla di+idida en dos se(mentos7 ,no con el cdi(o @T-L
A otro con el res,ltado final.
%or e6emplo7 ,no de los editores @T-L 2AsiDA( m's completos es el Front%a(e ]X de
-icrosoft :5ttp:GGDDD.e,.microsoft.comGfrontpa(eG<7 a,n3,e es 2AsiDA(7 tam1i4n permite
tra1a6ar en modo comando.
Con4rsors
Las 5erramientas de con+ersin permiten transformar ,n doc,mento escrito en otro formato
a ,n doc,mento @T-L.
&l cdi(o @T-L 3,e (eneran es casi imposi1le de leer7 de1ido a 3,e 5aA m,c5as
distinciones 3,e existen en len(,a6es de formateo de texto 3,e no existen en @T-L7 A
de1en ser sim,ladas7 con al(Cn (rado de tr,c,lencia.
_C,'ndo ,sarlos` c,ando no 5aA otra alternati+a7 por3,e es in+ia1le o Aa se 5i8o ,n (ran
tra1a6o pre+io en otro sistema.
_Cmo ,sarlos` la idea 1'sica es simplificar al m'ximo el doc,mento :eliminar las
san(r0as7 ,niformar los tamaos de letra7 etc.< para l,e(o pasar el con+ersor7 (enerando ,n
doc,mento @T-L.
Finalmente con+iene re+isar la salida ,sando ,n editor de texto7 re+isando 3,e el cdi(o
o1tenido sea sint'cticamente correcto7 A de6ando el doc,mento lo s,ficientemente ordenado
A le(i1le como para 3,e sea f'cil de modificar al momento de reali8ar f,t,ras
act,ali8aciones.
%or e6emplo7 el pa3,ete ofim'tico Oficce ]. :2ord7 &xcel7 %oDer%oint7 ...< de -icrosoft
incorpora ,n con+ersor de doc,mentos en formato 2ord a @T-L. Tam1i4n el editor
Front%a(e ]X7 anteriormente mencionado7 incorpora ,n con+ersor de distinto tipos de
formato de doc,mentos a @T-L.
PUBLICAR LAS PGINAS EN INTERNET.
@asta a5ora slo 5emos reali8ado p'(inas 3,4 no son +isi1les desde !nternet7 sino 3,e
solamente se p,eden +is,ali8ar en modo local en n,estro.
%ara p,1licar n,estras p'(inas en !nternet para 3,e sean accesi1les por c,al3,ier otro
,s,ario de !nternet de1emos transferirlas a ,n ser+idor 2e17 para ello 5aA 3,e reali8ar los
si(,ientes pasos:
1. %ro1ar de forma local el correcto f,ncionamiento de las p'(inas creadas.
". =olicitar la apert,ra de ,na c,enta en dic5o ser+idor 2e1.
3. Transferirlas mediante FT% a la c,enta asi(nada en dic5o ser+idor 2e1. Teniendo en
c,enta 3,e las p'(inas de de1en transferir en modo *=C!!7 A los (r'ficos incl,idos en
las p'(inas en modo 1inario.
#. %ro1ar desde !nternet el acceso a dic5as p'(inas.
Concretamente en la Uni+ersidad de -,rcia. el =er+icio de !nform'tica ofrece a los
Centros7 Departamentos7 =er+icios7 r,pos de tra1a6o e in+esti(acin ,ni+ersitarios la
posi1ilidad de incorporar s,s propias p'(inas de 2e1 al ser+idor central de la Uni+ersidad
de -,rcia. %,ede encontrar m's informacin so1re este =er+icio de *lmacenamiento de
p'(inas en 2e1 en 5ttp:GGDDD.,m.esGsiGser+icioGDDDGindEDDD.5tmlSet"
DIRECCIONES INTERNET DE INTERS.
Las si(,ientes direcciones !nternet contienen (,0as A man,ales donde p,ede encontrar m's
informacin so1re el len(,a6e @T-L:
Di+ersos man,ales @T-L E 5ttp:GGDDD.dic.,c5ile.clGman,al.5tml
Dpto. !nform'tica A Com,nicaciones
Uni+ersidad de C5ile
2e1-aestro a 5ttp:GGDDD.Dmaestro.comGDe1maestroG
Francisco *rocena
T,torial @T-L E 5ttp:GGdns.,ncor.ed,GinfoGt,torial.5tm
-ercedes Doffi mdoffibcom.,ncor.ed,
Uni+ersidad ?acional de Crdo1a
*r(entina
Taller @T-L E 5ttp:GGDDD".,ca.esGtallerE5tmlGtallerE5tml.5tml
Uni+ersidad de C'di8
&spaa
&specificacin del Consorcio 23 :23C< cdel len(,a6e @T-L E
5ttp:GGDDD.D3.or(G-ar;UpG
Caracteres especiales en @T-L E
5ttp:GGDDD.,toronto.caGDe1docsG@T-LdocsG?eD@T-LGentities.5tml
BIBLIOGRAFA.
Te6edores del 2e1 E 5ttp:GGDDD.dic.,c5ile.clGdman,alG
Carlos Castillo
Dpto. !nform'tica A Com,nicaciones
Uni+ersidad de C5ile
T,torial de @T-L E 5ttp:GGDDD.,m.esGdpsi1mGt,torialG
$,an $os4 Lpe8 arc0a M 66lo(abfc,.,m.es N