Taller HTML PDF

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.
com
Taller de HTML
Una serie de artculos prcticos para aprender a trabajar con HTML. Ofrece pequeos trucos de maquetacin para que los ms novatos puedan empe ar a dominar el len!uaje.
Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez Jos Manuel Cerrato Bartolom
http://www.jmcweb.org ( captulo)
Director de DesarrolloWeb.com http://www.desarrolloweb.com (22 captulos)
Juliana Monteiro Lazaro

Directora de !riarWeb.com http://www.criarweb.com ( captulo)
Christian Santaluca
http://www.criarweb.com ( captulo)
Fabio N ez !turriaga
Dise"ador web http://www.nedial.net ( captulo)
"oland Nava
( captulo)
Jose A# Molina
( captulo)
Luis Javier Alvarez
http://www.guiarte.com ( captulo)
Taller de HTML: http://www.desarrolloweb.com/manuales/51/

# $os manuales de DesarrolloWeb.com tienen el cop%right de sus autores. &o reproducir sin autorizaci'n.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Contacto con navegante

"prende los mecanismos que tienes a tu alcance para comunicarte con el visitante de tus p!inas. #esde correo $asta libros de visitas... Bien sabido es que una de las tareas ms importantes y laboriosas del ciclo de vida de una pgina web es su mantenimiento, para conservar la web, su trfico y su importancia con el tiempo. Pero mantener una web no es slo publicar nuevos contenidos y actualizar los anteriores, entre estas tareas se encuentra una que es fundamental: proporcionar mecanismos para que los visitantes se puedan poner en contacto contigo, y, por supuesto, contestar a cada uno de los mensajes que recibes. !isten muc"as formas de comunicarnos con el navegante, vamos a ver los mecanismos que estn ms a nuestro alcance para que a ninguna de nuestras webs les falte la posibilidad de comunicarse con sus visitantes.
Uno de los errores graves en una web es que no se brinde la oportunidad de contactar con el creador o responsable de contenidos, pero es aun peor que los mensajes no se respondan pues crea una gran
#emos ordenado los siguientes puntos por orden de facilidad en su uso, as$ los primeros son ms asequibles y los siguientes ms dif$ciles de conseguir, aunque a menudo mejores. sensacin de vacio
!orreo electr'nico
%o que nunca debe faltar en una pgina, por su sencillez y utilidad, por que es la forma ms adecuada en muc"os casos... &iempre tenemos que incluir una direccin de correo, fcilmente localizable, para que los visitantes puedan comunicarse. s facil$simo "acer un enlace con una direccin de correo: &e "a de poner un enlace convencional, pero su atributo HREF va direccionado a una direccin de correo con la palabra mailto:. '( #) *+,mailto:eugim-desarrolloweb.com,. scr$beme'/(. 0uedar$a as$: scr$beme Poner un enlace a una direccin de correo en un editor de #12%, para los que trabajis con "erramientas de edicion, tambi3n es pareceido a como lo "ac3is para los enlaces normales, pero con esas diferencias.
(ormulario de contacto
Podemos utilizar un formulario para comunicarnos. n el formulario nuestro visitante puede introducir sus datos y la consulta o sugerencia que desea realizar, para, pulsando luego un botn, enviar por correo electrnico a la persona de contacto todos los datos. %as ventajas de un formulario con respecto a una direccin de correo pueden ser: (yudar al visitante a componer el mensaje, y as$ incentivar su comunicacin. *orzar a que el visitante introduzca cierta informacin que te pueda resultar importante. 4frecer ms mecanismos de comunicacion, cada uno elegir el que ms le convenga.
5eamos brevemente a"ora cmo construir un formulario en una pgina web. 6n formulario se coloca entre las etiquetas 'form. y '/form.. ( esta etiqueta le tenemos que incluir varios atributos, estos son: (71849+,mailto:eugim-desarrolloweb.com, Para indicarle a qu3 direccin de correo enviar los resultados del formulario. 2 1#4:+,post, Para que lo envie por metodo post, esencial para enviarlo por e;mail. 971<P +,te!t/plain, Por que lo que vamos a enviar es te!to.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com n resumen, la etiqueta del formulario quedar$a as$:
'*4)2 (71849+,mailto:eugim-desarrolloweb.com, 2 1#4:+,post, 971<P +,te!t/plain,. '=;; 7(2P4& : % *4)26%()84 ;;. '/*4)2.
("ora veamos cmo colocar campos en el formulario, por lo menos los ms fciles:
Campos de texto
Se utiliza la etiqueta <IN U!" de esta manera# <INPUT TYPE="text" NAME="nombre_del_campo" SIZE= !" $l atributo !% $ indica que es un campo de te&to' N()$ es el nombre del campo, tiene que describir lo que *a+ dentro' SI,$ te permite ajustar el tama-o del campo' .a etiqueta N/ tiene cierre con <0IN U!"
Areas de texto
Se utiliza la etiqueta <!$1!(2$(" de esta manera# <TE#TA$EA NAME="nombre_del_campo" C%&S="'!" $%(S=")" Texto *n*c*al dentrodel textarea< +$"<,TE#TA$EA" $l atributo N()$ es el nombre del campo' 3/.S indica el n4mero de columnas del 5rea de te&to + 2/6S en de 7ilas'
+ot-n de en./o
Se utiliza la etiqueta <IN U!" de esta manera# <INPUT TYPE="s0bm*t" 1A&UE="En./alo YA2"" $l atributo !% $ indica que es un botn submit 8de envio9' :(.U$ indica lo que va escrito dentro del botn' .a etiqueta N/ tiene cierre con <0IN U!", N/ *ace 7alta darle un nombre con N()$
9o te olvides colocar antes de '/*4)2. el botn de env$o y ya tendrs el formulario listo para que tus navegantes te manden sus ruegos y preguntas. Puedes ver un ejemplo de formulario aqu$. Referencia: 1enemos una serie de cap$tulos en el manual de #12% que tratan sobre la creacin de formularios de manera detallad$sima. 1enemos tambi3n una serie de consejos para "acer formularios ms rpidos, fciles y agradables.
$ista de correo
6na lista de correo es una direccin de e;mail a la que si enviamos un correo nos lo "ace llegar a todos los integrantes de una lista de direcciones. 7on un ejemplo estar ms claro. &i todos los integrantes de una lista, cuando quieren conversar entre ellos, en vez de mandar un correo electrnico a todos ellos lo mandan a un servidor y este se encarga de que le llegue el mensaje a todos los de la lista, este servidor era una lista de correo >;? %as listas de correo pueden ser muy @tiles para que los usuarios que llegen a las pginas se apunten y nosotros, como

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com administradores del sitio web mandaremos correos electrnicos periodicamente a las lista para mantenerlos informados de noticias, cambios en el web y todo aquello que queramos enviarles. Para tener una lista de correo en tu pgina puedes contratar el servicio con un proveedor, pero es muc"o ms fcil y econmico usar una lista de correo de las que regalan en varios servidores. Para montarla en tu web, simplemente "as de seguir las instrucciones que te brinde el proveedor. Puedes conocer varios enlaces a listas de correo para pginas web en nuestro buscador.
$ibro de )isitas
("ora veremos alg@n mecanismo adicional para comunicarse con el cliente, pero en estos casos no se trata tanto de una comunicin entre ellos y tu, sino ms es una forma de comunicin te todos para todos. n el caso del libro de visitas est bien claro, es una "erramienta donde los visitantes pueden dejar los mensajes que deseen para que estos queden reflejados en la web y as$, no slo los leas t@, sino que tambi3n los pueden leer todos los dems usuarios de tus pginas. sto le da agilidad a la pgina, dinamismo y "ace que los visitantes se sientan integrados en el proyecto, colaboren y vuelvan para ver sus ,"uellas,. %as ventajas son muc"as. n la mayor$a de los casos no dispondremos de la tecnolog$a ni conocimientos para implementar esta tecnolog$a, pero e!isten en el mercado varios libros de visitas personalizabes e integrables dentro de webs sencillas, es decir, tu no tienes que "acer nada, ellos te proporcionan todos los recursos y e!plicaciones para montar un libro de visitas en tu web. (qu$ puyedes ver varios enlaces a estos sitios:
2elody &oft: "ttp://www.melodysoft.com/ A n castellano? 7ambia.net: "ttp://libros.cambia.net A n castellano? 4tros enlaces a libros de visitas en nuestro buscador
(orums de discusi'n
n alg@n caso podemos pasar a una opcin ms avanzada de lo que nos ofrecia libro de visitas. stos son los *orums de discusin, donde la gente puede opinar sobre temas y otros navegantes contestarles, etc. s muy @til e interesante. 9o cabe ya destacar sus m@ltiples ventajas y "its que recibiremos si se tratan temas de inter3s. &i no tenemos la infraestructura suficiente para montar nosotros el forum, podemos utilizar los servicios, muc"as veces gratuitos, de otros servidores. (qu$ se pueden seguir varios enlaces que nos llevarn a soluciones para implementar estos forums en tu pgina.
2elody &oft: "ttp://www.melodysoft.com/ A n castellano? Board#ots: "ttp://www.board"ost.com/ 4tros enlaces a foros en nuestro buscador
!onclusi'n
#emos visto un mostn de ideas para incluir en nuestras pginas, todas ellas con el objetivo de establecer contacto con el visitante, aunque al final se nos "a ido el tema del planteamiento inicial y "emos incluido muc"o ms que meras "erramientas de marBeting. Porque no olvides que todo esto es para "acerte conocer y "acer que los visitantes te recuerden con alegr$a y a menudo. Perm$teme por @ltimo ofrecerte un enlace, corresponde con la seccin de elementos para incluir en pginas web de nuestro buscador, donde estn todos los enlaces enumerados antes y donde irn apareciendo nuevos.

<
Si quieres, puedes descargarte el texto de esta ayuda tcnica y los ejemplos.

Artculo por
contacto. ip !"#
Miguel Angel Alvarez
$alorar una %eb

%emos un interesante taller de HTML donde ofrecemos al visitante de nuestra &eb un formulario rpido para valorar nuestra &eb. l objetivo de este taller de #12% consiste en colocar un pequeCo formulario para que las personas que visitan nuestro web puedan valorarlo rpidamente. &e trata de un ejemplo de recurso sencill$simo que se puede obtener con slo utilizar un poco de #12%. %a sencillez es belleza y compatibilidad con los distintos navegadores, as$ que veamos sin ms el efecto que pretendemos conseguir. 7omo se puede ver a la derec"a, el formulario nos propone que valoremos la pgina y al lado tenemos un botn para mandar la dic"a valoracin al webmaster del sitio. $ota: este ejemplo s%lo funciona si el visitante tiene configurado el correo electr%nico en su ordenador. %a valoracin se enviar por correo electrnico a la persona que se indique en el formulario, tal como veremos ms adelante. &i un usuario no tiene correo electrnico configurado en su ordenador con el 4utlooB !press, 9etscape 7omposer, udora o similar el mensaje no se podr enviar. Puede darse el caso de que el mensaje se cree, pero no se enviar si no tenemos email... as$ que probablemente lo podamos encontrar en la bandeja de salida del programa de correo. Para crear un sistema que no funcione a trav3s del correo electrnico del visitante y conseguir as$ que incluso los que no tienen correo puedan valorarte, necesitaremos utilizar alg@n recurso avanzado como 7D8, (&P o P#P, pero eso es otro tema. &alora esta 'e#
2*+,-./0 1
9o pretendo e!plicar en este art$culo los formularios en #12%, ya que en :esarrolloEeb.com "ay descripciones suficientes sobre su funcionamiento. Para el que no conozca los formularios recomiendo la lectura varios art$culos en el manual de #12%. l cdigo de este ejemplo es tan sencillo como este: 'form action+,mailto:!!!-tudominio.es, met"od+,post, enctype+,te!t/plain,. 5alora esta web'br. 'select name+,5aloracion,. 'option.F'/option. 'option.G'/option. 'option.H'/option. 'option.I'/option. 'option.J'/option. 'option.K'/option. 'option.L'/option. 'option.M'/option. 'option.N'/option.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 'option.FO'/option. '/select. 'input type+,submit, value+, nviar,. '/form. &e puede copiar y pegar en la pgina que lo desees. %a @nica l$nea que "abr$a que modificar es la de la etiqueta '*4)2., donde tenemos que cambiar la direccin de email del atributo action por la direccin donde queramos que llegue el correo con la valoracin. &i quisi3semos que el correo le llegase a yo-midominio.com pondr$amos as$ nuestro atributo action: action+,malito:yo-midominio.com, so es todo. spero que os "aya parecido interesante y prctico el recurso.
Artculo por
Jos Manuel Cerrato Bartolom
Fondos de imagen en &'ML

'(plicamos asuntos relativos al uso de fondos de ima!en en HTML ) ofrecemos al!*n ejemplo ilustrativo. n el presente taller vamos a tratar de e!plicar asuntos relativos al uso de fondos de imagen en #12%. 8ndicaremos la manera de utilizarlos correctamente, pues los fondos son capaces de lo peor y de lo mejor, es decir, pueden ser tan bonitos y vistosos como feos y molestos, y claro, se trata de quedarnos con la parte buena. (olocar un fondo en una p)gina 'e# Para incluir un fondo en una pgina web necesitamos utilizar el atributo bacBground en la etiqueta 'B4:<., al que le asignamos el nombre del arc"ivo que deseamos utilizar como fondo. &i el arc"ivo se encuentra en un directorio distinto que la pgina web, necesitaremos incluir la ruta al arc"ivo, teniendo en cuenta siempre de utilizar una ruta relativa al arc"ivo ."tml para que se conserve la ruta en caso de que cambiemos el sitio web de localizacin. 'body bacBground+,fondo.gif,. %o que conseguimos con esto es que el arc"ivo fondo.gif se muestre en la pgina como fondo. Por defecto, la imagen de fondo aparece como un mosaico, repiti3ndose a lo largo de todo el espacio de la pgina. Fondo en otros elementos 9o solo la pgina puede tener un fondo, tambi3n lo podemos colocar a las tablas o las celdas, por ejemplo. &e utiliza el mismo atributo bacBground, aunque aplicado a otras etiquetas. 'table bacBground+,fondo.gif,. 'td bacBground+,fondo.gif,. (onsejos para utili ar fondos 5eamos a"ora algunos consejos que se deber$an seguir para una correcta utilizacin de los fondos de imagen. *+ (olocar un fondo de color parecido a la imagen 7uando colocamos un fondo en una pgina debemos utilizar el atributo bgcolor para asignar un color de fondo parecido al predominante en la imagen que compone el mosaico. Posiblemente muc"os de nosotros "abremos accedido a una pgina en

>
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com la que no se ve nada y, cuando se carga el fondo, nos damos cuenta que s$ que "ab$a te!to en la pgina, lo que ocurre es que no se ve$a porque no contrastaba con el color de fondo blanco por defecto. s posible que en estos casos la imagen de fondo fuera oscura y que el te!to fuera blanco y, "asta que no se carga la imagen de fondo, no se puede ver nada. ste problema se agrava si el fondo no se llega a cargar por un error en la transferencia del arc"ivo o porque la imagen "a sido borrada del servidor accidentalmente. ,+ -ue se puedan leer #ien los textos %os fondos estn para "acer ms vistosa la pgina, no para molestar en la lectura de los te!tos. s un error muy com@n utilizar un fondo que luego molesta al leer los te!tos. <a es bastante dif$cil leer una web en un monitor como para que encima el te!to no contraste bien con el fondo que se est utilizando. n este caso cabe indicar tambi3n que es muy importante que las combinaciones de color del te!to y del fondo sean agradables, ya que "ay ciertos colores que, aunque contrastan bien, provocan unas combinaciones dif$ciles de leer, por ejemplo un fondo con un color azul predominante y el te!to en rojo. .+ /os fondos de imagen de color 0omogneo &i utilizamos un fondo de imagen, tenemos que procurar que en la imagen se utilicen colores de una misma gama. &i la imagen tiene partes oscuras y claras, Pde qu3 color pondremos el te!to para asegurarnos de que se lea bien siempreQ &i el te!to es claro no contrastar bien con las partes del fondo que tambi3n son claras. 8gual pasar si colocamos el te!to con un color oscuro, que no contrastar bien con las partes oscuras del fondo. 1+ 2ener cuidado con las distintas definiciones de pantalla s importante saber que un visitante puede acceder a una pgina con un tamaCo de ventana variable. ( veces un fondo se comporta bien con una definicin dada, pero no con otras mayores. 4curre muy a menudo que se utiliza un fondo y se ve el resultado en una ventana de MOO!KOO FOGI!LKM. %uego accede una persona con una definicin de FGMO!FOGI, o superior, y ve la pgina incorrectamente porque se realiza un mosaico con el fondo que no "ab$a tenido en cuenta el desarrollador. Para entender este punto, puede ser interesante acceder a esta pgina, que se ver bien en una definicin de MOO!KOO pero mal si es mayor. 3+ Hacer un fondo suficientemente grande s importante que el tamaCo del arc"ivo que vamos a utilizar como fondo tenga un cierto tamaCo. &i utilizamos como fondo una imagen de unos pocos pi!els, nuestro ordenador trabajar muc"o para crear el mosaico repitiendo cientos o miles de veces esa imagen. &in embargo, si el fondo "ubiese sido un poco ms grande, para realizar el mosaico "ubiera trabajado muc"o menos. n definitiva, tendremos que tener muc"o cuidado al utilizar los fondos, puesto que pueden dificultar muc"o la presentacin de la informacin en la pgina de una manera clara. &i deseamos utilizar un fondo que pudiera dar alg@n problema, una idea para asegurarnos que los te!tos se visualicen correctamente es colocar todo el contenido de la pgina dentro de una tabla y asignarle a la tabla un color de fondo con el atributo bgcolor.
<html> <head> <title>Fondo de prueba</title> </head> <body background="fondo1.jpg" bgcolor="FFCEC "> <table !idth="""#" bgcolor=FFCEC <tr> <td> align=center>
<h1 $tyle="color%######">&robando...</h1> <br> E$te te'to $e lee bien por(ue tiene un fondo plano. <br> </td> </tr> </table>

</body> </html>
&e puede ver el ejemplo en funcionamiento en una pgina aparte.

Artculo por
Como (roteger el c)digo *uente de una %eb

+on un sencillo ,cript podemos $acerles las cosas un poco ms difciles a todos aquellos que andan faltos de inspiracin ) pretenden robarnos nuestro cdi!o para $acer sus propias p!inas. 1ras intentarlo con muc"os m3todos, scripts y dems "e llegado a la conclusin de que ning@n m3todo es perfecto y de que todos estos scripts que dicen que protegen el cdigo fuente en realidad lo @nico que "acen es bloquear el botn derec"o del ratn y el teclado. :e todos estos scripts y para el que le guste usarlos este es el que me parece el ms simple y mejor:
<body onconte'tmenu="return fal$e" onkeydo!n="return fal$e">
simplemente "ay que poner estos atributos en el body y el botn derec"o del ratn y el teclado quedarn inutilizados, sin que salgan esas molestas ventanas de alerta diciendo, ,el botn derec"o "a sido in"abilidado, o ,las imgenes estn protegidas,.... stos scripts puede que protejan las imgenes de usuarios ine!pertos que simplemente saben navegar por internet y poco ms. Pero no impedirn a un usuario e!perto conseguir copiarse estas imgenes a su ordenador. &alvar estos scripts es tan fcil como darle: ,(rc"ivo.Duardar como..., y guardarse la pgina completa con todas sus imgenes. n el caso de que el script solo proteja el botn derec"o incluso podemos seleccionar la imagen y "acer 7trlR7 y luego pegarla en cualquier editor grfico. Por si todo esto no funcionara tambi3n queda siempre la posibilidad de imprimir pantalla, con el botn: ,8mpr Pant Pet &is, y luego 7trlR5 en cualquier editor grfico. &e puede consultar el art$culo 8n"abilitar el men@ conte!tual del navegador con Savascript para encontrar otra forma de proteger el cdigo fuente de las pginas web.
Artculo por
Fabio Nez Iturriaga

+eshabilitar la barra de im,genes de !nternet -.(lorer

'n este breve tutorial veremos de que forma podemos desabilitar la barra que aparece en -'(lorer . al situar el ratn sobre una ima!en. P7uantas veces nos "emos quejado o "emos deseado que no apareciese esa incmoda barrita en 8nternet !plorer A5ersin K? cuando pasamos el puntero por encima de una imagenQ. Pues la solucin es e!tremadamente simple...
8magen que muestra la barra emergente.
1an slo, lo que tenemos que incluir en la cabecera de nuestra pgina, es una escueta etiqueta 2 1( que automticamente nos des"abilitar la susodic"a opcin. 1ambi3n disponemos de un comportamiento de :reamweaver que nos a"orrar el tener que escribir dic"a 2 1(. Pero cuando veis lo reducida que es, probablemente pas3is de descargaros el comportamiento. :e todas formas para todos aquellos que dese3is tenerla, la podr3is adquirir en la web de 2acromedia !c"ange. sta es la etiqueta 2 1( que deber3is incluir entre '# (:. y '/# (:.
<meta http)e(ui*="imagetoolbar" content="no">
< lo veremos un poquito mejor en un pequeCo ejemplo de cdigo #12%, de modo que no quede ning@n tipo de duda. j:
<+,-C./&E html &0 12C ")//34C//,., 5.61 7.#1 .ran$itional//8&"> <html> <head> <+)) 9 eginEditable "doctitle" ))> <title>%%%% 6i p:gina !eb%%%%</title> <+)) 9EndEditable ))> <6E.; <;6E=".2.1E" C-<.E<.="<ombre"> <meta http)e(ui*="Content).ype" content="te't/html= char$et=!indo!$)1>">"> <meta name=",e$cription" content="de$cripci?n de nue$tra !eb."> <meta name="@ey!ord$" content="palabra$ relacionada$ con el contenido de nue$tra !eb."> <meta name="author" content="<ombre de la empre$a."> <6E.; 5..&)EA02B="EC&2DE8" C-<.E<.="6onE 41 ,ec >#"7 ##%##%#1 &8.">


<meta name="reply)to" content="correo electr?nico de la empre$a"> <meta name="o!ner" content="&ropietario de la empre$a."> <6E.; 5..&)EA02B="B3FG.- HEC. ./&E" C-<.E<.=".ipo de !eb"> <6E.; <;6E="D;.2<I" C-<.E<.="Ieneral"> <meta name="robot$" content="inde'E follo!"> <6E.; <;6E="DEB282.);F.ED" C-<.E<.="J day$"> <meta http)e(ui*="imagetoolbar" content="no"> </head> <body> El contenido de nue$tra !eb. </body> </html>
)ecordad que no importa donde coloqu3is la etiqueta 2 1(, siempre y cuando esta se encuentre entre el '# (:. y '/# (:..
Artculo por
Christian antaluca
'abla con las es/uinas redondeadas

Taller de HTML en el que creamos una tabla con color de fondo cu)as esquinas estn redondeadas. n este taller de #12% vamos a crear una tabla con las esquinas redondeadas, que nos podr servir para destacar alguna informacin en el te!to o crear una barra de enlaces lateral un poco ms vistosa. ( la derec"a aparece una tabla como la que pretendemos conseguir.
Tabla con es30*nas redondeadas 3uerpo de la tabla' odemos colocar el te&to que deseemos, que la tabla crecer5 en altura lo su7iciente para contenerlo'
l ejemplo no resulta nada complejo. &implemente se crea una tabla normal, en la que colocamos en cada una de sus esquinas un grfico que "ace la forma redondeada. %os grficos que utilizamos en esta ocasin tienen una parte de color y otra transparente. %a parte de color es la que dibuja el borde redondeado y la parte transparente deja ver el color de fondo que "ayamos colocado en la tabla. %as imgenes se pueden ver a continuacin. Para guardarlas utiliza el botn derec"o del ratn encima de la imagen y selecciona la opcin que pone ,Duardar imagen como..., o algo parecido. 1ambi3n podrs descargar las imgenes y el ejemplo completo en un arc"ivo comprimido.
n nuestro ejemplo "emos creado imgenes que tienen la parte no transparente de color blanco, que corresponde con el color de fondo de la pgina donde queremos colocar la tabla. &i queremos colocar una tabla como esta sobre un fondo distinto al blanco deber$amos crear unos grficos que tengan el mismo color que el fondo, en lugar de blanco.

1B
%o bueno de que el otro color utilizado en la imagen sea transparente es que la tabla que creamos puede tener el color de fondo que se desee. sta otra tabla ;a la derec"a; se crea con las mismas imgenes del ejemplo y, como se puede ver, tiene otro color de fondo que la anterior. (reaci%n de la ta#la
Tabla con es30*nas redondeadas $sta tabla tiene otro color de 7ondo, pero est5 creada con las mismas im5genes que la tabla anterior'
("ora vamos a estudiar el cdigo #12% que "ace falta para crear esta tabla con esquinas redondeadas. Probablemente con otro cdigo #12% ms simple tambi3n se podr$a construir, pero "emos preferido aCadirle un pequeCo e!ceso de atributos y etiquetas que servir para estar seguros de que se puede visualizar correctamente en todos los navegadores. %a tabla que utilizamos contiene varias celdas dispuestas en tres filas y tres columnas. n las celdas de las esquinas es donde colocamos las imgenes que "acen que los bordes aparezcan redondeados. n el resto de celdas de la tabla que forman el borde, para asegurarnos de que tienen el tamaCo correcto, colocamos imgenes de un p$!el transparente con sus correspondientes atributos de anc"ura y altura modificados a lo que necesitamos. n la celda del centro es donde colocamos el cuerpo de la tabla, con todo el te!to que queremos que vaya dentro, sus imgenes, etc. 'table widt"+HOO cellspacing+O cellpadding+O bgcolor+,THHHHNN, border+O. 'tr. 'td widt"+FF.'img src+,sup;izq.gif, widt"+FF "eig"t+FF.'/td. 'td widt"+GLM.'img src+,pi!eltrans.gif, widt"+GLM "eig"t+F.'/td. 'td widt"+FF align+rig"t.'img src+,sup;der.gif, widt"+FF "eig"t+FF.'/td. '/tr. 'tr. 'td.'img src+,pi!eltrans.gif, widt"+F "eig"t+F.'/td. 'td.'font color+,Tffffff, face+,verdana,arial,"elvetica, size+G. 'b.1abla guay'/b. 'br. 'br. ste es el te!to que quieras ponerle a la tabla. Puedes poner tanto te!to como desees, que la tabla se "ar lo suficientemente grande como para que quepa todo. '/font.'/td. 'td.'img src+,pi!eltrans.gif, widt"+F "eig"t+F.'/td. '/tr. 'tr. 'td widt"+FF.'img src+,inf;izq.gif, widt"+FF "eig"t+FF.'/td. 'td widt"+GLM.'img src+,pi!eltrans.gif, widt"+GLM "eig"t+F.'/td. 'td widt"+FF align+rig"t.'img src+,inf;der.gif, widt"+FF "eig"t+FF.'/td. '/tr. '/table. &i alguno desea utilizar este cdigo para crear sus propias tablas @nicamente deber$a modificar unos pocos datos: 1e!to del cuerpo de la tabla. n caso de que se desee modificar el anc"o de la tabla R 1amaCo de la tabla. (tributo widt" de la etiqueta 'table. R 1amaCo de los p$!eles transparentes, en la primera y @ltima fila. (tributo widt" de las etiquetas 'img. de los pi!els transparentes.
%os anc"os de los pi!els transparentes Aen la primera y @ltima fila de la tabla? tienen que ser el anc"o de la tabla menos el anc"o de las dos imgenes que aparecen en las esquinas. n nuestro cdigo, como el anc"o de la tabla es de HOO p$!el y el anc"o de las dos imgenes de los bordes es de FF p$!el, el anc"o de la imagen de p$!el transparente ser HOO ; FF ! G + HOO ; GG + GLM

11
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Para acabar, recordamos que se pueden descargar las imgenes, as$ como el cdigo fuente de la tabla con esquinas redondeadas, en un arc"ivo comprimido. 2a#la con esquinas redondeadas m)s sencilla Puede que este otro cdigo sea muc"o ms interesante para crear una tabla con esquinas redondeadas y conservando, seg@n nuestras pruebas, la compatibilidad con los navegadores. %o "emos creado a propsito de una revisin del art$culo.
Tabla redondeada m4s senc*lla $sta tabla es b5sicamente como las otras, pero est5 construida con muc*as menos etiquetas' uede que sea m5s 4til, porque no *a+ que con7igurar m5s que el color + el tama-o'
%a tabla conserva prcticamente el mismo aspecto, pero en esta ocasin "emos eliminado todos las imgenes con un pi!el transparente que utilizbamos en el anterior ejemplo, con lo que el cdigo se simplifica. n esta ocasin tenemos dos filas y tres columnas. %as imgenes estn dispuestas de la misma manera, aplicando ms atributos para alinearlas correctamente. %a fila central, que es donde est el cuerpo de la tabla, est e!pandida a dos filas con el atributo rowspan+G.
<table !idth=7## cell$pacing=# cellpadding=# bgcolor="9GG44GG" border=# align="right"> <tr> <td !idth=11 *align="top" align=left><img $rc="image$/$up)iK(.gif" !idth=11 height=11></td> <td ro!$pan=>> <font color="9ffffff" face="*erdanaEarialEhel*etica" $iKe=1> <br> <b>.abla redondeada m:$ $encilla</b> <br> <br> E$ta tabla e$ b:$icamente como la$ otra$E pero e$t: con$truida con mucha$ meno$ eti(ueta$. <br> <br> &uede (ue $ea m:$ LtilE por(ue no hay (ue configurar m:$ (ue el color y el tamaMo. <br> <br> </font> </td> <td !idth=11 *align="top" align=right><img $rc="image$/$up)der.gif" !idth=11 height=11></td> </tr> <tr> <td !idth=11 align=left *align=bottom><img $rc="image$/inf)iK(.gif" !idth=11 height=11></td> <td !idth=11 align=right *align=bottom><img $rc="image$/inf)der.gif" !idth=11 height=11></td> </tr> </table>
&i alguno desea utilizar este cdigo para crear sus propias tablas @nicamente deber$a modificar: 1e!to del cuerpo de la tabla. color de fondo de la tabla
Juliana Monteiro !azaro
Artculo por

12
'abla con las es/uinas redondeadas0 ti(o 1

Otro ejemplo de tabla con las esquinas redondeadas/ en este caso con un borde de un pi(el/ tambi0n redondeado. 5amos a ver como realizar con #12% una tabla con las esquinas redondeadas y con un pequeCo marco de un p$!el. s un ejemplo de tabla con los bordes redondeados como cualquier otro, de "ec"o, ya "emos visto un ejemplo sobre este asunto en nuestro anterior (uerpo de la ta#la art$culo 1abla con esquinas redondeadas. 7omo siempre, lo mejor para darse cuenta de lo (qu$ podremos escribir lo que que pretendemos construir es verlo en un ejemplo y al lado de estas mismas l$neas deseemos, que la tabla crecer podemos verlo. lo suficiente para contener todo el te!to que coloquemos, n este caso utilizaremos las siguientes imgenes, que podemos guardar pulsando sobre ellas con el botn derec"o del ratn y seleccionando ,Duardar imagen como...,. 1ambi3n incluso imgenes. podemos descargar todo el cdigo y las imgenes en un arc"ivo comprimido. spero que parezca un diseCo interesante, aunque seguro que los "ay mejores...
(reaci%n de la ta#la 5amos a ver el cdigo #12% necesario para crear este ejemplo. #emos de tener en cuenta que el cdigo se podr$a "aber creado de varias maneras, aunque nosotros presentamos la que consideramos ms verstil. #emos construido la tabla con las correspondientes etiquetas de tablas de #12%. 7omo consideracin cabe seCalar que las etiquetas de las imgenes que se colocan dentro de las celdas tienen que estar pegadas a la etiqueta '/1:., que se utiliza para cerrar la tabla. &i no es as$ puede que nuestro ejemplo quede descuadrado. l tamaCo de la tabla en anc"ura se puede definir perfectamente en el atributo widt" de la etiqueta '1(B% .. %a altura ser la suficiente para que quepan todos los contenidos de la tabla. ste es el cdigo en cuestin: '1(B% E8:1#+HOO B4): )+O 7 %%P(::89D+O 7 %%&P(789D+O. '1). '1:. '82D &)7+,images/tablitaUOF.gif, E8:1#+K # 8D#1+K.'/1:. '1: bacBground+,images/tablitaUOG.gif,. '82D &)7+,espacio.gif, E8:1#+F # 8D#1+K.'/1:. '1:. '82D &)7+,images/tablitaUOH.gif, E8:1#+K # 8D#1+K.'/1:. '/1). '1). '1: bacBground+,images/tablitaUOI.gif,. '82D &)7+,espacio.gif, E8:1#+K # 8D#1+F.'/1:. '1: bgcolor+ M M M valign+top. 7uerpo esto es el 7uerpo esto es el 7uerpo esto es el 7uerpo... '/1:.

1;
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com '1: bacBground+,images/tablitaUOK.gif,. '82D &)7+,espacio.gif, E8:1#+K # 8D#1+F.'/1:. '/1). '1). '1:. '82D &)7+,images/tablitaUOL.gif, E8:1#+K # 8D#1+K.'/1:. '1: align+center bacBground+,images/tablitaUOM.gif,. '82D &)7+,espacio.gif, E8:1#+F # 8D#1+K.'/1:. '1:. '82D &)7+,images/tablitaUON.gif, E8:1#+K # 8D#1+K.'/1:. '/1). '/1(B% . 9o "ay muc"o que e!plicar... simplemente que recojas las imgenes descargando el arc"ivo comprimido Aa notar que "an sido colocadas en un directorio llamado images y que si no estn all$ no funcionar el ejemplo? y que la imagen que se llama espacio.gif es simplemente un p$!el transparente.
Artculo por
Frames sin bordes

Taller de HTML en el que e(plicamos cmo reali ar frames sin bordes en lso nave!adores ms $abituales. ste taller de #12% e!plica cmo realizar una declaracin de frames sin bordes. Para los lectores que no conozcan lo que son los frames o como se definen ser$a necesario que estudiasen el manual de #12%, por lo menos los cap$tulos dedicados a frames. #emos visto que "ay muc"os atributos que sirven para eliminar los bordes de los marcos, tal vez demasiados y "aya quedado poco claro cual ser$a la forma e!acta de eliminar todos los frames de una vez. )esulta que no se "ace igual en todos los navegadores, aunque incluyendo los atributos adecuados para cada navegador estaremos seguros que los bordes no se vern nunca. n 9etscape, simplemente necesitamos especificar el atributo border+,O, en el primer frameset. sta opcin tambi3n funciona en las versiones ms modernas de 8nternet !plorer. n 8nternet !plorer, debemos especificar dos atributos tambi3n en el primer frameset. frameborder+,O, y framespacing+,O,. &i colocamos los tres atributos a la vez en el primer frameset estaremos seguros que no "ay bordes, por lo menos en los navegadores ms "abituales. %a etiqueta frameset con los tres atributos quedar$a as$: 'frameset cols+,NO,V, border+,O, frameborder+,O, y framespacing+,O,. Ejemplo pr)ctico 5amos a escribir por completo una declaracin de frames sin bordes, para que quede todo suficientemente claro. '"tml. '"ead. 'title.:efinicin de *rames'/title. '/"ead.

1<
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 'frameset cols+,GOO,V, border+,O, frameborder+,O, y framespacing+,O,. 'frameset rows+,FLO,V,. 'frame src+,paginaF."tml,. 'frame src+,paginaG."tml,. '/frameset. 'frame src+,paginaH."tml,. '/frameset. '/"tml. &e puede ver la pgina de frames sin bordes en este enlace.
Artculo por
'abla me2orada con imagenes (ara barra de navegaci)n

Una tabla de enlaces HTML a la que le intercalamos im!enes para transformarla un poco ) $acerla ms vistosa. Utili able en una barra de nave!acin. n este taller de #12% vamos a ver como una pequeCa imagen puede resultar muy vistosa para construir una barra de navegacin para nuestro sitio web. 5amos a construir una tabla como la que se puede ver en la parte de la derec"a, donde podremos observar la utilizacin de imgenes para camuflar el "ec"o que las celdas son siempre rectangulares. %as imgenes aplican un leve biselado y eliminan una esquina, con lo que las tablas mejoran sensiblemente su apariencia. $ota: 6n efecto como este o parecido se puede conseguir de muc"as maneras, as$ que nos tenemos que tomar este taller como tan slo una idea de las posibilidades y el modo de construir las tablas.
Portada
Introd0cc*-n a ello
Todos los as0ntos
/as im)gemes
50e desees
7reo que viendo las imgenes que "emos colocado en la tabla se comprender un poco la idea sobre la que "emos trabajado. %as imgenes estn ampliadas para que se pueda observar mejor sus l$neas. &e pueden crear con cualquier editor grfico del que dispongamos. M4s ep/6ra7es
sta es la imagen que colocamos entre dos celdas de te!to.
Acabando los enlaces
sta es la imagen que colocamos en la parte de arriba de la celda superior. 9o podemos colocar la misma que la de en medio porque queda un poco mal. (onsideraciones para crear la ta#la
Cont4ctenos
5amos a colocar cada elemento en la tabla en una celda independiente. n la primera celda colocaremos la imagen destinada para la parte de arriba, en la segunda el te!to del primer enlace, luego la imagen que colocamos en medio de cada celda de te!to, seguida por otra celda con el te!to del siguiente enlace, luego otra vez la imagen, luego te!to, etc. %a tabla se tiene que crear de modo que no quede separacin entre celdas ni mrgenes, pues si la "ubiera no parecer$a que

1=
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com las celdas de la imagen y las del te!to forman un mismo bloque y aparecer$a deslabazada. %os atributos cellspacing y cellpadding quedar$an a cero. (dems, las etiquetas '1:. y las de las imgenes, '82D., tienen que estar en el cdigo sin espacios entre medias, pues si no fuera as$ tampoco conseguir$amos que las celdas quedasen pegadas unas a otras. Por lo dems, decir que las celdas de te!to les "emos aplicado estilos utilizando 7&& A#ojas de estilo en cascada?, que son muc"o ms cmodos y nos permiten definir una @nica vez el estilo para todas las celdas en lugar de repetir las etiquetas y atributos #12% para cada una. (%digo de la ta#la 7olocamos el cdigo de toda la pgina en lugar de solamente la tabla para que se puedan ver las etiquetas para colocar los estilos 7&&, que aparecen en la cabecera.
<html> <head> <title>.abla enlace$ guay</title> <$tyle> .celda Nbackground)color%9O7OE,4= font)$iKe%Opt= font)family%*erdanaEarial= color%9ffffff= font) !eight%bold= padding)left%4p'= padding)bottom%>p'=P </$tyle> </head> <body> <table cell$pacing="#" cellpadding="#" border="#"> <tr> <td><img $rc="arriba.gif" !idth="1""" height="G" alt="" border="#"></td> </tr> <tr> <td cla$$="celda">&ortada</td> </tr> <tr> <td><img $rc="medio.gif" !idth="1""" height="O" alt="" border="#"></td> </tr> <tr> <td cla$$="celda">2ntroducci?n a ello</td> </tr> <tr> <td><img $rc="medio.gif" !idth="1""" height="O" alt="" border="#"></td> </tr> <tr> <td cla$$="celda">.odo$ lo$ a$unto$</td> </tr> <tr> <td><img $rc="medio.gif" !idth="1""" height="O" alt="" border="#"></td> </tr> <tr> <td cla$$="celda">Aue de$ee$</td> </tr> <tr> <td><img $rc="medio.gif" !idth="1""" height="O" alt="" border="#"></td> </tr> <tr> <td cla$$="celda">6:$ epQgrafe$</td> </tr> <tr> <td><img $rc="medio.gif" !idth="1""" height="O" alt="" border="#"></td> </tr> <tr> <td cla$$="celda">;cabando lo$ enlace$</td> </tr> <tr> <td><img $rc="medio.gif" !idth="1""" height="O" alt="" border="#"></td> </tr>

1>

<tr> <td cla$$="celda">Cont:cteno$</td> </tr> </table> </body> </html>
&e puede ver el ejercicio en una pgina a parte. 1ambi3n ponemos a vuestra disposicin la descarga del arc"ivo #12% de la tabla y las las imgenes utilizadas en el ejemplo.
Artculo por
Barra de navegaci)n &'ML sencilla

'n este taller de HTML vamos a desarrollar una barra de nave!acin de una manera mu) sencilla/ en la que utili aremos una ima!en para dar un pequeo efecto para $acer uno de los bordes de la tabla oblicuo. n este taller de #12% vamos a desarrollar una barra de navegacin de una manera muy sencilla, en la que utilizaremos una imagen para dar un pequeCo efecto para "acer uno de los bordes de la tabla oblicuo. l efecto buscado se puede ver en una pgina aparte. Referencias: n nuestro manual de #12% tenemos toda la teor$a y un poco de la prctica necesaria para dominar las tablas. n nuestro taller de #12% tenemos unas interesantes prcticas con tablas que pueden orientarnos tambi3n.
/a imagen &e utiliza una imagen para presentar una parte de la celda donde se colocan los enlaces con un lado oblicuo. %a imagen tiene una parte transparente y otra parte con el fondo blanco, que tiene que ser el mismo fondo de la pgina. 7olocaremos la imagen sobre una celda del mismo color de la barra. ntonces, la parte blanca crear el sector oblicuo y la parte transparente dejar ver parte de la celda, con el color que tenga la barra creada. 7olor que se puede variar fcilmente con estilos o con el atributo bgcolor de las celdas. %a imagen se puede descargar en un arc"ivo comprimido, que viene junto con el ejemplo maquetado en #12%. /a ta#la l truco para "acer la barra se basa en intercalar las celdas con los enlaces y las celdas con la imagen. &e crear una tabla con una sola fila y con tantas columnas como sean necesarias para localizar las opciones. n realidad, como se supondr, se crearn el doble de celdas que de opciones. Para cada opcin, colocaremos primero una celda con la imagen y luego otra con el enlace. l cdigo ser algo como esto:
<table border=# cellpadding="#" cell$pacing="#"> <tr> <td cla$$=op><img $rc="image$/e$(uina.gif" <td cla$$=op> -pcion </td> <td cla$$=op><img $rc="image$/e$(uina.gif" <td cla$$=op> -pcion > </td> <td cla$$=op><img $rc="image$/e$(uina.gif" <td cla$$=op> 6:$ opcione$ </td> <td cla$$=op><img $rc="image$/e$(uina.gif"
!idth=">1" height="1G" alt="" border="#"></td> !idth=">1" height="1G" alt="" border="#"></td> !idth=">1" height="1G" alt="" border="#"></td> !idth=">1" height="1G" alt="" border="#"></td>

1?

<td <td <td <td <td </tr> </table> cla$$=op> 1o (ue $ea </td> cla$$=op><img $rc="image$/e$(uina.gif" !idth=">1" height="1G" alt="" border="#"></td> cla$$=op> 6:$ co$a$ </td> cla$$=op><img $rc="image$/e$(uina.gif" !idth=">1" height="1G" alt="" border="#"></td> cla$$=op> 8ecci?n enR$ima </td>
4etalles so#re los que fijarse: &e "a utilizado una clase de estilos 7&& para definir el formato de las celdas. n la clase se define un estilo, que incluye el color de fondo, tamaCo de letra, tipograf$a, etc. $ota: 6na clase no es ms que un estilo definido, que podemos aplicar a diversos elementos del #12%. &e definen con un cdigo como este en la cabecera del documento #12%:
<$tyle type="te't/c$$"> .opN font)$iKe%1#pt=font)family%*erdanaEarial=background)color%9ffOO##=P </$tyle>
(s$ estamos definiendo que los elementos de esa clase tengan tamaCo de letra FO, fuente verdana, o en su defecto, arial, y fondo de color anaranjado. 1ambi3n cabe destacar que para que el ejemplo funcione correctamente es necesario colocar los atributos de la tabla para que no "aya bordes ni mrgenes, con border+O, cellspacing+O y cellpadding+O. Por ello, para crear un pequeCo margen antes del enlace, se utilizan caracteres especiales , que sirven para colocar espacios en blanco. l ejemplo en funcionamiento se puede ver en una pgina aparte.
Artculo por
Barra de navegaci)n &'ML

Todos los pasos para conse!uir implementar una barra de nave!acin cu)os enlaces tienen un estilo similar a una solapa. 5amos a tratar de e!plicar el proceso de creacin de una barra de navegacin sencilla pero muy verstil que podr$amos incluir en una pgina web. l trabajo es sencillo, si se dominan las tablas del #12%, que como muc"os sabrn, son el principal elemento que tenemos a nuestra disposicin para maquetar una web, aparte de las capas. l resultado que pretendemos conseguir se puede ver en una pgina aparte. )eferencias: n nuestro manual de #12% tenemos toda la teor$a y un poco de la prctica necesaria para dominar las tablas. n nuestro taller de #12% tenemos unas interesantes prcticas con tablas que pueden orientarnos tambi3n. /as im)genes 5amos a utilizar tres imgenes muy simples. 6na es el lateral izquierdo de las cajas de los enlaces, otra el lateral derec"o, y un p$!el transparente. %as podemos descargar en un arc"ivo comprimido .zip. 7on las imgenes laterales vamos a "acer el efecto de caja con el borde con esquinas suavizadas. 6na se utilizar en la parte de la derec"a y otra en la izquierda. 7on el p$!el transparente utilizaremos alg@n truco de maquetacin muy "abitual en #12%, que consiste en colocar la imagen para crear un espacio de un tamaCo definido por nosotros.

1@
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com %as imgenes utilizan la transparencia del D8* para poder crear barras de navegacin a las que podemos aplicarles distintos colores, fcilmente editables si utilizamos una "oja de estilos. /a ta#la con el enlace 5amos a dividir el problema en varias partes para que sea ms fcil de entender cada una de ellas y el efecto global. ("ora vamos a ver cmo "acer una solapa. (l reunir varias solapas crearemos la barra de navegacin. %as solapas se crean con este cdigo #12%:
<table align="center" cell$pacing="#" cellpadding="#" border="#"> <tr> <td cla$$=op ro!$pan=>><img $rc="image$/iK(.gif" !idth="O" height=">1" border="#"></td> <td *align="top" col$pan=> bgcolor="######"><img $rc="image$/pi'el.gif" !idth="1" height="1" border="#"></td> <td cla$$=op ro!$pan=>><img $rc="image$/der.gif" !idth="O" height=">1" border="#"></td> </tr> <tr> <td cla$$=op><img $rc="image$/pi'el.gif" !idth="1" height="1"" border="#"></td> <td cla$$=op>-pci?n</td> </tr> </table>
%o que da como resultado este efecto:
2pci'n
7omo detalles del cdigo anterior podemos seCalar que se utiliza una clase para definir el estilo de la solapa. %as clases son una posibilidad de las "ojas de estilos. 6na clase no es ms que un estilo definido, que podemos aplicar a diversos elementos del #12%. &e definen con un cdigo como este en la cabecera del documento #12%:
<$tyle type="te't/c$$"> .opN font)$iKe%1#pt=font)family%*erdanaEarial=background)color%9ffOO##=P </$tyle>
(s$ estamos definiendo que los elementos de esa clase tengan tamaCo de letra FO, fuente verdana, o en su defecto, arial, y fondo de color anaranjado. 4tra cosa sobre la que queremos llamar la atencin es el uso del p$!el transparente. l que se utiliza en primer lugar est para crear la l$nea del borde de arriba de la solapa, aunque el color negro se lo da el atributo bgcolor+,OOOOOO, que tiene la celda. l otro p$!el se coloca para "acer que el espacio donde se colocan las letras sea lo suficientemente alto. Por @ltimo, decir que la tabla no tiene borde y los atributos cellspacing y cellpadding estn a cero, para que no "aya mrgenes ni espacios entre las celdas. 6na prueba que podemos "acer para entender la forma de esta tabla es colocar el borde+F, con lo que veremos la forma de la tabla ms fcilmente. %uego volvemos a colocar el borde+O porque los bordes quedan muy feos. (olocar varias solapas juntas %uego, para crear el efecto de barra de navegacin, vamos a crear una tabla donde colocaremos los distintos cdigos #12% de las solapas. sta tabla es muc"o ms sencilla. &implemente tiene un espacio para cada solapa y una celda en la parte de abajo con la l$nea sobre la que aparecen las solapas.
<table cell$pacing="#" cellpadding="#" border="#"> <tr> <td></td> <td></td>

1A

<td></td> </tr> <tr> <td C-18&;<=4 bgcolor=######><img $rc="image$/puntonegro.gif" !idth="1" height="1" border="#"></td> </tr> </table>
sta tabla nos dar$a espacio para colocar tres solapas... dependiendo del n@mero de opciones vamos a colocar ms o menos celdas en la primera fila. Posteriormente deberemos colocar el cdigo de cada solapa dentro de cada celda. 7on ello estar realizada nuestra barra. 6n ejemplo de cdigo completo se puede ver a continuacin:
<table align="center" cell$pacing="#" cellpadding="#" border="#"> <tr> <td> </td> <td> <table align="center" cell$pacing="#" cellpadding="#" border="#"> <tr> <td cla$$=op ro!$pan=>><img $rc="image$/iK(.gif" !idth="O" height=">1" border="#"></td> <td *align="top" col$pan=> bgcolor="######"><img $rc="image$/pi'el.gif" !idth="1" height="1" border="#"></td> <td cla$$=op ro!$pan=>><img $rc="image$/der.gif" !idth="O" height=">1" border="#"></td> </tr> <tr> <td cla$$=op><img $rc="image$/pi'el.gif" !idth="1" height="1"" border="#"></td> <td cla$$=op>-pci?n '''</td> </tr> </table> </td> <td> <table align="center" cell$pacing="#" cellpadding="#" border="#"> <tr> <td cla$$=op ro!$pan=>><img $rc="image$/iK(.gif" !idth="O" height=">1" border="#"></td> <td *align="top" col$pan=> bgcolor="######"><img $rc="image$/pi'el.gif" !idth="1" height="1" border="#"></td> <td cla$$=op ro!$pan=>><img $rc="image$/der.gif" !idth="O" height=">1" border="#"></td> </tr> <tr> <td cla$$=op><img $rc="image$/pi'el.gif" !idth="1" height="1"" border="#"></td> <td cla$$=op>-tra -pci?n</td> </tr> </table> </td> <td> <table align="center" cell$pacing="#" cellpadding="#" border="#"> <tr> <td cla$$=op ro!$pan=>><img $rc="image$/iK(.gif" !idth="O" height=">1" border="#"></td> <td *align="top" col$pan=> bgcolor="######"><img $rc="image$/pi'el.gif" !idth="1" height="1" border="#"></td> <td cla$$=op ro!$pan=>><img $rc="image$/der.gif" !idth="O" height=">1" border="#"></td> </tr> <tr> <td cla$$=op><img $rc="image$/pi'el.gif" !idth="1" height="1"" border="#"></td> <td cla$$=op>1o (ue de$ee$</td> </tr> </table> </td> <td> <table align="center" cell$pacing="#" cellpadding="#" border="#"> <tr> <td cla$$=op ro!$pan=>><img $rc="image$/iK(.gif" !idth="O" height=">1" border="#"></td> <td *align="top" col$pan=> bgcolor="######"><img $rc="image$/pi'el.gif" !idth="1" height="1" border="#"></td> <td cla$$=op ro!$pan=>><img $rc="image$/der.gif" !idth="O" height=">1" border="#"></td> </tr> <tr> <td cla$$=op><img $rc="image$/pi'el.gif" !idth="1" height="1"" border="#"></td>

2B

<td cla$$=op>Sltima opci?n</td> </tr> </table> </td> <td> </td> </tr> <tr> <td C-18&;<=G bgcolor=######><img $rc="image$/puntonegro.gif" !idth="1" height="1" border="#"></td> </tr> </table>
l ejemplo conseguido puede verse en la barra de arriba que aparece en esta pgina de ejemplo.
Artculo por
-scribir (or encima de las im,genes

Un par de sencillos ejemplos para constatar que esto es posible. n este taller de #12% vamos a aprender a colocar te!to encima de una imagen, utilizando un pequeCo truco con tablas. 7omo el lector sabr, las imgenes ocupan un espacio en la pgina que no se puede ocupar tambi3n con te!to, es decir, si colocamos una imagen en un lugar, en principio, no se podr$a colocar te!to ni otros elementos encima. Bueno, esto no es del todo cierto. )ealmente se pueden utilizar capas para realizar esa tarea, pero el trabajo con capas siempre es complicado y puede llegar a dar problemas de compatibilidad con diferentes navegadores. ste ejemplo puede ser @til para muc"os casos. Por ejemplo, para jugar con fondos que tengan varios colores, o para escribir te!to decorado con un bonito fondo de imagen que no tiene porque repetirse en toda la pgina. %o mejor es que visualicemos el efecto buscado en una pgina aparte. l cdigo de este ejemplo es el siguiente:
<table border=1 bordercolor=black align=center !idth=1"F cellpadding=4 cell$pacing=> background="huella.gif" height="17G"> <tr> <td> <font $iKe=> face="arialE*erdana"> <br> E$ta e$ la huella de mi perrito. <br> <br> E$toy muy contento de (ue $e pa$ee de *eK en cuando por e$te $itio !eb. </font> </td> </tr> </table>
&e trata de una tabla a la que le "emos colocado una imagen de fondo, utilizando el atributo bacBground. Para que aparezca la imagen entera, la tabla se dimensiona al tamaCo de la imagen. l te!to que queremos escribir en el fondo de la imagen se coloca, tal cual, en la celda. 5tro ejemplo de im)genes de fondo en la ta#la 4tro efecto que queda muy atractivo es crear una imagen con una trama de dos colores, que se puede utilizar de fondo, en la pgina o bien en una tabla. &e puede ver el ejemplo aqu$.

21
l cdigo de la tabla ser$a el siguiente:

<table align=center !idth=J## cellpadding=4 cell$pacing=> background="trama.gif" bgcolor="######"> <tr> <td> <font $iKe=> face="arialE*erdana" color="9ffffff"> E$to podrQa $er una barra de enlace$ T Enlace > T -tro enlace T .ermino con lo$ enlace$ </font> </td> </tr> </table>
s un ejemplo muy simple y se consigue un efecto bastante elaborado. &i se embellece un poco ms, se podr$a utilizar para una barra de navegacin muy decente. 9ota: s importante que el color de las tablas Aatributo bgcolor? o las celdas donde coloques las imgenes de fondo Aatributo bacBground? sea lo ms parecido al color predominante de la imagen. :e este modo, se podrn ver perfectamente los te!tos que "ayas escrito en la celda mientras se carga la imagen de fondo o, incluso, si no llega a cargarse por cualquier problema.
Artculo por
'abla con dise o en su base

+mo dar formato a una tabla utili ando dibujos. Un efecto HTML para conse!uir que la silueta de la tabla no se vea totalmente cuadrada. 1abla con diseCo en su base 5amos a realizar un nuevo taller de #12% en el que crearemos una tabla con un pequeCo detalle para "acerla un poco especial. l detalle es una simple imagen que colocaremos en la base de la tabla para simular una silueta especial, evitando que la tabla se muestre como un rectngulo, como en realidad es. 7omo vale ms una imagen que mil palabras, es recomendable que veamos el resultado que estamos buscando en una pgina aparte para "acernos una idea e!acta del objetivo de este art$culo. %a tabla que vamos a "acer tiene una @nica particularidad. n la base "emos colocado una imagen que "ace que parezca que tiene el borde inclinado y con una pequeCa sombra. fectivamente, todo el efecto buscado se aplica con una sola imagen que colocamos en la celda inferior de la tabla. %a imagen es la siguiente:
%a tabla tendr entonces dos filas y una sola columna. n la fila superior colocaremos el te!to a introducir en la tabla y en la inferior la imagen. Pondremos de color de fondo en la tabla el mismo gris que el de la imagen, para que parezca que la imagen forma parte de la tabla. l cdigo es el siguiente:
<table !idth="1"#" cell$pacing="#" cellpadding="#" border="#" bgcolor=" F F F"> <tr> <td $tyle="padding)top%Op'= padding)left%Fp'= padding)right%4p'="> <b>-pcione$</b> <br> <br>

22

U 1o (ue $ea <br> U -pci?n guay <br> U 6:$ enlace$ <br> U E$to e$ otro te'to <br> U &era$ <br> U 6anKana$ <br> U 6elocotone$ <br> <br> </td> </tr> <tr> <td><img $rc="tabla1.gif" !idth="1"#" height=">O" border="#"></td> </tr> </table>
l @nico detalle que puede destacarse es que "emos colocado los atributos cellpadding y cellspacing a cero para evitar que "aya espacio entre las celdas de la tabla y que parezca que la celda de arriba est totalmente pegada a la de abajo. Para que la celda de arriba tenga un margen, de modo que el contenido no quede totalmente pegado al borde, se "a utilizado unos atributos de "ojas de estilo que definen el margen arriba, a la izquierda y a la derec"a respectivamente. 2a#la con otro color &i queremos "acer una tabla con el mismo efecto y otro color de fondo, tal como "emos "ec"o este ejemplo, necesitaremos una nueva imagen que tenga el color que deseemos para el fondo. Por ejemplo podr$amos "aber utilizado una imagen como esta:
n este caso el cdigo "ubiese sido este:

<table !idth="1"#" cell$pacing="#" cellpadding="#" border="#" bgcolor="F11F1F"> <tr> <td $tyle="padding)top%Op'= padding)left%Fp'= padding)right%4p'= color%9ffffff"> <b>-pcione$</b> <br> <br> U 1o (ue $ea <br> U -pci?n guay <br> U 6:$ enlace$ <br> U E$to e$ otro te'to <br> U &era$ <br> U 6anKana$ <br> U 6elocotone$ <br> <br> </td> </tr> <tr> <td><img $rc="tabla>.gif" !idth="1"#" height=">O" border="#"></td> </tr>

2;

</table>
&lo "emos cambiado el color de fondo de la tabla, poni3ndolo en rojo, y la imagen, por supuesto... todo lo dems se queda igual que en primer ejemplo. speramos que os "aya parecido interesante. 7on esta misma idea pero con otras imgenes estamos seguros de que podr3is "acer vuestros propios diseCos de tablas sencillamente. Para acabar, recomendamos ver el resultado en una pgina aparte.
Artculo por
'abla con dise o en su base !!

+ontinuamos con el captulo anterior/ ofreciendo otras distintas maneras de conse!uir efectos en una tabla. ( ra$z del taller de #12% 1abla con diseCo en su base, "emos "ec"o unas pequeCas modificaciones para ilustrar cmo podemos mejorar el efecto, "aci3ndolo ms verstil y manteniendo la sencillez. 7omo recordar el lector, en el anterior taller se "ab$an creado un par de tablas en distintos colores. Para ello "ab$amos utilizado dos imgenes, una en gris y la otra en rojo. l objetivo en este taller es utilizar una imagen que nos permita crear una tabla a la que podemos aplicarle distintos colores sin necesidad de disponer de varias imgenes. l ejemplo de lo que vamos a crear se puede ver en una pgina aparte. &e puede observar que se "an creado tablas con distintos colores, aunque la imagen utilizada en la base de las tres tablas es la misma. Para ello vamos a crear una imagen que se adapte a tablas con colores distintos. %a idea es crear una imagen que tenga en color blanco la parte de la tabla que no debe verse y en transparente la otra zona de la imagen que debe mostrar el propio color de la tabla. %a imagen en concreto es la siguiente:
#ay que colocar la imagen sobre fondo que no sea blanco para que pueda verse. l cdigo de la tabla es el siguiente, que sigue la misma filosof$a que en el art$culo anterior, por lo que si deseamos ms e!plicaciones es recomendable leerlo.
<table !idth="17F" cell$pacing="#" cellpadding="#" border="#" bgcolor=" F F F"> <tr> <td $tyle="padding)top%Op'= padding)left%Fp'= padding)right%4p'="> <b>-pcione$</b> <br> <br> U 1o (ue $ea <br> U -pci?n guay <br> U 6:$ enlace$ <br> <br> </td>

2<

</tr> <tr> <td><img $rc="tabla4.gif" !idth="17F" height=">"" alt="" border="#"></td> </tr> </table>
sta tabla se puede variar, como ya adelantbamos, cambiando el color de fondo de la tabla, con el atributo bgcolor.
<table !idth="17F" cell$pacing="#" cellpadding="#" border="#" bgcolor="F11F1F"> <tr> <td $tyle="padding)top%Op'= padding)left%Fp'= padding)right%4p'="> <b>-pcione$</b> <br> <br> U 1o (ue $ea <br> U -pci?n guay <br> U 6:$ enlace$ <br> <br> </td> </tr> <tr> <td><img $rc="tabla4.gif" !idth="17F" height=">"" alt="" border="#"></td> </tr> </table>
9ada ms= speramos que "ayis entendido la t3cnica de la imagen transparente y os "aya parecido interesante este taller. )ecordar que podemos ver el ejemplo completo en una pgina aparte
Artculo por
Listas &'ML hechas con tablas

Taller de HTML en el que se reali a una lista de elementos/ pero utili ando tablas en lu!ar de la estructura de lista OL o UL. %as listas de elementos creadas con #12% Acon las etiquetas 'ul. o 'ol.? son poco verstiles, por lo menos en mi opinin. &irven para "acer listas con bastante rapidez, pero si queremos realizar algo un poco ms complicado, no tenemos garant$as de que vaya a funcionar. Por ejemplo, puede que necesitemos una lista de elementos ordenada que tenga varios niveles de clasificacin F?, F.F?, F.G?, F.G.F?, F.G.G?, F.H?, G?... en este caso no nos servir para nada anidar las etiquetas 'ol., porque no "ay manera de especificar que la lista permita $ndices de tipo !.y? o !.y.z?. 4tro ejemplo para el que no nos sirve la lista, tal cual est definida en #12%, es una donde, en lugar de puntos en cada elemento, coloquemos el logo de la compaC$a para la cual estamos desarrollando la pgina. %a lista permite configurar para colocar varios tipos de puntos Abullets en ingl3s?: c$rculos, circunferencias, cuadrados, pero si deseamos que tengan otro tipo de elementos, tenemos que realizarlo a mano. 5eremos en este art$culo cmo utilizar una tabla para "acer una lista de elementos ms bonita. 9o es un ejercicio dif$cil, pero s$ @til. n mi caso, es ms "abitual realizar las listas con tablas que utilizar el propio sistema de listas proporcionado por #12%. spero que sirva tambi3n como ejercicio para las personas que se estn iniciando en el lenguaje #12%. 2a#la en lugar de lista Para ello vamos a realizar una tabla con dos columnas. n la de la izquierda colocaremos la imagen que queremos utilizar

2=
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com para la lista y en la de la derec"a, los te!tos de los elementos. 1endremos una fila por cada elemento de la lista. l ejemplo que vamos a construir tendr este aspecto:
Elemento
de la lista
Este sera un segundo elemento !aracterstica adicional a resaltar 3uede haber elementos cu%as caractersticas ocupen )arias lneas. !olocamos 45$67&8923 en la celda del bullet para :ue aparezca arriba.
l cdigo es muy simple de realizar. &implemente tenemos que conocer un poco el uso de tablas y proveernos de una imagen para los elementos de las listas. Podemos utilizar los atributos de la tabla para conseguir que se vea como deseemos. Por ejemplo, para separar las celdas, utilizamos los atributos de la tabla cellpadding y cellspacing. &i "ay elementos que ocupen varias l$neas es conveniente utilizar el atributo valign+top en las celdas de los bullets. l cdigo de este ejemplo ser$a el siguiente:
<table cellpadding=">" cell$pacing=">"> <tr> <td *align=top><img $rc="bullet.gif" !idth=">1" height="1O" alt="" border="#"></td> <td>Elemento 1 de la li$ta</td> </tr> <tr> <td *align=top><img $rc="bullet.gif" !idth=">1" height="1O" alt="" border="#"></td> <td>E$te $erQa un $egundo elemento</td> </tr> <tr> <td *align=top><img $rc="bullet.gif" !idth=">1" height="1O" alt="" border="#"></td> <td>CaracterQ$tica adicional a re$altar</td> </tr> <tr> <td *align=top><img $rc="bullet.gif" !idth=">1" height="1O" alt="" border="#"></td> <td>&uede haber elemento$ cuya$ caracterQ$tica$ ocupen *aria$ lQnea$. Colocamo$ B;12I<=.-& en la celda del bullet para (ue apareKca arriba.</td> </tr> </table>
5tro ejemplo 5eamos a"ora otro ejemplo muy similar. l efecto a buscar es el siguiente:
Elemento
de la lista
Este sera un segundo elemento !aracterstica adicional a resaltar 3uede haber elementos cu%as caractersticas ocupen )arias lneas. !olocamos 45$67&8923 en la celda del bullet para :ue aparezca arriba.

2>
Para "acer que la imagen del elemento de la lista quede bien alineada con el te!to de la derec"a, "emos utilizado el atributo vspace de '82D., que define el espacio libre en pi!els que debe de quedar arriba y abajo de la imagen. sto es especialmente @til si queremos utilizar bullets de tamaCo reducido. l cdigo ser$a el siguiente:
<table cellpadding="1" cell$pacing="1"> <tr> <td *align=top><img $rc="bulletVpe(.gif" !idth="J" height="J" <td>Elemento 1 de la li$ta</td> </tr> <tr> <td *align=top><img $rc="bulletVpe(.gif" !idth="J" height="J" <td>E$te $erQa un $egundo elemento</td> </tr> <tr> <td *align=top><img $rc="bulletVpe(.gif" !idth="J" height="J" <td>CaracterQ$tica adicional a re$altar</td> </tr> <tr> <td *align=top><img $rc="bulletVpe(.gif" !idth="J" height="J" <td>&uede haber elemento$ cuya$ caracterQ$tica$ ocupen *aria$ celda del bullet para (ue apareKca arriba.</td> </tr> </table>
Artculo por
alt="" border="#" *$pace="></td>
alt="" border="#" *$pace="></td> lQnea$. Colocamo$ B;12I<=.-& en la
3esti)n de ma(as
%amos a ver un script en el que podremos !estionar este tipo tan especial de im!enes. 6n mapa es una imagen que permite realizar diferentes "iperenlaces en funcin de la ,zona, de la imagen que se pulse. %as directivas para crear mapas son 6789:6;789: y 68RE8:. %a directiva 6789: identifica al mapa y tiene el parmetro name para indicar el nombre del mapa. %a directiva 68RE8: define las areas sensibles de la imagen. 1iene los siguientes parmetros obligatorios :
shape = "tipo" Indica el tipo de area a definir. coords = "coordenadas" Indica las coordenadas de la figura indicada con shape. href = "URL" Indica la direccin a la que se accede si se pulsa en la zona delimitada por el area indicada.
%os tipos de area pueden ser los siguientes :
rect Area rectangular. Se deben especificar las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha.
# $os manuales de DesarrolloWeb.com tienen el cop%right de sus autores. &o reproducir sin autorizaci'n. 2?
poly ol!gono. Se deben especificar las coordenadas de todos los "#rtices del pol!gono. $l "isor se encarga de "cerrar" la figura. circle %irculo. Se debe especificar en primer lugar las coordenadas del centro del c!rculo y a continuacin el "alor del radio &en puntos'.
&i dos areas se superponen, se ejecutar la que se encuentre en primer lugar en la definicin del mapa. s importante definir una @ltima area que abarque la totalidad del grfico para direccionar a una 6)% ,por defecto,, con el objeto de contemplar el caso de que no se pulse sobre un area definida. 5eamos un ejemplo completo.
<CE<.ED> <.; 1E order=>> <.,> < ><6;& name =</ > "ca$a"< >></ ><br> < ><;DE; $hape =</ > "poly" < >coord$ =</ > < >href=</ > "tejado.htm"< >></ ><br> < ><;DE; $hape =</ > "rect" < >coord$ =</ > < >href=</ > "puerta.htm"< >></ ><br> < ><;DE; $hape =</ > "rect" < >coord$ =</ > < >href=</ > "ca$a.htm"< >></ ><br> < ><;DE; $hape =</ > "circle" < >coord$ =</ < >href=</ > "arbol.htm"< >></ ><br> < ><;DE; $hape =</ > "rect" < >coord$ =</ > < >href=</ > "tronco.htm"< >></ ><br> < ><;DE; $hape =</ > "rect" < >coord$ =</ > < >href=</ > "dibujo.htm"< >></ ><br> < ></6;&></ > <.D> </.; 1E> </CE<.ED>
">EG>E"JEG>E>OE1" ">1E1#1E4"E14O" ">EG7E"JE14O" > "O#EJGE>1" "JOEFOEO"E14O" "#E#EFGE14O"
Para activar el mapa debemos indicar la imagen a mostrar, indicando que dic"a imagen es tratada por un mapa. Para ello escribir$amos la siguiente directiva :
<CE<.ED> <.; 1E order=>> <.,> < ><26I $rc =</ > "grafico.gif" < >u$emap =</ > "9ca$a"< >></ > <.D> </.; 1E> </CE<.ED>
&i tu visor tiene la capacidad de gestionar mapas A9etscape G.! o 2s; !plorer G.! o superiores?, prueba a pulsar sobre alguna parte del mapa que "emos definido y que te aparecer a continuacin:
<6;& name = "ca$a"> <;DE; $hape = "poly" coord$ = ">EG>E"JEG>E>OE1" href= "tejado.htm"> <;DE; $hape = "rect" coord$ = ">1E1#1E4"E14O" href= "puerta.htm"> <;DE; $hape = "rect" coord$ = ">EG7E"JE14O" href= "ca$a.htm"> <;DE; $hape = "circle" coord$ = "O#EJGE1O" href= "arbol.htm"> <;DE; $hape = "rect" coord$ = "JOEFOEO"E14O" href= "tronco.htm"> <;DE; $hape = "rect" coord$ = "#E#EFGE14O" href= "dibujo.htm"> </6;&> <CE<.ED> <26I $rc = "ca$a.gif" u$emap = "9ca$a"> </CE<.ED>
7omo podemos observar, el proceso mas laborioso es el de determinar las coordenadas. !isten programas como 7892H<S que permiten realizar este proceso de una manera sencilla, simplemente definiendo las zonas con el raton. l

2@
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com programa 2(P1#8& permite abrir una imagen tipo .D8* y marcar las zonas sensibles. ste programa creara un fic"ero con e!tension .map que contendra en su interior las coordenadas de cada area. 7on esta informacin nos sera muc"o mas facil escribir nuestro mapa. Puedes buscar este programa en &"areware.com buscando por mpt0s.
Artculo por
"olan# Nava
"ecuadro elegante 4 sencillo con &'ML

+mo $acer con HTML/ de manera sencilla ) prctica/ un recuadro para destacar parte del contenido de una p!ina &eb. (l maquetar una pgina web con #12%, es muy "abitual querer destacar una porcin de te!to que se desee remarcar. 2uc"as veces utilizamos tablas y le damos un borde o un fondo para destacar su contenido, pero no siempre resultan muy vistosas. n este sencillo taller, apto para principiantes, vamos a mostrar la manera de "acer un recuadro bonito con pocos recursos. &e trata de utilizar tablas, pero las decoraremos de una manera sencilla, pero que puede ser nueva para los menos e!perimentados. n principio, lo mejor ser que ec"emos un vistazo a los ejemplos que vamos a construir. 7omo se "a podido ver en el ejemplo, vamos a construir tres recuadros distintos, aunque muy similares. stos recuadros tienen un borde de F p$!el y colores distintos para el fondo de la celda con la cabecera y el cuerpo del recuadro. %as pautas de construccin son las siguientes: 7rear una tabla con un color de fondo como deseemos y con espacio entre celdas de F p$!el y espacio entre el borde de la celda y su contenido de H pi!el Aestos @ltimos atributos son cellspacing+,F, cellpadding+,H,? %a tabla tendr dos celdas. 6na con la cabecera de la tabla, donde colocaremos el t$tulo del recuadro y otra con el contenido propiamente dic"o. (mbas celdas tendrn estilos propios. l t$tulo estar ms destacado, poniendo negrita o un color al te!to que contraste bien y el cuerpo un color ms tenue, para ayudar a la lectura del te!to.
%os colores de fondo de las celdas se deben asignar tal como queramos que aparezca en la tabla. (s$ el fondo de la tabla slo se podr ver en el espacio que "ay entre celdas, que "ab$amos indicado que era un p$!el. 9rimera ta#la %a primera tabla tiene este cdigo:
<table !idth=">O#" cell$pacing="1" cellpadding="4" border="#" bgcolor="91EGJF;"> <tr> <td><font color="9FFFFFF" face="arialE *erdanaE hel*etica"> <b>Decuadro curio$o con 5.61</b> </font></td> </tr> <tr> <td bgcolor="9ffffcc"> <font face="arialE *erdanaE hel*etica"> E$te e$ el interior del recuadro. E$peramo$ (ue o$ re$ulte elegante... e$ muy $encillo. </font> </td> </tr> </table>
l color del te!to de la celda con el titular es blanco, para que contraste con el color de fondo de la celda, que es en este caso el mismo que el de la tabla, pues no se "a indicado ning@n color en la celda. %a celda con el cuerpo de la tabla se "a puesto de color amarillo plido

2A
Segunda ta#la %a segunda tabla que "emos realizado simplemente tiene un pequeCo cambio en el tipo de letra utilizado para los te!tos, que "emos "ec"o ms pequeCo. (dems, se "a asignado un color de fondo para la cabecera con el titular de la tabla, para que sea distinto que el fondo asignado para toda la tabla l cdigo de la segunda tabla es el siguiente:
<table !idth=">##" cell$pacing="1" cellpadding="4" border="#" bgcolor="91G"7O#"> <tr> <td bgcolor="9"F;G,J"> <font $iKe=1 face="*erdanaE arialE hel*etica"> <b>Decuadro curio$o con 5.61</b> </font> </td> </tr> <tr> <td bgcolor="9ffffcc"> <font face="*erdanaE arialE hel*etica" $iKe=1> E$te e$ el interior del recuadro. E$peramo$ (ue o$ re$ulte elegante... e$ muy $encillo. </font> </td> </tr> </table>
2ercera ta#la Para complicar un poco el ejercicio "emos pensado en que el cuerpo del recuadro destacado podr$a ser un conjunto de opciones. %as opciones las pondremos dentro de una tabla, pero dado que la tabla con las opciones debe tener estilo distinto que la tabla general, "emos metido una tabla dentro de otra, es decir, "emos "ec"o una anidacin tablas.
<table !idth=">##" cell$pacing="1" cellpadding="4" border="#" bgcolor="9O#;F4E"> <tr> <td bgcolor="9 JF>"F"><font $iKe=1 face="*erdanaE arialE hel*etica"><b>Decuadro curio$o con 5.61</b></font></td> </tr> <tr> <td bgcolor="9F"EC F"> <table !idth="F"W" cell$pacing="1" cellpadding="1" border="#" align="center"> <tr> <td *align=top><font face="*erdanaE arialE hel*etica" $iKe=1>U</font></td> <td><font face="*erdanaE arialE hel*etica" $iKe=1> -pci?n uno </font></td> </tr> <tr> <td *align=top><font face="*erdanaE arialE hel*etica" $iKe=1>U</font></td> <td><font face="*erdanaE arialE hel*etica" $iKe=1> -tra opci?n con te'to en *aria$ lQnea$ </font></td> </tr> <tr> <td *align=top><font face="*erdanaE arialE hel*etica" $iKe=1>U</font></td> <td><font face="*erdanaE arialE hel*etica" $iKe=1> 1o (ue $ea (ue de$ee$ de$tacar </font></td> </tr> <tr>

;B

<td *align=top><font face="*erdanaE arialE hel*etica" $iKe=1>U</font></td> <td><font face="*erdanaE arialE hel*etica" $iKe=1> Sltima opci?n </font></td> </tr> </table> </td> </tr> </table>
7omo se puede ver, esta tabla no difiere muc"o con la tabla segunda. &implemente que el cuerpo de la tabla es otra tabla. s un ejemplo de anidacin de tablas interesante para practicar #12%. &e pueden ver las tablas generadas con estos cdigos en una pgina aparte. Podemos comparar este art$culo con su contrapartida en 7&&.
Artculo por
'eclas r,(idas (ara los enlaces

Utili ando el atributo access1e) se pueden definir atajos de teclado para acceder a los enlaces directamente con la pulsacin de "LT ) una tecla que indiquemos en el atributo. %as teclas rpidas son atajos de teclado para realizar diversas acciones de una manera ms directa. &e implementan en todos los programas en general y sirven para mejorar la comodidad del usuario y la rapidez de uso del software, as$ como aumentar la accesibilidad de los programas, al no ser necesario el uso del ratn para ejecutar diversas acciones. n una pgina web tambi3n podemos utilizar teclas rpidas para acceder a ciertos enlaces o campos de formulario. !iste un atributo llamado accessBey que nos sirve para indicar la tecla rpida o atajo de teclado que asociaremos al elemento. Por ejemplo, en un enlace podemos definir una tecla rpida de esta manera: 'a "ref+,"ttp://www.estiloymoda.com, accessBey+,e,. stiloymoda.com'/a. 7omo se puede ver, simplemente "emos indicado ,e, como la tecla rpida para el enlace que nos llevar$a a la pgina estiloymoda.com. Para poner en marc"a una tecla rpida tenemos que combinar su pulsacin con la tecla (%1 Aalternativa?. n la prctica la tecla rpida simplemente nos llevar el foco de la aplicacin "acia el enlace, de modo que no lo ejecuta. Para que el navegador cambie la pgina y se mueva "acia el linB deber$amos pulsar luego la tecla 91 ). %a compatibilidad con navegadores cada vez es mayor para las teclas rpidas. <a es posible utilizarlas en todos los ms "abituales, como *irefo!, 8nternet !plorer u 4pera. A st disponible a partir de 8nternet !plorer I.O, con ciertas restricciones y de 9etscape K?. 9o obstante el EH7 recomienda el uso de accessBey, por lo que es normal que todos los navegadores las vayan incorporando. 7omo recomendacin, debemos seCalar de alguna forma que e!iste una tecla rpida para un enlace, posiblemente poniendo en negrita en el enlace la letra que implementa la tecla rpida, o subrayndola. ste @ltimo caso Ael subrayado? es en mi opinin ms intuitivo, pero como los enlaces ya aparecen subrayados, deber$amos "acer algo para quitrselo a fin de que se vea el subrayado de la tecla rpida. 5eamos cmo se puede "acer esto con un ejemplo:
<html> <head>

;1

<title>.ecla$ r:pida$ para enlace$</title> <$tyle type="te't/c$$"> a Nte't)decoration%noneP </$tyle> </head> <body>
5amos a "acer enlaces con teclas rpidas

<br> <a href="http%//!!!.e$tiloymoda.com" acce$$key="e"><u>E</u>$tiloymoda.com</a> <br> <a href="http%//!!!.de$arrollo!eb.com" acce$$key="d"><u>,</u>e$arrollo!eb.com</a> <br> <a href="http%//!!!.guiarte.com" acce$$key="g"><u>I</u>uiarte.com</a> </body> </html>
7omo vemos, se "a "ec"o uso de las "ojas de estilo para quitar el subrayado de los enlaces. %uego utilizamos la etiqueta 'u. para subrayar la letra que tiene la tecla rpida o atajo de teclado. 9o tiene ninguna complicacin. Podemos ver el ejemplo en marc"a en una pgina aparte.
Artculo por
Ma/uetar una (,gina %eb con tablas

'(plicaciones prcticas sobre la maquetacin de p!inas &eb con HTML usando tablas. n este art$culo vamos a estudiar el modo de creacin de una pgina web medianamente avanzada, en el que tenemos una estructura de columnas para mostrar los contenidos. Para crear la estructura de columnas utilizaremos tablas #12% y e!plicaremos algunos de los trucos t$picos utilizados para la maquetacin con tablas. %a motivacin de este art$culo es que "e recibido a menudo consultas sobre el procedimiento para crear pginas web con distintas columnas. n el manual de #12% se e!plican todos los detalles sobre la creacin de tablas, pero realmente no se cuenta cmo utilizarlas para maquetar una pgina web. :e modo que era necesario presentar un art$culo prctico para cubrir este asunto. 1ambi3n es importante decir que la corriente actual de diseCo de pginas web utiliza 7&& y capas, en lugar de tablas, para el posicionamiento de los contenidos. &i ya conoces 7&& posiblemente no te interese leer este art$culo. n ese caso te recomendar$a leer los contenidos acerca de la maquetacin 7&&. Pero en la prctica, muc"a gente visita :esarrolloEeb.com para aprender a "acer pginas web desde cero, y en un primer momento o si slo tienes conocimientos de #12%, es ms sencillo empezar a maquetar pginas usando tablas. 7aquetaci%n por ta#las paso a paso %as tablas en realidad estn pensadas para presentar informacin tabulada, es decir, usando filas y columnas. &in embargo, este uso lo podemos e!tender a toda la pgina web y crear una macrotabla que englobe todos los contenidos que se van a mostrar en la pgina entera. 7omo las tablas tienen filas y columnas, nos servirn para crear varias reas donde se mostrarn los contenidos maquetados como si fuera una revista o un portal. n este art$culo vamos a crear un ejemplo medianamente sencillo de maquetacin usando tablas. %o podemos ver a continuacin para "acernos una idea del objetivo buscado. 7omo "emos visto, esta pgina est compuesta por una cabecera y un cuerpo de pgina. Para crear la cabecera y el cuerpo utilizaremos tablas independientes. sto lo "acemos porque con dos tablas separadas para simplificar el ejemplo, es decir, por comodidad y porque se "ace ms fcil de diseCar. 9o obstante, como la distribucin de columnas y filas en la cabecera y cuerpo en este ejemplo es distinta, necesitamos utilizar tablas independientes. Pero la razn ms importante de poner cabecera y cuerpo en tablas distintas es que en algunos navegadores, cuando "ay diseCo con tablas, "asta que no se carga el

;2
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com cdigo de la tabla entera no se muestra nada. &i tuvi3ramos toda la pgina metida en la misma tabla, el usuario no ver$a nada "asta que no se terminase de cargar toda la pgina en su navegador. &i separamos las tablas de cabecera y cuerpo conseguimos que la cabecera de la pgina se cargue y se muestre rpidamente y luego, aunque tarde bastante en cargarse el resto de la pgina con todo el cuerpo, por lo menos el usuario ve la cabecera y puede saber que la pgina est por cargar del todo. n este caso la cabecera es bastante t$pica, con el logotipo, un banner y una barra de navegacin "orizontal. l cdigo puede ser como el siguiente.
<table !idth="JJO" cell$pacing="1" cellpadding="4" border="#" bgcolor="9######" align="center"> <tr> <td !idth=1O# align=center bgcolor="9ffffff"><img $rc="logo.gif" !idth="1"7" height="J>" alt=".odo Cl:$ico" border="#"></td> <td bgcolor="9ffffff" align=center><img $rc="banner.gif" !idth="7GO" height="G#" border="#"></td> </tr> <tr> <td col$pan=> bgcolor="9ffffff" background="fondohoriKontal.gif"> <font face="Iaramond">&ortada T <oticia$ T ;genda T ;rti$ta$ T .ienda</font> </td> </tr> </table> u$cador T Comunidad T
&i nos fijamos, la cabecera ten$a un contorno negro. sto lo conseguimos de manera similar a como e!plicamos en un taller anterior de #12%: )ecuadro elegante y sencillo con #12%. &implemente ponemos un color de fondo negro a la tabla, luego "acemos que las casillas est3n separadas Acellspacing? de un p$!el y definimos en blanco el color de todas las casillas. (s$, la separacin entre casillas aparecer en negro y las casillas en blanco. n este caso "emos definido un margen entre el borde de la casilla y el contenido Acellpadding? de tres pi!els, para que el contenido de las casillas no se pegue con el borde. %a barra de navegacin "orizontal ocupa todo el anc"o de la cabecera, por eso tiene un colspan+G. %e "emos puesto un fondo degradado para mejorar el diseCo un poco. 4tra cosa destacable es el anc"o de la tabla, que lo "emos "ec"o de LLM p$!eles. Podr$amos "aber "ec"o un diseCo que ocupase todo el anc"o de la pgina, pero "e creado un diseCo no fluido con anc"o fijo. ste tipo de diseCos, en mi opinin, son ms sencillos de que queden bien. l tamaCo de LLM p$!eles es porque es lo m!imo que se puede poner que quepa en definiciones de pantalla de MOO ! KOO. Podemos conocer ms sobre diseCos fluidos en el art$culo Pginas fluidas. 1ambi3n tenemos otro art$culo donde podemos saber ms sobre definiciones de pantalla. Por su parte, el cuerpo tiene una distribucin de tres columnas. l cdigo de la tabla que englobar$a todo el cuerpo es el siguiente:
<table !idth="JJO" cell$pacing="#" cellpadding="#" border="#" align="center"> <tr> <td !idth=1"# *align="top"> <+))<;BEI;,-D 1;.ED;1 2XA02ED,-))> </td> <td !idth=1#></td> <td !idth=7O7 *align="top"> <+))C0ED&- &D2<C2&;1))> </td> <td !idth=1#></td> <td !idth=1>7 align=center *align="top"> <+))1;.ED;1 ,EDEC5-))> </td> </tr> </table>
%a t3cnica para "acer esta tabla es distinta que la tabla de la cabecera. sta tabla no tiene reborde negro, para no recargar demasiado el diseCo de la pgina. Pero lo ms importante es que los mrgenes y espacio entre celdas Acellspacing y cellpadding? los "emos eliminado o puesto a cero. ntonces, los espacios que tiene que "aber entre celdas los "emos puesto con celdas vac$as de FO pi!el. sto lo "ago as$ porque de este modo me resulta ms sencillo calcular los espacios de la tabla y porque as$ podemos definir mrgenes que no afectan a todas las celdas de la tabla, sino slo a las que los necesitan. %a tabla tiene tres celdas donde se metern contenidos y dos celdas con espacio o mrgenes para separar las tres casillas

;;
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com donde estn los contenidos. :entro de cada celda colocamos los contenidos necesarios. n la primera ir la barra de navegacin de la izquierda, en la celda del centro el cuerpo principal y en la tercera casilla ir el lateral derec"o, que "emos utilizado para colocar publicidad. %os anc"os de cada celda, definidos por el atributo widt", son bastante t$picos en este tipo de estructuras de tres columnas. (dems, podemos ver que todas las celdas tienen el atributo valign+,top, para que los contenidos se sit@en en la parte de arriba de la tabla. l contenido de cada una de las celdas del cuerpo incluye ms cdigo #12%, incluso otras tablas anidadas. n general, podemos poner en cada columna el cdigo #12% que necesitemos, con cualquier etiqueta, teniendo en cuenta que el anc"o disponible est limitado al anc"o de la celda. Podemos ver el ejemplo en una pgina aparte. 2irar tambi3n el cdigo fuente para ver el ejemplo con su codificacin completa.
Artculo por
"ecargar o redirigir a otra (,gina con &'ML

+di!o HTML en etiquetas M'T" para refrescar una p!ina o $acer una redireccin a otra p!ina automticamente. n las etiquetas 2 1(, como probablemente sabremos, se indican informaciones sobre las palabras clave y descripciones de los documentos, autor$a y propiedad, m3todos de contacto, etc. Pero tambi3n podemos indicar otras acciones al navegador que pueden resultar @tiles para los desarrolladores, como indicar un refresco o una redireccin. n este art$culo veremos cmo "acerlo. %a etiqueta 2 1( que se "ace para indicar al navegador un refresco o una redireccin tiene la forma siguiente:
<6E.; 5..&)EA02B="DEFDE85" C-<.E<.=""=0D1=http%//!!!.de$arrollo!eb.com">
7omo vemos, el atributo #11P; 0685 se indica una informacin al navegador como si fuera enviada en la cabecera del "ttp, es decir, la instruccin enviada en una etiqueta 2 1( que utiliza #11P; 0685 es equivalente a si 3sta se "ubiera enviado en la cabecera del "ttp. n este caso, que lo tenemos igualado a ) *) &#, es para indicar queremos "acer un refresco de la pgina. n el atributo 7491 91 indicamos las caracter$sticas del refresco. l valor asociado contiene dos partes, primero el tiempo en segundos de espera para "acer el refresco o redireccin y la 6)% a la que enviar el navegador. 9)gina para 0acer una redirecci%n con H27/ l cdigo #12% de la pgina completo para "acer una redireccin ser$a el siguiente:
<html> <head> <title>Dedirigir al na*egador a otra 0D1</title> <6E.; 5..&)EA02B="DEFDE85" C-<.E<.=""=0D1=http%//!!!.de$arrollo!eb.com"> </head> <body> E$ta p:gina cambia en " $egundo$ por la portada de ,e$arrollo3eb.com </body> </html>
&e puede ver en marc"a en una pgina aparte. 9)gina que se refresca ella sola al pasar unos segundos ("ora veremos tambi3n un ejemplo de pgina que se refresca o recarga cada segundo que pasa. n esta pgina, para comprobar que se refresca y se recarga su contenido, "emos utilizado un poco de javascript para mostrar la "ora, minutos y segundos actuales, as$ en cada recarga podremos ver que los segundos van incrementndose.
<html>

;<

<head> <title>Defre$car la 0D1</title> <6E.; 5..&)EA02B="DEFDE85" C-<.E<.="1=0D1=refre$car.html"> </head> <body> 5ora% <$cript> miFecha = ne! ,ateYZ document.!riteYmiFecha.get5our$YZ U "%" U miFecha.get6inute$YZ U "%" U miFecha.get8econd$YZZ </$cript> </body> </html>
n este caso, en la 2 1( para definir el refresco "emos especificado que se realice cada segundo y que llame a la 6)% refrescar."tml. 4bviamente, el arc"ivo #12% tiene el nombre refrescar."tml, de modo que la recarga llamar a la misma pgina todo el tiempo. &e puede ver en marc"a en una pgina aparte.
Artculo por
'rans(arencia en *ormatos gr,*icos (ara %eb 3!F 4 5N3

+omo $acer im!enes transparentes para la &eb/ con formatos 2-3 ) 452/ para eliminar los molestos $alos. ste taller de #12% vamos a mostrar un ejemplo de transparencia en formatos grficos D8* y P9D, comprobando sus diferencias y las ventajas que nos aporta P9D de GI bits para eliminar los "alos. l que vamos a ver es un ejemplo muy simple, pero muy interesante para ilustrar un modo de "acer transparencias que siempre quedan bien, sobre cualquier fondo. %os "alos son los bordes que a veces salen en las imgenes que tienen transparencias, que resultan como un borde de color que rodea las siluetas de los dibujos de la imagen. (unque no sepas lo que es un "alo, seguro que "as visto diversas pginas web que tienen "alos en sus imgenes, efectos que quedan muy mal y dan mala imagen del desarrollador de la pgina. %os dos formatos que soportan transparencia, que podemos utilizar para el desarrollo de una pgina web, son el D8* y P9D. l formato P9D es muc"as veces desconocido por los desarrolladores, o simplemente ignorado, porque anteriormente no era compatible con todos los navegadores. n el momento actual, ning@n navegador tiene problemas para mostrar los arc"ivos P9D, pero como este formato no se empez a utilizar desde el principio muc"os de los desarrolladores no lo usan "abitualmente.

;=
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com n este taller vamos a utilizar un par de imgenes, que son estas:
76(
3&7;2+ bits
7omo "emos podido comprobar, tenemos dos imgenes, en los dos formatos mencionados: D8* y P9D. Podemos ver que en este caso muestran pocas diferencias, o ms bien ninguna a simple vista. %as dos se ven igual de bien, aunque realmente no se nota que sea una imagen transparente porque realmente las "emos colocado sobre fondo blanco. 5eamos estas dos imgenes sobre un fondo de otro color:
76(
3&7;2+ bits

;>
n este otro caso todo va bastante bien, las diferencias son casi inapreciables. l fondo de color rosa es bastante claro y no permite ver realmente lo que queremos mostrar en el ejemplo. (s$ que vamos a mostrar estas dos imgenes sobre un fondo ms oscuro, que s$ nos va a servir para ver el efecto desagradable que empieza a acusar el formato D8*.
76(
3&7;2+ bits
n esta muestra podemos ver los famosos "alos, en el formato D8*. &on esa silueta blanca que aparece alrededor de los dibujos de la imagen. PPor qu3 ocurre esoQ l borde de la figura est suavizado, por lo que los p$!el alrededor de esta tienen tonalidades que no son directamente el color de la figura ni el transparente del fondo. 7uando "acemos esta imagen con P"otos"op, o cualquier otro programa de diseCo grfico, nos va ocurrir esto con el suavizado, porque el siempre tiende "acia un color de fondo, en este caso el blanco. ( no ser que quitsemos el suavizado no quitar$amos los "alos, as$ la forma tendr$a un color y luego directamente aparecer$a el transparente, pero eso os puedo asegurar que "ar que la imagen pierda bastante calidad. n D8*, con un poco de trabajo lo podemos arreglar, simplemente con nuestro programa de diseCo grfico "acemos la figura sobre otro fondo, del color que necesitemos. s decir, dibujamos la forma directamente sobre un fondo del mismo color que el de donde la pensamos colocar. %uego marcamos como transparente el color de fondo. l suavizado permanecer, tendiendo a ese color en lugar del blanco. Pero claro, siempre tenemos el problema que la imagen slo nos servir para fondos de la tonalidad para la que la "emos preparado, o una muy similar. 7on el formato P9D;GI bit no tenemos ese problema, la imagen contin@a transparente. sto resulta una ventaja bastante interesante, porque nos servir siempre, independientemente del fondo sobre el que la pongamos.

;?
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ("ora vamos a ver el ejemplo sobre un fondo negro:
76(
3&7;2+ bits
ste es el peor de los casos, donde el "alo resulta ms patente. s porque "ab$amos creado la imagen sobre fondo blanco y el suavizado blanco alrededor de la figura contrasta e!ageradamente sobre el negro de fondo. 2ientras tanto, el formato P9D sigue comportndose igual de bien con la transparencia. 8ncluso si ponemos la imagen sobre un fondo que tenga una te!tura o cualquier otro dibujo, el P9D sigue vi3ndose perfecto.
76(
3&7;2+ bits
(onclusi%n so#re transparencia =<F y 9$= 9o se debe desestimar P9D. (l contrario, "emos querido resaltar sus ventajas, a la "ora de tratar la transparencia, con respecto al formato D8*. %as transparencias que conseguimos con P9D son muc"o ms verstiles porque las podemos utilizar sobre cualquier fondo que necesitemos. Pero el formato D8* tambi3n es interesante como formato y tambi3n para "acer transparencias, por ello no conviene rec"azarlo de entrada igual que posiblemente nos "ab$a ocurrido con el P9D. 1enemos un art$culo en :esarrolloEeb.com que tal vez te interese leer sobre 7mo "acer una transparencia con D8* sin "alo.
Artculo por

;@
5oner vdeo en una (,gina %eb a travs de 6ou'ube

Una forma mu) sencilla de poner un vdeo en una p!ina &eb es subirlo a 6ouTube ) lue!o incrustarlo en la p!ina &eb por medio de un cdi!o HTML que ellos proporcionan. Para poner v$deo en una pgina web, una de las opciones ms simples es subirlo a <ou1ube.com y enlazar con el v$deo para que se muestre desde all$. Puedes poner un linB que vaya a <ou1ube directamente o un cdigo #12% para que el v$deo se muestre dentro de tu propia pgina web. Publicar v$deos en <ou1ube tiene varias ventajas, entre las cuales podr$amos destacar: 1us v$deos no ocupan espacio en tu alojamiento web. %a transferencia debida a los v$deos corre a cargo de <ou1ube, por lo que no se afectar a tu servidor Aen velocidad y anc"o de banda consumido? porque "ayan muc"os visitantes viendo v$deos y tampoco te cobrarn de ms por pasarte de Digas transferidos en tu "osting. s e!tremadamente sencillo subir v$deos a <ou1ube y luego colocarlos en tu web. 9o tienes que preocuparte por casi nada en todo lo relativo a formatos o compatibilidad de tu v$deo con diversos tipos de navegadores. %a definicin de tu v$deo es fija. 7uando subes el v$deo <ou1ube lo procesa para ajustarlo a sus tamaCos y calidades estndar. %os v$deos que se pueden subir tienen una duracin m!ima de FO minutos y FOO 2B. 1us v$deos son p@blicos Aaunque en <ou1ube puedes restringir ms o menos su difusin?. s una posible salida de visitantes de tu pgina: puede que algunos usuarios se vayan a <ou1ube a seguir viendo v$deos o cualquier otra cosa.
Pero no todo son ventajas, pues "ay algunos detalles que no son tan buenos:
(s$ pues, si te interesan las ventajas anteriores y no te importa padecer ciertas desventajas, como "acer tu contenido p@blico en otro sitio web o no te importa que el tamaCo de los v$deos sea menor que el que posiblemente tenga tu original, pues <ou1ube es sin duda una gran opcin. "ttp://www.youtube.com/ Para subir un v$deo a <ou1ube se necesita estar registrado como usuario. )egistrarse es muy sencillo y no requiere ning@n conocimiento especial. 6na vez registrado recibirs un correo con un linB para confirmar tu cuenta, que sirve para que ellos sepan que tu correo te pertenece y fue escrito correctamente. &in confirmar tu correo no te permiten subir v$deos. 6na vez registrado y confirmado tu correo, accedemos a nuestra cuenta y podremos subir un v$deo desde el botn de subir o bien a trav3s del enlace ,7uenta, que aparece arriba a la derec"a y luego ,2is v$deos, y luego pulsando el botn ,subir un v$deo, que aparece a la izquierda. ntonces sigues los pasos para colocar el v$deo. 4freces primero una descripcin y luego subes el arc"ivo con tu v$deo. 1ardar unos minutos en cargarse el v$deo dependiendo del tamaCo que tenga y luego otros tantos minutos <ou1ube en procesarlo para ajustarlo a su formato propio. ( partir de entonces tienes el v$deo en tu cuenta y podrs acceder a 3l a trav3s del enlace de ,2is v$deos,. Para conseguir el trozo de cdigo que tienes que pegar en el #12% de tu pgina tienes que ir a tu cuenta, luego a ,mis videos, y luego abrir la ventana de edicin de la informacin del v$deo, a trav3s del botn , ditar informacin de v$deo,. ntonces aparecen varios campos y uno abajo del todo con el cdigo que tienes que copiar y pegar en el #12% de tu pgina, en el lugar donde quieres que salga el v$deo. :ic"o cdigo ser algo parecido a esto: 'object widt"+,IGJ, "eig"t+,HJO,.'param name+,movie, value+,"ttp://www.youtube.com/v/ t%jqH4csKw,.'/param.'embed src+,"ttp://www.youtube.com/v/ t%jqH4csKw, type+,application/!;s"ocBwave;flas", widt"+,IGJ, "eig"t+,HJO,.'/embed.'/object.

;A
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 7on este trozo de cdigo se mostrar tu video con los controles de <ou1ube para ponerlo en marc"a, detener la reproduccin, controlar el volumen, etc.
Object 1
$otas adicionales so#re su#ir v>deos a ?ou2u#e: %a imagen que aparece al principio en el v$deo la puedes seleccionar al editar las informaciones del v$deo. Por defecto ya colocan en la mayor$a de los casos el primer fotograma, pero luego podemos seleccionar otro fotograma si lo deseamos. %os cambios en las imgenes iniciales llevan unas "oras, as$ que tendrs que tener paciencia si "as cambiado la imagen. ( veces no te aparece la imagen inicial del v$deo y en su lugar sale una imagen por defecto. n unos minutos u "oras podrs ver que <ou1ube se actualiza y te permitir seleccionar la foto fija que deseas. Pero en cualquier caso informan que puede tardar "asta K "oras en actualizarse. %uego, en las informaciones del v$deo, se puede elegir incluso el lugar donde se "a realizado la grabacin. n resumen, con <ou1ube podemos fcilmente empezar a distribuir contenidos multimedia, al alcance de todos.
Artculo por
!uis Javier Alvarez
C)mo hacer una trans(arencia con 3!F sin halo

+mo $acer una ima!en con formato 2-3 que ten!a transparencia ) suavi ado/ pero sin que apare can $alos. %os "alos son unos efectos poco deseables en imgenes que tienen el fondo transparente, generalmente en formato D8*. %o que ocurre con los "alos es que aparece una l$nea de color alrededor de la silueta de la imagen. sta l$nea puede ser oscura o clara. &i es oscura y la colocamos sobre un fondo oscuro, no se ver el "alo y todo ir bien. &i es oscura y la colocamos sobre un fondo claro tendremos el mencionado efecto de "alo. n formato D8*, siempre que la silueta de la imagen tenga el borde suavizado, vamos a sufrir el efecto del "alo. ("ora bien, si el "alo tiene una tonalidad similar al fondo donde estamos colocando la imagen, no lo veremos y el resultado ser bueno. Por eso a veces las imgenes D8* vienen preparadas para colocar sobre fondos claros u oscuros. &i la colocamos sobre un

<B
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com fondo con una tonalidad que no le corresponde saldr la silueta rodeando la imagen, osea, aparecer el dic"oso "alo. Por ejemplo, aqu$ tenemos una imagen que tiene un "alo.
l "alo es ese pequeCo borde oscuro que "ay alrededor de la silueta del c$rculo y del caracol. ste "alo aparece porque esta imagen D8* transparente est preparada para colocar sobre un fondo oscuro. :e "ec"o, aqu$ tenemos la prueba de lo bien que se ver$a la imagen sin el "alo si la colocamos sobre un fondo negro.
Referencia: #emos publicado otro art$culo con detalles sobre los formatos grficos D8* y P9D y los "alos: 1ransparencia en formatos grficos para web D8* y P9D. El suavi ado provoca los 0alos n cuanto la imagen tenga un suavizado e!istir un "alo. &i el suavizado de la imagen est preparado para un fondo claro y la imagen se coloca sobre un fondo claro, no se ver el "alo. Pero si la imagen tiene un suavizado tirando a claro y se coloca sobre un fondo oscuro, el "alo aparecer. s decir, siempre tenemos que colocar la imagen sobre un fondo parejo al que la "ayamos preparado. &i no tenemos suavizado no saldr el "alo, pero el efecto ser sensiblemente peor, en muc"os de los casos. n la imagen siguiente "emos "ec"o el mismo diseCo, pero sin suavizado.
7reo que para cualquier persona saltar a la vista que el resultado tiene peor calidad. l "alo "a desaparecido pero se nota el pi!elado alrededor de la imagen. Hacer un suavi ado del color deseado para evitar el 0alo ("ora vamos a mostrar la manera de conseguir un suavizado sin que aparezca el "alo. 5amos a trabajar con P"otos"op, aunque cada cual "ar un proceso similar en su programa de diseCo grfico preferido.

<1
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 7omenzamos con una imagen con el lienzo del color que deseamos como fondo. s decir, colocamos el fondo del mismo color de del fondo la web.
%uego "acemos el diseCo que queramos.

<2
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ( continuacin "acemos un ,&alvar para Eeb,, en el men@ (rc"ivo de P"otos"op, para guardar la imagen pasando por un cuadro de dilogo que nos va a permitir realizar una serie de acciones para seleccionar la transparencia.
n la ventana de Duardar para web tenemos que "acer tres pasos. A&iempre tener en cuenta que queremos guardar la imagen en formato D8*, que se indica en las opciones que "ay a la derec"a. Pues si estamos guardando con otro formato como SPD, no podremos seleccionar transparencia porque no tiene. (dems tenemos que "aber marcado el c"ecBbo! para permitir transparencia.? F. Primero seleccionamos la "erramienta cuentagotas. G. ( continuacin "acemos clic en el color que queremos que sea transparente, que ser el fondo de la imagen. H. Por @ltimo apretamos el botn para asignar los colores seleccionados al transparente. 7on ello conseguimos que el color seleccionado se muestre como transparente. ste proceso lo podemos repetir si queremos que varios colores de la imagen se muestren como transparente.

<;
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com l resultado es el siguiente:
4bservaremos que la imagen, sobre fondo blanco, aparece con un "alo azul, pero cuando pongamos la imagen sobre un fondo que tenga la tonalidad azul, el "alo desaparecer de nuestra vista.
Artculo por
Contador de visitas con la (rocedencia de los usuarios

4resentamos +lustrMaps/ un contador para saber la procedencia de los visitantes de tu &eb. 0ueremos "ablar sobre 7lustr2aps, un novedoso servicio de contador, que tiene la particularidad que sirve para conocer la procedencia de los visitantes de tu web. s un servicio gratuito que puedes incorporar en cualquier web, sin prcticamente conocimientos #12% ni ning@n conocimiento de programacin. l sistema lo ofrece una pgina web que se puede acceder a trav3s de la 6)%: "ttp://clustrmaps.com/ stn en fase Beta, lo que quiere decir que todav$a estn desarrollando o mejorando el sistema, pero ya lo podemos incorporar en nuestra pgina web. Para conseguir un contador nos tenemos que registrar en dic"a pgina. 9o nos piden ninguna informacin personal, salvo la 6)% donde vamos a incorporar el sistema y nuestro email. 9os enviarn la clave para acceder a los servicios a nuestro correo electrnico. 6na vez la recibamos podremos acceder a la pgina a trav3s de la direccin de nuestro sitio y la clave. 6na vez dentro nos darn un cdigo fuente que podemos copiar y pegar en la pgina. 1ienen unas cuantas versiones del cdigo, que podemos elegir la que mejor se ajuste a nuestras necesidades. 1ienen una versin incluso para utilizar si nuestra pgina est alojada en un servidor como 2y&pace. 9osotros "emos colocado el primero de los cdigos que proveen y el resultado es el siguiente.
%o interesante es que este cdigo lo coloquemos en todas las pginas de nuestro sitio web, en el lugar donde queramos que aparezca el contador, para que contabilice las entradas de usuarios de cualquier pgina, no slo la portada. 9osotros en este caso slo "emos colocado el cdigo en este art$culo, por lo que slo est contando las visitas de este te!to y no de todo :esarrolloEeb.com.

<<
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com %uego podemos marcar alg@n comportamiento del sistema, como que cuente las vistas de todo el aCo o bien de un solo d$a. 5eremos que no slo nos dice del pa$s que vienen los visitantes, sino la localizacin espec$fica de su ciudad. 1iene un sistema de puntos que, a mayor tamaCo del punto, indica que el n@mero de usuarios que vienen de ese lugar es ms grande.
Artculo por
Animaci)n &'ML sencilla con mar/uee

Utili amos la etiqueta marquee para reali ar una animacin sencilla en una p!ina &eb. +omo animar una ima!en o $acer te(to en moviendo slo con HTML. ste art$culo sirve para las personas que trabajan tan slo con #12% al "acer pginas web y que quieren incorporar un tipo simple de animacin en sus sitios. 6na solucin fcil para "acer una animacin con #12% es "acer uso de 2arquee. #ace no muc"o tiempo recibimos un correo de 7arlos %pez &c"midt en el que nos suger$a un truco para animar imgenes en pginas web utilizando marquee. 7omo no ten$amos por ning@n sitio e!plicaciones sobre la etiqueta #12% '2()06 ., nos "emos dedicado a escribir este te!to que da unas especificaciones y consejos ms detallados sobre la etiqueta. :e todos modos, "ay que agradecer a 7arlos la inspiracin para escribir estas l$neas. '2()06 . es una de esas etiquetas no estndar de #12%, que soportan los navegadores ms comunes, pero que no estn comprendidas dentro de las especificaciones de #12%. &irve para animar elementos dentro de la pgina. n concreto permite que el contenido que pongamos dentro de la etiqueta, ya sea te!to, fotograf$as, o las dos cosas, se desplace "orizontalmente por la pgina. %a etiqueta marquee puede servirnos para "acer animaciones en pginas sencillas, sin ning@n conocimiento de lenguajes de programacin ni otras complicaciones semejantes. Para los que slo conocen #12% es una "erramienta perfecta si desean "acer que un elemento de la pgina se mueva. Pero atencin, aunque est3 comentando este truco para mover te!to por la pgina o imgenes, tenemos que utilizar el marquee con muc"a prudencia, puesto que tiene desventajas: 2arquee no est comprendido en los estndar #12% 6tilizar 2arquee puede tener problemas de accesibilidad, es decir, se puede "acer dif$cil de leer para determinadas personas con discapacidades. l "ec"o de animar elementos de una pgina favorece el dinamismo y ayuda a llamar la atencin sobre determinados mensajes o imgenes, pero si utilizas marquee en muc"os lugares puede provocar confusin y marear al usuario.
Para utilizar marquee, simplemente colocamos dentro de la etiqueta los contenidos que queremos que se muevan, ya sean te!to, imgenes o cualquier otro tipo de contenido. (lgo como esto:
<mar(uee>te'to (ue $e mue*e</mar(uee>
Pero tambi3n podr$amos meter algo como esto:

<mar(uee> <table align="center" !idth="1##"border="1"> <tr> <td>E$ta tabla $e de$plaKa E con todo el contenido de la tabla</td> </tr> </table> </mar(uee>
2arquee soporta una serie de atributos para modificar su comportamiento o su aspecto. &on los siguientes: E8:1#

<=
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com (nc"ura de la marquesina. &i no marcamos altura, se colocar en la siguiente l$nea, como en un prrafo distinto. &i marcamos una anc"ura, la marquesina intentar mostrarse en la misma l$nea donde la "ayamos colocado. &i no "ay espacio para ella se realizar el consiguiente salto de l$nea para mostrarla un poco ms abajo. :8) 71849 #acia donde queremos que se displace el contenido del marquee. %os posibles valores son ,% *1, y ,)8D#1,. B #(584) s el comportamiento de la marquesina, de entre los posibles: &7)4%% Ael comportamiento por defecto? indica que tiene que "acer el desplazamiento siempre en una misma direccin y (%1 )9(1 , que indica que el desplazamiento se "ace a un lado y al otro de manera alternada. &7)4%%: %(< s el tiempo en milisegundos que tiene que pasar entre cada cambio de la posicin de lo que "ay desplazndose. s decir, cuanto mayor sea el valor, ms milisegundos tardar la marquesina en moverse. l valor por defecto es MJ, pero si por ejemplo ponemos un valor JOO la marquesina cambiar de estado Adesplazar el contenido? cada medio segundo. &7)4%%(24691 s la cantidad de pi!el que tiene que desplazarse el contenido de la marquesina cada vez que se mueve. ( mayor scrollamount, ms se desplazar la marquesina en cada movimiento y por tanto la animacin ser ms rpida. l valor por defecto es K. Podemos probar a colocar un valor mayor y veremos que el movimiento ser ms ,a golpes,. %44P l n@mero de ciclos que va a moverse el te!to o lo que quiera que "aya dentro de la marquee. ste atributo slo funciona en 8nternet !plorer. Por defecto es 89*8981 , que quiere decir que se desplazar todo el tiempo sin parar. Pero si por ejemplo colocamos un valor como H, querr decir que la marquesina slo realizar tres ciclos o movimientos y luego parar. BD74%4) l color de fondo de la marquesina. (cepta el nombre de un color #12% o bien un valor )DB de dic"o color. #&P(7 y 5&P(7 stos dos atributos sirven para definir el n@mero de p$!el que debe aparecer entre la marquesina y otros contenidos de la pgina, en "orizontal y vertical. (lgunos ejemplos de marquee:
<mar(uee !idth=>## direction=right> 6ar(ue$ina a la derecha y con ancho </mar(uee> <mar(uee beha*iour=alternate $crolldelay="## bgcolor="9ffOO44">te'to (ue $e mue*e</mar(uee>
Puedes ver el ejemplo en marc"a en una pgina aparte.

Artculo por
+eclaraci)n +7C'65- en documentos &'ML

'studio de la declaracin del tipo de documento HTML/ que se especifica en la declaracin #O+T64' al principio del cdi!o. n este articulo nos centraremos en la declaracin :471<P de los documentos #12%. % EH7 AEorld Eide Eeb 7onsortium: www.wH.org?, encargado de la creacin de los &tandard webs, define que los

<>
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com fic"eros #12%, W2%, W#12% deben tener una declaracin de tipo 45(2?9E que debe "acer referencia a una de las tres definiciones del tipo de documento que e!isten. sta declaracin debe ser la primera l$nea de nuestro documento y es necesaria para decirle al navegador qu3 versin de #12% es la que se usa en la pgina. &i no se "ace, el navegador procesara la pgina en modo 0uirBs Amodo de compatibilidad? pudiendo no interpretar correctamente el cdigo de la pgina. %a :1: Adefinicin del tipo de documento? es la estructura reglamentaria, es decir, los elementos y atributos que estn disponibles para cada tipo de documento. Para #12% I.OF Alas versiones anteriores no son recomendables debido a que no son del todo compatibles con las #ojas de stilo?, e!isten H tipos de :1:: F. H27/ 1.@* transitorio l #12% I transitorio incluye todos los elementos y cualidades de #12% I &trict pero agrega cualidades presentational, elementos desaprobados o elementos obsoletos. &e llama 1ransitional porque est pensado como transicin "acia #12% I estricto. l modo de definirla es: '=:471<P #12% P6B%87 X,;//EH7//:1: #12% I.OF 1ransitional// 9X, X,"ttp://www.wH.org/1)/"tmlI/loose.dtdX,. G. H27/ 1.@* Frameset: sta es una variante de #12% I transitorio para los documentos que utilizan *rames Amarcos?. l modo de definirla es: '=:471<P #12% P6B%87 X,;//EH7//:1: #12% I.OF *rameset// 9X, X,"ttp://www.wH.org/1)/"tmlI/frameset.dtdX,. H. H27/ ES2R<(25 &i declaramos este :1: el navegador pasar a actuar cumplimiento de los estndares A&tandards comp$lanse?. sto implicara que solo puedan usarse las etiquetas de #12% I.OF. ste es el modo recomendado por el EH7, ya que es compatible con el 7&& y puede ser interpretado correctamente por todos los navegadores, "aciendo muc"o ms fcil el paso de nuestros documentos al W#12% que muy posiblemente tienda a sustituir al #12% en los pr!imos aCos. l modo de definirla es: '=:471<P #12% P6B%87 X,;//EH7//:1: #12% I.OF// 9X, X,"ttp://www.wH.org/1)/"tmlI/strict.dtdX,. &i queremos saber si nuestra pgina cumple con el :1: definido podemos "acerlo desde "ttp://validator.wH.org/
Referencia: &i quieres obtener ms informacin sobre la declaracin doctype puedes consultar el siguiente art$culo de :esarrolloEeb.com :octype en #12% y W#12%. (dems mostramos otros tipos de doctypes que puedes aplicar a documentos en W#12%.
Artculo por
Jose A$ Molina

<?
-ti/uetas (ara resaltar te.to en &'ML

"l!unas etiquetas que pueden servir para resaltar te(to en HTML/ como subra)ado/ tac$ado/ encabe amientos ) formateos de te(to de prrafo/ como citas/ tro os de cdi!o/ etc. #12% tiene unas cuantas "erramientas para resaltar te!to que vamos a ver en este art$culo, que ofrece algunos detalles prcticos, aunque tambi3n tericos, del lenguaje de etiquetas para la creacin de pginas web. Para ver otros art$culos prcticos consultar el taller de #12%. 7omo debemos saber, #12% es un lenguaje que sirve para crear pginas web. s especialmente indicado para escribir los contenidos de las pginas, aunque tambi3n tiene una buena gama de etiquetas para formatear te!to y presentarlo de una manera atractiva o simplemente clara. <a publicamos un completo manual de #12%, con unas e!plicaciones detalladas sobre la creacin de pginas web, pero a"ora vamos a ver un compendio de etiquetas que sirven especialmente para formatear y destacar te!to, pues algunas de ellas no llegamos a verlas en el manual, por tratarse de etiquetas poco utilizadas. $ota: antes de continuar es importante seCalar que el formateo de te!to a"ora se "ace con 7&&, que permite trabajar de una manera muc"o ms detallada, cmoda y completa con el estilo de las pginas web. Pues veamos las etiquetas para destacar te!to: 6A: o 6S2R5$=: %as ms conocidas y utilizadas son las negritas, que simplemente ponen el te!to con una anc"ura mayor, como ms resaltado. Este es el efecto de una negrita 6<: o 6E7: %as itlicas o cursivas, que sirven para "acer que el te!to se incline a un lado. Este texto est itlica o bien cursiva 6B: sta etiqueta sirve para que se subraye el te!to, apareciendo una l$nea por debajo del mismo. (unque en #12% I esta etiqueta se "a marcado como obsoleta o no incluida en las especificaciones, todos los navegadores contin@an entendi3ndola. ste te!to est subrayado 6S2R<"E: sta etiqueta no es muy conocida y tampoco muy utilizada. &irve para que el te!to aparezca tac"ado, es decir, con una l$nea por encima del te!to. sta etiqueta es muy @til cuando actualizamos una informacin que aparece en una pgina y la sustituimos por otra. n vez de borrar la anterior informacin la podemos tac"ar, para que los lectores puedan comprobar que la pgina se encuentra siempre actualizada y en revisin. %e pasa lo mismo que a la etiqueta 'u., que en la especificacin de #12% I no est incluida. &in enbargo, todos los navegadores la entienden y renderizan perfectamente. ste te!to est tac"ado Enca#e amientos 6H*: C 6H!: %as etiquetas de encabezamientos, o "eadings en ingl3s, sirven para destacar un te!to, pero no las podemos utilizar en cualquier caso, porque un encabezamiento siempre indica un titular o la apertura de una nueva seccin con un t$tulo. %as tenemos que utilizar entonces para estructurar nuestros documentos en secciones y subsecciones y titular cada una de ellas con un nivel adecuado. '#F. deber$a "aber uno en el encabezado principal del documento, pero luego podr$amos tener varios '#G. y dentro de estos algunos '#H., si es que los necesitamos. < as$ sucesivamente.

<@
-ste es un encabezado h8
Formatos de p)rrafos para destacar textos !isten algunas etiquetas para destacar prrafos enteros y darles um formato espec$fico. (lgunos ejemplos son: 6(54E: o 6"A4: &irve para escribir un cdigo fuente de un lenguaje de programacin. &implemente coloca una fuente de un tipo como courier, en el que todas las letras tienen la misma anc"ura. *ar 2n$trumento6u$ical = ne! Cla$$YN initialiKe% functionYtipoZN thi$.tipo = tipo= P PZ= 622: 1e!to de 1eletipo. 0ue crea un estilo como el de las antiguas mquinas de teletipo, que transmit$an informacin con caracteres. E$te te'to e$ tipo teletipo. 8e puede fijar el tipo de letra (ue $e utiliKa. En general con courier. 6(<2E: &irve para colocar te!to de cita, te!to dic"o por otra persona. sta etiqueta generalmente pone el te!to en cursiva, pero otros navegadores podr$an interpretarla de otras maneras. Slo s que no s nada! 6A/5("-B52E: sta etiqueta es bastante @til, porque crea un margen tanto a la izquierda como la derec"a, lo que produce un efecto como si fuera un fragmento e!tra$do de otro lugar o que sirva para comentar la informacin anterior.
%ste es un p&rra'o i#enta#o( #e manera )ue se muestra con m&rgenes a ambos la#os$ *ara )ue se vean los m&rgenes tengo )ue escribir bastante te+to$ %s una buena utili#a# para #estacar un trozo #el te+to$
Artculo por
Botones &'ML con la eti/ueta B9''7N

+omo crear botones HTML ms variados utili ando la etiqueta 7UTTO5/ que permite colocar im!enes ) otros contenidos en el botn. 5amos a ver una etiqueta #12% que sirve para "acer botones, de la que no "ab$amos "ablado antes en nuestro manual de #12% . sta etiqueta es 'button., que permite la creacin de botones ms personalizados, por lo que ofrece algunas ventajas, e igualmente unos inconvenientes que vamos a tratar aqu$. (ntes que nada, deber$amos decir que en :esarrolloEeb.com ya "ab$amos comentado acerca de otra etiqueta que serv$a para "acer botones, la etiqueta 'input., que adems tiene otros usos. 5amos a e!plicar tambi3n las diferencias entre "acer botones con 'button. e 'input.. Primero "abr$a que conocer bien los usos de la etiqueta 89P61, que sirve para "acer varias cosas, como campos de te!to, campos ocultos, botones de enviar formulario, borrar sus datos y botones normales. 5eamos los usos de la etiqueta 89P61 antes de continuar. Btili aci%n de la etiqueta 6AB225$:

<A
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com %a etiqueta B61149 se utiliza con una apertura de etiqueta 'B61149. y una de cierre '/B61149.. ntre las dos etiquetas, de apertura y cierre, se coloca el contenido que ir dentro del botn. 1iene la particularidad que se pueden colocar dentro del botn los contenidos que se desee, es decir, entre la etiqueta de apertura y cierre se puede colocar te!to a voluntad, pero tambi3n otras etiquetas #12%, como imgenes, saltos de l$nea, negritas o lo que podamos necesitar. 5eamos un ejemplo:
<button> 5ola e$to e$ un <b>bot?n</b> <br> <br> &uedo poner $alto$ de lQnea en Rl+ <hr> / otra$ co$a$ <br> <img $rc="http%//!!!.de$arrollo!eb.com/image$/logoVde$arrolloV!eb.gif" !idth=">G1" height="4"" alt=""> </button>
0ue tendr$a este aspecto: #ola esto es un #ot%n Puedo poner saltos de l$nea en 3l= < otras cosas
7omo se puede ver, permite aportar bastante creatividad a los botones que incorporemos en pginas web, muc"o ms que la etiqueta 89P61, que slo permite colocar te!to dentro del botn:
<input type="button" *alue="te'to del bot?n">
8tri#utos de AB225$ ("ora veamos rpidamente los atributos que podemos utilizar: name: sirve para darle un nombre al botn. (l enviarse el formulario se enviarn los datos del botYn bajo este nombre. type: sirve para indicar el tipo de botn, que podr$a ser: button para un botn normal, reset para un botn de borrado de datos del formulario y submit para un botn de env$o de formulario. value: para especificar el valor de un botn. l valor es lo que se enviar por formulario, en el momento del submit. Pero ojo aqu$ porque puede "aber diferencias entre navegadores, que veremos a continuacin. disa#led: este atributo sirve para "acer que el botn se encuentre des"abilitado.
<ncompati#ilidades entre navegadores con la etiqueta AB225$ %amentablemente, la etiqueta B61149 tiene diversas interpretaciones por parte de los distintos navegadores del mercado. :esde desarrollo web .com advertimos que se debe tener cuidado cuando la usemos, porque estas incompatibilidades podr$an perjudicar el buen funcionamiento de la pgina. F. Por defecto, el atributo type de B61149 tiene el valor ,button, en todos los navegadores, salvo 8nternet !plorer, al menos "asta la versin L, que le da por defecto valor ,submit,. sto lo solucionamos simplemente colocando siempre el atributo type con el valor que queramos. G. 7uando se env$a un formulario con un botn creado con la etiqueta B61149, 8nternet !plorer env$a como value del botn lo que "ay escrito en 3l, es decir, el te!to que "aya entre 'B61149. y '/B61149. con todas las etiquetas que pueda "aber dentro. %os dems navegadores env$an el atributo value que tenga el botn, aunque slo "acen esto cuando el botn es de type+,submit, y si se "a enviado el formulario pulsando ese botn. :e estas dos incompatibilidades, la segunda tiene ms dif$cil solucin, porque deber$amos saber el navegador que est

=B
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com utilizando el usuario para poder saber el comportamiento del B61149. s por ello que lo ms recomendable es no basar el funcionamiento de scripts en formularios en esta etiqueta. Por lo dems, tiene algunas funcionalidades interesantes que podr$an venirnos bien el alg@n momento.
Artculo por
'ransiciones de (,gina con eti/uetas M-'A

Las etiquetas M'T" sirven tambi0n para especificar transiciones entre p!inas/ slo para '(plorer. 4tra de las utilidades de las etiquetas 2 1( de #12% es la realizacin de transiciones entre pginas. stas transiciones permiten que, al pasar de una pgina a otra, se cambie de documento creando un sencillo efecto de gradiente, cortinilla, etc. como los que "emos podido ver principalmente en edicin de v$deo. stas transiciones tienen un @nico objetivo que es mejorar la est3tica de la pgina y no afectan para nada al funcionamiento de la misma. 2ransiciones s%lo son compati#les con Explorer %as etiquetas 2 1( de transiciones slo son compatibles con 8nternet !plorer, por lo que otros navegadores no las tendrn en cuenta para nada. s decir, simplemente las ignorarn. 9os podremos preguntar entonces: P#asta que punto se "ace interesante el uso de las transiciones con etiquetas 2 1(Q Pues esa respuesta depende de cada desarrollador y de sus criterios personales. 6nos directamente las descartarn por no servir para muc"o y por no estar presentes en la mayor$a de navegadores. 4tros podrn decidir utilizarlas, puesto que no afectan para nada a los programas que no las interpretan y por ofrecer algo adicional en 8nternet !plorer. n mi modesta opinin, las transiciones entre pginas no son necesarias para nada y algunas son un poco feas, por lo que no acostumbro a usarlas. 9o obstante, las estoy e!plicando en este art$culo de :esarrolloEeb.com para el que le apetezca utilizarlas y dar un poco de dinamismo en su pgina, para los usuarios de 8nternet !plorer. &obretodo, tener en cuenta que transiciones muy largas pueden ser molestas ms que vistosas. Bso de las 7E28 2ransition %as etiquetas 2 1( 1ransition, o 2 1( de transicin, se definen con la etiqueta 2 1(, a la que se le indican dos atributos. 8tri#uto 0ttpDequiv: Para indicar si la transicin es para cuando se entra en la pgina o cuando se sale de ella. 8tri#uto content: Para indicar el tipo de transicin y la duracin. 6n par de ejemplos de etiquetas meta de transicin ser$an:
<meta http)e(ui*="&age)Enter" content="blend.ran$Yduration=1Z"> <meta http)e(ui*="&age)E'it" content="re*eal.ran$Yduration=#."E tran$ition="Z">
%a primera define una transicin cuando se entra en la pgina y la segunda una transicin para cuando se sale de ella. stas etiquetas meta de transiciones se deben indicar, como cualquier otra etiqueta 2 1(, en el # (: de la pgina. Pero con un detalle, si la pgina tiene un enlace con una "oja de estilos 7&& e!terna, debe colocarse antes la transicin de Page; nter, si no no se ver. n general, las etiquetas 2 1( para transiciones no darn problemas si las colocamos inmediatamente despu3s de "aber iniciado el # (: de la pgina.

=1
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 4istintos tipos de transiciones entre p)ginas !isten diversos tipos de transiciones que se pueden aplicar con el atributo content. n este art$culo de desarrollo web .com no vamos a ver todos los tipos, pero al menos s$ unos cuantos. n los ejemplos utilizamos constantemente un valor duration+F, que indica la duracin de la transicin en segundos. 5eremos varios ejemplos de transiciones: Para "acer 1ransiciones de tipo degradado utilizamos content+,blend1ransA:uration+F?,. 7on esta transicin en las que se muestran los contenidos con un fundido de menos a ms. (l principio la opacidad de la pgina nueva es casi transparente y va cambiando "asta que se "ace totalmente opaca.
<meta http)e(ui*="&age)Enter" content="blend.ran$Y,uration=1Z">
4tra amplia gama de transiciones las podemos "acer con un valor reveal1rans en el atributo content: content+,reveal1ransAduration+F, transition+J?,. stos tipos de transiciones permiten muc"a variedad cambiando los valores duration, que sirve para indicar la duracin en segundos, y transition, que recibe un n@mero entero con la transicin que deseamos realizar. 5eamos varios ejemplos: 1ransicin al salir de la pgina, de un c$rculo desde fuera a dentro y medio segundo de duracin.
<meta http)e(ui*="&age)E'it" content="re*eal.ran$Yduration=#."E tran$ition=>Z">
1ransicin al entrar en la pgina, de un cuadrado que va de dentro a fuera y de F segundo de duracin.

<meta http)e(ui*="&age)Enter" content="re*eal.ran$Yduration=1E tran$ition=1Z">
1ransicin al salir de la pgina, que muestra la nueva pgina con una sucesin de pi!el en lugares aleatorios, "asta que se rellenan todos los puntos de la nueva pgina.
<meta http)e(ui*="&age)E'it" content="re*eal.ran$Yduration=1E tran$ition=1>Z">
1ransicin al entrar en la pgina, de una cortinilla que va de arriba a abajo.

<meta http)e(ui*="&age)Enter" content="re*eal.ran$Yduration=1E tran$ition="Z">
#asta aqu$ "emos visto varios tipos de transiciones, pero podemos obtener y probar por nosotros mismos otros valores de transition no tratados en este art$culo de desarrolloweb.com. 4btendremos diversas transiciones, cambiando el valor transition, que permite valores enteros "asta al menos GG transiciones distintas. Para que se pueda ver esto de las transiciones, dejamos un ejemplo de transicin.
$ota: )ecordar que las transiciones slo se vern en 8nternet !plorer.
&lo quedar$a decir que si una pgina tiene transicin de entrada y de salida, la transicin de salida slo se ver en caso que la pgina que se vaya a mostrar no tenga definida una transicin de entrada. n caso que s$ tuviera una, se ver$a la transicin de entrada de la nueva pgina en lugar de la de salida de la pagina donde venimos.
Artculo por

=2

Taller HTML PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Taller HTML PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

Autores del manual

Director de DesarrolloWeb.com http://www.desarrolloweb.com (22 captulos)

Juliana Monteiro Lazaro

Luis Javier Alvarez

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Contacto con navegante

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Si quieres, puedes descargarte el texto de esta ayuda tcnica y los ejemplos.

Miguel Angel Alvarez

$alorar una %eb

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Jos Manuel Cerrato Bartolom

Fondos de imagen en &'ML

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

&e puede ver el ejemplo en funcionamiento en una pgina aparte.

Miguel Angel Alvarez

Como (roteger el c)digo *uente de una %eb

Fabio Nez Iturriaga

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

+eshabilitar la barra de im,genes de !nternet -.(lorer

8magen que muestra la barra emergente.

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

'abla con las es/uinas redondeadas

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

'abla con las es/uinas redondeadas0 ti(o 1

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Miguel Angel Alvarez

Frames sin bordes

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Miguel Angel Alvarez

'abla me2orada con imagenes (ara barra de navegaci)n

Todos los as0ntos

sta es la imagen que colocamos entre dos celdas de te!to.

Acabando los enlaces

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

Barra de navegaci)n &'ML sencilla

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

Barra de navegaci)n &'ML

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

%o que da como resultado este efecto:

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Taller de HTML: http://www.desarrolloweb.com/manuales/51/

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

'rans(arencia en ormatos gr,icos (ara %eb 3!F 4 5N3