Curso de HTML 4.doc

7/25/2019 Curso de HTML 4.doc

1/53

Curso de HTML 4.0

Autor:Daniel Rodrguez Herrera Introduccin al curso

o Requisitoso Agradecimientos

Versiones del HTMLo HTML 2.0o HTML .0 ! .2o HTML ".0o #st$ndares en este curso

Mi %rimera %$ginao #l cdigoo La e&%licacino #l cuer%o del documento

'ormateo ($sicoo 'ormato del %$rra)oo Las * ca(eceraso +am(iando el ti%o de letrao 'ormato de )raseo ,tros elementos

+aracteres es%ecialeso +aracteres e&tendidos en HTMLo +aracteres de control

#nlaceso La etiqueta -Ao Las /RLso Anclas

Listaso Listas desordenadaso Listas ordenadaso Listas de de)iniciones

Im$geneso Im$genes ! enlaceso Alineacin res%ecto al te&to

'ormateo )inoo +am(io de coloro

Tamaos del te&too Ti%o de letra #structura del documento

o La ca(ecerao #l cuer%o

'ormularioso +a1as de te&too ,%cioneso otones del )ormularioo ,tros elementos

+ontroles a3anzados %ara )ormularioso otoneso #tiquetas
http://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/1/http://www.programacion.com/html/tutorial/curso/2/http://www.programacion.com/html/tutorial/curso/3/http://www.programacion.com/html/tutorial/curso/4/http://www.programacion.com/html/tutorial/curso/5/http://www.programacion.com/html/tutorial/curso/6/http://www.programacion.com/html/tutorial/curso/7/http://www.programacion.com/html/tutorial/curso/8/http://www.programacion.com/html/tutorial/curso/9/http://www.programacion.com/html/tutorial/curso/10/http://www.programacion.com/html/tutorial/curso/11/http://www.programacion.com/html/tutorial/curso/12/http://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/1/http://www.programacion.com/html/tutorial/curso/2/http://www.programacion.com/html/tutorial/curso/3/http://www.programacion.com/html/tutorial/curso/4/http://www.programacion.com/html/tutorial/curso/5/http://www.programacion.com/html/tutorial/curso/6/http://www.programacion.com/html/tutorial/curso/7/http://www.programacion.com/html/tutorial/curso/8/http://www.programacion.com/html/tutorial/curso/9/http://www.programacion.com/html/tutorial/curso/10/http://www.programacion.com/html/tutorial/curso/11/http://www.programacion.com/html/tutorial/curso/12/


2/53

o Agru%acin de elementoso Desacti3acin de elementos

Ma%aso Ma%as gestionados %or el clienteo +mo usar un ma%a

Ta(laso De)inir las )ilaso De)inir las celdaso Ttulo de la ta(la

Marcoso #tiqueta -'RAM#4#To #tiqueta -'RAM#o Acceso a otros marcos

Ho1as de estiloo +laseso

#tiquetas -45A6 ! -DIV Ho1as de estilo7 re)erenciao 5ro%iedades de (loqueo 5ro%iedades de ti%o de letrao 5ro%iedades de )ormato del te&too 5ro%iedades de color ! )ondoo 5ro%iedades de clasi)icacin

Lengua1es de scri%to 8a3ascri%t

+a%aso De)inicino 5ro%iedades

4onidoo 4onido acti3ado %or el usuarioo 4onido de )ondo

9ua de estiloo +ontenidoo 6a3egacino #structura de las %$ginaso Accesi(ilidado Diseoo

