manual extenxo html

8/19/2019 Manual Extenxo HTML

1/63

2007


2/63

GUIA DETALLADA DE HTML

Elementos del lenguaje HTML

A las instrucciones que forman el lenguaje HTML las denominaremoselementos. Se distinguen dos tipos de elementos:

Elementos llenos:Estos elementos se forman mediante una marca de inicio y otra de nal.En HTML las marcas se demilitan con los signos < (inferior a y >(superior a. La marca de n es id!ntica a la inicial pero con el a"adidode la #arra inclinada$ /$ justo antes del nom#re de la misma. %n te&tomarcado tendr' por tanto este aspecto:

...texto normal texto afectado por la marca restodel texto... or ejemplo$ para resaltar un te&to en negrita$ se emplea la marca )*+de la siguiente forma:...texto normal texto en negrita resto del texto... Si en este ejemplo nos ,u#iesemos ol-idado de la marca de nal$ elresto de la p'gina estara tam#i!n en negrita.

Elementos vacíos:Estos elementos no requieren de la marca nal$ ya que normalmente noproducen un efecto so#re el te&to en s$ sino que denen separadores.or ejemplo el elemento )H/+ que sir-e para mostrar una lnea,ori0ontal en la pantalla$ se escri#ir':)H/+Elementos con argumentos:Algunos elementos tienen argumentos$ los cuales son denominadosatri#utos. 1ada uno de estos atri#utos podr' tener un -alor el cual ir'entre comillas$ si es alfanum!rico:

Ejemplos:)H/ 23SHA4E+)TA*LE 564TH7899+ ... )TA*LE+)A H/E;7


3/63


Si se quieren utili0ar caracteres como ) o + en el te&to normal$ ,a#r' queacudir a un articio para que el #ro=ser no intente interpretarlos como marca.Estos caracteres as como otros sm#olos utili0ados en el c>digo HTML sereempla0ar'n por los siguientes grupos de caracteres:El caracter ) ser' reempla0ado por ?lt@ el caracter + ser' reempla0adopor ?gt@

Estructura de un documento HTML

Los documentos escritos en HTML empe0ar'n por la marca y

nali0ar'n con la marca . Esta marca tan solo sir-e comoidenticaci>n del contenido del c,ero para ciertos programas quereali0an cam#ios masi-os en muc,as p'ginas a la -e0.Los documentos escritos en HTML est'n estructurados en dos partesdiferenciadas: la cabecera () y el cuerpo ()

Entre las marcas del elemento se podr'n utili0ar los siguienteselementos: para dar nom#re al documento@ para for0ar a la p'gina acti-a a ser cargada cada ciertotiempo. para prejar la direcci>n #ase de los documentos referenciadosmediante un %/L relati-o.

El c,ero fuente de un documento HTML podr' contener comentariose&plicati-os que ser'n ignorados por el #ro=ser.

HE!"# T$TLE# MET!# %!&ELa ca#ecera se emplea para facilitar informaci>n acerca del documento y est'delimitada por )HEA4+ pr>logo )HEA4+. 2ormalmente esta informaci>n nose -e cuando se na-ega por el documento.

4entro de la ca#ecera se podr' denir una #re-e descripci>n que identica eldocumento mediante las marcas )T6TLE+ y )T6TLE+. El uso de T$TLE esobl'gator'o ya que adem's de un car'cter informati-o tiene otras ra0onespara e&istir:

Es el te&to que el #ro=ser almacenar' en el c,ero hotlist o bookmark .Es lo que se indica en la lista que aparece en la orden Go de la #arra de menu.

SUBMODULO III ELAB. PAGINAS WEB UTILIZANDO APLIC ACTUALES 3

http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/estruct.htm#head%23headhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/estruct.htm#body%23bodyhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/estruct.htm#comentarios%23comentarioshttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/estruct.htm#head%23headhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/estruct.htm#body%23bodyhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/estruct.htm#comentarios%23comentarios


4/63


Es lo que aparece en la esquina superior i0quierda cuando se imprime eldocumento.En un conte&to =indo=$ cuando se minimi0a la -entana$ el ttulo ser' tomadocomo nom#re por el icono.

A continuaci>n se muestra un ejemplo del formato mnimo de la ca#ecera.

1uerpo del documento El ttulo del documento que est' usted leyendo a,ora mismo se encuentra enla parte superior de esta -entana y es "Estructura de un documento HTML"$como usted mismo podr' compro#ar.En la ca#ecera puede utili0arse tam#i!n el elemento )META+ que puede for0ara que la p'gina acti-a se cargue cada cierto tiempo (indicado en segundosmediante el atri#uto 132TE2T.

Este ejemplo ,ace que el #ro=ser -uel-a a cargar la p'gina cada 9 segundos. Tam#i!n puede ,acerse a un ser-idor$ as:

Esto ,a de ser utili0ado con muc,a precauci>n ya que podr' so#recargar elser-idor. Si el contenido de la p'gina no -a a cam#iar es inFtil ,acerlo$ de,ec,o$ solo tendr' utilidad en casos muy especiales.

El elemento dene la informaci>n a prejar a todo %/Lincompleto en el documento. or ejemplo$ el %/L relati-o

Esta es la estructura mnima que de#e poseer todo documento HTML:


5/63


Estructura mnima de un documento HTML

"ocumento


6/63


p'rrafo $ p'rrafo $ p'rrafo $ p'rrafo $ p'rrafo $p'rrafo $ p'rrafo .

E#to $ar% como re#ulta$o&Este te&to est' contenido dentro del primer p'rrafo$ as que lo denominaremos: parrafo$ p'rrafo $ p'rrafo $ p'rrafo $ p'rrafo $ p'rrafo $ p'rrafo $ p'rrafo .

Este otro te&to est' contenido dentro del p'rrafo $ p'rrafo $ p'rrafo $ p'rrafo $p'rrafo $ p'rrafo $ p'rrafo $ p'rrafo .

Este elemento admite el atri#uto !L$45$ que puede tomar uno de lossiguientes -alores:LET: Iustica el te&to a la i0quierda. (por defecto$4HT: Iustica el te&to a la derec,a.6E5TE: El te&to aparece centrado.

Ejemplo:) AL6J27LE;T+ Te&to justicado a la i0quierda$ te&to justicado

a la i0quierda$ te&to justicado a la i0quierda$te&to justicado a la i0quierda.)+) AL6J27/6JHT+ Te&to justicado a la derec,a$ te&to justicado

a la derec,a$ te&to justicado a la derec,a$te&to justicado a la derec,a.

)+) AL6J271E2TE/+ Te&to centrado$ te&to centrado$ te&to centrado$ te&to centrado$ te&to centrado$ te&to centrado.

)+ Esto dar7 como resultado:Texto justificado a la izquierda, texto justificado a la izquierda,texto justificado a la izquierda, texto justificado a la izquierda.

Te&to justicado a la derec,a$ te&to justicado a la derec,a$te&to justicado a la derec,a$ te&to justicado a la derec,a.

Te&to centrado$ te&to centrado$ te&to centrado$ te&to centrado$te&to centrado$ te&to centrado.

%El elemento lo tiene marca inicial. 6ndica un saltode lnea.

Ejemplo: Te&to $ te&to $ te&to $ te&to $ te&to $ te&to $te&to $ te&to $ te&to $ te&to $ te&to $ te&to .

Te&to $ te&to $ te&to $ te&to $ te&to .6on esto tendremos como resultado:

Te&to $ te&to $ te&to $ te&to $ te&to $ te&to $ te&to $ te&to $ te&to $te&to $ te&to $ te&to .

Te&to $ te&to $ te&to $ te&to $ te&to .



7/63


%L-689,-TEEl elemento

Te&to $ te&to $ te&to $ te&to $ te&to .)*L31KC%3TE+ Te&to $ te&to $ te&to $ te&to $ te&to $ te&to $ te&to $ te&to $ te&to $te&to $ te&to $ te&to $ te&to $ te&to .)*L31KC%3TE+

El resultado ser': Te&to $ te&to $ te&to $ te&to $ te&to . Te&to $ te&to $ te&to $ te&to $ te&to $ te&to $ te&to $te&to $ te&to $ te&to $ te&to $ te&to $ te&to $ te&to .

