PBHTML

IN TIT!"I#N $%!
"&TI'& P(I'&%& $L %I'IN) M&$ T()
COMPUTACIN
2%) $"!N%&(I& III * T(IM$ T($
Practicas de HTML
1. Pagina bsica En un procesador de te to cual!uiera teclear el siguiente c"digo

<HTML> <HEAD> <TITLE> Mi primera pagina Web </HEAD> </TITLE>
<BODY> Esta es mi primera pagina, es muy senci a, per! c!m! e engua"e HTML es #$ci , pr!nt! estar% en c!n&ici!nes &e 'acer c!sas mas interesantes( </BODY> </HTML>
#uardar el archivo como Practica1.html en $ormato te to % visualizarlo con el navegador. 2. Fondos de pgina, cabeceras y bloques En un procesador de te to cual!uiera teclear el siguiente c"digo <'tm > <'ea&> <tit e>)ractica &e cabeceras y b !*ues</tit e> </'ea&> <b!&y bgc! !r+,-EBD.A/,> <'0 a ign+,center,>)racticas &e encabe1a&!s y b !*ues &e te2t!</'0> <'r> <&i3 a ign+,center,> <'4>Encabe1a&! &e ni3e 4 </'4> <'0>Encabe1a&! &e ni3e 0</'0> <'5>Encabe1a&! &e ni3e 5</'5> <'6>Encabe1a&! &e ni3e 6</'6> <'7>Encabe1a&! &e ni3e 7</'7> <'8>Encabe1a&! &e ni3e 8</'8> <p>)arra#! &entr! &e 9 t:DI;9gt: centra&!, p!r cua , 'ere&a a a ineaci<n</p> !
Marlon Ponce Diaz http://www.colegiodivinomaestroves.blogspot.com
Pgina 1 de 13
</&i3> <'r>
<'r =i&t'+,7>?, si1e+,7,>
<b !c@*u!te>)arra#!s c!n &i#erentes a ineaci!nes</b !c@*u!te> <p>)arra#! #uera &e 9 t:DI;9gt: centra&!, p!r a a ineaci<n i1*uier&a p!r &e#ect!</p> <p a ign+,rig't,>)arra#! a inea&! a ! cua t!ma
a &erec'a</p>
<p a ign+,center,>)arra#! centra&!</p> <'r> c!n esta Anea c!mpr!bam!s *ue e espaci!s ni !s sa t!s &e Anea <pre> )er! si inc uim!s n!s muestra e T ! escribim!s </pre> HTML n! respeta ni !s
a eti*ueta 9 t:)BE9gt: E C T O ta y c!m!
<p>HTML separa as pa abras &e te2t! c!n un b anc!, si *uerem!s aDa&ir mas b anc!s, &ebem!s 'acer re#erencia a a enti&a& *ue ! representa E9amp:nbsp:Fc!m! p!r e"emp !G 9nbsp:9nbsp:9nbsp:9nbsp:9nbsp:9nbsp:9nbsp:9nbsp:9nbsp:9nbsp :9nbsp:9nbsp:9nbsp:9nbsp: est!</p> <p> )ara cua *uier c!nsu ta &irigirse a <a&&ress> Hu$n I!n1a e1 </a&&ress><p> </b!&y> </'tm > #uardar el archivo como Practica&.html en $ormato te to % visualizarlo con el navegador.
+. (esaltados de te,to y control de -uentes 'on las eti!uetas de control de te to estudiadas conseguir los e$ectos siguientes:.
(gregar adems a la pagina di$erentes e)emplos de eti!uetas de resaltado #uardar el archivo como Practica3.html en $ormato te to % visualizarlo con el navegador. 4. Listas En un procesador de te to cual!uiera teclear el siguiente c"digo
<HTML> <HEAD> <TITLE> )racticas &e istas </TITLE> </HEAD> <BODY> <.EJTEB> <H4> Mis a#ici!nes </H4> </.EJTEB> <HB> Kin un !r&en particu ar, mis <B> a#ici!nes </B> s!n as siguientesG <LL> <LI> E cine <LI> E &ep!rte <LL> <LI> Jataci<n <LI> Ba !ncest! </LL> <LI> La mMsica </LL> La mMsica *ue m$s me gusta es Een !r&en &e pre#erenciaFG <OL> <LI> E r!c@ <LI> E "a11 <LI> La mMsica c $sica </OL> </BODY> </HTML>
'ompletar la pgina con el resto de tipos de listas estudiadas % observar sus di$erencias. #uardar el archivo como Practica*.html en $ormato te to % visualizarlo con el navegador. 5. Hiperenlaces e inclusi.n de i/agenes En un procesador de te to cual!uiera teclear el siguiente c"digo
<'tm > <'ea&> <tit e>)ractica &e Hiperen aces</tit e> </'ea&> <b!&y bgc! !r+,-DNDNO5,> <p a ign+,center,><a name+,inici!,> <#!nt si1e+P5><u>En aces c!n !tras paginas</u></#!nt></p> <'r> <'r =i&t'+,Q>?,> <&ir> < i><p a ign+, e#t,><a 're#+,'ttpG//===(micr!s!#t(c!m,>Micr!s!#t</a></p> </ i> < i><p a ign+, e#t,><a 're#+,)ractica4('tm ,>Mi primera pagina Web</a></p> </ i> < i><p a ign+, e#t,><a 're#+,)ractica0('tm ,>Mi segun&a pagina Web</a></p> </ i> </&ir> <'r =i&t'+,Q>?,> <'r> <p a ign+,center,><#!nt si1e+P5><u>En aces en pagina</u></#!nt></p> <'r> <'r =i&t'+,Q>?,> <&ir> < i><p a ign+, </ i> < i><p a ign+, </ i> < i><p a ign+, </ i> < i><p a ign+, pagina</a></p> </ i> </&ir> <'r =i&t'+,Q>?,> <'r> a misma
e#t,><a 're#+,-#!t!4,>O!t! 4</a></p> e#t,><a 're#+,-#!t!0,>O!t! 0</a></p> e#t,><a 're#+,-#!t!5,>O!t! 5</a></p> e#t,><a 're#+,-inici!,>;! 3er a principi! &e a
<center> <p a ign+,center,><a name+,#!t!4,></a><#!nt c! !r+,->>Q>>>, si1e+,6,>#!t!gra#ia 4</#!nt></p> <img src+,imagenes/#!t!4(gi#, =i&t'+,4>>, 'eig't+,4>>, ALIIJ+TO)> Te2t! a inea&! arriba <'r> <p a ign+,center,><a name+,#!t!0,></a><#!nt c! !r+,->>Q>>>, si1e+,6,>#!t!gra#ia 0</#!nt></p> <img src+,imagenes/#!t!0(gi#, =i&t'+,4>>, 'eig't+,4>>, ALIIJ+MIDDLE> Te2t! a inea&! a centr! <'r> <p a ign+,center,><a name+,#!t!5,></a><#!nt c! !r+,->>Q>>>, si1e+,6,>#!t!gra#ia 5</#!nt></p> <img src+,imagenes/#!t!5(gi#, =i&t'+,4>>, 'eig't+,4>>, ALIIJ+BOTTOM> Te2t! a inea&! aba"! <'r> <p a ign+, e#t,><a 're#+,-inici!,>;! 3er a pagina</a></p> </center> </b!&y> </'tm > principi! &e a
#uardar el archivo como Practica+.html en $ormato te to % visualizarlo con el navegador. 0 bis. Mas sobre i/genes (,adir al codigo de Practica+.html las siguientes sentencias:
<HB><A HBEO+,)ractica5('tm , a t+RMI tercera practicaR><IMI KB.+,imagenes/a&e ante(gi#,> </A> En ace a )ractica 5<HB>
-magen con hipervinculo
.e to rodeando completamente la imagen /hr0/p0 1idra 2mitolog3a45 en la mitolog3a griega5 monstruo de nueve cabezas !ue viv3a en un pantano cerca de 6erna5 #recia. 7na amenaza para todos los habitantes de (rgos5 <IMI KB.+,imagenes/'i&ra(gi#, =i&t'+,4>>, 'eig't+,4>>, ALIIJ+LEOT > ten3a un aliento mortalmente ponzo,oso % cuando le cortaban una de sus cabezas5 crec3an dos en su lugar8 la cabeza del centro era inmortal. 19rcules5 a !uien se envi" a matarla como el segundo de sus doce traba)os5 logr" eliminarla !uemando las ocho cabezas mortales % enterrando la novena5 inmortal5 ba)o una enorme roca. 19rcules es el nombre romano del h9roe griego 1eracles. Era hi)o del dios :eus % de (lcmena5 mu)er del general tebano (n$itri"n.
1era5 la celosa esposa de :eus5 decidida a matar al hi)o de su in$iel marido5 poco despu9s del nacimiento de 19rcules envi" dos grandes serpientes para !ue acabaran con 9l. El ni,o era a;n mu% pe!ue,o pero estrangul" a las serpientes. /hr0 <otura de te to
<IMI KB.+,imagenes/mur!(gi#, ALIIJ+LEOT> Este te2t! esta a un a&! &e a imagen( <BB> Este tambi%n esta a un a&! &e a imagen, en a Anea siguiente( <BB .LEAB+LEOT> Este !tr! te2t!, en cambi!, 'a busca&! e primer margen ibre a a i1*uier&a(
6. Tablas En un procesador de te to cual!uiera teclear los siguientes c"digos. 'rear primero la pgina del primer punto a e ir completando los siguientes puntos en el mismo archivo. =alvar el archivos como Practica>.html % visualizar los resultados con el navegador. .abla sencilla
<HTML> <HEAD> <TITLE> )racticas &e tab as </TITLE> </HEAD> <BODY> <TABLE BOBDEB> <.A)TIOJ> E"emp ! &e tab a senci a</.A)TIOJ> <TB> <TD>#i a4Sce &a4</TD> <TD>#i a4Sce &a0</TD> <TD>#i a4S ce &a5</TD> </TB> <TB> <TD>#i a0Sce &a4</TD> <TD>#i a0Sce &a0</TD> <TD>#i a0S ce &a5</TD> </TB> </TABLE> </BODY> </HTML>
.ablas con desigual numero de celdas

