El HTML Hecho Realmente Fcil

Ir a la Tabla de Contenido Ir a Otros Tutoriales

El HTML es muy fcil de usar; fue diseado en este sentido. No tienes que ser un
ro!ramador ara usarlo. "i uedes editar un arc#i$o de te%to& entonces uedes escribir
HTML 'y si uedes escribir un email& uedes editar un arc#i$o de te%to(. "i #as tratado
de arender antes y no udiste& entonces al!uien no te di)o las cosas correctas.
Este tutorial e%licar la estructura del HTML clara y ridamente& y te ensear a
tra$*s de e)emlos las cosas rcticas que debes saber de tal manera que estars
#aciendo tus roias !inas muy pronto 'como #oy en la tarde(. Todo el tutorial
comrende al rededor de +, !inas imresas& ero solamente necesitas las rimeras
cuatro o al!o as- ara oder comen.ar.
En este tutorial& crears equeas !inas y las $ers. No e%isten e)ercicios
/requeridos/& ero deber-as )u!ar con los nue$os concetos #asta que te sientas a !usto
con ellos. "i tu na$e!ador soorta marcos 'frames( e)ecuta esta Cama de 0rueba HTML
'$ersi1n sin marcos(& donde uedes escribir HTML en un marco y $er el resultado en
otro. 2)usta los marcos de entrada y salida ara una me)or $ista.
"i tu na$e!ador no soorta marcos o si ests #aciendo !inas reales& querrs usar un
editor de te%to real. 2rranca el Teac#Te%t en la Mac& pico en 3ni%& o Notead en
4indo5s& o uno me)or si lo tienes 'aqu- est el 6irectorio de editores de te%to de
7a#oo(. 2cu*rdate de escribir la e%tensi1n /.#tml/ 'o /.#tm/( a tus arc#i$os HTML. 3sa
tu na$e!ador ara $er los arc#i$os HTML que $ayas creando con el men8
/2rc#i$o92brir/ o al!o similar; usa la funci1n /:ecar!ar/ ':eload( desu*s de cada
cambio.
O;& <Listo=
Lee estas secciones ara que ten!as una base s1lida en HTML 'ni!una es mayor a una
!ina& incluyendo e)emlos(>
<?u* es HTML=
2natom-a de una !ina 4eb
2natom-a de una Etiqueta de HTML
Etiquetas Contenedoras 'incluyendo la arte interesante(
Ms "obre Li!as
o Li!as con Im!enes
o Li!as de Email
o Li!ando a la mitad de una !ina
2natom-a de un arc#i$o HTML
"altos de L-nea y Esacios en @lanco
3nas Cuantas Etiquetas Atiles Ms
Lee los que te interesen de los si!uientes 'a8n ms cortos(>
Listas Numeradas o con Bietas
Comentarios
Tablas
Cormas
Color
Marcos
Caracteres Eseciales Como /D/ y /E/
Lee los si!uientes cuando te sientas a !usto #aciendo !inas simles>
3na Nota imortante sobre HTML
Tis ara #acer Me)ores 0!inas 4eb
7 finalmente& el final de la !ina tiene al!unas li!as 8tiles.
Qu es HTML?
2unque HTML si!nifica Lenguaje de Marcas de HiperTexto& no es en realidad un
len!ua)e de ro!ramaci1n como Fa$a& 0erl& C& o @2"IC; es muc#o ms simle. Es una
manera de describir c1mo un con)unto de te%to e im!enes deben desle!arse en el
na$e!ador& similar en conceto a las marcas que #ace un editor de eri1dico.
6e :e!reso a la Tabla de Contenido
natom!a de una "gina #e$
3na !ina 4eb consiste de un arc#i$o HTML mas los arc#i$os de im!en usados en la
!ina. El arc#i$o HTML 'un arc#i$o de te%to com8n( contiene todo el te%to a
desle!ar& y tambi*n act8a como el e!amento ara sostener el te%to e im!enes )untas
en los lu!ares correctos& y los deslie!a en el estilo correcto.
Escribir un arc#i$o HTML si!nifica comoner el te%to que quieres desle!ar& entonces
insertar las eti%uetas que quieras en los lu!ares correctos. Las etiquetas comien.an con
un caracter & y terminan con un caracter '& y le dicen al na$e!ador que #a!a al!o
esecial como mostrar te%to en itlicas o negritas& o en una fuente ms !rande& o
mostrar una im!en& o #acer una li!a a otra !ina 4eb. 2unque el HTML tiene
muc#as etiquetas que uedes usar& no necesitas saberlas todas ara usar HTML GG
uedes arre!lrtelas con unas cuantas.
2l!o e%celente sobre el arendi.a)e del HTML es que uedes $er c1mo otros lo #an
#ec#o re$isando su c1di!o fuente. 0uedes $er el c1di!o fuente de cualquier !ina que
est*s $isitando. 0ru*balo a#ora. En Netscae& usa el men8 /Ber9Cuente del 6ocumento/
'Bie596ocument "ource(. Otros na$e!adores !rficos tienen un men8 similar& tal $e.
ba)o /Cile/ o /Edit/. En Lyn%& la dia!onal in$ertida alterna entre $er o no $er el c1di!o
fuente.
:e$isa muc#os c1di!os fuente& $e el c1di!o de cualquier !ina que te #a!a re!untarte
c1mo #icieron al!o. Todos los que usan HTML #an arendido leyendo el c1di!o de
otras ersonas. Internet es una !ran comunidad de mutuo arendi.a)e.
No necesitas un /Editor HTML/ ara escribir HTML. 2l!unas ersonas les !usta
usarlos y est bien& ero muc#os rofesionales y no$atos refieren usar un simle editor
de te%to e insertar las etiquetas or s- mismos como lo estamos #aciendo nosotros.
Como cada quien refiera.
6e :e!reso a la Tabla de Contenido
natom!a de una Eti%ueta de HTML
Las etiquetas tienen una estructura simle. Comien.an con un caracter && y terminan
con un caracter '. Entre los caracteres &' est el nom$re de la eti%ueta& y qui.
al!unos atri$utos deendiendo de la etiqueta. La mayor-a de los atributos toman un
(alor tambi*n. 2l!unos atributos son requeridos& al!unos son ocionales. La forma
!eneral de una etiqueta es
<nombre_de_la_etiqueta atributo1="valor1" atributo2="valor2" ... >
Los nombres de etiqueta y de atributos no son de caso sensiti$o& ero al!unos atributos
y $alores s- lo son. El nombre de la etiqueta debe ir rimero& ero el orden de los
atributos no imorta. 6e esta manera& uedes escribir esta etiqueta como>
<NOMBRE_DE_L_E!"#$E! !R"B$!O2="valor2" !R"B$!O1="valor1" ... >
6iferente !ente escribe en formas diferentes; #.lo como te !uste ms.
E%isten muc#as etiquetas diferentes ara #acer muc#as cosas diferentes. 0or e)emlo&
usa la etiqueta &img' ara mostrar una im!en en tu !ina 4eb>
<im% &r'="blueribbon.%i(">
se $e como
Esto si!nifica /muestra la im!en blueribbon.!if en este lu!ar de la !ina./ Nota que el
atributo src roorciona el 3:L del arc#i$o de im!en& ya sea un 3:L relati$o o
absoluto. El e)emlo anterior usando un 3:L absoluto ser-a>
<im% &r'=")tt*+,,---..mar&)all.'om,ea&/,)tml,&*ani&),blueribbon.%i(">
6e :e!reso a la Tabla de Contenido
Eti%uetas )ontenedoras
2l!unas etiquetas& como &img'& se bastan a s- mismas; no afectan a otras cosas al
rededor. Otras etiquetas tienen una etiqueta de inicio y una de final& y afectan a todo lo
que se encuentre entre los dos 'a8n a otras etiquetas(. Estas son llamadas contenedoras&
orque contienen cosas entre las etiquetas de inicio y final. 0or e)emlo& ara #acer
te%to en negrita& necesitas marcar en d1nde comien.an las ne!ritas y en d1nde re!resa
al te%to normal. Ha. *sto con &$' y &*$'& como>
E&te e& te0to normal. <b>E&te e& te0to en ne%rita.<,b> Normal otra
ve1.
"e $e como>
Este es te%to normal. Este es texto en negrita+ Normal otra $e..
Todo contenedor termina con &*nom$re,de,la,eti%ueta'& cualquiera que el nombre
sea. En el e)emlo anterior& la etiqueta 'ne!rita( &$' termina con &*$'. 2 diferencia de
los inicios& las etiquetas finales no tienen atributos
%u! est la parte interesante-
La etiqueta que #ace del 4eb lo que es& un suercon)unto de !inas li!adas& es la
etiqueta &a'. La etiqueta &a' es un contenedor que define una li!a #acia otra !ina y
es fcil de usar. Como e)emlo& aqu- es c1mo #ar-as una li!a a la !ina rincial de
Netscae>
"r a <a )re(=")tt*+,,)ome.net&'a*e.'om,">la *2%ina *rin'i*al de
Net&'a*e<,a>.
?ue se $e como>
Ir a la !ina rincial de Netscae.
Nota que e%iste una etiqueta de inicio '<a )re(=")tt*+,,)ome.net&'a*e.'om">( y
una de final '<,a>(& y todo lo que est* entre ellas '/la !ina rincial de Netscae/( se
$isuali.a como una li!a en la que el usuario uede #acer clicHGG t-icamente en a.ul y
subrayada en Netscae.
Nota que el atributo href tiene el $alor ")tt*+,,)ome.net&'a*e.'om"& que es el 3:L
'direcci1n de una !ina 4eb( a donde ir cuando el usuario #a!a clicH en la li!a. 0ara
ms informaci1n y ayuda con los 3:L en HTT0& dir-!ete a una de estas !inas.
2s- es como se debe usar la etiqueta &a' ara oner li!as a una !ina 4eb. "imle&
<no=
6e :e!reso a la Tabla de Contenido
Ms .o$re Ligas
Ligas con /mgenes
0uedes oner una &img' entre &a' y &*a'& de tal manera que el usuario uede #acer
clicH en la im!en ara se!uir la li!a. 0or e)emlo& obser$a el list1n a.ul al rinciio de
la !inaGG es la li!a a otra !ina 'una que todo el mundo deber-a $isitar al menos una
$e.(.
Ligas de )orreo Electr0nico
0ara oner una li!a de correo electr1nico& dale a href el $alor /mailto+dire''i3n4
de4'orreo/. 0or e)emlo&
Dile <a )re(="mailto+*re&ident5-)ite)ou&e.%ov">al 6re&idente<,a> lo
que *ien&a&.
se $e como
6ile al 0residente lo que iensas.
'El 0residente de E.3.& or suuesto.(
Ligando a la mitad de una pgina
0ara li!ar #acia otra arte de la misma !ina& o a la mitad de otra& rimero crea un
nombre de ancla en el unto que quieres li!ar. Ha. *sto con la etiqueta &a' y el atributo
name como
<a name="nombre_de_an'la"><,a>
Nota el uso diferente de la etiqueta &a'; de #ec#o& &a' fue ori!inalmente una
contracci1n de /ancla/. Como el ancla solamente marca un unto en la !ina& no
necesitas oner nada entre &a' y &*a'.
3na $e. que el ancla e%iste en el lu!ar de destino& l-!alo con la etiqueta &a hre1'&
a!re!ando /InombreJdeJancla/ 'el fragmento 3:L( al 3:L de destino& como
Lee &obre <a
)re(=")tt*+,,---..mar&)all.'om,ea&/,)tml,&*ani&),7li&t&">li&ta&
8!ML<,a>.
que se $e como
Lee sobre listas HTML.
0ara auntar a otra arte en la misma !ina& omite comletamente el resto del 3:L.
0or e)emlo&
<a )re(="7to'">De Re%re&o a la !abla de 9ontenido<,a>
se $e como
6e :e!reso a la Tabla de Contenido
natom!a de un archi(o HTML
2#ora que entiendes lo que son las etiquetas y las contenedoras& aqu- est c1mo #acer
un arc#i$o HTML correctamente> identifica tu arc#i$o como un arc#i$o HTML
encerrndolo todo entre las contenedoras &html'GG& en otras alabras& coloca una
etiqueta &html' de inicio al rinciio de tu arc#i$o y una etiqueta &*html' de
finali.aci1n al final.
T*cnicamente& la etiqueta &html' uede contener s1lo dos cosas> una contenedora
&head'& y una contenedora &$od2'. 6entro de la etiqueta &$od2' es donde se one
toda la !ina. Todo el te%to& im!enes& #ierli!as y dems cosas desle!adas son
contenidas entre la etiqueta &$od2' y la &*$od2'.
La secci1n ocional &head'& colocada antes de la secci1n &$od2'& te ermite
almacenar cierta informaci1n sobre el documento en s-. 28n cuando la secci1n &head'
e%ista& uede contener solamente la contenedora &title'& la cual dice qu* es lo que #ay
que desle!ar en el t-tulo de la $entana del na$e!ador& sobre la barra de men8s 'si tienes
un na$e!ador !rfico(. 0or e)emlo& esta !ina tiene el t-tulo de /El HTML Hec#o
:ealmente Ccil/.
2s-& un simle arc#i$o HTML /#ola& mundo/& con t-tulo& ser-a
<)tml>
<)ead>
<title>8ola: mundo<,title>
<,)ead>
<bod/>
8ola: mundo.
<,bod/>
<,)tml>
"i no quieres un t-tulo& omite las l-neas que comien.an con <)ead>& <title>& y
<,)ead>.
"i esto te confunde& no te reocues. "olamente on el te%to <html><body> al rinciio
de tu arc#i$o y </body></html> al final& y m!icamente se con$ertir en un $erdadero
arc#i$o HTML.
6e :e!reso a la Tabla de Contenido
.altos de L!nea 2 Espacios en 3lanco
0uedes a!re!ar cuantos esacios o l-neas en blanco quieras 'llamados /blancos/( ara
#acer tu arc#i$o HTML ms fcil de leer. El na$e!ador desle!ar todos los blancos
consecuti$amente como un solo esacio& no imorta cuntos sean. Este tutorial usa un
estilo de san!r-a ara e)emlos& ero usa el estilo que me)or te funcione y #a!a las cosas
ms fciles de leer.
0ara comen.ar un nue$o rrafo& usa la etiqueta &p'GG la usars muc#o. El na$e!ador
a)ustar las l-neas de te%to correctamente& basado en el anc#o de la $entana 'el cual& t8&
el autor de HTML no uedes redecir(. "i realmente quieres for.ar una nue$a l-nea&
como ara una direcci1n& usa la etiqueta &$r' ara insertar un salto de l-nea.
Con lo que sabes ya uedes escribir !inas 4ebGG incluso uedes mostrar im!enes y
#acer #ierli!as. 0ru*balo& $ers c1mo funciona en realidad. Ha. una !ina simle y
$*la con tu na$e!ador.
6e :e!reso a la Tabla de Contenido
4nas )uantos Eti%uetas 5tiles Ms
0ru*ba las si!uientes>
&i' &*i' Hace el te%to en itlicas italic.
&tt' &*tt' Hace el te%to en teleti*o ;an')o (i.o<.
&h6' &*h6'
&h7' &*h7'
&h8' &*h8'
&h9' &*h9'
&h:' &*h:'
&h;' &*h;'
Muestra diferentes estilos de encabe.ados '#eader(& en orden
descendente de imortancia 'tamao(. 0or e)emlo& el /El HTML
Hec#o :ealmente Ccil/ al inicio de la !ina usa D#+E& y el /3nas
Cuantas Etiquetas Atiles Ms/ de arriba usa D#KE.
&hr' 0one una l-nea #ori.ontal en la !ina& como arriba del t-tulo /3nas
Cuantas Etiquetas Atiles Ms/& arriba.
&center'
&*center'
Centra te%to e im!enes entre los mr!enes i.quierdo y derec#o.
&$loc<%uote' "an!ra el te%to a artir de los dos mr!enes. 3sado ara la mayor-a de
&*$loc<%uote' los e)emlos en este documento.
&pre' &*pre' 6enota te%to /reformateado/ en c1di!o fuente> lo deslie!a como
fuente de anc#o fi)o y conser$a esacios y saltos de l-nea 'en !ran
medida como una mquina de escribir(. Es una manera rida de
#acer mr!enes y tabulaciones. Con$eniente ara entrecomillar una
secci1n del c1di!o fuente& de tal manera que es usado ara muc#os
e)emlos en este documento.
6e :e!reso a la Tabla de Contenido
Listas =umeradas o con >i?etas
El HTML roorciona una manera simle de mostrar listas numerads '/listas
ordenadas/( o con $ietas '/listas desordenadas/(. 3sa la contenedora &ol' y &ul' ara
#acer listas ordenadas o desordenadas& resecti$amente. 6entro de la contenedora& usa
la etiqueta &li' ara dentoar el comien.o de un elemento de la lista.
0or e)emlo& el c1di!o de HTML
E&ta e& una li&ta ordenada+
<ol>
<li>6rimer elemento
<li>=e%undo elemento
<li>!er'er elemento
<,ol>
E&ta e& una li&ta de&ordenada+
<ul>
<li>6rimer elemento
<li>=e%undo elemento
<li>!er'er elemento
<,ul>
que se $ern as-
Esta es una lista ordenada>
+. 0rimer elemento
K. "e!undo elemento
L. Tercer elemento
Esta es una lista desordenada>
0rimer elemento
"e!undo elemento
Tercer elemento
6entro de los elementos de lista& uedes oner lo que quierasGG li!as& im!enes& tablas
'ms sobre ellas desu*s(& o incluso otras listas. Las listas anidadas son en realidad
bastante comunes& 8tiles ara res8menes o men8s en cascada.
Menos comunes ero tambien 8tiles& son las /listas de definici1n/& las cuales contienen
un con)unto alternado de t*rminos y definiciones. Encierra toda la lista en la
contenedora &dl'& y usa &dt' y &dd' ara marcar el inicio de los t*rminos y
definiciones& resecti$amente. 0or e)emlo&
qu> e&t2 una li&ta de de(ini'i3n+
<dl>
<dt>!?rmino 1
<dd>De(ini'i3n del !?rmino1
<dt>!?rmino 2
<dd>De(ini'i3n del !?rmino2
<,dl>
que se $er as->
2qu- est una lista de definici1n>
T*rmino +
6efinici1n del T*rmino+
T*rmino K
6efinici1n del T*rminoK
2se!8rate de terminar tus listas con &*ol'& &*ul'& y &*dl'& o el resto de tu !ina se $er
como arte del 8ltimo elemento de la lista.
6e :e!reso a la Tabla de Contenido
)omentarios
0uedes oner comentarios en tu arc#i$o HTML que no se $ern en la !ina 4eb. Esto
te ermite e%licar or qu* tu c1di!o HTML es de cierto modo& a cualquiera que $ea tu
c1di!o fuente. Esto odr-a ser al!uien ms& o 'se!uramente( uedes ser t8 mismo en el
futuro.
Comien.a el comentario con /<!--/ y term-nalo con /-->/& como
<@44 E&te e& un 'omentario: / no &e de&*le%ar2 al u&uario 44>
<@44 e.em*lo& de 'omentario& in&ertado& *or A=M el 2B4C4CD: *ara
'lari(i'ar 44>
No on!as informaci1n ri$ada en comentarios& ya que cualquiera& re$isando el c1di!o
fuente& uede $erla. Tamoco on!as etiquetas de HTML dentro de los comentarios& ya
que el na$e!ador ensar que el comentario termina con el rimer caracter /E/.
6e :e!reso a la Tabla de Contenido
Ta$las
Las tablas en HTML te ermiten mostrar un arre!lo de celdas de datos& como en la
secci1n 3nas Cuantas Etiquetas Atiles Ms& arriba. Tambi*n te ermiten alinear te%to a
la derec#a& o #acer columnas de te%to como con tabuladores. No son dif-ciles de usar&
una $e. que sabes con claridad lo que quieres desle!ar en cda celda. La /definici1n
estndard/ de las tablas HTML #a cambiado unas cuantas $eces& ero es bastante
estable a#ora; esta secci1n te mostrar c1mo #acer tablas que #acen que casi cualquier
na$e!ador desle!ue correctamente.
+. Las tablas se definen con la contenedora &ta$le'.
K. La etiqueta &ta$le' contiene ren!lones de celdas& definidas con la contenedora
&tr'.
L. Cada etiqueta &tr' contiene celdas de datos& definidas con la contenedora &td'.
,. Cada celda de datos contiene lo que quieras onerGG li!as& im!enes& listas&
incluso otras tablas.
Los ren!lones se definen de arriba #acia aba)o& y las celdas de i.quierda a derec#a. "i
quieres que se muestren l-neas entre las celdas de la tabla& usa el atributo $order en la
etiqueta &ta$le'. '<:ecuerdas c1mo funcionan los atributos en las etiquetas HTML=
3sars unos cuantos atributos en esta secci1n.(
0or e)emlo& el c1di!o HTML
<table border>
<tr>
<td>noroe&te<,td>
<td>nore&te<,td>
<,tr>
<tr>
<td>&uroe&te<,td>
<td>&ure&te<,td>
<,tr>
<,table>
se $er como>
noroeste noreste
suroeste sureste
La mayor-a de los na$e!adores no requieren las etiquetas de terminaci1n &*tr' o &*td';
asumen que una celda o ren!l1n termina cuando la otra comien.a. 6e tal manera&
uedes $er tablas escritas sin las etiquetas de finali.aci1n 'aunque la etiqueta final
&*ta$le' s- es requerido(. Nota: Como este documento es de octubre de 1996, esto
puede causar problemas con las tablas anidadas debido a algn error del navegador.
)eldas %ue @cupan )olumnas o Renglones MAltiples
2l!unas $eces querrs que una celda ocue ms de una columna o ms de un ren!l1n.
En este caso usa los atributos colspan y roBspan del ta! &td'. Entonces solamente
omite definir las celdas que la celda ms !rande ocuar-a. 0or e)emlo&
<table border>
<tr>
<td ro-&*an=2>oe&te<,td>
<td>nore&te<,td>
<,tr>
<tr>
<@44 No de(ina& "&uroe&te" *orque "oe&te" la va a o'u*ar 44>
<td>&ure&te<,td>
<,tr>
<,table>
se $er como>
oeste
noreste
sureste
lineando el )ontenido de la )elda dentro de la misma )elda
3sualmente todo el contenido de una celda se al-nea a la i.quierda y centrada
$erticalmente or defecto. 0ara fi)ar la osici1n #ori.ontal y $ertical con la etiqueta
&td'& usa los atributos align y (align resecti$amente>
align uede ser le1t& right& o center.
(align uede ser top& middle& $ottom& o $aseline 'alineada a la base del te%to(.
0or e)emlo& este recibo sin l-neas de una tienda& al-nea los recios con resecto al
mr!en derec#o>
<table>
<tr>
<td>deter%ente *ara ro*a<,td>
<td ali%n=ri%)t>EF.CC<,td>
<,tr>
<tr>
<td>'omida *ara %ato<,td>
<td ali%n=ri%)t>E12G.HH<,td>
<,tr>
<,table>
"e $er como>
deter!ente ara roa M,.NN
comida ara !ato M+KO.PP
0uedes usar tambi*n los atributos align y (align en la etiqueta &tr'& ara afectar todas
las celdas en ese ren!l1n.
@tras )osas 5tiles so$re Ta$las
Normalmente el na$e!ador se las arre!la ara darle el tamao aroiado a la tabla& y
ara las celdas dentro de la tabla& basndose en el tamao del na$e!ador y el contenido
de la celda. "i deseas su!erir un anc#o esec-fico ara la tabla o las celdas& usa el
atributo Bidth en las etiquetas &ta$le' y &td'. 0uedes usar un orcenta)e del
na$e!ador o la tabla& como <td -idt)="2HI"> 'usualmente referido(& o un $alor
absoluto en i%els como <td -idt)=1BG> '8til ara #acer que una im!en quea
e%actamente en el anc#o de una celda(.
"i quieres ms detalles& Netscae tiene informaci1n al resecto en etiquetas relacionadas
con tablas y sus atributos& y una buena colecci1n de tablas de e)emlo. Estos
documentos son li!eramente obsoletos comarados con los 8ltimos estndares de
HTML& ero estn lo suficientemente actuali.ados ara la mayor-a de las tablas en el
4eb #oy d-a.
6e :e!reso a la Tabla de Contenido
Formas
0robablemente #as $isto formas ara llenar en el 4eb& usadas or los motores de
b8squeda& !u-as en l-nea& y dems. Escribes tus datos& en$-as la forma resionando un
bot1n de en$-o y los datos son en$iados a un scrit CQI en un ser$idor 4eb or a#-. Las
formas& como todo lo dems en HTML se definen con un equeo con)unto de
etiquetas. Estas etiquetas simlemente definen los elementos de la forma& como camos
de entrda o botones. La arte dif-cil es escribir el c1di!o CQI ara mane)ar la forma de
entrada; ese es un tema de otro tutorial.
Las formas comien.an con la etiqueta &1orm' y terminan con la etiqueta &*1orm'. En
la forma& uedes oner adems el c1di!o HTML que quieras& ero uedes usar tambi*n
estas etiquetas ara definir camos de entrada>
&input' define un camo de entrada de te%to& casillas de $erificaci1n& botones
de selecci1n& o botones simles.
&select' define men8s desle!ables y ca)as de selecci1n.
&textarea' define un camo de entrada de te%to multil-nea.
La etiqueta &1orm' tiene>
un atributo action& que es el 3:L del scrit CQI a quien en$iar los datos de la
forma& y
un atributo method& que es el m*todo HTT0 usado ara en$iar los datos de la
forma 'cualquiera de get o post funcionarnGG coordinando esto con tu scrit
CQI(.
2s-& una etiqueta &1orm' t-ica es>
<(orm a'tion=")tt*+,,---.m/)o&t.'om,m/*at),m/&'ri*t.'%i" met)od=*o&t>
Todos los camos de entrada en una forma tienen un nombre& definido or el atributo
name de la etiqueta &input'& &select'& o &textarea'. Todos los camos de entrada
tambi*n tienen un valor& que el usuario asi!na escribiendo en *l o #aciendo clicH en *l.
Todo el con)unto de los datos de la forma es reresentada como un con)unto de estos
pares de nombre-valor cuando se en$-a al scrit CQI.
Los camos de te%to $ac-os se en$-an como ares de nombreG$alor con un $alor de una
cadena $ac-a& ero las casillas de $erificaci1n y botones de selecci1n que no se usan no
se en$-an en absoluto.
0ara robar tu forma& uedes llamar a scrits simles en NC"2 que te dicen qu* ares
de nombreG$alor fueron en$iados. 0ara #acer esto& fi)a el atributo action a lo si!uiente>
0ara get en$-os> )tt*+,,)oo)oo.n'&a.uiu'.edu,'%i4bin,quer/
0ara post en$-os> )tt*+,,)oo)oo.n'&a.uiu'.edu,'%i4bin,*o&t4quer/
La Eti%ueta &input'
3sa la etiqueta &input' ara crear la mayor-a de los camos de una forma& as- como
ara en$iar y reestablecer botones. Tiene una !ran con)unto de atributos deendiendo
del tipo de atributo& el cual uede ser cualquiera de>
textGG un camo normal de entrada 'defecto(
passBordGG id*ntico a text& ero la entrada del usuario no se deslie!a
chec<$oxGG una casilla de $erificaci1n 'ara simles $alores s-9no(
radioGG un bot1n de selecci1n 'ara esco)er una de $arias ociones(
su$mitGG un bot1n que en$-a los datos de la forma& cuando la entrada de datos
del usuario est lista
resetGG un bot1n que reestablece todos los camos de una forma a sus $alores
iniciales
imageGG como su$mit& ero muestra una im!en como bot1n
hiddenGG te ermite definir ares e%tra de nombreG$alor que se en$-an al scrit
CQI ero no se deslie!an
los camos text y passBord tienen los si!uientes atributos ocionales>
(alue fi)a el $alor or defecto del camo
siCe fi)a la lon!itud desle!ada del camo
maxlength fi)a la cantidad m%ima de datos que ueden ser escritos
los camos chec<$ox y radio tienen los si!uientes atributos ocionales>
(alue es el $alor del camo cuando se $erifica; el $alor or defecto es /s-/
chec<ed 'no necesita $alor( si!nifica que est $erificado or defecto
los camos su$mit y reset usan lel atributo ocional (alue como la etiqueta en el
bot1n.
El camo image requiere un atributo src con el 3:L de la im!en a usar& y soorta la
mayor-a de los atributos de la etiqueta &img'.
0ara crear un con)unto de botones de selecci1n& dles a todos el mismo nom$re ero
diferentes (alores. "olamente el $alor seleccionado ser en$iado al ser$idor cuando la
forma se en$-e.
3sualmente& tendrs te%to antes o desu*s de los camos text& passBord& chec<$ox& y
radio& ara etiquetarlos ara el usuario. Nin!una etiqueta se muestra automticamente.
Los camos su$mit y image de #ec#o ueden tener un atributo nom$re& ara en$iar
informaci1n sobre c1mo la forma fue en$iada. "i tienes m8ltiles botones de en$-o& tu
scrit CQI uede distin!uirlos or nombres o $alores diferentes 'solamente el bot1n de
en$-o que resionas es el que se en$-a como ar nombreG$alor(. "i un camo image
tiene un atributo name de 'di!moslo( /foo/& entonces la locali.aci1n %Gy del clicH del
mouse en el bot1n es en$iada como dos camos enteros con nombres de /foo.%/ y
/foo.y/. Esto ermite un maa de im!en con un bot1n image.
E)emlos de camos &input'& en el mismo orden que se enlistan arriba son>
E&tado+ <in*ut t/*e=te0t name="&tate" value="9" &i1e=2 ma0len%t)=2>
6a&&-ord+ <in*ut t/*e=*a&&-ord name="*a&&-ord">
<in*ut t/*e=')e'Jbo0 name="ma&in(o" value="&i" ')e'Jed>Env>ame m2&
in(orma'i3n.
=ele''iona tu &e0o aba.o+
<br><in*ut t/*e=radio name="%ender" value="K">Kemenino
<br><in*ut t/*e=radio name="%ender" value="M">Ma&'ulino
<br><in*ut t/*e=radio name="%ender" value="O">Otro
<in*ut t/*e=&ubmit value=" OL: env>alo ">
<in*ut t/*e=re&et value=" M)oo*&44 borra e&o ">
<in*ut t/*e=ima%e &r'=",ima%e&,%obutton.%i(" -idt)=DH )ei%)t=BH>
<in*ut t/*e=)idden name="total&o(ar" value="12CH.DN">
La eti%ueta &select'
3sa la etiqueta contenedora &select' ara crear men8s desle!ables y listas
desla.ables. Entre &select' y &*select' uedes tener solamente etiquetas &option' y
su te%to& el cual define items en la lista.
La etiqueta &select' tiene un atributo name como todos los camos de entrada. Otros
atributos ocionales>
siCe es la altura desle!ada de la lista. "i es + 'u omitida(& la lista es un men8
desle!able; en otro caso& es una lista desla.able.
multiple 'sin $alor( de)a que el usuario seleccione items m8ltiles de la lista
'usualmente con ctrlGclicH o s#iftGclicH(. Cada item seleccionado deber ser
en$iado como un ara nombreG$alor al scrit CQI.
3na etiqueta &option' uede tener un atributo (alue& el cual es lo que se en$-a al scrit
CQI si ese item es seleccionado. "i no e%iste el atributo (alue& el $alor en$iado es el
te%to que si!ue a la etiqueta &option'.
0ara #acer que un item se seleccione or defecto& usa el atributo selected en la etiqueta
&option'.
3n e)emlo de una lista desle!able &select' es>
E&'o%e tu 'olor (avorito+
<&ele't name="(ave'olor">
<o*tion>verde
<o*tion>a%uamarina
<o*tion &ele'ted>e&meralda
<o*tion>turque&a
<o*tion>a%ua
<o*tion value="verde2">verde
<o*tion value="verdeB">verde
<,&ele't>
La Eti%ueta &textarea'
3sa la etiqueta contenedora &textarea' ara crear ca)as de te%to multil-nea
desla.ables. Todo lo que est* entre las etiquetas &textarea' y &*textarea' ser el
contenido inicial de la ca)a de entrada& as- que col1calas una )unto a la otra si no quieres
contenido inicial.
La etiqueta &textarea' tiene un atributo name& como cualquier otro camo de entrada.
3sa los atributos roBs y cols ara fi)ar el anc#o y alto del rea de te%to. Nota que el
rea de te%to se desla.a cuanto sea necesario& de tal manera que solamente ests
asi!nando el tamao al cual debe desle!arse& no el tamao de los datos
3n e)emlo del camo de entrada &textareaEes>
<te0tarea name="&tu((" ro-&=1H 'ol&=DH>6on 'o&a& aqu><,te0tarea>
@tras )osas de Formas
Intenta #acer unas cuantas formas ara $er c1mo se $en. No necesitas un scrit CQI
ara $erlas en tu na$e!ador.
NC"2 tiene unos cuantos e)emlos cerca del final de esta !ina de formas 'una o dos
antallas arriba del final(. La !ina en s- es $ie)a ero a8n sir$e; ellos dicen que es
solamente ara su na$e!ador 'Mosaic ara RG4indo5s(& ero la informaci1n sir$e ara
cualquier na$e!ador y formas.
6e :e!reso a la Tabla de Contenido
)olor
0uedes asi!nar el color de muc#as cosas en HTML a)ustando los atributos de color de
ciertas etiquetas>
En la etiqueta &$od2'& los atributos $gcolor& text& lin<& (lin<& y alin< definen
los colores ara el fondo& te%to& li!as no $isitadas& li!as $isitadas y li!as acti$as
de la !ina.
0ara cambiar el color del te%to de una arte de una !ina& usa la etiqueta
contenedora &1ont' con el atributo color.
0ara tablas& al!unos na$e!adores soortan el atributo $gcolor 'color de fondo(
en las etiquetas &ta$le'& &tr'& &th'& y &td'.
Los $alores de los atributos de color toman una de las si!uientes formas>
/DRREE33/& donde RR& EE& y 33 son los comonentes ro)o& $erde& y a.ul
del color en #e%adecimal de PP a CC. <Confundido= Entonces c#eca el si!uiente
m*todo>
3no de los +S /nombres de color ms e%tendidos y entendidos/> a%ua& $lac<&
$lue& 1uchsia& gra2& green& lime& maroon& na(2& oli(e& purple& red& sil(er& teal&
Bhite '5#ite(& or 2elloB 'yello5(
0or e)emlo& la etiqueta &$od2' usada en este documento es
<bod/ b%'olor=olive linJ="7HHHHKK" vlinJ="7HHOHCH" alinJ="7HHHKK">
e%ceto que el color de fondo no es oli$a en realidad.
No conf-es en el color ara cosas imortantes& al!unos na$e!adores no ueden
desle!arlo.
2dems de los +S nombres estndar de color de arriba& Netscae soorta mucos otros
nombres de colores& de 1ire$ric< a mediumspringgreen. 2qu- est una lista de los
nombres de color de Nestcae& arte del e%celente HTML 0rimer de "am ;in!ton. 0or
suuesto& solamente se deslie!an correctamente con na$e!adores NetscaeGG usa
DRREE33 los c1di!os de color ara catar el m%imo de na$e!adores.
6e :e!reso a la Tabla de Contenido
Marcos
Los marcos no son arte del HTML estndar. "on una e%tensi1n al HTML que cre1
Netscae. No funcionan en todos los na$e!adores& as- que limita la cantidad de usuarios
al usarlos. 6escribir* la introducci1n !eneral aqu-& ero Netscae tiene una !ina con
todos los detalles.
@sicamente& creas un arc#i$o HTML normal ara cada marco& adems de un arc#i$o
HTML esecial 'el /documento de marcos/( ara contenerlos a todos. Este documento
de marcos tiene la etiqueta contenedora &1rameset' en lu!ar de la etiqueta &$od2'. La
etiqueta &1rameset' di$ide la $entana rincial del na$e!ador en m8ltiles ren!lones y
columnas. Tiene cualquiera de los atributos roBs or cols& el cual es una lista de tamaos
searados or comas& ya sea en i%eles o en orcenta)es del anc#o total de la $entana.
0or e)emlo& <frameset cols="10%,80%,10%"> di$ide la $entana en tres columnas>
mr!enes an!ostos a i.quierda y derec#a y una !ina central anc#a. 'Be la !ina de
Netscae ara ms detalles.(
Entre &1rameset' y &*1rameset' uede #aber>
etiquetas &1rame'& cuyos atributos src contienen los 3:L que deben mostrarse
en esas columnas o ren!lones;
otras etiquetas &1rameset' ara di$idir desu*s las columnas o ren!lones en
ms ren!lones o columnas; or
etiquetas &no1rames' y &*no1rames' ara definir una !ina ara na$e!adores
que no soortan marcos 'siemre es sabio usarlas(.
Los marcos ueden con$ertirse arte del HTML estndar al!8n d-a& una $e. su
comle)idad se desec#e. 0ara las cosas oficiales en marcos y el estndar de HTML $e la
secci1n /Ne%t "tes/ en esta !ina en 4LC.
6e :e!reso a la Tabla de Contenido
)aracteres Especiales )omo F&F and F'F
<C1mo uedes desle!ar los caracteres /D/ y /E/= "i solamente los escribes en tu
arc#i$o HTML& el na$e!ador ensar que ests comen.ando o finali.ando una etiqueta.
tienes que incluir caracteres de escape 'as- se llaman(& tecleando secuencias de
caracteres en su lu!ar. Cuando se deslie!a tu !ina& el na$e!ador traduce las
secuencias a los caracteres que necesitas.
Todas las secuencias de caracteres eseciales comien.an con /G/ 'amersand( y
terminan con /H/ 'unto y coma(& y entre ellos est el nombre del caracter esecial. 0or
e)emlo& /GgtH/ si!nifica el s-mbolo de mayorGque& /GltH/ si!nifica el s-mbolo de
menorGque& /G%uotH/ si!nifica comillas dobles& y /GampH/ si!nifica el amerand
mismo. 0or e)emlo& la l-nea
6ara de&*le%ar el 'ara'ter PltQ u&a la &e'uen'ia Pam*QltQ.
se $er como
0ara desle!ar el caracter D usa la secuencia Tlt;.
3sa este m*todo ara oner caracteres no tecleables en tus !inas; or e)emlo&
/Gcop2H/ muestra el s-mbolo de coyri!#t U. 2qu- est una lista de caracteres
eseciales & con letras acentuadas rimero& se!uidas de s-mbolos no alfab*ticos.
2l contrario de los nombres de etiquetas& estos nombres de caracteres son de caso
sensiti$o& as- que /GETH/ no deslie!a el s-mbolo de mayorGque.
Necesitas escaar cada /&/ o /'/& ero no todos los amersand& etc. Estos c1di!os s1lo
estn a#- cuando los necesites& or e)emlo& cuando tu !ina no se deslie!ue
correctamente sin ellos 'y debas $erificar $isualmente cada !ina que #a!as(.
6e :e!reso a la Tabla de Contenido
4na =ota /mportante so$re HTML
3na !ina 4eb uede ser desle!ada en una !ran $ariedad de disositi$os GG
na$e!adores !rficos& na$e!adores de s1lo te%to& disositi$os de te%toGaG$o. o braille& u
otros disositi$os a8n no in$entados. 28n los na$e!adores !rficos $ar-an muc#o& desde
que el usuario uede cambiar el tamao a la $entana como desee& o a)ustar sus roios
colores y tios de letra. 6e acuerdo con esto& el HTML le da muc#a libertad al
na$e!ador ara decidir c1mo desle!ar la !ina y sorrendentemente oco control del
HTML al autor.
T*cnicamente el HTML es una manera de describir qu* tio de datos ests desle!ando&
y no e%l-citamente c1mo deben desle!arse. 0or e)emlo& la etiqueta &h6' dice /Esta
es una secci1n de encabe.ado rincial/; no dice en realidad /Muestra esto en un
tamao !rande de letra& ne!rita y centrada/. El na$e!ador decide c1mo debe
desle!arlo. 6e #ec#o& el na$e!ador toma la decisi1n final de c1mo desle!ar todo;
todas las etiquetas HTML son solamente sugerencias.
Toma tiemo acostumbrarse a esta falta de control& ero es la naturale.a del 4eb.
:ecuerda& no e%iste una manera de saber el tamao y la caacidad de los na$e!adores
que desle!arn tu !ina. "olamente trata de escribir HTML de tal manera que tus
!inas no se a)usten a una forma en articular 'lo cual $ariar muc#o de usuario a
usuario(. 6e otra manera& las tablas y diseos que se $en !eniales en tu antalla ueden
$erse #orribles en la de otro 'siemre $ale la ena c#ecarlo(. "i es osible& no conf-es en
el na$e!ador cuando muestra im!enes GG usa el atributo alt de la etiqueta &img' ara
definir un te%to alternati$o ara mostrar ara los na$e!adores que no uedan mostrar la
im!en. Si escribes HTML flexible, cualquier buen navegador desplegar tu pgina
aceptablemente.
En estos d-as& el HTML tiene etiquetas que dicen e%l-citamente c!mo desle!ar al!o&
en $e. de describir solamente qu* tio de dato es. Como e)emlo estn las etiquetas
com8nmente usadas &$' and &i'. Etas son en realidad una li!era des$iaci1n de la
filosof-a ori!inal de HTML debido a su e%licitud. Los uristas a $eces usan las
etiquetas &strong' y &em'& ara te%to 1uerte y enfati"ado& en lu!ar de &$' y &i'.
0uedes usar las que quieras.
6e :e!reso a la Tabla de Contenido
Tips para Hacer Mejores "ginas #e$
+. Obt*n retroalimentaci1n de tus usuarios con tu direcci1n de email y escuc#a sus
comentarios. Esto te lle$ar a ms me)oras que cualquier otra cosa. 0or e)emlo&
Env>a tu& 'omentario& a <a
)re(="mailto+m/name5m/)o&t.'om">me<,a>.
K. :e$isa tu !ina en $arios na$e!adores& o or lo menos en diferentes tamaos de
$entana.
L. 0ide a tus ami!os que na$e!uen en tu !ina y te la comenten.
,. No conf-es en cosas que no funcionan en todos los na$e!adores como el color.
3salos si quieres& ero ase!8rate que tu !ina uede $erse en na$e!adores que
no los soorten.
V. "i #aces un site de $arias !inas relacionadas& ermite la na$e!aci1n intuiti$a
entre ellas.
S. Cuando uses la etiqueta &img'& incluye los atributos alt& Bidth& y height. El
atributo alt define te%to a mostrar ara usuarios no !rficos& y los atributos
Bidth y height dan el tamao de la im!en en i%eles. Esto ermite que un
na$e!ador deslie!ue el resto de la !ina sin eserar a que la im!en se car!ue&
#aciendo la $ida muco me)or ara el usuario. 0or e)emlo&
<im% &r'="bluebar.%i(" alt="blue bar" -idt)=NHH )ei%)t=N>
W. Escribe c1di!o fuente fcil de leer. Tendrs que editarlo al!una $e. y otra !ente
odr-a #acerlo tambi*n. El c1di!o fuente desordenado es dif-cil de traba)ar e
incrementa los errores. Cacilita las cosas ara todos escribiendo c1di!o fuente
claro.
O. Lee las opiniones de los estilos de otras ersonas en las muc#as !u-as en este
directorio de 7a#oo. 2l final& no ten!asmiedo de tus roias oiniones y crea tu
roio estilo. Ha. lo que se $ea bien. Ha. lo que se a)uste a cualquier otro
criterio que ten!as 'fcil de usar& informati$o& di$ertido& atracti$o& etc.(.
6e :e!reso a la Tabla de Contenido
Final I2 algunas ligasJ
O;& ya sabes bastante de HTML ara #acer !inas 4eb. Be y #a. una o dos !inas.
Be y ensea a al!uien ms a #acerlo. El HTML tiene otras etiquetas con las que uedes
)u!ar& ero no tienes que. 6e #ec#o& las 8nicas etiquetas usadas en la elaboraci1n de esta
!ina ya #an sido descritas aqu-.
2qui est una buena aunque un oco t*cnica lista de todas las etiquetas HTML que es
arte de del Manual de :eferencia HTML de "andiaGG i!nora las artes esec-ficas de
"andia.
2qu- est un resumen de las caracter-sticas del HTML L.K realmente bueno 'y oficial(
en el 4orld 4ide 4eb Consortium '/4LC/(& el cual es la or!ani.aci1n central de
in$esti!aci1n que define los estndares usados en el 4eb.
6e :e!reso a la Tabla de Contenido