HEs un elemento -aco por lo que solo tiene marca inicial. Se emplea paraseparar #loques de te&to representando una lnea ,ori0ontal.Se puede cam#iar la apariencia de dic,a lnea mediante los siguientesatri#utos:23SHA4E: Elimina el efecto de som#ra de la lnea.564TH: ermite denir la longitud de la lnea.S6E: ermite denir el grosor de la lnea.Ejemplos:)H/ 23SHA4E+

)H/ 564TH79 S6E78+

)H/ 564TH79 S6E7N+

)H/ 23SHA4E 564TH7O99 S6E7O+

3EEl te&to insertado entre las marcas


8/63


!""E&&El elemento no una rma mostr'ndolo$ generalmente$ en letra cursi-a. Es muy utili0ado para indicartoda la informaci>n respecto al autor del documento (direcci>n$ tel!fono$ eBmail$....uede insertarse en cualquier lugar del documento@ lo ,a#itual en 555 es incluir esta0ona de direcci>n al nal del documento.

Ejemplo:)A44/ESS+ TePin Tontu )*/+ QQA 5ellington /d )*/+ Au#urn OO$ 2S5 )*/+ Australia )*/+eBmail tePinRcis.com )*/+

)A44/ESS+Esto dar' como resultado:

TePin TontuQQA 5ellington /dAu#urn OO$ 2S5AustraliaeBmail tePinRcis.com

6E5TEEl elemento


9/63


Este Fltimo ejemplo es un p'rrafo de te&to centrado mediante elelemento $E-TE. 1omo pueden o#ser-ar cada una de las lneas delp'rrafo aparecer' centrada.

T'pos de letra

En este apartado se indica c>mo denir ca#eceras mediante el elemento

mo modicar el tama"o y color de algFn grupo de caracteresmediante el elemento


10/63


El elemento )Hn+ se utili0a fundamentalmente para escri#ir enca#e0amientos.Asigna un tama"o a los caracteres$ dependiendo del -alor n$ el cual -ara de a N. Los m's grandes tienen -alor y los m's peque"os -alor N. El te&to entreestas marcas se trata en negrita. Se inserta autom'ticamente un salto dep'rrafo$ como puede compro#ar en el siguiente ejemplo:Ejemplo:

Te&to antes de la ca#ecera. )H8+1a#ecera)H8+ M's te&to.Esto dar' el siguiente resultado:

Te&to antes de la ca#ecera.1a#eceraM's te&to.En la siguiente ta#la tiene una muestra del tama"o de letra de cada una de lasca#eceras.

)H+1a#ecera H)H+ 1a#ecera H

)H+1a#ecera H)H+ 1a#ecera H

)H8+1a#ecera H8)H8+ 1a#ecera H8

)HO+1a#ecera HO)HO+ 1a#ecera HO)H+1a#ecera H)H+ 1a#ecera H

)HN+1a#ecera HN)HN+ 1a#ecera HN

-5TEl elemento digos de los colores que le interesen puede consultar la ta#la de c>digos de

colores.El atri#uto ;A1E: permite denir el tipo de letra: Algerian$ Arial$ Times 2e=/oman$ 1ourier$ MS Serif$ Sym#ol$ System$ Times 2e= /oman$ 5indsort$ ...Este atri#uto es soportado tan solo por algunos #ro=sers. (El 2etscape no loreconoceEjemplos:

Tama"os 8 O N Q N O 8 (Der c>digo fuente

1olores 13 L3 /E S 4E L ET /A S (Der c>digo fuente

);32T S6E7O 13L3/799999+ Te&to de color -erde y tama"o O.);32T+ Te&to de color -erde y tama"o O.);32T S6E7N 13L3/7;;9999+ Te&to de color rojo y tama"o N.);32T+

Te&to de color rojo y tama"o N.El atri#uto &$E del elemento


11/63


Este te2to es del tamao =?*@ Teniendo en cuenta que el -alor por defecto denido inicialmente para undocumento es 8$ el resultado ser':Este te&to tiene el tama"o por defecto (8.Este te&to es del tama"o 8B7.Este te&to es del tama"o 8U7.

El -alor del tama"o por defecto puede ser modicado mediante el elementon.

%!&E-5TEl elemento

Ejemplo de uso de


http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/letras.htm#basefont%23basefonthttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/letras.htm#basefont%23basefont


12/63


Los estilos l>gicos est'n pensados para caracteri0ar determinadasporciones de te&to$ pero su interpretaci>n es totalmente dependiente del#ro=ser.

Estilos l>gicos4nfasis )em+

Te2to destacado )strong+1>digo )code+$itas )cite+Entrada por teclado )P#d+Ejemplos )samp+*ariables )-ar+

Se pueden anidar distintos estilos o#teniendo resultados como estos:

-egrita 5 cursi0a)#+)i+ 2egrita y cursi-a )i+)#+2egrita y tac,ado)#+)striPe+ 2egrita y tac,ado )striPe+)#+arpadeo$ tac,ado y tipo c>digo)#linP+)striPe+)code+ arpadeo$tac,ado y tipo c>digo)code+)striPe+)#linP+

1olores

Los colores se identican mediante el nom#re del color en ingl!s o #ienmediante un c>digo del tipo rrgg## donde digos de colores.

Ha de tener en cuenta que algunos colores no se -er'n o se -er'n mal sila m'quina no soporta N colores.6olor del te2toEn este apartado se indicar' c>mo cam#iar el color de un grupo denidode caracteres en un te&to mediante el elemento


13/63


6olores del entornoAqu se -er' c>mo cam#iar los colores denidos por defecto para elfondo$ el te&to normal y los enlaces mediante el elemento MA'NTA

)UR)URA )UR)URA

C+AN C+AN

MARRON MARRON

N'RO N'RO

'RI- 'RI-

TAL TAL

LANCO LANCO

1omo se coment> en la introducci>n el color se puede indicar tanto mediantesu nom#re en ingl!s como por determinados c>digos ,e&adecimales. (Der ta#lade c>digos de coloresEn el siguiente ejemplo se muestra una com#inaci>n de colores y tama"os deletra:(ara mayor detalle -er


14/63


Este ejemplo esta#lecer' el colos gris claro (191919 como color de fondo dep'gina.

El atri#uto %!684-,5" Este atri#uto permitir' se utilice una imagen residente en el ser-idor$ o en unc,ero local$ como fondo de p'gina.

)*34V *A1KJ/3%247


15/63


%ronPe $$ rgb*G!NK"=" TEAT-

6adet %lue rgb*G@ TEAT-

6ool 6opper rgb*G"QK; TEAT-

6opper rgb*G%QK=== TEAT-6oral rgb*GK TEAT-

6orn loIer %lue rgb*GOON TEAT-

"arJ %roIn rgb*G@6O== TEAT-

"arJ 4reen rgb*GO TEAT-

"arJ 4reen6opper

rgb*GO!KNNE TEAT-

"arJ -l've 4reen rgb*GOO TEAT-

"arJ -rcF'd rgb*G=6" TEAT-

"arJ 3urple rgb*GQK;KQ TEAT-

"arJ &late %lue rgb*GN%=QE TEAT-

"arJ &late 4rey rgb*GOO TEAT-

"arJ Tan rgb*GKNO TEAT-

"arJ Tur1uo'se rgb*GK="% TEAT-

"arJ ood rgb*GQ@@EO TEAT-

"'m 4rey rgb*G@O@O@O TEAT-

"usty ose rgb*GQ@N=N= TEAT-

eldspar rgb*G";K@ TEAT-

'rebr'cJ rgb*GQE== TEAT-

orest 4reen rgb*G=QE= TEAT-

4old rgb*G6"K= TEAT-

4oldenrod rgb*G"%"%K TEAT-

4rey rgb*G666 TEAT-

4reen 6opper rgb*G@KKN TEAT-

4reen .elloI rgb*G="%K TEAT-

Hunter 4reen rgb*G;@E; TEAT-

$nd'an ed rgb*GOE TEAT-

8FaJ' rgb*G@ TEAT-

L'gFt %lue rgb*G6"" TEAT-

L'gFt 4rey rgb*G!Q!Q!Q TEAT-

L'gFt &teel %lue rgb*GQQ%" TEAT-

L'gFt ood rgb*GE6!N TEAT-

M'dn'gFt %lue rgb*GO TEAT-

