Scribd Logo
Upload

Welcome to Scribd!

  • HTML Apuntes Teoria

    Uploaded by

    Ruben811986
    48 views24 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    48 views24 pages

    HTML Apuntes Teoria

    Uploaded by

    Ruben811986

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 24

    HTML Son las iniciales de la expresin en ingls HyperText Markup Language.

    Traducido al castellano sera


    Lenguaje de Etiquetas de Hipertexto. Se trata de un conjunto de etiquetas que se van intercalando entre el texto de forma que los programas que utilizamos para navegar por la Red sepan qu es lo que tienen que mostrar cuando accedemos a una pgina y cmo de en presentarlo en la pantalla. !l "#$ %"orld "ide "e $onsortium& es el frum internacional que se encarga desarrollar nuevas tecnologas relacionadas con la "!' dictando las normas que constituyen el estndar (T)* entre otros. $on (T)* podemos utilizar textos+ sonidos+ imgenes+y lo ms importante+ enlaces a otras pginas.!ste lenguaje surge en principio con fines divulgativos y no se tuvo en cuenta que la ,e llegara a ser un rea de ocio con carcter multimedia+ de ido a esto+ el (T)* -a ido necesitando actualizaciones con el paso del tiempo y la introduccin de otras tecnologas complementarias como es el caso de CSS y JavaScript. .na pgina ,e es un arc-ivo que contiene cdigo (T)* en forma de texto. !stos arc-ivos tienen la extensin / .htm 0 o /.htm0. 1ara poder crear un arc-ivo .-tml %pagina ,e & podemos -acerlo desde2 .n simple editor de texto como el 'loc de notas de "indo,s + "ordpad + gedit + etc... .na suit ofimtica que exporte documentos en -tml como )icrosoft 3ffice + 3pen3ffice + etc... .n editor de de pginas ,e como 45. + 6ream,eaver + 7rontpage + etc..

    "etiquetas$ *as etiquetas (T)* se escri en encerradas entre ngulos y en min!scu as para que sean compati les con el nuevo lenguaje 8(T)* . 4ormalmente se utilizan dos etiquetas2 una de inicio y otra de fin para indicar que -a terminado el efecto que queramos presentar. *a 9nica diferencia entre am as es que la de cierre lleva una arra inclinada :;: antes del cdigo.

    "etiqueta$ "etiqueta$ texto textoque quepresentar presentarel elefecto efecto "%etiqueta$ "%etiqueta$ 1or ejemplo la etiqueta "#$ pone en negrita un texto "#$ "#$!sto !stova vaen ennegrita negrita "%#$ "%#$ lo veremos as en lo veremos as enel elnavegador2 navegador2 Esto Estova vaen ennegrita negrita

    !tiqueta de inicio

    !tiqueta de fin o cierre

    *tri#utos de etiquetas *as etiquetas necesitan especificar informacin exacta como+ por ejemplo+ dnde est u icado un arc-ivo. *os atri utos se utilizan con etiquetas para proporcionar ms informacin so re cmo de e implementarse la etiqueta.
    !l valor de cada atri uto de e ir entrecomillas. $ada atri uto se separa del anterior por un espacio en lanco. <etiqueta <etiqueta atri#uto&'(va atri#uto&'(vaor&( or&( atri#uto)'(va atri#uto)'(vaor)( or)( ...... ...... =....<;etiqueta= =....<;etiqueta= 1or ejemplo+ sea la siguiente etiqueta <img=2 "img "img src'(ejemp src'(ejempo.gi+( o.gi+( ,idth'(-).( ,idth'(-).( height'()..( height'()..($ $ !l atri uto src indica que imagen se de !l atri uto src indica que imagen se de eemostrar. mostrar. !l !latri atri uto uto,idth ,idthindica indicacon conque queanc-ura anc-urase semostar. mostar. !l atri uto height indica con que altura. !l atri uto height indica con que altura.

    Resumen (T)*

    6aniel 6o>a ? >ez

    Estructura #/sica de un archivo HTML


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti na!//E"" "#tt$%//&&&.&3. r'/T(/#t)!4/! s*.+t+",

    !sta etiqueta indica al navegador el tipo de lenguaje en el que est escrita la pgina ,e . $omienzo del documento -tml.

    <-tml= <-ead= <title= Titulo de la pgina <;title= <;-ead= < ody= !ste es el cuerpo de la pgina ,e y lo que se ver en la pantalla del navegador ,e <; ody= <;-tml=

    <-ead= $a ecera del documento donde se puede poner informacin que no aparecer en el navegador+ como el nom re del autor+ pala ras claves+etc..!l ttulo de la pgina aparecer en la parte superior del navegador y se indica con la etiqueta<title= < ody= $uerpo del documento que contiene todo lo que aparecer por la pantalla en el navegador ,e .

    7in del documento -tml.

    .n comentario es informacin que se incluye en el cdigo -tml de una pgina ,e que no ser visualizado en el navegador ,e + pero que es de muc-a utilidad para el programador durante el desarrollo de la misma o en futuras revisiones. Se indican entre los sm olos <ABB y BB=. "011 "011 esto estoes esun uncomentario comentarioy yno nose sever ver 11$ 11$

    Comentarios

    Caracteres especia es $uando dentro del cuerpo < ody= del documento -tml tiene que aparecer alg9n carcter especial %como > + < + = + C + + + ...&+ para que se visualice correctamente en el navegador ,e de e de sustituirse en el cdigo -tml por los siguientes valores2
    Sm olo $digo < CltD = CgtD CaacuteD E CFacuteD CeacuteD G C!acuteD C CampD / CquotD > CntildeD H C4tildeD I CJ@K@D estos son slo algunos+ existen cientos. "#ody$ 2aacute3 gina "#ody$!sto !stoes esel elcuerpo cuerpode dela lap p 2aacute3 gina,e ,e "%#ody$ "%#ody$

    Resumen (T)*

    6aniel 6o>a ? >ez

    Metain+ormaci4n *a metainformacin es informacin adicional insertada en el cdigo -tml que puede tener algunos usos como por ejemplo ser usada en aplicaciones externas + uscadores + indices + etc.. Se indican en la ca ecera <-ead= con la etiqueta <meta= y puede tener tres atri utos2 M name2 identifica la informacin que se va a exportar. M content2 contenido de la informacin. M http1equiv2 es el nom re de un comando (TT1.
    "meta "metaname'5author5 name'5author5content'5Su content'5Sunom#re nom#reaqu65$ aqu65$ "meta name'5copyright5 content'5ingrese "meta name'5copyright5 content'5ingreseaqu6 aqu6ee nom#re nom#rede desu sucompa76a5$ compa76a5$ "meta name'5contact8addr5 content'5aqu6 su direcci4n emai 5$ "meta name'5contact8addr5 content'5aqu6 su direcci4n emai 5$ "meta "metaname'5rating5 name'5rating5content'5&9 content'5&9years5$ years5$ "011 rating2 1ara "011 rating2 1araindicar indicar-acia -aciaqu qutipo tipode deaudiencia audiencia est orientado su sitio ,e disponemosde est orientado su sitio ,e disponemosde cuatro cuatroposi posi les lesvalores valorespara parael elcontent2 content2 N genera 2 para todas las edades. Ngenera 2 para todas las edades. N &9 22para N &9years years paramayores mayoresde de@O @Oa>os. a>os. N mature 2 para adultos. Nmature2 para adultos. N restricted 22para N restricted paraadultos adultoscon conrestricciones. restricciones. BB= BB= "meta name'5expires5 content'5never5$ "meta name'5expires5 content'5never5$ "meta "metaname'5 name'5anguage5 anguage5content'5es5$ content'5es5$ "meta name'5charset5 "meta name'5charset5content'5iso1::;<1&5$ content'5iso1::;<1&5$ "meta "metaname'5distri#ution5 name'5distri#ution5content'5g content'5g o#a o#a5$ 5$ "meta name'5ro#ot5 content'5=ngrese "meta name'5ro#ot5 content'5=ngreseee va vaor oraqu65$ aqu65$ "011 ro#ot 2 $uando un motor de 9squeda "011 ro#ot2 $uando un motor de 9squedavisite visitesu su pgina pginatratar tratarde deseguir seguirsus suslinPs linPseeindexar indexarcada cada pgina pginaque queencuentre.1osi encuentre.1osi les lesvalores2 valores2 > a 2 dir al ro ot del motor > a 2 dir al ro ot del motorde de 9squeda 9squedaque que siga todos los linPs so re su siga todos los linPs so re supgina pgina,e ,e + + eeindexe indexetodos todoslos losque queencuentre. encuentre. > noindex 2 para que el ro > noindex2 para que el ro ot otno noindexe indexeesa esapgina. pgina. 1ero puede seguir los linPs so re ella. 1ero puede seguir los linPs so re ella. >no+o 22que >no+o o, o, queindexe indexeesta estapgina pginapero peroque queno no siga los linPs so re ella. siga los linPs so re ella. >none 22que >none queno noindexe indexeesta estapgina pginani nisiga sigalos los linPs so re ella. BB= linPs so re ella. BB= "meta "metaname'5revisit1a+ter5 name'5revisit1a+ter5content'5ingrese content'5ingreseee va vaor oraqu65$ aqu65$ <ABB revisit1a+ter 2 para indicar a un ro ot cuando <ABB revisit1a+ter2 para indicar a un ro ot cuandode de ee regresar e indexar el stio de nuevo. regresar e indexar el stio de nuevo. *os *osposi posi les lesvalores valorespueden puedenser serla lacantidad cantidadde detiempo tiempo que usted quiera2 ?&. days( + ?) months( + ?& +... que usted quiera2 ?&. days( + ?) months( + ?&,eek( ,eek( +...BB= BB= "meta name'5key,ords5 content'5ho istic@ massage@ re+ exo ogy@ "meta name'5key,ords5 content'5ho istic@ massage@ re+ exo ogy@shiatsu@ shiatsu@ manipu manipuation@ ation@stress@ stress@stress#uster@ stress#uster@re reax@ ax@re reaxation@ axation@ease@ ease@pain painreduction@ reduction@pain pain5$ 5$ <ABB Pey,ordsQpala ras clave. sirven para las 9squedas <ABB Pey,ordsQpala ras clave. sirven para las 9squedas por porclave clavede delos los uscadores. uscadores.BB= BB= "meta name'5generator5 content'5dream,eaver "meta name'5generator5 content'5dream,eaver9.. 9..macromedia($ macromedia($ <ABB indicamos el soft,are utilizado para la creacin <ABB indicamos el soft,are utilizado para la creacinde dela lapgina. pgina.BB= BB= "meta http1equiv' 5re+resh5 content ' 5&;3ur 'httpA%%,,,.mas.com5$ "meta http1equiv' 5re+resh5 content ' 5&;3ur 'httpA%%,,, .mas.com5$ <ABB <ABB pasados pasados@R @Rsegundos segundosse seacceder accederautomticamente automticamenteaala la,e ,e indicadaBB= indicadaBB= "meta http1equiv'5content1type5 content'5text%htm 3 charset'(iso1::;<1&5$ "meta http1equiv'5content1type5 content'5text%htm 3 charset'(iso1::;<1&5$ <ABB <ABB definimos definimosel eltipo tipode decontenido2 contenido2text;-tml text;-tmly ylos loscaracteres caracteresespeciales especiales utilizados+ en este caso los occidentales %iso& BB= utilizados+ en este caso los occidentales %iso& BB=

    Resumen (T)*

    6aniel 6o>a ? >ez

    Texto !xisten diversas etiquetas para poder indicar la distri ucin + forma + tama>o + color o tipo de fuente del texto.
    < <= =negrita negrita<; <; = = <i= <i=cursiva cursivainclinada inclinada<;i= <;i= <tt= <tt=maquina maquina<;tt= <;tt= <strong= <strong=texto textoresaltado resaltado<;strong= <;strong= <u= <u=su su rrayado rrayado<;u= <;u= <striPe= <striPe=tac-ada<;striPe= tac-ada<;striPe= <su <su = = su su indice indice aja aja@ @nivel nivel<;su <;su = = <sup= <sup= superindice superindicesu su ee@ @nivel nivel<;sup= <;sup= < < ig= ig=aumenta aumentael eltama>o tama>oen en@ @<; <; ig= ig= <small= <small=disminuye disminuyeel eltama>o tama>oen en@ @<;small= <;small= *os saltos de lnea se indican con la etiqueta < r= y para diferenciar un prrafo de otro se usa la etiqueta <p= y <;p= <p= <p= !sto !stoes esun unprrafo prrafoen enuna unasla slalnea. lnea. <;p= <;p= <p= <p= W Westo estoes esun un prrafo prrafoque queocupa ocupa< < r= r= exactamente exactamente< < r= r= tres treslneas. lneas. <;p= <;p= Se puede alinear un texto con el atri uto a ign a la izquierda + derec-a o en el centro de la pgina. <p = <p a aign'( ign'( e+t( e+t( = !ste !steprrafo prrafoest estaala laizquierda izquierda <;p= <;p= <p = <p a aign'(center( ign'(center( = !ste !steotro otroest estcentrado centrado <;p= <;p= <p = <p a aign'(right( ign'(right( = W Weste esteaala laderec-a derec-a <;p= <;p= 1ara indentar un texto se puede usar < locPquote= < < locPquote= locPquote= !sto !stoest estindentado< indentado< r= r= como ien como ienpodemos podemosapreciar.< apreciar.< r= r= <; <; locPquote= locPquote= y yesto estono noest estindentado. indentado. Ttulos o enca ezamientos %(eaders&. *os enca ezamientos se pueden indicar en seis tama>os distintos desde <-@= -asta <-S=. <-@= <-@=!ste !stees esun unttular ttularpeque>o peque>o<;-@= <;-@= <-#= !ste titular es mediano <-#= !ste titular es mediano<;-#= <;-#= <-S= <-S=!ste !stees esun untitular titulargrande<;-S= grande<;-S= )ediante la etiqueta <font= y sus atri utos podemos indicar distinto tipos de fuente + tama>o + colores + etc.. <font <font faceQ0Frial0 faceQ0Frial0 sizeQ0R0 sizeQ0R0 colorQ0red0= colorQ0red0= !ste texto se ver con el !ste texto se ver con eltipo tipode deletra letraFrial Frial++ tama>o R y color rojo. tama>o R y color rojo. <;font= <;font= !l color del texto se puede indicar con el valor del atri uto en ingles o con el cdigo -exadecimal RT' %Red+Treen+'luie& del color2 'lacP Q /JUUUUUU0 Breen ' ?C..DD..( Silver Q /J$U$U$U0 *ima Q /JUUVUUU0 Tray Q /JVUVUVU0 3live Q /JVUVUUU0 "-ite Q /J7777770 Wello, Q /J7777UU0 )aroon Q /JVUUUUU0 4avy Q /JUUUUVU0 Eed ' ?CDD....( F ue ' ?C....DD( 1urple Q /JVUUUVU0 Teal Q /JUUVUVU0 7uc-sia Q0J77UU770 Fqua Q /JUU77770

    <font <font colorQ0 colorQ0 lue0= lue0= !ste texto !ste textoes esde decolor colorazul. azul. <;font= <;font= <font <font colorQ0JUUUU770= colorQ0JUUUU770= W Weste estetam tam ien ienes esazul. azul. <;font= <;font=

    !sto est indentado como ien podemos apreciar. y esto no est indentado

    Linea horiGonta $on la etiqueta <-r= se puede di ujar una lnea -orizontal en la pantalla. *os atri utos ms usuales para ella son2 color %para ponerle un color& + size%para cam iar su altura& y ,idt-%donde indicaremos su anc-ura + por ejemplo si ponemos #UU indica una anc-ura de #UU pixeles +o si ponemos RUX la lnea ocupara el RUX del anc-o de la pantalla&.
    <-r <-r colorQ0red0 colorQ0red0 siveQ0S0 siveQ0S0 ,idt-Q0KUX0 ,idt-Q0KUX0 = =

    Resumen (T)*

    6aniel 6o>a ? >ez

    Listas

    1odemos crear tres tipos de listas2 6esordenadas + ordenadas y de definicin. Lista ordenada Hordered istI"o $ Lista de de+inici4n Hde+inition istI"d $
    "d "d$ $ "dt$Krimer "dt$Krimeree emento emento "dd$Esta "dd$Estaes es aa de+inici2oacute3n"#r$ de+inici2oacute3n"#r$ de de primer primeree emento. emento. "dt$S egundo "dt$S egundoee emento emento "dd$Esta "dd$Estaes es aa de+inici2oacute3n"#r$ de+inici2oacute3n"#r$ de de segundo segundoee emento. emento. "%d $ "%d $

    Lista desordenada Hunordered istI "u $


    "u "u type'(circ type'(circe($ e($ " " i$La i$Laetiqueta etiqueta2 2t3u t3u 2gt3 2gt3 nos permite "#r$ nos permite "#r$ presentar presentar istas istasde de"#r$ "#r$ ee ementos sin orden ementos sin ordenaaguno. guno. "% "%i$ i$ " " i$Cada i$Cadaee emento ementode de aa ista ista ir2aacute3"#r$ ir2aacute3"#r$ norma normamente menteprecedido"#r$ precedido"#r$ por un c2iacute3rcu por un c2iacute3rcu o. o. "% "%i$ i$ "%u "%u $ $

    "o "o type'(&($ type'(&($ " " i$Krimer i$Krimeree emento."% emento."%i$ i$ " egundo " i$S i$S egundoee emento."% emento."%i$ i$ " " i$Tercer i$Terceree emento."% emento."%i$ i$ "%o "%o$ $

    La etiqueta "u $ nos permite presentar istas de e ementos sin orden a guno. Cada e emento de a ista ir/ norma mente precedido por un c6rcu o. 6entro de la etiqueta de apertura de la lista+ <ul=+podemos utilizar el atri uto type para cam iar el tipo de vi>eta de todos los elementos de la lista. !n el caso de que queramos cam iar solamente el de un elemento en especial utilizamos el atri uto type so re la etiqueta de elemento+ es decir+ so re <li=. *os valores de type pueden ser2 J circ e2 la vi>eta es un crculo negro. J disc2 la vi>eta es una circunferencia. J square2 la vi>eta es un cuadrado. Tam in disponemos del atri uto compact+ el cual nos permite compactar el espacio existente entre el texto y la vi>eta. !ste atri uto no requiere valores.

    &. Krimer e emento. ). Segundo e emento. -. Tercer e emento.

    .tilizando el atri uto type podemos especificar el tipo de numeracin empleado eligiendo entre n9meros %@+ L+ #...&+ letras %a+ + c...& y sus may9sculas %F+ '+ $...& y n9meros romanos en may9sculas %?+ ??+ ???...& y
    min9sculas %i+ ii+ iii...&. *os va ores son2 M &A para ordenar por n9meros. M aA por letras. M *A por letras may9sculas. M iA por n9meros romanos en min. M =A por n9meros romanos en may9s. 1ara indicar el n9mero a partir del cual queremos empezar a contar utilizamos el atri uto start de la etiqueta "o $. !l valor que se le -a de asignar es un n9mero entero tanto para los n9meros como para las letras o los n9meros romanos

    Krimer e emento Esta es a de+inici4n de primer e emento. Segundo e emento Esta es a de+inici4n de segundo e emento. !n este tipo de lista se muestra cada uno de los elementos seguido de su definicin correspondiente. *a etiqueta principal es <dl= %definition list&+ y las etiquetas de elemento y su definicin son <dt= %definition term& y <dd= %definition definition& respectivamente. *a etiqueta <dd= desplaza la lnea -acia la izquierda+ por este motivo este tipo de etiqueta es utilizado para desplazar texto.

    1odemos 1odemoscrear crearlistas listasdentro dentrode deotras otraslistas+ listas+es esdecir+ decir+anidar anidarlistas. listas. "d $ "d $ "dt$Espa7aA "dt$Espa7aA "dd$Comunidades "dd$Comunidades*ut. *ut. "u $ "u $ " " i$*nda i$*ndauc2iacute3a"% uc2iacute3a"%i$ i$ "o $ "o $ " " i i$ $Branada"% Branada"%i$ i$ " i$S evi " i$S evi a"% a"%i$ i$ "%o "%o$ $ " i$Extremadura"% " i$Extremadura"%i$ i$ "%u "%u $ $ "%d "%d$ $

    !spa>a $omunidades Fut. N Fndalucia @. Tranada L. Sevilla N!xtremadura

    Resumen (T)*

    6aniel 6o>a ? >ez

    Ta# as .na ta la es un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos tipos de
    contenidos. 1ara crearlas utilizamos la etiqueta principal "ta# e$ junto con su cierre correspondediente <;ta le=. 6entro de esta etiqueta vamos creando las distintas +i as por medio de la etiqueta "tr$%ta le ro,& y <;tr=+ y en cada fila las ce das a travs de la etiqueta "td$ y <;td=. Si queremos poner un ttulo a la ta la utilizamos la etiqueta "caption$ inmediatamente despus de la etiqueta principal <ta le=. *TE=FLTMS NE "ta# e$ M #orderA 6onde se esta lece el valor en pixels del orde de la ta la. Si le asignamos el valor cero no -a r orde. M #orderco orA color del orde. M #ackgroundA permite colocar un fondo para la ta la a partir de un enlace a una imagen. M #gco orA color del fondo de ta la. M ce spacingA n9mero de pixels entre celdas. M ce paddingA pixels entre el orde de la celda y su contenido. M a ignA alinea la ta la. Sus valores son2 center+ rig-t o left. M ,idthA anc-ura de la ta la en pixels o en porcentaje %el @UUX es el mximo del que dispone el navegador&. M heightA altura de la ta la en pixels o en porcentaje. *TE=FLTMS NE "tr$ *os utilizamos para que los cam ios afecten a toda las celdas de la fila. M a ignA alineacin que afecta a todas las celdas de la fila. Sus valores son2 center+ rig-t o left. M va ignA alinea el contenido de las celdas verticalmente arri a %top&+ a ajo % ottom& o centro %middle&. M #gco orA color del interior de la lnea de celdas. M #orderco orA color del orde de la lnea de celdas. *O=N*E T*FL*S *as ta las al igual que otros o jetos de -tml permiten la anidacin. *TE=FLTMS NE "td$ 4os permite cam iar caractersticas a una celda en concreto. M a ignA alinea -orizontalmente el contenido de la celda respecto a sus ordes. Sus valores son2 center+ rig-t o left. M va ignA alinea el contenido de las celdas verticalmente arri a %top&+ a ajo % ottom& o centro %middle&. M #gco orA color del fondo de celda.. M #orderco orA color del orde. M #ackgroundA permite colocar un fondo para la celda a partir de un enlace a una imagen. M heightA altura de la celda en pixels o en porcentaje. M ,idthA anc-ura de la celda en pixels o en porcentaje. M co spanA expande una celda -orizontalmente . M ro,spanA expande una celda verticalmente.

    <ta le orderQ:@:= <caption= <font sizeQ:O: colorQ:red:= TCiacuteDtulo de la ta la <;font= <;caption= <tr= <td=celda @+@<;td= <td=celda @+L<;td= <td=celda @+#<;td= <;tr= <tr= <td=celda L+@<;td= <td=celda L+L<;td= <td=celda L+#<;td= <;tr= <tr= <td=celda #+@<;td= <td=celda #+L<;td= <td=celda #+#<;td= <;tr= <;ta le=

    Resumen (T)*

    6aniel 6o>a ? >ez

    =m/genes 1ara -acer que aparezcan imgenes en nuestro documento utilizamos la etiqueta "img$ %image& y el atri uto src %source& para indicar la ruta en la que est el arc-ivo imagen. *a etiqueta <img= no tiene cierre. !s decir2
    "img "img src'(ruta src'(rutaa aa aimagen($ imagen($ *TE=FLTMS NE "img$A M a tA 6entro de las comillas de este atri uto colocaremos una reve descripcin de la imagen+ de tal forma que este comentario se mostrar en lugar de la imagen en el caso de que el navegador no pueda cargar la imagen o durante el tiempo que tarde en cargarla. .na vez cargada la imagen si colocamos el puntero del ratn so re ella tam in se nos mostrar la descripcin escrita en este atri uto. M height y ,idthA 6efinen la altura %-eig-t& y anc-ura %,idt-& en pixels de la imagen. M #orderA 6efine el tama>o en pixels del cuadro que rodea a la imagen. !n caso de que no queramos que aparezca el orde+ damos el valor cero %/U0&..4F TF'*F $34 '3R6!S ?45?S?'*!S R!S.*TF ).W .T?* 1FRF 6?STR?'.?R W $3*3$FR T!8T3S ! ?)ET!4!S !4 $.F*Y.?!R 1FRT! 6! *F 1F4TF**F. M vspace y hspaceA Sirven para indicar el espacio li re vertical %vspace& y -orizontal %-space&+ en pixeles+ que tiene que colocarse entre la imagen y los otros elementos que la rodean+ como texto+ imgenes... M o,srcA $on este atri uto indicamos un arc-ivo de la imagen que est en aja resolucin+ de tal forma que cuando el navegador detecta este atri uto primero descarga y muestra la imagen de aja resolucin y luego descarga la imagen con la resolucin correcta. M a ignA )ediante este atri uto alineamos la imagen con respecto al texto. !ste atri uto puede tener estos valores2 top@midd e@#ottom@ e+t y right. Ejemp o de c4digo de una imagen insertada "img "imgsrc'5..%imagenes%ordenador.gi+5 src'5..%imagenes%ordenador.gi+5 a t'5Mrdenador5 a t'5Mrdenador5 a aign'5top5 ign'5top5 #order'5-5 #order'5-5 height'()..( ,idth'(-..( height'()..( ,idth'(-..( $ $ Este Estetexto textoest2aacute3 est2aacute3aqu2iacute3 aqu2iacute3arri#a arri#a porque a ign'(top( porque a ign'(top(

    Se ver6a as6 en e navegador ,e#A

    Este texto est/ aqu6 arri#a porque a ign'(top(

    Resumen (T)*

    6aniel 6o>a ? >ez

    ELT*S NE*CCESM * =MPBEOES M *ECH=QMS Euta a#so utaA *lamamos de esta forma a la ruta que recoge la u icacin de un determinado arc-ivo sin tener en cuenta el punto desde el que se solicita la referencia. 1or ejemplo un arc-ivo desde ?nternet2 http://platea.pntic.mec.es/~rluna/index.html Tam in sera una ruta a soluta una referencia a un arc-ivo dentro de nuestro disco duro del tipo2 file:///F:/WEBs/HTML/imagenes/lateralespiral.gif . Euta re ativaA !n este caso tenemos en cuenta el punto desde el que damos la referencia del tipo imagenes/lateralespiral.gif donde -emos eliminado la referencia inicial e indicamos que+ desde el punto donde estamos+ encontraremos una su carpeta en la que estar la imagen lateralespiral.gif . $uando creamos un sitio "!' es importante que todas las rutas sean relativas para que al -acer una rplica de nuestro sitio en el servidor todas las referencias sigan siendo vlidas igual que en nuestro disco duro. 1or cierto+ supongo que ya te -a rs dado cuenta que todos los arc-ivos que formen parte del sitio "!' de en estar en la carpeta principal o en su carpetas de la misma.

    *a ruta a soluta se expresa a partir del directorio raiz.

    !stos son ejemplos de rutas a solutas.

    *as rutas relativas se expresan a partir del directoriode tra ajo actual % en este ejemplo el actual es / uisa0&. !stas son rutas relativas a / uisa2

    4om re de ruta relativa .

    Significado 6irectorio o carpeta actual. $arpeta o directorio padre %el directorio que est por encima del directorio actual&. 6os directorios por encima del directorio actual. 4om re de un directorio o carpeta por de ajo del directorio actual.

    ..

    ..%.. nom re de directorio

    Resumen (T)*

    6aniel 6o>a ? >ez

    EOL*CES (T)* es un lenguaje para hipertexto+ es decir+ enlaces. .n en ace o ink es una zona de texto o imagen que si son seleccionados nos trasladan a otro documento de -ipertexto o a otra posicin dentro del documento actual. 1ara crear un enlace -ay que utilizar la etiqueta "a$. Todo lo que encerremos entre "a$ y "%a$+ ya sea texto o imgenes+ ser considerado como enlace y sufrir dos modificaciones2 @. Se visualizar de manera distinta en el navegador2 el texto aparecer su rayado y de un color distinto y las imgenes estarn rodeadas por un orde del mismo color que el del texto del enlace. !ste color depender de la configuracin que tenga el usuario en su navegador. L. Fl pulsar so re el enlace+ seremos enviados -acia donde apunte el enlace. !l enlace en la pgina normalmente aparecer su rayado y en color azul+ y al deslizar el puntero del ratn so re l cam iar su forma original transformndose por regla general en una mano con el dedo ndice extendido. 1ara indicarle la direccin utilizamos el atri uto hre+ y le asignamos la direccin entre comillas do les %?&. *a direccin estar en formato LEL %Lni+orm Eesource Locator&.$uando queremos acceder a un fic-ero situado en la misma mquina que la pgina ,e que estamos creando podemos utilizar rutas re ativas2 ruta_relativa/fichero *a sintaxis general de un enlace es2 "a "ahre+' hre+'?direcci4n($ ?direcci4n($ contenido contenido "%a$ "%a$ Siendo el contenido un texto o imagen que ser la parte de la pgina donde de eremos pulsar para acceder al enlace. Nirecci4n en +ormato LELA F travs de una LEL podemos indicar tanto una direcci4n de ?nternet como un servicio que tenga el servidor al que corresponde la direccin. !l formato general es2

    servicio://maquina:puerto/ruta/fichero/fichero@usuario
    !l servicio puede ser2 M http2 para pginas ,e#. M https2 servidores que nos ofrecen el uso de tcnicas de encriptaci4n para proteger los datos . M +tp2 para transmitir fic-eros desde servidores de ftp. M mai to2 para poder mandar un mensaje e1mai . M ne,s2 para acceder a +oros de discusin. 1ara ello se -a de indicar el servidor y el grupo. M te net2 nos permite conectarnos a otro ordenador y entrar en ellos como si nuestro ordenador fuese una terminal. *a direccin de la mquina puede ser indicada tam in a travs de su direcci4n =K. Ejemp os de en aces

    "a "a hre+'(otrapagina.htm hre+'(otrapagina.htm($ ($

    texto textoen enace acedonde dondehacer hacerccic ic

    "%a$ "%a$

    "a "a hre+'(otrapagina.htm hre+'(otrapagina.htm($ ($ "img "imgsrc'(imagen.jpg$ src'(imagen.jpg$ "%a$ "%a$HHuna unaimagen imagensirve sirve de Gona activa donde hacer c icI de Gona activa donde hacer c icI "a "a hre+'(httpA%%,,,.goog hre+'(httpA%%,,, .goog e.es$ e.es$ en enace acea aotra otrapagina pagina,e# ,e#en eninternet internet "%a$ "%a$ "a "a hre+'(+tpA%%servidor hre+'(+tpA%%servidor+tp$ +tp$ en enace acea aun unservidor servidor+tp +tp "%a$ "%a$ "a "a hre+'(mai hre+'(mai toAcorreoRono.com$a#re toAcorreoRono.com$a#reee gestor gestorde deemai emai sspara paramandar mandarun uncorreo"%a$ correo"%a$ "a "a name'(nom#reanc name'(nom#reanca$ a$ de+ine de+ineun unanc anca aHHugar ugarconcretoI concretoIen en a ap/gina p/gina "a "a hre+'(Cnom#reanc hre+'(Cnom#reanca$ a$sa sata taa aun unanc anca asituada situadaen en a amisma mismap/gina p/gina"%a$ "%a$ "a "a hre+'(otrapagina.htm hre+'(otrapagina.htmCnom#reanc Cnom#reanca$en a$enaGa aGacon conun un ugar ugarconcreto concretode deotrapagina.htm otrapagina.htm."%a$ ."%a$ !l atri uto name sirve para darle nom re a un lugar concreto dentro de la pgina ,e conocido como ancla. !l carcter J indica que es un enlace a un ancla o lugar concreto dentro de una pgina.

    Resumen (T)*

    6aniel 6o>a ? >ez

    M*K* NE =M*BEOES $onsisten en inc uir varios en aces dentro de una misma imagen. 1ara ello definimos una serie de figuras geomtricas dentro de la imagen +de forma que cada una de ellas servir de zona activa donde -aremos clic para saltar a alg9n documento o arc-ivo. 1ara -acer un mapa de imagen tenemos primero que incluir la imagen que vamos a utilizar dentro del "#ody$ de nuestro cdigo a travs de la etiqueta "img$. 1osteriormente de emos de delimitar la imagen en figuras geomtricas dentro de la etiqueta "map$. !n la etiqueta "map$ podemos utilizar el atri uto name para definir el nom re de la definicin del mapa. 6entro de la directiva "map$ -emos de introducir cada una de las areas las cuales se indican a travs de la etiqueta "area$. Ftri utos de "area$2 M a t2 para indicar el texto que se mostrar cuando situemos el ratn en el rea. Tam in se mostrar ese texto en el caso de que el navegador no pueda cargar la imagen en cuestin. M coords2 para definir las coordenadas del rea. $ada punto de la imagen se define a travs de su altura %8& y anc-ura %W&. Siendo la esquina superior izquierda la posicin /U+U0+ y la esquina inferior derec-a la posicin /8+W0. !s decir+ las coordenadas del primer pixel son /U+U0 y el 9ltimo pixel de una imagen+ por ejemplo+ de @Ux@U ser /K+K0&. M hre+2 para indicar el destino del enlace correspondiente al rea. M nohre+2 indica que no se tomar ninguna accin cuando se -aga clic so re el rea definida. M shape2 tipo de rea. 1udiendo ser2 rect2 rea rectangu ar. 1ara definirla se utilizan las coordenadas de los puntos de la esquina superior izquierda y la esquina inferior derec-a. "area "area shape' shape'?rect( ?rect( coords' coords'?x&@y&@x)@y)($ ?x&@y&@x)@y)($

    circ e2 rea circu ar que se indica con la coordenada del centro del crculo y el radio. "area "area shape' shape'?circ ?circe( e( coods'?x&@y&@r($ coods'?x&@y&@r($

    po y2 es un rea po igona . 1ara definirlo -ay que indicar todos sus puntos en orden siguiendo el camino marcado por el permetro del polgono. "area "area shape' shape'?po ?poy( y( coords' coords'?x&@y&@x)@y)@x-@y-@x9@y9($ ?x&@y&@x)@y)@x-@y-@x9@y9($

    "htm "htm$ $ "head$"tit "head$"tite$mapa"%tit e$mapa"%tite$"%head$ e$"%head$ "#ody$ "#ody$ "map "mapname'5mi8mapa5$ name'5mi8mapa5$ "area "area shape'5rect5 shape'5rect5 coords'5).@&;@S.@T.5 coords'5).@&;@S.@T.5 "area "area shape'5circ shape'5circe5 e5 coords'5:.@S.@9.5 coords'5:.@S.@9.5 "%map$ "%map$ "img "imgsrc'5imagenanima src'5imagenanimaes.jpg5 es.jpg5 usemap'5Cmi8mapa5$ usemap'5Cmi8mapa5$ "%#ody$ "%#ody$ "%htm "%htm$ $ hre+'5Fart.htm hre+'5Fart.htm5$ 5$ hre+'5Lisa.htm hre+'5Lisa.htm5$ 5$

    Fl -acer clic so re la cara de 'art se a rir el arc-ivo 'art.-tml que nos -a lar so re 'art.

    Fl -acer clic so re la cara de *isa se a rir el arc-ivo *isa.-tml que nos -a lar so re *isa.

    Resumen (T)*

    6aniel 6o>a ? >ez

    @U

    DE*MES *os frames% o marcos& nos sirven para dividir a ventana de navegador en di+erentes /reas@ cada una de as cua es es un archivo htm distinto e independiente. $ada marco o rea tendr sus propias arras de desplazamiento y propiedades. 1ara crear frames utilizamos la etiqueta "+rameset$ la cual v a sustituir a ha#itua "#ody$. 6entro de esta etiqueta primero definimos cada uno de los marcos ponindoles un nom re y especificando qu fic-ero -tml le corresponde mediante la etiqueta "+rame$+ y por 9ltimo indicamos lo que de e de aparecer al usuario en el caso de que su navegador no soporte frames utilizando la etiqueta "no+rames$. *as divisiones que se pueden -acer con un "+rameset$ son en filas o en columnas. 1ara indicarlo utilizamos el atri uto co s si queremos una particin en co umnas o el atri uto ro,s si la queremos en +i as. !n el atri uto co s o ro,s colocamos entre comillas el n9mero de particiones que deseamos realizar+ indicando de paso el tama>o que va a asignarse a cada una. *os formatos de tama>o son los siguientes2 J KorcentajesHUIA porcentaje referido al espacio total disponi le en la pantalla. J *#so utosA mediante un n9mero especificando el tama>o en pixels. J So#re e espacio so#rante2 colocando un asterisco %>& indicamos que queremos todo el espacio so rante. Si ponemos el asterisco en varios marcos se repartirn el espacio equitativamente y si queremos que uno de los marcos sea mayor lo -acemos poniendo un n9mero delante del asterisco+ de tal forma que si ponemos -> ese marco ser tres veces mayor que el que tenga tan slo el asterisco. !stos tres formatos se pueden com#inar. )ediante la etiqueta "+rame$ y el atri uto src definimos la procedencia de cada una de las filas o columnas. !l valor del atri uto src es la ruta y nom re del arc-ivo -tml que v a mostrar el frame2 "+rame src'(pagina&.htm ($ !n este caso estamos indicando que el frame que estamos definiendo de e mostrar la pgina pagina 1.html en su interior. (a r tantas etiquetas "+rame$ como particiones -ayamos especificado en el atri uto co s o ro,s. Ejemp os de +rames H o#servar que no hace +a ta "#ody$IA "htm "htm$ $ "head$ "head$ "tit "tite$ejemp e$ejempo.&"%tit o.&"%tite$ e$ "%head$ "%head$ "+rameset ro,s'5&..@>@&9U "+rameset ro,s'5&..@>@&9U5$ 5$ "+rame "+ramesrc'5pag&.htm5$ src'5pag&.htm5$ "+rame "+ramesrc'5pag).htm5$ src'5pag).htm5$ "+rame "+ramesrc'5pag-.htm5$ src'5pag-.htm5$ "no+rames$"p$Oo "no+rames$"p$Oopodr/s podr/sver ver esta p/gina si e esta p/gina si e navegador navegador no nosoporta soporta+rames5"%p$ +rames5"%p$ "%no+rames$ "%no+rames$ "%+rameset$ "%+rameset$ "%htm "%htm$ $

    ejemploU@ @UU piexels Fqu se vera el arc-ivo pag@.-tm

    N resto

    Fqu se vera el arc-ivo pagL.-tm

    @OX

    Fqu se vera el arc-ivo pag#.-tm

    "htm "htm$ $ "head$ "head$ "tit "tite$ejemp e$ejempo.)"%tit o.)"%tite$ e$"%head$ "%head$ "+rameset co s'5-.U @T.U "+rameset co s'5-.U @T.U5$ 5$ "+rame "+ramesrc'5pag&.htm5$ src'5pag&.htm5$ "+rame "+ramesrc' src'5pag).htm5$ 5pag).htm5$ "no+rames$"p$Oo "no+rames$"p$Oopodr/s podr/sver ver esta p/gina si e esta p/gina si e navegador navegador no nosoporta soporta+rames5"%p$ +rames5"%p$ "%no+rames$ "%no+rames$ "%+rameset$ "%+rameset$ "%htm "%htm$ $

    ejemploUL

    #UX pag@.-tm

    ZUX pagL.-tm

    Resumen (T)*

    6aniel 6o>a ? >ez

    @@

    Este es un ejemp o de +rame anidado para poder hacer divisiones en +i as y co umnas a a veG.

    ejemploU# "htm "htm$ $ "head$ "tit e$ejemp o.-"%tit e$"%head$ "head$ "tit e$ejemp o.-"%tit e$"%head$ "+rameset "+ramesetro,s'5).U ro,s'5).U@>5$ @>5$ anidado@.-tm "+rame "+ramesrc'5anidado&.htm5$ src'5anidado&.htm5$ "+rameset "+ramesetco cos'5).U s'5).U@>5$ @>5$ "+rameset "+ramesetro,s'5S.U ro,s'5S.U@>5$ @>5$ "+rame "+ramesrc'5anidado).htm5$ src'5anidado).htm5$ anidado "+rame "+ramesrc'5anidado-.htm5$ src'5anidado-.htm5$ L.-tm anidadoO.-tm "%+rameset$ "%+rameset$ "+rameset ro,s'5:.U @ >5$ "+rameset ro,s'5:.U @ >5$ "+rame "+ramesrc'5anidado9.htm5$ src'5anidado9.htm5$ "+rame "+ramesrc'5anidado;.htm5$ src'5anidado;.htm5$ anidado "%+rameset$ "%+rameset$ #.-tm anidadoR.-tm "%+rameset$ "%+rameset$ "%+rameset$ "%+rameset$ Los #ordes de os +ramesA *os navegadores cuando tra ajan con "%htm "%htm$ $ marcos automticamente di ujan un orde de separacin entre los marcos. !n el caso de que no queramos que aparezca utilizaremos el atri uto frame#order'(.( en la etiqueta "+rameset$ %para que afecte a todos los frames&. Funque eliminemos el orde el navegador deja tam in un -ueco entre los frames+ para eliminarlo utilizamos los atri utos +ramespacing'(.( y #order'(.( en "+rameset$. *tri#utos de "+rameset$A *tri#utos de "+rame$A M co sA distri ucin de marcos verticalmente. M scrA para indicar el arc-ivo que contiene el marco. M ro,sA distri ucin de marcos -orizontalmente. M nameA para dar nom re al marco y as puedas M #orderAtama>o en pixels del orde de los marcos. dirigir los enlaces -acia l. M #orderco orA color del orde. M margin,idthA n9mero de pixels de separacin M +rame#orderA para indicar si se de e de mostrar el entre los ordes verticales del marco y su contenido. orde o no. Sus valores pueden ser2 M marginheightA igual que el anterior pero en vertical. yes2 para que se vean los ordes. M scro ingA para que aparezca o no una arra de no2 para que no se vean. desplazamiento %scroll ar& en el marco. Sus valores son2 U2 para que no se vean. yes2 siempre aparecern las arras. M +ramespacingA n9mero de pixels de anc-ura de la no2 no saldrn nunca. lnea de separacin de los frames. auto2 slo saldrn si son necesarias. noresize2 atri uto sin valores que sirve para indicar que el marco no se puede redimensionar. Lso de atri#uto target de os en aces para redirigir su visua iGaci4n en e +rame adecuadoA
    !l atri uto target puede tener los siguientes valores2 M 8# ank2 muestra la nueva pgina en una ventana nueva. M 8parent2 el enlace se actualiza so re su padre o so re la ventana que estamos tra ajando. M 8top2 elimina todos los marcos existentes y carga la pgina a pantalla completa. M 8se +2 se actualiza el marco donde est situado el enlace. M nom#re de un +rame previamente de+inido con su nameA el enlace se a rir en el marco indicado. Ejemp oA 6ividimos la pantalla en dos columnas + la izquierda para colocar un men9 y la derec-a como ventana principal+donde se vern los contenidos de cada item del men9. 1ara que cuando pulsemos so re el enlace /1erros0 ste se a ra en el marco de la derec-a tenemos que darle un nom re al marco derec-o%por ejemplo name'(derecha(&.!n el enlace /1erros0 -ay que incluir el atri uto target'(derecha(. Tiene que -a er un arc-ivo de+inici4n.htm que defina los frames + otro men!.htm que se ver en la columna de la izquierda + y luego tantos .-tml como queramos que se vean en la columna de la derec-a %como Kerros.htm @ Batos.htm @ etc.&.
    "h tm $ "htm $ "he ad$ $de +inicion ee s"%tit $"%he ad$ "h e ad$"tit "tit ee $de +in icion +ram +ram s"%tit ee $"%h e ad$ "+ram ee se ttco "+ram se co s'5-.U@>5$ s'5-.U@>5$ "+ram ee nam ee '(iG qu ie rda( ee nu .h tm 5$ "+ram n am '(iG quie rda( src'5m src'5m n u.htm 5$ "+ram ee nam ee '(de re ch a( src'5G oo.h tm 5$ "+ram n am '(de re cha( src'5G oo.htm 5$ "%+ram ee se t$ "%+ram se t$ "%htm "%h tm $ $

    )en9 1erros Tatos 3sos 1atos

    'ienvenido al [oo 5irtual

    )en9 1erros Tatos 3sos 1atos

    "h tm $ "htm $ "he ad$ $m ee n! "%tit ee $"%he ad$ "h e ad$"tit "tit ee $m n !"%tit $"%h e ad$ "#ody$"u$Me nn2uacute 2u acu te 3"%u $"#r$ "#ody$"u $Me 3"%u$"#r$ "a +'(Ke rros.h tm (( targe t'(de re ch a( $ rros "a hre h re +'(Ke rros.htm targe t'(de re cha( $Ke Ke rros"a%$"#r$ "a%$"#r$ "a +'(Batos.h tm (( targe t'(de re ch a( $ "a hre h re +'(Batos.htm targe t'(de re cha( $Batos Batos"a%$"#r$ "a%$"#r$ ..... ..... .... .... "%#ody$ "%#ody$ "%h tm $ "%htm $

    Resumen (T)*

    6aniel 6o>a ? >ez

    @L

    =DE*MES *a etiqueta " i+rame$ permite insertar un marco dentro del documento. 7unciona de manera similar a la etiqueta <frame= y <frameset= pero la etiqueta <iframe= puede ser insertada entre el contenido de cualquier documento -tml. !n este caso "i+rame$ es insertado en medio del texto tal como una ta la+ o una imagen + y es mostrado como una ventana conteniendo el documento -tml con el que se enlaza.
    "htm "h tm $ $ "he ad$"tit $=DE*ME"%tit $"%h e ad$ "h e ad$"tit ee $=DE*ME"%tit ee $"%he ad$ "#ody$ xto xto "#ody$te te xtote te xto"#r$ "#r$ "ce nte r$ "ce n te r$ "i+ram ee scro g'5auto5 .e s5 ee #orde r'5&5 "i+ram scro in ing'5au to5 src'5httpA%%,,,.goog src'5h ttpA%%,,,.goog ee .e s5 +ram +ram #orde r'5&5 hhe e ight'5)..5 Si igh t'5)..5 ,idth'59..5$ ,idth '59..5$ Sives veseste estemensaje+ mensaje+significa significaque quetu tunavegador navegador no nosoporta soportaesta estacaracterstica caractersticaooestCaacuteD estCaacuteDdes-a des-a ilitada. ilitada.1ero 1 eropuedes puedesacceder acceder aaesta estainformaciCoacuteDn informaciCoacuteDnaquCiacuteD aquCiacuteD "a re +'5h ttpA%%,,,.htm ick .com %re +e re nnce ce %tags%a.h tm 5$htm "ahhre +'5httpA%%,,,.h tm qu quick.com %re +e re %tags%a.htm 5$h tm "%a$ "%a$ "%i+ram ee $ "%i+ram $ "%ce nte r$ "%ce n te r$ "#r$ xto xto "#r$ te te xtote te xto"#r$ "#r$ "%#ody$ "%#ody$ "%h tm $ "%htm $

    ejemplo iframe texto texto Toogle

    text texto

    FMNW

    =magen de +ondo y co or de +ondo con a etiqueta "#ody$

    *tri#uto #ackgroundASi queremos dise>ar sitios ms atractivos de emos utilizar imgenes o colores para el fondo de nuestras pginas. !l fondo se define dentro de la etiqueta "#ody$.1ara insertar una imagen de fondo de emos utilizar el atri uto #ackground dentro de la etiqueta "#ody$. !l valor de este atri uto es la .R* o ruta de la imagen que deseamos colocar. Si la imagen es ms peque>a que la pantalla del navegador+ esta se repetir tantas veces como sea necesario -asta cu rir toda la pantalla. Ejemp os 2 "#ody #ackground'5paisaje.jpg5$ "#ody #ackground'5httpA%%,,,.virtua nauta.com%imagenes%punteado.gi+5$ *tri#uto #gco or 2 !specifica el color de fondo de una pgina (T)*. !l valor del mismo puede expresarse con un n9mero -exadecimal+ valor RT'+ o nom re de color%en ingls&. !ste atri uto tam in de e ir dentro de la etiqueta "#ody$. Ejemp os 2 "#ody #gco or'5CDD....5$ "#ody #gco or'5rg#H);;@.@.I5$ "#ody #gco or'5red5$ V=mportante0 *os atri utos acPground y gcolor estn desapro ados en la 9ltima versin de (T)*%(T)*O y 8(T)*&. !n su lugar de emos usar las propiedades de fondo de $SS para escri ir un cdigo correcto de nuestro sitio. Sonido de +ondo < gsound= *os formatos de sonido pueden ser 2 ,av+ mid+ ram+ ra+ aif+ aifc+ aiff+ au+ snd+ mp#+ !s recomenda le usar el que menos espacio utilice 1ara la configuracion2 loopQ:B@: o loopQ0infinite0 Se reproducir indefinidamente. loopQ:@: Se reproducir una sola vez. loopQ:L: Se reproducir dos veces. y asi consecutivamente. Ejemp o2 src'5ruta8+ichero5 fija la ruta en la que se encuentra el "htm "htm$ $ fic-ero de audio a reproducir. *a ruta puede ser relativa a "head$ "head$ nuestro sistema de carpetas local+ a soluta respecto el "#gsound "#gsound src'5tu8sonido.mp-5 src'5tu8sonido.mp-5 oop'51&5$ oop'51&5$ sistema de carpetas del servidor ,e o una .R* "%head$ "%head$ completa que localice el fic-ero en ?nternet. "#ody$ "#ody$ oop'5n5 determina el n9mero de veces %n& que se de e "%#ody$ "%#ody$ ejecutar el fic-ero de audio. "%htm "%htm$ $ #a ance'5#5 determina el alance del sonido entre los dos altavoces del equipo+ es decir+ la potencia o intensidad con que se oir en cada uno de ellos %derec-o e izquierdo&. Sus valores pueden estar entre B@U+UUU y \@U+UUU+ correspondiendo el valor U a un alance equili rado. vo ume'5v5 fija el volumen al que se oir el sonido+ y sus valores pueden variar entre B@U+UUU %mnimo& y U %mximo&. 4o es soportado por los equipos )F$. 3tra forma de incluir sonidos es dejando al usuario la decisin de escuc-arlos o no. 1ara -acerlo incluiremos el sonido en el parmetro hre+ de un enlace + como si fuera una pgina (T)*2 "a "a hre+'5archivo.,av5$ hre+'5archivo.,av5$ si sipu pusas sasaqu6 aqu6oir/s oir/see sonido sonido"%a$ "%a$

    Resumen (T)*

    6aniel 6o>a ? >ez

    @#

    EMFEN

    3tra forma de incorporar sonido a una pgina ,e es utilizando la etiqueta <em ed= .

    "em#ed "em#ed src'5..%sonidos%canyon.mid5 src'5..%sonidos%canyon.mid5,idth'&.. ,idth'&.. height'&.. height'&.. hidden'5true5 hidden'5true5 autostart'5true5 autostart'5true5 oop'5true5$ oop'5true5$ *tri#utos de "em#ed$A M srcA ruta y nom re del arc-ivo a reproducir. M ,idth y heightA para indicar el tama>o del reproductor. Son anc-ura y altura respectivamente. M autostartA para indicar si se arranca automticamente la reproduccin. *os valores son /true0 %para que arranque automticamente& o /false0 %para que no&. M oopA para que reproduzca ininterrumpidamente el arc-ivo de sonido %valor /true0&+ o no %valor /false0&. M hiddenA para ocultar %valor /true0&+ o no %valor /false0& el reproductor. Fdems de sonido +en el navegador ,e se pueden reproducir otros tipos de fic-eros . *os p ugins son programas auxiliares capaces de manejar formatos especiales de fic-eros+ que se incorporan al navegador y se ejecutan dentro de la ventana de visualizacin. Se incluyen en la pgina a travs de la directiva "em#ed$.M/s atri#utos de "em#ed$A M name2 nom re del o jeto contenido en el plugin. M src2 localizacin del fic-ero a reproducir. M p uginspage2 .R* donde el usuario encontrar instrucciones so re cmo instalar el plugin. M units2 unidad de medida para los atri utos height y ,idth. 1ueden ser pixe s o en U. *KKLET 1ermite introducir programas ]ava %concretamente applets& dentro de una pgina ,e . Ln app et es una ap icaci4n escrita en Java y desarro ada para ser ejecutada desde un navegador. *as utilidades tpicas en las que son empleados los applets son efectos grficos en pginas "e + interfaces de usuario avanzadas+ funcionalidad cliente en aplicaciones clienteBservidor y juegos. *a sintaxis es la siguiente2 *os navegadores que no admitan applets+ ignoran todo lo que aparece entre la directiva "app et$ y su cierre+ a excepcin de los parmetros "param$ que permiten el paso de parmetros. ]ava es compati le con todos los sistemas porque asa su funcionamiento en los Fyte Codes+ que no es ms que una precompilacin del cdigo fuente de ]ava. !stos 'yte $odes no son el programa en ]ava propiamente dic-o+ sino un arc-ivo que contiene un cdigo intermedio que puede manejar la M/quina Qirtua de Java. $ada sistema operativo dispone de una )aquina 5irtual de ]ava que puede interpretar los 'yte $odes y transformarlos a sentencias ejecuta les en el sistema en cuestin. *os applets tienen la extensin /.c ass(. "app "appet etatri#uto&'va atri#uto&'vaor& or&atri#uto)'va atri#uto)'vaor) or)...atri#utoO'va ...atri#utoO'vaorO$ orO$ "param "param...$ ...$ "param "param...$ ...$ "011 "011en eneste esteespacio espacioescri#imos escri#imosee c4digo c4digopara para navegadores navegadoresque queno noreconoGcan reconoGcanapp appets ets11$ 11$ ........ ........ ........ ........ "%app "%appet$ et$ *tri#utos de "app et$A code#ase2 especifica la .R* donde est localizado tanto el applet como todos los recursos %imgenes+ clases ]ava...&. M code2 especifica el nom re de la clase ]ava que contiene el applet. M name2 indica un nom re para la instancia concreta del applet. M archive2 lista de arc-ivos separados por coma+ conteniendo clases ]ava y recursos necesarios para la ejecucin del applet+ que son precargados por el navegador. Fl precargar se acelera el proceso de ejecucin de los applets. Tam in tenemos atri utos que ya -emos visto en otras ocasiones como2 ,idth+ height+ a ign+ hspace y vspace. K*E*M !s una directiva para definir parmetros y es utilizada por applets W por o jetos. Sus atri utos son2 M name2 nom re con el cual ser identificado el parmetro dentro del applet. M va ue2 valor concreto del parmetro. M va uetype2 tipo de atri uto va ue. Su uso es optativo. 5alores2 ^ data2 -ace que value se mande al applet u o jeto como un string. !s el valor por defecto. ^ re+2 value contiene la .R* donde se pueden localizar los valores en tiempo de ejecucin. ^ o#ject2 indica que value contiene un identificador correspondiente a una declaracin de <o ject= en el mismo documento. M type2 indica el tipo de contenido del recurso apuntado por va ue en el caso de que va uetype sea re+. *os 9nicos atri utos soportados por todos los navegadores son los dos primeros.

    Resumen (T)*

    6aniel 6o>a ? >ez

    @O

    Ejemp o de app etA

    "htm "htm$ $ "head$"tit "head$"tite$ejemp e$ejempo ode deapp appet"%tit et"%tite$"%head$ e$"%head$ "#ody$ "#ody$ "p "pa aign'5center5$ ign'5center5$ "app "appet etcode#ase'5..%app code#ase'5..%appets5 ets5 code'5sinetext.c code'5sinetext.cass5 ass5,idth'9T. ,idth'9T.height'T;$ height'T;$ "param name'text va ue'5curso de htm y css5$ "param name'text va ue'5curso de htm y css5$ "param "paramname'rate name'rateva vaue'595$ ue'595$ "param name'+ont va "param name'+ont vaue'5verdana5$ ue'5verdana5$ "param "paramname'#ackground name'#ackgroundva vaue'5C......5$ ue'5C......5$ "param name'+oreground va "param name'+oreground vaue'5C++++++5$ ue'5C++++++5$ o osiento@ siento@pero perono nopuedes puedesver vereste esteapp appet et+uncionando. +uncionando. "%app et$ "%app et$ "%#ody$ "%#ody$ "%htm "%htm$ $

    MFJECT La etiqueta "o#ject$ sirve de so uci4n genXrica para a incluir :o jetos: en los documentos. !stos :o jetos: pueden ser2 imgenes+ applets+ videos + sonido + otros documentos (T)*+etc... *a estructura es muy similar a la de la etiqueta "app et$+ con la inclusin entre "o#ject$ y su cierre de directivas "param$ y contenido alternativo que se mostrar en navegadores que no soporten el o jeto. *tri#utos de "o#ject$A c assid2 Sirve para especificar la localizacin de los datos del o jeto. !ste atri uto puede utilizarse conjuntamente con el atri uto data o como alternativa a ste. 6epender del tipo de o jeto. Su valor es una direccin .R*. code#ase2 !specifica el :camino: a utilizar para resolver los .R* relativos especificados en otros atri utos. Si no se especifica+ el valor por defecto es la ase del .R* del documento activo. Su 5alor es un .R*. codetype2 Sirve para especificar el tipo de medio o datos esperados+ cuando se descarga el o jeto especificado por el atri uto c assid+ por ejemplo2 5text%htm 5@ 5text%css5@ 5image%gi+5+ etc. Si no se incluye este atri uto+ se toma por defecto el valor del atri uto type. data2 1uede utilizarse para especificar la localizacin de los datos del o jeto. Si se utiliza como direccin relativa+ se interpretar en ase al atri uto code#ase. type2 !specifica el tipo de contenido especificado por el atri uto data. !s opcional+ pero se recomienda su uso si se va a utilizar el atri uto data+ ya que evita la carga de tipos de contenido que no sean soportados por el navegador. archive2 1uede utilizarse para relacionar una serie de .R*s de arc-ivos que contengan recursos relativos al o jeto en cuestin. 1uede incluir los recursos especificados en los atri utos c assid y data. *a lista de e ir separada por espacios en lanco. Si se utilizan direcciones relativas+ se resolvern en ase al atri uto code#ase. dec are2 $uando se utiliza este atri uto+ convierte la definicin del o jeto en una simple :declaracin:. !l o jeto queda incrustado+ pero inactivo. 1ara activar el o jeto+ de er utilizarse+ con posterioridad+ otra definicin de o jeto que -aga referencia a esta declaracin. stan#y2 !ste atri uto especifica un mensaje que ser mostrado mientras se cargan los datos del o jeto. usemap2 Fsocia un mapa de imagen con un elemento. *a gran ventaja con respecto a "img$ es que al colocar la definicin de "map$ %la lista de enlaces& entre "o#ject$ y su cierre+ ca e la posi ilidad de que un navegador sin imgenes vea+ sin em argo+ los enlaces del mapa. W atri utos que ya conocemos como height+ ,idth+#order+ hspace+ vspace y a ign. "htm "htm$ $ "head$"tit "head$"tite$ejemp e$ejempo ocon cono#ject"%tit o#ject"%tite$"%head$ e$"%head$ "#ody$ "#ody$ "o#ject "o#jectdata' data'?musica.mov( ?musica.mov(,idth' ,idth'?)..( ?)..(height' height'?&;.( ?&;.(#order' #order'?)($ ?)($ "%o#ject$ "%o#ject$ "o#ject "o#jectdata' data'?..%imagenes%9T:1a ?..%imagenes%9T:1aienp-.gi+( ienp-.gi+(,idth' ,idth'?)..( ?)..(height' height'?&;.( ?&;.(#order' #order'?)($ ?)($ "011 Si e o#jeto anterior no +unciona se ver/ e siguiente texto 11$ "011 Si e o#jeto anterior no +unciona se ver/ e siguiente texto 11$ Lo Losiento sientopero perono nose sepuede puedecargar cargarni niee v6deo@ v6deo@ni ni a aimagen. imagen. "%o#ject$ "%o#ject$ "%#ody$ "%#ody$ "%htm "%htm$ $

    Resumen (T)*

    6aniel 6o>a ? >ez

    @R

    N=Q *a etiqueta "div$ % divisin& nos permite dividir la pgina ,e en secciones +con lo que conseguiremos una cierta estructuracin dentro de la pgina. 6ic-o de otra forma+<div= es un contenedor+ una caja+ en la que se pueden introducir otras cajas. 6e esta forma se les puede dar formato ms tarde con $SS % -ojas de estilo en cascada&. 1ara usar <div= es de vital importancia el atri uto /id0. $on id asignaremos a cada seccin <div= un nom re 9nico para poder distinguir cada una de ellas en el cdigo fuente. Tam in se puede asignar un /id0 a < ody=. !jemplo de divisin de una pgina en secciones con <div=2 "htm "htm$ $ "head$"tit "head$"tite$ e$secciones secciones"%tit "%tite$"%head$ e$"%head$ "#ody "#ody id'(=nicio($ id'(=nicio($ "div "div id'(So#recu#ierta($ id'(So#recu#ierta($ "div "div id'(Logotipo($ id'(Logotipo($ Este Estees esee sitio sitiopara paranuestro nuestro ogo. ogo. "%div$ "%div$ "011 "011Din Dinde deLogotipo11$ Logotipo11$ "div "div id'(Oavegaci4n($ id'(Oavegaci4n($ *qu6 *qu6pondremos pondremosen enaces acespara paranavegar. navegar. "%div$ "%div$ "011 "011Din Dinde deOavegaci4n11$ Oavegaci4n11$ "div "div id'(Yona id'(Yonatexto($ texto($ Contenidos Contenidosde de a ap/gina. p/gina. "%div$ "%div$ "011 "011Din Dinde deYona Yonatexto11$ texto11$ "div "div id'(KiX id'(KiXde dep/gina($ p/gina($ Esto Estoes esee piX piXde dep/gina p/gina "%div$ "%div$ "011 "011Din Dinde deKiX KiXde dep/gina11$ p/gina11$ "%div$ "%div$ "011 "011Din Dinde deSo#recu#ierta11$ So#recu#ierta11$ "%#ody$ "%#ody$ "%htm "%htm$ $

    < ody idQ0?nicio0= <div idQ0So recu ierta0 <div idQ0*ogotipo0= !ste es el sitio para nuestro logo. <;div= <div idQ04avegacin0= Fqu pondremos enlaces para navegar. <;div= <div idQ0[ona texto0= $ontenidos de la pgina. <;div= <div idQ01i de pgina0= !sto es el pi de pgina <;div=

    <;div= <; ody=

    Eepresentaci4n esquem/tica de as secciones. Skip1LinkA .n sPipBlinP es un salto o -ipervnculo dentro de la misma pgina. !stos saltos son fciles de realizar cuando se utilizan etiquetas <div=. Si estamos navegando por el principio de la pgina %suponiendo una pgina muy larga& y queremos saltar a una seccin del final lo -aramos as2 "a "a hre+'(CKiX hre+'(CKiXde dep/gina($ p/gina($ =r =ra a piX piX "%a$ "%a$ Si estamos en el final y queremos saltar el inicio2 "a "a hre+'(CLogotipo($ hre+'(CLogotipo($ =r =ra a Logo Logo "%a$ "%a$ %3 servar que se antepone

    C al nom re definido en ?id(&

    Resumen (T)*

    6aniel 6o>a ? >ez

    @S

    HMJ*S NE EST=LM EO C*SC*N* ?CSS( HC*SC*N=OB STWLE SHEETSI


    $SS es un lenguaje creado especialmente para dar formato a los elementos -tml como fuentes + colores +-ipervnculos + secciones +... *as posi ilidades de dar formato de $SS se dividen en tres reas2 @& 7uentes y colores. L& 6istancias y ordes. #& *ayout % posicin de secciones&. Se puede incorporar el lenguaje $SS en una pgina ,e -tml de tres formas distintas2 @& ?nsertando cdigo $SS en la ca ecera mediante la etiqueta <style=2 <-ead= <sty e typeQ:text;css:= <ABB p _textBalign2rig-t` BB= <%sty e= <;-ead= L& $omo atri uto sty e en cualquier elemento2 <p sty eQ0textBalign2 rig-t0= 1rrafo con estilo propio <;p= $reando un arc-ivo $SS externo y enlazndolo con el arc-ivo -tml. *os arc-ivos $SS tienen la extensin .css . 6entro del arc-ivo .-tml tenemos que poner el enlace a el arc-ivo .css mediante la etiqueta <linP=. < ink relQ:styles-eet: Frc-ivo.-tml <-tml= <-ead= <linP rel..... <;-ead= ........ *os comentarios en $SS se -acen as2 ;N esto es un comentario N; typeQ:text;css: -refQ:arc-ivo.css:= Frc-ivo.css

    #&

    *a sintaxis sica de $SS est formada por un S!*!$T3R seguido de una 6!$*FRF$?a4 encerrada entre llaves _ ` la cual se compone de 1R31?!6F6!S W 5F*3R!S. selector _ propiedad2 valor D propiedad2 valor D propiedad2 valor ` *os selectores pueden ser elementos usuales de -tml como ody + p + -@ + -L + ....o selectores usando los /id0 asignados a <div= u otros elementos.!n este 9ltimo caso se antepone la almo-adilla J al nom re del selector.

    Resumen (T)*

    6aniel 6o>a ? >ez

    @Z

    Ejemp o de posi# e +ichero CSSA JSo recu ierta _ color2 lacPD acPgroundBcolor2 ,-iteD ,idt-2 ZLUpxD marginBtop2 @UpxD marginBrigt-2 autoD marginB ottom2 @UpxD marginBleft2 autoD ` J*ogotipo _ acPgroundBcolor2 Jf#cSUUD acPgroundBimage2 url% fondo.jpg & D acPgroundBattac-ment2 fixedD ` -@ _ fontBsize2 @RUXD ` -L _ fontBsize2 @LUXD ` -@ + -L _ textBalign2 centerD letterBspacing2 OpxD ` p_ fontBsize 2 @LptD fontBfamily 2 arial+-elveticaD fontB,eig-t 2 normalD `

    Formacin de grupos: class


    1ara poder dar formato a varios prrafos de la pgina+ un selector sencillo como /p0 es demasiado indeterminado y una /id0 no es recomenda le porque slo se puede utilizar una vez para un solo prrafo. Si lo que queremos es tener grupos de prrafos cada uno con un estilo lo que de emos usar son las clases de $SS. 1or ejemplo si queremos que todos los prrafos informativos destaquen con un fondo gris y un orde slido -aramos los siguiente2 !n el fic-ero -tml pondramos el atri uto /class0 a los prrafos deseados2 "p c ass'(cuadro8in+o($ Esto es un parra+o in+ormativo "%p$ W en el fic-ero $SS introducimos la clase con el nom re del atri uto class asignado en el -tml precedido por un punto2 .cuadro8in+o Z co orA # ack3 #ackground1co orA C:c:c:c3 #orderA -px so id Cec+Tdd3 [ Pseudoclases: .na pseudoclase acompa>a al selector separado por dos puntos020 %las pseudoclases usuales son linP+ visited+ -over+ focus+ active+ lang+ firstBline+ firstBletter+ efore y after & . Se utiliza frecuentemente en el selector correspondiente a la etiqueta <a= para los enlaces. !jemplo2 a2 linP _color2 lue` % !l color de los enlaces normales ser azul&. a2 visited _color2 pruple` %$olor de los enlaces ya visitados` a2 -over _color2 green ` % $olor del enlace cuando el ratn est o pasa por encima del enlace& a2 focus _color2 green` %$olor del enlace cuando se selecciona con el teclado+ta ulando& a2 active _color2 lacP` %$olor del enlace cuando en el momento de -acer clicP con el ratn&

    Los sectores se pueden agrupar separndolos por comas , E emplo:


    p @ h& @ h) Z +ont1co orA # ue3 [

    Peque!as partes de la pgina


    1ara definir estilos en secciones reducidas de una pgina se utiliza la etiqueta "span$. $on su atri uto sty e indicamos en sintaxis $SS las caractersticas de estilos. *o vemos con un ejemplo+ pondremos un prrafo en el que determinadas pala ras las vamos a visualizar en color verde. "p$ esto es un p/rra+o en varias pa a#ras "span sty e'5co orAgreen5$en co or verde"%span$ resu ta muy +/ci . "%p$

    Resumen (T)*

    6aniel 6o>a ? >ez

    @V

    "nidades de medida usadas en #$$


    px2 in 2 mm2 cm2 pc2 pt2 ex2 em2 pixels inc-es %pulgadas& milmetros centmetros picas puntos xB-eig-ts %tipo medio+ la altura de una letra min9scula que no tiene trazos ascendentes ni descendentes& mBlengt-s %tipo mximo+ la altura de una letra may9scula que no tiene trazos ascendentes ni descendentes& ejemp oA "div sty e'(marginA &.px3($texto cua quiera"%div$

    El modelo de ca as de #$$ marginBtop orderBtop paddingBtop

    orderBleft paddingBleft

    paddingBrigt-

    arginBleft

    ,idt-

    paddingB ottom orderB ottom marginB ottom Posicionamiento de capas % clipping

    Resumen (T)*

    6aniel 6o>a ? >ez

    orderBrigtmarginBrigt-

    -eigt-

    @K

    &"'( )E *EFE*E+#,( #$$ -Propiedades,valores,selectores.

    Resumen (T)*

    6aniel 6o>a ? >ez

    LU

    Resumen (T)*

    6aniel 6o>a ? >ez

    L@

    Resumen (T)*

    6aniel 6o>a ? >ez

    LL

    J* Q*SCE=KT /ava$cript es un lenguaje interpretado que permite incluir macros o peque>os programas en pginas "e . !stas macros se ejecutan en el ordenador del visitante de nuestras pginas+ y no en el servidor %algo muy interesante+ los servidores "e suelen estar so recargados+ mientras que los 1$bs de los usuarios no suelen estarlo&. /ava$cript proporciona los medios para2 $ontrolar las ventanas del navegador y el contenido que muestran. 1rogramar pginas dinmicas simples sin tener que matar moscas a ca>onazos de ]ava. !vitar depender del servidor "e para clculos sencillos. $apturar los eventos generados por el usuario y responder a ellos sin salir a ?nternet. Simular el comportamiento de las macros !" cuando no es posi le usarlas. $ompro ar los datos que el usuario introduce en un formulario antes de enviarlos. $omunicarse con el usuario mediante diversos mtodos. !l lenguaje ]avaScript se inserta en documentos HTML#H$perText Mar%up Langua&e'+ de forma que su cdigo queda reflejado en la propia pgina y no es llamado o cargado de ninguna fuente externa %por ejemplo un arc-ivo&. Se trata de un lenguaje interpretado puro %ni compilacin+ ni generacin de intermedios codificados de ning9n tipo&. Todo el cdigo de ]avaScript de e explicitarse en la pgina (T)* seg9n el formato2 "script *anguageQ:]avaScript:$ "011 ;; Fqu ir su cdigo ;; 11$ "%script$ 3 serve que el tag %etiqueta& utilizado es "script anguage'...$....."%script$. !n ? anguage( se indica qu lenguaje script se utilizar+ aqu indicamos ]avaScript+ ya que es lo que nos ocupa en estos momentos.4ote tam in las acotaciones de comentario <ABB al comienzo y ;;BB= al final del rea de escritura de cdigo. !sto es para ocultarlo a los navegadores ms antiguos+ que no dan soporte a lenguajes script. *a etiqueta <script= se inserta en el enca ezado entre <-ead= y <;-ead= para definir funciones que sern utilizadas posteriormente en el cuerpo entre < ody= y <; ody= . !n el cuerpo < ody= tam in puede aparecer la etiqueta <script= para llamar a las funciones definidas en el enca ezado. *as funciones definidas en <-ead= normalmente son ejecutadas por los llamados )anejadores de !ventos. *os eventos permiten al usuario interactuar con la pgina ,e .*os eventos ms comunes son2 on*#ort Se origina cuando se cancela la carga de una imagen. onF ur Se produce al deseleccionar un campo de edicin de un formulario. onC ick Se produce cuando se -ace clic en un elemento del formulario o un enlace -ipertexto. onChage Se origina al cam iar en contenido de un campo o seleccin. onError Se produce cuando se o tiene un error al cargar el documento (T)*. onDocus Se produce cuando se Fctiva un campo de edicin. onLoad Se origina cuando se carga el documento (T)*. onMouseMut Se produce cuando alejamos el mouse de un enlace de -ipertexto. onMouseMver Se produce cuando desplaza el mouse so re los enlaces de -ipertexto. onEeset Se produce cuando se resetea el formulario. onSe ect Se produce al seleccionar un campo de edicin. onSumit Se origina al enviar el formulario. onLn oad Se origina al a andonar el documento (T)*. onN# C ick Se produce cuando se -ace do le clic en un formulario o enlace -ipertexto. onNragNrop Se produce cuando se vuelca %drop& un o jeto so re la ventana del navegador. on\eyNo,n Se produce cuando se pulsa una tecla. on\eyKress Se produce cuando se tiene una tecla pulsada. onMouseNo,n Se origina al pulsar alg9n otn del mouse. MnMouseMove Se origina al mover el cursor. onMove Se produce cuando se mueve una ventana o frame. onEesiGe Se produce al cam iar el tama>o de una ventana o frame. !n ?nternet puedes encontrar pginas que suministran ejemplos de cdigos en ]avascript que puedes copiar y pegar en tu pgina ,e +como por ejemplo2 ,,,.elcodigo.net ,,,.la,e delprogramador.com ,,,.mundojavascript.com ,,,.losrecursosgratis.com ,,,.javascript.com.mx; ,,,.codigogratis.com.ar

    Resumen (T)*

    6aniel 6o>a ? >ez

    L#

    Resumen (T)*

    6aniel 6o>a ? >ez

    LO

    You might also like