1

INTRODUCCIN AL HTML
HTML es el lenguaje con el que se escriben las pginas Web Las pginas Web pueden ser vistas por el usuario mediante un tipo de aplicacin llamada na!ega"or #$ro%ser&. Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las pginas Webs al usuario, siendo hoy en da la interfase ms e tendida en la red. !ste lenguaje nos permite aglutinar te tos, sonidos e imgenes y combinarlos a nuestro gusto. "dems, y es aqu donde reside su ventaja con respecto a libros o revistas, el HTML nos permite la introduccin de referencias a otras pginas por medio de los enlaces hiperte to. "dems del navegador necesario para ver los resultados de nuestro trabajo, necesitamos evidentemente otra herramienta capa# de crear la pgina en si. $n archivo HTML %una pgina& no es ms que un te to. !s por ello que para programar en HTML necesitamos un editor de te tos. !s recomendable usar el $loc "e no'as que viene con Windo's, u otro editor de te tos sencillo. (ay que tener cuidado con algunos editores ms complejos como Wor"pa" o Microso(' Wor", pues colocan su propio cdigo especial al guardar las pginas y HTML es )nica*en'e 'e+'o plano, con lo que podremos tener problemas. !ntonces, una pgina Web es un archivo donde est contenido el cdigo ()*L en forma de te to. !stos archivos tienen e tensin , -'*l o , -'* %es indiferente cul utili#ar&. +e modo que cuando programemos en HTML lo haremos con un editor de te tos y guardaremos nuestros trabajo con e tensin , -'*l, por ejemplo *ipgina -'*l .U/0R0NCIA1 $tili#ar siempre la misma e tensin en los archivos HTML. !sto evitar que te confundas al escribir los nombres de tus archivos una veces con , -'* y otras con , -'*l. ,i trabajas con un equipo en un proyecto todava ms importante que todo se pongan de acuerdo en la e tensin.

2U3 0. 0L HTML4
HTML %(yper )e t *ar-up Language&, Lenguaje "e Marcaci5n "e Hiper'e+'o . .ue creado en /001 por el fsico nuclear TIM $0RN0R.6L002 el cual tom dos herramientas pree istentes3 !l concepto de Hiper'e+'o %conocido tambi4n como Lino ancla& el cual permite conectar dos elementos entre si y el ./ML %Lenguaje !stndar de *arcacin 5eneral& el cual sirve para colocar etiquetas o marcas en un te to que indique como debe verse. HTML no es propiamente un lenguaje de programacin como 677, 8isual 9asic, etc. ,ino un sistema de etiquetas. HTML no presenta ning:n compilador, por lo tanto alg:n error de sinta is que se presente 4ste no lo detectar y se visuali#ar en la forma como 4ste lo entienda. !l entorno para trabajar HTML es simplemente un procesador de te to, como el que ofrecen los sistemas operativos Win"o%s #$loc "e no'as&7 $ni %el e"i'or !i o e"&,

2
el que ofrece O((ice Wor" %no importa su versin&. !s conjunto de etiquetas que se creen se deben guardar con la e tensin , -'*l o , -'*

0.TRUCTURA $8.ICA D0 UN DOCUM0NTO HTML

$n programa %"ocu*en'o o pgina& elaborado en ()*L consta bsicamente de cuatro partes principales con las siguientes directivas, que son3

@ar'es1

B& C& D&

Inicio "el Docu*en'o Inicio "e la Cabecera Inicio>=inal "el 'A'ulo "el Docu*en'o =inal "e la cabecera Inicio "el Cuerpo "el Docu*en'o

E&

=inal "el Cuerpo "el Docu*en'o

=inal "el Docu*en'o

6uando se est creando un +ocumento en HTML es indiferente utili#ar Ma9)sculas o Min)sculas. ,in embargo se recomienda a escribirlas en Min)sculas ya que otras tecnologas que pueden convivir con nuestro HTML %:ML por ejemplo& no son tan permisivas y nunca viene mal coger buenas costumbres desde el principio para evitar fallos triviales en un futuro. )oda etiqueta debe comen#ar con el signo *enor que # ; & y terminar con el signo *a9or que # < &

0TI2U0TA. D0 =ORMATO1
;$< 9 ;>$< ;U< 9 ;>U< ;I< 9 ;>I< ;.TRI?0< 9 ;>.TRI?0< ;.TRON/< 9 ;>.TRON/< ;0M< 9 ;>0M< ;.U@< 9 ;>.U@< ;.U$< 9 ;>.U$< ;C0NT0R< 9 ;>C0NT0R< 3 ,irve para colocar un te to en negrita 3 ,irve para subrayar un te to 3 ,irve para colocar un te to en cursiva 3 ,irve para tachar un te to 3 6umple la misma funcin que ;9< 3 *uestra un te to seleccionado con 4nfasis. Lo muestra como =talic 3 )e to en superndice 3 )e to en subndice 3 Para centrar te to u otro objeto

0TI2U0TA. D0 @8RRA=O1
;@< 9 ;>@< 3 =ndica un comien#o de prrafo. Para alinear un prrafo se utili#a el comando3 ;ALI/N< 9 ;>ALI/N<7 utili#ado dentro de la etiqueta ;@<. ,e puede alinear de tres formas diferentes3 L0=T F IG2UI0RDA RI/HT F D0R0CHA C0NT0R F C0NTRO 0HM1 ;@ ALI/NFC0NT0R< Te+'o Cen'ra"o ;>@< ;@< ;@R0< 9 ;>@R0< ;$R< ;HR< ;I66966< 3 ,irve para un cambio de prrafo %deja una lnea en blanco en medio& 3 =ndica al bro'ser a ver el te to tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc. 3 =ndica un salto de lnea 3 *ostrar una lnea hori#ontal que ocupar todo el ancho de la pgina 3 ,e utili#a para hacer comentarios. Por supuesto que esto no aparecer dentro del bro'ser

TAMAJO K TI@O D0 L0TRA1

;=ONT< 9 ;>=ONT< 1 Permite variar el tama>o, el color y el tipo de letra de un te to determinado. $tili#a los parmetros3 Ta*aLo %siMe&7 color 9 #Tipo "e le'ra& (ace .IG01 +efine el tama>o de la letra. !ste tama>o puede ser absoluto o relativo. ! isten siete niveles de tama>o distinto numerados de / a ? por orden creciente 0HM1 ;=ONT .IG0FE<!ste te to es ms grande;>=ONT< COLOR1 +efine el color el color del te to mediante el atributo color. !ste se puede especificar mediante un cdigo o simplemente con el nombre en ingl4s NOM$R0 COLOR NALOR ;.@A) 6@L@BCDW(=)!D<9L"A6@;E.@A)< 9L"A6@ F...... ;.@A) 6@L@BCD9L"6GD<A!5B@;E.@A)< A!5B@ FHHHHHH ;.@A) 6@L@BCDB!+D<B@I@;E.@A)< B@I@ F..HHHH ;.@A) 6@L@BCD5B!!AD<8!B+!;E.@A)< 8!B+! FHH..HH ;.@A) 6@L@BCD9L$!D<"J$L;E.@A)< "J$L FHHHH.. ;.@A) 6@L@BCDK!LL@WD<"*"B=LL@;E.@A)< "*"B=LL@ F....HH ;.@A) 6@L@BCD6K"AD<6K"A;E.@A)< 6K"A FHH.... ;.@A) 6@L@BCD*"5!A)"D<*"5!A)";E.@A)< *"5!A)" F..HH.. =AC01 +efine el tipo de letra !I*3 ;.@A) ."6!CD6omic ,ans *,, arial, verdanaD<!sta te to tiene tipografa;E.@A)<

CA$0C0RA.1
!n un documento ()*L, se pueden indicar seis tipos de cabeceras%tama>o de letra& por medio de la directivas H0AD ;HB< 9 ;>HB< ;HC< 9 ;>HC< ;HD< 9 ;>HD< ;HE< 9 ;>HE< ;HO< 9 ;>HO< ;HP< 9 ;>HP<

0HM B1
;()*L< ;(!"+< ;)=)L!<*i primera pgina;E)=)L!< ;E(!"+< ;9@+K< ;(/<9ienvenido a mi pgina;E(/< !sta pgina se encuentra en ;,)B@A5<Lima L Per:;E,)B@A5<, ;9B< en el ;!*<servidor 'eb;E!*< de =!,P Aorbert Wiener. ;(B<(asta luego M ;E9@+K< ;E()*L<

0HM C1
;()*L< ;(!"+<;)=)L!<)odos los encabe#ados;E)=)L!<;E(!"+< ;9@+K< ;(/<)e to de prueba ;E(/< ;(1<)e to de prueba ;E(1< ;(N<)e to de prueba ;E(N< ;(O<)e to de prueba ;E(O< ;(P<)e to de prueba ;E(P< ;(Q<)e to de prueba ;E(Q< ;E9@+K< ;E()*L<

0HM D1
;()*L< ;(!"+< ;)=)L!<.ormato de prrafos;E)=)L!< ;E(!"+< ;9@+K< ;P "L=5ACL!.)<)e to alineado a la =#quierda ;EP< ;P "L=5AC6!A)!B<)e to alineado al 6entro ;EP< ;P "L=5ACB=5()<)e to alineado a la +erecha ;EP< ;9<)e to en Aegrita;E9< ;9B< ;=<)e to en =tlica;E=< ;9B< ;$<)e to en ,ubrayado;E$< ;9B< La ;,$P</N;E,$P<66;,$9<N;E,$9<(;,$9<O;E,$9<6=A@, es un (etorociclo alergeno enriquecido ;E9@+K< ;E()*L<

0HM E1
;()*L< ;(!"+< ;)=)L!<"lineacin de prrafos;E)=)L!< ;E(!"+< ;9@+K< ;P "L=5ACL!.)<)e to alineado a la =#quierda /;EP< ;P "L=5ACL!.)<)e to alineado a la =#quierda 1;EP< ;P "L=5ACL!.)<)e to alineado a la =#quierda N;EP< ;E9@+K< ;E()*L<

0HM O1
;()*L< ;(!"+<;)=)L!<"lineacin de prrafos;E)=)L!<;E(!"+< ;9@+K< ;+=8 "L=5ACL!.)< ;P<)e to alineado a la =#quierda / ;EP< ;P<)e to alineado a la =#quierda 1;EP< ;P<)e to alineado a la =#quierda N;EP< ;E+=8 "L=5ACL!.)< ;E9@+K< ;E()*L<

0HM P1
;()*L< ;(!"+< ;)=)L!<6olor, tama>o y tipo de letra;E)=)L!<

7
;E(!"+< ;9@+K< ;.@A) ."6!CD6omic ,ans *,, arial, verdanaD<!ste te to tiene tipografa;E.@A)< ;9B< ;.@A) ,=J!CQ<!ste te to es ms grande;E.@A)< ;9B< ;.@A) 6@L@BCDB!+D<!ste te to est en color rojo;E.@A)< ;E9@+K< ;E()*L<

LI.TA.
Aos permiten mostrar la informacin debidamente ordenada.

LI.TA. ORD0NADA. O 0NUM0RADA.1

8
Por lo general, etiquetadas con n:meros. ;OL< 9 ;>OL< ;LI< ;LH< !l formato es el siguiente3 ;OL .TART F nQ TK@0 F A 5 a 5 I 5 i 5 R < ;LH< Ti'ulo "e la lis'a ;>LH< ;LI< 0le*en'o B ;LI< 0le*en'o C ;LI< 0le*en'o n ;>OL< !l punto de comien#o siempre ser el B si no se indica en .TART con otro valor de comien#o y el tipo de numeracin puede seleccionarse con el atributo TK@0. ,us posibles valores son3 A 1 Letras may:sculas. a 1 Letras min:sculas. I 1 A:mero romanos en may:sculas. i 1 A:mero romanos en min:sculas. R1 A:meros %es por defecto por tanto no hay que indicarlo&. 0H0M@LO. B& CDI/O HTML1 ;OL < ;L=< !lemento / ;L=< !lemento 1 ;L=< !lemento N ;>OL< R0.ULTADO1 /. !lemento / 1. !lemento 1 N. !lemento N C& CDI/O HTML1 ;OL TK@0FI< ;L=< !lemento / ;L=< !lemento 1 3 ,irve para toda la lista #Or"er Lis'& 3 ,irve para cada elemento de la lista #Lis' I'e*& 3 +efine el titulo de la lista, este es opcional y aparecer en la parte superior de esta.

9
;L=< !lemento N ;OL TK@0Fa< ;L=< !lemento N./ ;L=< !lemento N.1 ;>OL< ;L=< !lemento O ;>OL< R0.ULTADO1 =. ==. ===. !lemento / !lemento 1 a. !lemento N./ b. !lemento N.1 !lemento O

LI.TA. NO ORD0NADA. O CON NIJ0TA. #$ALA.&1

;UL< 9 ;>UL< ;LI< 3 ,irve para toda la lista #Unor"ere" Lis'& 3 ,irve para cada elemento de la lista

0l (or*a'o es el siguien'e1 ;UL TK@0 F DI.? 5 CIRCL0 5 .2UAR0 < ;LH< Ti'ulo "e la lis'a ;>LH< ;LI< 0le*en'o B ;LI< 0le*en'o C ;LI< 0le*en'o n ;>UL< Para marcar los distintos elementos de la lista se usarn unos smbolos, que pueden ser un disco #DI.?&, un circulo #CIRCL0& un cuadrado #.2UAR0&, seleccionables con el atributo TK@0. 0H0M@LO. B& CDI/O HTML1 ;UL < ;L(< )itulo ;EL(< ;L=< !lemento /

10
;L=< !lemento 1 ;L=< !lemento N ;>UL< R0.ULTADO1

)itulo !lemento / !lemento 1 !lemento N

C& CDI/O HTML1 ;UL TK@0F.2UAR0< ;L=< !lemento / ;L=< !lemento 1 ;L=< !lemento N ;UL TK@0FCIRCL0< ;L=< !lemento N./ ;L=< !lemento N.1 ;>UL< ;L=< !lemento O ;>UL< R0.ULTADO1 !lemento / !lemento 1 !lemento N o !lemento N./ o !lemento N.1 !lemento O

IM8/0N0.
I*genes 9 enlaces Alineaci5n respec'o al 'e+'o

I*genes Para incluir grficos e imgenes en nuestras pginas utili#aremos la etiqueta

11
;IM/< de esta manera3 ;IM/ .RCFSArc-i!oTgr(icoS < !l parmetro .RC especifica el nombre del archivo que contiene el grfico. Los formatos estndar en la red son el /I= y el H@/.

0HM B1
;()*L< ;(!"+< ;)=)L!<=mgenes;E)=)L!< ;E(!"+< ;9@+K< ;IM/ .RCFSC1U/LO$0 gi(S< ;E9@+K< ;E()*L<

0L ATRI$UTO ALT
!l atributo "L) especifica el te to que se mostrar en lugar del grfico en aquellos navegadores que no sean capaces de mostrarlos %como el Lyn & y en el supuesto de que el usuario los haya desactivado. "lgunos navegadores lo muestran cuando pasamos el ratn por encima de la imagen. !s por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo siempre. +e hecho, el estndar ()*L obliga a hacerlo.

12
Para incluir grficos e imgenes en nuestras pginas utili#aremos la etiqueta ;IM/ .RCFSarc-i!oTgr(icoS ALTFS"escripci5nS<

0HM C1
;()*L< ;(!"+< ;)=)L!<=mgenes;E)=)L!< ;E(!"+< ;9@+K< ;IM/ .RCFSC1U/LO$0 gi(S ALTFSLa TierraS< ;E9@+K< ;E()*L<

! isten dos a'ribu'os que, aunque opcionales, conviene indicar siempre3 la al'ura %H0I/HT& y la anc-ura %WIDTH& del grfico en pi els. +e este modo, el navegador puede mostrar un recuadro del tama>o de la imagen mientras la va leyendo de la red y as poder mostrar el resto de la pgina correctamente mientras tanto.
;IM/ .RCFVC1U/LO$0 gi(V ALI/NFL0=T WIDTHFWO H0I/HTFXR<

.e !e asA1

13

I*genes 9 enlaces

,uele ser com:n incluir enlaces dentro de un grfico. !n ese caso, por defecto, los navegadores le pondrn un borde al grfico para indicar que efectivamente es un enlace, pero la mayora de las veces bastante poco est4tico. Por medio del parmetro $ORD0R podremos alterar el grosor de ese borde o incluso eliminarlo poni4ndolo a cero. ;IM/ .RCFSC1U/LO$0 gi(S ALI/NFL0=T WIDTHFWO H0I/HTFXR $ORD0RFO<

;IM/ .RCFSC1U/LO$0 gi(S ALI/NFRI/HT WIDTHFWO H0I/HTFXR $ORD0RFBO<

;@ ALI/NFC0NT0R<;IM/ .RCFSC1U/LO$0 gi(S WIDTHFWO H0I/HTFER $ORD0RFBO<;>@<

I*genes co*o enlaces

@tra caracterstica interesante de las imgenes es que permiten ser utili#adas como hipervnculos. Para esto, es necesario crear enlace y en ve# de encerrar el te to dentro de la etiqueta ;"<hay que encerrar una imagen. 0je*plo1 ;A HR0=FV-''p1>>%%% co*pu'ersa co*V<

14
;IM/ .RCFSC1Ubol' gi(S WIDTHFYR H0I/HTFXR $ORD0RFD ALTFSHaga Clic aquA para co*prar un co*pu'a"orS< ;>A< Resul'a"o1

Alineaci5n respec'o al 'e+'o

Para poder maquetar conjuntamente te to y grficos, el ()*L proporciona, por medio del parmetro "L=5A, las siguientes maneras de alinear una imagen respecto del te to que la acompa>a3 Nalor "e ALI/N U'ili"a" TO@ 6oloca el punto ms alto de la imgen coincidiendo con lo ms alto de la lnea de te to actual. MIDDL0 "linea el punto medio %en altura& de la imgen con la base del te to. "linea el punto ms bajo de la imgen con la base del te to. !ste es el te to RI/HT 6oloca la imgen a la i#quierda del te to. !ste es el te to L0=T 6oloca la imgen a la derecha del te to. !ste es el te to Resul'a"o !ste es el te to

!ste es el te to

$OTTOM#@or "e(ec'o&

(ay que aclarar que la base del te to es la lnea donde descansan casi todas las letras del alfabeto e cepto algunas como la p, la g o la j. .i quiere colocar el 'e+'o en el pun'o *s al'o "e la i*gen 0je*plo1 ;IM/ .RCFSC1U/ra(icosU/LO$0 gi(S $ORD0RFO</LO$O T0RRA2U0O /LO$O T0RRA2U0O ALI/NFTO@ WIDTHFWO H0I/HTFWR

15

.i pre(iere colocar el 'e+'o en el pun'o *e"io "e la i*agen 0je*plo1 ;IM/ .RCFSC1U/ra(icosU/LO$0 gi(S ALI/NFMIDDL0 WIDTHFWO H0I/HTFWR $ORD0RFO</LO$O T0RRA2U0O /LO$O T0RRA2U0O

.i quiere colocar el 'e+'o en el pun'o *as bajo "e la i*gen 0je*plo1 ;IM/ .RCFSC1U/ra(icosU/LO$0 gi(S ALI/NF$OTTOM WIDTHFWO H0I/HTFWR $ORD0RFO</LO$O T0RRA2U0O

/LO$O T0RRA2U0O

TA$LA.
Las tablas nos permiten representar cualquier elemento de nuestra pgina %te to, listas, imgenes, etc.& en diferentes filas y columnas separadas entre si. !s una

16
herramienta muy :til para RordenarD contenidos de distintas partes de nuestra pgina. @ara crear 'ablas usa*os las siguien'es "irec'i!as1 ;TA$L0< ;TR< ;>TR< ;TD< ;>TD< ;TH< ;>TH< ;>TA$L0< 3 =ndica el comien#o de una tabla 3 =ndica el comien#o de una lnea de la tabla 3 =ndica el final de la lnea de la tabla 3 =ndica el comien#o una celda 3 =ndica el final una celda 3 =ndica el comien#o de una celda que ser una cabecera 3 =ndica el final de una celda que es una cabecera 3 =ndica el final de tabla

@ar*e'ros opcionales1 $ORD0R F nu* =ndica que se pinta el borde de la tabla y de las celdas C0LL.@ACIN/ F nu* =ndica el espacio que separa las celdas que estn dentro de la tabla C0LL@ADDIN/ F nu* =ndica el espacio que separa el borde de cada celda y el contenido de esta WIDTH F nu* 5 Z =ndica el ancho de la tabla en funcin del ancho de la ventana del visor. ,i no se indica, el ancho se adecuar al tama>o de los contenidos de las celdas H0I/HT F nu* 5 Z =ndica la altura de la tabla en funcin del ancho de la ventana del visor. ,i no se indica, la altura se adecuar a la altura de los contenidos de las celdas $/COLOR F C5"igo "e color !specifica el color de fondo de toda la tabla. ROW.@AN F nu* =ndica el n:mero de filas que ocupar la celda. Por defecto ocupa una sola fila COL.@AN F nu* =ndica el n:mero de columnas que ocupar la celda. Por defecto ocupa una sola columna ALI/N 1 Permite alinear el te to dentro de una celda. "cepta L0=T, RI/HT, C0NT0R. NALI/N 1 Permite alinear el te to verticalmente dentro de una celda. "cepta TO@, $OTTOM, C0NT0R.

!jemplo /3
<HTML> <HEAD>

17
<TITLE>PRIMERA TABLA</TITLE> </HEAD> <BODY> <TABLE HEIGHT=50% WIDTH=50% BORDER=1 CELLSPACING=1> <TR> <TD HEIGHT=50 WIDTH=50>HOLA</TD> <TD>AMIGOS</TD> </TR> <TR> <TD>INSTITUTO</TD> <TD>WIENER</TD> </TR> </TABLE> </BODY> </HTML>

;TD<Co*ienMo "e una Cel"a

;TR<Co*ienMo "e una =ila

!sta tabla est compuesta de la siguiente forma3 /S& 6omien#a la tabla con <TABLE> 1S& Luego viene <TR>, indica que comien#a una nue!a (ila %-oriMon'al& de la tabla. $na tabla por lo menos debe tener una fila. NS& Luego viene ;TD<7 que indica que comien#a una celda % colu*na&. " continuacin de este 'ag se coloca la informacin.

!jemplo 13
<HTML> <HEAD> <TITLE>SEGUNDA TABLA</TITLE>

18
</HEAD> <BODY> <TABLE HEIGHT=50% WIDTH=50% BORDER=1 6!LL,P"6=A5=1> <TR> <TD ALIGN=CENTER HEIGHT=25% W=+)( =25%>HOLA</TD> <TD ALIGN=CENTER HEIGHT=25% W=+)( =25%>AMIGOS</TD> </TR> <TR> <TD ALIGN=CENTER>INSTITUTO</TD> <TD ALIGN=CENTER>WIENER</TD> </TR> </TABLE> </BODY> </HTML>

!jemplo N3
<HTML>
;(!"+< ;)=)L!<)!B6!B" )"9L";E)=)L!< ;E(!"+< ;9@+K< ;)"9L! 956@L@BC5B!!A (!=5()CPHT W=+)(CPHT 9@B+!BC/ 6!LL,P"6=A5C/< ;)B< ;)+ 956@L@BCK!LL@W "L=5AC6!A)!B (!=5()C1PT W=+)(C1PT<(@L";E)+< ;)+ 956@L@BC6K"A "L=5AC6!A)!B (!=5()C1PT W=+)(C1PT<"*=5@,;E)+< ;E)B< ;)B< ;)+ 956@L@BCB!+ "L=5AC6!A)!B<=A,)=)$)@;E)+< ;)+ 956@L@BC*"5!A)" "L=5AC6!A)!B<W=!A!B;E)+< ;E)B< ;E)"9L!< ;E9@+K<

19
;E()*L<

!jemplo O3
<HTML> <HEAD> <TITLE>CUARTA TABLA</TITLE> </HEAD> <BODY> <H1>LISTA DE CURSOS</H1> <TABLE BORDER=5> <TR> <TD>CURSO</TD><TD>HORARIO</TD> </TR> <TR> <TD>WINDOWS</TD><TD>LUN - MIER 7- 10</TD> </TR> <TR> <TD>WORD</TD><TD>MAR - UE ! - 7</TD> </TR> <TR> <TD>E"CEL</TD><TD>SAB - DOM 2 - 5</TD> </TR> <TR> <TD>#ISUAL BASIC</TD><TD>LUN - #IER 7 - 10</TD> </TR> </TABLE> </BODY>

20
</HTML>

!jemplo P3
<HTML> <HEAD> <TITLE>$UINTA TABLA</TITLE> </HEAD> <BODY> <TABLE BORDER=10 CELLSPACING=! CELLPADDING=! WIDTH=%0%> <TH ALIGN=CENTER>BUSCADORES <TH ALIGN=CENTER COLSPAN=2>OTROS LIN&S <TR> <TH ALIGN=LE'T>YAHOO <TH ALIGN=LE'T>MICROSO'T <TH ALIGN=LE'T>IBM <TR> <TH ALIGN=LE'T>IN'OSEE& <TH ALIGN=LE'T>APPLE <TH ALIGN=LE'T>DIGITAL </BODY> </HTML>

21

!jemplo Q3
<HTML> <HEAD> <TITLE>TABLA LOCA</TITLE> </HEAD> <BODY> <TABLE BORDER=1 WIDTH=!00 (!=5()C1HH> <TR> <TD ROWSPAN=2><'ONT SI(E=)1><EM>T*+,- .-/ 01234</EM></'ONT> <TD #ALIGN=BOTTOM><'ONT SI(E=-1>M564</'ONT> <TD><'ONT SI(E=)1 COLOR=78''00007>O,/- .-/ 0904</'ONT> <TR> <TD BGCOLOR=7800''007>Y :564 <TD ROWSPAN=2 ALIGN=CENTER><'ONT SI(E=)1>Y .-/ 0904</'ONT> <TR> <TD #ALIGN=BOTTOM><'ONT SI(E=);>1A</'ONT> <TD #ALIGN=BOTTOM><'ONT SI(E=);>2B</'ONT> </TABLE> </BODY>

</HTML>

22

NAnculos "en'ro "e "ocu*en'os

!l te to y los grficos pueden vincularse a lugares dentro del mismo documento. !sos vnculos requieren dos partes el ancla y el vnculo en s. !l ancla identifica el lugar al cual se va a pasar. !l vinculo utili#a el nombre del ancla en lugar del nombre de alg:n archivo. Vinculo ;" (B!.CDF6$J6@D<6$J6@;E"< Ancla ;" A"*!CD6$J6@D<6$,6@;E"< =RAM0. !s la tecnica que permite crear la pagina 'eb con sectores de pagina Implementacin en HTML: .ec'oriMaci5n La sectori#acin de la pgina se reali#a con los comandos .B"*!,!) y .B"*! =RAM0.0T $n .B"*!,!) define3 a. b. =RAM0 6ada .B"*! tiene asociado como mnimo3 a. b. $n nombre %atributo A"*!& que sirve para distinguir su #ona de las otras. $na fuente %atributo ,B6&,que consiste en un $BL apuntando hacia un documento ()*L que sera cargado en el .B"*! al inicio. $n conjunto de .B"*!, dispuestos uno sobre otro %ro's&, o bien $n conjunto de .B"*!, dispuestos uno al lado de otro %cols&.

Di!isi5n 'Apica ;=RAM0.0T colsFVDRZ7WRZV< ;=RAM0 NAM0FVin"iceV .RCFV'e*as7-'*lV< ;=RAM0 NAM0FVin(or*aci5nV .RCFVin(o -'*lV< ;>=RAM0.0T<

23
=ORMULARIO. HTML permite usar el formulario en el documento como una manera bsica de proveer al usuario de un m4todo para enviar informacin hacia el servidor. @ar'es "el (or*ulario $n formulario consta de3 /.U!l comando 3;.@B* "6)=@ACD...D< 1.U!l cuerpo del formulario,consistente en te to y una serie de campos de ingreso, N.ULos botones para enviar el formulario y para limpiarlo, O.U!l comando ;E.@B*< !jemplo3 ;.@B* A"*!CD*i formularioD *!)(@+CP@,) "6)=@ACD9=!A8!A=+".()*LD< VV VV ;E.@B*< Ingreso "e 'e+'o no*bre1;IN@UT NAM0FVno*breV TK@0FV'e+'V< no*bre1 Ingreso "e una sola opci5n S3 NPara que el usuario seleccione una opcion,utili#e radio button ;P3<,e o3;EP< ;=AP$) )KP!CDradioD A"*!Cse oD 8"L$!CDmascD chec-ed<*asculino;br< ;=AP$) )KP!CDradioD A"*!Cse oD 8"L$!CDfemD<.emenino

Lis'as "e .elecci5n W-/< E+9*= P0/0 12* *= 2620/>- .2*<0 6*=*99>-?0/ 2?0 -.9>@? *?,/* A0/>06 2,>=>9* 2? :*?B <*6.=*C0D=*E S*+-E <SELECT NAME=7-FF>9*7 SI(E=; MULTIPLE> <OPTION #ALUE=7W7 >W-/< <OPTION #ALUE=7E7 >E+9*= <OPTION #ALUE=7A7 >A99*66 </SELECT>

24
C-ec[bo+ G-=F T*?>6 N0,09>@? <P>S26 >?,*/*6E</P><INPUT TYPE=79I*9JD-+7 NAME=7>?,*/*6LC-=F7>GOL' <INPUT TYPE=79I*9JD-+7 NAME=7>?,*/*6L,*??>67>T*?>6 <INPUT TYPE=79I*9JD-+7 NAME=7>?,*/*6L61206I7>S1206I <INPUT TYPE=79I*9JD-+7 NAME=7>?,*/*6L?0,09>-?7>N0,09>@? P0/0 .*/>:>,>/ 0= 2620/>- 6*=*99>-?0/ A0/>06 -.9>-?*6 0 =0 A*GH6* I09* 26- <* 9I*9JD-+K <P>S26 >?,*/*6E</P><INPUT TYPE=79I*9JD-+7 NAME=7?-:D/*7>

$o'ones "e con'rol "el (or*ulario Botn e en!"o ok Cancelar P*/:>,* *?A>0/ *= F-/:2=0/>- 0= ACTION <*= F-/:2=0/>-K EM*:.=-E <INPUT TYPE=762D:>,7 #ALUE=7E?A>0/ 9-:*?,0/>-67> E?A>0/ 9-:*?,0/>-6

Botn de Limpiar el formulario P*/:>,* <*A-=A*/ *= F-/:2=0/>- 0 626 A0=-/*6 -/>C>?0=*6 EM*:.=-E ;IN@UT TK@0FVrese'V NALU0FVLi*piar (or*ularioV<