5avy %lue rgb*G==QE TEAT-

5eon %lue rgb*GO"O" TEAT-

5eon 3'nJ rgb*GNE6K TEAT-

5eI M'dn'gFt %lue rgb*G6 TEAT-

5eI Tan rgb*GE%6KE TEAT-

-ld 4old rgb*G6%@=% TEAT-

-range rgb*GK TEAT-

-range ed rgb*GO TEAT-

-rcF'drgb*G"%K"%

TEAT-

3ale 4reen rgb*GQ%6Q TEAT-

3'nJ rgb*G%6QQ TEAT-

3lum rgb*GE!!"E!TEAT-

9uartP rgb*G""= TEAT-

'cF %lue rgb*G@@!% TEAT-&almon rgb*GNOO TEAT-

&carlet rgb*GQ6;K;K TEAT-

&ea 4reen rgb*G=QENQ TEAT-

&em'0&Ieet6Focolate

rgb*GN%ON TEAT-

&'enna rgb*GQEN%= TEAT-

&'lver rgb*GENEQ! TEAT-

&Jy %lue rgb*G=66 TEAT-

&late %lue rgb*GK TEAT-

&p'cy 3'nJ rgb*G;6!E TEAT-

&pr'ng 4reen rgb*GK TEAT-

&teel %lue rgb*G=N%QE TEAT-

&ummer &Jy rgb*G=Q%"E TEAT-

Tan rgb*G"%=K TEAT-

TF'stle rgb*G"Q%"QTEAT-

Tur1uo'se rgb*G!"E!E!TEAT-

Bery "arJ %roIn rgb*G@6O== TEAT-

Bery L'gFt 4reyrgb*G6"6"6"

TEAT-

B'olet rgb*GOO TEAT-

B'olet ed rgb*G66= TEAT-Feat rgb*G"Q"Q%TEAT-

.elloI 4reen rgb*G66= TEAT-



16/63


L'stas

%na lista permite organi0ar la totalidad o parte de un documento HTMLestructur'ndolo de la forma m's clara posi#le para ,acerlo m'spercepti#le al lector. Las listas se utili0an para di-idir el documento asicomo para efectuar numeraciones de o#jetos$ pero la diferencia con losprocesadores de te&to es que no permite la numeraci>n autom'tica parani-eles jer'rquicos diferentes:



17/63


18/63


;ic,ero de sonido;ic,ero de -deo;ic,ero de ejemplo

)L6+;ic,ero HTML)L6+ )L6+;ic,ero de imagen)L6+ )L6+;ic,ero de sonido)L6+ )L6+;ic,ero de -deo)L6+ )L6+;ic,ero de ejemplo)L6+

)%L+Los puntos gruesos se pueden cam#iar usando el atri#uto TVE con tres-alores (el -alor por defecto es 46S1. 1on el -alor 16/1LE se -er':

rimera lneasegunda lnea

)%L TVE716/1LE+ )L6+rimera lnea )L6+Segunda lnea)%L+

Tam#i!n puede usarse el -alor SC%A/E. As:

rimera lneasegunda lnea

)%L TVE7SC%A/E+ )L6+rimera lnea )L6+Segunda lnea

)%L+

L'stas ordenadas

-LLa marca )3L+ se utili0a para una lista ordenada o numerada. 1ada

marca


19/63


;ic,ero de ejemplo)L6+;ic,ero de -deo)L6+

)L6+;ic,ero de ejemplo)L6+)3L+

Las listas ordenadas no s>lo se pueden ordenar con nFmeros. Tam#i!nse pueden utili0ar letras y numeraci>n romana tanto en mayFsculas

como minFsculas. ara esto se utili0a el atri#uto TVE del elementon romana en mayFsculas$ TVE7i

para numeraci>n romana en minFsculas.Esto es una lista ordenada con letrasmayFsculas:

rimera lneaSegunda lnea Tercera lnea1uarta lnea

)3L TVE7A+ )L6+rimera lnea )L6+Segunda lnea )L6+Tercera lnea )L6+1uarta lnea)3L+

Esto es una lista ordenada con letras minFsculas:rimera lneaSegunda lnea

Tercera lnea1uarta lnea

)3L TVE7a+ )L6+rimera lnea )L6+Segunda lnea )L6+Tercera lnea

)L6+1uarta lnea)3L+

Esto es una lista ordenada con numeraci>n romana

en mayFsculas:rimera lneaSegunda lnea Tercera lnea1uarta lnea

)3L TVE76+ )L6+rimera lnea )L6+Segunda lnea )L6+Tercera lnea )L6+1uarta lnea)3L+

Esto es una lista ordenada con numeraci>n romanaen minFsculas:rimera lneaSegunda lnea Tercera lnea1uarta lnea

)3L TVE7i+ )L6+rimera lnea )L6+Segunda lnea )L6+Tercera lnea )L6+1uarta lnea)3L+



20/63


En algunos casos puede interesarnos que la lista no comience por elnFmero (por ejemplo si es una lista que continua en otra p'gina. Sepuede conseguir con el atri#uto STA/T com#inado con TVE.

Esto es una lista ordenada con letras mayFsculas yque comien0a por la E:

rimera lneaSegunda lnea Tercera lnea1uarta lnea

)3L TVE7A TA/T7+

)L6+rimera lnea )L6+Segunda lnea )L6+Tercera lnea )L6+1uarta lnea)3L+

El nFmero que se pone en el atri#uto STA/T indica en que nFmero oletra comen0ar' la lista. La E es la quinta letra.

L'stas de d'rector'o

"$Las listas de directorio son similares a las listas sin orden. En el 2etscapeno se -e diferencia entre una y otra. La Fnica diferencia es la sint'&is delc>digo donde en -e0 de utili0ar la marca


21/63


L'stas de menD

ME5,Las listas de menu son similares a las listas sin orden. En el 2etscape nose -e diferencia entre una y otra. La Fnica diferencia es la sint'&is delc>digo donde en -e0 de utili0ar la marca n 3pci>n 8

)H8+Ejemplo de lista directorio)H8+)ME2%+ )L6+3pci>n )L6+ )L6+3pci>n )L6+ )L6+3pci>n 8)L6+

)ME2%+

La estructura de una ta#la se dene mediante:una marca de inicio de la ta#la (T+!LE$una marca de comien0o de una nue-a lnea (T yuna marca de comien0o de una celda (T(.


http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/listas.htm#ul%23ulhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablas.htm#table%23tablehttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablas.htm#tr%23trhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablas.htm#td%23tdhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/listas.htm#ul%23ulhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablas.htm#table%23tablehttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablas.htm#tr%23trhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablas.htm#td%23td


22/63


Al nal de cada uno de estos elementos se de#er' denir la marca denal correspondiente.Esta estructura es #astante simple y muy f'cilmente modica#le.Se pueden denir adem's te&tos de ca#ecera en las celdas (TH y ttulospara las ta#las ($+PT)#-.

%na celda puede contener algunos de los siguientes elementos:te&tolistasotras ta#lasim'genesenlaces de ,iperte&toelementos de formularioLa representaci>n de una ta#la es actualmente muy dependiente delbro7ser utili0ado.

T!%LE

La marca )T+!LE+ permite la apertura de una ta#la@ el n de ta#la seespecica con ) T+!LE+.Se puede indicar alguno de los siguintes atri#utos:

%-"E: dene el grosor del marco e&terior (puede ser cero.6ELL3!""$54: dene el espacio alrededor del te&to de una celda.6ELL&3!6$54: dene el espacio entre celdas.

El -alor de estos atri#utos se especica en p&els. 1uando no se lesasigna ningFn -alor e&plcitamente estos atri#utos tomar'n -aloresdenidos por defecto.El -alor por defecto del atri#uto *3/4E/ es cero por lo que si !steatri#uto no se especica se o#tendr' una ta#la sin #ordes la cual suele

ser muy Ftil para la alineaci>n de elementos$ uno al lado de otro$ o unode#ajo de otro. ara que se -isualicen los #ordes de la ta#la #astar'nom#rar este atri#uto asignandole un -alor$ o no.

Se puede determinar el tama"o de la ta#la$ #ien for0andola a ocupar uncierto porcentaje de la anc,ura de la -entana del bro7ser o deniendoun tama"o jo en unidades$ mediante los atri#utos:

