MANUAL BSICO DE CREACIN DE PGINAS WEB

MANUAL BSICO DE CREACIN DE PGINAS WEB.........................................1 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........................................................................................................11 o importan los tabuladores! ni los saltos de l"nea...................................................................................11 Caracteres especiales....................................................................................................................................11

ESTRUCTURA DE UN DOCUMENTO HTML........................................................12 COMANDOS BSICOS DE HTML.........................................................................1

#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............................................................................................................................................14 Tamao del texto........................................................................................................................................14 Colores del texto........................................................................................................................................16 Listas..............................................................................................................................................................1Listas ordenadas: OL.................................................................................................................................16 Listas desordenadas: UL............................................................................................................................17 Listas de definicin: DL.............................................................................................................................17

Texto pre$ormateado& ')..........................................................................................................................1/ Centrando texto............................................................................................................................................1/ L"neas 0ori+ontales.......................................................................................................................................19 Comentarios no 1isibles en la pantalla.......................................................................................................19

ENLACES! A...........................................................................................................20
.nlaces a otras +onas de la misma p%gina..................................................................................................21 .nlaces a otras p%ginas................................................................................................................................2( .nlaces a una +ona de otra p%gina..............................................................................................................2,

IMGENES..............................................................................................................2"
'rincipales $ormatos gr%$icos en Internet..................................................................................................23 Formato !F..............................................................................................................................................."# Formato $%& ............................................................................................................................................"# Inclusin de im%genes..................................................................................................................................2Tamao de las im'(enes............................................................................................................................"6 &scalado de im'(enes................................................................................................................................"6 )ordes de la ima(en..................................................................................................................................."6 *lineacin de texto con las im'(enes........................................................................................................"7 !m'(enes con texto alternati+o.................................................................................................................."7 Uso de im'(enes como enlaces.................................................................................................................."7 !m'(enes como fondo de ,n doc,mento..................................................................................................."7 -apas sensiti+os........................................................................................................................................".

TABLAS...................................................................................................................29
T"tulo de la tabla...........................................................................................................................................29 *ordes de la tabla.........................................................................................................................................(0 Cabeceras de $ilas y de columnas................................................................................................................(0 Tama4o de la tabla.......................................................................................................................................(0 5usti$icacin de la tabla................................................................................................................................(1 .spacio dentro de las celdas........................................................................................................................(1 6orma de las celdas indi1iduales.................................................................................................................(1 $,stificacin del texto de las celdas.........................................................................................................../1 Celdas de diferentes tamaos...................................................................................................................../" Celdas irre(,lares......................................................................................................................................./" Color de cada celda....................................................................................................................................// Texto en ,na solo l0nea..............................................................................................................................//

EDITORES # CON$ERSORES..............................................................................
.ditores..........................................................................................................................................................(, Con1ersores...................................................................................................................................................(3

PUBLICAR LAS PGINAS EN INTERNET............................................................ % DIRECCIONES INTERNET DE INTER&S.............................................................. ' BIBLIOGRAFA....................................................................................................... '

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 ". Teclee lo si(,iente:
<HTML> <HEAD> <TITLE>Ejemplo 1 - Mi primera pagina Web</TITLE> </HEAD> <BODY> <CE TE!><H1>Mi primera pagina Web</H1></CE TE!> <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>

/. 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 #. &li6a F*rc5i+oG*1rir p'(inaF en la 1arra de menC del na+e(ador.

6. =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 / 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 compactos.

Concatenacin de marcas. 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

HTML es simplemente texto 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.

Igualdad de maysculas y minsculas. @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 importan los tabuladores, ni los saltos de lnea 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.

Caracteres especiales &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 Los acentos =0m1olo menor 3,e :H< =0m1olo maAor 3,e :J< La ee &spacios en 1lanco Transcripcin @T-L Comentario RH+ocal a acent,arJ ac,teB &n la act,alidad la maAor0a de los 1roDsers los soportan Rlt: R(tB RntildeB &n la act,alidad la maAor0a de los 1roDsers la soportan Rn1spB :non 1rea;in( @T-L slo reconoce ,n space< 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.

Definicin de prrafos: 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.

Ruptura de lneas: 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.

Titulos de encabezamiento @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@/J?i+el de enca1e8ado /HG@/J H@4J?i+el de enca1e8ado 4HG@4J H@#J?i+el de enca1e8ado #HG@#J 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.

Dando estilo al texto 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.

Tipos de letras *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? J ran 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.

Tamao del texto. %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 / 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 /. *s07 se p,ede 5acer 3,e el tamao / corresponda a ,na f,ente *rial de 167 o a ,na Times de .. &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 7 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 X 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&OP4QJ ........ :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 /7 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.

Colores del texto. %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 "#6 +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 YYYYYY<. &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 ordenadas: 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 desordenadas: 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 de definicin: 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.

Texto preformateado: 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.

Centrando texto. %ara centrar ,na parte del doc,mento7 se delimita lo 3,e se desea centrar mediante el comando HC&?T&IJ ... HGC&?T&IJ.

Lneas horizontales. 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...<.

Comentarios no visibles en la pantalla * +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> <CE TE!><H1>Coman'o" b1aa*%#e2"i*o"</H1></CE TE!> <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 <6O T 7I8E9:;1:><I>m%"i*a</I></6O T> &%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" <6O T COLO!9:green:><B> a,i*ione" </B></6O T> "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!> <CE TE!>Tambi1ea*%#e2n "abemo" *en#rar el #e4#o</CE TE!> <.!E> ) e"*ribir pre,orma#ea'o </.!E>

<BLI C>) a e"*ribir #e4#o parpa'ean#e</BLI C> <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. /. &nlaces a otras 8onas de otras p'(inas.

Enlaces a otras zonas de la misma pgina * +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[ / 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.

Enlaces a otras pginas %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\ 4 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.

Enlaces a una zona de otra pgina %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[#
<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 ejemplo .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

Principales formatos grficos en Internet. &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.

Formato GIF. 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 "#6 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 .]. Los arc5i+os de im'(enes en este formato tienen asociados la extensin .(if.

Formato JPEG. $%& 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(.

Inclusin de imgenes 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

Tamao de las imgenes. =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.

Escalado de imgenes. 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.

Bordes de la imagen. -ediante el modificador )OID&I se p,ede aadir 1ordes a n,estras im'(enes.

Alineacin de texto con las imgenes. 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&.

Imgenes con texto alternativo. 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 de imgenes como enlaces. %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

Imgenes como fondo de un documento. 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 )*CV IOU?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.

Mapas sensitivos. 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!OA D9:n%be"+jpg: TERT9:DAASSSS:> <CE TE!> <H1>Im1aa*%#e2gene"</H1> </CE TE!> <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> <6O T 7I8E9;5>Mi" a,i*ione"</6O T> <.> <A H!E69:ejemploE+-#ml:> <IMQ 7!C9:*a"a+gi,:> </A> <6O T 7I8E9;5>Mi" p1aa*%#e2gina" ,a(ori#a"</6O T> <CE TE!> <H5> An l%gar i'eal para mi" (a*a*ione" </H5> <IMQ 7!C9:i"la+gi,: ALT9:i"la:> <H!> <CE TE!> <H5>E4pe'ien#e R - M%l'er</H5> <IMQ 7!C9:5m%l'er+gi,: WIDTH911T HEIQHT91GS></CE TE!> <H!> </BODY> </HTML> </CE TE!> </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 */HGTDJHTDJCelda )/HGTDJHTDJCelda C/HGTDJHGTIJ HGT*)L&J

Ttulo de la tabla. &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.

Bordes de la tabla. %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.

Cabeceras de filas y de columnas. 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.

Tamao de la tabla. %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.

Justificacin de la tabla. %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.

Espacio dentro de las celdas. &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.

Forma de las celdas individuales.

Justificacin del texto de las celdas. @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.

Celdas de diferentes tamaos. %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.

Celdas irregulares. %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.

Color de cada celda. %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.

Texto en una solo lnea. =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[7
<HTML> <HEAD> <TITLE>Ejemplo H - Tabla"</TITLE> </HEAD> <BODY> <CE TE!><H1>Tabla"</H1></CE TE!> <H0>Demo"#ra*ion 'e COL7.A ) En*abe@a'o"</H0> <TABLE WIDTH9:1SSU: BO!DE!9:1:> <T!> <TH COL7.A 9:0:>Hea'1</TH> <TH COL7.A 9: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.

Editores =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 ]. de -icrosoft :5ttp:GGDDD.e,.microsoft.comGfrontpa(eG<7 a,n3,e es 2AsiDA(7 tam1i4n permite tra1a6ar en modo comando.

Conversores 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 ]7 :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 ].7 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. /. 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. 4. %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 5ttp:GGDDD.D/.or(G-ar;UpG 2/ :2/C< cdel len(,a6e
@T-L

@T-L

E
E

Caracteres especiales en 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 Dpto. %sicolo(0a )'sica A -etodolo(0a

Uni+ersidad de -,rcia 2e1-aestro a 5ttp:GGDDD.Dmaestro.comGDe1maestroG

Francisco *rocena