COLEGIO POPULAR PARTICULAR A DISTANCIA

MIGUEL DE CERVANTES

3ER. AO DE BACHILLERATO EN: INFORMTICA

MDULO: DISEO DE PGINAS WEB: HTML

TUTOR: ING. LUPE VILLACS

2 !!

INTRODUCCIN

HTML es un lenguaje de programacin que se utiliza para la creacin de pginas en la WWW. Por pgina entenderemos el documento que aparece en el visualizador. HTML se compone de una serie de comandos, que son interpretados por el visualizador, o programa que utilizamos para navegar por el WWW. En ltima instancia es el visualizador el que ejecuta todas las rdenes contenidas en el cdigo HTML, de !orma que un visualizador puede estar capacitado para unas prestaciones, pero no para otras. "s#, podremos especi!icar que una pgina tenga una imagen de !ondo, o un te$to parpadeando, pero si nuestro visualizador no est capacitado para esas !unciones, no podremos compro%arlas.

&

GENERALIDADES
HTML 2. 'uando se produjo la e$plosin de (nternet el estndar de HTML que circula%a era el ).* +esta%lecido en noviem%re del ,-., de modo que cualquier navegador que encontremos ser capaz de interpretarlo. Prcticamente todo lo que veamos en los pr$imos seis cap#tulos est contemplado por este estndar. HTML 3. " 3.2 "unque la versin ).* cumpl#a %ien el o%jetivo para el que se cre, carec#a de /erramientas para tener un control m#nimamente complejo de los documentos. 0o se consider necesario que lo tuviera, 1a que por aquel entonces (nternet era un !enmeno ms %ien circunscrito a la actividad acad2mica 1 el contenido prima%a so%re el dise3o. 4e%ido a ello, 0etscape +l#der del mercado de navegadores por aquel entonces. empez a incluir etiquetas nuevas no incluidas en ning n estndar. Por estos pro%lemas, el (ET5 +el comit2 que suele decidir todos los estndares dentro de (nternet. comenz a ela%orar el %orrador del HTML &.*, que result ser demasiado grande para la 2poca, lo que di!icult su aceptacin en el mercado. Esto llev a una serie de compa3#as +entre ellas 0etscape, Microso!t, (6M, 7un, etc.... a crear un nuevo comit2 llamado W&', que es el que actualmente ela%ora las nuevas versiones del HTML. 7u primer tra%ajo consisti en crear el %orrador del HTML &.), que inclu#a muc/as de las mejoras que los principales navegadores +0etscape 1 E$plorer. /a%#an introducido en (nternet, como son las ta%las, los applets, etc.. Este %orrador !ue apro%ado en enero de 8,,9 e inmediatamente el W&' se puso a tra%ajar en la ela%oracin del siguiente estndar: el ;.*. HTML #. En julio de 8,,9 se presenta el %orrador de este estndar. Por !in se estandarizan los marcos +frames., las /ojas de estilo 1 los scripts +entre otras cosas.. El 89 de diciem%re de 8,,9 dic/o %orrador !ue !inalmente apro%ado.

OB$ETIVOS DEL MODULO

Presentar al estudiante una visin general de la estructura de una Pgina We%. Estudiar la !orma como se crean Pginas We%. Estudiar el lenguaje HTML. 'rear Pginas We% sencillas.