$"TH: dene el anc,o de la ta#la$ #ien en X o en unidades.HE$4TH: dene el alto de la ta#la$ #ien en X o en unidades.

Ejemplos:

celda celda celda 8 celda O

)TA*LE+)T/+)T4+celda )T4+)T4+celda)T4+)T/+)T/+)T4+celda 8)T4+)T4+celdaO)T4+)T/+)TA*LE+


http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablas.htm#th%23thhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablas.htm#caption%23captionhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablas.htm#th%23thhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablas.htm#caption%23caption


23/63


celda celda

celda 8 celda O

)TA*LE *3/4E/+)T/+)T4+celda )T4+)T4+celda)T4+)T/+)T/+)T4+celda 8)T4+)T4+celda

O)T4+)T/+)TA*LE+

celda celda

celda 8 celda O

)TA*LE *3/4E/7 1ELLSA162J7N1ELLA4462J7+)T/+)T4+celda )T4+)T4+celda)T4+)T/+)T/+)T4+celda 8)T4+)T4+celdaO)T4+)T/+)TA*LE+

4eniendo el anc,o y alto de lata#la en X

Anc,o (8)(TH 9X

Alto (HE)GHT 89X

)TA*LE *3/4E/ 564TH79X HE6JHT789X+)1AT632+4eniendo el anc,o y alto de la ta#la en X)1AT632+)T/ AL6J27


24/63


)T4+9)T4+)TA*LE+

TLa marca )T+ inicia una lnea de la ta#la que terminar' con ) T+.

Admite los atri#utos:DAL6J2: permite una alineaci>n del te&to en el sentido -ertical dela celda.Admite los -alores: T#P9 !#TT#M9 M)((LE

AL6J2: permite una alineaci>n del te&to en el sentido ,ori0ontal de lacelda.Admite los -alores: )GHT9 $E-TE9 LE/T Estos atri#utos se aplican so#re toda la la$ sal-o cuando un atri#uto de)T(+ contradice esta alineaci>n.

T"La marca )T(+ delimita el inicio de una celda. Admite los atri#utos:

DAL6J2: permite una alineaci>n del te&to en el sentido -ertical de la

celda.Admite los -alores: T#P9 !#TT#M9 M)((LE

AL6J2: permite una alineaci>n del te&to en el sentido ,ori0ontal de lacelda.Admite los -alores: )GHT9 $E-TE9 LE/T

13LSA2: dene una celda con una anc,ura mFltiplo de la columna#'sica./35SA2: dene una celda con una anc,ura mFltiplo de la la #'sica.235/A: o#liga al bro7ser a inscri#ir todo el te&to de la celda en una

sola lnea.

En las ta#las el ajuste es autom'tico$ la anc,ura de una celda dependedel te&to m's largo inscrito en una de las celdas de la columna. 4emodo predeterminado$ si la lnea es demasiado larga$ el bro7ser lacortar' en -arias lneas$ no ser que est! presente el atri#uto 235/A.

THLa marca )TH+ es id!tica a )T(+ pero el te&to de las celdas seconsidera como te&to de ca#ecera. Este te&to se centraautom'ticamente y se pone en negrita. Admite los mismos par'metrosque la marca )T(+ (DAL6J2$ AL6J2$ 13LSA2$ /35SA2$ 235/A.

6!3T$-5


http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablas.htm#td%23tdhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablas.htm#td%23tdhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablas.htm#td%23tdhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/tablas.htm#td%23td


25/63


Esta marca permite poner un ttulo encima ( atri#uto AL6J27T3 ode#ajo (atri#uto AL6J27*3TT3M de la ta#la.

Ejemplos: Titulo Superior (por defecto

Atri#utos de alineaci>n$ Align y DAlignAlineaci>nDertical

TopMiddle

*ottom

Alineaci>nHori0ontal Left 1enter /ig,t

)1E2TE/+)TA*LE *3/4E/+)1AT632+Titulo Superior (por defecto)1AT632+)T/+

)T4+)T4+ )TH 13LSA278+Atri#utos de alineaci>n$ Align y DAlign)TH+)T/+ )TH+Alineaci>n)*/+Dertical)TH+ )T4 DAL6J27top+Top)T4+ )T4 DAL6J27middle+Middle)T4+ )T4 DAL6J27#ottom+*ottom)T4+)T/+ )TH+Alineaci>n)*/+Hori0ontal)TH+ )T4 AL6J27left+Left)T4+ )T4 AL6J27center+1enter)T4+

)T4 AL6J27rig,t+/ig,t)T4+)TA*LE+)1E2TE/+

Dentana Dentana Dentana 8

1olor;ondo #lanco gris amarillo

1olor Te&to

a0ulnegro

negro

1olorSm#olos rojo -erde Ta#la ..

)1E2TE/+)TA*LE *3/4E/+)1AT632 AL6J27


26/63


)T4+)T4+)TH+Dentana )TH+)TH+Dentana )TH+)TH+Dentana 8)TH+)T/ AL6J27


27/63


$m7genes $

1ontenidos:6ntroducci>n6nserci>n de im'genes n de im'genes El atributo +L)G-E&tensiones del 2etscape para la alineaci>n de im'genes6m'genes como fondo de p'gina


28/63


E&isten dos formas de mostrar una imagen en una p'gina HTML$ laprimera es mostrar la im2gen en l:nea$ o sea$ la imagen se -isuali0aautom'ticamente al cargar la p'gina@ la segunda es mediante laacti-aci>n de un enlace de hipertexto ;ue pro0o;ue la 0isualiaci=n dela imagen.

E&isten di-ersos formatos de imagenes . Los formatos J6; y IEJ soninterpretados directamente por el -isuali0ador. Se puede usar cualquierotro formato como el MJ (-deo$ pero en este caso el -isuali0adorllamar' a un programa au&iliar$ que pre-iamente se ,a#r' denido$ paraque sea !ste el que -isualice el c,ero. La des-entaja de las im'genesen formatos no tratados por el propio -isuali0ador es que no se -er' elte&to junto con la imagen$ y por tanto no se podr' imprimir la p'ginacompuesta.ara que todos los #ro=sers puedan comprender el formato en el queest' codicado la imagen$ se ,a ,ec,o una normali0aci>n con elest'ndar J6; (Jrap,ics 6nterc,ange ;ormat. Se trata de un formato

comprimido pensado para optimi0ar el tiempo de telecarga que permiteel tratamiento de im'genes en colores (N como m'&imo o ni-eles degris.

$M4Este elemento permite incluir una imagen en un documento. Dendr'

siempre acompa"ado por el atri#uto S/1 que indica la direcci>n delc,ero gr'co que contiene la imagen:)6MJ S/17nW%/LWdelWc,eroWgr'co


29/63


utili0a s>lo en casos e&cepcionales de im'genes que son actuali0adasperi>dicamente (p.e: un mapa metereol>gico.Si el c,ero indicado no es encontrado el #ro=ser mostrar' un sm#oloen lugar de la imagen$ indicando el error. or ejemplo:)6MJ S/17n.

El atr'buto !L$45Alinea la imagen$ segFn la posici>n que se le indique$ respecto a la lneade te&to en la que est'. uede tomar los siguientes -alores: T3: alinea la parte superior de la imagen con la lnea actual.M644LE: alinea el centro de la imagen con la lnea actual.*3TT3M: alinea la #ase de la imagen con la lnea actual.Ejemplos:arte superior de la imagen )6MJ S/17


30/63


alineada con el te&to

arte inferior de la imagen alineada con el te&to

E2tens'ones del 5etscapeEstas e&tensiones no son reconocidas por HTML $ sin em#argo son#astante utili0adas por muc,os autores de p'ginas HTML.

AL6J2: Adem's de los -alores ya denidos anteriormente para elatri#uto AL6J2 $ el 2etscape permite la utili0aci>n de dos nue-os-alores. Estos permitir'n que el te&to Yuya alrededor de la imagen conuna regulaci>n del espacio -ertical (atri#uto DSA1E y del espacio,ori0ontal (atri#uto HSA1E.

564TH: /edene el anc,o de la imagen.

HE6JHT: /edene el alto de la imagen.*3/4E/: 4i#uja un marco alrededor de la imagen.DSA1E: 4ene el margen -ertical a dejar entre la imagen y el te&to.HSA1E: 4ene el margen ,ori0ontal a dejar entre la imagen y el te&to.

ara poder saltar la imagen y que el te&to continue de#ajo de !sta se ,adenido el atri#uto 1LEA/ para el elemento de salto de lnea )*/+:)*/ 1LEA/+.A continuaci>n se mostrar'n -arios ejemplos para aclarar lo e&plicadoen este apartado:Ejemplos:)6MJ S/17


31/63


)6MJ S/17ndonde se encuentra el c,ero que contiene la imagen. La sinta&is ser':)*34V *A1KJ/3%247


32/63


)4L+ )4L+ )4L+)4L+

