Tutorial HTML - Tabla de contenidos

Introduccin
Breve introduccin y qu aprenders usando este tutorial.
Leccin 1: Nos ponemos en marcha!
escu!re qu herramientas necesitas para crear tu propio sitio "e!.
Leccin #: $%u es &'(L)
*omprende qu es &'(L y qu si+ni,ica.
Leccin -: $.lementos y etiquetas)
%u son los elementos y las etiquetas y para qu se usan.
Leccin /: *rea tu primer sitio "e!
0prende a crear tu primer documento &'(L1 crea la plantilla !sica para ,uturas
p+inas.
Leccin 2: $%u has aprendido hasta ahora)
3esumen de lo aprendido hasta ahora y descu!re qu aprenders en las si+uientes
lecciones.
Leccin 4: (s elementos
5amiliar67ate con siete de los elementos ms usados.
Leccin 8: 0tri!utos
0prende a a9adir in,ormacin adicional a las etiquetas y ,ormula comandos de un
modo ms claro.
Leccin :: .nlaces
escu!re cmo crear enlaces internos a tus propias p+inas y e;ternos a otras
p+inas de Internet.
Leccin <: Im+enes
escu!re lo sencillo y ,cil que es insertar im+enes en tus p+inas.
Leccin 1=: 'a!las
*onstruye ta!las con &'(L para presentar contenido estructurado.
Leccin 11: ... y ms ta!las
*rea ta!las a>n ms so,isticadas.
Leccin 1#: ?resentacin @*AAB
*omprende cmo se usan las &oCas de .stilo en *ascada @*AAB para a9adir una
presentacin de ,antas6a a tus p+inas.
Leccin 1-: Au!e tus p+inas a Internet
escu!re cmo pu!licar tus p+inas en Internet para que otros tam!in puedan
dis,rutarlas.
Leccin 1/: .stndares "e! y validacin
0prende so!re el estndar com>n de &'(L y cmo compro!ar que el cdi+o
escrito es correcto.
Leccin 12: Dltimos conseCos
Enos cuantos conseCos a tener en cuenta al crear tus proyectos de "e!.
Introduccin - Tutorial HTML gratuito
*on ,recuencia la +ente piense que es muy di,6cil crear un sitio "e!. ?ues...
no es el caso! Todos podemos aprender a crear un sitio web. F si si+ues leyendoG sers
capa7 de hacerlo en apro;imadamente una hora.
Htros creen Iy estn i+ual de equivocadosI que para crear sitios "e! es necesario un tipo de
so,t"are caro y so,isticado. .s cierto que e;isten muchos pro+ramas di,erentes que
proclaman que pueden crear un sitio "e! por ti1 unos se acercan ms que otros. Ain
em!ar+oG si quieres que todo sal+a per,ectoG tienes que hacerlo t> mismo. ?or suerteG es
sencillo y gratuito y ya dispones de todo el software necesario.
.l o!Cetivo de este tutorial es proporcionarte una introduccin ,cilG pero al mismo tiempo
completa y correcta so!re cmo crear sitios "e!. Este tutorial empieza de cero y no es
necesario, en absoluto, tener conocimientos previos sobre programacin.
.ste tutorial no puede ense9rtelo todo. ?or lo tantoG es necesario comprometerse un poco y
tener voluntad para e;perimentar. ?ero no tienes por qu preocuparte: aprender a crear
sitios "e! es de lo ms divertido y proporciona una +ran satis,accin cuando se da con la
solucin correcta.
.l modo en que utilices el presente tutorial depende de ti. 'e su+erimosG en todo casoG que
slo leas dos o tres lecciones al d6aG y lue+o dediques tiempo a e;perimentar todo lo nuevo
que hayas aprendido en cada leccin.
BienG ya vale de chachara. Nos ponemos en marcha!
Leccin ! "#os ponemos en marc$a%
.n esta primera leccin te presentaremos !revemente las herramientas que necesitas para
crear un sitio "e!.
&'u( se necesita)
Lo ms pro!a!le es que ya ten+as todo lo que necesitas.
Fa dispones de un Jnave+adorJ. .l nave+ador es el pro+rama que te permite nave+ar y a!rir
sitios "e!. .n este preciso momento ests viendo esta p+ina en el nave+ador.
No importa qu nave+ador uses. .l ms ha!itual es (icroso,t Internet .;plorerG pero
e;isten otros como Hpera y (o7illa 5ire,o;G y todos ellos se pueden usar indistintamente.
.s posi!le que hayas o6do ha!larG e incluso lle+ado a usarG pro+ramas como (icroso,t
5ront?a+eG (acromedia ream"eaver e incluso (icroso,t KordG que pueden I o a,irman
poder I crear sitios "e! por ti. e momentoG olv6date de todos estos pro+ramas! No son de
nin+una ayuda a la hora de aprender a codi,icar tu propio sitio "e!.
.n su lu+arG necesitas un sencillo editor de te;to. Ai utili7as Kindo"s puedes usar el Bloc
de notasG que se encuentra normalmente pinchando en el men> de InicioG en la seccin
'odos los pro+ramas y dentro de sta en la seccin 0ccesorios:
Ai no utili7as Kindo"sG puedes usar un editor de te;to parecido. ?or eCemploG ?ico @para
Linu;B o 'e;t.dit @para (acB.
.l Bloc de notas es un pro+rama de edicin de te;tos muy !sicoG e;celente para escri!ir
cdi+o ,uente ya que no inter,iere con lo que vas escri!iendoG por lo que te proporciona un
control total. .l pro!lema con muchos de los pro+ramas que proclaman que pueden crear
sitios "e! es que disponen de muchas ,unciones estndar entre las que puedes ele+ir1 la
desventaCa es que todo tiene que adaptarse a esas ,unciones estndar. 0s6 puesG este tipo de
pro+ramasG con ,recuenciaG no pueden crear un sitio "e! con la e;actitud que uno quiere.
HG lo que es ms enoCosoG hacen cam!ios al cdi+o escrito a mano. *on el Bloc de notas u
otros editores de te;to sencillosG uno mismo es el >nico culpa!le de sus ;itos o errores.
En nave+ador y el Bloc de notas @o un editor de te;to sencillo similarB es todo lo que
necesitas para se+uir este tutorial y aprender a crear tus propios sitios "e!.
&Es necesario estar conectado a Internet)
No es necesario conectarse a InternetG ni cuando ests leyendo este tutorial ni al crear tus
sitios "e!.
Ai quieres evitar tener que conectarte mientras lees este tutorialG o !ien puedes imprimirlo o
desconectarte de Internet mientras lo lees en la pantalla1 para crear el sitio "e! puedes
hacerlo en el disco duro de tu ordenador y su!irlo despus a Internet una ve7 terminado.
&* a$ora +u( sigue)
?asa a la si+uiente leccin y lee al+o de in,ormacin relativa a &'(L antes de empe7ar con
la diversin en la leccin -.
Leccin ,! &'u( es HTML)
.n esta leccin haremos una !reve presentacin de tu nuevo ami+o: &'(L.
&'u( es HTML)
HTML es la -lengua materna- de tu navegador.
?ara a!reviar una lar+a historiaG podemos decir que un cient6,ico llamado 'im BernersILee
invent &'(L all por 1<<=. .l o!Cetivo era ,acilitar a cient6,icos de di,erentes
universidades el acceso a los documentos de investi+acin de cada uno de ellos. .l
proyecto o!tuvo un ;ito mucho mayor del que 'im BernersILee nunca hu!iese lle+ado a
ima+inar. 0l inventar &'(LG este cient6,ico sent las !ases de la "e! tal y como la
conocemos hoy d6a.
&'(L es un len+uaCe que hace posi!le presentar in,ormacin @por eCemploG investi+aciones
cient6ticasB en Internet. Lo que ves al visuali7ar una p+ina en Internet es la interpretacin
que hace el nave+ador del cdi+o &'(L. ?ara ver el cdi+o &'(L de una p+ina slo
tienes que pinchar en la opcin JLerJ de la !arra de men>s y ele+ir J*di+o ,uenteJ @en
Internet .;plorerB.
?ara el oCo ine;pertoG el cdi+o &'(L parece complicadoG pero este tutorial te ayudar a
que le encuentres todo su sentido.
&/ara +u( puedo usar HTML)
Ai quieres crear sitios "e!G no hay otra solucin que aprender &'(L. Incluso si usas un
pro+rama como ream"eaverG por eCemploG para la creacin de sitios "e!G poseer unos
conocimientos !sicos de &'(L hacen la vida mucho ms ,cil y tus sitios "e! mucho
meCores. La !uena noticia es que &'(L es ,cil de aprender y de usar. .n las dos pr;imas
lecciones ya ha!rs aprendido cmo crear tu primer sitio "e!.
HTML se usa para crear sitios web. "0s1 de sencillo%
2ale, pero... &+u( representan las siglas H-T-M-L)
&'(L es la a!reviatura de J&yper'e;t (arMIup Lan+ua+eJG es decirG JLen+uaCe de
marcado hiperte;tualJG y esto ya es ms de lo que necesitas sa!er a estas alturas. .n todo
casoG para mantener un !uen ordenG vamos a e;plicar qu si+ni,ica con mayor detalle.
Hiper es lo contrario de lineal. .n los !uenos vieCos tiempos Icuando un ratn era
un animalillo que perse+u6a un +atoI los pro+ramas de ordenador se eCectuta!an de
,orma lineal: cuando el pro+rama ha!6a eCecutado una accin se+u6a hasta la
si+uiente l6neaG y despus de sta a la si+uienteG y a la si+uienteG ... &'(LG sin
em!ar+oG es di,erente: se puede ir donde uno quiera cuando uno quiera. ?or
eCemploG no es necesario visitar (AN.com antes de visitar &'(L.net.
Te3to se e;plica por s6 solo.
Marcado es lo que haces con el te;to. Ae marca el te;to del mismo modo que en un
pro+rama de edicin de te;tos con enca!e7adosG vi9etasG ne+ritaG etc.
Lengua4e es lo que es &'(L. .ste len+uaCe hace uso de muchos trminos en
in+ls.
?or medio de este tutorial aprenders lo que se ha dado en llamar N&'(L @.;tensi!le
&yper'e;t (arMIup Lan+ua+eG es decirG Len+uaCe de marcado hiperte;tual e;tensi!leB queG
en pocas pala!rasG es una ,orma de escri!ir &'(L nueva y meCor estructurada.
0hora que ya sa!es qu representan las si+las &'(L @y N&'(LBG nos ponemos en marcha
y empe7amos a crear sitios "e!.
Leccin 5! Elementos y eti+uetas
0hora ya ests listo para aprender lo esencial de &'(L: los elementos.
Los elementos proporcionan la estructura al documento &'(L e indican al nave+ador
cmo quieres que se presente tu sitio "e!. ?or lo +eneralG los elementos estn ,ormados por
una etiqueta de inicioG el contenidoG y una etiqueta de cierre.
-&Eti+uetas)-
Las etiquetas son marcas que se usan para se9alar el inicio y el ,in de un elemento.
'odas las etiquetas comparten el mismo ,ormato: empie7an con el si+no menor que JOJ y
terminan con el si+no mayor que JPJ.
?or lo +eneralG hay dos tipos de etiquetas: la etiquetas de inicioG por eCemploG OhtmlPG y las
etiquetas de cierreG por eCemploG OQhtmlP. La >nica di,erencia entre la etiqueta de inicio y la
de cierre es la !arra o!licua JQJ. .l contenido queda etiquetado al colocarlo entre una
etiqueta de inicio y una etiqueta de cierre.
&'(L trata esencialmente de elementos. 0prender &'(L consiste en aprender a usar
di,erentes etiquetas.
&* si vemos algunos e4emplos)
Lale. .l elemento em se usa para dar en,asis al te;to. 'odo el te;to entre la etiqueta de
inicio <em> y la etiqueta de cierre </em> aparecer en,ati7ado en el nave+ador. @JemJ es la
a!reviatura de JemphasisJB.
E4emplo !
<em>Texto con nfasis.</b>
que se ver as6 en el nave+ador:
Texto con nfasis.
Los elementos h1G h2G h3G h4G h5 and h6 se utili7an para crear enca!e7ados @JhJ es la
a!reviatura de Jheadin+JBG donde h1 representa el primer nivel yG normalmenteG el te;to ms
+randeG h2 es el se+undo nivel yG normalmenteG es un te;to al+o ms peque9oG y h6 es el
se;to y >ltimo nivel en la Cerarqu6a de los enca!e7ados y esG normalmenteG el te;to ms
peque9o.
E4emplo ,!
<h1>Este es un encabezado de pime ni!e"</h1>
<h2>Este es un encabezado de se#undo ni!e"</h2>
que se ver as6 en el nave+ador:
Este es un encabezado de primer nivel
Este es un encabezado de segundo nivel
0s1 pues, &siempre son necesarias las eti+ueta de inicio y
de cierre)
*omo se diceG siempre hay una e;cepcin que con,irma la re+laG y en &'(L la e;cepcin
son unos cuantos elementos que se a!ren y cierran con la misma etiqueta. .stos elementos
que se denominan elementos vac6os no se asocian a un pasaCe espec6,ico del te;to sino que
son ms !ien etiquetas aisladas1 por eCemploG un salto de l6nea tiene este ,ormato: <b />.
&Las eti+uetas $ay +ue escribirlas en may6scula o en
min6scula)
0 la mayor6a de los nave+adores les da i+ual si se escri!en en may>sculaG min>scula o una
me7cla de las dos. O&'(LPG OhtmlP or O&t(lP normalmente tendrn el mismo resultado.
Ain em!ar+oG el modo correcto es escri!ir las etiquetas en min>scula. 0s6 que
acost6mbrate a escribir las eti+uetas en min6scula.
&* dnde coloco todas estas eti+uetas)
Las etiquetas se escri!en dentro de un documento &'(L. 'odo sitio "e! contiene uno o
ms documentos &'(L. *uando nave+as por la "e!G no haces otra cosa que a!rir
di,erentes documentos &'(L.
Ai contin>as ahora con la si+uiente leccinG en unos die7 minutos ha!rs creado tu primer
sitio "e!.
Leccin 7! 8rea tu primer sitio web
*on lo que ya has aprendido en las lecciones anterioresG slo te quedan unos minutos para
crear tu primer sitio "e!.
&8mo)
.n la leccion 1 vimos qu se necesita para crear un sitio "e!: un nave+ador y el Bloc de
notas @o un editor de te;to similarB. ?uesto que ests leyendo estoG lo ms pro!a!le es que
ya ten+as a!ierto el nave+ador. Lo >nico que necesitas es a!rir otra ventana del nave+ador
de ,orma que puedas leer este tutorial y veas cmo va quedando tu nuevo sitio "e! al
mismo tiempo.
0!re tam!in el Bloc de notas @que se encuentra en el men> de InicioG 'odos los
pro+ramasG en la seccin 0ccesoriosB:
F ya estamos listos!
&* +u( puedo $acer)
.mpecemos con al+o sencillo. %ue te parece una p+ina que di+a: J&urra! .sta es mi
primera p+ina "e!.J Ai+ue leyendo y vers qu sencillo es.
&'(L is sencillo y l+ico. El navegador lee el cdigo HTML igual +ue lo $aces t6! de
arriba aba4o y de iz+uierda a derec$a. 0s6 puesG todo documento &'(L empie7a con lo
que de!er6a aparecer en primer lu+ar en la p+ina y termina con lo que de!er6a ir en >ltimo
lu+ar.
Lo primero que tienes que hacer es decirle al nave+ador que le Jha!larsJ usando el
len+uaCe &'(L. .sto se consi+ue con la etiqueta <htm"> @sin sorpresasG $no)B. 0s6 que
antes de hacer cualquier otra cosaG escri!e J<htm">J en la primera l6nea del documento
creado con el Bloc de notas.
*omo recordars de las lecciones anterioresG <htm"> es una etiqueta de inicio y tiene que
cerrarse con su correspondiente etiqueta de cierre cuando hayas terminado de escri!ir el
cdi+o &'(L. 0s6 que para no olvidar la etiqueta de cierre del elemento &'(L escri!e
J</htm">J un par de l6neas ms a!aCoG y entre am!as etiquetas <htm"> y </htm"> escri!e el
resto del documento.
Lo si+uiente que necesita el documento es una Jca!eceraJG que proporcionar in,ormacin
relativa a este mismo documentoG y un JcuerpoJ donde se incluir el contenido del
documento. ?uesto que &'(L es de lo ms l+icoG la ca!ecera @es decirG las etiquetas
<head> y </head>B se encuentra encima del cuerpo @o seaG encima de las etiquetas <bod$>
y </bod$>B.
.l documento de!er6a presentar ahora este aspecto:
<htm">
<head>
</head>
<bod$>
</bod$>
</htm">
?resta atencin a cmo hemos estructurado las etiquetas introduciendo nuevas l6neas
@usando la tecla .nterB al i+ual que hemos usado san+rado @utili7ando la tecla 'a!B. .n
principioG da i+ual cmo estructures el documento &'(L1 sin em!ar+oG para que te sirva de
ayuda tanto para ti y como para otros a la hora de interpretar el cdi+o ,uenteG y con el ,in
tener una !uena visin de conCuntoG es recomendable estructurar el cdigo HTML de
una forma n1tida, con saltos de l1nea y sangradosG como en el eCemplo anterior.
Ai el documento se parece al del eCemplo anteriorG ya has creado tu primer sitio "e!: un
sitio "e! especialmente a!urrido y en modo al+uno parecido a lo que so9a!as cuando
empe7aste este tutorialG peroG con todo y con esoG ya es al+o que parece un sitio "e!. .l
cdi+o que aca!as de crear te servir como plantilla !sica para todos tus ,uturos
documentos &'(L.
Hasta a$ora todo va bien, pero &cmo a9ado contenido a
mi sitio web)
*omo aprendiste anteriormenteG todo documento &'(L tiene dos partes: un enca!e7ado y
un cuerpo. En la seccin del encabezado se incluye informacin sobre la propia p:gina,
mientras +ue el cuerpo contiene la informacin +ue constituye la p:gina en s1..
?or eCemploG si quieres poner a la p+ina un t6tulo que aparecer en la !arra de t6tulos del
nave+adorG de!er6as hacerlo en la seccin del enca!e7adoG es decir dentro de las etiquetas
JheadJ. .l elemento que se usa para el t6tulo es tit"eG o seaG escri!e el t6tulo de la p+ina
entre la etiqueta de inicio <tit"e> y la etiqueta de cierre </tit"e>:
<tit"e>%i pime sitio &eb</tit"e>
'en en cuenta que este t6tulo no aparecer en la p+ina en s6. *ualquier cosa que quieras
que apare7ca en la p+ina es contenido y de!eG por la tantoG a9adirse entre las etiquetas
<bod$> y </bod$>.
*omo lo prometido es deudaG vamos a conse+uir que la p+ina nos di+a: J&urra! .ste es
mi primer sitio "e!.J .ste es el te;to que queremos transmitirG yG por lo tantoG pertenece a la
seccin del cuerpo. 0s6 puesG en la seccin del cuerpoG escri!e lo si+uiente:
<p>'(ua) Este es mi pime sitio &eb.</p>
La p de <p> es la a!reviatura de Jprra,oJG que es e;actamente lo que es: un prra,o de
te;to.
.l documento &'(L de!er6a tener ahora este aspecto:
<htm">
<head>
<tit"e>%i pime sitio &eb</tit"e>
</head>
<bod$>
<p>'(ua) Este es mi sitio &eb.</p>
</bod$>
</htm">
&echo! 0ca!as de crear ahora mismo tu primer sitio "e! de verdad!
Lo si+uiente que hay que hacer es +uardarlo en el disco duro y lue+o a!rirlo en el
nave+ador:
.n el Bloc de notas eli+e JRuardar como...J del men> J0rchivoJ en el men>
principal.
.li+e J'odos los archivosJ en la caCa J'ipoJ. .sto es muy importanteG puesG de lo
contrarioG se +uardar como documento de te;to y no como un documento &'(L.
0hora +uarda el documento como Jpa+ina1.htmJ @la terminacin J.htmJ indica que
es un documento &'(L1 con la terminacin J.htmlJ se consi+ue el mismo
resultado. ?ersonalmenteG siempre uso J.htmJ1 t> puedes ele+ir cualquiera de las dos
e;tensionesG se+>n pre,ierasB. a i+ual dnde +uardes el documento en el disco
duroG siempre que recuerdes dnde lo hiciste para poder recuperarlo con
posterioridad.
0hora pasamos al nave+ador:
.n el men> principal eli+e J0!rirJ del men> J0rchivoJ @*'3LSHB
&a7 clic en el !otn J.;aminarJ de la caCa que aparece.
0hora locali7a el documento &'(L y ha7 clic en J0!rirJ.
.n el nave+ador de!er6a poder leerse ahora: J&urra! .ste es mi primer sitio "e!.J
.nhora!uena!
Ai ests deseando que todo el mundo vea tu o!ra maestra ya mismoG salta a la leccin 1- y
aprende cmo su!ir tus p+inas a Internet. Ai no es as6G se paciente y si+ue leyendo. La
diversin no ha hecho ms que empe7ar!
Leccin ;! &'u( $as aprendido $asta
a$ora)
Empieza siempre con la plantilla bsica que creamos en la leccin anterior:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
En la seccin del encabezado, incluye siempre un ttulo: <title> El ttulo de la pgina </title>. !ate
cmo aparece el ttulo en la esquina superior izquierda del na"egador:
El ttulo es especialmente importante porque los motores de b#squeda $por e!emplo, %oogle& lo
utilizan para inde'ar tu sitio y porque aparece re(le!ado en los resultados de la b#squeda.
En la seccin del cuerpo, se escribe el contenido propiamente dicho de la pgina. )a conoces
algunos de los elementos ms importantes:
<p>*e usa para escribir prra(os</p>
<em>+uestra el te'to en(atizado</em>
<h,>Encabezado de ni"el ,</h,>
<h->Encabezado de ni"el -</h->
<h.>Encabezado de ni"el .</h.>
/ecuerda: el #nico modo de aprender 01+2 es utilizando el m3todo de la prueba y el error. 4ero
no te preocupes, en modo alguno "as a destrozar tu ordenador o 5nternet. 6s que sigue
e'perimentando7 es el me!or modo de adquirir e'periencia.
&* esto +u( se supone +ue significa)
8adie se con"ierte en un buen desarrollador 9eb slo con aprender los e!emplos de este tutorial.
2o que este tutorial te proporciona son sencillamente unos conocimientos bsicos de los
elementos esenciales7 para llegar a ser bueno tienes que usar estos elementos esenciales de
(ormas nue"as y creati"as.
6s pues, lnzate de lleno y empieza a "olar por ti mismo... :ale, puede que un no sea el
momento. 4ero, de todos modos, int3ntalo y e'perimenta con lo que has aprendido.
&* a$ora +u( sigue)
5ntenta crear unas cuantas pginas t# mismo. 4or e!emplo, crea una pgina con un ttulo, un
encabezado, algo de te'to, un encabezado de segundo ni"el y algo ms de te'to. 8o pasa nada por
echarle un "istazo al tutorial mientras preparas estas primeras pginas. 4ero, ms adelante,
intenta hacerlo t# solo... sin mirar.
Leccin <! M:s elementos
$&as conse+uido crear al+unas p+inas t> solo) Ai no es as6G aqu6 tienes un eCemplo:
<htm">
<head>
<tit"e>%i sitio &eb</tit"e>
</head>
<bod$>
<h1>Encabezado de ni!e" 1</h1>
<p>texto* texto* texto* texto</p>
<h2>Encabezado de ni!e" 2</h2>
<p>texto* texto* texto* texot</p>
</bod$>

</htm">
&* a$ora +u()
?ues ha lle+ado el momento de aprender siete nuevos elementos.
el mismo modo que en,ati7amos el te;to al incluirlo entre la etiqueta de inicio <em> y la
etiqueta de cierre </em>G se puede acentuar ms ese n,asis usando la etiqueta de inicio
<ston#> y la etiqueta de cierre </ston#>.
E4emplo !
<ston#>+nfasis acentuado</ston#>
y se ver as6 en el nave+ador:
=nfasis acentuado.
0simismoG puedes hacer que el te;to sea ms peque9o usando sma"":
E4emplo ,!
<sma"">Este texto tend,a -ue se un poco m.s pe-ue/o.</sma"">
y se visuali7ar as6 en el nave+ador:
.ste te;to tendr6a que ser un poco ms peque9o.
&/uedo usar varios elementos a la misma vez)
A6G se pueden usar ,cilmente varios elementos a la ve7 siempre que evitemos elementos
superpuestos. .sto lo entenderemos meCor con un eCemplo:
E4emplo 5!
Ai quieres que el te;to apare7ca en,ati7ado y ms peque9oG se de!e hacer de la si+uiente
manera:
<em><sma"">Texto enfatizado m.s pe-ue/o</sma""></em>
y NH de la si+uiente manera:
<em><sma"">Texto enfatizado m.s pe-ue/o</em></sma"">
La di,erencia estri!a en queG en el primer eCemploG cerramos en >ltimo lu+ar el elemento
que a!rimos primero. e este modo evitamos con,undir al nave+ador y a nosotros mismos.
"M:s elementos%
*omo mencion!amos en la leccin -G e3isten una serie de elementos +ue se abren y
cierran con la misma eti+ueta. .stos elementos conocidos como elementos vac6os no
estn relacionados con un pasaCe espec6,ico del te;to sino que son ms !ien etiquetas
aisladas. En eCemplo de dichas etiquetas es <b /> que crea un salto de l6nea ,or7ado.
E4emplo 7!
0"#o de texto <b />$ a"#o m.s de texto en una nue!a ",nea
que se visuali7ar as6 en el nave+ador:
0l+o de te;to
y al+o ms te;to en una nueva l6nea
56Cate en que la etiqueta parece una ,orma contra6da de la etiqueta de inicio y de la etiqueta
de cierre con un espacio en !lanco y una !arra al ,inal: <b />.
Htro elemento que se a!re y cierra con la misma etiqueta es <h />G que se usa para tra7ar
una l6nea hori7ontal @JhrJ es la a!reviatura de Jhori7ontal ruleJB:
E4emplo ;!
<h />
que se ver as6 en el nave+ador:
Htros eCemplos de elementos que necesitan tanto la etiqueta de inicio como de cierre Ila
mayor6a de elementos cumplen esta normaI son: u"G o" y "i. .stos tres elementos se usan
para crear listas.
u" is la ,orma a!reviada de Junordered listJ @es decirG lista no ordenadaB e inserta vi9etas
para cada elemento. o" es la a!reviatura de Jordered listJ @es decirG lista ordenadaB y
numera cada elemento de la lista. ?ara crear elementos de lista use la etiqueta "i @Jlist
itemJG o seaG elemento de listaB. ?arece al+o con,usoG $no) LeamosG entoncesG al+unos
eCemplos:
E4emplo >!
<u">
<"i>1n e"emento de "ista</"i>
<"i>2to e"emento de "ista</"i>
</u">
que se ver as6 en el nave+ador:
En elemento de lista
Htro elemento de lista
E4emplo ?!
<o">
<"i>3ime e"emento de "ista</"i>
<"i>4e#undo e"emento de "ista</"i>
</o">
que se visuali7ar as6 en el nave+ador:
,. ?rimer elemento de lista
-. Ae+undo elemento de lista
"@f% &Eso es todo)
e momentoG s6. Ena ve7 msG e;perimenta y crea tus propias p+inas usando al+uno de los
siete nuevos elementos que aca!as de aprender en esta leccin:
<ston#>+nfasis m.s fuete</ston#>
<sma"">Texto pe-ue/o</sma"">
<b />4a"to de ",nea
<h />5,nea hoizonta"
<u">5ista sin odena</u">
<o">5ista odenada</o">
<"i>E"emento de "ista</"i>
Leccin >! 0tributos
Es posible a;adir atributos a determinados elementos.
&* +u( es un atributo)
<omo recordars, los elementos sir"en para estructurar el contenido de todo el documento 01+2
e indican al na"egador cmo debera presentarse el sitio 9eb $por e!emplo, <br /> in(orma al
na"egador para que introduzca un salto de lnea&. En algunos elementos se puede a;adir ms
in(ormacin. Esa in(ormacin e'tra se denomina atributo.
E!emplo ,:
<h- style=>bac?ground@color:A((BBBB7>>+i amistad con 01+2</h->
2os atributos se incluyen siempre dentro de la etiqueta de inicio y lle"an inmediatamente detrs el
signo de igual $>=>& con los "alores de dichos atributos entre comillas $>>&. El punto y coma que
sigue al atributo se usa para separar los di(erentes comandos de estilo. +s tarde "ol"eremos a
tratar sobre este tema.
&8u:l es la pega)
E'isten muchos atributos di(erentes. El primero que "as a aprender es style. <on el atributo style
se puede a;adir e(ectos de presentacin a tu sitio 9eb. 4or e!emplo, un color de (ondo:
E!emplo -:
<html>

<head>
</head>
<body style=>bac?ground@color:A((BBBB7>>
</body>
</html>
El cdigo anterior mostrara un pgina con (ondo ro!o en el na"egador7 adelante, pru3balo t#
mismo. En unos minutos e'plicaremos como ms detalle cmo (unciona el sistema de colores en
01+2.
1en en cuenta que algunas etiquetas y atributos usan ortogra(a estadounidense, es decir, >color>
en "ez de >colour>. Es importante que utilices la misma ortogra(a que usamos en los e!emplos de
este tutorial7 de otro modo, los na"egadores no sern capaces de interpretar el cdigo. 6dems,
no ol"ides cerrar siempre las comillas detrs del atributo.
&'u( ocurri para +ue la p:gina apareciera en color
ro4o)
En el e!emplo anterior, hicimos re(erencia al color de (ondo usando el cdigo >A((BBBB>. Este es el
cdigo de color para el ro!o en el sistema num3rico he'adecimal $0EC&. <ada color tiene su propio
n#mero he'adecimal.. ) estos son algunos e!emplos:
Dlanco: A((((((
8egro: ABBBBBB $ceros&
/o!o: A((BBBB
6zul: ABBBB((
:erde: ABB((BB
6marillo: A((((BB
El cdigo de color he'adecimal se compone de una almohadilla, >A>, y seis dgitos $del B al E& o
letras $de la 6 a la &. E'isten ms de ,.BBB cdigos he'adecimales y no es (cil calcular qu3 cdigo
he'adecimal corresponde a un color espec(ico. 4ara (acilitar las cosas hemos preparado una tabla
con los -,F colores ms usados: 1abla de colores seguros para la 9eb.
1ambi3n se pueden usar los nombres en ingl3s para los colores ms comunues $9hite: blanco,
blac?: negro, red: ro!o, blue: azul, green: "erde y yello9: amarillo&.
E!emplo .:
<body style=>bac?ground@color: red7>>
Ge momento, ya "ale de colores. :ol"amos a los atributos.
&'u( elementos pueden usar atributos)
*on "arios los atributos di(erentes que se pueden aplicar a la mayora de los elementos.
4or e!emplo, usars con (recuencia atributos en la etiqueta body, mientras que, por e!emplo, raras
"eces usars atributos en la etiqueta br, ya que un salto de lnea es un salto de lnea que no tiene
parametros que a!ustar.
6l igual que e'isten muchos elementos, e'isten tambi3n muchos y di(erentes atributos. 6lgunos
atributos estn hechos a la medida para un elemento concreto, mientras que otros se pueden usar
para muchos elementos di(erentes. ) "ice"ersa: algunos elementos slo pueden contener un tipo
de atributo mientras otros pueden contener muchos.
4uede sonar algo con(uso, pero una "ez que te acostumbres a los di(erentes atributos, es en
realidad de lo ms lgico y pronto "ers qu3 (cil es usarlos y cuntas posibilidades brindan.
Este tutorial te presentar los atributos ms importantes.
&* de +u( partes se compone e3actamente un elemento)
4or lo general, todo elemento se compone de una etiqueta de inicio, sin atributos o con uno o ms
atributos, el contenido correspondiente y una etiqueta de cierre. 6s de sencillo. Hbser"a la
imagen in(erior.
Leccin ?! Enlaces
En esta leccin aprenders a crear enlaces entre pginas.
&'u( necesito para crear un enlace)
4ara crear enlaces se usa lo que siempre usamos al codi(icar 01+2: un elemento. In sencillo
elemento con un atributo y podrs enlazar con cualquier cosa y con todo. :as a "er ahora mismo
un e!emplo de cmo se codi(icara un enlace a 01+2.net:
Ejemplo 1:
<a hre(=>http://999.html.net/>>Gesde aqu enlazamos con 01+2.net</a>
que se "isualizar as en el na"egador:
Gesde aqu enlazamos con 01+2.net
El elemento a es la abre"iatura de >anchor> $ancla, en espa;ol&. ) el atributo hre( es la abre"iatura
de >hyperte't re(erence> $es decir, re(erencia hiperte'tual&, que especi(ica hacia dnde nos dirige
el enlace7 normalmente, una direccin de internet o un nombre de (ichero.
En el e!emplo anterior el atributo hre( contiene el "alor >http://999.html.net>, que es la direccin
completa de 01+2.net y que se denomina I/2 $Ini(orm /esource 2ocator7 en espa;ol, localizador
de recursos uni(orme&. 1en en cuenta que >http://> siempre debe incluirse en las I/2s. El te'to
>Gesde aqu enlazamos con 01+2.net> es el que aparece en el na"egador como enlace. /ecuerda
cerrar el elemento con la etiqueta de cierre </a>.
&* se pueden crear enclaces entre mis propias p:ginas)
*i quieres crear enlaces entre las pginas de un mismo sitio 9eb, no es necesario incluir la
direccin completa $el I/2& del documento. 4or e!emplo, si has creado dos pginas $llam3moslas
pagina,.htm y pagina-.htm& y las has guardado en la misma carpeta, puedes enlazar una pgina
con la otra con slo escribir el nombre del (ichero en el enlace. *i este es el caso, enlazar la
pagina,.htm con la pagina-.htm tendra el siguiente aspecto:
Ejemplo 2:
<a hre(=>pagina-.htm>>0az clic para ir a la pgina -</a>
*i la pgina - estu"iera en una subcarpeta $llamada >subcarpeta>&, el enlace tendra el siguiente
aspecto:
Ejemplo 3:
<a hre(=>subcarpeta/pagina-.htm>>0az clic para ir a la pgina -</a>
En sentido in"erso, enlazar desde la pgina - $en la subcarpeta& a la pgina , se hara usando con
el siguiente cdigo:
Ejemplo 4:
<a hre(=>../pagina,.htm>>Enlace a la pagina,</a>
2os dos puntos con la barra, >../>, hacen re(erencia a una carpeta que se encuentra un ni"el por
encima de donde se encuentra el (ichero desde el que se crea el enlace. *iguiendo este mismo
sistema, se puede se;alar a dos $o ms& carpetas en ni"eles superiores escribiendo >../../>.
J0as captado cmo (unciona el sistemaK Ge (orma alternati"a, siempre puedes escribir la
direccin completa del (ichero $el I/2&.
&* se pueden crear enlaces internos dentro de una misma
p:gina)
1ambi3n puedes crear enlaces internos dentro de una misma pgina7 por e!emplo, una tabla de
contenidos en la parte superior de la pgina con enlaces a cada captulo que se encuentra ms
aba!o. 1odo lo que necesitas es usar un atributo muy #til llamado id $identi(ication, en ingl3s7 es
decir, identi(icador& y el smbolo >A>, conocido como almohadilla.
Isa el atributo id para marcar el elemento con el que quieras enlazar. 4or e!emplo:
<h, id=>encabezado,>>4rimer encabezado</h,>
6hora ya puedes crear un enlace a dicho elemento usando la almohadilla >A> en el atributo >hre(>
del elemento a. El smbolo >A> debe ir seguido del id de la etiqueta con la que quieres enlazar. 4or
e!emplo:
<a hre(=>Aencabezado,>>Enlace con el primer encabezado</a>
:amos a "er un e!emplo para que todo quede claro:
Ejemplo 5:
<html>

<head>
</head>
<body>
<p><a hre(=>Aencabezado,>>Enlace con el primer encabezado</a></p>
<p><a hre(=>Aencabezado->>Enlace con el segundo encabezado</a></p>
<h, id=>encabezado,>>4rimer encabezado</h,>
<p>1e'to te'to te'to te'to</p>
<h, id=>encabezado->>*egundo encabezado</h,>
<p>1e'to te'to te'to te'to</p>

</body>
</html>

que se "isualizar as en el na"egador $haz clic en los dos enlaces&:
Enlace con el primer encabezado
Enlace con el segundo encabezado
/rimer encabezado
1e'to te'to te'to te'to
Aegundo encabezado
1e'to te'to te'to te'to
$8ota: El atributo >id> debe empezar con una letra&
&/uedo crear enlaces a otras cosas)
1ambi3n puedes crear enlaces a una direccin de correo electrnico. *e hace casi igual que
cuando se crea un enlace a un documento:
Ejemplo 6:
<a hre(=>mailto:nobodyLhtml.net>>En"e un mensa!e a nadie en 01+2.net</a>
que se "isualizar en el na"egador as:
En"e un mensa!e a nadie en 01+2.net
2a #nica di(erencia entre un enlace a una direccin de correo electrnico y un enlace a un (ichero
consiste en que en lugar de escribir la direccin del documento, se escribe: mailto: seguido de
dicha direccin de correo electrnico. 6l hacer clic sobre el enlace se abre el programa de correo
por de(ecto con un nue"o mensa!e en blanco dirigido a la direccin de correo especi(icada.
13ngase en cuenta que esta (#ncin slo (uncionar si tienes instalado un programa de correo
electrnico en tu ordenador. M4ru3baloN
&Hay m:s atributos +ue deber1a conocer)
4ara crear un enlace, siempre tienes que usar el atributo hre(. 6dems, tambi3n puedes poner un
ttulo $atributo title& al enlace:
Ejemplo 7:
<a hre(=>http://999.html.net/> title=>:isita 01+2.net y aprende 01+2>>01+2.net</a>
que se "er as en el na"egador:
01+2.net
El atributo title se usa para incluir una bre"e descripcin del enlace. *i se coloca el cursor sobre el
enlace @sin pulsarlo@ aparecer el te'to >:isita 01+2.net y aprende 01+2>.
Leccin B! Im:genes
$No ser6a +enial poder tener la ima+en del actor y leyenda musical avid &asselho,, en el
mism6simo centro de la p+ina)
Eso suena como un gran desaf1o...
?uede que s6G pero es !astante sencillo hacerlo. 'odo lo que necesitas es un nuevo elemento:
E4emplo !
<im# sc67da!id.8p#7 a"t679a!id7 />
que se visuali7ar as6 en el nave+ador:
Lo que hay que hacer es indicar al nave+ador que quieres insertar una ima+enG usando el
elemento im# yG lue+oG dnde est locali7ada por medio del atri!uto sc @a!reviatura de
JsourceJG es decirG ,uenteB. $Lo has pillado)
56Cate cmo el elemento im# se a!re y cierra usando la misma etiqueta. 0l i+ual que la
etiqueta <b />G no est relacionado con un pasaCe espec6,ico de te;to.
Jdavid.Cp+J es el nom!re del ,ichero de ima+en que quieres insertar en la p+ina. J.Cp+J es
el tipo de ,ichero de la ima+en. 0l i+ual que la e;tensin J.htmJ muestra que un ,ichero es
un documento &'(LG la e;tensin J.Cp+J indica al nave+ador que dicho ,ichero es una
ima+en. &ay tres clases di,erentes de tipos de ,ichero de ima+en que puedes insertar en tus
p+inas:
RI5 @Rraphics Interchan+e 5ormatB
T?R o T?.R @Toint ?hoto+raphic .;perts RroupB
?NR @?orta!le Net"orM RraphicsB
#ormalmente, las im:genes CID son me4ores para gr:ficos y dibu4os, mientras +ue las
im:genes E/EC son me4ores para fotograf1as. .sto es as6 por dos ra7ones1 la primera es
que las im+enes RI5 slo constan de #24 coloresG mientras que las im+enes T?.R
constan de millones de coloresG y la se+unda es que el ,ormato RI5 es meCor que el ,ormato
T?.R a la hora de comprimir im+enes sencillasG ya que ste >ltimo est optimi7ado para
im+enes ms compleCas. *uanto meCor sea la compresinG y ms peque9o el tama9o del
,ichero de ima+enG ms rpida se car+ar la p+ina. *omo sa!rs por e;periencia propiaG las
p+inas innecesariamente JpesadasJ pueden ser e;tremadamente irritantes para el usuario.
'radicionalmenteG los ,ormatos RI5 y T?.R han sido los dos tipos de ima+en dominantesG
pero >ltimamente el ,ormato ?NR ha +anado cada ve7 ms popularidad @principalmente a
e;pensas del ,ormato RI5B. El formato /#C contiene, en muc$os aspectos, lo me4or de
ambos formatos! millones de colores y una compresin efectiva.
&Fnde puedo conseguir mis im:genes)
?ara crear tus propias im+enesG necesitas un pro+rama de edicin de im+enes. @n
programa de edicin de im:genes es una de las $erramientas esenciales +ue
necesitar:s para crear bonitos sitios web..
?or des+raciaG Kindo"sG al i+ual que otros sistemas operativosG no incluye un !uen
pro+rama de edicin de im+enes. 0s6 puesG podr6as pensar en invertir al+o de dinero en
uno de estos pro+ramas: ?aint Ahop ?roG ?hotoshop o (acromedia 5ire"orMsG que son tres
de los meCores pro+ramas de edicin de im+enes del mercado en la actualidad.
Ain em!ar+oG como ya diCimos anteriormenteG no ser necesario comprar pro+ramas caros
para completar este tutorial. ?or ahoraG puedes descar+ar el e;celente pro+rama de edicin
de im+enes Ir,anLie" que es un pro+rama que se denomina J,ree"areJ yG por lo tantoG no
cuesta nada.
H !ien puedes tomar prestadas im+enes de otros sitios descar+ndolas. ?ero ten cuidado
de no in,rin+ir derechos de autor al descar+ar dichas im+enes. *on todoG es >til sa!er
cmo descar+ar las im+enesG as6 que aqu6 te mostramos cmo hacerlo:
,. &a7 clic con el !otn derecho so!re la ima+en que quieras descar+ar de internet.
-. .li+e JRuardar ima+en como...J del men> emer+ente.
.. .li+e la carpeta de tu ordenador donde quieres +uardar la ima+en y pulsa en
JRuardarJ.
&a7 esto con la ima+en de ms a!aCo y +urdala en tu ordenador en el mismo lu+ar que los
documentos &'(L. @H!serva que el lo+o se +uarda como un archivo ?NR: lo+o.pn+B:
0hora ya puedes insertar la ima+en en una de tus propias p+inas. ?ru!alo.
&Eso es todo lo +ue necesito saber sobre im:genes)
&ay unas cuantas cosas ms que de!er6as sa!er respecto a las im+enes.
.n primer lu+arG puedes insertar ,cilmente im+enes locali7adas en otras carpetasG o
incluso im+enes locali7adas en otros sitios "e!:
E4emplo ,!
<im# sc67ima#enes/"o#o.pn#7 />
E4emplo 5!
<im# sc67http://&&&.htm".net/"o#o.pn#7 />
.n se+undo lu+arG las im+enes se pueden usar como enlaces:
E4emplo 7!
<a hef67http://&&&.htm".net7> <im# sc67"o#o.pn#7 /></a>
que se visuali7ar as6 en el nave+ador @intenta hacer clic so!re la ima+enB:
&Hay m:s atributos +ue tenga +ue conocer)
Aiempre hay que usar el atri!uto scG que indica al nave+ador dnde est locali7ada la
ima+en. 0parte de steG hay otros atri!utos que pueden ser >tiles a la hora de insertar
im+enes.
.l atri!uto a"t se usa para o,recer una descripcin alternativa de la ima+en siG por al+una
ra7nG la misma no se puede mostrar al usuario. .sto es especialmente importante para las
personas con discapacidades visualesG o si la p+ina se car+a de manera muy lenta. ?or lo
tantoG usa siempre el atri!uto a"t:
E4emplo ;!
<im# sc67"o#o.#if7 a"t675o#o de (T%5.net7 />
0l+unos nave+adores muestran el te;to del atri!uto a"t como una peque9a caCa
desple+a!le cuando el usuario coloca el cursor encima de la ima+en. 'en en cuenta que el
o!Cetivo de usar el atri!uto a"t es proporcionar una descripcin alternativa de la ima+en. .l
atri!uto a"t no de!er6a usarse para crear mensaCes desple+a!les especiales diri+idos al
usuarioG ya queG en ese casoG las personas con discapacidades visuales oirn el mensaCe sin
sa!er cmo es la ima+en.
.l atri!uto tit"e se puede usar para a9adir in,ormacin a la ima+en:
E4emplo <!
<im# sc67"o#o.#if7 tit"e670pende (T%5 con (T%5.net7 />
que se ver de la si+uiente manera en el nave+ador:
Ai colocas el cursor so!re la ima+en Isin lle+ar a hacer clicI vers aparecer el te;to
J0prende &'(L con &'(L.netJ en ,orma de caCa desple+a!le.
Htros dos atri!utos importantes son &idth y hei#ht:
E4emplo >!
<im# sc67"o#o.pn#7 &idth671417 hei#ht67327 />
que se ver as6 en el nave+ador:
Los atri!utos &idth y hei#ht se pueden usar para esta!lecer la altura y la anchura de una
ima+en. .l valor usado para esta!lecer la altura y la anchura se e;presa en p6;eles. Los
p6;eles son unidades de medida utili7adas para medir la resolucin de la pantalla. @La
resolucin de pantalla ms ha!itual es 1=#/ ; 84: p6;elesB. 0 di,erencia de los centimetrosG
los p6;eles son unidades de medida relativas que dependen de la resolucin de la pantalla.
?ara un usuario con una resolucin de pantalla altaG #2 p6;eles pueden corresponder a 1
cent6metroG mientras que los mismos #2 p6;eles en una resolucin de pantalla !aCa pueden
corresponder a 1G2 cent6metros so!re la pantalla.
Ai no se esta!lece la anchura y la alturaG la ima+en se insertar con su tama9o real. Ain
em!ar+oG con la anchura y la altura se puede manipular el tama9o:
E4emplo ?!
<im# sc67"o#o.#if7 &idth67327 hei#ht67327 />
que se visuali7ar as6 en el nave+ador:
Ain em!ar+oG hay que tener en cuenta que el tama9o real en Milo!ytes de la ima+en se+uir
siendo el mismoG por lo que la ima+en tardar en car+arse el mismo tiempo que antesG
aunque apare7ca ms peque9a en la pantalla. ?or lo tantoG nunca deber1as disminuir el
tama9o de la imagen usando los atributos width y height. .n ve7 de hacer estoG
siempre de!er6as redimensionar las im+enes usando un pro+rama de edicin de im+enes
con el ,in de que las p+inas sean ms li+eras y rpidas de car+ar.
icho estoG si+ue siendo !uena idea usar los atri!utos &idth y hei#ht porqueG de este
modoG el nave+ador podr detectar cunto espacio necesitar la ima+en en la presentacin
,inal de la p+ina antes de que la ima+en se haya descar+ado totalmente. .sto permite que
el nave+ador compon+a correctamente la p+ina con mayor rapide7.
F con estoG de momentoG ya hemos tenido su,iciente respecto a avid &asselho,, y a las
im+enes.
Leccin G! Tablas
Las tablas se usan cuando necesitamos mostrar -datos en formato de tabla-G o seaG
in,ormacin que se presenta de ,orma l+ica en ,ilas y columnas.
&Es d1ficil)
*onstruir ta!las con &'(L puede parecerG al principioG complicadoG pero si no pierdes la
calma y andas con oCoG en realidad es de lo ms l+ico: como todo en &'(L.
E4emplo !
<tab"e>
<t>
<td>;e"da 1</td>
<td>;e"da 2</td>
</t>
<t>
<td>;e"da 3</td>
<td>;e"da 4</td>
</t>
</tab"e>
que se ver asi en el nave+ador:
*elda 1 *elda #
*elda - *elda /
&'u( diferencia $ay entre <tr> y <td>)
*omo o!servars en el eCemplo anteriorG ste es pro!a!lemente el eCemplo ms complicado
de cdi+o &'(L que hemos escrito hasta el momento. Lamos a des+losarlo y a e;plicar las
di,erentes etiquetas:
/ara insertar tablas se usan 5 elementos diferentes!
La etiqueta de inicio <tab"e> y la etiqueta de cierre </tab"e> inician y ,inali7an la
ta!la. L+ico.
<t> es la a!reviatura de Jta!le ro"J @es decirG ,ila de la ta!laB e inicia y ,inali7a las
,ilas hori7ontales. L+ico tam!in.
<td> es la a!reviatura de Jta!le dataJ @es decirG datos de la ta!laB. .sta etiqueta
inicia y ,inali7a cada una de las celdas que componen las ,ilas de la ta!la. 'odo
sencillo y l+ico.
F esto es lo que ocurre en el eCemplo 1: la ta!la empie7a con <tab"e>G se+uida de <t>G
que indica el inicio de una nueva ,ila. Ae insertan dos celdas en esta ,ila: <td>*elda 1</td>
y <td>*elda #</td>. La ,ila se cierra a continuacin con </t> e inmediatemente despus
se inicia una nueva ,ila con <t>. La nueva ,ila contiene dos celdas. F por ,in la ta!la se
cierra con </tab"e>.
Lamos a deCarlo claro: las filas son l1neas $orizontales de celdas y las columnas son
l1neas verticales de celdas:
*elda 1 *elda #
*elda - *elda /
La celda 1 y la *elda # ,orman una ,ilaG mientras que la *elda 1 y la *elda - ,orma una
columna.
.n el eCemplo anteriorG la ta!la consta de dos ,ilas y dos columnas. Ain em!ar+oG una ta!la
puede contener una cantidad ilimitada de ,ilas y columnas.
E4emplo ,!
<tab"e>
<t>
<td>;e"da 1</td>
<td>;e"da 2</td>
<td>;e"da 3</td>
<td>;e"da 4</td>
</t>
<t>
<td>;e"da 5</td>
<td>;e"da 6</td>
<td>;e"da <</td>
<td>;e"da =</td>
</t>
<t>
<td>;e"da ></td>
<td>;e"da 1?</td>
<td>;e"da 11</td>
<td>;e"da 12</td>
</t>
</tab"e>
que se visuali7ar as6 en el nave+ador:
*elda 1 *elda # *elda - *elda /
*elda 2 *elda 4 *elda 8 *elda :
*elda < *elda 1= *elda 11 *elda 1#
&E3iste alg6n atributo para el elemento table)
?or supuestoG hay atri!utos. ?or eCemploG el atri!uto bode se usa para especi,icar el
+rosor del !orde de la ta!la:
E4emplo 5!
<tab"e bode6717>
<t>
<td>;e"da 1</td>
<td>;e"da 2</td>
</t>
<t>
<td>;e"da 3</td>
<td>;e"da 4</td>
</t>
</tab"e>
%ue se ver as6 en el nave+ador:
*elda 1 *elda #
*elda - *elda /
.l +rosor de la ta!la se especi,ica en p6;eles @Lase leccin <B.
0l i+ual que con las im+enesG se puede esta!lecer el ancho de la ta!la en p6;elesG oG de
modo alternativoG por medio de un porcentaCe del ancho de la pantalla:
E4emplo 7!
<tab"e bode6717 &idth673?@7>
La ta!la del anterior eCemplo se mostrar en el nave+ador como una ta!la con un ancho
equivalente al -= U de la pantalla. ?ru!alo.
&Hay alg6n otro atributo)
?ara las ta!las e;isten muchos atri!utos. 0qu6 mostramos dos ms:
a"i#n: especi,ica la alineacin hori7ontal del contenido de toda la ta!laG de una ,ila
o de una sola celda. ?or eCemploG "eftG cente o i#ht.
!a"i#n: especi,ica la alineacin vertical del contenido de una celda. ?or eCemploG
topG midd"e o bottom.
E4emplo ;!
<td a"i#n67i#ht7 !a"i#n67top7>;e"da 1</td>
&'u( puedo insertar en las tablas)
.n teor6aG se puede colocar cualquier cosa dentro de una ta!la: te;toG enlacesG im+enesG ...
Ain embargo, las tablas se usan para presentar datos en forma de tabla @es decirG datos
que se pueden presentar de ,orma coherente en columnas y ,ilasBG as6 que evita colocar
cosas dentro de una ta!la porque quieras colocarlas una al lado de otra.
.n los vieCos tiempos de Internet Ies decirG hace unos a9osIG las ta!las se usa!an con
,recuencia como herramienta de presentacin. Ain em!ar+oG si quieres controlar la
presentacin de los te;tos y las im+enes e;iste un modo ms +uay de hacerlo @pista: *AAB.
?ero de eso ya trataremos ms adelante.
0horaG empie7a a poner en prctica lo que aca!as de aprender y dise9a varias ta!las de
di,erentes tama9osG con di,erentes atri!utos y contenido. .sto de!er6a de darte para unas
cuantas horas de tra!aCo.
Leccin ! ... y m:s tablas
.l t6tulo J... y ms ta!lasJ puede sonar al+o a!urrido. ?ero m6ralo por el lado !ueno1 cuando
domines las ta!lasG nada de nada en &'(L te podr deCar V.H.
Entonces, &+u( m:s +ueda por conocer)
Los atri!utos co"span y o&span se usan cuando queremos crear ta!las ela!oradas.
;o"span es la a!reviatura de Jcolumn spanJ @e;pandir columnaB. Colspan se usa con la
eti+ueta <td> para especificar cu:ntas columnas ocupar: la celda:
E4emplo !
<tab"e bode6717>
<t>
<td co"span6737>;e"da 1</td>
</t>
<t>
<td>;e"da 2</td>
<td>;e"da 3</td>
<td>;e"da 4</td>
</t>
</tab"e>
que se visuali7ar as6 en el nave+ador:
*elda 1
*elda # *elda - *elda /
0l esta!lecer el atri!uto co"span a J-JG la celda de la primera ,ila ocupa tres columnas. Ai
hu!isemos esta!lecido co"span a J#JG la celda slo ha!r6a ocupado dos columnas y ha!r6a
sido necesario insertar una celda adicional en la primera ,ila para que la cantidad de
columnas sea i+ual en las dos ,ilas.
E4emplo ,!
<tab"e bode6717>
<t>
<td co"span6727>;e"da 1</td>
<td>;e"da 2</td>
</t>
<t>
<td>;e"da 3</td>
<td>;e"da 4</td>
<td>;e"da 5</td>
</t>
</tab"e>
que se ver as6 en el nave+ador:
*elda 1 *elda #
*elda - *elda / *elda 2
&* el atributo rowspan)
*omo ya ha!rs adivinadoG rowspan especifica cu:ntas filas deber1a ocupar una celda:
E4emplo 5!
<tab"e bode6717>
<t>
<td o&span6737>;e"da 1</td>
<td>;e"da 2</td>
</t>
<t>
<td>;e"da 3</td>
</t>
<t>
<td>;e"da 4</td>
</t>
</tab"e>
que se ver as6 en el nave+ador:
*elda 1
*elda #
*elda -
*elda /
.n el eCemplo anterior el atri!uto o&span se esta!lece con el valor J-J en la *elda 1. .sto
especi,ica que la celda de!e e;pandirse a lo lar+o de tres ,ilas @o seaG ocupa la suya propia y
dos msB. La *elda 1 y la *elda # G por tantoG estn en la misma ,ilaG mientra que la *elda -
y la *elda / ,orman dos ,ilas independientes.
$*on,undido) BuenoG la verdad es que no es sencilloG y es ,cil perderse. ?or lo tantoG ser6a
una !uena idea di!uCar la ta!la so!re un tro7o de papel antes de empe7ar a escri!ir el
cdi+o &'(L.
$%ue no estas con,uso) ?ues si+ue adelante y crea un par de ta!las t> solo usando los
atri!utos co"span y o&span.
Leccin ,! /resentacin H8AAI
$No ser6a +enial poder dar a tus p+inas la presentacin que se merecen)
/ues claro +ue s1J pero... &cmo)
/ara la presentacin de tu sitio web usa 8ascading Atyle A$eets H8AAI, es decir, $o4as
de estilo en cascada.. .n esta leccin te presentaremos una !reve introduccin a *AA. Ain
em!ar+oG ms adelanteG podrs aprender todo lo relacionado con *AAG desde ceroG en
nuestro 'utorial so!re *AA. 0s6 puesG considera esta leccin como un peque9o aperitivo.
*AA se puede considerar la media naranCa de &'(L. F a la hora de escri!ir cdi+oG no hay
punto de comparacin en cuanto a su situacin: HTML se encarga del contenido en bruto
de la p:gina Hla estructuraI, mientras +ue 8AA le proporciona ese to+ue elegante Hla
presentacinI.
*omo vimos en la Leccin 8G se pueden a9adir estilos con 8AA recurriendo al atributo
style. ?or eCemploG por medio de dicho atri!uto se puede esta!lecer el tama9o y tipo de
,uente de un prra,o:
E4emplo !
<p style="font-size:20px;">E" tama/o de este p.afo es de 2?
p,xe"es</p>
<p style="font-family:corier;">E" tipo de "eta usado en este
p.afo es ;ouie</p>
<p style="font-size:20px; font-family:corier;">Este p.afo
combina tipo de "eta
;ouie con un tama/o de 2? p,xe"es</p>
y se ver as6 en el nave+ador:
.l tama9o de este prra,o es de #= p6;eles
El tipo de letra usado en este prrafo es Courier
Este prrafo combina tipo de letra Courier con un
tamao de 20 pxeles
.n el eCemplo anterior hemos usado el atri!uto st$"e para especi,icar el tipo de ,uente que
vamos a usar @por medio de la propiedad fontAfami"$B y el tama9o de la ,uente @por
medio de la propiedad fontAsizeB. H!serva cmo en el >ltimo prra,o esta!lecemos tanto
el tipo de ,uente como el tama9o separando am!as propiedades con un punto y coma.
&* no parece un traba4o $erc6leo)
@na de la caracter1sticas -elegantes- de 8AA es la posibilidad de gestionar la
presentacin de manera centralizada.. .n ve7 de usar el atri!uto st$"e en cada etiqueta
de inicioG se puede indicar al nave+adorG de una sola ve7G cmo tiene que presentar el te;to
en la p+ina:
E4emplo ,!
<htm">
<head>
<tit"e>%i pimea p.#ina con esti"os ;44</tit"e>
<style type="text"css">
h# $font-size: %0px; font-family: arial;&
h2 $font-size: #'px; font-family: corier;&
p $font-size: (px; font-family: "times new
roman";&
<"style>
</head>
<bod$>
<h1>%i pimea p.#ina con esti"os ;44</h1>
<h2>Bien!enidos a mi pimea p.#ina con esti"os
;44</h2>
<p>0-u, podis !e cCmo funciona ;44</p>
</bod$>
</htm">
Ler eCemplo
.n el eCemplo anteriorG el cdigo 8AA se $a insertado en la seccin de encabezado
HheadI, aplic:ndose, por tanto, a toda la p:gina.. ?ara hacer estoG utili7a la etiqueta
st$"e a9adindole el atri!uto t$pe y como valor de ste text/cssG es decir: <st$"e
t$pe67text/css7>G con lo que le estamos indicando al nave+ador que lo que estamos
escri!iendo es cdi+o *AA.
.n el eCemplo todos los enca!e7ados de nivel 1 aparecern con letra de tipo 0rial y tama9o
de -= p6;eles1 todos los enca!e7ados de nivel # se mostrarn con tipo de letra *ourier y
tama9o de 12 p6;eles1 y el te;to de un prra,o normal usar el tipo de letra 'imes Ne"
3oman con tama9o de : p6;eles.
Htra opcin es crear el cdi+o *AA en un documento independiente. 8on un documento
8AA independiente se puede gestionar la presentacin de muc$as p:ginas a la misma
vez.. .sta opcin es muy inteli+ente si se quiere cam!iar el tipo de ,uente o el tama9o a un
sitio "e! con cientos o miles de p+inas. 0hora no pro,undi7aremos en este aspectoG pero
lo puedes aprender ms tarde en nuestro tutorial so!re *AA.
&'u( m:s puedo $acer con 8AA)
*AA se puede usar para muchas ms cosas que especi,icar tipos y tama9os de ,uente. ?or
eCemploG se puede a9adir colores y ,ondos. 0qu6 te presentamos al+unos eCemplos para que
e;perimentes con ellos:
<p style="color:green;">Texto de co"o !ede</p>
<h1 style="bac)grond-color: ble;">Encabezado de ni!e" 1 con
fondo azu"</h1>
<bod$ style="bac)grond-image: rl
*+http:""www,html,net"logo,png+-;">
?rue!a a insertar los eCemplos anteriores en al+una de tus p+inasG tal como aparecen
anteriormente y !ien como cdi+o *AA insertado en la seccin head del documento.
&8AA slo trata de colores y tipos de fuente)
0parte de a9adir presentacin relativa a coloresG tipos de ,uenteG etc.G 8AA tambi(n se
puede usar para controlar la configuracin de la p:gina y la presentacin de la misma
@mr+enesG elementos ,lotantesG alineacinG anchuraG alturaG etc.B. 0l esta!lecer los
di,erentes elementos con *AA podrs presentar tus p+inas de ,orma ele+ante y precisa.
E4emplo 5!
<p style="padding:2'px;border:#px solid red;">%e encanta ;44</p>
que se visuali7ar as6 en el nave+ador:
(e encanta *AA
*on la propiedad f"oat se puede hacer ,lotar un elemento !ien a la derecha o a la
i7quierda. .l si+uiente eCemplo muestra este principio:
E4emplo 7!
<im# sc67bi"".8p#7 a"t67Bi"" Dates7 style= "float:left;" />
<p>5oem ipsum do"o sit amet* consectetue adipiscin# e"it*
sed diam nonumm$ nibh euismod tincidunt ut "aoeet do"oe
ma#na a"i-uam
eat !o"utpat. 1t &isi enim ad minim !eniam* -uis nostud
execitation
u""amcope suscipit "obotis nis" ut a"i-uip ex ea
commodo conse-uat...</p>
que se ver as6 en el nave+ador:
Lorem ipsum dolor sit ametG consectetuer adipiscin+ elitG sed diam nonummy ni!h euismod
tincidunt ut laoreet dolore ma+na aliquam erat volutpat. Et "isi enim ad minim veniamG
quis nostrud e;erci tation ullamcorper suscipit lo!ortis nisl ut aliquip e; ea commodo
consequat...
.n este eCemplo un elemento @la ima+enB ,lota a la i7quierda y el otro elemento @el te;toB
rellena el hueco.
*on la propiedad position se puede colocar un elemento en el lu+ar preciso que se quiera
de la p+ina:
E4emplo ;!
<im# sc67bi"".8p#7 a"t67Bi"" Dates7
style="position:absolte;bottom:'0px;right:#0px;" />
Ler eCemplo
.n el eCemplo anterior la ima+en se coloca a 2= p6;eles del !orde in,erior y a 1= p6;eles del
!orde derecho del nave+ador. ?ero se puede colocar e;actamente donde se quiera.
?ru!alo. (uy ,cil y llamativoG $verdad)
LLamativo, s1. /ero... &f:cil)
#o se aprende 8AA en diez minutos. F como mencion!amos antesG esta leccin slo
prentede ser una !reve introduccin a *AA. (s adelante aprenders mucho ms en nuestro
'utorial so!re *AA.
e momentoG concntrate en &'(LG y pasa a la si+uiente leccin donde aprenders cmo
pu!licar tu sitio "e! en Internet para que todo el mundo pueda admirarlo.
Leccin 5! Aube tus p:ginas a Internet
0asta ahora, slo t# has tenido la satis(accin de "er tus pginas. Este es el momento de que el
resto del mundo pueda "er tu obra maestra.
&Est: el mundo preparado para eso)
El mundo lo est... y t# tambi3n lo estars bien pronto. 4ara que tu sitio 9eb (orme parte de
5nternet slo necesitas espacio en un ser"idor y un programa 14 gratuito..
*i tienes acceso a 5nternet, podra ser que ya tu"ieras espacio en alg#n ser"idor gratuito para tu
sitio 9eb. *i es as, el espacio en el ser"idor se llamar algo as:
http://home.pro"ider.com/Ousernumber. 4ero antes de nada es probable que tu"ieras que
acti"arlo. *igue leyendo sobre esto en la in(ormacin que te haya proporcionado tu ser"idor de
5nternet o en sus pginas de asistencia al cliente.
Htra opcin es conseguir espacio en alg#n ser"idor gratuito de 5nternet. Gel mismo modo que
puedes crear una cuenta de correo electrnico $por e!emplo, en 0otmail&, te puedes registrar para
conseguir espacio en un ser"idor gratuito de 5nternet. *on "arias las compa;as que o(recen este
ser"icio, entre ellas BBB9ebhost.com $hac clic en >Hrder> $>/egistrarse>& y elige >(ree
membership> $>*ocio gratuito>&7 no tardars ms de un par de minutos en registrarte.
4ara acceder al ser"idor es necesario saber el nombre del ser"idor $>0ost 8ame>, por e!emplo,
(tp.htmlnet.sitePB.net& y tener a mano tu nombre de usuario $>username>& y contrase;a
$>pass9ord>&.
&Es eso todo lo +ue necesito)
4ara acceder al ser"idor y subir las pginas tambi3n necesitars un programa 14. 14 es la
abre"iatura de ile 1rans(er 4rotocol $protocolo de trans(erencia de archi"os&. El programa 14 se
usa para conectar dos ordenadores en 5nternet, de modo que puedas trans(erir (icheros desde tu
ordenador a otro ordenador $en nuestro caso, el ser"idor&. 4uede que a#n no tengas este tipo de
programa, pero, por suerte, algunos de ellos se pueden descargar de (orma gratuita.
E'isten muchos programas 14 di(erentes. Ino de los me!ores es ileQilla, que es totalmente
gratuito. 6s que ya puedes ir descargndote ileQilla de la pgina (ilezilla.source(orge.net.
&* cmo subo las p:ginas)
+s aba!o describimos cmo subir tus pginas con ileQilla a una cuenta gratuita en
BBB9ebhost.com. 4ero el procedimiento es igual, poco ms o menos, para todos los pro"eedores
y programas (tp.
6bre el programa 14 cuando est3s conectado a 5nternet. 5nserta >8ombre del ser"idor> $>0ost
8ame>, >(tp.htmlnet.sitePB.net>& en el campo >Gireccin> $>6ddress>&, >nombre de usuario> $en el
campo >Iser>& y >contrase;a> $en el campo >4ass9ord>& y haz clic en ><onectar> $><onnect>&.
6hora mismo ya deberas tener acceso al ser"idor. En un lado del programa puedes "er los
contenidos de tu ordenador $>2ocal *ite> o >sitio local>&, y en el otro lado puedes "er el contenido
del ser"idor $>/emote *ite> o >sitio remoto>&:
2ocaliza los documentos 01+2 y las imgenes en tu ordenador $en >2ocal *ite>& y trans(i3relos al
ser"idor $en >/emote *ite>& haciendo doble clic sobre ellos. M6hora ya puede "erlos todo el
mundoN $4or e!emplo, en la direccin http://htmlnet.sitePB.net/pagina,.htm&.
Gale a una de las pginas el nombre >inde'.htm> $o >inde'.html>& y de (orma automtica se
con"ertir en la pgina de inicio. Es decir, si escribes http://htmlnet.sitePB.net $sin ning#n nombre
de (ichero& la pgina que abrirs realmente ser http://htmlnet.sitePB.net/inde'.htm.
6 la larga, podra ser una buena idea comprar tu propio dominio $por e!emplo, 999.tu@
nombre.com o 999.tu@nombre.net& y e"itar las largas y complicadas direcciones que te asignar
tu pro"eedor de 5nternet o los pro"eedores de ser"idores de espacio gratuito. 4uedes encontrar y
comprar dominios, por e!emplo, en las direcciones *peednames o 8et9or?*olutions.
Leccin 7! Est:ndares web y validacin
En esta leccin, adquirirs nociones algo ms tericos sobre 01+2.
&'u( m:s $ay +ue saber sobre HTML)
01+2 se puede codi(icar de muchas maneras di(erentes. ) los na"egadores pueden interpretar
01+2 de todas esas mismas maneras. *e podra decir que 01+2 tiene muchos dialectos. Esta es la
razn de que algunos sitios 9eb se "isualizan de (orma di(erente en na"egadores di(erentes.
4or parte del Consorcio del World Wide Web (W3C), (undado por 1im Derners@2ee $Ms, ese gran
tipo que in"ent 01+2N&, se han producido intentos para crear un estndar com#n de 01+2. 4ero
3ste ha sido un camino largo y di(cil.
En los "ie!os tiempos, cuando para tener un na"egador haba que pagarlo, 8etscape era el
na"egador dominante. 4or aquel entonces, el estndar 01+2 con mayor soporte eran la "ersin
-.B y, ms tarde, la "ersin ..-. *in embargo, con una cuota de mercado de ms del EBR, 8etscape
no tena por qu3 preocuparse, ni se preocupaba, de seguir unos estndares comunes. 1odo lo
contrario, 8etscape in"ent sus propios elementos e'tra;os, que no (uncionaban en otros
na"egadores.
Gurante muchos a;os +icroso(t de! de lado 5nternet casi por completo. 4asado un tiempo,
reanud la competencia con 8etscape y present un na"egador. 2as primeras "ersiones del
na"egador de +icroso(t, el 5nternet E'plorer, no eran muchos me!ores que las de 8etscape a la
hora de soportar los estndares 01+2. 4ero +icroso(t se decant por o(recer su na"egador de
(orma gratuita $algo siempre muy popular& e 5nternet E'plorer pronto pas a ser el na"egador ms
popular.
6 partir de las "ersiones S y P de 5nternet E'plorer, +icroso(t se propuso soportar cada "ez ms los
estndares del T.<. 8etscape, por su parte, no consigui desarrollar un nue"a "ersin de su
na"egador y sigui distribuyendo la des(asada "ersin S.
El resto es historia. 0oy da los estndares 01+2 son la "ersin S.B, y C01+2. 6hora es 5nternet
E'plorer el que acapara ms del EBR de cuota de mercado7 sigue teniendo sus propios elementos
e'tra;os, pero tambi3n soporta los estndares 01+2 del T.<. 6l igual que lo hacen los dems
na"egadores, como, por e!emplo, +ozilla, Hpera and 8etscape.
6s pues, cuando se escribe cdigo 01+2 con(orme con los estndares del T.<, creamos sitios
9eb que se pueden "er en todos los na"egadores... tanto en los actuales como en los (uturos. ),
por suerte, lo que has aprendido en este tutorial es una nue"a "ersin ms estricta y limpia de
01+2 llamada C01+2.
&8mo indico +u( versin uso)
1eniendo en cuenta los di(erentes tipos de dialectos 01+2 e'istentes, es necesario indicar al
na"egador qu3 >dialecto> utiliza tu cdigo 01+2, en este caso C01+2. 4ara hacer esto, usa una
G1G $>Gocument 1ype Geclaration>, declaracin de tipo de documento& que debe aparecer
siempre al inicio del documento:
E!emplo ,:
<NGH<1)4E html 4ID25< >@//T.<//G1G C01+2 ,.B *trict//E8>
>http://999.9..org/1//'html,/G1G/'html,@strict.dtd>>
<html 'mlns=>http://999.9..org/,EEE/'html> lang=>en>>
<head>
<title>1tulo</title>
</head>
<body>
<p>te'to, te'to</p>
</body>
</html>
6parte del G1G $la primera lnea del e!emplo anterior&, que indica al na"egador que "as a usar
cdigo escrito en C01+2, tambi3n es necesario insertar in(ormacin adicional en la etiqueta html
por medio de los atributos 'mlns y lang.
'mlns is la abre"iatura de >C+2@8ame@*pace> $espacio de nombre C+2& y siempre debera tener el
"alor http://999.9..org/,EEE/'html. Eso es todo lo que necesitas saber respecto al atributo
'mlns7 pero si lo que tienes es una sed desmesurada de conocimientos sobre temas complicados,
te in"itamos a que sigas leyendo sobre espacios de nombre en el sitio 9eb del T.<.
<on el atributo lang se especi(ica en qu3 idioma se ha escrito el documento. 4ara esto se usa el
estndar 5*H F.E, que presenta un listado de cdigos de todos los idiomas del mundo. En el
e!emplo anterior el idioma usado es el ingl3s $>en>&.
<on la G1G, el na"egador sabe con e'actitud cmo interpretar y mostrar el cdigo 01+2. 6s pues,
usa el e!emplo anterior como plantilla para todos los documentos (uturos que "ayas a crear.
2a G1G tambi3n es importante a la hora de "alidar tus pginas 9eb.
&2alidar) &/or +u( y cmo deber1a $acer eso)
6l insertar la G1G en tus pginas siempre podrs comprobar el cdigo 01+2 para re"isar posibles
errores usando el "alidador gratuito del T.<.
4ara probarlo, crea una pgina y s#bela a 5nternet. 6hora abre la pgina del "alidator.9..org y
escibe la direccin $el I/2& de tu pgina y "aldala. *i el cdigo 01+2 es correcto recibirs un
mensa!e de enhorabuena7 si no, recibirs un in(orme de errores que te indicar qu3 error se ha
producido y dnde se localiza el mismo. <omete alg#n error que otro a propsito para "er qu3
ocurre.
El "alidador no es slo #til para localizar errores. 6lgunos na"egadores intentan compensar la (alta
de destreza entre los desarrolladores 9eb solucionando errores en el cdigo 01+2 y mostrando
las pginas como suponen que deberan "isualizarse. <on este tipo de na"egadores, podra ser que
nunca llegaras a "er un error en tu propio na"egador. *in embargo, otros na"egadores podran
intentar mostrarlas de (orma di(erente o no mostrarlas en absoluto. El "alidador puede ser"irte de
gran ayuda para encontrar errores que ni siquiera sabas que e'istan.
:alida siempre tus pginas para asegurarte de que se mostrarn de (orma correcta.
Leccin ;! Kltimos conse4os
.nhora!uenaG ya has lle+ado a la >ltima leccin.
* a$ora, &ya s( todo lo +ue $ay +ue saber)
&as aprendido muchoG y ya eres capa7 de crear tus propios sitios "e!! Ain em!ar+oG lo que
has aprendido son los principios !sicos y a>n te queda mucho para dominar &'(L. sin
em!ar+oG ya tienes una !uena !ase a partir de la cual puedes se+uir avan7ando.
.n esta >ltima leccin te vamos a proporcionar al+unos conseCos de >ltima hora:
.n primer lu+arG es una !uena idea mantener un cierto orden y estructura en tus
documentos &'(L. 0l pu!licar documentos !ien estructurados no slo mostrars a
los dems tu dominio de &'(LG sino queG ademsG te ser considera!lemente ms
,acil tener una visin de conCunto.
*69ete a los estndares y valida tus p+inas. .sto hay que su!rayarlo una y otra ve71
escri!e siempre N&'(L claroG usa la ' adecuada y valida tus p+inas en
validator."-c.or+.
Llena tus p+inas de contenido. 3ecuerda que &'(L es una herramienta que
permite presentar in,ormacin en InternetG as6 que ase+>rate de presentar dicha
in,ormacin. Las p+inas !onitas pueden parecer a+rada!lesG pero la mayor parte de
la +ente usa Internet para !uscar in,ormacin.
.vita so!recar+ar tus p+inas con im+enes pesadas y otras cosas divertidas que
hayas podido encontrar en InternetG ya que el tiempo de car+a de la p+ina aumenta
y esto podr6a con,undir a los visitantes. ?or eCemploG las p+inas que tardan ms de
#= se+undos en car+arse pueden lle+ar a perder hasta un 2= U de sus visitantes.
3ecuerda a9adir tu sitio "e! a directorios y motores de !>squeda de modo que la
+enteG en +eneralG y no slo tus ,amiliaresG pueda encontarla y dis,rutar de ella. .n la
p+ina principal de todos los motores de !>squeda encontrars un enlace para a9adir
nuevas p+inas @el ms importante es Roo+leG pero tam!in e;isten otros como
(HWG FahooG 0ltaListaG 0lltheKe! y LycosB.
.n este tutorial has aprendido a usar el Bloc de notasG que es un editor sencillo y
muy ,cil de usarG pero a lo meCor te puede ser de ayuda usar un editor ms
avan7ado que proporcione una meCor visin de conCunto y ms posi!ilidades.
?uedes encontrar un resumen de di,erentes editores y revisiones de los mismos en
o"nload.com.
&8mo puedo aprender m:s)
.n primer lu+arG es importante que si+as tra!aCando y e;perimentando con lo que has
aprendido en este tutorial. .studia los sitios "e! de otros y si encuentras al+o que te +usteG
mira cmo se hi7o haciendo clic en JLerJ de la !arra de men>s del nave+ador y pincha en
JLer cdi+o ,uenteJ.
Nave+a por Internet y !usca eCemplos y art6culos so!re &'(L. &ay muchos sitios "e! con
contenido e;traordinario so!re &'(L.
Lee y responde las pre+untas en el 5orums. 0qu6 encontrars verdaderos e;pertosG de los
cuales aprenderas mucho.
?or >ltimoG pero no menos importanteG de!er6as se+uir aprendiendo *AA con nuestro
'utorias *AA... cuando ests dispuesto.
Lo >nico que nos queda es desearte horas de diversin sin ,in con tu nuevo ami+oG &'(L.
Nos vemos en Internet. :IB