<TABLE BOBDEB> <.A)TIOJ> E"emp ! &e tab a senci a</.A)TIOJ> <TB> <TD>#i a4Sce &a4</TD> <TD>#i a4Sce &a0</TD> <TD>#i a4S ce &a5</TD> </TB> <TB>
<TD>#i a0Sce &a4</TD> <TD>#i a0Sce &a0</TD> </TB> </TABLE>
#rosor de los bordes

<TABLE BOBDEB+7>
'eldas de cabecera
<TB> <TH>.! umna 4</TH> <TH>.! umna 0</TH> <TH>.! umna 5</TH> </TB>
'ontenido de las celdas

<HTML> <HEAD> <TITLE> .!nteni&! &e as ce &as </TITLE> </HEAD> <BODY> <TABLE BOBDEB+7> <.A)TIOJ> Tab a c!n &i3ers!s e ement!s</.A)TIOJ> <TB> <TH>Dibu"!</TH> <TH>Lin@</TH> <TH>Te2t!</TH> </TB> <TB> <TD><IMI KB.+,'i&ra(gi#, WIDTH+8> HEIIHT+47> ></TD> <TD><A HBEO+,)agina4('tm ,>)$gina principa </A></TD> <TD>Ln te2t! cua *uiera</TD> </TB> </TABLE> </BODY> </HTML>
(lineaci"n dentro de las celdas (lineaci"n en sentido vertical

<TD ;ALIIJ+TO)> Arriba </TD> <TD ;ALIIJ+BOTTOM> Aba"! </TD>
(lineaci"n en sentido horizontal
<TD ALIIJ+.EJTEB> A centr! </TD> <TD ALIIJ+BIIHT> A a &erec'a </TD> <TH ALIIJ+LEOT> .abecera a a i1*uier&a </TH> (Nota: Las cabeceras por defecto estn centradas)
Dimensionado de las tablas

<TABLE WIDTH+8>?> Ouer1a a a tab a a !cupar e 8>? &e a 3entana
<TABLE HEIIHT+0>>> Dimensi!na a tab a a 0>> punt!s &e a t!
'eldas !ue abarcan a otras varias

<TB><TD .OLK)AJ+0> .e &a s!bre 0 c! umnas </TD><TB> <TD BOWK)AJ+0> .e &a "unt! a 0 #i as </TD>
'olor de $ondo en tablas % celdas