Lnea de te&to

Lnea de te&toLnea de te&toLnea de te&toLnea de te&toLnea de te&toLnea de te&toLnea de te&to

!n'mac'ones%na nue-a posi#ilidad de algunos #ro=sers es la posi#ilidad depresentar gr'cos con animaci>n. Los gr'cos animados en formato J6;

permiten almacenar secuencias de imagenes en un solo c,ero$ lascuales forman animaciones que pueden ser -isuali0adas directamentepor el #ro=ser. 2o ,ay que confundir estos gr'cos con los -deos enformato MJ que no son tratados por el #ro=ser sino por una,erramienta au&iliar.La forma de introducir estas animaciones en un documento es la mismaque para una imagen ja$ como se muestra en el siguiente ejemplo:Ejemplo:

)6MJ S/17n se detendr'en la imagen de la secuencia en la que est!.Los -isuali0adores que no soportan este efecto representar'n solamentela primera o la Fltima de las im'genes de la secuencia. or esto escon-eniente no comen0ar o terminar las secuencias con una imagen-aca.



33/63


$m7genes $$

1ontenidos:6ntroducci>n6nserci>n de im'genes n de im'genes El atributo +L)G-E&tensiones del 2etscape para la alineaci>n de im'genes6m'genes como fondo de p'gina n so#re algFn punto de la supercie de!stas$ se pase al documento correspondiente. Esto suele ser utili0adoso#re todo para introducir #otones de na-egaci>n en las p'ginas HTML.Ejemplos:)A H/E;7


34/63


Si en un enlace se indica la direcci>n de una imagen dic,a imagen noser' cargada junto con la p'gina sino que ser' cargada s>lo en el casode que dic,o enlace sea acti-ado.Ejemplo:)A H/E;7n de programaci>n (en un Fnico c,ero$este segundo caso es muc,o m's eca0 porque minimi0a los accesos ala red.

/eali0aci>n de una imagen acti-a#le con HTML :Se seguir'n una serie de pasos:4enir la imagen con el tama"o deseado. Es con-eniente pro#ar dic,a

