curso compleo de HTML.doc

7/25/2019 curso compleo de HTML.doc

1/350

1. Introduccin al lenguaje HTML

El World Wide Web (WWW) es un sistema que contiene unacantidad de informacin casi infinita. Pero esta informacin debe

estar ordenada de alguna forma de manera que sea posibleencontrar lo que se busca. La unidad bsica donde estalmacenada esta informacin son las pginas Web. Estas pginasse caracterizan por contener texto, imgenes, animaciones... eincluso sonido !ideo."na de las caracter#sticas ms importantes de las pginas Web esque son $ipertexto. Esto quiere decir que las pginas no sonelementos aislados, sino que estn unidas a otras mediante loslinkso enlaces $ipertexto. %racias a estos enlaces el na!egante de

&nternet puede pulsar sobre un texto (texto al que llamaremos dea$ora en adelante activo) de una pgina para navegar$asta otrapgina. 'er cuestin del programador de la pgina inicial decidirque palabras o frases sern activas a donde nos conducir pulsarsobre ellas.En algunos ambientes se discute que el World Wide Web a no esun sistema $ipertexto sino $ipermedia. Los que defienden el cambiose apoan en que aunque en sus or#genes el WWW constabanicamente de texto en la actualidad es un sistema principalmente

grfico se puede $acer que las zonas activassean, no slo texto,sino imgenes, !ideos, botones,... en definiti!a cualquier elementode una pgina. n as#, el t*rmino original no $a sido reemplazadotoda!#a por tanto ser el empleado a lo largo de esta obra.Figura 1.1. Aunque al principio el texto predominaba en elWWW, en la actualidad la im!gene on ma"or#a comopodemo ober$ar en una de la principale %eb del pro"ecto&'(.


2/350

)aracter#tica del lenguaje HTMLPero empecemos a con lo que nos interesa. +mo se $ace unapgina Web- uando los diseadores del WWW se $icieron estapregunta decidieron que se deb#an cumplir, entre otras, lassiguientes caracter#sticas/El Web ten#a que ser distribuido/ La informacin repartida enpginas no mu grandes enlazadas entre s#.El Web ten#a que ser $ipertexto deb#a ser fcil na!egar por *l.

0en#a que ser compatible con todo tipo de ordenadores (Ps,1acintos$, estaciones de traba2o...) con todo tipo de sistemasoperati!os (Windo3s, 1'456', "7&8, 146',...).5eb#a ser dinmico/ el proceso de cambiar actualizar lainformacin deb#a ser gil rpido.Estas caracter#sticas son las que marcaron el diseo de todos loselementos del WWW incluida la programacin de pginas Web.omo respuesta a todos estos requisitos se creo el lengua2e 901L(9iper0ext 1ar:up Language), cuas siglas significan ;lengua2e$ipertexto de marcas;.Este lengua2e ser el encargado de con!ertir un inocente arc$i!o detexto inicial en una pgina 3eb con diferentes tipos tamaos deletra, con imgenes impactantes, animaciones sorprendentes,formularios interacti!os, etc.*u+ e neceita para crear una p!gina %eb"na de las caracter#sticas de este lengua2e ms importantes para elprogramador es que no es necesario ningn programa especialpara crear una pgina Web. %racias a ello se $a conseguido que sepuedan crear pginas con cualquier ordenador sistema operati!o.

El cdigo 901L, como $emos adelantado en el prrafo anterior, noes ms que texto por tanto lo nico necesario para escribirlo es un


3/350

editor de texto como el que acompaan a todos los sistemasoperati!os/ edit en 1'456', bloc: de notas en Windo3s,!ien "7&8,etc. Por supuesto estos no son los nicos editores de texto quepueden ser usados, sino cualquier otro. 0ambi*n se puede usar

procesadores de texto, que son editores con capacidades aadidas,compo pueden ser 1icrosoft Word o WordPerfect pero $a quetener cuidado porque en ocasiones $acen traducciones automticasdel cdigo 901L que no siempre son deseadas. En estos dosltimos casos, tambi*n $a que tener en cuenta que deberemosguardar el arc$i!o en modo texto.Figura 1.. -n editor de texto imple, como el bloc de nota deWindo%, e todo lo neceario para crear una p!gina Web

"na !ez $emos escrito el cdigo deberemos guardar el arc$i!o (conformato de texto) con la extensin .$tml ( o .$tm en 1'456',Windo3s &7&PL.$tm, etc...

760/ 'i el editor o procesador de textos usado para crear lapgina obliga a usar la extensin .txt al guardar el arc$i!o en modotexto, deberemos guardarlo con esta extensin, por e2emplo comoindex.txt, posteriormente cambiar el nombre del arc$i!o desdefuera del programa a index.$tml o index.$tm . Para ello usaremos elcomando rename en 1'456'? en Windo3s


4/350

arc$i!o index.$tml luego referirse a *l como &ndex.$tml. unque ennuestro ordenador puede funcionar al publicarlo seguramente no lo$ar. Por esta razn es una norma general usar siempreminsculas para los nombres de los arc$i!os $tml.

Cltimamente $an aparecido nue!as alternati!as que facilitan laprogramacin de pginas Web. 'on los editores 901L. Podemosdi!idir estos editores en dos grupos/

sistentes/ audan a crear el cdigo 901L e incluen plantillas decdigo prefabricadas, por e2emplo 9ot5og (Win),9ome'ite(Win),901L Editor (1ac), Duanta (Linux, 5E) o Fluefis$,(Linux, %761E).on!ersores/ son programas con otra funcin que la de laprogramacin Web pero que permiten con!ertir a 901L. 'one2emplos de con!ersores 1icrosoft Word ,Duar: 8Press Page1a:er.Editores WG'&WG% (W$at Gou 'ee &s W$at Gou %et, lo que !es eslo que obtienes)/ estos editores permiten crear pginas 3eb sinescribir cdigo 901L como si se tratase de un programa de dibu2opor ordenador. lgunos e2emplos de este tipo de editores son1acromedia 5ream3ea!er, 9ot1etal o 1icrosoft Hrontpage.

Figura 1./. Alguno editore W0IW02 permiten, adem!,modi3icar el cdigo HTML directamente.

Alguna ra4one para uar HTML


5/350

0odos estos editores 901L tipos pueden ser de gran auda tienensus !enta2as e incon!enientes, pero la experiencia demuestra queconocer el lengua2e 901L ofrece bastantes !enta2as/'eremos capaces de apro!ec$ar todas las caracter#sticas de este

lengua2e, incluso las ms nue!as.unque se use inicialmente un editor WG'WG% tendremos losconocimientos suficientes para modificar posteriormente el cdigoque *ste $a creado. s# se pueden corregir errores o incluiretiquetas no soportadas por el editor.7o dependeremos de la disponibilidad de una $erramienta concretapara poder crear pginas 3eb. on un simple editor de textos sersuficiente.El principal problema de usar editores con!ersores WG'&WG% esla necesidad de traba2ar con dos arc$i!os4fuentes por separado, porun lado el arc$i!o del editor por otro el arc$i!o del cdigo 901Luna !ez generado, lo que nos complica la !ida a la $ora de realizarcambios en nuestro Web. 'in embargo su utilidad es innegable sucombinacin con un buen conocimiento del lengua2e 901L noscon!ertir en unos grandes programadores de pginas Webcapaces de realizar creaciones impactantes !isualmente de grancalidad t*cnica.HTML e un lenguaje decripti$oProbablemente el lector $a usado alguna !ez un procesador de

texto (bi3ord, 1icrosoft Word o Word) o un programa dedescripcin de pginas (Duar:8Press). on este tipo deaplicaciones el usuario tiene un control total sobre los elementos deldocumento/ se le puede decir al programa ;pon este texto con estetamao;, ;sitalo a = cm. del borde;, ;usa este sangrado para losprrafos;, etc... on 901L el programador no tiene este tipo decontrol sobre los elementos que incluir en su pgina. El ob2eti!o deeste lengua2e ser simplemente describir cmo es una pgina demanera que examinando esa descripcin el na!egador del usuario

final sea capaz de mostrarlo de la me2or manera posible. on 901Lpodremos indicarle al na!egador que este es un titular, aqu#comienza un prrafo, estos son elementos de una lista, etc.posteriormente el na!egador decidir como mostrar esoselementos.Figura 1.5. Lo na$egadore en modo texto como L"nx tambi+npueden motrar p!gina Web gracia al car!cter decripti$o deHTML.


6/350

+Por qu* funciona as#- En un principio esta caracter#stica del 901Lpuede resultar molesta para el creador de la pgina, que no puedesaber como ser !ista su pgina ms que de una formaaproximada. 'in embargo es fundamental para conseguir que elWorld Wide Web pueda ser na!egado con cualquier tipo deordenador (dic$o con otras palabras, que el WWW seamultiplataforma). 5ebemos tener en cuenta que no todos lossistemas operati!os son grficos, que incluso usando un mismosistema operati!o existen diferentes resoluciones de pantalla, ... Poresta razn el lengua2e necesario para crear pginas debe serdescripti!o como consecuencia tras crear una pgina elprogramador debe !er como es mostrada con !arios na!egadoresdistintos como 7etscape 7a!igator o 1icrosoft &nternet Explorerincluendo algn na!egador de texto como Lnx.Pero una consecuencia ms importante an de esta caracter#stica,es que $a permitido que aparezcan na!egadores !ocales, que leenlas pginas en !ez de mostrarlas. %racias a ello personas ciegastambi*n $an podido disfrutar del WWW. Es ms, esta mismatecnolog#a esta siendo usada para los nue!os na!egadores

embarcados en coc$es que leen la pgina al conductor para que nose distraiga.760/ "na !ez creada una pgina es recomendable probar nuestrapgina, no slo con !arios na!egadores, sino tambi*n con !ariasresoluciones de pantalla distintas como por e2emplo/ IJKxJK,KKxIKK =KMJxNI. 'i existe la posibilidad de probarlo ademscon un na!egador !ocal, muc$o me2or an."n buen e2emplo de este carcter descripti!o es la definicin detitulares, tambi*n llamados encabezados, en 901L. Oamos a

adelantarnos un poco en esta introduccin para mostrar estee2emplo, en *l se muestra como poner el titular de una pgina/


7/350

$=QFien!enido a la pgina de La 'uper EditorialR$=Q

on este cdigo estamos describiendo el texto Bienvenido a lapgina de La Super Editorialcomo el texto de mxima importancia

en nuestra pgina, es el titular. En los na!egadores ms usadoscomo el 7etscape 7a!igator o el 1icrosoft &nternet Explorer estetitular ser mostrado como un texto en negrita de tamao grande(el tamao ms grande posible). 'in embargo repetimos una !ezms que existen na!egadores como pueden ser Lnx o Emacs4WEUE0&D"E0Q6 bien esta otra/761F>EUE0&D"E0Q 0E806 R761F>E E0&D"E0Q

omo !emos, la primera estructura est formada por una nicainstruccin la segunda por dos/ una que marca el inicio de laetiqueta otra que marca el final, con texto entre ambas.Por e2emplo, para indicarle al na!egador que queremos que pinteuna l#nea $orizontal debemos escribir/

$rQs# de sencillo. omo !emos, el nombre de la etiqueta !a delimitadopor los s#mbolos menor que () mayor que (Q), todas lasinstrucciones de 901L deben ir encerradas entre estos doss#mbolos.Pero las etiquetas no se limitan a indicar ordenes tan sencillas,estas rdenes tienen en ocasiones parmetros. Por e2emplo laetiqueta $rQ tal como lo $emos $ec$o anteriormente dar#a lugara la l#nea que !emos en la figura =.A, es decir le dice al na!egadorque dibu2e una l#nea $orizontal en la pantalla. Esta l#nea tiene ungrosor predeterminado un anc$o !ariable en funcin del tamaode la !entana del na!egador.Figura 1.6. -o b!ico de una etiqueta HTML in ning7n tipo depar!metro. (jemplo uando la etiqueta 89r: para crear unal#nea 9ori4ontal.

