Manual HTML

Elaboracin de pginas WEB, CBTis 224 Prcticas de Lenguaje HTML M.C.
Mara Gregoria Beltrn Snchez

MANUAL DE PRCTICAS DEL SUBMODULO: ELABORACIN DE PGINAS WEB
TERCER SEMESTRE DE LA ESPECIALIDAD DE INFORMTICA
Introduccin HTML es un lenguaje de marcas es!as ser"n #ragmen!$s de !e%!$ des!acad$ de
una #$rma es&ec'al (ue &erm'!en la de#'n'c')n de las d's!'n!as 'ns!rucc'$nes de HTML !an!$ l$s
e#ec!$s a a&l'car s$*re el !e%!$ c$m$ las d's!'n!as es!ruc!uras del lenguaje+

A es!as marcas las den$m'narem$s etiquetas , ser"n la *ase &r'nc'&al del lenguaje HTML+ Un
d$cumen!$ HTML ser" un arc-'.$ !e%!$ c$n e!'(ue!as (ue .ar'ar"n la #$rma de su &resen!ac')n+
En el HTML las instrucciones s$n !r$/$s de !e%!$s resal!ad$s c$n.en'en!emen!e (ue de#'n'r"n la
es!ruc!ura l)g'ca del d$cumen!$
Estructura Bsica L$s d$cumen!$s HTML es!"n de#'n'd$s &$r una e!'(ue!a 'n'c'al 0HTML1 (ue es
la (ue da a c$n$cer al na.egad$r cu"l es el !'&$ de &r$gramac')n (ue es!am$s em&leand$ , $!ra
e!'(ue!a de c'erre 02HTML1+ Den!r$ de 3s!e &$dem$s enc$n!rar d$s &ar!es #undamen!ales: 0HEAD1
d$nde de#'n'm$s l$s carac!eres *"s'c$s s$*re la &"g'na , 0BOD41 d$nde &$ndrem$s las
'ns!rucc'$nes *"s'cas de la &"g'na !e%!$s 'm"genes e!c+
P$r !an!$ la es!ruc!ura *"s'ca de un d$cumen!$ HTML ser5a
<HTML>
0HEAD1
De#'n'c'$nes de la ca*ecera
02HEAD1
0BOD41
Ins!rucc'$nes HTML
02BOD41
</HTML>
Las Etiquetas E%'s!e n$rmalmen!e una e!'(ue!a de 'n'c'$ , $!ra de #'n la de #'n c$n!endr" el m'sm$
!e%!$ (ue la de 'n'c'$ a6ad'3nd$le al &r'nc'&'$ una *arra 'ncl'nada /+ El e#ec!$ (ue de#'ne la e!'(ue!a
!endr" .al'de/ &ara !$d$ l$ (ue es!e 'nclu'd$ en!re las e!'(ue!as de 'n'c'$ , #'n ,a sea !e%!$ &lan$ u
$!ras e!'(ue!as HTML+
Rec$mendac'$nes &ara guardar un d$cumen!$ HTML:
Crear una car&e!a de ra5/
Crear una su*car&e!a de 'm"genes
U*'car en es!a car&e!a las 'm"genes (ue se .an a neces'!ar
La &r'mer &ag'na $ d$cumen!$ de*e !ener la e%!ens')n +HTML+
L$s s'gu'en!es de*en ser +HTM
T$d$s l$s arc-'.$s se de*en guardar en una s$la car&e!a
T$das la 'm"genes se guardan en una su*car&e!a
T$das las &"g'nas de*en !ener un !5!ul$+
E.'!e u!'l'/ar es&ac'$s , carac!eres es&ec'ales en l$s n$m*res de archivos y carpetas+ As'm'sm$ n$
'n'c'e l$s n$m*res de l$s arc-'.$s c$n n7mer$s+ N$ u!'l'ce carac!eres es&ec'ales 8c$m$ 3 9 $ :; n'
s'gn$s de &un!uac')n 8c$m$ d$s &un!$s *arras 'ncl'nadas $ &un!$s; en l$s n$m*res de arc-'.$s (ue
desee c$l$car en un ser.'d$r rem$!$< muc-$s ser.'d$res cam*'an es!$s carac!eres duran!e la carga l$
(ue &r$.$ca (ue se r$m&an l$s .5ncul$s e%'s!en!es c$n l$s arc-'.$s+
1
Para codificar, guardar e!ecutar un "rogra#a $%&L siga 'os siguientes "asos(
=+>Teclee men7 'n'c'$
?+> Men7 Pr$gramas
@+> Eleg'r Acces$r'$s
A+> Eleg'r Bl$cB de n$!as
C+> C$d'#'car 8Escr'*'r el c)d'g$ de la &"g'na;
D+> Para Euardar: Selecc'$ne Men7 Archivo > Guarar co!o+
F+> En el cuadr$ de d'"l$g$ (ue a&arece El'ja -as!a la carpeta en la (ue desea guardar el arc-'.$+
G+> En el cuadr$ de !e%!$ No!"re e archivo# 'n!r$du/ca un n$m*re &ara el arc-'.$ c$n E%!ens')n +HTML+

Para e.'!ar &r$*lemas es 'n!eresan!e (ue en el n$m*re del
Arc-'.$$ NO DE%AR ESPACIOS$ NI PONER SIGNOS NO
COM&NES c$m$ acen!$s H6H $ s5m*$l$s de d's!'n!$s 'd'$mas
I+>Haga cl'c en Euardar $ &ulse En!er+
=J+> Para Ejecu!ar: Entrar a Explorer y desde el e%&l$rad$r
&ulsar En!er $ d$*le cl'c
==+> Para Ver el cdigo uente !a"re en un "loc# de notas el cdigo del arc$i%o; ) Entrar a Explorer y
desde el e%&l$rad$r &ulsar cl'c derec-$ selecc'$nar la $&c')n &"rir con' selecc'$nar *l$cB de n$!as ,
&ulsar en!er+
Pr)ctica * Etiquetas <HTML>' <HE&(>' <TITLE> y <B)(*>
Si'uie(o )os pasos a(teriores$ tec)ee e) si'uie(te C*i'o +TML e( e) ")oc, e (otas#
<HTML>
0HEAD1
0TITLE1 HTML T'!ul$ de la &ag'na 02TITLE1
02HEAD1
0BOD41
Es!a es m' &r'mer &"g'na de HTML
02BOD41
</HTML>
Euarde ejecu!e el &r$grama desde el e%&l$rad$r , an$!e l$s resul!ad$s en la s'gu'en!e !a*la+
OPERACIONES OBSERKACIONES
0TITLE1 HTML T'!ul$ de la &ag'na 02TITLE1
Es!a es m' &r'mer &"g'na de HTML
B'*l'$gra#5a: Or)s Luan Carl$s D'se6$ de &"g'nas Me* 'n!erac!'.as c$n La.aScr'&! =III Ed'! Al#a$mega M3%'c$ D+N+
Practica + P"rra#$s , Sal!$s de L5nea
Etiqueta <B+> Sal!$ de l5nea <,> Se&ara &"rra#$s
C$d'#'ca es!e &r$grama HTML en el *l$cB de n$!as:
0HTML1
0HEAD1 0TITLE1 Ejem&l$ de &"rra#$s , sal!$ de l5nea02TITLE1 02HEAD1
0BOD41
0P1 Es!e es el 'n'c'$ de un &"rra#$ 0BR1 es se&arad$ &$r un sal!$ de l5nea0BR1 Es!e es un segund$
sal!$ de l5nea 0BR1 , !erm'na c$n un !ercer sal!$ de l5nea
0P1 Ejem&l$ de &"rra#$ , sal!$ de l5neas+
2
02BOD41
02HTML1
E-ecuta este pro'ra!a para .ue co(/ir!es su resu)tao$ a(ota e( )a ta")a0
0TITLE1 Ejem&l$ de &"rra#$s , sal!$ de l5nea02TITLE1
E!'(ue!as 0P1 4 0BR1
B'*l'$gra#5a: Or)s Luan Carl$s D'se6$ de &"g'nas Me* 'n!erac!'.as c$n La.aScr'&! =III Ed'! Al#a$mega M3%'c$ D+N+
Practica No. 3 Etiqueta Prrafo <P> y Atributos
&LI-./let P"rra#$ al'nead$ a la '/(u'erda
&LI-./+ig$t P"rra#$ al'nead$ a la derec-a
&LI-./center> P"rra#$ cen!rad$
Las e!'(ue!as &ueden &resen!ar m$d'#'cad$res llamad$s atri,utos (ue &erm'!'r"n de#'n'r d'#eren!es
&$s'*'l'dades de la 'ns!rucc')n HTML+ Es!$s se de#'n'r"n en la e!'(ue!a de 'n'c'$ , c$ns's!'r"n
n$rmalmen!e en el n$m*re del a!r'*u!$ , el .al$r (ue !$man se&arad$s &$r un s'gn$ de 'gual+ El $rden
en (ue se 'nclu,an l$s a!r'*u!$s es 'nd'#eren!e n$ a#ec!and$ al resul!ad$+ Cuand$ el .al$r (ue !$ma el
a!r'*u!$ !'ene m"s de una &ala*ra de*er" e%&resarse en!re c$m'llas en $!r$ cas$ n$ ser" necesar'$+
Escri"a e) si'uie(te c*i'o e( e) ")oc, e (otas0
<HTML>
0HEAD1
0TITLE1Al'neac'$n de &"rra#$s 02TITLE1
02HEAD1
0BOD41
<! rra"o #ue$o
< %L&G#'le"t! arra"o alineado a la iz(uierda
< %L&G#'right! arra"o alineado a la derecha
< %L&G#'center! arra"o centrado
02BOD41
</HTML>
A(ota )as o"servacio(es e) resu)tao e) pro'ra!a0
<! rra"o #ue$o
< %L&G#'le"t! rra"o alineado a la
iz(uierda
< %L&G#'right! rra"o alineado a la
derecha
< %L&G#'center! rra"o centrado
,rctica 0 Etiqueta <)&*!
Los prrafos pueden especificarse de varias formas. La ms inmediata es escribir directamente el texto y colocar
saltos de lnea con <BR> entre ellos. Sin embargo esta no es la ms conveniente. Es mejor utilizar alguna de las
etiquetas <P> o <DIV>. Ambas tienen el efecto de crear un prrafo con la diferencia de que <P> aade un salto
de lnea al final del prrafo! cosa que no "ace <DIV>. Ambas tienen la utilidad aadida de delimitar todo el
+
prrafo! pudi#ndose de esta forma aplicar cambios al mismo a trav#s de sus atributos. $e ellos el ms importante
es ALIGN que permite escoger la alineaci%n "orizontal del texto.
&eclee el Siguiente '%digo para diferenciar los diferentes estilos de prrafos.
<HTML>
<HEAD> <TITLE> Prrafos </TITLE> </HEAD>
<BODY>
Prrafos separados por un sa!o de "nea BR# <BR>
Prrafos separados por un sa!o de "nea BR# <BR>
<P>$n prrafo de%&%!ado por a ETI'$ETA P#
<P>$n prrafo de%&%!ado por a ETI'$ETA P#
<DIV>$n prrafo de%&%!ado por LA ETI'$ETA DIV#
<DIV>$n prrafo de%&%!ado por LA ETI'$ETA DIV#
</BODY>
</HTML>
E!'(ue!a 0BR1
E!'(ue!a 0P1
E!'(ue!a 0DIK1
-!!&:22geneura+ugr+es2Ogus!a.$2HTML2HTML+HTMLP#'s'c$
Practica No. 5 Letra en Negrita y Comentario
Etiqueta <B> Letra en Negrita
Etiqueta <! COMENTARIO >
Teclea es!e Pr$grama (ue mues!ra !e%!$ en negr'!as sal!$ de l5neas &"rra#$s , c$men!ar'$s en el
*l$cB de n$!as:
<HTML>
0HEAD1
0TITLE1 P"rra#$s negr'!as sal!$ de l5neas , C$men!ar'$s02TITLE1
02HEAD1
0BOD41
0Q> Es!e es un c$men!ar'$ (ue n$ a&arece en el !e%!$ de la &"g'na >1
0B1 Te%!$ (ue a&arecer" en negr'!a02B1+
0B10P1 Es!e es un &"rra#$ 0BR1 Rengl)n de !e%!$ se&arad$ &$r una l5nea 0BR1 0BR1
Rengl)n se&arad$ &$r d$s sal!$s de l5nea 0BR10BR1 0BR1 , !erm'na c$n !res sal!$ de l5nea02B1
0P1 Ejem&l$ de &"rra#$ , sal!$ de l5nea+
02BOD41
02HTML1
E-ecuta este pro'ra!a para .ue co(/ir!es su resu)tao$ a(ota )o .ue o"servaste0
Se a&l'c) al !e%!$ negr'!a
El !e%!$ #ue se&arad$ &$r sal!$ de l5nea
,
Pr)ctica - Saltos y Lneas Etiqueta <H+> *arra -$r'/$n!al
Las -arras horizontales o se.aradores son ele/entos (ue se /uestran co/o una -arra
horizontal en la .antalla.
0ti(ueta <H1! Lnea divisoria: no lleva texto asociado. Se puede especificar el ancho de la lnea
con el atributo 0HR MIDTHRHGJSH1+ C$d'#'ca el &r$grama en el Bl$cB de n$!as+
0HTML1
0HEAD1 0TITLE1Sal!$s , L5neas02TITLE1 02HEAD1
0BOD41
0H=1Sal!$s , l'neas02H=1
0HR1
0HR MIDTHRHGJSH1
0HR MIDTHRHDJSH1
0HR MIDTHRHAJSH1
0HR MIDTHRH?JSH1
>>>>
0BR10BR10BR1
>>>>
02BOD41
02HTML1
Euarda , Ejecu!a el &r$grama desde el e%&l$rad$r , escr'*e l$s resul!ad$s
0HR1
0HR MIDTHRHGJSH1
0HR MIDTHRHDJSH1
0HR MIDTHRHAJSH1
0HR MIDTHRH?JSH1
>>>>
0BR10BR10BR1
Prctica 7 Modifica a Prctica ! "atos y #$%eas asi&%a%do difere%tes
'aores a os atributos
Las -arras horizontales o se.aradores2 .ueden /odi3carse con $arios atri-utos4
SIZE( )rosor de la barra "orizontal
WIDTH( Anc"ura de la barra "orizontal
ALIGN( Alineamiento de la barra! puede valer left! rig"t o center
NOSHADE( Elimina el aspecto tridimensional
0HTML1
0HEAD1
0TITLE1Sal!$s , L5neas02TITLE1
02HEAD1
0BOD41
5
0HR1
0HR NOSHADE1
0HR T'd!-RHGJSH SIUERC ALIENRLENT NOSHADE1
0HR T'd!-RHDJSH SIUERG1
>>>>
0*r10*r10*r1
>>>>
02BOD41
02HTML1
Modificando el TEXTO
Prctica ( Estios f$sicos
Son un conjunto de etiquetas que aplican ciertos cambios a la forma en que se visualiza el texto.
<B>4 /uestra el te6to en un ti.o de letra /s grueso
<I>4 /uestra el te6to inclinado 7en cursi$a8
<$>4 su-ra9a el te6to
<TT>4 utiliza un ti.o de letra no .ro.orcional
<BIG>4 /uestra el te6to con un ti.o de letra /s grande
<(MALL>4 utiliza un ti.o de letra /enor
<(>4 utiliza un ti.o de letra tachado
<($B>4 escri-e co/o su-ndice
<($P>4 escri-e co/o su.erndice
*n ejemplo de cada uno de ellos(
<HTML>
<HEAD>
<TITLE>e)e&po de es!%os f"s%*os</TITLE>
</HEAD>
<BODY>
<+ENTER>
Es!%os f"s%*os,<BR>
<B>ne-r%!a</B>. <BR>
<I>*urs%/a</I>. <BR>
<$>su0ra1ado</$>. <BR>
<TT>e!ra no propor*%ona</TT>. <BR>
<BIG>-rande</BIG>. <BR>
<(MALL>pe2ue3a</(MALL>. <BR>
<(>!a*4ado</(>. <BR>
<($B>su0"nd%*e</($B>. <BR>
<($P>super"nd%*e</($P><BR>
</+ENTER>
</BODY>
</HTML>
:
4!!p,//-eneura#u-r#es/5-us!a/o/HTML/HTML#HTML6f%s%*o
Prctica ) Estios *&icos
Al igual que los estilos fsicos modifican el aspecto del texto! pero en vez de con un cambio
permanente! la modificaci%n depende de las preferencias del usuario.
<(TRONG>4 /uestra el te6to en un ti.o de letra /s "uerte2 nor/al/ente en negrita
<EM>4 /uestra el te6to en"atizado2 nor/al/ente en cursi$a
<+ODE>4 suele utilizarse .ara /ostrar alg;n ti.o de c<digo2 suele utilizar un ti.o de
"uente no .ro.orcional
<BLO+7'$OTE>4 -lo(ue de te6to indentado
*n ejemplo de cada uno de ellos(
<HTML>
<HEAD>
<TITLE>e)e&po de es!%os 8-%*os</TITLE>
</HEAD>
<BODY>
Es!%os 8-%*os,<BR>
<(TRONG>fuer!e</(TRONG>. <BR>
<EM>enfa!%9ado</EM>. <BR>
<+ODE>*8d%-o</+ODE>. <BR>
<BLO+7'$OTE>0o2ue %nden!ado</BLO+7'$OTE>.<BR>
</BODY>
</HTML>
+ue%tes de te,to
Las fuentes de texto permiten realizar una serie de modificaciones al aspecto del texto. Entre ellas cabe destacar
el tamao! el '+L+, y la familia como las ms importantes. &odas ellas se modifican a trav#s de los atributos
de la etiqueta <:ONT>.
,rctica 12 Tamao del texto El tamao del texto es una de las caractersticas ms fciles de
modificar. El texto tiene un tamao que va de - a .! siendo / el tamao establecido por defecto.
La etiqueta 01ASE2+3&4 permite modificar el tamao de letra por defecto. El siguiente ejemplo "ace que el
tamao de fuente por defecto pase de / a 5(
<HTML>
<HEAD>
<TITLE> 0ase:ONT</TITLE>
</HEAD>
<BODY>
E !e;!o por defe*!o !%ene !a&a3o <#
<BA(E:ONT (I=E>?>
A par!%r de a4ora !endr !a&a3o ?#
</BODY>
</HTML>
=
Prctica -- Ta.a/o de Te,to
&ambi#n es posible cambiar el tamao de ciertas secciones de un documento sin tener que cambiar el
tamao por defecto. 6ara esto existe la etiqueta <:ONT>. 7ediante su atributo (I=E podemos especificar
cualquier tamao entre - y .! o usar el signo 898 o 8:8 y una cantidad para agrandar o empequeecer el
texto de forma relativa al tamao por defecto. ;eamos un ejemplo(
<HTML>
<HEAD>
<TITLE> Ejem&l$ de !ama6$ del !e%!$ </TITLE>
</HEAD>
<BODY>
<:ONT (I=E>@> fuen!e de !a&a3o @</:ONT><BR>
<:ONT (I=E>A> fuen!e de !a&a3o A</:ONT><BR>
<:ONT (I=E><> fuen!e de !a&a3o <</:ONT><BR>
<:ONT (I=E>B> fuen!e de !a&a3o B</:ONT><BR>
<:ONT (I=E>?> fuen!e de !a&a3o ?</:ONT><BR>
<:ONT (I=E>C> fuen!e de !a&a3o C</:ONT><BR>
<:ONT (I=E>D> fuen!e de !a&a3o D</:ONT><BR>
</BODY>
</HTML>
Prctica -0 Coor de Te,to
El '+L+, del texto puede cambiarse mediante la utilizaci%n del atributo +OLOR de la etiqueta <:ONT>.
El '+L+, puede especificarse mediante un nombre de '+L+, o mediante una descripci%n ,1).
;eamos un ejemplo(
<HTML>
<HEAD>
<TITLE>e)e&po de +OLOR</TITLE>
</HEAD>
<BODY>
<:ONT +OLOR>red>+OLOR ro)o</:ONT>
<:ONT +OLOR>-reen>+OLOR /erde</:ONT>
<:ONT +OLOR>6EEEEff>+OLOR a9u</:ONT>
</BODY>
</HTML>
Prctica -1 Ti2o de +ue%te
El tipo de fuente se modifica mediante el atributo :A+E de la etiqueta <:ONT>. Si se especifica ms de
una el navegador utilizar la primera que est# disponible. Las fuentes por lo general varan entre
navegadores y entre sistemas operativos! por lo que es conveniente utilizar varias para asegurarnos de
que se utilizar alguna de las que deseemos. <e aqu un ejemplo(
<HTML>
<HEAD>
<TITLE>!%pos de fuen!es</TITLE>
</HEAD>
<BODY>
:uen!e por defe*!o
<:ONT :A+E>Far%aF>:uen!e Ar%a</:ONT>
>
<:ONT :A+E>F!%&esF>:uen!e T%&es</:ONT>
<:ON T:A+E>F4e/G!%*aF>:uen!e He/G!%*a</:ONT>
</BODY>
</HTML>

$ttp3//geneura4ugr4es/5gusta%o/HTML/HTML4HTML6isico
Prctica -3 Etiqueta<4->5 <40>5 6 6 6 6 <4!> Ni'ees de Tituo
Suelen utilizarse para identificar los ttulos de las diferentes secciones de un documento. Suelen
aparecer en negrita y con tamaos de letra variando desde muy grande para <H1> ! "asta muy pequeo
para <H6>. El siguiente ejemplo los muestra todos para as poder distinguir fcilmente los cambios
entre ellos! E%'s!en D n'.eles de !5!ul$s en HTML es&ec'#'cad$ &$r:
<H1> T'!ul$ &r'nc'&al c$n le!ras grandes</H1>
<H7>4 4 4 4 4 4 4 </H7>
<H8>4 4 4 4 4 4 4 </H8>
<H0>4 4 4 4 4 4 4 </H0>
<H9> 4 4 4 4 4 4 4 </H9>
<H:>T'!ul$ c$n le!ras mas &e(ue6as </H:>
<HTML>
<HEAD>
<TITLE> Ejemplo de Niveles de Ttulos </TITLE>
</HEAD>
<BOD>
<H1>!a"ece#a $1</H1>
<H%>!a"ece#a $%</H%>
<H&>!a"ece#a $&</H&>
<H'>!a"ece#a $'</H'>
<H(>!a"ece#a $(</H(>
<H6>!a"ece#a $6</H6>
</BOD>
</HTML>
htt.4??geneura.ugr.es?@gusta$o?HTML?HTML.HTMLA3sico
Prctica -7 Atributo <A#I8N> &lineacin de Texto
Valores3 LetR I/(u'erda +ig$tR Derec-a ;enterR Cen!r$ , <ustiyR Lus!'#'ca a am*$s lad$s el
!e%!$
C$d'#'car el s'gu'en!e C)d'g$ HTML en el *l$cB de n$!as+
<HTML>
0HEAD1
<TITLE> Esta es mi pgina con alineacin de encabezados </TITLE>
02HEAD1
0BOD41
<H1> T'!ul$ Pr'nc'&al </H1>
<H7> T'!ul$ Segund$ </H7>
<H8 &LI-./Let> T'!ul$ Tercer$ al'nead$ a la '/(u'erda </H8>
<H0 &LI-./+ig$t> T'!ul$ Cuar!$ N'.el al'nead$ a la Derec-a </H0>
B
<H9 &LI-./;enter> T'!ul$ Vu'n!$ N'.el cen!rad$ </H9>
<H6 ALIGN=justify> Titulo Sexto Nivel Justificado</H6> 02BOD41
</HTML>
Euarda , ejecu!a el &r$grama , an$!a las $*ser.ac'$nes+
<TITLE> Es!a es m' !ercer &"g'na HTML C$n enca*e/ad$s
</TITLE>
<H1> T'!ul$ Pr'nc'&al </H1>
<H7> T'!ul$ Segund$ </H7>
<H8 &LI-./Let> T'!ul$ Tercer$ al'nead$ a la '/(u'erda
</H8>
<H0 &LI-./+ig$t> T'!ul$ Cuar!$ N'.el al'nead$ a la
Derec-a </H0>
<H9 &LI-./;enter> T'!ul$ Vu'n!$ N'.el cen!rad$ </H9>
<H: &LI-./Let> T'!ul$ Se%!$ N'.el</H:>
Prctica -! Etiqueta <+ONT> Ca.bia e ti2o5 ta.a/o y CO#OR de etra6
<HTML>
0HEAD1
0TITLE1 Ejem&l$ de T'&$ Tama6$ , c$l$r de !e%!$ 02TITLE1
02HEAD1
0BOD41
0NONT SIUERC1ABcde02NONT1
0NONT SIUERW?1ABcde02NONT1 0BR1
0NONT =&;ERar'al1Te%!$ de &rue*a =?@AC c$n !'&$ ARIAL02NONT1
0NONT NACERH!'mes neT r$manH1Te%!$ de &rue*a =?@AC c$n !'&$ TIMES NEM ROMAN02NONT1
0NONT NACERHc$ur'er neTH1Te%!$ de &rue*a =?@AC c$n !'&$ COURIER NEM02NONT1
0NONT NACERc$ur'er1Te%!$ de &rue*a =?@AC c$n !'&$ COURIER02NONT1
0NONT NACERr$man1Te%!$ de &rue*a =?@AC c$n !'&$ ROMAN02NONT1
0NONT NACERHsmall NONTsH1Te%!$ de &rue*a =?@AC c$n !'&$ SMALL NONTS02NONT1 0BR1
0NONT NACER'm&ac! SIUERD COLORRHredH1
Te%!$ de &rue*a =?@AC c$n !'&$ IMPACT02NONT10BR1
0NONT NACERcal'*r' SIUERA COLORRHredH1
Te%!$ de &rue*a =?@AC c$n !'&$s al!erna!'.$s02NONT1
02BOD41
02HTML1
El resul!ad$ ser" el s'gu'en!e:
1C
Guara$ e-ecuta e) pro'ra!a y e1p)ica e( )a ta")a tu e1perie(cia0
Prctica -7 Etiqueta <BO9:> T'ene l$s s'gu'en!es a!r'*u!$s:
B-;)L)+RC)d'g$ $ n$m*re en 'ngl3s del COLOR
TE>TRXN$m*re del COLOR en 'ngl3sX
B&;?-+)@.(YR'magenZ se mues!ra c$m$ el #$nd$ de la &ag'na
LI.?YR.al$r He%adec'mal &ara el COLORZ mues!ra el COLOR del !e%!$
VLI.?YR.al$r He%adec'mal &ara el COLORZ mues!ra el COLOR del .5ncul$ .'s'!ad$
&LI.?YR.al$r He%adec'mal &ara el COLORZ mues!ra el COLOR del .5ncul$ ac!'.$
LE=TM&+-I.YR.al$r en &'%elesZ mues!ra margen '/(u'erd$ de la &"g'na
T),M&+-I.YR.al$r en &'%elesZ mues!ra margen su&er'$r de la &"g'na
M&+-I.HEI-HTYR.al$r en &'%elesZ mues!ra la al!ura del margen de la &"g'na
M&+-I.AI(THYR.al$r en &'%elesZ mues!ra el anc-$ del margen de la &"g'na
El #$nd$ en una &"g'na &uede ser una 'magen $ un COLOR 0BOD4 BECOLORRHPJJNNNNH1
Escr'*e en el *l$cB de n$!as el s'gu'en!e c)d'g$:
11
%Bcde
%Bcde
Te%!$ de &rue*a =?@AC c$n !'&$ ARIAL
Te6to de .rue-a 12+,5 con ti.o T&M0S #0D 1EM%#
Te;!o de prue0a @A<B? *on !%po +O$RIER NEH
Texto de prueba 12345 con tipo COURIER
Te6to de .rue-a 12+,5 con ti.o 1EM%#
Texto de prueba 1!"# con tipo $%&'(N(
Te6to de .rue-a 12+,5 con ti.o SM%LL FE#TS
Texto de prueba 12345 con tipo IMPACT
Texto de prueba 12345 con tipos alternativos
0HTML1
0HEAD1
0TITLE1N$nd$ de &rue*a02TITLE1
02HEAD1
0BOD4 BECOLORRHPJJNNNNH1
0H= ST4LERHCOLOR:JJJJJJH1Pr$*and$+++
02H=1 0BR1
Es!e !e%!$ se lee *'en &$r(ue !'ene un #$nd$ &lan$+ 0BR1
02BOD41
02HTML1
Guara y e-ecuta e) pro'ra!a y e1p)ica e( )a ta")a tu e1perie(cia0
0BOD4 BECOLORRHPJJNNNNH1
htt.4??GGG.desarrolloGe-.co/?articulos?1+>,..h.
Prctica -( I.a&e% de +o%do
El #$nd$ en una &"g'na &uede ser una 'magen $ un COLOR 0BOD4 *acBgr$undRH#$nd$+g'#H1
0HTML1
0HEAD1
0TITLE1N$nd$ c$n 'magen02TITLE1
02HEAD1
0BOD4 BAC[EROUNDRH\Te*\'mg\#$nd$+j&g H1
02H=1 0BR1
Es!e !e%!$ se lee *'en &$r(ue !'ene un #$nd$ &lan$+ 0BR1
02BOD41
</HTML>
Prctica -) Etiqueta <MAR;<EE>
ermite )ue el contenido )ue pongamos dentro de la eti)ueta* ya sea texto* fotografas* o las dos
cosas* se desplace hori+ontalmente por la p,gina.
<HTML>
<HEAD>
<TITLE>Pro0ando Mar2ues%nas </TITLE>
</HEAD>
<BODY>
12
-.(&/0%%1
%ste texto se despla+a* por una mar)uesina en la pantalla
-2.(&/0%%1
</BODY>
</HTML>
Guara$ e-ecuta e) pro'ra!a y e1p)ica e( )a ta")a tu e1perie(cia0
-.(&/0%%1 %sta texto se despla+a* por una
mar)uesina en la pantalla -2.(&/0%%1
Prctica 0= Modifica a Prctica -)5 Marquesi%as asi&%a%do difere%tes 'aores a
os atributos
<M%1HI00! S$&$r!a una ser'e de a!r'*u!$s &ara m$d'#'car su c$m&$r!am'en!$ $ su as&ec!$+ S$n l$s
s'gu'en!es:
WID%$( Anc-ura de la mar(ues'na+ S' n$ marcam$s al!ura se c$l$car" en la s'gu'en!e l5nea c$m$ en un
&"rra#$ d's!'n!$+ S' marcam$s una anc-ura la mar(ues'na 'n!en!ar" m$s!rarse en la m'sma l5nea d$nde la
-a,am$s c$l$cad$+ S' n$ -a, es&ac'$ &ara ella se real'/ar" el c$ns'gu'en!e sal!$ de l5nea &ara m$s!rarla un
&$c$ m"s a*aj$+
DIREC%ION( Hac'a d$nde (uerem$s (ue se d's&lace el c$n!en'd$ del mar(uee+ L$s &$s'*les .al$res s$n
HLENTH , HRIEHTH+
BE$A.IOR( Es el c$m&$r!am'en!$ de la mar(ues'na de en!re l$s &$s'*les: SCROLL 8el c$m&$r!am'en!$ &$r
de#ec!$; 'nd'ca (ue !'ene (ue -acer el des&la/am'en!$ s'em&re en una m'sma d'recc')n , ALTERNATE (ue
'nd'ca (ue el des&la/am'en!$ se -ace a un lad$ , al $!r$ de manera al!ernada+
SCROLLDELA/( Es el !'em&$ en m'l'segund$s (ue !'ene (ue &asar en!re cada cam*'$ de la &$s'c')n de l$ (ue
-a, des&la/"nd$se+ Es dec'r cuan!$ ma,$r sea el .al$r m"s m'l'segund$s !ardar" la mar(ues'na en m$.erse+
El .al$r &$r de#ec!$ es GC &er$ s' &$r ejem&l$ &$nem$s un .al$r CJJ la mar(ues'na cam*'ar" de es!ad$
8des&la/ar" el c$n!en'd$; cada med'$ segund$+
SCROLLA&O0N%( Es la can!'dad de &'%el (ue !'ene (ue des&la/arse el c$n!en'd$ de la mar(ues'na cada .e/
(ue se mue.e+ A ma,$r scr$llam$un! m"s se des&la/ar" la mar(ues'na en cada m$.'m'en!$ , &$r !an!$ la
an'mac')n ser" m"s r"&'da+ El .al$r &$r de#ec!$ es D+ P$dem$s &r$*ar a c$l$car un .al$r ma,$r , .erem$s (ue
el m$.'m'en!$ ser" m"s Ha g$l&esH+
LOOP( El n7mer$ de c'cl$s (ue .a a m$.erse el !e%!$ $ l$ (ue (u'era (ue -a,a den!r$ de la mar(uee+ Es!e
a!r'*u!$ s)l$ #unc'$na en In!erne! E%&l$rer+ P$r de#ec!$ es INNINITE (ue (u'ere dec'r (ue se des&la/ar" !$d$ el
!'em&$ s'n &arar+ Per$ s' &$r ejem&l$ c$l$cam$s un .al$r c$m$ @ (uerr" dec'r (ue la mar(ues'na s)l$ real'/ar"
!res c'cl$s $ m$.'m'en!$s , lueg$ &arar"+
BGCOLOR( El COLOR de #$nd$ de la mar(ues'na+ Ace&!a el n$m*re de un COLOR HTML $ *'en un .al$r REB
de d'c-$ COLOR+
$SPACE .SPACE( Es!$s d$s a!r'*u!$s s'r.en &ara de#'n'r el n7mer$ de &5%el (ue de*e a&arecer en!re la
mar(ues'na , $!r$s c$n!en'd$s de la &"g'na en -$r'/$n!al , .er!'cal+
Algun$s ejem&l$s de MARVUEE:
0MARVUEE MIDTHR?JJ DIRECTIONRr'g-!1
Mar(ues'na a la derec-a , c$n anc-$ de ?JJ
02MARVUEE1
1+
0MARVUEE BEHAKIORRal!erna!e SCROLLDELA4RCJJ BECOLORRHP##GG@@H1!e%!$ (ue se mue.e al!ernad$
c$n un anc-$ de CJJ02MARVUEE1
0HTML1
0HEAD1
0TITLE1Pr$*and$ Mar(ues'nas 02TITLE1
02HEAD1
0BOD41
0MARVUEE DIRECTIONRr'g-! *e-a.'$rRSLIDE1
Mar(ues'na a la derec-a , c$n c$m&$r!am'en!$ SLIDE
02MARVUEE1
0MARVUEE MIDTHRAJJ BEHAKIOURRslade SCROLLDELA4RCJJ BECOLORRHP##GG@@H1
Te%!$ (ue se mue.e c$n un anc-$ de AJJ 02MARVUEE 1
0MARVUEE HSPACERGJ KSPACER?C LOOPRC BECOLORR?a*cde1
Es!e !e%!$ se des&la/a &$r una mar(ues'na .s&aceR?C -s&aceRGJ , &asar" C .eces en la &an!alla
02MARVUEE1
0MARVUEE DIRECTIONRr'g-! HSPACERCJ KSPACERCJ BECOLORR??a*cd BEHAKIOURRal!erna!e1
Es!e !e%!$ se des&la/a &$r una mar(ues'na .s&aceRCJ -s&aceRCJ
02MARVUEE1
0MARVUEE DIRECTIONRu& BECOLORRDDaaA@ BEHAKIORRal!erna!e1
0NONT SIUER=?1
Te%!$ -ac'a arr'*a c$m&$r!am'en!$ sl'de le!ra =?
02MARVUEE102NONT1
02BOD41
02HTML1
NOTA) Pr*!%*a *a&0%ando os /aores a os a!r%0u!os para 2ue puedas ea0orar !us prop%as &ar2ues%nas
persona%9adas a !u ee**%8n. preferen*%a 1 ne*es%dades#
Prctica 0- Etiqueta <IM8> I*+,ene-
Los gr3cos se aJaden al docu/ento /ediante la eti(ueta <IMG>. 0sta se co/.one .or
una gran cantidad de atri-utos .ara /odi3car su co/.orta/iento. *ea/os algunos de
los /s i/.ortantes4
(R+4 localizaci<n de la i/agen
LOH(R+4 localizaci<n de una i/agen de -aja resoluci<n (ue se /ostrar /ientras la
i/agen es cargada
ALT4 te6to (ue se /ostrar si la i/agen no est dis.oni-le
HEIGHT4 altura de la i/agen
HIDTH4 anchura de la i/agen
ALIGN4 alineaci<n horizontal res.ecto al te6to4 le"t2 right o center
VALIGN4 alineaci<n $ertical4 to.2 -otto/ o /iddle
BORDER4 grosor del -orde
Escribe el siguiente c%digo en el bloc= de notas asegurando de grabar una imagen en la carpeta >mg y teclear el
nombre de tu imagen.
<HTML>
<HEAD>
<TITLE>E)e&po de %nser!ar %&-enes</TITLE>
</HEAD>
<BODY>
<H@>I&Iaa*u!eJ-enes</H@>
1,
<IMG (R+>F/I&-/%&a-en#)p-F HIDTH>@BE HEIGHT>A@E BORDER>E ALT>F$na I&Iaa*u!eJ-enF ALIGN>FRIGHTF>
<IMG (R+>F/I&-/%&a-en#)p-F HIDTH>@BE HEIGHT>A@E BORDER>< ALT>F$na I&Iaa*u!eJ-enF ALIGN>FLE:TF>
$n !e;!o *ua2u%era#
</BODY>
</HTML>
Guara y e-ecuta e) pro'ra!a y e1p)ica e( )a ta")a tu e1perie(cia$ co( i!2'e(es$ ca!"ia )os pi1e)es e )os
atri"utos 3IDT+$ +EIG+T$ 4ORDER$ ALT y ALIGN0
Prctica 00 Etiqueta <A> EN#ACE"
Lo caracterstico del lengua3e 4T.L es el poder generar vnculos de hipertexto para enla+ar con ellos todos sus
documentos en 5eb.
6ara generar un enlace a otro documento necesitamos el nombre de un archivo 7o su direcci8n 0&L9 y el texto )ue
servir, de punto de activaci8n del otro documento. %ste segundo elemento ser, el )ue veamos en pantalla y )ue se servir,
del primero para saltar de documento.
Los enlaces se generan mediante la eti)ueta <A>.....</A>* llevar, siempre dentro un atributo ya sea <A HRE:>FF> o
<A NAME>FF>.
14B 0A HRENRHURLH1+++++02A1: Es el a!r'*u!$ m"s usad$ , s'r.e &ara sal!ar en!re d'#eren!es URLs+ En es!e
ejem&l$ .erem$s:
Sal!ar en una &resen!ac')n del arc-'.$ = al arc-'.$ ?: En el arc-'.$ = 'nclu'rem$s la d'recc')n
0A HRENRHarc-'.$?+HTMLH1S'gu'en!e &"g'na02A1
Sal!ar de nues!ra &resen!ac')n a $!ra &resen!ac')n Te* llamada TTT+*'en.en'd$s+c$m:
0A HRENRH-!!&:22TTT+*'en.en'd$s+c$mH1K's'!a es!a &"g'na02A1
74B 0A NAMERH&ar!e=H1Pr'mera &ar!e02A1: U!'l'/am$s el a!r'*u!$ name &ara dar n$m*re a una secc')n de
nues!r$ d$cumen!$+ P$s!er'$rmen!e cuand$ en nues!r$ d$cumen!$ (ueram$s 'nclu'r un .5ncul$ a esa
secc')n escr'*'rem$s: 0A HRENRHP&ar!e=H1Ir a la &r'mera &ar!e02A1
Es*r%0e e s%-u%en!e *8d%-o en e 0o*K de no!as
0HTML1
0HEAD1
0TITLE1 H'&er.5ncul$s $ Enlaces02TITLE1
02HEAD1
0BOD41
0H?1 M' N$m*re 02H?1
0A NAMERHarr'*aH10H=1P"g'na de enlaces02H=102A1
0A HRENRHPa*aj$H1Ir a*aj$02A10*r1
0A HRENRH&rac!'caG+HTMLH1Ir a la &rac!'ca G02A10*r10*r1
0A HRENRH-!!&:22c*!'s??A+edu+m%2H1Ir a la &]aacu!e<g'na del CBT's ??A02A10*r1
0*r1^0*r1^0*r1+0*r1^0*r1+0*r1^0*r1+0*r1^0*r1
0*r10*r10*r10*r10*r10*r10*r10*r10*r10*r10*r10*r1
0*r10*r10*r10*r10*r10*r10*r10*r10*r10*r10*r10*r1
0*r10*r10*r1^0*r1+0*r1^0*r1+0*r1^0*r1

0A NAMERHa*aj$H10*r102A1
0A HRENRHParr'*aH1Ir arr'*a02A1
02BOD41
02HTML1
Guara y e-ecuta e) pro'ra!a y e1p)ica e( )a ta")a tu e1perie(cia$ co( e()aces0
0A NAMERHarr'*aH10H=1P"g'na de enlaces02H=102A1
15
0A HRENRHPa*aj$H1Ir a*aj$02A10*r1
0A HRENRH&rac!'caG+HTMLH1Ir a la &rac!'ca G02A10*r10*r1
0A HRENRH-!!&:22c*!'s??A+edu+m%2H1Ir a la &]aacu!e<g'na del
CBT's ??A02A10*r1
0A HRENRHParr'*aH1Ir arr'*a02A1
Prctica 01 Etiqueta <A> EN#ACE"
Co% i.&e%es y te,to .o'ie%do 2&i%as >acia dea%te y atrs6
En la &"g'na &r'nc'&al escr'*a el c)d'g$ al 'n'c'$ del cuer&$ del d$cumen!$ se sug'ere (ue se escr'*a ensegu'da
de la e!'(ue!a 0BOD41 e.'!e u!'l'/ar el c$l$r m$rad$ $ a/ul ,a (ue las l'gas u!'l'/an es$s c$l$res $ cam*'e l$s
c$l$res c$n l$s a!r'*u!$s de la e!'(ue!a 0BOD41: KLIN[ 8.'ncul$ .'s'!ad$; 4 ALIN[ 8.'ncul$ ac!'.$;+
Las l'gas de &re#erenc'a de*en es!ar a la .'s!a de la &"g'na &ara *r'ndarle al usuar'$ una *uena na.ega*'l'dad
en la red+
NOTA: De*e asegurarse (ue !$das las &r"c!'cas es!3n en una s$la car&e!a , las 'm"genes en una su*car&e!a
,a (ue se -ace re#erenc'a a la d'recc')n del lugar d$nde es!"n gra*ad$s l$s arc-'.$s+
C5DIGO PARA &TILI6AR ENLACES A TRA78S DE IMGENES y TE9TO0
:0; Escri"a este c*i'o para !over a trav<s e i!2'e(es )os e()aces a )a p2'i(a si'uie(te y a(terior0
0H?1 N O M B R E 4 ERUPO 02H?1
=>;; Estos e()aces so( co( i!2'e(es ;;>
=A +REF?@ABe"ApracticaC0ht!@>
0IME SRCRH\Te*\'mg\IME=+j&gH MIDTHRGJ HEIEHTR=JJ BORDERR? ALTRHAn!er'$rH ALIENRLENT1
02A1
0A HRENRH\Te*\&rac!'ca=?+-!mH1
0IME SRCRH\Te*\'mg\IME?+j&gH MIDTHRGJ HEIEHTR=JJ BORDERR? ALTRHS'gu'en!eH ALIENRRIEHT1
02A1
0NONT SIUERG COLORRDDIG@C1
Es!a es la &rac!'ca ?? , es!am$s &rac!'cand$ l'gas An!er'$r , S'gu'en!e
02NONT1
0Q> es!$s sal!$s de l5nea s$n $&c'$nales es &ara se&arar el c$n!en'd$ de las 'm"genes en la &ag'na >>>1
0BR10BR10BR1
D0; Escri"a este c*i'o e( )a p2'i(a para !over a trav<s e te1to )os e()aces hacia atr2s y ae)a(te0
0Q> es!$s enlaces s$n c$n !e%!$ >>>1
0A HRENRH\Te*\&rac!'caG+-!mH1A!r]aacu!e<s02A1
0A HRENRH\Te*\&rac!'ca=?+-!mH10P ALIENRRIEHT1 Adelan!e02A1
E0; Escri"a este c*i'o para !over a trav<s e i!2'e(es )os e()aces a )a p2'i(a a(terior$ a.uF se esactiva e)
e()ace a )a si'uie(te p2'i(a0
0A HRENRH\Te*\&rac!'caG+-!mH1
02A1
0A1
0IME SRCRH\Te*\'mg\T'gre+j&gH MIDTHRGJ HEIEHTR=JJ BORDERR? ALTRHS'gu'en!eH ALIENRRIEHT1
02A1
G0; Escri"a este c*i'o para !over a trav<s e i!2'e(es )os e()aces a )a p2'i(a si'uie(te$ a.uF se esactiva e)
e()ace a )a p2'i(a a(terior0
0A HRENRH\Te*\&rac!'caG+-!mH1
02A1
1:
0A HRENRH\Te*\&rac!'ca=?+-!mH1
0IME SRCRH\Te*\'mg\T'gre+j&gH MIDTHRGJ HEIEHTR=JJ BORDERR? ALTRHS'gu'en!eH ALIENRRIEHT1
02A1
H0; Escri"a este c*i'o para !over a trav<s e te1to )os e()aces a )a p2'i(a e atr2s y esactiva e) e()ace e
ae)a(te0
0A HRENRH\Te*\&rac!'caG+-!mH1A!r]aacu!e<s02A1
0A10P ALIENRRIEHT1 Adelan!e02A1
I0; Escri"a este c*i'o e( )a p2'i(a para !over a trav<s e te1to )os e()aces a )a p2'i(a e ae)a(te y
esactiva e) e()ace e Atr2s0
0A1A!r]aacu!e<s02A1
0A HRENRH\Te*\&rac!'ca=?+-!mH10P ALIENRRIEHT1 Adelan!e02A1
Prctica 03 Etiqueta <+RAME> MARCO"
A(u5 Presen!am$s un Marc$ &ara u!'l'/ar un 5nd'ce , .'sual'/ar d'#eren!es !emas en el "rea Cen!ral c$n un
enca*e/ad$ de &"g'na #'j$+
*12 Este c3digo dise4a 'a "anta''a en tres secciones( Su"erior, I56uierdo centra'
<!.#inci.al/$0*l 11 >
<23Define 4n 5#a*e en & -eccione- 11 >
<f#a*e-e0 #o6-78199:;8>
<f#a*e na*e78-4.e#io#8 -#c78-4.e#io#/$0*8>
<f#a*e-e0 col-781(9:;8>
<f#a*e na*e78i<=4ie#do8 -#c78i<=4ie#do/$0*8>
<f#a*e na*e78cen0#al8 -#c78cen0#o/$0*8>
</f#a*e-e0>
</f#a*e-e0>
2.- Cdigo que muestra el encabezado de la pgina
<KL Su.erior.ht/LL !
<KMeste c<digo .resenta el enca-ezado de nuestra .gina LL !
<HTML!
<BE)N BGCELE1'OAFFFF>CO!
<C0#T01!
Pste es el /arco deno/inado Osu.eriorO en el (ue est cargado el archi$o
Osu.erior.ht/O
<B1!
<FE#T S&Q0': CELE1'>>%%,,!
0sta es la .ractica 2, 9 carga/os enlaces a la SecciRoacuteSn central de
esta .antalla.
<?FE#T!
<?C0#T01!
<?BE)N!
1=
<?HTML!
3.- Cdigo para presentar las pginas que son llamadas por enlaces o hipernculos
!" Centro.htm -- #
<KMeste c<digo .resenta el rea central de nuestra .gina LL !
<HTML!
<BE)N BGCELE1'OAFFFFFFO!
<H2! #EMB10 N G1IE<?H2!
<B1!<B1!<B1!<B1!<B1!<B1!<B1!<B1!
<C0#T01!
Pste es el /arco deno/inado OcentralO en el (ue est cargado el archi$o
Ocentro.ht/O
<?C0#T01!
<?BE)N!
<?HTML!
$.- %ste cdigo lo utilizaremos para traba&ar con el ndice de la pgina
<KL &z(uierdo.ht/ LL!
<KMeste c<digo .resenta la secci<n iz(uierda de nuestra .gina LL !
<HTML!
<BE)N BGCELE1'OA>CFFFFO!
<B1!<B1!<B1!<B1!<B1!
<C0#T01!
Pste es el /arco deno/inado Oiz(uierdoO en el (ue est cargado el archi$o
Oiz(uierdo.ht/O
<?C0#T01!
<% H10F'O.ractica12.ht/O T%1G0T'OcentralO!Haz clic<?%!
<% H10F'O.ractica1+.ht/O T%1G0T'OcentralO!ractica 1+<?%!
<?BE)N!
<?HTML!
Guara y e-ecuta e) pro'ra!a y e1p)ica e( )a ta")a tu e1perie(cia$ Marcos0
Prctica 07 Etiqueta <+RAME> MARCO"
(tributos en el 6rimer :&(.%S%T* :&(.%;<&'%&=> y :&(.%S6(C?N@=>* ;<&'%&=>
Codificar una declaraci8n de :&(.%s sin bordes* para )ue )uede claro.
<HTML!
<H0%)!
<T&TL0!)e3nici<n de F1%M0S<?T&TL0!
<?H0%)!
<F1%M0S0T cols'O2CC2TO BE1)01'OCO F1%M0BE1)01'OCO 9 F1%M0S%C&#G'OCO!
<F1%M0S0T 1EDS'O1=C2TO!
<F1%M0 S1C'OUGe-U.ractica1C.HTMO!
<F1%M0 S1C'OUGe-U.ractica12.HTMO!
<?F1%M0S0T!
1>
<F1%M0 S1C'OUGe-U.ractica>.HTMO!
<?F1%M0S0T!
<?HTML!
1B
Prctica 0! ETI;<ETA <MAR;<E> : <TAB#E>
Es*r%0e e s%-u%en!e *8d%-o en e 0o*K de no!as
<HTML>
<HEAD>
<TITLE> Mar2ues%nas 1 Ta0as </TITLE>
</HEAD>
<BODY>
-.(&/0%%1
-T(;L% (L?@N=AcenterA B?'T4=A1>>A ;<&'%&=A1A1
-T&1
-T'1%sta tabla se despla+a * con todo el contenido de la tabla-2T'1
-2T&1
-2T(;L%1
-2.(&/0%%1
</BODY>
</HTML>
Guara y e-ecuta e) pro'ra!a y e1p)ica e( )a ta")a tu e1perie(cia co( Ta")as y Mar.uesi(as0
-T(;L% (L?@N=AcenterA B?'T4=A1>>A
;<&'%&=A1A1
-T&1
-T'1%sta tabla se despla+a * con todo el contenido
de la tabla-2T'1
-2T&
2C
6ractica C Listas %ti)ueta -0L1* -<L1* -L?1
<HTML>
<HEAD>
<TITLE>Pr*!%*a de L%s!as</TITLE>
</HEAD>
<BODY>
<H@>L%s!as</H@>
$na %s!a ordenada
<o>
<%>$no</%>
<%>Dos</%>
<%>Tres</%>
</o>
<BR><BR>
$na %s!a s%n ordenar
<u>
<%>$no</%>
<%>Dos</%>
<%>Tres</%>
</u>
<BR><BR>
$na %s!a de -osar%o
<d>
<d!>TIea*u!eJ&%no @</d!>
<dd>Def%n%*%Ioa*u!eJn @</dd>
<d!>TIea*u!eJ&%no A</d!>
<dd>Def%n%*%Ioa*u!eJn A</dd>
</d>
<BR><BR>
L%s!as an%dadas
<u>
LLLLL <%>$no
<u>
<%>$no</%>
<%>Dos</%>
<%>Tres</%>
</u>
</%>
<%>Dos</%>
<%>Tres</%>
</u>
</BODY>
</HTML>
Guara y e-ecuta e) pro'ra!a y e1p)ica e( )a ta")a tu e1perie(cia$ Listas0
<o>
<%>$no</%>
<%>Dos</%>
<%>Tres</%>
</o>
<u>
<%>$no</%>
<%>Dos</%>
<%>Tres</%>
</u>
<d>
<d!>TIea*u!eJ&%no @</d!>
<dd>Def%n%*%Ioa*u!eJn @</dd>
<d!>TIea*u!eJ&%no A</d!>
<dd>Def%n%*%Ioa*u!eJn A</dd>
</d>
htt.4??GGG.desarrolloGe-.co/?/anuales
21
6ractica D %ti)ueta -:<&.1 :ormularios
er/iten2 desde dentro de una .resentaci<n Ge-2 solicitar in"or/aci<n al $isitante.
%tri-utos4
1. A+TION>FF %ntre comillas se indica el programa )ue va a tratar las variables enviadas con el formulario* un gui8n
C@? o la 0&L mailto.
2. METHOD>FF ?ndica el mEtodo de transferencia de las variables. Pos!* si se enva a travEs del ST'?<. Ge!* si se
enva a travEs de la 0&L
<HTML>
<HEAD>
<TITLE>:or&uar%os</TITLE>
</HEAD>
<BODY>
<H@>:or&uar%os</H@>
<:ORM A+TION>F&a%!o,unaprue0aF METHOD>FPO(TF>
<INP$T TYPE>F!e;!F NAME>Fno&0reF><BR>
<INP$T TYPE>Fsu0&%!F><INP$T TYPE>FRese!F>
</:ORM>
</BODY>
</HTML>
htt.4??GGG.Ge-estilo.co/?HTML?ca.2c..HTML

22
BIBLI)-+&=C&
C$ll'ns Lane C$m$ crear &"g'nas MEB ?JJF Ed'!+ Alec M3%'c$ D+N+ =ra+ Ed+
Or)s Luan Carl$s D'se6$ de &"g'nas Me* 'n!erac!'.as c$n La.aScr'&! =III Ed'! Al#a$mega M3%'c$ D+N+
-!!&:22geneura+ugr+es2Ogus!a.$2HTML2HTML+HTMLP#'s'c$
htt.4??GGG.desarrolloGe-.co/?articulos?1+>,..h.
htt.4??GGG.desarrolloGe-.co/?/anuales
htt.4??GGG.Ge-estilo.co/?HTML?ca.2c..HTML
$ttp3//DDD4desarrolloDe"4coE/articulos/anEacionBHTMLBconBEarquee4HTML Marquesinas
-!!&:22TTT+-$s&edaje,d$m'n'$s+c$m2mam*$2d$cumen!ac'$n>manual_HTML>&ag'na>cg'+HTML
-!!&:22TTT+-$s&edaje,d$m'n'$s+c$m2mam*$2d$cumen!ac'$n>manual_HTML>&ag'na>'nd'ce+HTML
-!!&:22ses!ud+u.+es2manual+es&2'nd'ce+-!m
htt.4??GGG.u$.es?jac?guia?CELE1ind.ht/
-!!&:22TTT+-!ml&$'n!+c$m2gu'da2-!ml_=@+-!m
>tt2?@@>t.6co%case6%et@A1c@>t.3=-Bes@2rese%t@fra.es6>t.C>B-!6-
2+

Manual HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Manual HTML

Hochgeladen von

Copyright:

Verfügbare Formate

Elaboracin de pginas WEB, CBTis 224 Prcticas de Lenguaje HTML M.C.

Mara Gregoria Beltrn Snchez

Das könnte Ihnen auch gefallen