PRE %TEST
!. D&'()*+, -.' /,0&1,2.)&' 34& (./.(&. <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 2. 546 &' &- F)./7 P,1&8 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 3. 54& '*1/*9*(, HTML8 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< #. 546 &' 4/, P:1*/, W&+8 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< ;. E<=-*34& ,(&)(, 2& -, 47*-*>,(*?/ 2& F),@&'. <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

INDICE
(0T>?4@''(A0....................................................................................................................& BE0E>"L(4"4E7.................................................................................................................; ?6CET(D?7 4EL M?4@L?..................................................................................................(04('E.....................................................................................................................................9 @0(4"4 (.................................................................................................................................E ?6CET(D?7.............................................................................................................................E 4E7">>?LL?. ......................................................................................................................E Mi Primera Pgina....................................................................................................................., T">E" ..................................................................................................................................88 @0(4"4 ((.............................................................................................................................8) ?6CET(D?7...........................................................................................................................8) 4E7">>?LL?. ....................................................................................................................8) 5?>M"TE? 6"7('?...........................................................................................................8) 'a%ecera de nivel 8.................................................................................................................8& 'a%ecera de nivel ).............................................................................................................8& 5?>M"TE? 5(0?................................................................................................................8Tarea. ......................................................................................................................................89 @0(4"4 (((............................................................................................................................8E ?6CET(D?7...........................................................................................................................8E 4E7">>?LL?. ....................................................................................................................8E T"6L"7.................................................................................................................................8E (M"BE0E7............................................................................................................................)8 H(PE>D(0'@L?7.................................................................................................................)& 'onclusiones...........................................................................................................................)E >ecomendaciones....................................................................................................................)E P"B(0"7 WE6 "5(0E7.......................................................................................................)E

UNIDAD I
TEMA: (ntroduccin al HTML OB$ETIVOS
4escri%ir de manera general el HTML. 'onocer la estructura de una Pgina We% en su cdigo 5uente.

DESARROLLO. E'7)4(74), 2& 4/ D.(4@&/7. HTML

Es recomenda%le que todo !ic/ero HTML siga la siguiente estructura: FHTMLG FT(TLEGT#tulo de la ventanaFHT(TLEG F6?4IG ......comandos 1 te$to...... FH%od1G FHHTMLG 'omo puedes compro%ar, estos comandos tienen una orden de inicio 1 otra de !in, que no es ms que el mismo comando con el signo H antecedi2ndolo. Los comandos pueden figurar en letras maysculas o en minsculas, indistintamente. La secuencia lgica de estas rdenes es la siguiente:

(nicio de un documento HTML (nicio del t#tulo. T#tulo +que conviene poner para identi!icar la pgina de cara al visitante.. 5inal del t#tulo. (nicio del cuerpo de la pgina, esto es, de aquello que queremos visualizar. 5in del cuerpo de la pgina. 5in del documento HTML.

M* P)*@&), P:1*/,
La manera ms sencilla de crear un documento HTML es utilizando el 6loc de notas de WindoJs, 1 guardndolo con la e$tensin HTML, de la siguiente manera:

I luego guardarlo de la siguiente manera:

Esta es una manera sencilla de /acerlo. 'a%e anotar que e$isten aplicaciones especiales para el desarrollo de pginas, como el 5ront Page. " continuacin empezamos a escri%ir nuestra primera pgina: =)*@&),.A7@FHTMLG ,

FHE"4G FT(TLEGMi primera paginaFHT(TLEG FHHE"4G F6?4IG F'E0TE>GFH8GMi Primera paginaFHH8GFH'E0TE>G FH>G FPGEsta es mi primera pagina +c/ispas.. Por el momento no se que tendr, pero dentro de poco pondr2 aqu# muc/as cosas interesantes. FH6?4IG FHHTMLG L, &<=-*(,(*?/ Lo primero que conviene e$plicar es en qu2 consisten todos esos s#m%olos de ma1or 1 menor que estn distri%uidos por a/#. El lenguaje HTML se %asa en la sinta$is 7BML +toma siglas.. Esto quiere decir que cualquier cosa que /agamos en HTML estar encerrada entre dos etiquetas de esta manera: FET(K@ET" parmetrosG ... FHET(K@ET"G Ha1 ocasiones en que no es necesario cerrar la etiqueta. Mirando el cdigo /a%r2is visto un par de ejemplo que 1a e$plicar2 ms adelante. Pero como lo primero que de%emos indicar es que el te$to que estamos componiendo es un documento HTML pues lo indicamos as#: FHTMLG ... FHHTMLG @n documento HTML tiene una estructura que lo separa en dos partes: cuerpo 1 ca%ecera. En la primera estar la pgina en s#, mientras que en la segunda incluiremos algunas cosas que no se ven al principio pero que pueden llegar a ser mu1 importantes. Lo primero que /a1 que incluir en el cdigo es la ca%ecera. La escri%imos: FHE"4G FT(TLEGMi primera paginaFHT(TLEG FHHE"4G

8*

4entro de la ca%ecera slo /a1 otra etiqueta. Es la nica imprescindi%le: el t#tulo de la pgina. Es lo que veremos como t#tulo de la ventana en los navegadores que lo permitan. Es como se conocer nuestra pgina en algunos %uscadores 1 en la agenda de direcciones +bookmarks. de los usuarios. Por tanto, parece importante pensarnos %ien como llamarla. E- (4&)=. 2&- 2.(4@&/7. "/ora vamos a indicar el contenido. Lo primero ser indicar que estamos en el cuerpo del documento: F6?4IG ... FH6?4IG Luego pondremos el t#tulo algo recalcado: F'E0TE>GFH8G ... FHH8GFH'E0TE>G 'on esto colocaremos el te$to centrado +F'E0TE>G. 1 en !ormato FH8G +ca%ecera 8. que nos asegura que aumentar el tama3o del tipo de letra lo su!iciente como para que se vea %astante resaltado. Luego separamos ese t#tulo que le /emos puesto a la pgina del te$to por medio de una l#nea /orizontal: FH>G La l#nea /orizontal carece de etiqueta de cierre. Esto es normal en etiquetas que no var#an los atri%utos de un te$to, sino que insertan un elemento. Por ejemplo, para indicarle que queremos separar el te$to de la l#nea /orizontal con un espacio vertical correspondiente a un prra!o nuevo le decimos: FPGEsta es mi primera pagina +c/ispas.. Por el momento no s2 que tendr, pero dentro de poco pondr2 aqu# muc/as cosas interesantes. En el siguiente cap#tulo veremos muc/as etiquetas que nos permitirn cam%iar el aspecto de nuestros te$tos.

TAREA

88

>ealice una Pgina We% mu1 sencilla en la que descri%a las razones por las cuales usted est estudiando en la @0E47", utilizando la estructura del ejercicio de ejemplo revisado en la unidad.

UNIDAD II
TEMA: 5ormateo de Pginas OB$ETIVOS
Presentar la !orma de realizacin de !ormateo de una pgina We%

DESARROLLO.
FORMATEO BASICO

7e pueden esta%lecer varias categor#as dentro de las etiquetas usadas para !ormatear el te$to. 0osotros las dividiremos entre aquellas que sirven para cam%iar prra!os enteros 1 las que son capaces de !ormatear tiras de caracteres dentro del prra!o. F.)@,7. 2&- =:)),9. Estas son las etiquetas ms importantes +e$clu1endo algunas que veremos ms adelante.:
E7*34&7, FPG F'E0TE>G FH'E0TE>G FP>E W(4THL$G FHP>EG F4(D "L(B0L$G FH4(DG ... U7*-*2,2 R&'4-7,2.

7irve para delimitar un prra!o. (nserta una l#nea en %lanco antes del te$to. 7o1 un prra!o Permite centrar todo el te$to del prra!o. Io so1 normal Io esto1 centrado

>epresenta el te$to encerrado en ella con un tipo de letra de paso !ijo. Mu1 til a la /ora de ... representar cdigo !uente. El parmetro W(4TH Esto1 en paso !ijo especi!ica el n mero m$imo de caracteres en una l#nea. ... Permite justi!icar el te$to del prra!o a la Io esto1 a la izquierda izquierda +"L(B0LLE5T., derec/a +>(BHT., al Io al centro centro +'E0TE>. o a am%os mrgenes I 1o a la derec/a +recuerda +C@7T(5I. a la pol#tica esto, o1e. Io so1 el ms c/ulo,

8)

porque esto1 en todos los lados. F"44>E77G FH"44>E77G F6L?'MK@?TEG FH6L?'MK@?TEG Daniel Rodrguez Herrera ... Para escri%ir direcciones +de esas donde vive la C/Ecuador , !"# gente, no electrnicas.. $%$$& 'a(ada)onda ... Me gustar#a reencarnarme Para citar un te$to ajeno. 7e suele implementar en las 1emas de los dedos dejando mrgenes tanto a izquierda como a de Warren 6eatt1 +Wood1 derec/a, razn por la que se usa /a%itualmente. "llen.

L,' B (,+&(&),' El HTML nos o!rece seis etiquetas distintas para mostrar ca%eceras. 7on 2stas: E7*34&7, R&'4-7,2.

FH8G ... FHH8G C,+&(&), 2& /*0&- ! FH)G ... FHH)G C,+&(&), 2& /*0&- 2

FH&G ... FHH&G C,+&(&), 2& /*0&- 3 FH;G ... FHH;G C,+&(&), 2& /*0&- # FH-G ... FHH-G Cabecera de nivel 5 FH=G ... FHH=G C,+&(&), 2& /*0&- B Estas etiquetas se pueden de!inir como de !ormato de prra!o pero por su importancia /e pre!irido tratarlas aparte. 0o resulta recomenda%le utilizarlas para aumentar o disminuir el tama3o del tipo de letra, 1a que cada navegador los muestra de manera di!erente. 7e usan para dividir correctamente en secciones nuestra pgina, tal 1 como se /ace en un documento de te$to normal. C,@+*,/2. &- 7*=. 2& -&7), Todas estas etiquetas nos permiten cam%iar de una manera u otra el aspecto del tipo de letra que estemos utilizando 1 se pueden utilizar con tiras de caracteres dentro de un prra!o.
E7*34&7, F6G ... FH6G U7*-*2,2 Pone el te$to en negrita. R&'4-7,2. S." 4/ 7&<7. /&1).

8&

(.@. &- 7*>?/ F(G ... FH(G F@G ... FH@G >epresenta cursiva. el te$to en Estoy ladeado 'omo so1 importante su%ra1ado mu1 esto1

Para su%ra1ar algo.

F7G ... FH7GFimagenenlinea direccionLNgra!icosH&).gi!N Para tac/ar. descripcionLNHTML &.)NHG FTTG ... FHTTG F7@PG ... FH7@PG F7@6G ... FH7@6G F6(BG ... FH6(BG F7M"LLG ... FH7M"LLG F6L(0MG ... FH6L(0MG

" m#, en cam%io, nadie me quiere

Permite representar el te$to en un tipo de letra de paso 0o so1 varia%le !ijo. Letra super#ndice. Letra su%#ndice. ELmc) ai,jL%i,jO8

(ncrementa el tama3o del 7o1 B>"04E tipo de letra. 4isminu1e el tama3o del tipo 're# ver un lindo gatito de letra. Hace parpadear el te$to. PMolestoQ >esulta algo irritante.

F.)@,7. 2& 9),'& En estos elementos indicas el tipo de in!ormacin que encierran las etiquetas, pero no como se representan:
E7*34&7, F'(TEG ... FH'(TEG F'?4EG ... FH'?4EG F7T>?0BG FH7T>?0BG FEMG ... FHEMG FM64G ... FHM64G FD">G ... FHD">G F7"MPG ... FH7"MPG F"66>G ... FH"66>G ... U7*-*2,2 Para citar un te$to ajeno. Para escri%ir cdigo !uente. La cosa es importante. Para dar 2n!asis. Te$to tecleado por el usuario. >epresentar varia%les de un cdigo. R&'4-7,2. Esta frase no es ma int $L*R Ha1 cosas *@=.)7,/7&'. Ha1 que poner *nfasis en algunas cosas. El usuario de%e teclear Multivac es el mejor. La varia%le anteriormente... +, de!inida

Para representar una serie de caracteres Esto1 en un literal literalmente. "%reviaturas. La WWW usa el protocolo /ttp

0o son mu1 utilizados, 1a que no permiten tener un control e$acto de la manera en que la pgina se representar !inalmente.

8;

O7).' &-&@&/7.' Por ltimo, de%emos estudiar algunas cosas que no son te$to 1 que podemos incorporar a nuestra pgina.
E7*34&7, U7*-*2,2 FH>G F6>G (nserta una %arra /orizontal. 7alto de l#nea. Ha1 un antes 1 un despu2s de saltar a otra l#nea Esto se escri%e 1 R&'4-7,2.

FSTT ... TTG 'omentarios.

FORMATEO FINO Lo ideal cuando tra%ajas con te$to ser#a poder cam%iarlo al tama3o que te viniese %ien, ponerlo de colorines 1 cam%iar el tipo de letra. Todo esto puedes /acerlo gracias a la etiqueta F5?0TG. C,@+*. 2& (.-.) Para /acerlo vamos a utilizar el parmetro '?L?>. La manera de especi!icarle el color es com n a todas las etiquetas HTML: o %ien indicando el nom%re, si es un color normal, o %ien especi!icando el porcentaje de rojo, verde 1 azul +cdigo >B6. del mismo. Los colores reconocidos son los siguientes:
Black Silver Gray White Maroon Red Purple Fuchsia Green Lime Olive Yellow Navy Blue eal !"ua

F5?0T colorLNredNGEsto1 en rojoFH5?0TG El modo de indicar el color >B6 es el siguiente: F5?0T '?L?>LNU55****NG4FH5?0TG F5?0T '?L?>LNUE5****NGEFH5?0TG F5?0T '?L?>LNU45****NGBFH5?0TG F5?0T '?L?>LNU'5****NG>FH5?0TG 8-

F5?0T '?L?>LNU65****NG"FH5?0TG F5?0T '?L?>LNU"5****NG4FH5?0TG F5?0T '?L?>LNU,5****NG"FH5?0TG F5?0T '?L?>LNUE5****NG4FH5?0TG F5?0T '?L?>LNU95****NG?FH5?0TG Lo que nos mostrar#a lo siguiente: 4EB>"4"4? La primera componente en /e$adecimal es el rojo, la segunda el verde 1 la tercera el azul +>ed Breen 6lue, >B6.. T,@,C.' 2&- 7&<7. El parmetro utilizado para indicar el tama3o es 7(VE. Puede utilizarse para indicar tama3os a%solutos: S#$%&*(S#$%&+(S#$%&,(

S#$%&'(S#$%&)(

S#$%&-(

S#$%&.
el tipo de letra dos veces ms peque3o.

El tama3o por de!ecto es &. Tam%i2n se puede utilizar los modi!icadores O 1 T para indicar un incremento +o decremento. relativo del tama3o del tipo de letra. "s#, por ejemplo, si indicamos que queremos un tama3o de T) estaremos pidiendo al navegador que nos muestre

F5?0T 7(VEL)GF!ont sizeLN)NGTama3o )FH!ontGF5?0T 7(VELNO&NG F!ont sizeLN)NGF!ont sizeLNO&NGTama3o =FH!ontGFH!ontGFH5?0TGFH5?0TG T*=. 2& -&7), Por ltimo, podemos especi!icar el nom%re del tipo de letra que queremos utilizar gracias al parmetro 5"'E. 'omo en principio no tenemos manera de sa%er que tipo de letra tiene instalado el ordenador del usuario que est viendo nuestras pginas, podemos indicar ms de

8=

uno separado por comas. 7i el navegador no encuentra ninguno seguir utilizando el que tiene por de!ecto: F5?0T 5"'ELNHelvetica,"rial,TimesNGF!ont !aceLNHelvetica,"rial,TimesNG0o s2 como vo1 a salir e$actamenteFH!ontGFH5?0TG 4e todos modos es recomenda%le no utilizar con !e ciega este atri%uto en (nternet, 1a que impide que todos puedan ver nuestras pginas como nosotros. E (nternet, siempre que nos lo permitan Microso!t 1 0etscape, de%e ser lo ms estndar posi%le.

T,)&,.
>ealice una Pgina We% que presente los comentarios acerca de su curso, utilizando el !ormateo estudiado en la unidad.

89

UNIDAD III TEMA: Hiperv#nculos, (mgenes 1 Ta%las OB$ETIVOS

Estudiar la creacin de Ta%las en HTML Estudiar la insercin de (mgenes en HTML Estudiar la creacin de Hiperv#nculos en HTML.

DESARROLLO.
TABLAS.

Las ta%las son posi%lemente la manera ms clara de organizar la in!ormacin. Tam%i2n es el modo ms adecuado de maquetar te$to 1 gr!icos de una manera algo ms controlada que con los parmetros "L(B0. Las ta%las se de!inen de la siguiente manera. Primero, las caracter#sticas de la ta%la, luego las de cada !ila 1 dentro de 2sta, cada celda. "s# pues, una ta%la con ) !ilas 1 & columnas se declarar as#: FT"6LEG FT>G FT4G8,8FHT4G FT4G8,)FHT4G FT4G8,&FHT4G FHT>G FT>G FT4G),8FHT4G FT4G),)FHT4G FT4G),&FHT4G FHT>G FHT"6LEG 8,8 8,) 8,& ),8 ),) ),&

8E

'omo pod2is ver +o mejor no ver. la ta%la no tiene muc/o aspecto de ta%la. Kuedar#a mejor con unos %ordes, PnoQ Puede que tampoco le viniese mal ma1or espacio entre celdas o ma1or anc/ura. Estas son las cosas que podremos cam%iar con los atri%utos de T"6LE: Especi!ica el grosor del %orde que se di%ujar alrededor de las celdas. Por de!ecto es cero, lo que signi!ica que no di%ujar %orde alguno. Especi!ica el n mero de pi$els que /a%r entre el %orde de una celda 1 su contenido. Especi!ica la anc/ura de la ta%la. Puede estar tanto en pi$els como en W(4TH "L(B0 porcentaje de la anc/ura total disponi%le para 2l +pondremos N8**WN si queremos que ocupe todo el anc/o de la ventana del navegador.. "linea la ta%la a izquierda +LE5T., derec/a +>(BHT. o centro +'E0TE>..

6?>4E>

'ELL7P"'(0B 4e!ine el n mero de pi$els que separarn las celdas. 'ELLP"44(0B

7i a/ora, por ejemplo de!inimos a/ora la ta%la anterior como FT"6LE 6?>4E>L8 W(4THLN-*WN "L(B0L'E0TE>G veremos lo siguiente: 8,8 ),8 D&9*/*) -,' 9*-,' "/ora que /emos de!inido la ta%la nos toca /acer lo mismo con las !ilas. 'ada !ila se de!ine con una etiqueta T>, que tiene los siguientes atri%utos: "linea el contenido de las celdas de la !ila /orizontalmente a izquierda +LE5T., derec/a +>(BHT. o centro +'E0TE>.. "linea el contenido de las celdas de la !ila verticalmente arri%a +T?P., a%ajo +6?TT?M. o centro +M(44LE.. 8,) ),) 8,& ),&

"L(B0 D"L(B0

D&9*/*) -,' (&-2,'

8,

Por ltimo, nos queda de!inir cada celda gracias a la etiquetas T4 1 TH. Estas etiquetas son equivalentes, pero la ltima se utiliza para enca%ezados, de modo que su interior se escri%ir por de!ecto en negrita 1 centrado. Estos son los atri%utos de am%as: "linea el contenido de la celda /orizontalmente a izquierda +LE5T., derec/a +>(BHT. o centro +'E0TE>.. "linea el contenido de la celda verticalmente arri%a +T?P., a%ajo +6?TT?M. o centro +M(44LE.. Especi!ica la anc/ura de la celda. Tam%i2n se puede especi!icar tanto en pi$els W(4TH 0?W>"P como en porcentaje, teniendo en cuenta que, en este ltimo caso, ser un porcentaje respecto al anc/o total de la ta%la +no de la ventana del navegador.. (mpide que, en el interior de la celda, se rompa la l#nea en un espacio. Especi!ica el n mero de celdas de la !ila situadas a la derec/a de la actual que se '?L7P"0 unen a 2sta +inclu1endo la celda en que se declara este parmetro.. Es por de!ecto uno. 7i se pone igual a cero, se unirn todas las celdas que queden a la derec/a. >?W7P"0 Especi!ica el n mero de celdas de la columna situadas de%ajo de la actual que se unen a 2sta.

"L(B0 D"L(B0

Posi%lemente los dos ltimos parmetros no puedan quedar claros sin ejemplos. 4e /ec/o, a n entendiendo per!ectamente su !uncin es /a%itual que con!undamos a uno con otro. Pero %ueno, vamos a ver una ta%la de &$& con una celda que se une a una de la derec/a 1 otra que se une a otra de de%ajo: FT"6LE 6?>4E>L8G FT>G FT4 '?L7P"0L)G8,8 1 8,)FHT4G FT4G8,&FHT4G FHT>G FT>G FT4 >?W7P"0L)G),8 1 &,8FHT4G FT4G),)FHT4G FT4G),&FHT4G FHT>G FT>G )* 8,8 1 8,) ),8 1 &,8 8,& ),) ),& &,) &,&

FT4G&,)FHT4G FT4G&,&FHT4G FHT>G FHT"6LEG 'omo podemos ver, cuando declaramos un celda con >?W7P"0 o '?L7P"0, no de%eremos declarar las celdas Na%sor%idasN o la creacin de la ta%la se nos complicar de /orri%le manera. TD74-. 2& -, 7,+-, Por ltimo, vamos a ver como de!inir un t#tulo a la ta%la. Esto se /ace por medio de la etiqueta '"PT(?0. Para ver cmo !unciona, vamos a incluirlo en la declaracin de la ta%la anterior: FT"6LE 6?>4E>L8G F'"PT(?0G Ejemplo de ta%las FH'"PT(?0G ... FHT"6LEG Esta etiqueta admite slo un parmetro: "L(B0, que es por de!ecto T?P. 7i lo de!inimos como 6?TT?M el t#tulo se colocar al !inal de la ta%la en lugar del comienzo. (M"BE0E7 Para incluir gr!icos e imgenes en nuestras pginas utilizaremos la etiqueta F(MBG de esta manera: F(MB 7>'LN!ic/eroXgra!icoN "LTLNdescripcionNG El parmetro 7>' especi!ica el nom%re del !ic/ero que contiene el gr!ico. Los !ormatos estndar en la red son el B(5 1 el CPB. La ltimas versiones de 0etscape 1 E$plorer aceptan tam%i2n el !ormato P0B. Ejemplo de ta%las 8,8 1 8,) ),8 1 &,8 8,& ),) ),& &,) &,&

)8

El parmetro "LT especi!ica el te$to que se mostrar en lugar del gr!ico en aquellos navegadores que no sean capaces de mostrarlos +como el L1n$. 1 en el supuesto de que el usuario los /a1a desactivado. "lgunos navegadores lo muestran cuando pasamos el ratn por encima de la imagen. Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo siempre. 4e /ec/o, el estdar HTML ;.* o%liga a /acerlo. E$isten dos atri%utos que, aunque opcionales, conviene indicar siempre: la altura 1 la anc/ura del gr!ico en pi$els. 4e este modo, el navegador puede mostrar un recuadro del tama3o de la imagen mientras la va le1endo de la red 1 as# poder mostrar el resto de la pgina correctamente mientras tanto. F(MB 7>'LNgra!icosHdJnldns.gi!N "LTLN0etscape ;.*N W(4THLEE

HE(BHTL&8G 7e ve as#:

Para los menos avezados en ingl2s, decir que W(4TH es la anc/ura 1 HE(BHT la altura. I@:1&/&' " &/-,(&' 7uele ser com n incluir enlaces dentro de un gr!ico. En ese caso, por de!ecto, los navegadores le pondrn un %orde al gr!ico para indicar que e!ectivamente es un enlace. Prctico, pero la ma1or#a de las veces %astante poco est2tico. Por medio del parmetro 6?>4E> podremos alterar el grosor de ese %orde o incluso eliminarlo poniendolo a cero. F" H>E5LN/ttp:HHJJJ.netscape.comNG F(MB HE(BHTL&8G FH"G 7e ve as#: 7>'LNgra!icosHdJnldns.gi!N "LTLN0etscape ;.*N W(4THLEE

))

7in em%argo, F" H>E5LN/ttp:HHJJJ.netscape.comNG F(MB 7>'LNgra!icosHdJnldns.gi!N "LTLN0etscape ;.*N W(4THLEE HE(BHTL&8 FrojoG6?>4E>L*FHrojoGG FH"G 7e ve as#:

A-*/&,(*?/ )&'=&(7. ,- 7&<7. Para poder maquetar conjuntamente te$to 1 gr!icos, el HTML proporciona, por medio del parmetro "L(B0, las siguientes maneras de alinear una imagen respecto del te$to que la acompa3a:
V,-.) 2& ALIGN T?P U7*-*2,2 'oloca el punto ms alto de la imagen coincidiendo con ms alto de la l#nea de te$to actual. "linea el punto medio +en altura. de la imagen con la %ase del te$to. "linea el punto ms %ajo de la imagen con la %ase del te$to. 'oloca la imagen a la izquierda del te$to. 'oloca la imagen a la derec/a del te$to. R&'4-7,2. Este el te$to Este el te$to Este el te$to Este es el te$to Este es el te$to es es es

M(44LE 6?TT?M+Por de!ecto. LE5T >(BHT

Ha1 que aclarar que la %ase del te$to es la l#nea donde descansan casi todas las letras del al!a%eto e$cepto algunas como la p, la g o la j. HIPERVINCULOS Las siglas HTML signi!ican Hyper,e+t 'arkup Language, lo que para nosotros quiere decir que es un lenguaje para /iperte$to. E$isten m ltiples !ormatos de /iperte$to +por ejemplo, los !ic/eros de a1uda de WindoJs. 1 lo que tienen en com n es que todos poseen enlaces.

)&

@n enlace es una zona de te$to o gr!icos que si son seleccionados nos trasladan a otro documento de /iperte$to o a otra posicin dentro del documento actual. 7iendo HTML el lenguaje de (nternet, la di!erencia que posee con respecto a otros tipos de /iperte$to es que ese otro documento puede estar !#sicamente en la otra punta del planeta. 7on los enlaces lo que /acen de la telara3a o -orld -ide -eb lo que es. L, &7*34&7, EAF Para incorporar un enlace /a1 que utilizar esta etiqueta. Todo lo que encerremos entre F"G 1 FH"G, 1a sea te$to o imgenes, ser considerado como enlace 1 su!rir dos modi!icaciones: 8. 7e visualizar de manera distinta en el navegador. El te$to aparecer su%ra1ado 1 de un color distinto al /a%itual, 1 las imgenes estarn rodeadas por un %orde del mismo color que el del te$to del enlace. ). "l pulsar so%re el enlace, seremos enviados al documento que apunta%a el enlace. Para que el enlace sirva para algo de%emos especi!icarle una direccin. Lo /aremos de la siguiente manera: F" H>E5LNdireccionNGPulsameFH"G La direccin estar en !ormato @>L +.niform Resource Locator.. L,' URL' @na @>L nos indica tanto una direccin de (nternet como el servicio que esperamos nos o!rezca el servidor al que corresponde la direccin. Tiene el siguiente !ormato: servicio:HHmquina:puertoHrutaH!ic/eroYusuario donde el servicio podr ser uno de los siguientes: A77= Es el servicio invocado para transmitir pginas Je% 1 el que usaremos normalmente en los enlaces. A77='

);

Es una innovacin so%re el anterior, que nos permite acceder a servidores +generalmente comerciales. que nos o!recen el uso de t2cnicas de enciptacin para proteger los datos que intercam%iemos con 2l de terceras personas. 97= Permite trasmitir !ic/eros desde servidores de ftp annimo. 7i no le pedimos un !ic/ero sino un directorio, en general el navegador se encargar de mostrarnos el contenido del mismo para que podamos escogerlo cmodamente. @tilizando la Y podremos acceder a servidores privados. @,*-7. Para poder mandar un mensaje. Por ejemplo, la @>L mailto/multi0ac1idecnet2com me mandar#a un mensaje a m#. /&G' Para poder acceder a !oros de discusin +mal traducidos a veces como grupos de noticias.. 7e indica el servidor 1 el grupo. Por ejemplo ne3s///ne3s2ibernet2es/es2comp2demos nos conectar#a con el !oro es2comp2demos en el servidor nacional de Tele!nica. 7&-/&7 0o es implementado generalmente por los navegadores, que suelen invocar un programa e$terno. 0os permite conectarnos con otros ordenadores 1 entrar en ellos como si nuestro ordenador !uese una terminal del mismo. La direccin de la mquina puede ser, o %ien una serie de cuatro n meros entre * 1 )-+!$42425265. o %ien algo ms !acil de recordar como es una serie de pala%ras separadas por puntos +3332programacion2net.. El puerto generalmente no se indica, 1a que el servicio predetermina uno. La ruta es una serie de directorios separados por el s#m%olo H, que es el utilizado en @0(Z +el sistema operativo ms e$tendido en los servidores de (nternet.. E$iste otro !ormato de @>L. 'uando queremos acceder a un !ic/ero situado en la misma mquina que la pgina Je% que estamos creando podemos utilizar este !ormato: rutaXrelativaH!ic/ero

)-

En la ruta relativa podremos utilizar los dos puntos +... para acceder al directorio padre o comenzar con la %arra diagonal +H. para acceder a una ruta a%soluta dentro de nuestro ordenador. A/(-,' 'omo dijimos, es posi%le acceder a una posicin del documento HTML. Para /acerlo, primero de%emos especi!icar el lugar del documento al que queremos acceder: F" 0"MELNanclaNG Para poder ver %ien como !unciona, /e colocado un ancla de ejemplo en el t#tulo de la seccin =.). Para poder acceder a ese lugar incluimos el enlace de esta manera: F" H>E5LNUanclaNGFenlacee$t direccionLNU)NGDamos a donde

antesFHenlacee$tGFH"G Tam%i2n podemos acceder a anclas situadas en documentos remotos. Para ello a3adiremos el nom%re del ancla al @>L as#: F" H>E5LNenlaces./tmlUanclaNGFenlacee$t direccionLNU)NG?tra

vezFHenlacee$tGFH"G

ACTIVIDADES.
>ealice tres pginas enlazadas entre si, de tal !orma que se muestre in!ormacin de su curso, de la @0E47" 1 del (7T>". 4e%e utilizar ta%las, imgenes 1 todos los elementos utilizados durante el desarrollo del mdulo.

)=

POST TEST
!. C4:- &' -, &'7)4(74), 2& 4/ 2.(4@&/7. HTML8 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 2. E'()*+, -, '*/7,<*' 2& ; @,)(,' 2&- HTML. <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 3. 546 &' HTML8 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< #. C4:-&' './ -,' @,)(,' 34& '& 47*-*>,/ =,), 2,) &'7)4(74), , 4/, 7,+-,8 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< ;. E<=-*34& ,(&)(, 2&- 9.)@,7&. +:'*(. 2& 4/, P:1*/, W&+. <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

)9

C./(-4'*./&'
El Lenguaje HTML resulta ser mu1 til 1 sencillo para la creacin de Pginas We% de todo tipo, adems de que es un lenguaje mu1 !le$i%le en su utilizacin. Para la construccin de pginas HTML pueden utilizarse dos tipos de programas: Editores de HTML 1 'onversores para procesadores de te$to. 'ualquiera de estas opciones !acilita, con muc/o, la tarea de crear las pginas. 0o o%stante considero que siempre es necesario conocer el cdigo original, si lo que se desea es con!eccionar un documento de calidad.

R&(.@&/2,(*./&'
Los programas o conversores, con !recuencia, no gestionan la totalidad de las rdenes. El resultado de la pgina puede no ser el esperado: aparecen l#neas de separacin donde no se /a%#an previsto, las ta%las no o!recen el aspecto que se requer#a, etc. 'on todo, creo que la opcin del conversor es la ms conveniente, adems de la correccin manual en aquellos casos en los que se precise. 4e esta !orma se puede generar el cdigo a partir de documentos 1a creados +respetando tama3os de letra, tipos de letra, etc... Por otra parte, mantengo la opinin de que una pgina no de%e contener e$cesivos gr!icosR pueden saturar la capacidad receptiva del usuario, a la vez que puede desistir de visitar la pgina por el e$cesivo tiempo requerido para visualizarla. 0o o%stante, siempre son necesarios, 1 colocados de !orma estrat2gica, a1udan a que el documento no sea montono, lo que tam%i2n ocasionar#a la p2rdida de inter2s del usuario. En la medida de lo posi%le, 1 a mi parecer, los documentos no de%en ser mu1 largosR es pre!eri%le partirlos en documentos individuales 1 esta%lecer enlaces entre ellos.

PAGINAS WEB AFINES

JJJ.evidalia.com JJJ.rinconprog.metropdiglo%al.com JJJ.elprogramador.com JJJ.monogra!#as.com

)E