<TABLE BOBDEB BI.OLOB+,->>OO>>,> <TD BI.OLOB+,-OO>>>>,>
-mgenes de $ondo en tablas % celdas

<TABLE BOBDEB BA.TIBOLJD+,nubes("pg,> /TD BA.TIBOLJD+,nubes("pg>
=eparaci"n entre las celdas

<TABLE BOBDEB .ELLK)A.IJI+0>>
=eparaci"n entre el borde % el contenido de las celdas

<TABLE BOBDEB .ELL)ADDIJI+0>>
7. For/ularios En un procesador de te to cual!uiera teclear la pagina base 2?ormulario simple4 e ir introduciendo % visualizando en el navegador los di$erentes elementos. =alvar el archivo como Practica@.html % visualizarlo con el navegador. ?ormulario simple
<'tm > <'ea&> <tit e>)ractica &e #!rmu ari!s</tit e> </'ea&> <b!&y> <OOBM A.TIOJ+Rhttp://www.host.com/v$or.aspR METHOD+,)OKT,> Escriba su usuari!G <BB> <IJ)LT TY)E+,te2t, JAME+,usuari!, KIUE+,4>, MACLEJITH+,40,> <)><IJ)LT TY)E+,submit, ;ALLE+,En3iar &at!s,> 9nbsp:9nbsp:<IJ)LT TY)E+,reset, ;ALLE+,B!rrar &at!s,> </OOBM> </b!&y> </'tm >
Password (,adir un campo de tipo contrase,a

<IJ)LT TY)E+,pass=!r&, JAME+,c a3e, KIUE+,4>, MACLEJITH+,40,>
.e to Multilinea -nsertar dentro del ?A<M este nuevo elemento:

