HTML

Captulo I: Qu es HTML?
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de informaci n relacionadas, y con inserciones multimedia (gr!ficos, sonido""")" #ste lenguaje es el que se utili$a para presentar informaci n en el %orld %ide %eb" La descripci n se basa en especificar en el texto la estructura l gica del contenido (t&tulos, p!rrafos de texto normal, enumeraciones, definiciones, citas, etc"), as& como los diferentes efectos que se quieren dar (cursi'a, negrita, o un gr!fico determinado) y dejar que luego la presentaci n final de dicho hipertexto se realice por un programa especiali$ado (como Mosaic o (etscape)" )iglas b!sicas"* WWW: %orld %ide %eb (%eb)" SGML: )tandard +enerali$ed Markup Language, es un lenguaje est!ndar para describir lenguajes de marcas" DTD: -ocument Type -efinition, es un lenguaje markup espec&fico, escrito utili$ando )+ML" HTML: HyperText Markup Language, HTML es un )+ML -T-" #n t.rminos pr!cticos, es una colecci n de estilos (indicados por tags, marcas de markup) que definen los componentes 'ariados de un documento %orld %ide %eb" /reaci n de documentos HTML"* 0ara comen$ar s lo es necesario , a) Un procesador de te to: los documentos HTML est!n en formato de texto sencillo (tambi.n conocido como 1)/22)" #l procesador de texto se utili$a para escribir el documento en lenguaje HTML, que ser! posteriormente interpretado por el programa na'egador correspondiente, siempre que el documento est. guardado en formato, 3s lo texto3" #l texto escrito tiene dos partes bien diferenciadas, el contenido de la informaci n y el conjunto de etiquetas del lenguaje HTML, que permiten determinar el estilo y el tipo de letra que tendr! la presentaci n del documento final y que pueda ser le&do por un programa cliente" 0ara escribir un p!rrafo sin estilo espec&fico (por defecto) no es necesario poner etiqueta alguna" Lo 4nico que hay que tener en cuenta es que al presentar el documento se hace caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente" 0or esta ra$ n se utili$an una serie de etiquetas que sustituyen a estos elementos" #l texto escrito no sufrir! ninguna modificaci n, exceptuando los acentos, la letra 353 y un conjunto de caracteres especiales a los que, m!s adelante, se dedica un apartado"

Captulo II: Mtodo de tra!a"o

#n esta lecci n hablaremos sobre la segunda cosa imprescindible para crear documentos html" !)Un na#e$ador del WWW o lo %ue se deno&'na pro$ra&a cl'ente %ue per&'te el acceso a p($'nas WWW de Internet" #l programa cliente permite 'er una p!gina antes de introducirla en un ser'idor" -e este modo, se pueden comprobar las modificaciones de las distintas p!ginas que se dise5an" /on el procesador de textos se crea un fichero con un nombre al que necesariamente hay que a5adirle la extensi n html" 0or ejemplo, prueba"html" )i se a5ade algo nue'o se deben guardar los cambios antes de 'isuali$ar el nue'o documento en el na'egador" #l documento se abre con el comando 6pen 7ile del men4 7ile del programa cliente" Los cambios son reflejados en la pantalla" )i se trabaja con el programa cliente y el procesador de textos al mismo tiempo, acti'ando simplemente la opci n 8eload se pueden comprobar los cambios efectuados"

#xisten ciertos programas que nos ayudan a automati$ar este proceso (editores de lenguaje HTML), pero es muy con'eniente comen$ar a hacerlo de manera manual para comprender bien la estructura del lenguaje HTML" Las etiquetas del lenguaje HTML"* #l lenguaje HTML usa etiquetas o directi'as (tags) para indicarle al programa cliente de %eb como mostrar el texto" Las etiquetas est!n formadas por determinados caracteres metidos entre los signos )*+ y con la barra ),* cuando se trata de la segunda etiqueta de un efecto (la de cierre)" 0or ejemplo, )t'tle* para abrir y ),t'tle* para cerrar"

Captulo III: -structura de un docu&ento .t&l

9n documento HTML comien$a con la etiqueta ).t&l* , y termina con ),.t&l*/ -entro del documento hay dos $onas bien diferenciadas, el encabe$amiento, delimitado por )H-0D* 1),H-0D*+ que sir'e para definir di'ersos 'alores '!lidos en todo el documento"

Y el cuerpo, delimitado por <BODY> y </BODY>, donde reside la informacin del documento.
)HTML* #ncabe$ad )H-0D* o )TITL-*T&tulo del documento),TITL-* ),H-0D* )23D4* /uerpo Texto del documento ),23D4* ),HTML* #l elemento )TITL-* permite especificar el t&tulo de un documento HTML" #ste t&tulo no forma parte del documento en s&, no aparece, por ejemplo, al principio del documento sino que sir'e como t&tulo de la 'entana del programa que la muestra" #xisten muchos otros elementos que se engloban dentro del encabe$amiento pero para la estructura b!sica del lenguaje html en su ni'el b!sico no son necesarios" #l cuerpo de un documento HTML contiene el texto que, con la presentaci n y los efectos que se decidan, se presentar! ante el usuario" -entro del cuerpo son aplicables todos los efectos que se 'an a mencionar en el resto de esta gu&a" -ichos efectos se especifican exclusi'amente a tra'.s de 3directi'as3"

Captulo I5: -st'los 1 e6ectos !(s'cos

Todas las etiquetas que siguen a continuaci n se introducen a partir del tag )23D4*, es decir, dentro del cuerpo del documento" T&tulos"*

Mediante los t&tulos, en sus diferentes ni'eles de importancia, se puede definir el esqueleto del documento, su estructura b!sica" HTML tiene seis ni'eles de cabeceras numeradas del uno al seis"

)H7*Mucha importancia),H7* Mucha importancia )H8*Menos importancia),H8* Menos importancia )H9*Mucha menos importancia),H9* Mucha menos importancia

Captulo 5: De6'n'c':n de !lo%ues

Hay que tener en cuenta, como ya se ha dicho antes, que al presentar el documento se hace caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente" 0or esta ra$ n se utili$an una serie de etiquetas que sustituyen a estos elementos,

);* y )2<*

/uando se quiera for$ar un final de l&nea es necesario utili$ar dos directi'as especiales, );* para marcar un fin de p!rrafo )2<* para un 4nico retorno de carro La diferencia entre ambas es que la separaci n de l&neas que pro'oca :0; es algo mayor que la de :<8;, para que los p!rrafos se distingan bien entre s&" Las dos directi'as mencionadas se sit4an en el punto en que se quiere poner la separaci n" (inguna de las dos directi'as se cierra, s lo constan de una marca inicial" 0or ejemplo,

)HTML* )H-0D*

)TITL-*#l ejemplo HTML mas sencillo:=T2TL#; ),H-0D* )23D4*

)H7*#sta es una cabecera de ni'el uno),H7* <ien'enido al mundo HTML" #ste es el primer p!rrafo":0;> este es el segundo/)2<* 7in de la pagina

),HTML* )e trata del m&nimo documento de HTML/ );<-* #l texto preformateado (etiqueta )pre*) se aplica cuando se quiere que en la presentaci n final del documento se respeten los espacios y retornos de carro que hayamos puesto en el texto fuente" 1dem!s, se utili$ar! un tipo de letra de espaciado fijo, parecido al de una m!quina de escribir, m!s peque5o que el del texto normal" #ste estilo de texto puede ser adecuado, por ejemplo, para una tabla num.rica sencilla"

),23D4*

)2L3C=QU3T-*

2ndica que un texto es una cita de otra fuente" )e suele representar con tabulaciones a i$quierda y derecha y en cursi'a"

)H<*

La directi'a )H<* sit4a en el documento una l&nea hori$ontal de separaci n" #ste elemento utili$a una serie de tama5os que se indican mediante la opci n )H< SI>-?7*+ )H< SI>-?8*+ )H< SI>-?9* etc" #xisten seis tama5os de H8"

Captulo 5I: Marcado t'po$r(6'co de 6rases

?eamos c mo se marcan topogr!ficamente las frases,

1. 2.

@e$r'ta 1 curs'#a

)e pueden dar tambi.n los atributos m!s tradicionales, negrita y cursi'a, )2*#sto en negrita),2* y )I*esto en cursi'a),I*, #sto en negrita y esto en cursi'a )TT*

)e puede utili$ar un tipo de letra similar al de una m!quina de escribir, )TT*M!quina de escribir),TT*

M!quina de escribir )C-@T-<*

0ara centrar texto (o, en general, cualquier cosa, un gr!fico, por ejemplo) se usa la directi'a )C-@T-<*: )C-@T-<*9ni'ersidad de (a'arra),C-@T-<*

/aracteres especiales"* #n el desarrollo del m.todo de trabajo se hace referencia a las existencia de una serie de caracteres especiales del lenguaje HTML" #sos caracteres se refieren a las 'ocales acentuadas y a la letra 353" #xisten tambi.n ciertas limitaciones relati'as al uso de algunos s&mbolos que significan algo en HTML, como el de menor que (:) o el signo ingl.s de and (llamado ampersand, @)" )e tratar! primero el caso m!s sencillo" #xiste una ra$ n e'idente que impide que se pueda escribir ciertos s&mbolos directamente en un texto HTML, como por ejemplo el :, dichos s&mbolos tienen un significado en HTML, y es necesario diferenciar claramente cu!ndo poseen ese significado y cuando se quiere que apare$can literalmente en el documento final" 0or ejemplo, : indica el comien$o de una directi'a y por ello, para que apare$ca en el texto como tal hay que escribir algo que no d. lugar a confusi n, en este caso @ltA los s&mbolos afectados por esta limitaci n y la forma de escribirlos, se detallan a continuaci n,

) (Menor que), AltB * (Mayor que), A$tA A (s&mbolo de and, o ampersand), Aa&pB C (comillas dobles), A%uotA C (interrogaci n de apertura), A'%uestA ) lo aceptan este s&mbolo los na'egadores a partir de la
'ersi n B"C"

#s decir, que para escribir )C* en el texto HTML original se debe poner AltBA%uotBA$tB #l otro caso especial se da cuando en un texto HTML se quiere escribir una e5e" #xisten dos formas de hacerlo" La primera, que es a la que obliga el est!ndar de HTML, consiste en utili$ar entidades como las que antes se presentaron para escribir ciertos s&mbolos" Las entidades comien$an siempre con el s&mbolo @, y terminan con un punto y coma (A)" #ntre medias 'a un identificador del car!cter que se quiere que escribir" Las entidades necesarias en nuestro idioma son,

(: AaacuteB

D: Auu&lB : AeacuteB EF: AUu&lB : A'acuteB EG: Ant'ldeB :: AoacuteB E: AH7I7B J: AuacuteB K: AH7L7B

Las 'ocales acentuadas se identifican a5adiendo el sufijo 3acute3 a la 'ocal sin acentuar (puesto que se trata de un acento agudo)" 0ara la u con di.resis y la eGe se usan uml tras una u y tilde detr!s una ene, respecti'amente" 0ara utili$ar la opci n -D, se utili$a la opci n, -r"

Captulo 5II: Las l'stas

HTML permite reali$ar listados numerados, sin numerar y listas para definir" 7/ L'stas s'n nu&erar 0ara crear una lista sin numerar E" )e empie$a escribiendo un tag de apertura de lista )UL* F" )e escribe el tag )LI* seguido por el t.rmino que se quiera numerar (no es necesario la etiqueta de cierre)" B" )e termina con el tag de cierre de la lista ),UL* He aqu& una lista de dos t.rminos, )UL* #l resultado es, 7acultades 2nstitutos )LI*7acultades

)LI*2nstitutos ),UL*

8/ L'stas nu&eradas: 9na lista numerada (tambi.n llamada lista ordenada, de ah& la denominaci n de la marca) es id.ntica a una lista sin numerar, excepto que se usa)3L* en lugar de )UL*/ -elante de los t.rminos se pone la marca:L2;, que es la misma que se utili$a en las otras listas" #l siguiente c digo HTML, da el siguiente formato, )3L*)LI*7acultad de -erecho

1. 2.
B"

7acultad de -erecho 7acultad de Medicina 7acultad de /iencias

)LI*7acultad de Medicina )LI*7acultad de /iencias),3L*

Captulo 5III: Las l'stas de de6'n'c'ones

9na lista de definici n consiste en t.rminos alternati'os (abre'iados como -T) y una definici n (abre'iada como --)" (ormalmente los broGsers del Geb dan la definici n en una nue'a l&nea" He aqu& un ejemplo de una lista de definici n,

)DT* )2*HTML),2*: )DD*H1perTe t MarMup Lan$ua$e NN HTML es un SGML DTD " #n t.rminos pr!cticos, es una colecci n de estilos (indicados por tags (marcas) de markup) que definen los componentes 'ariados de un documento %orld %ide %eb" ),DL* #l resultado es, HTML: H1perTe t MarMup Lan$ua$e NN HTML es un SGML DTD " #n t.rminos pr!cticos, es una colecci n de estilos (indicados por tags (marcas) de markup) que definen los componentes 'ariados de un documento %orld %ide %eb" Tanto la marca )DT* como la marca )DD* pueden contener m4ltiples p!rrafos (basta con separarlos con las marcas indicati'as de p!rrafo );* ), listas, o cualquier otra informaci n en la definici n"

)DL*

Para incluir un comentario en un documento HTML, es decir, una aclaracin que no aparece en la presentacin final del documento, se encierra el texto que formar el comentario entre los s m!olos )ONN co&entar'o NN*/
/omentarios"*

Captulo IP: -nlaces 1 $r(6'cos

1dem!s de los muchos estilos y capacidades de presentaci n que ofrece HTML para estructurar el documento en s&, existen 'arias directi'as que permiten definir relaciones entre diferentes documentos y estructurar todo un conjunto de documentos para crear una unidad l gica" La facilidad para definir este tipo de enlaces es una de las ra$ones de la potencia y 'ersatilidad de HTML" Los enlaces en HTML se expresan insertando entre la directi'a )0* el objeto (que puede ser un fragmento de texto o un gr!fico) que 'aya a ser'ir como anclaje para el enlace" 0or ejemplo, si se marca con )0* un gr!fico, cuando en el documento final se pulse con el rat n sobre dicho gr!fico se saltar! al objeto referenciado en el enlace, otro documento, un '&deo musical, o cualquier imagen" HIu. es un 98LJ "* 0ara especificar de manera uniforme el objeto al que apunta el enlace, se utili$a una forma estandari$ada que se denomina 98L (9niform 8esource Locator, es decir, Locali$ador 9niforme de 8ecursos )" 9n 98L est! formado de la siguiente manera, es%ue&a:,,&a%u'na,ruta" #l esquema es un nombre que identifica el tipo de ser'icio que 'a a proporcionarse en el destino del enlace" La ra$ n de esta aparente complicaci n es que el %%% pretende unificar el acceso a ser'icios de informaci n que pre'iamente eran incompatibles entre s&, como 6tp+ $op.er o telnet" #l esquema m!s utili$ado es http, correspondiente al propio WWW (es decir, cualquier referencia a un documento HTML deber&a comen$ar con http,==)" 6tros esquemas muy frecuentes son ftp, telnet, gopher o Gais" La m!quina y la ruta sir'en para locali$ar el objeto al que apunta el enlace" La m!quina es la identificaci n del ser'idor en el cual est! situado el objeto al que apunta el enlace"

La ruta es el nombre del archi'o que contiene el documento en concreto, incluyendo el nombre del subdirectorio en el que se encuentra" La estructuraci n habitual de la informaci n en un ser'idor de %%% suele empe$ar, con una p!gina de bien'enida (home page) que podr&a compararse con la portada de un peri dico o re'ista" #l resto de la informaci n que se puede encontrar en un ser'idor de %%% se distribuye a partir de ese directorio ra&$ en distintos subdirectorios y archi'os"

Captulo P: Los enlaces

0ara definir un enlace es necesario marcar con la directi'a )0* el objeto del cual 'a a partir dicho enlace" -icha directi'a debe incluir el par!metro H<-Q?CU<LC para especificar el destino del enlace" #s decir, que antes del objeto elegido se debe abrir con )0 H<-Q?CU<LC*, y despu.s cerrar con :=1;" 0or ejemplo, si se quiere que el texto 3pulse aqu& para 'isitar la 9ni'ersidad de (a'arra3 condu$ca a la home page de la 9ni'ersidad de (a'arra, se deber! escribir en el texto HTML, )0 H<-Q?C.ttp:,,RRR/una#/es,C*;ulse a%u para #'s'tar la Un'#ers'dad de @a#arra),0* #n la pantalla aparecer! un texto subrayado de color a$ul* es el est!ndar* que indica la existencia de un link o de hipertexto que lle'a a la direcci n que se indica" #nlaces dentro de la misma p!gina"* 1 'eces, en el caso de documentos muy extensos puede interesar dar un salto desde una posici n a otra determinada" 0ara esto, lo que antes se ha llamado el destino del enlace es el sitio dentro de la p!gina al que se quiere llegar" )e sustituye por H&arca (la palabra marca puede ser cualquier palabra)" Las palabras que 'ayan entre las etiquetas )0 H<-Q?CH&arcaC* ;ala!ras),0* aparecer!n en la pantalla en color (en forma de hipertexto)" )u estructura ser&a, )0 H<-Q?CH&arcaC* 5ea el e"e&plo del enlace en una p($'na ),0* > en el sitio exacto a donde se quiere saltar, se debe poner la siguiente etiqueta, )0 @0M-?C&arcaC*-nlace dentro de una p($'na ),0* 0or ejemplo, si se quiere saltar desde el principio del documento al final del documento se coloca la siguiente etiqueta, )0 H<-Q?CH6'nalC* ;ulsa para 'r al 6'nal),0* Iue resulta como, 0ulsa para ir al final (se puede comprobar c mo salta a la pantalla final)" > en el final del documento se pone esta otra etiqueta, )0 @0M-?C6'nalC* ),0* #se enlace en lugar de lle'ar a otro documento lle'a a la parte final del mismo documento" #l mismo efecto se consigue con la herramienta 3Top3" 9tili$ando el tag, )0 H<-Q?CHtopC* se consigue que se 'uel'a al principio de la p!gina"

Captulo PI: Los $r(6'cos

0ara incluir un gr!fico en un documento HTML se utili$a la directi'a )IMG*" #n dicha directi'a debe incluirse un par!metro S<C?CU<LC, con el cual se indica d nde est! el fichero con el gr!fico concreto que se quiere para el documento" #sto pone a disposici n una gran flexibilidad, ya que se puede complementar el contenido del documento tanto con gr!ficos que se encuentren disponibles en el ser'idor de %%%, como con una foto situada en un ser'idor de la (1)1 o del Ministerio de /ultura, por ejemplo, sin que el lector final tenga por qu. apreciar ninguna diferencia" #xiste alguna limitaci n respecto a los formatos gr!ficos que los programas lectores de HTML puede interpretar sin problemas" #l formato m!s utili$ado es el +27, que cualquier programa con capacidades gr!ficas deber&a poder mostrar directamente (Mosaic y (etscape pueden hacerlo)" Hay un par!metro optati'o de la directi'a )IMG* que sir'e para proponer un texto alternati'o a un gr!fico" #ste texto aparecer! cuando se est. usando para leer el HTML un programa sin capacidades gr!ficas (por ejemplo Lynx, que s lo trabaja con texto)" )e trata de alt?Cte toC/ /on'iene utili$arlo

cuando los gr!ficos sir'en como origen a hiperenlaces, porque si no los programas sin capacidades gr!ficas no podr!n mostrar los enlaces establecidos" 0ara colocar en este punto del documento una imagen que est! en el mismo subdirectorio que este manual, en el fichero fotografia"gif, se escribe, )IMG S<C?CU<L,6oto$ra6'a/$'6C *);* Los documentos de informaci n gr!fica deben optimi$arse para la 'isuali$aci n, es decir, hay que minimi$ar la tabla de colores con el fin de disminuir el tama5o que ocupan las im!genes" Tags adicionales"* Lo anterior es suficiente para producir documentos HTML b!sicos" 0ara crear documentos mas complejos, el HTML tiene tags para 'arios tipos de listas, secciones pre'iamente creadas, citas extensas, tablas, mapas, formularios y otras utilidades" #sto entrar&a dentro de un ni'el m!s ele'ado en el aprendi$aje del lenguaje HTML" 9n ejemplo m!s largo )HTML* )H-0D* )TITL-*-"e&plo &as lar$o ),TITL-* ),H-0D* )23D4* )H7*Un e"e&plo &as lar$o ),H7* #ste es un documento HTML sencillo" #ste es el primer pAaacuteBrra6o/ );* #ste es el segundo p@aacuteArrafo, con efectos especiales" #sta es una palabra en )I*curs'#a),I*" #sta es una palabra en )2*ne$r'ta),2*" He a%uA'acuteA una imagen GIQ:);* )IMG S<C?C.ttp:,,RRR/una#/es,'conos,ca!eSa/$'6C*/ );* #ste es el tercer p@aacuteArrafo, que demuestra links" He aqui un hypertext de la palabra :1 H8#7K3http,==GGG"una'"es=un=infouna'"html3;1cerca de la 9ni'ersidad de (a'arra:=1; a un documento llamado,3infouna'"html3" :0; )H8*Una ca!ecera de se$undo n'#el ),H8* He a%uA'acuteA una secci@oacuteAn de texto que se debe mostrar como una fuente de ancho fijo,:0; );<-*Con d'eS caAnt'ldeBones por !anda, 'iento en popa a toda 'ela no corta el mar sino 'uela un #elero !er$antA'acuteBn),;<-* )H<* 7in del documento ),23D4* :=HTML;

Captulo PII: Un e"e&plo

?eamos un ejemplo m!s largo reali$ado con lenguaje html" :HTML; :H#1-; :T2TL#;#jemplo mas largo :=T2TL#; :=H#1-; :<6->;

:HE;9n ejemplo mas largo :=HE; #ste es un documento HTML sencillo" #ste es el primer p@aacuteArrafo" :0; #ste es el segundo p@aacuteArrafo, con efectos especiales" #sta es una palabra en :2;cursi'a:=2;" #sta es una palabra en :<;negrita:=<;" He aqu@iacuteA una imagen +27,:0; :2M+ )8/K3http,==GGG"una'"es=iconos=cabe$a"gif3;" :0; #ste es el tercer p@aacuteArrafo, que demuestra links" He aqui un hypertext de la palabra :1 H8#7K3http,==GGG"una'"es=un=infouna'"html3;1cerca de la 9ni'ersidad de (a'arra:=1; a un documento llamado,3infouna'"html3" :0; :HF;9na cabecera de segundo ni'el :=HF; He aqu@iacuteA una secci@oacuteAn de texto que se debe mostrar como una fuente de ancho fijo,:0; :08#;/on die$ ca@ntildeAones por banda, 'iento en popa a toda 'ela no corta el mar sino 'uela un 'elero bergant@iacuteAn:=08#; :H8; 7in del documento :=<6->; :=HTML;