'in embargo $a muc$as formas de pintar una l#nea ser#adeseable poder elegir detalles tales como la anc$ura el grosor que!a a tener dic$a l#nea. Para especificar este tipo de detalles secrearon los atributos de las etiquetas. Este nue!o elemento seintroduce en una etiqueta de la siguiente manera/


9/350

etiqueta atributoV;!alor;Q

Es decir, en primer lugar ponemos el nombre de la etiqueta,despu*s el nombre del atributo seguido por un signo igual

posteriormente el !alor que queramos darle a ese atributoencerrado entre comillas una etiqueta puede tener tantos atributoscomo se deseen en ocasiones son necesarios para que laetiqueta tenga algn significado.En nuestro e2emplo de la l#nea $orizontal existe un atributo llamado'&E, que significa tamao en ingl*s, que permite controlar elgrosor de la l#nea que ser dibu2ada en pantalla. Oeamos une2emplo, en la figura =.I podemos !er la l#nea $orizontal condiferentes grosores.

Figura 1.;. La etiqueta tienen atributo para cambiarapecto del e3ecto que producen. (n ete ejemplo $emocomo e puede cambiar el groor de una l#nea con el atributoI


10/350

estndar 8901L. Para los curiosos adelantaremos que 8901L esid*ntico a 901L pero con algunas restricciones adicionales delmundo de 81L.

ntes de empezar con el cdigo 901L bsico con!iene $acer saber

al lector que aunque en todos los e2emplos usados $asta a$ora lasetiquetas usadas estaban escritas en masculas en realidad esindiferente el uso de estas o de minsculas. 'in embargo lasmasculas son de uso comn para que sea ms fcil distinguirlasdel texto por tanto seguiremos usando este con!enio a lo largo delcurso.En los e2emplos tambi*n usaremos distinto sangrado (alineacin delos prrafos) para los diferentes elementos del cdigo para mostrarlos ni!eles de anidamiento. Este sangrado no es necesario ellector puede optar por ignorarlo si decide copiar los e2emplos para!erlos en su na!egador, sin embargo facilita la lectura del cdigo no afecta al modo en que los ob2etos de nuestra pgina sernmostrados.M. Primeros pasos con 901LZ nterior[ &nicio[ 'iguiente \onocidas a las principales caracter#sticas de 901L estamos listospara aprender sus principales etiquetas para crear nuestraprimera pgina..1. (tructura de una p!gina

0odo documento 901L est formado por los bloques que podemosapreciar en la figura M.=. Pasemos a explicar cada uno de ellos.Figura .1. (tructura de bloque de un documento HTML.

En primer lugar deberemos especificar que el arc$i!o de texto queestamos escribiendo es un documento 901L, para ello usamos lasinstrucciones de inicio fin de la etiqueta $tmlQ al principio alfinal de la pgina respecti!amente/$tmlQ digo de la pgina R$tmlQ
http://www.wikilearning.com/introduccion_al_lenguaje_html-wkccp-9708-1.htmhttp://www.wikilearning.com/curso_completo_de_html-wkc-9708.htmhttp://www.wikilearning.com/parrafos_en_html-wkccp-9708-3.htmhttp://www.wikilearning.com/curso_completo_de_html-wkc-9708.htmhttp://www.wikilearning.com/parrafos_en_html-wkccp-9708-3.htmhttp://www.wikilearning.com/introduccion_al_lenguaje_html-wkccp-9708-1.htm


11/350

El cdigo de la pgina esta formado a su !ez por dos grandesbloques, la cabecera el cuerpo.La cabecera de la pgina est delimitada por las instrucciones deinicio fin de la etiqueta $ead. Estas instrucciones deben estar

dentro de la etiqueta 901L de la siguiente manera/$tmlQ $eadQ Elementos de la cabecera R$eadQ ... >esto de cdigo de la pgina ... R$tmlQEn la cabecera de la pgina se introduce toda aquella informacin

que afectar a toda la pgina. En un principio esta informacin selimitar al t#tulo. Este t#tulo se indicar con la etiqueta title usando lasiguiente sintaxis/$tmlQ $eadQ titleQ1i primera pgina WEFRtitleQ R$eadQR$tmlQ

El resultado de !er esta pgina con nuestro na!egador es el que seobser!a en la figura M.M. omo !emos, el rea de la pantalla dondesuele estar la pgina est toda!#a !ac#a, pero si nos fi2amos en lacabecera de la !entana del na!egador !emos que el t#tulo a pasadode ser 1icrosoft &nternet Explorer a ;1i primera pgina WEF 41icrosoft &nternet Explorer;. Es decir el t#tulo que le demos anuestra pgina con la etiqueta 0&0LEQ pasar a ser el t#tulo de la!entana del na!egador.Figura .. (l t#tulo de la p!gina e motrado en la parteuperior de la $entana del na$egador.


12/350

dems cuando un usuario !ea nuestra pgina decida incluirla ensu lista de 3ebs preferidos con la opcin agregar a fa!oritos del

men Ha!oritos del na!egador (en este caso el explorer) aadir elnombre que le $emos dado a nuestra pgina en dic$o men, tal como podemos apreciar en la figura M.


13/350

Es importante resaltar que nada de lo que se ponga en la cabecerade la pgina ser mostrado en la zona del na!egador dedicada amostrar el contenido, es decir, en la zona que !emos en blanco enla figura M.M.Esto nos induce a pensar que existe otra forma de indicar comoser el contenido de la pgina, pues as# es/ el cuerpo es el siguientegran bloque de nuestro documento 901L, *ste quedar delimitadopor la etiqueta bod. En su interior introduciremos todos aquellos

elementos de los que queremos que conste nuestra pgina comopueden ser testo, imgenes, tablas, etc. onociendo la etiquetabod podemos ampliar el e2emplo anterior para que inclua texto.$tmlQ $eadQ titleQ1i primera pgina WEFRtitleQ R$eadQ bodQ 9ola a todos, como $an deducido por el titulo esta es la

primera pagina 3eb que $ago, espero que les guste. Hdo. ]orge

RbodQ R$tmlQEn la figura M.J podemos apreciar como muestra el &nternet Explorereste cdigo. omo !emos todo el texto que $emos escrito entre lasinstrucciones de inicio fin forman a$ora el cuerpo de nuestrapgina.


14/350

Figura .5. (n eta 3igura ober$amo la 4ona de la $entana enla que lo na$egadore motrar!n el texto que pongamo en elcuerpo de la p!gina.

760/ Es posible que aunque no incluamos las etiquetas $tml obod nuestras pginas sean !isualizadas con algunos na!egadores.'in embargo no debemos confiarnos a que lo ms seguro es quecon el resto de na!egadores no se !ean bien. Por esta razn esmu recomendable usar ambas etiquetas tal como se $a descrito."na !ez que a sabemos insertar contenido en una pginapasaremos a estudiar las diferentes etiquetas que sir!en para darle

formato a ese contenido... Lo encabe4ado"sualmente un documento tiene, adems de texto llano, una seriede encabezados o titulares. Para ello el lengua2e 901L posee unaserie de etiquetas que permiten disponer de titulares de $asta Ini!eles de importancia.Estas etiquetas son/ $=Q, $MQ, $


15/350

importante el seis. En la figura M.A se puede !er un e2emplo decmo muestra las cabeceras &nternet Explorer.Figura .6. 'itinto tipo de encabe4ado $ito con Microo3tInternet (xplorer.

El cdigo usado en este e2emplo es el siguiente/$=QEncabezado =R$=Q $MQEncabezado MR$MQ $


16/350

slo un e2emplo que otros na!egadores pueden mostrar estosencabezados de manera diferente.Por otro lado los na!egadores ms usados $o en d#a son el&nternet Explorer el 7etscape 7a!igator es normal prestarles una

atencin especial (aunque no exclusi!a). G en la figura M.I podemosapreciar cmo con este ltimo se muestra los encabezados de unamanera prcticamente id*ntica. Por esta razn podemos estar casiseguros de que los usuarios !ern los encabezados de la formamostrada en ambas figuras.Figura .;. 'itinto tipo de encabe4ado $ito con =etcape=a$igator

9a que destacar que los encabezados de $= a $J pueden serusados como t#tulos a que los na!egadores suelen usar un tamaode letra maor que el $abitual para mostrarlos. 'in embargo losencabezados $A $I suelen ser mostrados con letra ms pequeaan que el texto por esta razn se usan como notas a pie depgina o comentarios de poca importancia../. (l ejemplo mejorado

$ora que sabemos usar encabezados los utilizaremos parame2orar ligeramente nuestra pgina. En la figura M.N podemos !ercmo se muestran las modificaciones.Figura .>. (jemplo de p!gina Web con do tipo deencabe4ado " do p!rra3o.


17/350

Esta pgina $a sido creada con el siguiente cdigo/$tmlQ $eadQ titleQ1i primera pgina WEFRtitleQ R$eadQ bodQ $=Q1i primera pgina WEFR$=Q $MQFien!enidaR$MQ 9ola a todos, como $an deducido por el titulo esta es la

primera pagina 3eb que $ago, espero que les guste. Hdo.

]orge $MQPropositoR$MQ En esta pgina ir* practicando con los conocimientos que

adquiera en el curso de 901L RbodQ R$tmlQ


18/350

La me2or manera de $abituarse es probar, para ello proponemos lossiguientes e2emplos de cdigo que sern mostrados de la mismaforma por el na!egador aunque algunos contengan saltos de l#nea,otros tabulados entre las palabras, etc.

$=QEl conductor del coc$e le pregunto si se encontrabamalR$=Q

$=Q El conductor del coc$e le pregunt si se encontraba mal R$=Q

$=Q El conductor del coc$e

le pregunto si se encontraba mal R$=QEn estos e2emplos podemos obser!ar di!ersos saltos de l#nea separaciones en el texto, sin embargo el na!egador mostrar unsolo espacio entre las palabras producir saltos de l#nea dondesea necesario en funcin del tamao de la !entana. Las figuras M.= M.M son e2emplos de cmo muestra el Explorer los cdigosanteriores para diferentes tamaos de !entana.Figura .1. -o b!ico de una etiqueta HTML in ning7n tipo depar!metro. (jemplo uando la etiqueta 89r: para crear unal#nea 9ori4ontal.

Figura .. La etiqueta tienen atributo para cambiarapecto del e3ecto que producen. (n ete ejemplo $emocomo e puede cambiar el groor de una l#nea con el atributo?i4e?


19/350

onocida esta caracter#stica es momento de adentrarse en lasdistintas etiquetas que permiten tener un maor control sobre el

texto de nuestras pginas.alto de l#neaEn ocasiones puede ser con!eniente introducir un punto apartecuando estamos escribiendo un texto. En 901L para $acer estopuede usarse la etiqueta brQ. uando el na!egador se encuentracon esta etiqueta pro!oca un salto de l#nea sigue mostrando elcontenido de la pgina. Oeamos un e2emplo/Estaba internndose en lo desconocido. brQ 5urante todo el traecto $asta Woodfield no de2 de pensar en los

aspectos econmicos, con el temor de estar cometiendo...En este texto podemos obser!ar cmo tras el primer punto eranecesario un cambio de l#nea, por lo que $emos usado brQ.)mo e inertan p!rra3o"n prrafo es un con2unto de frases sobre un mismo asunto. En901L para demarcar un prrafo se usa la etiqueta p, situndose lainstruccin de inicio pQ al comienzo del prrafo la instruccin defin RpQ tras la ltima frase. Entre ellas pueden insertarse tantossaltos de l#nea como se deseen as# como muc$os otros elementos901L. continuacin se muestra un e2emplo/


20/350

pQ Estaba internndose en lo desconocido.RpQ

pQ

5urante todo el traecto $astaWoodfield no de2 de pensar en los aspectos econmicos, con eltemor de estar cometiendo...

RpQ6tra opcin $ubiera sido crear un nico prrafo e insertar un saltode l#nea tras la primera frase/pQ Estaba internndose en lo desconocido.

brQ 5urante todo el traecto $astaWoodfield no de2 de pensar en los aspectos econmicos, con eltemor de estar cometiendo...

RpQEn la figura M.< se puede obser!ar la diferencia entre los dose2emplos en Explorer. Puede obser!arse que en general losna!egadores de2an un espacio !ertical antes despu*s de cadaprrafo, algo que no ocurre con los saltos de l#nea.Figura ./. (jemplo de un p!rra3o con un alto de l#nea " ladi$iin del mimo texto en do p!rra3o.

-o incorrecto de la etiqueta p

La etiqueta p es usada en muc$as pginas de forma incorrecta.El error consiste en emplearla simplemente para introducir un


21/350

espacio (!ertical) entre l#neas. La forma adecuada es introducirlas instrucciones de inicio fin para marcar el comienzo el fin deun prrafo.(pacio entre l#nea

Para introducir un espacio !ertical entre l#neas debe usarse laetiqueta brQ. 'i se ponen !arias seguidas no se mostrar msespacio, pero esto puede solucionarse insertando entre lasetiquetas la cadena ; ;. Por e2emplo para insertar tres l#neas enblanco puede usarse/

brQ ^nbsp? brQ ^nbsp? brQ ^nbsp?

El atributo _align_ en la etiqueta pQ permite especificar la alineacindel prrafo. Puede tener tres !alores/ ;center;, ;left; ;rig$t;, paraobtener un prrafo centrado, alineado a la izquierda o alineado a laderec$a respecti!amente. En la figura M.J se muestra el prrafo delcdigo anterior con los tres tipos de alineacin.Figura .5. )on el atributo ?align? e pueden crear p!rra3oalineado a la derec9a, centrado o alineado a la i4quierda.

L#nea 9ori4ontale para eparar p!rra3o


22/350

'i lo que se necesita es separar dos secciones diferentes de unapgina, a sea texto o no, puede emplearse una nue!a etiqueta/$rQ. 'u nombre pro!iene del ingl*s Horizontal ule (l#nea$orizontal). Esta etiqueta est formada por una nica instruccin

pro!oca que el na!egador inserte una l#nea $orizontal como lamostrada en la figura M.< que separaba los dos prrafos que seestaban comparando. Existen cuatro atributos que permitenmodificar su apariencia. Estos son/_align_/Permite cambiar la alineacin de la l#nea. Puede tomar tres!alores/!left!, !center! !right! para conseguir alineacin a laizquierda, centro derec$a respecti!amente._nos$ade_/_nos$ade_, que en ingl*s significa sin sombra, existe porque algunosna!egadores grficos como 7a!igator o Explorer muestran lasl#neas $orizontales con un efecto tridimensional con sombra. lincluir este atributo se elimina este efecto de manera que elna!egador slo mostrar una l#nea $orizontal negra._size_/on este atributo se puede controlar el grosor de la l#nea. omo!alor de este atributo se debe especificar el !alor deseado enpixeles (puntos de pantalla)._3idt$_/

Este atributo permite especificar el anc$o de la l#nea. El !alor puedeser dado de una manera absoluta, especificando el anc$o enpixeles (por e2emplo 3idt$V=KK) o de manera relati!a respecto alanc$o de la !entana del na!egador usando porcenta2es (pore2emplo 3idt$V;@K`;). Es ms que recomendable usar este ltimosistema de manera que obtengamos un resultado apropiadoindependientemente del tamao que cada usuario quiera dar a la!entana de su na!egador.Estos atributos pueden ser usados con2untamente para combinar

sus efectos. En la figura M.A podemos !er el efecto de cada uno porseparado en Explorer 2unto con los !alores empleados en cadacaso.Figura .6. )on lo nue$o atributo de la etiqueta 89r:podemo controlar el anc9o, groor alineamiento " ombra dela l#nea 9ori4ontal.


23/350

La etiqueta 8blocquote:... 8@blocquote:6tra etiqueta relacionada con el formato de prrafos en 901L esbloc:quoteQ, que consta de una instruccin de inicio y una de fin y que indica queel prrafo que encierra es un texto parafraseado. Al usar esta etiqueta el navegador

mostrar el texto en u nuevo prrafo con mrgenes a la izquierda y a la derecha. En la

figura 2.6 puede verse un uso tpico de esta etiqueta.

=o abuar de la l#nea 9ori4ontale

Es con!eniente no usar muc$o las l#neas $orizontales,limitndolas al comienzo fin de la pgina. La razn de esto es

que las l#neas en medio de la pgina dificultan la lectura de esta.'i se desea separar secciones un espacio !ertical del tamaoadecuado es ms efecti!o.

Figura .;. La etiqueta 8blocquote: e uada para inertarbloque de texto que citan a otro autor. Lo na$egadoreuelen introducir un angrado en ete texto.


24/350

Due se corresponde con el cdigo/1i poema fa!orito es aquel de Hederico %arc#a Lorca que reza/ bloc:quoteQ 1i corazn, como una sierpebrQ se $a desprendido de su piel,brQ aqu# la miro entre mis dedosbrQ llena de $eridas de mielbrQ Rbloc:quoteQ

La etiqueta 8addre:... 8@addre:1u relacionada con la anterior, es la etiqueta addressQ, que eningl*s significa direccin. Esta etiqueta est compuesta, igualmente,por dos instrucciones se usa para incluir informacin sobre elautor de una pgina WEF o elementos relacionados. Puedeencontrarse un e2emplo de su uso en las coletillas existentes al finalde muc$as pginas en las que se inclue informacin !ariada parael usuario como puede ser, adems del autor, la fec$a de la ltimamodificacin, la fec$a actual, la ">L de la pgina, etc. como se

muestra en la figura M.N.Figura .>. (n eta p!gina e ober$a como al 3inal de la p!ginae 9an incluido dato de lo autore " de la p!gina. ara ello e9a uado la etiqueta 8addre:.


25/350

La etiqueta 8center:... 8@center:cabamos de !er una serie de etiquetas que permiten cambiar del#nea, crear distintos tipos de prrafos o insertar l#neas que lesseparen. 0ambi*n $emos !isto que alguna de las etiquetasutilizadas tienen el atributo _align_ que permite indicar elalineamiento.En ocasiones puede ser mu til indicar que algn texto, imagen oalgn otro elemento de la pgina deb#a ser centrado. 'in embargono todas las etiquetas tienen el atributo _align_. La solucin esemplear una nue!a etiqueta/ center. sta est compuesta por una

instruccin de inicio una de fin de manera que todo lo quequedaba entre ellas, fuese lo que fuese, estu!iese centrado. Pore2emplo en el e2emplo del !erso de Lorca podemos centrarloescribiendo/1i poema fa!orito es aquel de Hederico %arc#a Lorca que reza/ centerQ bloc:quoteQ 1i corazn, como una sierpe brQ se $a desprendido de su piel,brQ

aqu# la miro entre mis dedosbrQ llena de $eridas de miel brQ Rbloc:quoteQ RcenterQG el resultado obtenido $ubiese sido el de la figura M.Figura .B. )on la etiqueta 8center: e poible centrarcualquier elemento de nuetra p!gina como por ejemplo el$ero de Lorca de la 3igura .;.


26/350

ctualmente existen alternati!as me2ores que la etiqueta centerpara especificar el alineamiento. En particular la etiqueta di! las$o2as de estilo en cascada que sern tratadas a lo largo de estecurso.

J. mo insertar imagenes en una paginaZ nterior[ &nicio[ 'iguiente \En el cuarto cap#tulo de la obra trataremos con detalle el mundo delas imgenes en el WWW aprenderemos todas las posibilidades

grficas que ofrece. En este cap#tulo aprenderemos, comointroduccin, a insertar imgenes para dar mas !ida a nuestrapgina.La etiqueta usada para insertar imgenes es/ img Q. Esta etiquetaest compuesta por una nica instruccin por tanto RimgQ noexiste su uso est pro$ibido. Podemos insertar una imagen enmedio de una frase como si fuese una palabra ms de ella sermostrada por el na!egador a continuacin del texto (o cualquier otroelemento anterior) como podemos !er en el e2emplo de la figura M.@.

Figura .C. Al inertar una imagen eta e entreme4cla con eltexto. )uando la imagen e pequeDa e crean intereantee3ecto como ete.
http://www.wikilearning.com/parrafos_en_html-wkccp-9708-3.htmhttp://www.wikilearning.com/curso_completo_de_html-wkc-9708.htmhttp://www.wikilearning.com/como_crear_enlaces_hipertexto-wkccp-9708-5.htmhttp://www.wikilearning.com/parrafos_en_html-wkccp-9708-3.htmhttp://www.wikilearning.com/curso_completo_de_html-wkc-9708.htmhttp://www.wikilearning.com/como_crear_enlaces_hipertexto-wkccp-9708-5.htm


27/350

En ella se puede obser!ar como $emos insertado una flec$a enmedio de la frase despu*s de la imagen $emos seguidoescribiendo. unque podemos crear este efecto con imgenes detodos los tamaos no es recomendable $acerlo con aquellas que

tengan una altura muc$o maor que la del texto.Para insertar una imagen en una pgina WEF necesitamos tenerlaen un arc$i!o aparte. Existen multitud de formatos para almacenaruna imagen en un arc$i!o/ F1P, %&H, ]PE%, 8P1, 8F1, P7%, 0&HH,etc. cada uno de los cuales tienen unas caracter#sticas. El formatoelegido en el World Wide Web es el formato %&H que distingue a susarc$i!os porque tienen la terminacin ;.gif;. Podr#amos decir quetodos los na!egadores son capaces de mostrar las imgenesincluidas en este formato. Los na!egadores en modo texto suelenproporcionar m*todos para !er las imgenes usando algnprograma !isor externo. "n segundo formato que se $a introducidoen el WWW que es soportado por la gran maor#a de losna!egadores (incluendo al Explorer al 7a!igator ) es el ]PE%.Este formato es especialmente til para las fotos a que es capazde comprimir este tipo de imagen de manera que ocupen $asta J!eces menos que las imgenes con formato %&H. Los arc$i!os quecontienen imgenes con formato ]PE% suelen tener la terminacin;.2pg;."na !ez tenemos la imagen en un arc$i!o aparte es $ora de escribir

el cdigo 901L que nos permitir insertarla en la pgina. omo$emos comentado usamos la etiqueta imgQ para indicar elnombre del arc$i!o usamos el atributo _src_. En el e2emplo de lafigura M.@ el cdigo usado para insertar la flec$a es/

Pulsa en la flec$a img srcV;flec$a=.gif;Q para pasar a la

pgina siguiente.

A. mo crear enlaces $ipertextoZ nterior[ &nicio[ 'iguiente \"na !ez !isto como introducir distintos tipos de texto prrafos as#como insertar imgenes en una pgina, lo nico que queda poraprender para ser capaces de crear una pgina Web bastantecompleta son los enlaces $ipertexto. on ellos se pueden acti!arfrases o palabras de la pgina para que al pulsar sobre ellas sesalte a cualquier otra pgina de &nternet que decidamos.Estos enlaces $ipertexto (en ingl*s links) no son ms que unas

zonas ($abitualmente palabras o frases) especialesde nuestro textoque ofrecen la posibilidad de pulsar sobre ellas para ir a otras
http://www.wikilearning.com/como_insertar_imagenes_en_una_pagina-wkccp-9708-4.htmhttp://www.wikilearning.com/curso_completo_de_html-wkc-9708.htmhttp://www.wikilearning.com/practica_1_la_pagina_web_de_la_chistera-wkccp-9708-6.htmhttp://www.wikilearning.com/como_insertar_imagenes_en_una_pagina-wkccp-9708-4.htmhttp://www.wikilearning.com/curso_completo_de_html-wkc-9708.htmhttp://www.wikilearning.com/practica_1_la_pagina_web_de_la_chistera-wkccp-9708-6.htm


28/350

pginas. El concepto del $ipertexto no es nue!o, la maor#a de loslectores lo $abrn usado a en la auda de Windo3s o en otrosmuc$os sistemas, lo realmente no!edoso que ofrecen estos enlacesen el WWW es la posibilidad de pulsar na!egar $asta pginas que

se encuentren en el otro extremo de la tierra. El na!egante puedemo!erse de Espaa a ]apn con una nica pulsacin sobre el textoadecuado. En seguida se !er lo sencillo que es incluir estaimpresionante tecnolog#a en una pgina 3eb.Los enlaces pueden clasificarse en dos tipos, los internos o locales los externos/Los enlaces internos son aquellos que enlazan las pginas quecomponen un mismo sitio 3eb ("eb site). 0odas estas pginasestarn (generalmente) en el mismo ser!idor WWW, por tantoestarn tambi*n en el mismo ordenador. Por esta razn slo sernecesario indicar en nuestro cdigo el nombre del arc$i!o dondeest la pgina que queremos enlazar el directorio en el que seencuentra. "n e2emplo direccin de un enlace interno es/

R$obbiesRindex.$tml

Los enlaces externos permiten saltar desde una pgina $asta otrapuede estar en cualquier otro lugar del mundo en otro ser!idor 3eb.

l crear estos enlaces es necesario especificar la direccincompleta de &nternet (la ">L) de la pgina que queremos enlazar.Por e2emplo/

$ttp/RR333.otroser!idor.comR$obbiesRindex.$tml

Por ltimo, cabe resaltar que aunque la maor#a de las !eces loslin:s se usan para enlazar una pginas con otras tambi*n puedenusarse con imgenes, sonido, !#deo prcticamente cualquier tipode fic$ero.La etiqueta 8a:... 8@a:Esta etiqueta, de nombre sencillo, es la que !a a permitir incluir en

las pginas enlaces $ipertexto. 'u atributo _$ref_ permite indicar cuales la pgina a la que debe saltar el usuario al pulsar sobre el textoadecuado. El texto del enlace ser aquel que se introduzca entre lainstruccin de inicio la instruccin de final de la etiqueta debe serresaltado por el na!egador para que el usuario sepa que puedepulsar en *l. La estructura de un lin: es/a $refV;direccinU">L;Q 0exto que ser sensible ($ipertexto) RaQ


29/350

Los na!egadores grficos como 7etscape 7a!igator 1icrosoft&nternet Explorer resaltan este texto mostrndolo de un colordiferente subrandolo, adems el cursor cambiar al situarlosobre el texto. Los na!egadores que funcionan en modo texto como

Lnx resaltan los enlaces $ipertexto cambiando el color del texto de su fondo.Oeamos un e2emplo sencillo del uso de enlaces. 'e $a creado unsitio 3eb personal con M pginas. La pgina principal se encuentraen el arc$i!o index.$tml se quiere que en ella $aa un enlace aotra pgina donde se $an escrito sobre los $obbies del creador delsitio 3eb que se encuentra en el arc$i!o $obbies.$tml. El enlacepodr#a ser algo as#/0ambi*n puedes conocer mis a $refV;$obbies.$tml;Q$obbiesRaQEl resultado es el que puede apreciarse en la figura M.=K donde lapalabra $obbies aparece resaltada.Figura .1E. Al pular obre un enlace 9ipertexto saltaremos aotra p!gina de Internet. Lo na$egadore realtan etoenlace para que ea 3!cil identi3icarlo.

'i no funciona un lin: con!iene comprobar la sintaxis del cdigo901L. "n error comn es no cerrar las comillas que tras poner ladireccin de la pgina enlazada. 'i se comete este error, ademsde no funcionar el enlace, es posible que desaparezcan otroselementos de la pgina al !isualizarla.

!gina en otro directorio'i la pgina a la que queremos crear el enlace no se encuentra enel mismo directorio que la actual es necesario indicar el directorio (oruta de directorios, pat$) donde est. 'i en el e2emplo anterior lapgina $obbies.$tml estu!iese en el directorio varios el e2emploanterior deber#a sustituirse por/0ambi*n puedes conocer mis a $refV;!ariosR$obbies.$tml;Q$obbiesRaQ


30/350

omo !emos, para separar el nombre del directorio del nombre delarc$i!o se usa el s#mbolo ;R;. 0ambi*n se usar#a, si fuese necesario,para separar !arios directorios.(nlace externo

La !erdadera fuerza de &nternet estriba en la posibilidad de na!egarcon una sola pulsacin por informacin que se encuentre encualquier lugar del mundo. Para con!ertir esto en realidad existenlos enlaces externos.

lgunos diseadores 3eb recomiendan que no se creen enlacesexternos desde la pgina principal o home pagede nuestro sitioWeb para no incitar al !isitante a que se !aa de la pgina.

La creacin de uno de estos enlaces es mu similar a la creacin delos enlaces locales. El nico cambio radica en que el !alor dado al

atributo _$ref_ es la direccin completa de &nternet, sea otra pgina3eb, una imagen o cualquier otro arc$i!o. Por e2emplo, para incluirun enlace desde cualquier pgina a la de 516 (#pen $irectory%ro&ect) . Para ello puede emplearse/Enlace a a $refV;$ttp/RR333.dmoz.org;Q5irectorio 516RaQs# de fcil. Para referirse a un arc$i!o espec#fico del ser!idor de516 $a que especificar la ruta de directorios el nombre delarc$i!o. "n e2emplo de uso podr#a consistir en construir un enlace ala seccin sobre &nternet de este buscador. Para ello $a que incluirel siguiente lin:/a $refV;$ttp/RR333.dmoz.orgRomputersR&nternetR;Q

'eccin de &nternet de 516 RaQ"n aspecto destacable de este e2emplo es que se $a especificadola ruta de directorios pero no el nombre del arc$i!o. on ello seconsigue acceder al arc$i!o por defecto de ese directorio. 0odos losser!idores 3eb tienen un archivopor defecto de manera que si nose introduce el nombre ninguno ese arc$i!o ser el mostrado. En lamaor#a de ser!idores el nombre elegido es index.$tml por lo que ladireccin usada antes ser#a equi!alente a/$ttp/RR333.a$oo.comRcomputersRinternetRindex.$tml

'i un sitio Web consta de !arias pginas es usual incluir todos losenlaces externos en una pgina especial dedicada a ellos comola que se muestra en la figura M.==.

Figura .11. !gina que agrupa todo lo enlace de un itio%eb


31/350

I. P>0& =/ La pagina 3eb de ;La c$istera;Z nterior[ &nicio[ 'iguiente \La propuetaEn esta primera prctica de la obra se propone crear un sitio Web>EL poniendo en prctica los conocimientos adquiridos $astaa$ora. En *l incluiremos imgenes, !arios titulares prrafos de textode distinto tipo enlaces $ipertexto a otras pginas.En la figura M.=M se muestra una captura de un na!egador !isitandola pgina tal como debe quedar al final. 'e propone al lectorintentar imitar la apariencia de esta pgina usando nicamente lasetiquetas 901L explicadas $asta a$ora.Figura .1. La pr!ctica 1 propone reali4ar un p!gina a partir delo motrado en eta 3igura.
http://www.wikilearning.com/como_crear_enlaces_hipertexto-wkccp-9708-5.htmhttp://www.wikilearning.com/curso_completo_de_html-wkc-9708.htmhttp://www.wikilearning.com/anclas_i-wkccp-9708-7.htmhttp://www.wikilearning.com/como_crear_enlaces_hipertexto-wkccp-9708-5.htmhttp://www.wikilearning.com/curso_completo_de_html-wkc-9708.htmhttp://www.wikilearning.com/anclas_i-wkccp-9708-7.htm


32/350

Para empezar a realizar la pgina debe abrirse un editor de textos ode 901L (es indiferente). lgunos e2emplos de programas quepueden ser!ir son notepad, emacs, !i, 9ome'ite, etc. "na !ezabierto se puede empezar a escribir la pgina tal como se $aexplicado, comenzando por la cabecera siguiendo con el resto dela pgina. continuacin se muestran las primeras l#neas quepodr#a contener el arc$i!o a modo de elemplo/$tmlQ $eadQ titleQ La c$istera 4 9umor magia RtitleQ R$eadQ bodQ0ras escribir el cdigo debe guardarse con terminacin ;.$tml; aest lista para ser !isualizada con cualquier na!egador. 0ras abrir


33/350

*ste $a que seleccionar la opcin rc$i!oRbrir...Examinar... (osimilar) elegir el arc$i!o en el que $ab#amos guardado la pgina.En ese momento debe mostrarse en pantalla la pgina creada. Lo$abitual es tener que realizar cambios en el cdigo 901L, !ol!er al

na!egador, !ol!er a $acer cambios as# $asta que se obtiene elresultado deseado. SsuerteTLa olucinEn esta primera prctica se !a a mostrar a continuacin el cdigocompleto de la pgina resultado. Por supuesto, con!iene intentarloantes de mirarlo. 0ambi*n $a que tener en cuenta que no $a unnico resultado es posible que un cdigo ligeramente diferente delugar a una pgina prcticamente id*ntica al !erla con el na!egador.$tmlQ$eadQ

titleQ La c$istera 4 9umor magia RtitleQ R$eadQbodQ

centerQ $=Q img srcV;imagenesRc$istera.gif;Q L 9&'0E> 4 9umor magia R$=Q RcenterQ $MQ Duienes somos R$MQ pQLa c$istera es un grupo de artistasdedicados al mundo de la magia, la comedia el espectculo.

Entre nosotros podrs encontrar $umoristas, magos, s$o3men, etc.RpQpQ'i usted o su empresa necesita crearun espectculo no quiere quedar decepcionado no dude enescribirnos 96> 1&'16. 7uestra direccin es/RpQ

centerQ c$isterac$istera.es RcenterQ $MQ

"n e2emplo de nuestro repertorio R$MQ


34/350

pQada d#a le mostramos e2emplosdistintos de nuestro ampl#simo no!edoso repertorio de c$istes/

bloc:quoteQ Era un t#o tan gafe, tan gafe, que se sent en un pa2ar se

cla! la agu2a. Rbloc:quoteQ bloc:quoteQ 5octor, 5octor, +cuanto tiempo me queda de !ida-brQ

A... J... e#rse 0oca, S]a, 2a, 2aT RaQ/ 'i te aburres, ests deprimido,o simplemente quieres re#r, psate por mi pgina disfrutarsde los ms de ==K c$istes que tiene. Son posibilidad de en!iart el tuoTpQ

a $refV;$ttp/RR333.geocities.comRFourbon'treetR5eltaR


35/350

R$tmlQ

"na !ez $emos comprobado que con nuestro na!egador $abitualla pgina es mostrada correctamente con!iene probarla con otros

incluendo alguno en modo texto (Lnx) diferentes tamaos depantalla. !eces las diferencias sern sorprendentes.

N. nclas (&)Z nterior[ &nicio[ 'iguiente \5espu*s de realizar nuestra primera prctica continuamos losenlaces $ipertexto con unos elementos mu relacionados con ellos/las anclas, que nos permitirn crear enlaces especificando a quelugar concreto de una pgina queremos saltar.

*u+ e un anclaG"n enlace normal tiene la estructura que podemos !er en la figuraM.=


36/350

otra pgina se salta al lugar donde est* el ancla, es decir, a no se!a al comienzo de la pgina como con los enlaces !istos $astaa$ora. 5ic$o de otra forma usando anclas es posible que un enlaceapunte al lugar concreto de una pgina que se desee.

)reando anclaPara crear anclas usamos, al igual que para crear enlaces, laetiqueta aQ, sin embargo no debe confundirse el lector porqueaunque ambos elementos est*n relacionados se use la mismaetiqueta para crearlos las funciones de cada uno son radicalmentediferentes. Las anclas slo son marcas son in!isibles cuando!isualizamos la pgina con el na!egador. Por esta razn las anclasno definen ningn texto acti!o.

pesar de ello es $abitual encontrar texto entre las instrucciones deinicio de fin como en el siguiente e2emplo/a nameV;nombrencla;QomienzoRaQEste texto no tiene ningn significado especial ser interpretadopor los na!egadores de igual forma que el texto de alrededor.omo se $a adelantado en el e2emplo anterior, al crear anclas no seemplea el atributo _$ref_. En su lugar se usa otro llamado _name_.on este atributo se da un nombre al ancla que luego nos ser!irpara referirse a ella."n e2emplo donde la utilidad de las anclas se $ace e!idente es enaquellas pginas en las que nos encontramos una lista ordenadaalfab*ticamente. 'i la lista es mu larga mo!erse $asta la letra ',por e2emplo puede $acerse molesto. Pero usando anclas el autor dela pgina puede incluir todas las letras al principio de manera que sise pulsa sobre una letra se salta al lugar de la lista donde empiecenlas entradas de la letra '. En la figura M.=J podemos !er un e2emploreal capturado de la pgina del buscador espaol 6C .Figura .15. (n la eccin uperior puede $ere $er una eriede enlace la letra ma"7cula a ancla. (n la eccin

uperior e muetra el lugar al que e 9a altado al pularobre la letra . odemo deducir que ante de la palabraalud 9a" un ancla.


37/350

En este caso se detallan todas las secciones del Web ordenadasalfab*ticamente. l principio de la pgina $a un listado con todaslas letras del abecedario de manera que al pulsar sobre una letra!as al lugar de la pgina donde estn las secciones que empiezancon esa letra. +mo se $ace esto- Es mu sencillo, el procesoconsta de dos pasos/Primero $a que insertar el ancla en el lugar de la pgina donde se

quiere poder saltar. 0omando como e2emplo una una pgina 3ebque contiene un diccionario se emplear#a el siguiente cdigo/...

a nameV;';Q RaQ 'alud 'anta laus 'eguridad ...


38/350

En segundo lugar se crea un enlace al principio de la pgina un queapunte al ancla. En este e2emplo el cdigo usado es/

a $refV;';Q' RaQ

En este e2emplo al pulsar sobre la letra ' se salta directamente allugar de la pgina donde se encuentra la palabra salud, que es laprimera de las que comienzan con ;';, que es el efecto deseado.Para especificar que el enlace apuntaa un ancla se $a incluido unsigno seguido del nombre del ancla.La estructura de un enlace a un ancla que se encuentre en lamisma pgina como el de este e2emplo es la que puede !erse en lafigura M.=A.

Figura .16. (tructura de un enlace a un ancla de la mimap!gina. )uando pulamo obre el enlace el na$egador notransporta9ata el lugar de la p!gina donde et! el ancla.

En ella $emos usado un dibu2o de un ancla para sealar dondeexiste un ancla, en un documento real en realidad no existe ningnelemento !isual que la identifique, tal como $emos !isto en ele2emplo de 6C.(nlace a ancla de otra p!gina0ambi*n es posible crear un enlace a un ancla de otra pgina. Paraello $a que incluir la pgina, bien sea mediante su direccin ">L omediante su ruta de directorios, posteriormente poner el s#mbolo

;; seguido del nombre del ancla. En este caso es obligatorio ponerel nombre del arc$i!o, aunque sea index.$tml. 'iguiendo con el


39/350

e2emplo anterior para crear un enlace a los t*rminos que empiezanpor _'_ de la pgina donde se situ el ancla puede emplearse elsiguiente cdigo/a $refV;$ttp/RR333.ozu.esRa4z.$tml';QLetra 'RaQ

'uponiendo que el diccionario estaba en un arc$i!o llamado a4z.$tml en el ser!idor de nombre 333.ozu.es.La estructura de los enlaces es ligeramente ms complicada que losanteriores. Para crearlos $a que seguir los siguientes pasos/'e parte de un ancla existente en otra pgina o se crea uno'e crea un enlace a esa pgina'e aade a la direccin del enlace el s#mbolo __ seguido delnombre del ancla

En primer lugar deberemos crear un ancla en la pgina ob2eti!o.5espu*s deberemos escribir el enlace con la sintaxis explicadaanteriormente indicando el nombre de la pgina el nombre delancla. La flec$a de la figura M.=I nos indica el salto que seproducir al pulsar sobre el enlace. Ga no iremos al comienzo de lapgina como pasaba con los enlaces normales sino que iremos allugar concreto que $emos elegido ( donde $a un ancla).Figura .1;. (tructura de un enlace a un ancla de otra p!gina.)uando pulamo obre el enlace $amo 9ata otra p!gina,pero no al comien4o ino al lugar concreto donde et! el ancla.

unque pueden crearse enlaces a anclas que se encuentren enpginas creadas por otros, no es posible modificar las anclasexistentes o aadir anclas nue!as con lo que debemos confiarque el autor $aa puesto una donde interese. Para a!eriguar si es
http://www.ozu.es/http://www.ozu.es/


40/350

as# se puede re!isar el cdigo de dic$a pgina buscando unacadena de la forma a nameV;...;Q. 9a que tener cuidado coneste tipo de enlaces porque el autor de la otra pgina puededecidir quitar el ancla todos los enlaces que $agan referencia a

ella quedarn inutilizados.

. nclas (&&)Z nterior[ &nicio[ 'iguiente \-o de enlace " ancla en la mima etiqueta9asta a$ora $emos !isto el uso de la etiqueta a ...Q..Ra`gt? dedos maneras diferentes/ para crear enlaces $ipertexto o para crearanclas. En el primero de los casos se usaba el atributo _$ref_ paraespecificar la pgina que se quer#as enlazar. En el segundo caso, al

crear el ancla, se usaba el atributo _name_ para darle un nombre conel que poder identificarle. Pero +qu* ocurre si usamos los dosatributos a la !ez-, +Est permitido- La respuesta es '. En esecaso se estar creando ambas cosas a la !ez un enlace o un ancla.Por e2emplo/a $refV;$ttp/RRes.gnome.org; nameV;enlaceUgnomeU$ispano;Q %761E 9ispano RaQ

En este caso al pulsar sobre la palabra _%761E 9ispano_ se salta ala pgina de %761E 9ispano. G por otro lado se puede acceder allugar de la pgina donde est este enlace creando una referencia alancla denominada _enlaceUgnomeU$ispano_. Es decir, la l#neaanterior es equi!alente a poner las dos siguientes/a nameV;enlaceUgnomeU$ispano;Q a $refV;$ttp/RRes.gnome.org;Q %761E 9ispano RaQ

0oda!#a puede plantearse otra pregunta/ +para que puede ser!ir unenlace4ancla- Esta pregunta tiene muc$a lgica porque para lonico que sir!e un ancla es para crear un enlace a ella. En ele2emplo anterior se podr#as escribir en algn otro lugar de la pgina/a $refV;enlaceUgnomeU$ispano;Q pgina de %761E 9ispanoRaQ

Pero +por qu* no poner directamente-/

a $refV;$ttp/RRes.gnome.org;Q pgina de %761E 9ispano
http://www.wikilearning.com/anclas_i-wkccp-9708-7.htmhttp://www.wikilearning.com/curso_completo_de_html-wkc-9708.htmhttp://www.wikilearning.com/formato_de_texto-wkccp-9708-9.htmhttp://www.wikilearning.com/anclas_i-wkccp-9708-7.htmhttp://www.wikilearning.com/curso_completo_de_html-wkc-9708.htmhttp://www.wikilearning.com/formato_de_texto-wkccp-9708-9.htm


41/350

RaQParece ms lgico as# no se forza al !isitante de la pgina a dardos pasos en !ez de uno. 'in embargo puede encontrar casos en

que el enlace4ancla puede ser con!eniente. Por e2emplo, puedeocurrir que se desee poner un enlace a la pgina de %761E9ispano desde una pgina principal. Pero tambi*n se quiere $acercaso al conse2o de ciertos diseadores 3eb experimentados de noponer enlaces externos en ella. +mo solucionarlo- 'eguramenteel lector a lo sabr/ se puede tener una pgina especial con todoslos enlaces externos llamada por e2emplo links'html dondeestu!iese el enlace4ancla anterior. Entonces desde la pginaprincipal se escribir#a/

a $refV;lin:s.$tmlenlaceUgnomeU$ispano;Q %761E 9ispanoRaQon lo que adems $emos conseguido que el usuario !isite otra denuestras pginas, que en definiti!a es uno de los ob2eti!os de todoprogramador Web/ que sus pginas sean !istas.(l atributo ?title?El lengua2e 901L define, adems de los !istos, otro atributointeresante para la etiqueta aQ..RaQ/ _title_. on este atributopuede escribirse un t#tulo o una descripcin bre!e del lin:. Losna!egadores pueden mostrar esta informacin al usuario de !ariasmaneras/En un margen de la pantalla o mediante una ca2a de texto (enocasiones llamadas bocadillos) que aparezca cuando se siten elratn encima de la zona acti!a del lin:. Este es el m*todo usado porExplorer .uando el lin: a $a sido pulsado se est* esperando recibir lapgina puede mostrarse como texto de espera o anticipo a lo que!a a llegar.

Leendo el texto (con un sintetizador de !oz) cuando se seleccionao se pasa por encimaetc.

7o es $abitual encontrar el atributo _title_ en muc$as pginas,quiz porque 7etscape $a decidido ignorarlo sus usuarios no!ern la informacin que introduzcamos en *l de ninguna manera.

Para !er un e2emplo de su uso se utiliz la pgina titulada ;Lac$istera 4 9umor magia; realizada en la primera prctica. En ellase cambia la l#nea de cdigo/

pQa$refV;$ttp/RR333.ciudadfutura.comRareirse;Q


42/350

S >e#rse 0oca, S]a, 2a, 2aTRaQRpQ

Por esta otra con el atributo _title_/

pQa $refV;$ttp/RR333.ciudadfutura.comRareirse;titleV;Go me re# muc$o;QS >e#rse 0oca, S]a,

2a, 2aT RaQRpQ.El resultado puede !erse en la figura M.=N. l pasar el cursor porencima del texto acti!o nos aparece un bocadillo con el texto delatributo _title_.Figura .1>. )on el atributo ?title? podemo incluir in3ormacin

adicional obre el Lin. (xplorer motrar! eta in3ormacin conun bocadillo.

Es aconse2able usar _title_ siempre. 5e esta manera aquellosusuarios (que !isiten la pgina) con na!egadores que entiendaneste atributo (como Explorer) disfrutarn de una informacin extra los que usen otros na!egadores que no lo entiendan (como7etscape) se quedarn como si no $ubi*ramos incluido dic$ainformacin, pero en ningn caso saldrn per2udicados.

Lo atributo ?rel? " ?re$?ntes de terminar con la etiqueta aQ ...RaQ es con!enientecomentar algunos atributos ms que completan su repertorio queno $an sido mencionados $asta a$ora porque no son mu usados.Entre estos destacan _rel_ _re!_ porque en los ltimos estndaresde 901L en los que $an traba2ado con2untamente 1icrosoft,7etscape muc$as otras compa#as organizaciones, se les $a

dado maor importancia de la que tienen actualmente.


43/350

Estos atributos fueron creados para establecer relaciones entre laspginas enlazadas entre s#. 'in embargo no se $a especificadotoda!#a para que pueden ser!ir estas relaciones. _rel_ _re!_ sloexisten con !istas a que en un futuro se les d* algn uso. El nombre

_rel_ pro!iene de la palabra inglesa relation(relacin) mientras que_re!_ pro!iene de E(erse relation (relacin in!ersa)."n e2emplo podr#a consistir en un libro publicado en &nternet dondecada cap#tulo se $a escrito en una pgina (capitulo=.$tml,capituloM.$tml, etc.) Puede ser interesante establecer una relacinentre cada una de las pginas. s# en el cap#tulo J se podr#aemplear lo siguiente/a $refV;capitulo


44/350

di!iden en dos grupos/ las etiquetas de estilo lgico las etiquetasde estilo f#sico.(tiqueta de etilo 3#icoLas etiquetas de estilo f#sico son aquellas que especifican

exactamente cmo debe ser formateado el texto que modifican. Esdecir, una etiqueta de estilo f#sico es aquella que dice/ _este te)todebe estar en negrita_ sin ms, no ofrece al na!egador otra posibleforma de mostrar ese texto. Este tipo de etiquetas contradice elesp#ritu descripti!o que debe tener el 901L, por lo que son mucriticados por los puristas de este lengua2e. Estos puristas sugierenque las etiquetas de estilo f#sico sean sustituidas por las de estilolgico que se !ern en el siguiente apartado. pesar de todo lasetiquetas de estilo f#sico son de uso comn por ello las trataremosen detalle.En la figura


45/350

FQ0E806 E7 7E%>&0RFQPor e2emplo podr#a usarse en la siguiente frase/

5esde esta pgina puede adquirir la ltima !ersin de

nuestro programaFQ _gratis_ RFQ

En la que la palabra _gratis_ ser mostrada en negrita tal comopodemos !er en la figura


46/350

'in embargo en ocasiones puede ser con!eniente que el tamao delas letras est* prefi2ado que todas las letras ocupen lo mismo (tipode letra monoespaciado). En estas ocasiones se usa otro tipo defuente, generalmente .ourier ,e". En la figura


47/350

0odas las etiquetas !istas $asta a$ora tienen sus etiquetas de estilolgico equi!alentes. continuacin se muestran otras para las queno ocurre igual que realmente se muestran a medio camino entreel estilo lgico el estilo f#sico.

-umentar el tamao del te)to/ En ocasiones queremos resaltar unapalabra o frase $aciendo que est* escrita con una letra de tamaomaor al texto adacente. Para ello se usa la etiqueta F&%Q..RF&%Q con cual conseguimos un ligero aumento de tamao en eltexto que es afectado por ella. 'i queremos conseguir un aumentode tamao an maor podemos anidar !arias de estas etiquetascomo obser!amos en el e2emplo/

Esto es texto normal,F&%Qeste es grande

F&%Q este es maor

RF&%Q RF&%Qeducir el tamao del te)to/ En otras ocasiones podemos pretenderlo contrario/ 9acer que una frase sea ms pequea que lasanteriores. Para ello se usa la etiqueta S/-LL que funciona demanera mu similar a la etiqueta F&%, como podemos !er en sue2emplo/

Esto es texto normal,'1LLQeste es pequeo

'1LLQ este es menor

R'1LLQ R'1LLQ

%oner sub0ndices y super0ndices/ existen dos etiquetas quepermiten poner sub#ndices super#ndices en una pgina 901L.Estas etiquetas son '"F '"P respecti!amente. Oeamos une2emplo/

El = '"PQ er R'"PQ

componente qu#mico que estudiamos fue el agua o 9

'"FQ M


48/350

R'"FQK.1 por 2ltimo3 poner te)to subrayado/ el texto encerrado entre lasinstrucciones de inicio fin de la etiqueta " se muestra simple. El

nombre de la etiqueta pro!iene de la palabra inglesa 4nderlinequesignifica precisamente subraado. En general un texto se muestrasubraado para resaltar una informacin importante, por e2emplo/

El plazo l#mite para la entrega de solicitudes es el"Q

=A de ]unio R"QEn la figura


49/350

En contraposicin con los estilos f#sicos estn las etiquetas de estilol5gico. Este tipo de etiquetas est muc$o ms en concordancia conla filosof#a del lengua2e 901L los puristas las recomiendan comosustitutos a las de estilo f#sico. La funcin de estas etiquetas a no

ser decirle al na!egador _pon esto en negrita_ ni similares, sino quesimplemente describirn el texto, por e2emplo _este texto esimportante_, _esto es un cdigo_, etc. "sando esta descripcin elna!egador lo mostrar de la manera ms con!eniente que en granparte de los casos ser igual a si $ubi*semos usado las etiquetasde estilo f#sico correspondientes.

l igual que las anteriores, las etiquetas de estilo lgico estnformadas por una instruccin de inicio otra de fin que encierran untexto. Las principales etiquetas de este tipo son las siguientes /6S+#,78'''6 9S+#,78/ El nombre de esta etiqueta significafuerte o grueso, sir!e para indicar que el texto que modifique esun texto de maor importancia que el que le rodea es necesarioresaltarlo de algn modo. Los na!egadores grficos en generalmuestran el texto afectado por esta etiqueta en negrita, por lo quepuede usarse en sustitucin de la etiqueta F. El siguiente es une2emplo t#pico de su uso/

'0>67%Q 7o puedes R'0>67%Q

perderte la ltima !ersin de nuestroeditor 901L.

6E/8'''6 9E/8/ Esta etiqueta pro!iene de la palabra inglesaE/phasize, que significa enfatizar. El texto sobre el que acta estaetiqueta suele estar mostrado en cursi!a, tal como puede !erse enla figura


50/350

include ;stdioM.$; R65EQ6S-/%8'''6 9S-/%8/ el nombre de esta etiqueta pro!iene del

ingl*s S-/%le(muestra) suele utilizarse para formatear e2emplos,muestras, cdigos de scripts, etc. El texto formateado con estaetiqueta suele ser mostrado de la misma manera que el formateadocon 65EQ.6(-8'''6 9(-8/ delimita texto escrito por el usuario, !ariables,argumentos de comandos... 0anto el Explorer como el 7a!igatormostrarn este texto como cursi!a. "n e2emplo de su uso podr#aser/

La direccin de esa pgina es

O>Q 333.to3ercom.es RO>Q6.*+E8'''6 9.*+E8/ Esta etiqueta suele ser usada para introduciruna cita o una referencia (significado de la palabra inglesa cite). ligual que la etiqueta anterior pro!oca que el texto que encierra seamostrado en cursi!a/

&0EQ Pienso, luego existo R&0EQ di2o 5escartes6$:,8'''6 9$:,8/ En este caso el ob2eto de la etiqueta es introduciruna 5eHi7icin, pero el texto ser mostrado igualmente en cursi!a/

Pensar/ 5H7Q 5iscurrir, considerar, imaginar R5H7Q.6;B$8'''6 9;B$8/ 0iene la funcin de formatear texto de entrada(input) del teclado (eFoar5 en ingl*s) con un tipo de letramonoespaciado. unque esta etiqueta pertenece al 901L no essoportada por Explorer. recomendablePueden !erse todos los e2emplos anteriores, tal como los muestraExplorer, en la figura


51/350

0odos estas etiquetas son entendidas por los na!egadores en modotexto usan los medios de que disponen para resaltar las frasesque encierran. En la figura


52/350

Ga se $an !isto los estilos lgicos los f#sicos, as# como lasdiferencias entre ellas. omo se $a dic$o es recomendable usar losprimeros siempre que sea posible.=K. La etiqueta H670

Z nterior[ &nicio[ 'iguiente \Las etiquetas de los apartados anteriores permiten modificar ciertosaspectos de la apariencia del texto de una pgina, pero +essuficiente-. uando el WWW se $izo ms ms popular laapariencia de las pginas comenz a adquirir la importancia actualse $izo e!idente que no.Para poder controlar en maor medida an la apariencia del textose cre la etiqueta H670. continuacin se explicarn sus !irtudes,aunque cabe destacar que actualmente existe una alternati!a me2or/las $o2as de estilo en cascada o '' que ser tratada en losltimos cap#tulos del curso.)ambiando el tamaDo del textoLa etiqueta H670 permite tener un gran control sobre el tamao deun texto. Este tamao se especifica con su atributo '&E afectaral texto que encierren la instruccin de inicio (H670 '&EV; ;Q) de fin (RH670Q).La forma de especificar el tamao del texto consistir en darle el!alor deseado al atributo '&E, si bien $a dos formas de $acerlo/La primera de ellas es indicar un tamao absoluto de = a N.

orrespondiendo N al tamao maor = al menor. El tamao pordefecto del texto es el equi!alente al nmero


53/350

La segunda consistir en indicar un tamao relativo respecto al que

$aa por defecto. Por e2emplo, para poner un tamao I suponiendo un tamao por defecto < se usar#a/0exto de tamao V;green;Q !erde RH670Q, H670 6L6>V;blue;Q azul RH670Q H670 6L6>V;red;Q ro2o

RH670Q,etc. 7inguno se nos resiste.

cuo resultado podemos !er en la figura


57/350

==. 0exto preformateado

Z nterior[ &nicio[ 'iguiente \En ocasiones es interesante mantener los espacios o saltos del#nea de un prrafo tal como estn en el cdigo 901L. Paraconseguir esto $a que alterar el comportamiento $abitual delna!egador que, como se $a !isto, ignora este formato. "n e2emplomu simple que muestra esto es la firma de pginas con dibu2os detexto como el de la figura


58/350

para que pudiese !erse tambi*n con na!egadores que traba2an enmodo texto como Lnx. lgo importante en este caso a queinteresa que 0656 el mundo !ea la firma, adems de que el tenerlacomo texto $ace ms fcil su modificacin.

'in embargo todos los espacios mltiples se con!ertirn en unnico espacio, por tanto si se escribiese el dibu2o 2unto con elcdigo 901L el na!egador lo mostrar#a como !emos en la figura


59/350

.ooo6 ( ) ( ) ) R ( (UR U)

RP>E`gt?En este caso la !isualizacin ser la esperada, es decir la de lafigura E usarla abundantemente, sin embargo, esto puedecausar problemas de !isualizacin de esas pginas con algunostamaos de !entana, resoluciones de pantalla o tipos de monitordistintos del nuestro. >ecordemos que esta era la razn por la

que los na!egadores ignoraban el formato manual debido a elloel uso de P>E debe estar limitado a los casos en los que searealmente necesario.

-o de otra etiqueta dentro de 8J(:...8@J(: efectos de 901L estndar, el contenido de la etiqueta P>E es elmismo que el de un prrafo creado con P. Las nicas excepcionesson aquellos elementos que producen cambios en el tamao de laletra como por e2emplo &1%, F&%, '1LL, '"F, '"P H670. Estoexclue tambi*n a todas aquellas etiquetas que pro!ocan un cambiode l#nea (son las llamadas etiquetas de ni!el de bloque, block


60/350

901L ofrece mecanismos para insertar estos otros caracteresespeciales en aquellos sistemas donde no estn soportados.

"na regla mnemot*cnica para recordar qu* caracteres sonconsiderados especiales por 901L es la siguiente / ! Si se puede

escribir un carcter pulsando sobre una sola tecla del teclado ousando como ayuda las teclas /-1=S.4L-S o -L+


61/350

(ntidade de caractere para caractere epaDole'in duda, en Espaa los caracteres considerados cmo especialesen el resto del mundo que ms se usan son los acentos, la letra ee los s#mbolos de apertura de interrogacin (+) admiracin (S). Enla tabla


62/350

Figura /.. (ntidade de caracter num+rica " nominale paracaractere reer$ado del lenguaje HTML.

Por e2emplo en !ez de escribir/Para poner texto en negrita se usa la etiqueta FQ5eber#a escribirse/Para poner texto en negrita se usa la etiqueta FQEste segundo e2emplo se !isualizar correctamente en elna!egador, el lector est in!itado a probar los dos e2emplos.Ktra entidade de caractere

dems de las !istas $asta a$ora existen otras entidades decaracteres que son de especial utilidad en la creacin de pginasWeb. Estos son los de la tabla


63/350

asociado. partir de este nmero podremos construir laentidades de caracter num*rica.(l porqu+ de lo caractere epeciale. (xplicacin t+cnica

En los comienzos de la informtica se cre un cdigo llamado

-S.**(merican 'tandard ode for &nformation &nterc$ange) pararepresentar los caracteres. Este cdigo asignaba a cada carcterun nmero (de N bits) que al fin al cabo es lo nico con lo queun ordenador sabe traba2ar. 5ebido al tamao de ese nmero (Nbits) ese cdigo constaba nicamente de =M caracteres queinclu#a las letras, nmeros algunos caracteres $abituales. Estoscaracteres son entendidos en cualquier ordenador por tantopueden ser usados con libertad en un documento 901L. on lae!olucin expansin de los ordenadores pronto surgi la

necesidad de aadir nue!os caracteres, como por e2emploaquellos espec#ficos de cada idioma. Por esta razn se crearonextensiones del cdigo '&& que aad#an un bit al nmeroasociado a cada carcter con lo que el nmero de caracteresrepresentable aumentaba a MAI. El problema es que no $ubo unacuerdo en este '&& extendido se crearon !arias !ersiones enlos que $ab#a ligeras diferencias. Los documentos 901L puedentener todo tipo de caracteres pertenecientes al &'4Latin4= (&'64A@4=) que es una de estas extensiones. n as# los caracteresque no pertenezcan al cdigo '&& de N bits deben introducirsecon la secuencia de escape correspondiente para e!itarproblemas con ordenadores que no soporten el &'64Latin4= sinootra extensin del '&&. El prximo estndar del lengua2e 901L(901L J.K) $a lle!ado ms le2os la extensin del cdigo '&&soportando el con2unto de caracteres 4,*.#$E. Este con2untoinclue los caracteres del '&& (a los que asigna el mismonmero por tanto es compatible), pero aade todos loscaracteres de todos los idiomas del mundo (incluidos los c$inos

2aponeses). Esto es importante porque "7&65E se est

imponiendo como uno de los estndares del presente del futuro.

=


64/350

Figura 5.1. (n eta 3igura podemo apreciar la preentacin dela egunda pr!ctica del curo que reali4aremo al 3inal delcap#tulo.

"na lista, o listado, es una enumeracin de dos o ms elementos

suelen disponerse de tal forma que se facilite la distincin entreellos.El lengua2e 901L define los siguientes tipos de listas/7umerada u ordenada.7o ordenada.Listas de glosario o de definicin.1ens."sadas con prrafos cortos.Listas de directorio.

Pronto sabremos como crear cada una de ellas cuando escon!eniente usar una u otras, comprobaremos, una !ez ms, lagran sencillez del lengua2e 901L una !ez nos $emos $abituado a*l.(tiqueta necearia para crear litaLa forma de crear listas difiere ligeramente de los elementos 901L!istos $asta a$ora, a que consta de dos pasos. Primero $a quedefinir el tipo de lista despu*s deben insertarse cada uno de loselementos de lista.

l crear una lista deberemos indicar su inicio su fin. Para empezarla lista usaremos la instruccin de inicio de la etiqueta de esa lista.


65/350

Existe una etiqueta para cada tipo distinto de lista, por e2emplo, paracrear una lista no ordenada ser necesario usar la etiqueta 4L(suinstruccin de inicio ser "LQ). "na !ez $emos abierto la listadeberemos insertar, como $emos dic$o antes, cada uno de los

elementos de lista. Para ello usaremos una nue!a etiqueta (o dosen algn caso) que depender del tipo de lista. En el caso de la listano ordenada los elementos se introducen con la etiqueta de unanica instruccin L*, por e2emplo/Go practico/ "LQ L&QHtbol L&QFaloncesto L&Q0enis L&Qetc. R"LQEn la figura J.M podemos !er como muestra &nternet Explorer estecdigoFigura 5.. )omo aperiti$o motramo una lita no numeradaen la que "a e pueden apreciar la caracter#tica3undamentale que tienen en HTML.

El ltimo paso, que a $emos anticipado en este e2emplo, sercerrar la lista, para lo cual usaremos la instruccin de fin de "L/R"LQ.G a todo esto, +dnde est la diferencia-. Pues bien, la diferenciaes la etiqueta L& (En otras listas se usar tambi*n L& o algunaetiqueta similar, como luego !eremos). La etiqueta "L no tieneningn significado por s# sola, necesita a L&. G por otro lado L& nopuede ser usada como una etiqueta independiente sino que debe ir

dentro de "L. Por esta razn en ocasiones se suele llamar a L&subetiqueta.


66/350

lgunos na!egadores permiten el uso de L&Q fuera de ningunalista como si se tratara de una etiqueta independiente. Estosna!egadores mostrarn el elemento de lista como si fueseperteneciese a una lista no numerada pero sin sangrado. 'in

embargo esta forma de usar L&Q no est admitida por elestndar por tanto no es recomendable si queremos que todoslos na!egadores entiendan nuestras intenciones.

ntes de comenzar $aremos un comentario ms. La etiqueta L&Qtiene instruccin de fin (RL&Q) que delimita el final del elemento delista actual, pero es opcional usarla o no. 'i no se $ace seconsidera que el elemento termina cuando empieza el siguiente ocuando termina la lista. 5e $ec$o algunos na!egadores alinterpretar el cdigo 901L ignoran completamente esta instruccin

slo entienden que el elemento de lista $a terminado cuando seempieza otro o se acaba la lista.Oista la teor#a nos adentramos en los distintos tipos de listas en lasque !eremos !arios e2emplos prcticos.Lita no ordenadaProbablemente el tipo de listas ms usados en las pginas 3eb sonlas listas no ordenadas. omo $emos adelantado antes a modo dee2emplo, este tipo de lista queda delimitada por la etiqueta"LQ...R"LQ ("L pro!iene de 4nordered List, que significa lista noordenada). 5entro de estas etiquetas insertaremos cada elementocon la etiqueta 6L*8. Oeamos un e2emplo ligeramente ms completoque el anterior/1i ordenador tiene las siguientes caracter#sticas/ "LQ L&QProcesador Pentium =II L&Q54>61 x L&Q0ar2eta de sonido =I bits L&Q0ar2eta de !#deo con M 1b R"LQ

En la figura J.< podemos !er como muestra esta lista el na!egadorExplorer. Oemos que est ligeramente sangrada $acia la derec$a con un s#mbolo grfico para distinguir cada elemento de lista, estes#mbolo recibe el nombre de !ieta.Figura 5./. Lo elemento de la lita no numerada $anprecedido de una $iDeta. (n (xplorer eta $iDeta e9abitualmente un punto grande.


67/350

En la figura J.J !emos como a falta de !ietas grficas Lnxdiferencia cada elemento con un asterisco ().Figura 5.5. Lita no ordenada en L"nx. )ada uno de loelemento de lita comien4a con un aterico imulando a lo#mbolo gr!3ico que uan =etcape o (xplorer.

Lita ordenadaEste tipo de listas numera los elementos de lista en el orden en elque se $an introducido en el cdigo 901L. La numeracin serealiza con nmeros empezando por el =.

Las ltimas extensiones de 901L permiten elegir entre distintostipos de numeracin para las listas ordenadas. Estas extensionessern cubiertas en un cap#tulo posterior.

Este tipo de listas queda delimitado por la etiqueta 6#L8'''69#L8(6L/ 6rdered List, Lista ordenada), cada elemento se inserta, aligual que en el caso de listas no ordenadas, con la etiqueta L&Q.En la figura J.A !emos un e2emplo de uso de listas ordenadasFigura 5.6. (n la lita ordenada cada uno de lo elementode lita aparecen numerado " angrado 9acia la derec9a.


68/350

que se corresponde con el siguiente cdigo/"n buen equipo adaptado a las nue!as tecnolog#as consta de/ 6LQ L&QP" rpida L&Q&mpresora a color de buena definicin. L&Qlta!oces cmara de !#deo. L&Q1dem de !elocidad M o superior. R6LQ

El na!egador automticamente numera los elementos de lista. 'i enalgn momento queremos insertar un nue!o elemento entre losexistentes usando, de nue!o, L&Q, se realiza automticamente unarenumeracin de los elementos de la lista. 0al como podemos !eren la figura J.I.Figura 5.;. )uando inertamo un nue$o elemento de lita enuna lita ordenada lo elemento iguiente onautom!ticamente renumerado.


69/350

que se corresponde con este cdigo/"n buen equipo adaptado a las nue!as tecnolog#as consta de/ 6LQ L&QP" rpida L&Q&mpresora a color de buena definicin. L&Qlta!oces cmara de !#deo. L&QEscaner color L&Q1dem de !elocidad M o superior. R6LQ

En el na!egador Lnx las listas numeradas se muestran como!emos en la figura J.N.Figura 5.>. (n el cao de la lita numerada la di3erenciaentre la $iuali4acin con L"nx " con (xplorer e menor.

=J. Listas en 901L (&&)Z nterior[ &nicio[ 'iguiente \Lita de gloarioEste tipo de listas es usado, como su nombre indica, para crearglosarios, es decir listas de definiciones o de descripciones. El

principio final de este tipo de listas se delimitan con la etiqueta6$L8'''69$L 8(5L/ 5efinition List, Lista de definicin). La insercin
http://www.wikilearning.com/listas_en_html_i-wkccp-9708-13.htmhttp://www.wikilearning.com/curso_completo_de_html-wkc-9708.htmhttp://www.wikilearning.com/comentarios_en_html-wkccp-9708-15.htmhttp://www.wikilearning.com/listas_en_html_i-wkccp-9708-13.htmhttp://www.wikilearning.com/curso_completo_de_html-wkc-9708.htmhttp://www.wikilearning.com/comentarios_en_html-wkccp-9708-15.htm


70/350

de elemento es ligeramente distinta a la del resto de listas a queno se usa la etiqueta L&QQ. Esto es as# porque en este caso cadauno de los elementos de lista est compuesta de dos partes/La palabra que queremos definir/ para insertar la palabra usaremos

la etiqueta 50Q que pro!iene de 5efinition 0erm (0*rmino dedefinicin). Esta nue!a etiqueta funciona de forma mu similar aL&Q la instruccin de fin (R50Q) es igualmente optati!a.La definici5n o descripci5n de esa palabra/ una !ez indicada lapalabra es $ora de poner su definicin. Para ello usamos otra nue!aetiqueta/ 55Q cuas siglas significan 5efinition 5escriptin (partede la definicin que contiene la descripcin). La definicin suele serun prrafo ser mostrado por los na!egadores sangrado conrespecto al texto anterior.En la figura J. podemos !er un e2emplo de listas de glosario !istascon &nternet Explorer.Figura 5.B. La lita de gloario contan de do parte lapalabra de de3inicin " la propia de de3inicin que e motradacomo un nue$o p!rra3o con angrado.

En la figura J.@ se muestra la misma !ista con el na!egador Lnx.Figura 5.C. Lita de gloario en L"nx. 'e nue$o la di3erenciarepecto a la $iuali4acin con (xplorer on ecaa.


71/350

En ambos e2emplos el cdigo usado es el siguiente/

5LQ 50Q9ipertexto 55Q'e llama documento $ipertexto a aquel que tiene zonas acti!as donde el usuario puede pulsar con el ratn para acceder a otro documento. Estas zonas pueden ser imgenes o texto. 50Qnc$o de banda de una red 55QEs, en pocas palabras, la capacidad

de transmisin que soporta est mu relacionada con la !elocidad de transmisin que se puede alcanzar. 50Q901L 55Q9iper0ext 1ar:up Language, Lengua2e de marcas $ipertexto. Lengua2e para disear pginas del World Wide Web. R5LQ

'irectorio " men7Las listas !istas $asta a$ora son, sin duda, las ms usadas, peroexisten otros dos tipos que estn algo ms ol!idadas por loscreadores de 3ebs/ las listas de directorio las listas de men.Las listas de men son usadas cuando los elementos de lista sonfrases de una sola l#nea mientras que las listas de directorio fueroncreadas para ser usadas cuando son t*rminos cortos que puedenser mostrados en mltiples columnas.

pesar de las recomendaciones del estndar 901L los

principales na!egadores muestran las listas de directorios mens de igual manera (o mu similar) a las listas no ordenadas.


72/350

Por esta razn es aconse2able usar nicamente los tres primerostipos de lista !istos.

continuacin mostramos un e2emplo de listas de men listas dedirectorio. En la figura J.=K podemos !er dos e2emplo ambos tipos

en Explorer en la figura J.== el mismo e2emplo tal como se !er#aen Lnx.Figura 5.1E. (n (xplorer la lita de men7 8M(=-: " dedirectorio 8'IJ: on motrada de igual manera que la litano numerada 8-L:.

Figura 5.11. (n L"nx la lita de men7 " de directorio onmotrada implemente inertando cada elemento de lita enuna nue$a l#nea.

El cdigo usado es/1E7"Q L&Qancin =/ 0ranquilo ma2ete L&Qancin M/ Llu!ia en soledad L&Qancin


73/350

R1E7"Q 5&>Q L&Q]uegos L&Q%rficos

L&Q&nternet L&QProgramacin R5&>QAnidamiento de litaOistos todos los tipos de listas se nos puede plantear una pregunta/+'e puede incluir una lista dentro de otra-. La respuesta es '&. Ellengua2e 901L permite insertar unas listas dentro de otras a seandel mismo o de distinto tipo. esta posibilidad se le llama

anidamiento de listas la forma de realizarlo es incluir todo elcdigo de una lista dentro de uno de los elementos de la otra. En elsiguiente e2emplo combinaremos algunos de los e2emplos anteriorespara dar lugar a un listado con !arios listas anidadas unas dentro deotras/Los temas del nmero de este mes de nuestra re!ista son/ 1E7"Q L&Q"n nue!o &nternet/ &P!I L&QEl WWW cobra !ida/ $a llegado el 901L dinmico L&QDu* ordenador comprarse/ 6LQ L&QP" rpida. on las siguientes caracter#sticas/ "LQ L&QProcesador Pentium =II L&Q54>61 x L&Q0ar2eta de sonido =I bits L&Q0ar2eta de !#deo con M 1b

R"LQ L&Q&mpresora a color de buena definicin. L&Qlta!oces cmara de !#deo. L&QEscaner color. L&Q1dem de !elocidad M o superior. R6LQ R1E7"Q


74/350

En las figuras J.=M J.=< podemos !er como se muestra estee2emplo en los na!egadores Explorer 7etscape 7a!igator. unque$a ligeras diferencias, en ambos se puede obser!ar cmo cadanue!o ni!el de anidamiento se produce un sangrado en la lista.

dems se obser!a que en la segunda lista no numerada la !ietaque precede cada elemento $a cambiado, lo que auda adiferenciar entre ambas listas.Figura 5.1. 2racia al anidamiento podemo crear lita mu"compleja en HTML. (l egundo ni$el de lita no numerada uauna $iDeta ditinta.

Figura 5.1/. )omparando eta 3igura con la 5.B podemo $er laligera di3erencia que exiten en lo ditinto tipo de litaentre =etcape " (xplorer .


75/350

=A. omentarios en 901LZ nterior[ &nicio[ 'iguiente \'e llama comentario en el mbito de 901L las notas que el autor o

autores ponen en el cdigo para facilitar su entendimiento. Estoscomentarios no son mostrados por el na!egador por tanto slosern !isibles al leer el cdigo 901L de la pgina 3eb.En general es recomendable ir insertando comentarios al crear unapgina para marcar determinadas partes as# encontrarlas msfcilmente. lgunos usos que suelen darse a los comentarios son/,otas para recordar detalles del c5digo la prxima !ez que!aamos a cambiarlo, como por e2emplo para indicar por qu*$emos usado una etiqueta no otra, por qu* $emos usado una lista

numerada no una no numerada, etc. Este tipo de comentarios sonmu usados cuando las pginas son comple2as.-puntar que queda por haceren una determinada seccin o comoes con!eniente cambiarla. 6 bien para indicar el comienzo o fin deuna determinada seccin de la pgina.Para identificar fcilmente partes importantes del cdigo o aquellasque cambian ms a menudo.4sos particulares de cada "ebmaster. 5e $ec$o los comentariospueden usarse para cualquier cosa cada programador de pginas

3eb tiene su propio modo de usarlos.)reacin de comentario en HTML
http://www.wikilearning.com/listas_en_html_ii-wkccp-9708-14.htmhttp://www.wikilearning.com/curso_completo_de_html-wkc-9708.htmhttp://www.wikilearning.com/practica_2_un_sitio_web_completo-wkccp-9708-16.htmhttp://www.wikilearning.com/listas_en_html_ii-wkccp-9708-14.htmhttp://www.wikilearning.com/curso_completo_de_html-wkc-9708.htmhttp://www.wikilearning.com/practica_2_un_sitio_web_completo-wkccp-9708-16.htm


76/350

Para crear un comentario no se usa una etiqueta, aunque es unaestructura parecida. En primer lugar ponemos una cadena queindica el comienzo del comentario/ T44, esto es, el s#mbolo menorque, seguido del s#mbolo fin de exclamacin de dos guiones, todo

ello sin espacios entre ellos. 0odo el texto que le siga ser parte decomentario, que terminar cuando insertemos la cadena de fin/ 44Q ,dos guiones el s#mbolo mayor que. La estructura de uncomentario es por tanto/T44Esto es un comentario44Q'uele ser recomendable de2ar un espacio entre ambas cadenas eltexto anterior posterior, tal como acabamos de mostrar.Oeamos algunos e2emplos prcticos de comentarios/

T44qu# comienza el cuerpo de la pgina44Q T44ambiar este prrafo para que se entienda me2or44Q T445eber#a aadir ms enlaces en esta pgina44QEn la figura J.=J podemos !er un e2emplo de un comentario 2untocon otro cdigo 901L el resultado de !isualizar ese cdigo con elna!egador. omo obser!amos el na!egador ignora los contenidosdel interior de los comentarios.Figura 5.15. Al motrar la p!gina lo na$egadore act7an comoi lo comentario no exitieran. )omo $emo (xplorer permitecomentario multil#nea " con etiqueta dentro.

Para terminar slo queda $acer una aclaracin. 0al como $emosdic$o todo el texto entre los s#mbolos ;T44 ; ;44Q; es un comentario

sea lo que sea tenga el nmero de l#neas que tenga. 'in embargoel estndar de 901L recomienda que los comentarios se limiten a


77/350

una sola l#nea, si debe ocupar !arias necesariamente se aconse2aincluir los s#mbolos de comentario en cada una de ellas.=I. Practica M/ "n sitio 3eb completoZ nterior[ &nicio[ 'iguiente \

Ga podemos dar por concluida la primera fase del aprendiza2e del901L. En poco tiempo $emos aprendido/omo es la estructura general de una pgina/ para crear estaestructura usbamos las etiquetas 901L, 9E5 F65G.omo dar t#tulo a la pgina con la etiqueta 0&0LE.omo crear encabezados con las etiquetas 9=, 9M, 9


78/350

Los documentos 901L son los llamados inde)'html mes'html.Las imgenes necesarias para la realizacin de las pginas seencuentran en el subdirectorio img.

lani3icacin

El primer paso en la creacin de una pgina es la planificacin. 'iestamos creando el 3eb de nuestra propia empresa deberemoslle!arla a cabo por nosotros mismos (en nuestro caso ficticiotambi*n tendremos que realizarla nosotros), pero si creramos el3eb para otra empresa deber#amos encargarle ciertos deberes /presentacin de la empresa, presentacin de su catlogo,promociones especiales, etc. 0al !ez a tenga un proectopublicitario en marc$a quiere que el 3eb este en l#nea con este.En nuestro caso, por no aburrir al lector, no entraremos demasiado

en este tipo de aspectos del diseo de pginas, pero queremosresaltar la importancia que tiene a la $ora de conseguir *xito con laspginas que $emos creado.eccione de la p!gina"na !ez conocidos todos los requisitos que debe cumplir el 3eb es$ora de $acer el primer borrador. En *l debemos incluir las distintassecciones que debe tener el sitio 3eb.5e a$ora en adelante nos referiremos al con2unto de documentos901L que estamos creando como sitio 3eb, "ebsiteen ingl*s, llamaremos pgina o pgina 3eb a cada uno de esos documentos.

la $ora de realizar este primer borrador $a que tener enconsideracin !arios aspectos. La informacin de la pgina debetener una estructura 2errquica, con una pgina principal conenlaces a las distintas secciones. En esta prctica $emos decididodi!idir la informacin en cuatro secciones $emos creado unapantalla de presentacin que nos permita acceder a ellas/%antalla de presentaci5n/ Es lo primero que se !er al !isitar lapgina. En ella debe !erse el nombre de la agencia as# como unmen con las opciones que presenta la pgina. Podr#amos pensar

en poner el titular con un encabezado de tipo 9=, pero para crear unmaor impacto est*tico crearemos un titular grfico e incluiremos ellogotipo (ficticio) de la agencia a su izquierda. 5espu*s incluiremosun men con enlaces a las diferentes secciones por ltimo algunafoto de lugares donde se pueda !ia2ar con la agencia _Los lpes_. Enla figura J.= al comienzo de este cap#tulo podemos !er esta pantallade presentacin.,uestras principales #:E+-S del mes/ En esta seccininformaremos de los !ia2es que la agencia de !ia2es _Los lpes_

oferta a precios especiales en el mes actual. Esta seccin tiene unalongitud considerable, por

Documents

curso compleo de HTML.doc