imagen en diferentes resoluciones de pantalla (1$ Mac$ terminales an de predeterminar con seguridad el tama"o >ptimo de !sta$ ya que eltra#ajo que -iene a continuaci>n es muy tedioso como para tener que-ol-er a empe0ar.Hacer una lista de coordenadas$ 0ona por 0ona$ de las superciesacti-a#les. Estas 0onas acti-a#les podr'n tomar las formas de:rect2ngulo9 c:rculo o pol:gono. El sistema se coordenadas de la imagen tendr' su origen en la partesuperior i0quierda de !sta. Ha#r' que crear un c,ero en el que cadalnea denir' una forma geom!trica para la 0ona acti-a#le y su %/Lasociado. La sint'&is ser' la siguiente:

forma dirW%/L $V $V ...El nFmero de puntos (e&presados en p&els depender' de la forma de la0ona$ la cual se indicar' mediante una de las siguientes pala#ras cla-e:/E1T: rect'ngulo denido por dos puntos: el e&tremo superior i0quierdoy el e&tremo inferior derec,o.16/1LE: crculo denido por dos puntos: el centro y un punto cualquierasituado so#re la circunferencia.


http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/images/new.gifhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/imagen2.htm#html2%23html2http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/imagen2.htm#html3%23html3http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/images/new.gifhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/imagen2.htm#html2%23html2http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/imagen2.htm#html3%23html3


35/63


3LV: polgono denido por un m'&imo de 99 -ectores: se da ladirecci>n de cada e&tremo del -ector.Ejemplo:

default ,omeWpage.,tml rect ,ttp:===.aramis.fr $ $O

poly ,ttp:===.port,os.fr 8$N 9$N O$ O$ O9$ 8$O circle ,ttp:===.at,os.fr $8 O$8Este c,ero se guardar' por ejemplo #ajo el nom#re de e>?mapa.map enun directorio del ser-idor cuyo nom#re podra ser map. 4ic,o c,ero notiene nada en comFn con un c,ero HTML. A continuaci>n se detallar'c>mo se -a a utili0ar para ,acer una imagen acti-a#le.La posi#ilidad de gestionar im'genes acti-a#les no se de#e a lafuncionalidad intrnseca del ser-idor 5e#. or tanto para poder efectuaresta operaci>n ,ay que ejecutar un programa especial$ imagemap. Esteprograma se encuentra disponi#le de modo est'ndar en la distri#uci>ndel demonio HTT4 proporcionado por 21SA y de#e ser instalado por el

administrador en la 0ona 1J6 del ser-idor.Hay que declarar el c,ero e>?mapa.map en un c,ero del ser-idor$imagemap.conf $ situado en la ra0 del ser-idor. Este c,ero es conocidopor el programa imagemap y contendr' lnea por lnea$ con un nom#resim#>lico$ la direcci>n de todos los c,eros que denen las im'genesacti-a#les del ser-idor. Se edita pues el c,ero imagemap.conf y se lea"ade una lnea donde se declara nuestro c,ero atri#uy!ndole unnom#re sim#>lico y dando su camino de acceso.E&tracto del c,ero imagemap.conf:

..... .....

ejWmapa: mapejWmap.mapLa operaci>n siguiente consiste en proponer el mapa acti-a#le en lap'gina HTML. La sint'&is general ser' la siguiente:

)A H/E;7cgiB#inimagemapnom#reWsim#>lico+ )6MJ S/17


36/63


La reali0aci>n de un mapa acti-a#le es muc,o m's sencilla con esteni-el de HTML$ porque todo est' descrito en el mismo c,ero y ya no senecesita un programa ser-idor e&terior (cgiB#in.Actualmente pocos #ro=sers son capaces de utili0ar mapas acti-a#lesde este tipo.

2etscape .9 en -ersi>n #eta permite esta funcionalidad.Aqu la imagen se dene con la marca


37/63


&ímbolos

Zor qu! ,ay que usar c>digos[E&isten di-ersos sistemas operati-os dentro del mundo de los

ordenadores. Estos sistemas no son otra cosa que unos programasespeciales que se ejecutan inmediatamente despu!s de encender elordenador$ y son los que se encargan de darle lo se usa para caracteresespeciales que se escri#en con un c>digo en lugar de pulsar la tecla quelo contiene directamente.or ejemplo$ nuestra denostada en medio mundo n y algunos otros. 4esde luego ,ay que codicar todas las letrasacentuadas$ e"es$ cedillas$ etc.$ etc.A continuaci>n se muestra una ta#la con todos los caracteres$ tam#i!nest'n las letras$ pero !stas s>lo le ser'n Ftiles en caso de necesitarescri#ir te&tos un tanto raros.1omo puede compro#ar$ la ta#la tiene una columna con el car'cterdeseado seguida de su c>digo num!rico$ una descripci>n del car'cter ydespu!s un nom#re corto (una especie de alias que para los m's


http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/simbolos.htm#tablasim%23tablasimhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/simbolos.htm#tablasim%23tablasim


38/63


,a#ituales se llegan a memori0ar$ y para cosas cortas$ ayudan. 2o todostienen ese nom#re corto$ y esos ,ay que escri#irlos con el c>digonum!rico.Jeneralmente$ se pueden escri#ir directamente desde teclado todos losque no tienen alias en la ta#la$ los que s tienen normalmente dar'n

pro#lemas en sistemas diferentes al que se ,a utili0ado para escri#ir eldocumento. Si tiene la seguridad de que lo que escri#e en HTML s>lo -aa ser utili0ado como c,eros locales en m'quinas similares a la suya$ noser' necesario complicarse la -ida@ pero si sus p'ginas -an a residir enun ser-idor 555$ cualquier tipo de m'quina podr' acceder a ellas$ y suaspecto no ser' el adecuado en algunas.E&isten multitud de editores especiales para escri#ir HTML$ y la mayorade ellos tienen ,erramientas para con-ertir de forma autom'tica loscaracteres especiales a su correspondiente c>digo. Tam#i!n ,aypaquetes de digo 4escripci>n Alias

G ?88@ 1errar e&clamaci>n BB

< ?8O@ 4o#les comillas BB

?8@ Signo de nFmero BB

^ ?8N@ 4>lar BB

X ?8Q@ Tanto por ciento BB

? ?8@ Ampersand BB

_ ?8]@ Ap>strofe BB( ?O9@ 1errar par!ntesis BB

?O@ A#rir par!ntesis BB

` ?O@ Asterisco BB

U ?O8@ Signo m's BB

$ ?OO@ 1oma BB

B ?O@ Jui>n BB

. ?ON@ unto BB

?OQ@ *arra de di-isi>n BB9 B ] ?O@ B ?Q@ 4gitos del al 9B] BB

: ?@ 4os puntos BB

@ ?]@ unto y coma BB

) ?N9@ Menor BB

) ?N9@ Menor ?lt@



39/63


7 ?N@ 6gual BB

+ ?N@ Mayor BB

+ ?N@ Mayor ?gt@

[ ?N8@ 1errar interrogaci>n BB

R ?NO@ Arro#a BBA B ?N@ B ?]9@ Letras AB BB

?]@ 1errar corc,ete (i0quierdo BB

b ?]@ *arra in-ersa BB

?]8@ A#rir corc,ete BB

?]O@ 1ircunYejo BB

W ?]@ Su#rayado BB

?]N@ Acento agudo BB

a B 0 ?]Q@ B ?@ Letras aB0 BB ?8@ A#rir lla-e BB

?O@ *arra -ertical BB

h ?@ 1errar lla-e BB

?N@ Tilde BB

?N9@ Espacio sin separaci>n ?n#sp@

?N@ A#rir e&clamaci>n ?ie&cl@

k ?N@ 1enta-o ?cent@

?N8@ Li#ra Esterlina ?pound@ ?NO@ Signo de di-isa general ?curren@

?N@ Ven ?yen@

?NN@ *arra -ertical partida (pipe ?#r-#ar@

?NQ@ Secci>n ?sect@

?N@ 4i!resis ?uml@

?N]@ 1opyrig,t ?copy@

?Q9@ 4o"a ?ordf@

?Q@ A#rir comillas francesas ?laquo@

?Q@ 2o (sm#olo l>gico ?not@

?Q8@ Jui>n d!#il ?s,y@

v ?QO@ /egistrado ?reg@

w ?Q@ Macr>n ?macr@

x ?QN@ Jrados ?deg@



40/63


?QQ@ M'sBmenos ?plusmn@

z ?Q@ 4os superndice ?sup@

{ ?Q]@ Tres superndice ?sup8@

| ?9@ Acento agudo ?acute@

} ?@ Micro ?micro@~ ?@ ;in de p'rrafo ?para@

• ?8@ unto medio ?middot@

€ ?O@ 1edilla ?cedil@

?@ %no superndice ?sup@

‚ ?N@ J!nero masculino ?ordm@

ƒ ?Q@ 1errar comillas francesas ?raquo@

„ ?@ %n cuarto ?fracO@

… ?]@ %n medio ?frac@† ?]9@ Tres cuartos ?frac8O@

Z ?]@ A#rir interrogaci>n ?iquest@

‡ ?]@ A mayFscula$ acento gra-e ?Agra-e@

ˆ ?]8@ A mayFscula$ acento agudo ?Aacute@

‰ ?]O@ A mayFscula$ acento circunYejo ?Acirc@

Š ?]@ A mayFscula$ tilde ?Atilde@

‹ ?]N@ A mayFscula$ di!resis ?Auml@

Œ ?]Q@ A mayFscula$ anillo ?Aring@ ?]@ AE mayFscula ?AElig@

Ž ?]]@ 1 cedilla mayFscula ?1cedil@

?99@ E mayFscula$ acento gra-e ?Egra-e@

?9@ E mayFscula$ acento agudo ?Eacute@

‘ ?9@ E mayFscula$ acento circunYejo ?Ecirc@

’ ?98@ E mayFscula$ di!resis ?Euml@

“ ?9O@ 6 mayFscula$ acento gra-e ?6gra-e@

” ?9@ 6 mayFscula$ acento agudo ?6acute@

?9N@ 6 mayFscula$ acento circunYejo ?6circ@

– ?9Q@ 6 mayFscula$ di!resis ?6uml@

— ?9@ Et, mayFscula ?ETH@

\ ?9]@ E"e mayFscula ?2tilde@

˜ ?9@ 3 mayFscula$ acento gra-e ?3gra-e@



41/63


™ ?@ 3 mayFscula$ acento agudo ?3acute@

š ?@ 3 mayFscula$ acento circunYejo ?3circ@

› ?8@ 3 mayFscula$ tilde ?3tilde@

œ ?O@ 3 mayFscula$ di!resis ?3uml@

?@ Signo de multiplicaci>n ?times@ž ?N@ 3 #arrada mayFscula ?3slas,@

Ÿ ?Q@ % mayFscula$ acento gra-e ?%gra-e@

?@ % mayFscula$ acento agudo ?%acute@

¡ ?]@ % mayFscula$ acento circunYejo ?%circ@

¢ ?9@ % mayFscula$ di!resis ?%uml@

£ ?@ V mayFscula$ acento agudo ?Vacute@

¤ ?@ TH3/2 mayFscula TH3/2

¥ ?8@ *eta minFscula ?s0lig@¦ ?O@ a minFscula$ acento gra-e ?agra-e@

' ?@ a minFscula$ acento agudo ?aacute@

§ ?N@ a minFscula$ acento circunYejo ?acirc@

¨ ?Q@ a minFscula$ tilde ?atilde@

© ?@ a minFscula$ di!resis ?auml@

ª ?]@ a minFscula$ anillo ?aring@

« ?89@ ae mnuscula ?aelig@

¬ ?8@ c cedilla minFscula ?ccedil@ ?8@ e minFscula$ acento gra-e ?egra-e@

! ?88@ e minFscula$ acento agudo ?eacute@

® ?8O@ e minFscula$ acento circunYejo ?ecirc@

¯ ?8@ e minFscula$ di!resis ?euml@

° ?8N@ i minFscula$ acento gra-e ?igra-e@

?8Q@ i minFscula$ acento agudo ?iacute@

± ?8@ i minFscula$ acento circunYejo ?icirc@

² ?8]@ i minFscula$ di!resis ?iuml@

³ ?O9@ et, minFscula ?et,@

" ?O@ e"e minFscula ?ntilde@

´ ?O@ o minFscula$ acento gra-e ?ogra-e@

> ?O8@ o minFscula$ acento agudo ?oacute@

µ ?OO@ o minFscula$ acento circunYejo ?ocirc@



42/63


¶ ?O@ o minFscula$ tilde ?otilde@

· ?ON@ o minFscula$ di!resis ?ouml@

¸ ?OQ@ Signo de di-isi>n ?di-ide@

¹ ?O@ o #arrada minFscula ?oslas,@

º ?O]@ u minFscula$ acento gra-e ?ugra-e@F ?9@ u minFscula$ acento agudo ?uacute@

» ?@ u minFscula$ acento circunYejo ?ucirc@

¼ ?@ u minFscula$ di!resis ?uuml@

½ ?8@ y minFscula$ acento agudo ?yacute@

¾ ?O@ t,orn minFscula ?t,orn@

¿ ?@ y minFscula$ di!resis ?yuml@



43/63


Hiperenlaces

El siguiente elemento es uno de los m's importantes del HTML$ ya quees el que realmente permite nde que se trata de un solo documento.Esto se consigue deniendo enlaces ,iperte&tuales del 5e# mediante elelemento y sus atri#utos: 2AME$ H/E; y TA/JET. El lector podr'por tanto e&plorar el documento picando con el rat>n so#re las 0onasacti-as denidas$ denominadas hipertexto. Estas 0onas acti-as puedencorresponder a un grupo de caracteres$ una imagen$ o #ien una porci>nde imagen. En cualquier caso el principio es el mismo: asociar a la 0onaacti-a la direcci>n %/L del documento que sustituir' al -isuali0adocuando se pulse con el rat>n so#re esa 0ona. (Der El protocolo dedireccionamiento de documentos: %/L%n puntero puede colocarse en cualquier lugar del te&to. uede ser unelemento de una lista$ o te&to normal@ puede estar enriquecido conatri#utos de estilo fsico$ l>gico o de p'rrafo. Sin em#argo$ no esnecesario darle un atri#uto para ,acerlo reconoci#le como tal: losenlaces acti-a#les se destacan autom'ticamente (color y su#rayado$siempre y cuando el usuario no realice una parametri0aci>n especial del#ro=ser.La denici>n por defecto del color de los enlaces de un documentopuede ser modicada mediante el elemento n. Este ancla sedene mediante el atri#uto 2AME.


http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/enlaces.htm#a%23ahttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/concepto.htm#urlhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/concepto.htm#urlhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/colores.htm#entornohttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/enlaces.htm#href%23hrefhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/enlaces.htm#href%23hrefhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/enlaces.htm#name%23namehttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/enlaces.htm#a%23ahttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/concepto.htm#urlhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/concepto.htm#urlhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/colores.htm#entornohttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/enlaces.htm#href%23hrefhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/enlaces.htm#href%23hrefhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/enlaces.htm#name%23name


44/63


!El elemento n dentro de dic,o documento a la que sequiere acceder:

)A H/E;7


45/63


Tam#i!n se pueden (o m's #ien se de#en usar direcciones relati-as:)A H/E;7nea y eldocumento no sera encontrado.Si se desea ir directamente a la home page (p'gina local de unser-idor$ el %/L se compondr' Fnicamente del nom#re del ser-idor.1omo puede compro#ar en el ejemplo anterior la direcci>n %/Lcomien0a con el nom#re del protocolo o tipo de ser-icio. En este caso setrata de httpB pero ,ay tam#i!n otros tipos de Ser-icios de 6nternet.

El atr'buto T!4ETEste atri#uto ordena la apertura de una nue-a -entana con eldocumento indicado por el atri#uto H/E;.Ejemplo:)A H/E;7 anteriormente. Luego se de#e indicar la direcci>n deldocumento destino y del punto de comien0o$ en el documento departida$ mediante el atri#uto H/E;. La sint'&is es:En el punto adecuado del documento destino:)A 2AME7


46/63


)A H/E;7n paraconinuar con la lectura.%na p'gina HTML puede ser muy larga$ por lo que mirar una anotaci>nde este tipo podra ser #astante tedioso$ por tanto la implementaci>n de

una anotaci>n a pie p'gina en una p'gina 5e# se ,ar' de la siguienteforma:En el te&to actual se coloca un ancla acti-a y pasi-a de la forma:... te&to )A H/E;7


47/63


Si despu!s de la direcci>n de la m'quina en lugar de un nom#re dec,ero se pone el de un directorio$ generalmente el ser-idor mostrar'un simple listado de los c,eros y directorios que !ste contenga.2o s>lo se puede crear un enlace so#re un te&to$ tam#i!n se puede,acer so#re una imagen cualquiera. Es decir$ despu!s del enlace y antes

de )A+ se puedes poner lo que se quiera.El arte de escri#ir #uen HTML reside en dar una #uena estructura a lainformaci>n. Siempre que se puedas ,ay que ,uir de crear p'ginas muylargas. Es preferi#le crear cuantas ,agan falta$ con #uena estructura yenl'0arlas con cuantos enlaces sean precisos.ara utili0ar direcciones a#solutas con c,eros locales se de#er'escri#ir: le:1M646/E1T3/63mic,ero.,tm

Ser-icios de 6nternetHTTEste es el protocolo del 5e#. Se utili0a para referenciar documentos

residentes en ser-idores 5e#.HTT:nom#reWdelWser-idordirectoriosu#directorioc,ero.,tmor ejemplo:

,ttp:ccdis.dis.ulpgc.es

Esto$ al omitir el nom#re del c,ero$ ,ar' referencia a la p'gina local(home page del ser-idor del 4epartamento de 6nform'tica y Sistemasde la %LJ1.;T3frece ser-icios para la trasferencia de c,eros. ermiten proponer la

copia$ en el ordenador local$ de un c,ero residente en el espacio de unser-idor 5e#.Se puede proponer el acceso a un Fnico c,ero del ser-idor o #ienproponer la totalidad de un directorio de ser-idor 5e#:Especicaci>n de un directorio:;T:nom#reWdelWser-idordirectoriosu#directorioor ejemplo:

ftp:sopa.dis.ulpgc.es

Especicaci>n de acceso directo a un c,ero:

;T:nom#reWdelWser-idordirectoriosu#directorioc,eroor ejemplo:

ftp:sopa.dis.ulpgc.espu#doca-isa

*astar' con pulsar so#re este ,iperte&to para pro-ocar la transferencia delc,ero a0isa.


http://ccdis.dis.ulpgc.es/ftp://sopa.dis.ulpgc.es/ftp://sopa.dis.ulpgc.es/pub/doc/avisahttp://ccdis.dis.ulpgc.es/ftp://sopa.dis.ulpgc.es/ftp://sopa.dis.ulpgc.es/pub/doc/avisa


48/63


2E5SLas ne7s son foros organi0ados en grandes 'm#itos de inter!s donde cada unopuede participar en la discusi>n en-iando y consultando artculos.En un ser-idor tem'tico puede ser interesante crear una p'gina HTML querecoja los grupos de ne=s en relaci>n con los temas del ser-idor.

Su especicaci>n es de la forma:2E5S:nom#reWdelWgrupoWdeWne=sor ejemplo:ne=s:ne=s.ulpgc.es

TEL2ETEste %/L es utili0ado para la cone&i>n entre ordendores. ermite o#tener ellan0amiento de una -entana TEL2ET que contendr' la in-itaci>n de conectarsea la m'quina especicada.Su especicaci>n es de la forma:

TEL2ET:nom#reWdeWlaWmaquinaor ejemplo:

telnet:sopa.dis.ulpgc.esJ3HE/Este %/L permite una cone&i>n a una sede gop,er.J3HE/:nom#reWdeWsedeor ejemplo:

gop,er:sopa.dis.ulpgc.esMA6LT3Este %/L no es soportado por todos los #ro=sers. 1uando se llama$ seproporciona al lector un cuadro de edici>n$ que le permite escri#ir correoelectr>nico y poner la direcci>n en un campo especicado indicando su

direcci>n electr>nica. Este correo se en-a a la direcci>n indicada en el %/L.MA6LT3:nom#reWdelWdestinatarioRsedeor ejemplo:

mailto:a]]Rcorreo.dis.ulpgc.es

;6LEara especicar direcciones a#solutas de c,eros locales se utili0ar' lasiguiente sint'&is:le:1directoriosu#directorionom#reWdelWc,ero.,tmSi se tra#aja con direcciones relati-as #astar' con especicar el pat, a partirdel directorio local. Hacer esto tiene la importante -entaja de no tener quecam#iar las direcciones cuando se produce un mo-imiento de c,eros.or ejemplo:indice.,tm


http://telnet//sopa.dis.ulpgc.es/http://gopher//sopa.dis.ulpgc.es/mailto:[email protected]://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/indice.htmhttp://telnet//sopa.dis.ulpgc.es/http://gopher//sopa.dis.ulpgc.es/mailto:[email protected]://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/indice.htm


49/63


rames

Los frames (en ingl!s frame 7 cuadro$ #astidor$ marco o panel es unelemento implementado por 2etscape$ que permite di-idir la pantalla en-arias 'reas independientes unas de otras$ y por tanto con contenidosdistintos$ aunque puedan estar relacionados. 1ada una de estas 0onases capa0 de mostrar c>digo HTML$ como en las celdas de una ta#la. Sinem#argo$ no ,ay que confundir paneles con ta#las ya que e&iste unagran diferencia@ en el caso de una ta#la$ todas las celdas forman partedel mismo documento HTML$ mientras que en el caso de los frames cada0ona de la pantalla es un documento HTML propio. Se -e pues$simult'neamente$ en la misma -entana de un #ro=ser$ la p'ginacorrespondiente a -arios c,eros.El concepto de frame elimina una de las limitaciones del 5e# ya que,asta a,ora$ cada nue-o documento destrua el anterior$ y o#liga#a alusuario a usar demasiado el comando !ack de los #ro=sers. A,ora esposi#le dedicar ciertas 0onas a tareas #ien denidas$ como por ejemplotener en una 0ona un menF que casi nunca ser' necesario recargar.La estructura general de un documento di-idido en -arios paneles dierede la de un documento cl'sico ya que en !stos el cuerpo se inserta enlas marcas


http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/frames/frames.htm#frameset%23framesethttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/frames/frames.htm#frame%23framehttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/frames/frames.htm#noframes%23noframeshttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/frames/frames.htm#target%23targethttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/frames/frames.htm#ejemplos%23ejemploshttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/frames/frames.htm#frameset%23framesethttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/frames/frames.htm#frame%23framehttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/frames/frames.htm#noframes%23noframeshttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/frames/frames.htm#target%23targethttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/frames/frames.htm#ejemplos%23ejemplos


50/63


!ME&ETEste elemento sustiye al elemento

ninguna 0ona toda-a$ las di-isiones se aplican a la 0ona inicial formadapor el conjunto de la -entana del #ro=ser. Esta marca posee dosatri#utos:

/35S: Se utili0a para di-idir la 0ona en su#0onas ,ori0ontales. Lasinta&is es:/35S7


51/63


MA/J62564TH7


52/63


nue-a -entana se considera como un panel con el atri#uto TA/JET delorigen de su creaci>n. TA/JET puede tomar uno de los siguientes cuatro -alores:

W#lanP$ indica al #ro=ser que de#e crear una nue-a -entana con el n demostrar el documento. La nue-a -entana es un panel que no tiene

nom#re y no puede ser por tanto el destino de otro enlace de ,iperte&to. Wself$ indica que el documento se cargar' en la misma 0ona donde seencuentra el enlace de ,iperte&to. Se trata del -alor predeterminadocuando no se indica el atri#uto TA/JET. Wtop$ indica al #ro=ser que suprima todos los paneles e&istentes y-isualice el documento de modo normal. Wparent$ indica al #ro=ser que -isualice el documento ocupando toda lasupercie de la 0ona en la que se ,a -isuali0ado el documento quecontiene el enlace. Esta noci>n solo tiene sentido cuando los diferentesni-eles de paneles pro-ienen del anidamiento de documentos y no delanidamiento de marcas n se e&pondr'n algunos ejemplos para que queden clarostodos los conceptos aprendidos.

A continuaci>n se detallan un conjunto de ejemplos que crean frames dedi-ersos tipos:. Sinta&is general. Areas -erticales. ($#L,8. Areas ,ori0ontales. (#8,O. Areas -erticales y ,ori0ontales com#inadas. ($#L, y #8,. M'rgenes for0ados. (M+G)-8)(TH y M+G)-HE)GHT

N. /eferencias cru0adas

%n frame #'sico. Sinta&is generalEn general$ todas las p'ginas que contengan un frame de#er'n ser m'so menos as:)HTML+)HEA4+)T6TLE+ Mi titulo +)T6TLE+)HEA4+

);/AMESET 13LS7`$`+ )23;/AMES+ )*34V+

Su -isuali0ador no soporta frames. ulse)A H/E;7


53/63


);/AMESET+

)HTML+Ejemplo real

%n frame de 8 'reas -erticales (13LSSe -era as:

A * 1

V se escri#ira@ as:);/AMESET13LS789X$9X$9X+ );/AME S/17


54/63


Ejemplo real

%n frame con dos 'reas -erticales. %na normal$ la otra con m'rgenesfor0ados para el te&to (MA/J62564TH MA/J62HE6JHTSe -era as:

AAAA AAAA

V se escri#ira as:);/AMESET13LS79X$9X+ );/AME S/17


55/63


2AME7


56/63


ormular'os

Los formularios generan en la pantalla cuadros de di'logo con el lectorpermitiendo as la interacci>n con el usuario para consultas de #ases dedatos$ solicitudes de documentaci>n$ ...1omo en un formulario en papel$ se podr'n tener 0onas en las que seintroducir' un te&to$ casillas de -ericaci>n$ listas de selecci>n$ etc... Elusuario rellenar' estas 0onas en su formulario las cuales se identicancon un nom#re sim#>lico. 1uando el formulario se en-a al programaque lo -a a tratar$ !ste reci#e el identicador de cada 0ona y el -alorintroducido. A dic,os programas se les suele denominar scripts$ y se ,ande ejecutar en un espacio del ser-idor reser-ado a este efecto: el 1J6 o$ommon Gate7a5 )nterface.El tratamiento de los datos reci#idos en el ser-idor desde los formulariosrequiere conocer la ta#la de con-ersi>n ,e&adecimal que utili0an lamayora de los -isuali0adores. 4entro de un mismo par'metro laspala#ras aparecer'n$ en el destino$ separadas por el signo U$ y lospar'metros entre s por el sm#olo?. Las letras acentuadas y otroscaracteres especiales ser'n -alores ,e&adecimales precedidos delsm#olo X$ como se muestran en la ta#la de c>digos ,e&adecimales del2etscape para 5indo=s .ara la creaci>n de formularios se utili0ar'n las siguientes marcas$ quepermiten generar una interfa0 de edici>n$ sin ,acer referencia aFn a laprogramaci>n de scripts de 1J6:la marca /#M que delimita el comien0o y n de la denici>n delformulario.la marca )-P'T que permite crear diferentes tipos de entradas: camposde edici>n y di-ersos tipos de #otones@la marca ,ELE$T que permite crear listas: menFs despega#les y listascon #arras de despla0amiento@la marca TECT+E+ que genera una 0ona de edici>n de te&to li#re.

!tr'butos comunesLos siguientes atri#utos son comunes a las marcas que se denen eneste apartado para generar formularios:


http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/formtab.htmhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/formtab.htmhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/forms.htm#form%23formhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/forms.htm#input%23inputhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/forms.htm#select%23selecthttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/forms.htm#textarea%23textareahttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/formtab.htmhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/formtab.htmhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/forms.htm#form%23formhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/forms.htm#input%23inputhttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/forms.htm#select%23selecthttp://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/forms.htm#textarea%23textarea


57/63


58/63


1omo se puede o#ser-ar en este ejemplo$ el nFmero m'&imo decaracteres puede ser mayor que el tama"o de la -entana y -ice-ersa.

El atri#uto TVE asociado a la marca 62%T permite la selecci>n delelemento de entrada. uede tomar los siguientes -alores: TET: es la opci>n seleccionada por defecto. 4ene una 0ona de entrada

de te&to simple. El te&to denido en DAL%E aparecer' en dic,a 0ona$para poder ser completado o modicado por el usuario.rincipio del formulario

;inal del formulario

)form+)input type7


59/63


)input type7n. Lo que el formato en-a al ser-idor es un registro cuyos camposson el nom#re denido para la imagen seguido de los par'metros .&7n y

.y7m donde n y m son los nFmeros de las coordenadas &$y del punto enel que esta#a el rat>n en el momento del en-o. ara representar laimagen se utili0a el atri#uto S/1 del elemento 6MJ. or ejemplo:

)form met,od7


60/63


;inal del formulario

)option+1UU)option+1liper)option+ascal)option+;ortran)option+1o#ol

)select+)form+La longitud de la -entana de selecci>n se autoajusta al -alor m's largode la lista. Se de#e de procurar que los contenidos de los campos seanlo m's cortos posi#les@ una e&cesi-a longitud implica mayor tr'co porla red$ pero se de#en contruir las listas de forma clara$ y que resulten def'cil lectura al usuario$ lo que puede aumentar la longitud de los -alores.ara sol-entar este dilema se utili0a el par'metro DAL%E asociado alatri#uto 3T632$ el cual permite en-iar un -alor diferente al que apareceen la lista.Ejemplo:

A continuaci>n se muestra una lista contenida en una -entana con#arras de despla0amiento.rincipio del formulario

;inal del formulario)form+)select name7


61/63


62/63


);3/M A1T6327


63/63

manual extenxo html

Documents