Mantenimiento ! %rue(as #nlaces a otras %$ginaso ,tros manuales de HTMLo 4o(re 8a3a4cri%to 4o(re HTML din$micoo 4o(re otras tecnologas relacionadas

'A: ;5reguntas m$s )recuentes


3/53

o Requisitoso Agradecimientos

Introduccin al curso

#ste curso =a nacido con la intencin de com%lementar los anteriores cursos de8a3a4cri%t ! HTML din$mico que tengo en estas %$ginas. As %odr$s terminar creandouna %$gina de calidad em%ezando desde cero.

Lo %rimero que =a! que decir es que este curso no e&%lica ning>n est$ndar es%ec)ico? nie&amina e&austi3amente todos los %ar$metros de las etiquetas HTML. Intenta ser unagua %r$ctica? de modo que incluir$ todas las cosas que !o crea im%ortantes ! que me=an %ro3ocado alg>n que(radero de ca(eza mientras realiza(a mis %$ginas. #l curso !sus e1em%los los =e %ro(ado con #&%lorer " ! 6etsca%e ".

4i tu na3egador es ca%az de mane1ar m$s de una 3entana a la 3ez? las %$ginas dee1em%lo del curso se 3er$n en otra 3entana ;slo unan editor es%ec)ico de %$ginas Be(? %ero no es necesario.#s m$s? algunos de esos editores escondenlas etiquetas HTML al usuario? de modo que

%osi(lemente lo que a%rendas aqu te sera de %oca utilidad.

Tam%oco requiere que lo le$is conectados? !a que os %od@is descargar el curso ;c=tml.zi%


4/53

o #st$ndares en este curso

Versiones del HTML

HTML 2.0

+uando se %rodu1o la e&%losin de Internet el est$ndar de HTML que circula(a era el2.0 ;esta(lecido en no3iem(re del C


5/53

Introducido con la 3ersin ".0 del HTML

#tiqueta o %ar$metro no est$ndar so%ortado slo %or el 6etsca%e

#tiqueta o %ar$metro no est$ndar so%ortado slo %or el #&%lorer

Curso de HTML 4.0

Autor:Daniel Rodrguez Herrera Mi %rimera %$gina

o #l cdigoo La e&%licacino #l cuer%o del documento

Mi $rimera $#gina

"l cdigo

$rimera.%tml

-codigo-HTML -H#AD -TITL#Mi %rimera %agina-TITL# -H#AD

-,D -+#6T#R-HFMi 5rimera %agina-HF-+#6T#R

-HR -5#sta es mi %rimera %agina ;c=is%as


6/53

de(emos indicar es que el te&to que estamos com%oniendo es un documento HTML%ues lo indicamos as7

-HTML ... -HTML

/n documento HTML tiene una estructura que lo se%ara en dos %artes7 cuer%o !ca(ecera. #n la %rimera estar$ la %$gina en s? mientras que en la segunda incluiremosalgunas cosas que no se 3en al %rinci%io %ero que %ueden llegar a ser mu! im%ortantes.Lo %rimero que =a! que incluir en el cdigo es la ca(ecera. La escri(imos7

-H#AD -TITL#Mi %rimera %agina-TITL#-H#AD

Dentro de la ca(ecera slo =a! otra etiqueta. #s la >nica im%rescindi(le7 el ttulo de la%$gina. #s lo que 3eremos como ttulo de la 3entana en los na3egadores que lo

%ermitan. #s como se conocer$ nuestra %$gina en algunos (uscadores ! en la agenda dedirecciones ;bookmarks< de los usuarios. 5or tanto? %arece im%ortante %ensarnos (iencomo llamarla.

"l cuer$o del documento

A=ora 3amos a indicar el contenido. Lo %rimero ser$ indicar que estamos en el cuer%odel documento7

-,D ... -,D

Luego %ondremos el ttulo algo recalcado7

-+#6T#R-HF ... -HF-+#6T#R

+on esto colocaremos el te&to centrado ;-+#6T#R< ! en )ormato -HF ;ca(ecera Fmeros entre 0 ! 2;1!33454< o (ien algo m$s )acil de recordar como es una serie de %ala(ras se%aradas

%or %untos ;222programacionnet


14/53

Listas

#&isten 3arios ti%os de listas en HTML. Todas ellas se %ueden meter unas dentro deotras )ormando $r(oles mu! (onitos ! %reciosos. Todos los ti%os siguen el siguiente)ormato7

-ti%olista-LI5rimer elemento-LI4egundo elemento-ti%olista

ti%olista %uede ser una de las siguientes7 DIR? DL? M#6/? ,L ! /L.

Listas desordenadas

La etiqueta -/L nos %ermite %resentar listas de elementos sin orden alguno. +ada

elemento de la lista ir$ normalmente %recedido %or un crculo. 5or e1em%lo?

-/L-LI5rimer elemento-LI4egundo elemento-/L

se 3er$ como

5rimer elemento 4egundo elemento

La etiqueta -/L admite estos %ar$metros7

ar#metro *tilidad Resultado

+,M5A+TIndica al na3egador que de(e re%resentar lalista de la manera m$s com%acta %osi(le.

5rimerelemento

4egundoelemento

T5#Jdisc?

circle? square

Indica al na3egador el di(u1o que%receder$ a cada elemento de la lista. 5arama!or )le&i(ilidad se admite tam(i@n como

%ar$metro de -LI.

Ti%o disc

o Ti%o circle

Ti%o square

Tam(i@n son listas desordenadas aquellas que utilizan las etiquetas -DIR ! -M#6/.#n %rinci%io tenan como %ro%sito re%resentar una lista estilo directorio;multicolumna< o ti%o men> ;una sola columna


15/53

La etiqueta -,L nos %ermite %resentar listas de elementos ordenados de menor ama!or. 6ormalmente cada elemento de la lista ir$ %recedido %or su n>mero en el orden.5or e1em%lo?

-,L

-LI5rimer elemento-LI4egundo elemento-,L

se 3er$ como

F. 5rimer elemento2. 4egundo elemento

La etiqueta -,L admite estos %ar$metros7

ar#metro *tilidad Resultado

+,M5A+T

Indica al na3egador que de(e re%resentarla lista de la manera m$s com%acta

%osi(le.

F. 5rimerelemento

2. 4egundoelemento

T5#JF? a? A?

i? I

Indica al na3egador el ti%o de numeracinque %receder$ a cada elemento de la lista.5ara ma!or )le&i(ilidad se admite tam(i@ncomo %ar$metro de -LI.

F. Ti%o F

a. Ti%o a

A. Ti%o A

i. Ti%o i

I. Ti%o I

4TARTJnum

Indica al na3egador el n>mero %or el quese em%ezar$ a contar los elementos de lalista.

. 5rimerelemento

". 4egundoelemento

VAL/#Jnum

Atri(uto de -LI? act>a como 4TART%ero a %artir de un elemento%redeterminado.

F. 5rimerelemento

". 4egundoelemento

. Tercerelemento

Listas de de)iniciones

#ste es el >nico ti%o de lista que no utiliza la etiqueta -LI. Al tener como o(1eti3o%resentar una lista de de)iniciones? de modo que tiene que re%resentar de manera distinta


16/53

el o(1eto de)inido ! la de)inicin. #sto se =ace %or medio de las etiquetas -DT !-DD7

-DL -DT5rimer elemento-DD#s un elemento mu! (onito.

-DT4egundo elemento-DD#ste? en cam(io? es %eor.-DL

se 3er$ como

5rimer elemento#s un elemento mu! (onito.

4egundo elemento#ste? en cam(io? es %eor.

La etiqueta -DL slo admite como %ar$metro el !a conocido +,M5A+T? que tiene el

mismo com%ortamiento que con los otros dos ti%os de lista anteriores.

Curso de HTML 4.0

Autor:Daniel Rodrguez Herrera Im$genes

o Im$genes ! enlaceso Alineacin res%ecto al te&to

Im#genes

5ara incluir gr$)icos e im$genes en nuestras %$ginas utilizaremos la etiqueta

-IM9de esta manera7-IM9 4R+J)ic=erogra)ico ALTJdescri%cion

#l %ar$metro 4R+ es%eci)ica el nom(re del )ic=ero que contiene el gr$)ico. Los)ormatos est$ndar en la red son el 9I' ! el 859. La >ltimas 3ersiones de 6etsca%e !#&%lorer ace%tan tam(i@n el )ormato 569.

#l %ar$metro ALT es%eci)ica el te&to que se mostrar$ en lugar del gr$)ico en aquellosna3egadores que no sean ca%aces de mostrarlos ;como el L!n&< ! en el su%uesto de queel usuario los =a!a desacti3ado. Algunos na3egadores lo muestran cuando %asamos elratn %or encima de la imagen. #s %or eso que? aunque algunos usuarios no lo lleguen a3er nunca? con3iene %onerlo siem%re. De =ec=o? el est$dar HTML ".0 o(liga a =acerlo.

#&isten dos atri(utos que? aunque o%cionales? con3iene indicar siem%re7 la altura ! laanc=ura del gr$)ico en %i&els. De este modo? el na3egador %uede mostrar un recuadrodel tamao de la imagen mientras la 3a le!endo de la red ! as %oder mostrar el resto dela %$gina correctamente mientras tanto.

-IM9 4R+Jgra)icosdBnldns.gi) ALTJ6etsca%e ".0 EIDTHJ H#I9HTJF
http://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/8/#imagenes%23imageneshttp://www.programacion.com/html/tutorial/curso/8/#seccion-Im%C3%A1genes-y-enlaces%23seccion-Im%C3%A1genes-y-enlaceshttp://www.programacion.com/html/tutorial/curso/8/#seccion-Alineaci%C3%B3n-respecto-al-texto%23seccion-Alineaci%C3%B3n-respecto-al-textohttp://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/8/#imagenes%23imageneshttp://www.programacion.com/html/tutorial/curso/8/#seccion-Im%C3%A1genes-y-enlaces%23seccion-Im%C3%A1genes-y-enlaceshttp://www.programacion.com/html/tutorial/curso/8/#seccion-Alineaci%C3%B3n-respecto-al-texto%23seccion-Alineaci%C3%B3n-respecto-al-texto


17/53

4e 3e as7

5ara los menos a3ezados en ingl@s? decir que EIDTH es la anc=ura ! H#I9HT laaltura.

Im#genes ! enlaces

4uele ser com>n incluir enlaces dentro de un gr$)ico. #n ese caso? %or de)ecto? losna3egadores le %ondr$n un (orde al gr$)ico %ara indicar que e)ecti3amente es un enlace.5r$ctico? %ero la ma!ora de las 3eces (astante %oco est@tico. 5or medio del %ar$metro,RD#R %odremos alterar el grosor de ese (orde o incluso eliminarlo %oniendolo acero.

-A HR#'J=tt%7BBB.netsca%e.com -IM9 4R+Jgra)icosdBnldns.gi) ALTJ6etsca%e ".0 EIDTHJ H#I9HTJF-A

4e 3e as7

4in em(argo?

-A HR#'J=tt%7BBB.netsca%e.com -IM9 4R+Jgra)icosdBnldns.gi) ALTJ6etsca%e ".0 EIDTHJ H#I9HTJF ,RD#RJ0-A

4e 3e as7

Alineacin res$ecto al te&to

5ara %oder maquetar con1untamente te&to ! gr$)icos? el HTML %ro%orciona? %or mediodel %ar$metro ALI96? las siguientes maneras de alinear una imagen res%ecto del te&toque la acom%aa7

Valor de ALI56 *tilidad Resultado

T,5+oloca el %unto m$s alto de la imagencoincidiendo con m$s alto de la lnea de te&toactual.

#ste esel te&to

MIDDL#Alinea el %unto medio ;en altura< de la imagen

con la (ase del te&to.#ste es

el te&to
http://www.netscape.com/http://www.netscape.com/


18/53

,TT,M;5orde)ecton a todas las etiquetas HTML7 o (ien indicando el nom(re? si es un colornormal? o (ien es%eci)icando el %orcenta1e de ro1o? 3erde ! azul ;cdigo R9< delmismo. Los colores reconocidos son los siguientes7

lac 4il3er 9ra! E=ite Maroon Red 5ur%le 'uc=sia

9reen Lime ,li3e elloB 6a3! lue Teal Aqua

-',6T colorJred#sto! en ro1o-',6T

#l modo de indicar el color R9 es el siguiente7

-',6T +,L,RJS''0000D-',6T-',6T +,L,RJS#'0000#-',6T-',6T +,L,RJSD'00009-',6T-',6T +,L,RJS+'0000R-',6T-',6T +,L,RJS'0000A-',6T-',6T +,L,RJSA'0000D-',6T

-',6T +,L,RJSC'0000A-',6T-',6T +,L,RJS'0000D-',6T
http://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/9/#font%23fonthttp://www.programacion.com/html/tutorial/curso/9/#color%23colorhttp://www.programacion.com/html/tutorial/curso/9/#size%23sizehttp://www.programacion.com/html/tutorial/curso/9/#tipo%23tipohttp://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/9/#font%23fonthttp://www.programacion.com/html/tutorial/curso/9/#color%23colorhttp://www.programacion.com/html/tutorial/curso/9/#size%23sizehttp://www.programacion.com/html/tutorial/curso/9/#tipo%23tipo


19/53

-',6T +,L,RJSG'0000,-',6T

Lo que nos mostrara lo siguiente7

D#9RADAD,

La %rimera com%onente en =e&adecimal es el ro1o? la segunda el 3erde ! la tercera elazul ;Red 9reen lue? R9


20/53

La estructura de un documento HTML se %uede resumir as7

ti%o de documento-HTML-H#AD

-TITL#titulo de la %$gina-TITL# cosas que a)ectan a la %$gina %ero no a su contenido-H#AD-,D %ar$metros contenido de la %$gina-,D-HTML

#n el ti%o de documento de(eremos es%eci)icar a que est$ndar del HTML res%ondenuestra %$gina entre una de las siguientes o%ciones7

-QD,+T5# HTML 5/LI+ I#T'DTD HTML 2.0#6+um%le el est$ndar HTML 2.0

-QD,+T5# HTML 5/LI+ E+DTD HTML .2 'inal#6+um%le el est$ndar HTML .2

-QD,+T5# HTML 5/LI+ E+DTD HTML ".0 Transitional#6 =tt%7B.orgTRR#+=tml"0loose.dtd

+um%le el est$ndar HTML ".0-QD,+T5# HTML 5/LI+ E+DTD HTML ".0#6 =tt%7B.orgTRR#+=tml"0strict.dtd

+um%le el est$ndar HTML ".0 ! no contiene adem$s elementos desaconse1a(les-QD,+T5# HTML 5/LI+ E+DTD HTML ".0 'rameset#6 =tt%7B.orgTRR#+=tml"0)rameset.dtd

#s una de)inicin de marcos que cum%le el est$ndar HTML ".0

#l HTML ".0 considera desaconse1a(les aquellos elementos que? a>n siendo so%ortados?=an sido sustituidos %or otros m$s %otentes !? %or ello? es %osi(le que sean eliminadosdel est$ndar HTML en el )uturo.

La ca(ecera

4uele ser el lugar m$s indicado %ara colocar aquellos elementos de la %$gina que no

alteren el contenido de la misma? aunque si la )orma de %resentarlo ! sucom%ortamiento. #s %or eso que es el lugar m$s recomenda(le %ara colocar losscripts!las =o1as de estilo? como 3eremos en los ca%tulos corres%ondientes.

Adem$s del ttulo de la %$gina? uno de los elementos que se %ueden incluir aqu son losM#TA. #ntre otras cosas? sir3en %ara indicar %ro%iedades de la %$gina como %ueda serel nom(re de su autor. 5or e1em%lo?

-M#TA 6AM#J9#6#RAT,R +,6T#6TJMozilla".0 fes ;EinCP Imero de o%ciones que %odremos 3er. 4i es ma!or que F 3eremos unalista de seleccin !? si no? 3eremos una lista des%lega(le.

M/LTI5L# 4i lo indicamos %odremos elegir m$s de una o%cin.

,5TI,6 estos7

ar#metro *tilidad

VAL/# #ste es el 3alor que asignar$ a la 3aria(le.

4#L#+T#D4i lo indicamos en una de las o%ciones esta ser$ la seleccionada %orde)ecto.

9otones del )ormulario

#&isten dos7 uno que se utiliza %ara mandar el )ormulario ! otro que sir3e %ara lim%iartodo lo que =a!a rellenado el usuario7

-I65/T T5#J4/MIT-R-I65/T T5#JR#4#T

Enviar consulta


25/53

Restablecer

5odemos cam(iar el te&to que el na3egador %one %or de)ecto en esos (otones utilizandoel %ar$metro VAL/#.

tros elementos

5uede que necesitos que el usuario sencillamente nos con)irme o niegue algo. Lo%odremos conseguir %or medio de controles de con)irmacin7

-I65/T 6AM#Jelleza T5#J+H#+K,bMe considerogua%oa

Me considerogua%oa

4i queremos que el control est@ acti3ado %or de)ecto le aadiremos el %ar$metro+H#+K#D. #l )ormulario asignar$ a la 3aria(le 6AM# el 3alor onu off.

5or >ltimo? e&iste la %osi(ilidad de que necesitemos que? en el )ormulario? tengamosalguna 3aria(le con un 3alor %re3iamente asignado. 5or e1em%lo? en todos los cursosque tengo el )ormulario es el mismo. de alguna manera tendr@ que distinguirloscuando me lleguen? digo !o. As que inclu!o algo como esto7

-I65/T T5#JHIDD#6 6AM#J+urso VAL/#JHTML ".0

De este modo !a s@ de que curso me est$n =a(lando.

Curso de HTML 4.0Autor:Daniel Rodrguez Herrera +ontroles a3anzados %ara )ormularios

o otoneso #tiquetaso Agru%acin de elementoso Desacti3acin de elementos

Controles a,an/ados $ara )ormularios

#l est$ndar HTML ".0 =a trado 3arias me1oras a los )ormularios? que acercan losmismos a las caractersticas que tienen en lengua1es como 8a3a o Visual asic.Desa)ortunadamente? el 6etsca%e "? lanzado al mercado antes de la a%ro(acin delHTML ".0? no im%lementa ninguna de estas me1oras? %or lo que los e1em%los de esteca%tulo slo ser$n contem%lados correctamente %or los usuarios de #&%lorer " ! ! losdel nue3o 6etsca%e *.

9otones
http://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/12/#formularios40%23formularios40http://www.programacion.com/html/tutorial/curso/12/#button%23buttonhttp://www.programacion.com/html/tutorial/curso/12/#label%23labelhttp://www.programacion.com/html/tutorial/curso/12/#fieldset%23fieldsethttp://www.programacion.com/html/tutorial/curso/12/#disabled%23disabledhttp://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/12/#formularios40%23formularios40http://www.programacion.com/html/tutorial/curso/12/#button%23buttonhttp://www.programacion.com/html/tutorial/curso/12/#label%23labelhttp://www.programacion.com/html/tutorial/curso/12/#fieldset%23fieldsethttp://www.programacion.com/html/tutorial/curso/12/#disabled%23disabled


26/53

/na de las cosas que m$s =an me1orado son los (otones. A=ora dis%onen de una etiqueta%ro%ia? de modo que se %ueda encerrar con ella todo ti%o de elementos HTML? comogr$)icos o? incluso? ta(las enteras.

+omo no %oda ser de otra manera? la etiqueta en cuestin se llama /TT,67

-/TT,6 T5#J(utton-ta(le (orderJF -tr-R -t=4o! una-t=-R -t=ta(la-t= -tr -tr -tdque est$-td -tden un (otn-td -tr

-ta(le-/TT,6

o! una ta(la

que est$ en un (otn

Los %ar$metros de dic=a etiqueta son los normales? T5#? que %odr$ tomar los 3alores4/MIT ;%or de)ecto


27/53

Lo (ueno que tiene es que se %uede usar sin %eligro? !a que no a)ectar$ a los usuarios dena3egadores antiguos.

Agru$acin de elementos

Hasta a=ora? no dis%onamos de ninguna manera de agru%ar 3isualmente 3arioscontroles? si no ec=$(amos mano de elementos que no son del )ormulario? como ta(las oim$genes.

A=ora? si encerramos una %arte de un )ormulario dentro de la etiqueta 'I#LD4#T semostrar$ un rect$ngulo alrededor de los mismos. 4i adem$s? le indicamos un ttulo %ormedio de la etiqueta L#9#6D nuestros )ormularios quedar$n =ec=os un 3erdadero

%rimor7

-'I#LD4#T-L#9#6DMi =ermoso

)ormulario-L#9#6D -LA#L Mi te&to7 -I65/T T5#Jte&t -LA#L-'I#LD4#T

Mi =ermoso )ormularioMi te&to7

L#9#6D admite como %ar$metro ALI96? que indicar$ en qu@ lugar se coloca el ttulo.5or de)ecto es T,5 ;arri(a


28/53

Ma$as

Hemos 3isto que %odemos =acer enlaces de te&to ! de gr$)icos. 5ero tam(i@n e&iste otra%osi(ilidad7 que dentro de una sola imagen %odamos acceder a 3arios enlaces. 4e =acedeclarando zonas dentro de la imagen ;rect$ngulos? crculos? etc..


29/53

irregularesquina del %olgono. La >ltima %are1a de coordenadas se unir$a la %rimera %ara cerrar el %olgono.

Toda la imagenD#'A/LT

6o se indican.

Cmo usar un ma$a

A=ora que =emos de)inido un ma%a? slo queda asignarlo a una imagen. #sto se =acedel siguiente modo7

-IM9 4R+J... /4#MA5JSmima%a

4iem%re tenemos que aadir al comienzo del nom(re de nuestro ma%a una almo=adilla;S


30/53

Las ta(las se de)inen de la siguiente manera. 5rimero? las caractersticas de la ta(la?luego las de cada )ila ! dentro de @sta? cada celda. As %ues? una ta(la con 2 )ilas ! columnas se declarar$ as7

-TAL#

-TR-TDF?F-TD-TDF?2-TD-TDF?-TD -TR -TR-TD2?F-TD

-TD2?2-TD-TD2?-TD -TR-TAL#

F?F F?2 F?2?F 2?2 2?

+omo %od@is 3er ;o me1or no 3er< la ta(la no tiene muc=o as%ecto de ta(la. :uedarame1or con unos (ordes? NnoO 5uede que tam%oco le 3iniese mal ma!or es%acio entreceldas o ma!or anc=ura. #stas son las cosas que %odremos cam(iar con los atri(utos de

TAL#7

,RD#R#s%eci)ica el grosor del (orde que se di(u1ar$ alrededor de las celdas. 5orde)ecto es cero? lo que signi)ica que no di(u1ar$ (orde alguno.

+#LL45A+I69

De)ine el n>mero de %i&els que se%arar$n las celdas.

+#LL5ADDI69

#s%eci)ica el n>mero de %i&els que =a(r$ entre el (orde de una celda ! sucontenido.

EIDTH#s%eci)ica la anc=ura de la ta(la. 5uede estar tanto en %i&els como en

%orcenta1e de la anc=ura total dis%oni(le %ara @l ;%ondremos F00h siqueremos que ocu%e todo el anc=o de la 3entana del na3egador


31/53

A=ora que =emos de)inido la ta(la nos toca =acer lo mismo con las )ilas. +ada )ila sede)ine con una etiqueta TR? que tiene los siguientes atri(utos7

ALI96

Alinea el contenido de las celdas de la )ila =orizontalmente a izquierda ;L#'T


32/53

-TD?-TD -TR-TAL#

+omo %odemos 3er? cuando declaramos un celda con R,E45A6 o +,L45A6? no

de(eremos declarar las celdas a(sor(idas o la creacin de la ta(la se nos com%licar$de =orri(le manera.

T;tulo de la ta(la

5or >ltimo? 3amos a 3er como de)inir un ttulo a la ta(la. #sto se =ace %or medio de laetiqueta +A5TI,6. 5ara 3er cmo )unciona? 3amos a incluirlo en la declaracin de lata(la anterior7

-TAL# ,RD#RJF -+A5TI,6 #1em%lo de ta(las -+A5TI,6...-TAL#

"8em$lo de ta(las

F?F ! F?2 F?

2?F ! ?F2?2 2?

?2 ?

#sta etiqueta admite slo un %ar$metro7 ALI96? que es %or de)ecto T,5. 4i lode)inimos como ,TT,M el ttulo se colocar$ al )inal de la ta(la en lugar delcomienzo.

Curso de HTML 4.0

Autor:Daniel Rodrguez Herrera Marcos

o #tiqueta -'RAM#4#To #tiqueta -'RAM#o Acceso a otros marcos

Marcos

/n marco ;oframe< es una 3entana inde%endiente dentro de la 3entana general delna3egador. +ada marco tendr$ sus (ordes ! sus %ro%ias (arras de des%lazamiento. Ascada %$gina se di3idir$ en la %r$ctica en 3arias %$ginas inde%endientes.

5ara crearlos necesitaremos un documento HTML es%ec)ico? que llamaremosdocumento de de)inicin de marcos. #n @l es%eci)icaremos el tamao ! %osicin de cadamarco ! el documento HTML que contendr$. Vamos a 3er un e1em%lode este ti%o dedocumento7

-HTML-H#AD

-TITL#Mi %rimera %$gina con marcos-TITL#-H#AD
http://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/15/#marcos%23marcoshttp://www.programacion.com/html/tutorial/curso/15/#seccion-Etiqueta-%3CFRAMESET%3E%23seccion-Etiqueta-%3CFRAMESET%3Ehttp://www.programacion.com/html/tutorial/curso/15/#seccion-Etiqueta-%3CFRAME%3E%23seccion-Etiqueta-%3CFRAME%3Ehttp://www.programacion.com/html/tutorial/curso/15/#seccion-Acceso-a-otros-marcos%23seccion-Acceso-a-otros-marcoshttp://www.programacion.com/cursos/curso/ejemplos/marcos1.htmlhttp://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/15/#marcos%23marcoshttp://www.programacion.com/html/tutorial/curso/15/#seccion-Etiqueta-%3CFRAMESET%3E%23seccion-Etiqueta-%3CFRAMESET%3Ehttp://www.programacion.com/html/tutorial/curso/15/#seccion-Etiqueta-%3CFRAME%3E%23seccion-Etiqueta-%3CFRAME%3Ehttp://www.programacion.com/html/tutorial/curso/15/#seccion-Acceso-a-otros-marcos%23seccion-Acceso-a-otros-marcoshttp://www.programacion.com/cursos/curso/ejemplos/marcos1.html


33/53

-'RAM#4#T +,L4J20h?0h -'RAM# 6AM#Jindice 4R+Jindice.=tml -'RAM# 6AM#J%rinci%al 4R+Jintroduccion.=tml -6,'RAM#4 -5Lo siento? %ero slo %odr$s 3er esta %$gina

si tu na3egador tiene la ca%acidad de 3isualizar marcos.-5 -6,'RAM#4-'RAM#4#T-HTML

Vamos a e&%licar detalladamente este e1em%lo antes de in3estigar algo m$s a )ondo cadauna de las etiquetas. Vemos que la ca(ecera de la %$gina es similar a un documentonormal? %ero el =a(itual ,D es sustituido %or un 'RAM#4#T. #n cada 'RAM#4#Tse di3ide la 3entana actual ;sea la general o un marco< en 3arias 3entanas de)inidas o

%or el %ar$metro +,L4 o %or R,E4. #n @ste? se%arado %or comas? se de)ine el n>mero

de marcos ! el tamao de cada uno.

Dentro del -'RAM#4#T se =acen dos cosas. 5rimero? de)inir cada uno de los marcos%oniendoles un nom(re ! es%eci)icando qu@ )ic=ero HTML le corres%onde mediante laetiqueta -'RAM#. 5or >ltimo? es%eci)icamos lo que 3er$ el usuario en el su%uesto;cada 3ez m$s raro< de que su na3egador no so%orteframesdentro de la etiqueta-6,'RAM#4. A=ora 3eremos todos estos elementos en ma!or detalle.

"tiqueta 1'RAM""T

4eg>n el est$ndar? esta etiqueta slo de(era contener el n>mero ! tamao de cadamarco? %ero las e&tensiones de 6etsca%e ! #&%lorer al est$ndar o(ligan a estudiar un %arde %ar$metros m$s.

#n general? los na3egadores di(u1an un (orde de se%aracin entre los marcos. 4i deseaseliminarlo %uedes =acerlo de dos maneras7 en las etiquetas -'RAM# de cada una delos marcos contiguos al (orde a eliminar o inclu!endo el %ar$metro'RAM#,RD#RJ0 en el -'RAM#4#T.

+uando eliminas ese (orde? %odr$s 3er cmo el na3egador de1a a>n un =ueco entremarcos. #ste se elimina aadiendo los %ar$metros 'RAM#45A+I69J0 ,RD#RJ0.

Vamos a e&aminar %or >ltimo los %ar$metros +,L4 ! R,E4. De(eremos asignarlesuna lista de tamaos se%arada %or comas. 4e admiten los siguientes )ormatos de tamao7

Con $orcenta8es:Al igual que con las ta(las? %odemos de)inir el tamao de unmarco como un %orcenta1e del es%acio total dis%oni(le.

A(solutos:4i %onemos un n>mero a secas? el marco corres%ondiente tendr$ eltamao es%eci)icado en %i&els.

o(re el es$acio so(rante:4i colocamos un asterisco ;< estaremos indicandoque queremos todo el es%acio so(rante %ara ese marco. 5odemos %oner estesm(olo en 3arios marcos? que se re%artir$n el es%acio equitati3amente como

(uenos =ermanos. 4i queremos que uno tenga m$s de(eremos %onerle al


34/53

asterisco un n>mero delante. As? un marco con un es%acio de ser$ tres 3ecesm$s grande que su com%aero? que tiene un asterisco slo? el %o(re.

5or e1em%lo? el siguiente cdigo es una muestra de cmo com(inar los tres m@todos7

-'RAM#4#T +,L4JF0h??200?2

4u%ongamos que el anc=o total de la 3entana son *"0 %i&els. #l %rimer marco ocu%ar$el F0h? es decir? *" %i&els. #l tercero necesita 200? luego nos quedan "G* %ara los otrosdos. +omo el cuarto de(e tener el do(le de es%acio que el segundo? tenemosa%ro&imadamente F %i&els %ara este >ltimo ! F* %ara el cuarto marco.

Ha! que tener cuidado cuando usamos 3alores a(solutos en la de)inicin de marcosPde(emos asegurarnos de tener al menos un marco con un tamao relati3o si queremosestar seguros del as%ecto )inal de la %$gina.

5or >ltimo? indicar que las etiquetas -'RAM#4#T se %ueden anidar. #sto se =ace%oniendo otro -'RAM#4#T donde normalmente colocamos las etiquetas -'RAM#tal que as7

-'RAM#4#T +,L4J20h?0h -'RAM# 6AM#Jindice 4R+Jindice.=tml -'RAM#4#T R,E4J?0 -'RAM# 6AM#J%rinci%al 4R+Jintroduccion.=tml -'RAM# 6AM#Je1em%los 4R+Je1em%lo.=tml -'RAM#4#T-'RAM#4#T

#l resultado del anidamiento lo %odr@is contem%lar aqu.

"tiqueta 1'RAM"

#sta etiqueta de)ine tan slo las caractersticas de un marco determinado? no de uncon1unto de ellos. #stos son los %ar$metros que admite7

6AM# Asigna un nom(re a un marco %ara que des%u@s %odamos re)erirnos a @l.4R+ Indica la direccin del documento HTML que ocu%ar$ el marco.

4+R,LLI69

Decide si se colocan o no (arras de des%lazamiento al marco %ara que%odamos mo3ernos %or su contenido. 4u 3alor es %or de)ecto A/T,? quede1a al na3egador la decisin. Las otras o%ciones que tenemos son #4 !

6,.6,R#4I# 4i lo es%eci)icamos el usuario no %odr$ cam(iar de tamao el marco.

'RAM#,RD#R

Al igual que su =omnimo en la etiqueta -'RAM#4#T? si lo igualamosa cero se eliminar$ el (orde con todos los marcos contiguos que tengantam(i@n este 3alor a cero.

MAR9I6EIDTH

5ermite cam(iar los m$rgenes =orizontales dentro de un marco. 4ere%resenta en %i&els.

MAR9I6H#I9HT

Igual al anterior %ero con m$rgenes 3erticales.
http://www.programacion.com/cursos/curso/ejemplos/marcos2.htmlhttp://www.programacion.com/cursos/curso/ejemplos/marcos2.html


35/53

Acceso a otros marcos

5or de)ecto? cuando %ulsamos so(re un enlace situado dentro de un marco? la nue3a%$gina a la que queremos acceder la 3eremos encerrada en ese mismo marco. #s %osi(leque deseemos que esto no ocurra. 5or e1em%lo? si tenemos un marco que no sir3e de

ndice ! otro donde mostramos los contenidos sera desea(le que los enlaces del marcondice se a(rieran en el otro marco. #sto es %osi(le =acerlo gracias al %ar$metroTAR9#T.

#ste %ar$metro se %uede colocar en tres etiquetas7 -A? -AR#A ! -A4#. #n lasdos %rimeras sir3e %ara indicar el marco en el que a(riremos ese enlace en %articular !el >ltimo modi)icaremos el marco en el que %or de)ecto se nos muestran todos losenlaces.

5ero %ara que un %ar$metro )uncione? es =a(itual que le asignemos un 3alor? ! TAR9#Tno es una e&ce%cin. 5ara indicarle el marco que deseamos le asignaremos el nom(re

del mismo. As? en los e1em%los anteriores? si en el marco llamado indice tenemos unenlace que queremos se a(ra en el marco %rinci%al %ondremos7

-A HR#'J%agina.=tml TAR9#TJ%rinci%al

Tam(i@n e&isten cuatro nom(res reser3ados que %odremos utilizar en el %ar$metroTAR9#T7


36/53

Las =o1as de estilo intentan se%arar el contenido de un %$gina de la )orma de %resentarloen %antalla. #sto lo =acen %ersoni)icando los cam(ios que las etiquetas de )ormatoHTML realizan en nuestro te&to. 5or e1em%lo? sa(emos que usando -5 tendremos una

%$rra)o nue3o con una se%aracin del anterior determinada? etc.. +on las =o1as de estilotam(i@n %odremos decirle a un %$rra)o que todo su te&to sea 3erde ! que adem$s 3a a

tener un margen izquierdo de 0 %i&els. 5or e1em%lo.

#l %rimer na3egador en so%ortar =o1as de estilo )ue el #&%lorer .0. /tiliza la llamadasinta&is en cascada. #l +ommunicator ace%ta esa sinta&is e introduce una nue3a (asadaen 8a3a4cri%t. 4in em(argo? como el est$ndar m$s comunmente ace%tado de sinta&is de=o1as de estilo es el de cascada? ser$ este el >nico que 3eamos. Vamos a em%ezar con une1em%lo7

-4TL# T5#Jte&tcss 5 jcolor7 greenP marginle)t7 0Pk-4TL#

Vamos a detenernos en todos los elementos. 5ara em%ezar? la etiqueta HTML con la quede(eremos englo(ar las =o1as de estilo ser$ -4TL#? que slo %odr$ estar situada enla ca(ecera de la %$gina. 4u %ar$metro T5# indica la sinta&is que utilizaremos %arade)inirlas. #n el caso de las =o1as en cascada de(er$ ser te&tcss.

A=ora e&aminemos la =o1a de estilo %ro%iamente dic=a. Indicaremos %rimero la etiquetaque deseamos %ersonalizar. 4er$ -5. Des%u@s? entre lla3es? %ondremos una lista de lascosas que queremos modi)icar. #n nuestro caso son dos? el color ;en el )ormato =a(itual

Ha! que destacar que? aunque muc=as 3eces los na3egadores tengan una cierta mangaanc=a? la sinta&is +44 ;+ascading 4t!le 4=eet< es sensi(le a la di)erencia entrema!$sculas ! min>sculas. +on3iene tener cuidado.

#l HTML ".0 %ermite declarar )uera de la %$gina las =o1as de estilo? lle3ando de estemodo al e&tremos su )iloso)a de se%arar )orma ! contenido. 4i colocamos nuestras=o1as de estilo en un )ic=ero llamado estilos.css ;solo las =o1as? no la etiqueta-4TL#< no tendremos m$s que incluir la siguiente lnea en la ca(ecera de nuestrodocumento HTML %ara incluirlas en nuestras %$ginas7

-LI6K R#LJst!les=eet HR#'Jestilos.css T5#Jte&tcss

Vamos a 3er cmo quedara un %$rra)o que siguiese la =o1a de estilo anterior

4i la cosa 3a (ien? este %$rra)o estar$ escrito en 3erde ! con un margen izquierdode 0 %i&els. 5recioso? NnoO em(argo? esto! con3encido de que los m$s a3is%adosse =a(r$n dado cuenta de que les esto! ocultando algo. 5or lo que =e dic=o =astaa=ora la %ersonalizacin de una etiqueta de(era ser general ! en esta %$gina sloeste %$rra)o est$ modi)icado. 6o os %reocu%@is demasiado? a=ora os cuento comose =ace.

Clases


37/53

Hasta a=ora =a(amos de)inido estilos %ara una etiqueta determinada. 5ero tam(i@n%odemos =acerlo %ara una clase determinada. N#sto que signi)icaO 5ues que si? %ore1em%lo? de)inimos la =o1a de estilo de la clase 3erde de la siguiente manera7

5.3erde jcolor7 greenP marginle)t7 0%&Pk

slo estar$n 3erdes ! con un margen izquierdo de 0 %i&els aquellos %$rra)os de)inidoscon -5 +LA44J3erde. As de sencillo.

Am%liando un %oco m$s las %osi(ilidades de las clases? se %ueden realizar e&ce%ciones.4u%ongamos que tenemos unos %$rra)os que queremos que tengan unos m$rgenesdeterminados ! color 3erde. deseamos que uno solo de esos %$rra)os? con los mismom$rgenes? sea azul. 5odramos de)inir dos clases distintas? %ero =a! un m@todo me1or7usar el %ar$metro ID. 5or e1em%lo7

all.3erde jcolor7 greenP marginle)t7 F0%&Pk

Se1F j color7 (luePk

A=ora todos los %$rra)os de clase 3erde seran? o(3iamente? 3erdes ! con un margen deF0 %i&els. 4in em(argo el %$rra)o de)inido %or -5 +LA44J3erde IDJe1F ser$ azul7

#ste %$rra)o es mu! 3erde.

anda que este...

4in em(argo? este no? )1ate que curioso.

"tiquetas 1A6 ! 1IV

5uede que? a 3eces? no queramos modi)icar el com%ortamiento de un elemento sino quecreemos un estilo que queremos act>e slo? un estilo com%leto creado de la nada. /naetiqueta nue3a ! %ro%ia. #ntonces? Nqu@ =acemosO /tilizar las etiqueta -45A6 !-DIV.

#l m@todo es sim%le. De)inimos una clase ro1o que sim%lemente modi)ique el color ;queser$ ro1o


38/53

kall.som(ra jmarginto%7 2%&Pmarginle)t7 2%&Pcolor7 (lacP

)ontsize7 20%&Pk

cu!os atri(utos e&%licaremos en la re)erencia de las =o1as de estilo? ! %onemos elsiguiente cdigo HTML7

-DIV ALI96J+#6T#R +LA44Jsom(ra#l mara3illoso curso de HTML-DIV-DIV ALI96J+#6T#R +LA44Jtitulo#l mara3illoso curso de HTML-DIV

o(tendremos este (ello e)ecto7

#l mara3illoso curso de HTML#l mara3illoso curso de HTML

#n el siguiente ca%tulo ten@is una gua de re)erencia con todos ;o casi todos< losatri(utos que se %ueden modi)icar con +44.

Curso de HTML 4.0

Autor:Daniel Rodrguez Herrera Ho1as de estilo7 re)erencia

o 5ro%iedades de (loqueo 5ro%iedades de ti%o de letrao 5ro%iedades de )ormato del te&too 5ro%iedades de color ! )ondoo 5ro%iedades de clasi)icacin

Ho8as de estilo: re)erencia

#n este ca%tulo 3amos a 3er todas ;o casi todas< las %ro%iedades que se %ueden alterar%or medio de las =o1as de estilo. Ha! que indicar que algunos de ellos no los so%orta el#&%lorer ! en cam(io otros no los entiende el +ommunicator. As que es recomenda(le

%ro(arlos en am(os e&%loradores antes de incor%orarlos a nuestras %$ginas.

ro$iedades de (loque

Vamos a em%ezar con las %ro%iedades de (loque? que de)inen cosas como los m$rgeneso la colocacin de (loques de contenido HTML7

ro$iedad escri$cin osi(les ,alores

marginto%? marginrig=t?

margin(ottom? marginle)t?-(r margin7 to% rig=t

Distancia mnima entre un (loque !

los dem$s elementos. Tanto margincomo margins;< se utilizan %ara

tamao? %orcenta1e

o auto. 5or de)ectoes cero.
http://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/17/#refhojas%23refhojashttp://www.programacion.com/html/tutorial/curso/17/#seccion-Propiedades-de-bloque%23seccion-Propiedades-de-bloquehttp://www.programacion.com/html/tutorial/curso/17/#seccion-Propiedades-de-tipo-de-letra%23seccion-Propiedades-de-tipo-de-letrahttp://www.programacion.com/html/tutorial/curso/17/#seccion-Propiedades-de-formato-del-texto%23seccion-Propiedades-de-formato-del-textohttp://www.programacion.com/html/tutorial/curso/17/#seccion-Propiedades-de-color-y-fondo%23seccion-Propiedades-de-color-y-fondohttp://www.programacion.com/html/tutorial/curso/17/#seccion-Propiedades-de-clasificaci%C3%B3n%23seccion-Propiedades-de-clasificaci%C3%B3nhttp://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/17/#refhojas%23refhojashttp://www.programacion.com/html/tutorial/curso/17/#seccion-Propiedades-de-bloque%23seccion-Propiedades-de-bloquehttp://www.programacion.com/html/tutorial/curso/17/#seccion-Propiedades-de-tipo-de-letra%23seccion-Propiedades-de-tipo-de-letrahttp://www.programacion.com/html/tutorial/curso/17/#seccion-Propiedades-de-formato-del-texto%23seccion-Propiedades-de-formato-del-textohttp://www.programacion.com/html/tutorial/curso/17/#seccion-Propiedades-de-color-y-fondo%23seccion-Propiedades-de-color-y-fondohttp://www.programacion.com/html/tutorial/curso/17/#seccion-Propiedades-de-clasificaci%C3%B3n%23seccion-Propiedades-de-clasificaci%C3%B3n


39/53

(ottom le)tcam(iar todos estos atri(utos a la3ez.

%addingto%? %addingrig=t?%adding(ottom? %addingle)t?-(r %adding7 to% rig=t

(ottom le)t

Distancia entre el (orde ! elcontenido de un (loque.

tamao? %orcenta1eo auto. 5or de)ecto

es cero.(orderto%Bidt=? (orderrig=tBidt=? (order(ottomBidt=?

(orderle)tBidt=?-(r (orderBidt=7 to% rig=t (ottom le)t

Anc=ura del (orde de un (loque. num@rico

(orderst!le #stilo del (orde de un (loque.none? solid o D?

%or de)ectoninguno ;none


40/53

6uesto siguiente o(1eti3o 3an a ser las %ro%iedades de )ormato del te&to que cualquier%rocesador de te&tos nos %ermite cam(iar.


line=eig=t Interlineado. n>mero o %orcenta1e.

te&tdecoration

#)ectos 3ariados so(reel te&to.

none? underline ;su(ra!ado


41/53

comienzo del mismo.u%%eral%=a? none o la direccin deun gr$)ico

B=ites%aceDecide como se mane1an loses%acios? si de manera normal o comosucede dentro de la etiqueta -5R#.

normal ! %re

a=ora... !a no =a! m$s... [%or )n aca(amosQ De1adme que res%ire un %oco ! a=oracontinuamos.

Curso de HTML 4.0

Autor:Daniel Rodrguez Herrera Lengua1es de scri%t

o 8a3ascri%t

Lengua8es de script

/n lengua1e descriptes un %equeo lengua1e de %rogramacin cu!o cdigo se insertadentro del documento HTML. #ste cdigo se e1ecuta en el na3egador del usuario alcargar la %$gina? o cuando sucede algo es%ecial como %uede ser el %ulsar so(re unenlace.

#stos lengua1es %ermiten 3ariar din$micamente el contenido del documento? modi)icarel com%ortamiento normal del na3egador? 3alidar )ormularios? realizar %equeos trucos3isuales? etc... 4in em(argo? con3iene recordar que se e1ecutan en el na3egador delusuario ! no en la m$quina donde est@n alo1adas? %or lo que no %odr$n realizar cosascomo mane1ar (ases de datos. #sto =ace que los contadores ;%or e1em%lo< se de(anrealizar de otra manera? utilizando %rogramas +9I.

#l %rimer lengua1e descriptque 3i la luz )ue el 8a3a4cri%t de 6etsca%e. 6acido con la3ersin 2.0 de este na3egador ! (asado en la sinta&is de 8a3a? su utilidad ! el casia(soluto mono%olio que entonces e1erca 6etsca%e en el mercado de na3egadores

%ermitieron que se %o%ularizara ! e&tendiera su uso.

#l m$&imo ri3al del 6etsca%e 6a3igator? el Internet #&%lorer de Microso)t? comenz a

so%ortar este lengua1e en su 3ersin .0. 'ue tam(i@n entonces cuando introdu1o el>nico ri3al serio que el 8a3a4cri%t =a tenido en el mercado de los lengua1es descript7 elV4cri%t. asado en el lengua1e A4I+? no =a tenido e&cesi3a di)usin en Internetde(ido a la %re3ia im%lantacin del 8a3a4cri%t ! a que son de %arecida )uncionalidad?

%ero s es utilizado dentro de Intranets (asadas en el #&%lorer ! dentro de otrasa%licaciones de Microso)t? como II4? Access? Eord? etc..

>a,ascri$t

+omo este curso est$ orientado a Internet? no 3amos a 3er nada de V4cri%t aqu %or lasrazones comentadas anteriormente. 5ero %ara ilustrar la utilidad de los lengua1es de

scri%t? 3amos a realizar una %equea introduccin al 8a3ascri%t. 4i te sientes interesado?3isita mi curso de 8a3a4cri%t F.2%ara ma!or in)ormacin so(re el tema.
http://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/18/#script%23scripthttp://www.programacion.com/html/tutorial/curso/18/#seccion-Javascript%23seccion-Javascripthttp://www.programacion.com/cursos/curso/tutorial.php?id=jshttp://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/18/#script%23scripthttp://www.programacion.com/html/tutorial/curso/18/#seccion-Javascript%23seccion-Javascripthttp://www.programacion.com/cursos/curso/tutorial.php?id=js


42/53

Vamos a realizar nuestro %rimer %rograma en 8a3a4cri%t. Haremos surgir una 3entanaque nos muestre el )amoso mensa1e =ola? mundo. As %odremos 3er los elementos

%rinci%ales del lengua1e. #l siguiente cdigo es una %$gina Ee( com%leta con un (otnque? al %ulsarlo? muestra el mensa1e.

%olamundo.%tml-HTML-H#AD-4+RI5T LA69/A9#J8a3a4cri%t -Q )unction HolaMundo;< j alert;[Hola? mundoQ


43/53

-I65/T T5#J(utton 6AM#Joton VAL/#J5ulsameon+licJHolaMundo;


44/53

-4TL# T5#Jte&tcss Smica%a j%osition7a(soluteP to%7F00%&P le)t720%&Pk-4TL#

#sto colocara a la ca%a que =emos denominado mica%a a 20 %i&els de la izquierda de la

%$gina ! a F00 del comienzo de la misma. Mu! (ien? %ero... Ndonde escri(imos lo quequeremos que contenga la ca%aO /tilizaremos %ara ello la etiqueta -45A67

-DIV IDJmica%a -HF#l ttulo de la ca%a-HF -5Aqu es donde ira el te&to. ...-DIV

Las ca%as que =emos de)inido =asta a=ora se colocan en una %osicin determinada de la%$gina. 5ero e&iste otro ti%o de ca%as llamadas )lotantes cu!a colocacin de%ende? en

cam(io? de la %osicin dentro del cdigo )uente de la %$gina donde las =a!amoscolocado. 4e de)inen as7

-4TL# T5#Jte&tcss S)lotante j%osition7 relati3eP le)t7 20%&P to%7 F00%&Pk-4TL#

5uedes 3er un e1em%loque te mostrar$ las di)erencias entre ca%as a(solutas ! relati3as.

ro$iedades

#&isten 3arias %ro%iedades de las ca%as que %odemos modi)icar? como son la %osicin?la 3isi(ilidad? el orden en que se %onen en %antalla? etc... 4on estos7


le)t ! to%

4it>an la esquinasu%erior izquierda de laca%a res%ecto a laesquina su%eriorizquierda de la ca%adonde est@ metida. Ha!

que tener en cuenta queel documento com%letotam(i@n se considera unaca%a.

distancia en %i&els?%or de)ecto cero.

Bidt= ! =eig=tDeterminan la anc=ura !altura de la ca%a.

un tamao en%i&els.

cli% 6os %ermite de)inir el$rea que se %odr$ 3erdentro de la ca%a. 5ore1em%lo? cli%7rect;20%&

0%& "0%& F0%&


45/53

un cuadro 3isi(le cu!aesquina su%eriorizquierda est$ a F0 %i&els

%or la izquierda ! 20 %orarri(a de la de la ca%a !

cu!o tamao sera de 0F0 de anc=o ! "020 dealto.

zinde&

Las ca%as con un ma!orzinde& se colocar$n m$sarri(a ;se di(u1ar$n al)inal? encima de lasotrasnico7 dosca%as no %ueden tener elmismo zinde&.

n>mero %ositi3o?%or de)ecto lasca%as de)inidas enel cdigo HTMLm$s tarde est$n m$sarri(a.

3isi(ilit!#s%eci)ican si la ca%ade(e 3erse o estar oculta.

3isi(le? =idden;oculta< o in=erit;=ereda la3isi(ilidad de laca%a %adre


46/53

A>n cuando les %ueda %arecer incre(le a algunos =om(res de %oca )e? es %osi(leescuc=ar sonidos ;o m>sica< desde el %ro%io na3egador. Tanto 6etsca%e como #&%lorerincor%oran desde =ace tiem%o la ca%acidad de re%roducir sonido. #l >nico %ro(lema esque los arc=i3os suelen ser grandes !? siendo algo innecesario ! su%er)luo? %oca genteinclu!e melodas en sus %$ginas.

Los )ormatos que se %uede asegurar que los na3egadores re%roducir$n son los arc=i3osEAV ! MID. 5ara %oder re%roducir otros necesitar$n elplug6ino aadido necesario?como %uede ser el Real Audio %ara los arc=i3os RA o el Mod5lug %ara los M,D !deri3ados.

onido acti,ado $or el usuario

La manera m$s sencilla de incluir sonidos es de1ando al usuario la decisin deescuc=arlos o no. 5ara =acerlo incluiremos el sonido en el %ar$metro HR#' de unenlace? como si )uera una %$gina HTML7

-A HR#'J=ola.Ba34i %ulsas te saludo-A

onido de )ondo

Lo del sonido de )ondo !a es m$s com%licado? !a que 6etsca%e ! #&%lorer o)recensoluciones %ro%ietarias? distintas e incom%ati(les de =acer sonar un arc=i3o de )ondo.

#n #&%lorer? desde la 3ersin 2.0? se %ueden incluir )ondos sonoros utilizando laetiqueta 94,/6D7

-94,/6D 4R+Jmusica.mid

#l %ar$metro 4R+ indicar$ el arc=i3o a re%roducir. #sta etiqueta admite tam(ien otro%ar$metro? L,,5? que indica el n>mero de 3eces consecuti3as que sonar$ el )ic=ero. 4ise indica L,,5Jin)inite? el arc=i3o se re%roducir$ inde)inidamente? mientras estemosen la %$gina.

6etsca%e utiliza su etiqueta -#M#D. Tericamente? esta etiqueta de(era ser3ir %araunir o(1etos de 3arios ti%os a la %$gina Be(? %ero en la %r$ctica slo se utiliza %ara esto.#sta etiqueta tiene los siguiente %ar$metros7

ar#metro *tilidad

4R+ +ontiene el nom(re de arc=i3o de sonido a re%roducir EIDTH !H#I9HT

#n 6etsca%e a%arece un %equeo re%roductor? estos %ar$metroses%eci)ican su tamao.

A/T,4TARTJtrue

Arranca autom$ticamente la re%roduccin.

L,,5JtrueRe%roduce ininterrum%idamente el )ic=ero =asta que salimos de la

%$gina.HIDD#6Jtrue ,culta el re%roductor.
http://www.programacion.com/cursos/curso/sonidos/hola.wavhttp://www.programacion.com/cursos/curso/sonidos/hola.wav


47/53

4in em(argo? ! de(ido a algunos (ugs? si queremos re%roducir in)initamente un arc=i3ocon el re%roductor oculto? de(eremos incluir todos los %ar$metros? inclu!endo EIDTH! H#I9HT. Adem$s? si el usuario tiene alg>nplug6inde sonido e&trao? en lugar delque 3iene con 6etsca%e? es %osi(le que de1e de )uncionar correctamente.

Dado que am(as etiquetas son incom%ati(les entre s? (asta con incluir las dos... o?me1or dic=o? (asta(a. A=ora el #&%lorer es ca%az de inter%retar -#M#D? %ero noe&actamente de la misma manera? lo que %ro3oca que a%arezca una 3entana a%arte conel re%roductor. #n de)initi3a? la me1or manera de mostrar una m>sica de )ondo esusando un %equeoscriptque a3erigue en qu@ na3egador est$ instalado ! discrimine.

+omo no %oda ser menos? en este e1em%lo%od@is 3er cmo suena algo de )ondo ! elcdigo necesario.

Curso de HTML 4.0

Autor:Daniel Rodrguez Herrera 9ua de estilo

o +ontenidoo 6a3egacino #structura de las %$ginaso Accesi(ilidado Diseoo Mantenimiento ! %rue(as

5u;a de estilo

A lo largo de mi deam(ular %or Internet? =e ido desarrollando %equeas manas ! 3isto ocreido 3er de)ectos en las %$ginas Be(. 4in em(argo? des%u@s de leer un %ar de cursosde HTML ! alguna que otra gua de estilo? me =e dado cuenta de que la ma!ora de lagente %arece %ensar como !o.

As %ues? este ca%tulo consiste en una serie de conse1os que te %ueden ser3ir %ara =acertu %$gina m$s atracti3a ! de ma!or calidad. #s recomenda(le leerla aunque luego no lasigas al %ie de la letra7 te %ueden dar una idea de lo que de(e ser una Be(.

Contenido

+ualquier %$gina ser$ 3isitada si su contenido es interesante. +asi da lo mismo suestructura ! diseo si la in)ormacin es lo su)icientemente interesante. As que quiz$ seacon3eniente detenernos un %oco en qu@ es lo que de(e tener nuestra %$gina Be(.

#n Internet uno 3isita lo que quiere? ! la ma!ora de las 3eces lo que a la gente leinteresa ! lo que a nosotros nos interesa que 3ean no es lo mismo. As %ues? el me1ormodo de conseguir que 3ean lo que queremos es o)recerles lo que quieren. /n e1em%lolo tienes en mi %$gina %ersonal. #n ella %ongo cosas que me interesa %oner a m %eroque de %or s s@ que no tendran muc=a di)usin7 mis relatos? mis canciones? etc... 5ero

tam(i@n inclu!o estos cursos de diseo Be(? que s@ que le interesan a muc=a gente.
http://www.programacion.com/cursos/curso/ejemplos/sonido.htmlhttp://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/21/#estilo%23estilohttp://www.programacion.com/html/tutorial/curso/21/#contenido%23contenidohttp://www.programacion.com/html/tutorial/curso/21/#navegacion%23navegacionhttp://www.programacion.com/html/tutorial/curso/21/#estructura%23estructurahttp://www.programacion.com/html/tutorial/curso/21/#accesibilidad%23accesibilidadhttp://www.programacion.com/html/tutorial/curso/21/#disenyo%23disenyohttp://www.programacion.com/html/tutorial/curso/21/#pruebas%23pruebashttp://www.programacion.com/cursos/curso/ejemplos/sonido.htmlhttp://www.programacion.com/html/autor/10/http://www.programacion.com/html/tutorial/curso/21/#estilo%23estilohttp://www.programacion.com/html/tutorial/curso/21/#contenido%23contenidohttp://www.programacion.com/html/tutorial/curso/21/#navegacion%23navegacionhttp://www.programacion.com/html/tutorial/curso/21/#estructura%23estructurahttp://www.programacion.com/html/tutorial/curso/21/#accesibilidad%23accesibilidadhttp://www.programacion.com/html/tutorial/curso/21/#disenyo%23disenyohttp://www.programacion.com/html/tutorial/curso/21/#pruebas%23pruebas


48/53

De todas maneras no =a! que engaarse7 los contenidos que te interesa que la genteconozca ! que no sean %o%ulares no ser$n 3isitados m$s que %or una %equea %arte delos interesados %or los contenidos %o%ulares. 5ero siem%re lo ser$n m$s que si no lo=u(i@ramos =ec=o.

#l a3eriguar qu@ %oner es )$cil. 5r$cticamente todo el mundo tiene alg>n &obb'? alguna%asin? o domina alg>n tema (astante %or encima de la media. 4o(re ese tema de(er$estar en)ocada su %$gina. 5orque? %ara qu@ engaarnos7 a nadie le interesan esas %$ginas

%ersonales que slo contienen tres )otos del autor? una de su no3ia ! otra de su %erro?1unto con la =istoria de su 3ida ! un curriculum ! una serie de enlaces a %$ginas de susamigos.

+on3iene tam(i@n? sa(iendo que el usuario =a acudido a tu %$gina %or el inter@s =aciaun tema es%ec)ico? )acilitarle enlaces a %$ginas similares. Te lo agradecer$.

6a,egacin

#s mu! im%ortante que sea sencilla e intuiti3a la na3egacin %or las %$ginas quecom%onen tu Be(. De%endiendo del tamao de la %$gina no se de(era tardar m$s detres toques de ratn en ir de una %$gina a otra. 4in em(argo? esto no se de(e conseguir

%or medio de una saturacin de enlaces %orque el usuario %odra %erderse.

Ha! muc=as maneras de conseguirlo. La %rimera es utilizar un marco como ndice? quesiem%re nos %ermitira acudir a las seciones %rinci%ales en nuestra Be(. Tam(i@n resulta>til incluir enlaces a la %$gina %rinci%al ! a la %$gina %rinci%al de la seccin que elusuario est$ consultando.

#n de)initi3a? no =a! receta >nica? %ues el @&ito de tu sistema de na3egacin de%ende en(uena medida de los contenidos ! estructura de tu Be(. Resulta >til 3er a alguien a1enoa su desarrollo na3egar %or ella sin darle ninguna clase de %istas7 en general se %ueden3er con )acilidad los ma!ores %ro(lemas que %ueda tener.

4in em(argo? =a! algo que siem%re irrita al usuario7 enlaces a %$ginas 3acas o con ungr$)ico que seale que esa %$gina est$ en construccin. 4i te lle3a tiem%o desarrollaruna seccin %ero quieres que los usuarios se%an que estar$ a= colocala con las dem$sen la lista de enlaces? %ero que ella no tenga. :ue se 3ea el nom(re aunque no lle3e aninguna %arte.

"structura de las $#ginas

#s )undamental a la =ora de %onerte a crear %$ginas el %ensar en una estructura com>n !consistente? %orque )acilita la na3egacin ! le con)iere %ersonalidad %ro%ia. #saestructura %uede estar dada %or una manera com>n de titular las secciones? un )ondo? unlogo? una manera com>n de colocar gr$)icos ! te&to? o una com(inacin de todo esto.

Ha! que cuidar la longitud de las %$ginas7 que no sean ni demasiado cortas nidemasiado largas ;como esta


49/53

Recuerda que el ttulo que le %ones a tu %$gina es %or lo que se la conocer$ %or elmundo. #s lo que guarda el na3egador en su ndice de marcadores? )a3oritos o

(oomars. 5or ello? es con3eniente que sea signi)icati3o ! %ueda ser entendido )uerade conte&to.

+on3iene que el %rimero %$rra)o o las %rimeras )rases de todas las %$ginas contengan unresumen o idea del contenido del resto de la misma. #so a!uda al usuario a localizarm$s )$cilmente la in)ormacin.

A su 3ez? resulta (astante >til indicar la )ec=a de la >ltima modi)icacin de la %$gina?aunque es a>n me1or si esa )ec=a =ace re)erencia a la >ltima modi)icacin del contenido?que al )in ! al ca(o es lo que le interesa el usuario.

5or >ltimo? uno de los as%ectos m$s im%ortantes de Internet como medio es la )acilidadde comunicacin entre creadores ! usuarios7 )acilitala inclu!endo tu direccin de correo.4i crees que %uede ser interesante? a!uda ! anima al usuario con )ormularios o li(ros de

3isita.

Accesi(ilidad

Ha! que tener en cuenta que? en general? no sa(es con qu@ na3egador 3isitar$n tus%$ginas. 6i cmo estar$ con)igurado. 6i la resolucin del monitor. 6i la %otencia de su+5/. 6i siquiera si el na3egador es ca%az de 3er gr$)icos. como se su%one que la redes algo de lo que de(e %oder dis)rutar todo el mundo con3iene =acerla accesi(le.

5ara ello =a! que tener en cuenta algunas cosas. 5ara em%ezar? que las %$ginas siem%rese 3en distintas de%endiendo del na3egador que usemos. +on3iene no usar elementosque slo )uncionen con un na3egador? como %uede ser el te&to %ar%adeante o lasmarquesinas. siem%re ser$ (ueno %ro(ar con m$s de un na3egador las %$ginas7 nosiem%re re%resentan igual las mismas etiquetas.

Ha! gente que 3ia1a %or la red con na3egadores en modo te&to o que? de(ido a lalentitud de su cone&in? con)iguran su na3egador %ara que no cargue los gr$)icos. 5orello? con3iene aadir siem%re el %ar$metro ALT a todas nuestras im$genes. Tam(i@n? !

%or la misma causa? con3iene dar una alternati3a en te&to de nuestros ma%as.

#s aconse1a(le %ro(ar nuestras %$ginas a la resolucin mnima de *"0&"0 ! com%ro(ar

que se %uede 3er ! na3egar con relati3a comodidad. #s desgraciadamente )recuente 3ermarcos ndice diseados %ara 3erse a 00&*00 ! que im%iden cam(iarlos de tamao ! se=an eliminado las (arras de des%lazamiento.

#s con3ieniente no a(usar de los a%%lets 8a3a ni =acer de ellos un elementoim%rescindi(le en nuestra Be(. A gente con %ocos recursos en %otencia de +5/ ousuarios de EindoBs .F no les resulta mu! agrada(le estas a%licaciones.

#n de)initi3a? no =acerles la 3ida im%osi(le a los minus3$lidos de la red. #liminar(arreras arquitectnicas.

ise7o


50/53

/na %$gina atracti3a? con gr$)icos (onitos ! (ien escogidos ! colocados es algo siem%rerecomenda(le. 5ero no si? de(ido a ello? la %$gina tarda dos das ! medio en terminar decargarse. Ha! que tener en cuenta que estamos tra(a1ando en un medio llamado Internetque? aunque denominado auto%ista de la in)ormacin? en realidad suele %arecerse m$s

(ien a una carretera comarcal. As %ues? a la =ora de disear nuestras %$ginas?

de(eremos cuidar el equili(rio entre (elleza gr$)ica ! tiem%o de carga.

Recuerda que el gr$)ico de )ondo no de(e di)icultar la lectura del te&to. 4i utilizamosuno oscuro que el color del te&to sea claro ! 3ice3ersa.

Los gr$)icos animados? en general? resultan mu! entretenidos %ara el autor %ero %oco>tiles %ara el usuario. 6o de(eran usarse m$s que %ara cosas so(re las que realmentequieres llamar la atencin ;como el uso del te&to %ar%adeante


51/53

"nlaces a otras $#ginas

tros manuales de HTML

6o =e a%rendido solo? claro. Aqu ten@is una serie de enlaces a otros manuales !

re)erencias de HTML que os %ueden ser de inter@s.

Ee(maestro? el me1or manual de HTML en la red ,tro manual de HTML %or Luis Marias Ee(#stilo? la me1or gua de estilo en nuestro idioma Diseo de %$ginas en Internet #s%eci)icacin del HTML ".0 #s%eci)icacin del HTML .2 #s%eci)icacin del HTML .0 #s%eci)icacin del HTML 2.0 La agenda? donde encontrar$s todos los enlaces que necesites so(re HTML?

8a3a? 8a3a4cri%t? +9I? etc..

o(re >a,acri$t

/na 3ez conocido el HTML? %uede que te interese me1orar tus %$ginas con el lengua1ede scri%t m$s e&tendido %or Internet7

Mi curso de 8a3a4cri%t F.2 #l taller Be( de HTML en castellano #1em%los en 8a3a4cri%t

Todos los enlaces del mundo relacionados con 8a3a4cri%t

o(re HTML din#mico

4i todo lo anterior se te =a quedado %equeo ! no te im%orta disear %$ginas accesi(lestan solo con #&%lorer " o +ommunicator? siem%re %uedes %asarte %or estas direcciones7

#l curso de DHTML de HTML en castellano #l 1uego7 un e1em%lo de lo que se %uede llegar a =acer con DHTML T=e D!namic Duo7 el me1or tutorial de DHTML Macromedia DHTML one

o(re otras tecnolog;as relacionadas

#stos temas me interesan menos? %ero a>n as os %uedo recomendar un %ar de enlaces7

8a3a en castellano #l me1or tutorial de 8a3a #l mundo de Due? ndice ! (uscador de recursos 8a3a 9ran directorio de in)ormacin so(re +9I? con +9Is gratuitos incluidos Interesante %$gina %esonal de un gran creador de +9Is gratuitos

Curso de HTML 4.0
http://www.wmaestro.com/webmaestrohttp://www.geocities.com/SiliconValley/2915/manual.htmhttp://welcome.to/webestilohttp://www.geocities.com/SiliconValley/Heights/1779http://www.w3.org/TR/REC-html40/http://www.w3.org/MarkUp/Wilbur/http://www.w3.org/MarkUp/html3/CoverPage.htmlhttp://www.w3.org/MarkUp/html-spec/http://www.areas.net/agenda.htmhttp://www.areas.net/agenda.htmhttp://www.programacion.com/cursos/curso/tutorial.php?id=jshttp://www.programacion.com/html/articulos.phphttp://www.essex1.com/people/timothy/js-index.htmhttp://javascript.developer.com/http://html.programacion.net/dinamico/tutorial/index.htmhttp://zipi.fi.upm.es/~d960038http://www.dansteinman.com/dynduo/http://www.dhtmlzone.com/http://www.programacion.com/java/http://www.fie.us.es/info/internet/JAVA/http://www.mol.es/kiosko/duke/http://cgi.resourceindex.com/http://www.worldwidemart.com/scripts/http://www.wmaestro.com/webmaestrohttp://www.geocities.com/SiliconValley/2915/manual.htmhttp://welcome.to/webestilohttp://www.geocities.com/SiliconValley/Heights/1779http://www.w3.org/TR/REC-html40/http://www.w3.org/MarkUp/Wilbur/http://www.w3.org/MarkUp/html3/CoverPage.htmlhttp://www.w3.org/MarkUp/html-spec/http://www.areas.net/agenda.htmhttp://www.areas.net/agenda.htmhttp://www.programacion.com/cursos/curso/tutorial.php?id=jshttp://www.programacion.com/html/articulos.phphttp://www.essex1.com/people/timothy/js-index.htmhttp://javascript.developer.com/http://html.programacion.net/dinamico/tutorial/index.htmhttp://zipi.fi.upm.es/~d960038http://www.dansteinman.com/dynduo/http://www.dhtmlzone.com/http://www.programacion.com/java/http://www.fie.us.es/info/internet/JAVA/http://www.mol.es/kiosko/duke/http://cgi.resourceindex.com/http://www.worldwidemart.com/scripts/


52/53

Autor:Daniel Rodrguez Herrera 'A: ;5reguntas m$s )recuentes


53/53

6o e&iste ninguna manera. HTML es un lengua1e que %ermite dar )ormato ate&tos %ara 3erlos en %antalla? %ero no inclu!e ninguna etiqueta que te o)rezcaa!uda a la =ora de cam(iar ese )ormato a la =ora de im%rimir. #&isten algunasmaneras de controlar los saltos de %$gina? que est$n e&%licados en elTaller Ee(.

ara comentarme algo o $reguntar otra cosa

#ste curso est$ a(ierto a cualquier sugerencia que quer$is =acerme. 4i me escri(es contus dudas? sugerencias? etc... me a!udar$s a me1orarlo? as que te agradecera querellenaras el )ormulario que tienes a(a1o o que me escri(ieras.

6om(re7

#mail7

+ali)icacin7

+omentarios ! sugerencias7

Enviamelo (puede tardar)

Borralo
http://www.programacion.com/cursos/tweb.htmhttp://www.programacion.com/cursos/tweb.htm

Curso de HTML 4.doc

Documents

Transcript of Curso de HTML 4.doc