-ntroduzca sus sugerencias o comentarios: /.EB.(<E( C(MEDE'omentariosE <AF=DE>E 'A6=DE*GE0 //.EB.(<E(0
Menus -nsertar dentro del ?A<M este nuevo elemento:

H'"mo contacto con nosotrosI /=E6E'. C(MEDE'ontactoE0 /AP.-AC valueDJcasualidadJ0Por casualidad //AP.-AC0 /AP.-AC valueDJperiodicoJ0Por el periodico //AP.-AC0 /AP.-AC valueDJbuscadoresJ0En los buscadores //AP.-AC0 /AP.-AC valueDJcomentarioJ0Me lo comentaron //AP.-AC0 //=E6E'. 0
'hecKbo -nsertar dentro del ?A<M este nuevo elemento:

/-CP7. .LPEDEchecKbo E C(MEDE6istaE0 =35 deseo recibir in$ormaci"n acerca de sus productos.
<adio Mutton -nsertar dentro del ?A<M este nuevo elemento:

H'ul es su sistema operativo pre$eridoI /M<0 /-CP7. .LPEDEradioE C(MEDE=istemaAperativoE N(67EDEC.E '1E'OED0 Findows C. /-CP7. .LPEDEradioE C(MEDE=istemaAperativoE N(67EDEMacE0 Mac /-CP7. .LPEDEradioE C(MEDE=istemaAperativoE N(67EDE7ni E0 7ni
8. Marcos 'rear una pagina de marcos !ue nos permita acceder a todas las practicas realizadas hasta ahora. #uardar los di$erentes archivos con los nombres: PracticaP.html Pagina de de$inici"n de marcos PracticaP$i.html Marco -z!uierdo PracticaP$d.html Marco derecho 'ada vez !ue se seleccione una de las practicas en el marco iz!uierdo5 debe mostrarse la pagina en el marco derecho5 el enlace -C-'-A nos conducir de nuevo a la pagina de presentaci"n. Nota1 El te to ondulante !ue aparece en la pagina de presentaci"n es una applet !ue introduciremos en una practica posterior.
'odigo de la pagina principal de marcos:

/html0 /head0 /title0Practica de ?rames//title0 /meta httpQe!uivDE'ontentQ.%peE contentDEte t/html8 charsetDisoQPP+RQ1E0 //head0 /$rameset colsDE1P&5SE0 /$rame nameDEcontenidoE targetDEprincipalE srcDEpracticaP$i.htmE0 /$rame nameDEprincipalE srcDEpracticaP$d.htmlE0 /no$rames0 /bod%0 /p0Esta pgina usa marcos5 pero su e plorador no los admite.//p0 //bod%0 //no$rames0 //$rameset0 //html0
9. 2a3a cript En un procesador de te to cual!uiera teclear los siguientes c"digos. =alvar el archivos como PracticaR.html % visualizar los resultados con el navegador. Nota1 (l contrario !ue en 1.M65 Tava =cript distingue entre ma%;sculas % min;sculas.
/html0 /head0 /meta httpQe!uivDE'ontentQ.%peE contentDEte t/html8 charsetDisoQPP+RQ1E0 /script 6(C#7(#EDETava=criptE0/UQQ /// ?uncion de cambio de imagenes al mover el raton sobre ellas // -magenes seleccionadas image1on D new -mage248 image1on.src DEimagenes/buzonVabierto.)pgE8 image&on D new -mage248 image&on.src DEimagenes/caraValegre.)pgE8 // -magenes por de$ecto image1o$$ D new -mage248 image1o$$.src DEimagenes/buzonVcerrado.)pgE8 image&o$$ D new -mage248 image&o$$.src DEimagenes/caraVtriste.)pgE8 $unction imgVact2imgCombre4 W imgAn D eval2imgCombre X Eon.srcE48 document YimgCombreZ.src D imgAn8 [ $unction imgVinact2imgCombre4 W imgA$$ D eval2imgCombre X Eo$$.srcE48 document YimgCombreZ.src D imgA$$8 [ /// =croll en en una ventana5 var t tDEEsta es la primera linea de te to !ue se desplaza E X E % esta es la segunda5 puedes poner todas lasE X E !ue !uieras U E8 $unction scroll24 W document.$rm.w.value D t t8 t t D t t.substring215 t t.length4 X t t.char(t2G48 window.set.imeout2Escroll24E51+G48[ //QQ0 //script0
/title0E)emplos de Tava=cript//title0 //head0 /bod% on6oadDEscroll24E bgcolorDE\'G'G'GE0 /table borderDE1E widthDE1GG]E0 /tr0 /td widthDE1GG]E bgcolorDE\GGPGPGE0/p alignDEcenterE0(plicaciones de Tava script//td0 //tr0 //table0 /p0/br0 //p0 /div alignDEcenterE0/center0 /table borderDE1E widthDEP&]E heightDE@@E0 /tr0 /td widthDE+G]E rowspanDE&E heightDE@1E0/table borderDE1E widthDE3&]E0 /tr0 /td widthDE1GG]E colspanDE&E bgcolorDE\??????E0/p alignDEcenterE0'ambio de imgenes //td0 //tr0 /tr0 /td widthDE+G]E alignDEcenterE bgcolorDE\GGGG??E0/img srcDEimagenes/buzonVcerrado.)pgE nameDEimage1E altDEcorreoE onMouseAverDEimgVact2îmage1^4E onMouseoutDEimgVinact2îmage1^4E F-D.1DE11PE 1E-#1.DE11PE0//td0 /td widthDE+G]E alignDEcenterE bgcolorDE\GGGG??E0/img srcDEimagenes/caraVtriste.)pgE nameDEimage&E altDEcaraE onMouseAverDEimgVact2îmage&^4E onMouseoutDEimgVinact2îmage&^4E F-D.1DE11PE 1E-#1.DE11PE0//td0 //tr0 //table0 //td0 /td widthDE+G]E heightDEPE bgcolorDE\??????E0/p alignDEcenterE0'a)a de te to rotativo//td0 //tr0 /tr0 /td widthDE+G]E heightDE@+E bgcolorDE\GGGG??E0/$orm C(MEDE$rmE0 /p0/input .LPEDEte tE C(MEDEwE =-:EDE*+E0 //p0 //$orm0 //td0 //tr0 //table0 //center0//div0 /div alignDEcenterE0 /table borderDE1E widthDE+>]E0 /tr0 /td widthDE1GG]E0/p alignDEcenterE0/a hre$DE)avascript:window.histor%.bacK24E0/img srcDEimagenes/atras.gi$E altDEatras.gi$ 2>+G b%tes4E alignDEmiddleE F-D.1DE3GE 1E-#1.DE3GE0Nolver a la pagina anterior//a0//td0 //tr0 //table0 //div0 //bod%0 //html0
14. &pplet 2a3a En la pagina PaginaP$d.html realizada en la practicaP introducir la llamada a la (PP6E. =ine.e t /applet codebaseDEappletE codeDE=ine.e t.classE widthDE*GGE heightDE1GGE0 /param nameDE.e tE valueDE'olecci"n de practicasE0 /param nameDE?oregroundE valueDE??GGGGE0 /param nameDEMacKgroundE valueDE??????E0 /param nameDE.ravelingE valueDE%esE0 /param nameDEMouse'licKE valueDE%esE0 /param nameDE<ateE valueDE*E0 //applet0

PBHTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PBHTML

Uploaded by

Copyright:

Available Formats

IN TIT!"I#N $%!

"&TI'& P(I'&%& $L %I'IN) M&$ T()

1. Pagina bsica En un procesador de te to cual!uiera teclear el siguiente c"digo

Marlon Ponce Diaz http://www.colegiodivinomaestroves.blogspot.com

<'r =i&t'+,7>?, si1e+,7,>

a eti*ueta 9 t:)BE9gt: E C T O ta y c!m!

-magen con hipervinculo

.ablas con desigual numero de celdas

<TD>#i a0Sce &a4</TD> <TD>#i a0Sce &a0</TD> </TB> </TABLE>

#rosor de los bordes

'ontenido de las celdas

(lineaci"n dentro de las celdas (lineaci"n en sentido vertical

(lineaci"n en sentido horizontal

Dimensionado de las tablas

<TABLE HEIIHT+0>>> Dimensi!na a tab a a 0>> punt!s &e a t!

'eldas !ue abarcan a otras varias

'olor de $ondo en tablas % celdas

-mgenes de $ondo en tablas % celdas

=eparaci"n entre las celdas

=eparaci"n entre el borde % el contenido de las celdas

Password (,adir un campo de tipo contrase,a

.e to Multilinea -nsertar dentro del ?A<M este nuevo elemento:

Menus -nsertar dentro del ?A<M este nuevo elemento:

'hecKbo -nsertar dentro del ?A<M este nuevo elemento:

<adio Mutton -nsertar dentro del ?A<M este nuevo elemento:

'odigo de la pagina principal de marcos:

You might also like