taller-html.pdf

7/21/2019 taller-html.pdf

1/52

Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

Taller de HTMLUna serie de artculos prcticos para aprender a trabajar con HTML. Ofrece pequeos trucos demaquetacin para que los ms novatos puedan empear a dominar el len!uaje.

Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:

Miguel Angel AlvarezDirector de DesarrolloWeb.comhttp://www.desarrolloweb.com(22 captulos)

Jos Manuel Cerrato Bartolomhttp://www.jmcweb.org( captulo)

Juliana Monteiro LazaroDirectora de !riarWeb.comhttp://www.criarweb.com( captulo)

Christian Santalucahttp://www.criarweb.com

( captulo)

Fabio Nez !turriagaDise"ador web

http://www.nedial.net( captulo)

"oland Nava( captulo)

Jose A# Molina( captulo)

Luis Javier Alvarezhttp://www.guiarte.com( captulo)

Taller de HTML:http://www.desarrolloweb.com/man ales/51/# $os manuales de DesarrolloWeb.com tienen el cop%right de sus autores. &o reproducir sin autorizaci'n.

1
http://www.desarrolloweb.com/http://www.desarrolloweb.com/http://www.jmcweb.org/http://www.criarweb.com/http://www.criarweb.com/http://www.nedial.net/http://www.guiarte.com/http://www.guiarte.com/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/http://www.jmcweb.org/http://www.criarweb.com/http://www.criarweb.com/http://www.nedial.net/http://www.guiarte.com/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


2/52


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 nuevoscontenidos y actualizar los anteriores, entre estas tareas se encuentra una que es fundamental: proporcionar mecanismospara que los visitantes se puedan poner en contacto contigo, y, por supuesto, contestar a cada uno de los mensajes querecibes.

!isten muc"as formas de comunicarnos con el navegante, vamos a ver los mecanismosque estn ms a nuestro alcance para que a ninguna de nuestras webs les falte laposibilidad de comunicarse con sus visitantes.

#emos ordenado los siguientes puntos por orden de facilidad en su uso, as$ los primerosson ms asequibles y los siguientes ms dif$ciles de conseguir, aunque a menudo mejores.

!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. sfacil$simo "acer un enlace con una direccin de correo:

&e "a de poner un enlace convencional, pero su atributo HREF va direccionadoa una direccin de correocon la palabramailto:.

'( #)*+mailto:eugim-desarrolloweb.comscr$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 laconsulta o sugerencia que desea realizar, para, pulsando luego un botn, enviar por correo electrnico a la persona decontacto 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 delformulario.

21#4+post Para que lo envie por metodo post, esencial para enviarlo por e;mail.

971


3/52


n resumen, la etiqueta del formulario quedar$a as$:

'*4)2 (71849+mailto:eugim-desarrolloweb.com21#4+post971

+ot-n de en./o

Se utiliza la etiqueta


4/52


administradores del sitio web mandaremos correos electrnicos periodicamente a las lista para mantenerlos informados denoticias, 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 yeconmico usar una lista de correo de las que regalan en varios servidores. Para montarla en tu web, simplemente "as deseguir las instrucciones que te brinde el proveedor. Puedes conocer varios enlaces a listas de correo para pginas web ennuestro buscador.

$ibro de isitas

("ora veremos alg@n mecanismo adicional para comunicarse con el cliente, pero en estos casos no se trata tanto de unacomunicin 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 deseenpara que estos queden reflejados en la web y as$, no slo los leas t@, sino que tambi3n los pueden leer todos los demsusuarios 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, peroe!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/An castellano?

7ambia.net:"ttp://libros.cambia.netAn 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 dediscusin, donde la gente puede opinar sobre temas y otros navegantes contestarles, etc. s muy @til e interesante. 9o cabeya 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 vecesgratuitos, 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/An 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 elvisitante, aunque al final se nos "a ido el tema del planteamiento inicial y "emos incluido muc"o ms que meras"erramientas de mareting. Porque no olvides que todo esto es para "acerte conocer y "acer que los visitantes te recuerdencon alegr$a y a menudo.

Perm$teme por @ltimo ofrecerte un enlace, corresponde con la seccin de elementos para incluir en pginas webde nuestrobuscador, donde estn todos los enlaces enumerados antes y donde irn apareciendo nuevos.

http://www.desarrolloweb.com/http://www.desarrolloweb.com/directorio/recursos_gratis/listas_de_correo/http://www.desarrolloweb.com/directorio/recursos_gratis/listas_de_correo/http://www.melodysoft.com/http://www.melodysoft.com/http://libros.cambia.net/http://libros.cambia.net/http://libros.cambia.net/http://www.desarrolloweb.com/directorio/recursos_gratis/elementos_para_webs/libros_de_visita/http://www.melodysoft.com/http://www.melodysoft.com/http://www.boardhost.com/http://www.boardhost.com/http://www.boardhost.com/http://www.desarrolloweb.com/directorio/recursos_gratis/elementos_para_webs/foros/http://www.desarrolloweb.com/directorio/recursos_gratis/elementos_para_webs/http://www.desarrolloweb.com/directorio/recursos_gratis/elementos_para_webs/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/directorio/recursos_gratis/listas_de_correo/http://www.desarrolloweb.com/directorio/recursos_gratis/listas_de_correo/http://www.melodysoft.com/http://libros.cambia.net/http://www.desarrolloweb.com/directorio/recursos_gratis/elementos_para_webs/libros_de_visita/http://www.melodysoft.com/http://www.boardhost.com/http://www.desarrolloweb.com/directorio/recursos_gratis/elementos_para_webs/foros/http://www.desarrolloweb.com/directorio/recursos_gratis/elementos_para_webs/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


5/52


Si quieres, puedes descargarte el texto de esta ayuda tcnica y los ejemplos. contacto.ip!"#

Artculo por Miguel Angel Alvarez

$alorar una %eb

%emos un interesante taller de HTML donde ofrecemos al visitante de nuestra &eb un formulario rpidopara valorar nuestra &eb.

l objetivo de este taller de #12% consiste en colocar un pequeCo formulario para que las personas que visitan nuestroweb puedan valorarlo rpidamente. &e trata de un ejemplo de recurso sencill$simo que se puede obtener con slo utilizar unpoco de #12%. %a sencillez es belleza y compatibilidad con los distintos navegadores, as$ que veamos sin ms el efecto quepretendemos conseguir.

7omo se puede ver a la derec"a, el formulario nos propone que valoremos la pgina y al ladotenemos un botn para mandar la dic"a valoracin al webmaster del sitio.

$ota: este ejemplo s%lo funciona si el visitante tiene configurado el correoelectr%nico en su ordenador.

%a valoracin se enviar por correo electrnico a la persona que se indique en elformulario, tal como veremos ms adelante. &i un usuario no tiene correo electrnicoconfigurado en su ordenador con el 4utloo !press, 9etscape 7omposer, udora osimilar 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 decorreo.

Para crear un sistema que no funcione a trav3s del correo electrnico del visitante yconseguir as$ que incluso los que no tienen correo puedan valorarte, necesitaremosutilizar alg@n recurso avanzado como 7D8, (&P o P#P, pero eso es otro tema.

9o pretendo e!plicar en este art$culo los formularios en #12%, ya que en esarrolloEeb.com "ay descripciones suficientessobre su funcionamiento. Para el que no conozca los formularios recomiendo la lecturavarios 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/plain5alora esta web'br

'select name+5aloracion'optionF'/option'optionG'/option'optionH'/option'optionI'/option'optionJ'/option'optionK'/option'optionL'/option'optionM'/option'optionN'/option


=

&alora esta 'e#

2 * + , - 0 1
http://www.desarrolloweb.com/http://www.desarrolloweb.com/articulos/reportajes/archivos/zips/contacto.ziphttp://www.desarrolloweb.com/articulos/reportajes/archivos/zips/contacto.ziphttp://www.desarrolloweb.com/articulos/647.php?manual=21http://www.desarrolloweb.com/articulos/647.php?manual=21http://www.desarrolloweb.com/articulos/647.php?manual=21http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/articulos/reportajes/archivos/zips/contacto.ziphttp://www.desarrolloweb.com/articulos/647.php?manual=21http://www.desarrolloweb.com/articulos/647.php?manual=21http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


6/52


'optionFO'/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 correocon 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 porJos 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 lamanera 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 bacground en la etiqueta 'B4


7/52


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 queno se ve$a porque no contrastaba con el color de fondo blanco por defecto. s posible que en estos casos la imagen defondo fuera oscura y que el te!to fuera blanco y, "asta que no se carga la imagen de fondo, no se puede ver nada. steproblema se agrava si el fondo no se llega a cargar por un error en la transferencia del arc"ivo o porque la imagen "a sidoborrada 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@nutilizar un fondo que luego molesta al leer los te!tos.


8/52


&e puedever el ejemplo en funcionamiento en una pgina aparte.


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 faltosde 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 quetodos estos scripts que dicen que protegen el cdigo fuente en realidad lo @nico que "acen es bloquear el botn derec"o delratn 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:


9/52


+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.

7uantas veces nos "emos quejado o "emos deseado que no apareciese esa incmoda barrita en 8nternet !plorer A5ersinK? 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 21( que automticamentenos des"abilitar la susodic"a opcin.

1ambi3n disponemos de un comportamiento de reamweaver que nos a"orrar el tener que escribir dic"a 21(. Perocuando veis lo reducida que es, probablemente pas3is de descargaros el comportamiento. e todas formas para todosaquellos que dese3is tenerla, la podr3is adquirir en la web de2acromedia !c"ange.

sta es la etiqueta 21( que deber3is incluir entre '#( y '/#(

< lo veremos un poquito mejor en un pequeCo ejemplo de cdigo #12%, de modo que no quede ning@n tipo de duda.

j:

%%%% 6i p:gina !eb%%%%


A
http://www.desarrolloweb.com/http://www.macromedia.com/exchange/dreamweaver/http://www.macromedia.com/exchange/dreamweaver/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.macromedia.com/exchange/dreamweaver/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


10/52


El contenido de nue$tra !eb.

)ecordad que no importa donde coloqu3is la etiqueta 21(, siempre y cuando esta se encuentre entre el '#( y'/#(.

Artculo por Christian antaluca

'abla con las es/uinas redondeadasTaller 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 esquinasredondeadas, que nos podr servir para destacar algunainformacin en el te!to o crear una barra de enlaces lateral unpoco ms vistosa. ( la derec"a aparece una tabla como la quepretendemos conseguir.

l ejemplo no resulta nada complejo. &implemente se crea unatabla normal, en la que colocamos en cada una de sus esquinas ungrfico que "ace la forma redondeada. %os grficos que utilizamosen esta ocasin tienen una parte de color y otra transparente. %aparte de color es la que dibuja el borde redondeado y la parte transparente deja ver el color de fondo que "ayamos colocadoen la tabla. %as imgenes se pueden ver a continuacin. Para guardarlas utiliza el botn derec"o del ratn encima de laimagen y selecciona la opcin que pone Duardar imagen como... o algo parecido. 1ambi3n podrs descargar las imgenesy 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 elcolor de fondo de la pgina donde queremos colocar la tabla. &i queremos colocar una tabla como esta sobre un fondodistinto al blanco deber$amos crear unos grficos que tengan el mismo color que el fondo, en lugar de blanco.


1B

Tabla con es30*nas redondeadas

3uerpo de la tabla' odemos colocar el te&to quedeseemos, que la tabla crecer5 en altura lo su7iciente paracontenerlo'
http://www.desarrolloweb.com/http://www.desarrolloweb.com/descargas/descargar.php?descarga=4358http://www.desarrolloweb.com/descargas/descargar.php?descarga=4358http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/descargas/descargar.php?descarga=4358http://www.desarrolloweb.com/descargas/descargar.php?descarga=4358http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


11/52


%o bueno de que el otro color utilizado en la imagen seatransparente es que la tabla que creamos puede tener el color defondo que se desee. sta otra tabla ;a la derec"a; se crea con lasmismas imgenes del ejemplo y, como se puede ver, tiene otrocolor de fondo que la anterior.

(reaci%n de la ta#la

("ora vamos a estudiar el cdigo #12% que "ace falta para crearesta 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 dondecolocamos las imgenes que "acen que los bordes aparezcan redondeados. n el resto de celdas de la tabla que forman elborde, 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 colocamosel 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'b1abla guay'/b

'br'brste es el te!to que quieras ponerle a la tabla. Puedes poner tanto te!to como desees, que la tabla se "ar lo suficientementegrande 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 tablaR 1amaCo de la tabla. (tributo widt" de la etiqueta 'tableR 1amaCo de los p$!eles transparentes, en la primera y @ltima fila. (tributo widt" de las etiquetas 'img de lospi!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 elanc"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 elanc"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

Tabla con es30*nas redondeadas

$sta tabla tiene otro color de 7ondo, pero est5 creada conlas mismas im5genes que la tabla anterior'
http://www.desarrolloweb.com/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


12/52


Para acabar, recordamos que se pueden descargar las imgenes, as$ como el cdigo fuente de la tabla con esquinasredondeadas, 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@nnuestras 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*asmenos etiquetas'

uede que sea m5s 4til, porque no *a+ que con7igurar m5s que el color + eltama-o'

%a tabla conserva prcticamente el mismo aspecto, pero en esta ocasin "emos eliminado todos las imgenes con un pi!eltransparente 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 msatributos para alinearlas correctamente. %a fila central, que es donde est el cuerpo de la tabla, est e!pandida a dos filas conel atributo rowspan+G.

abla redondeada m:$ $encilla

E$ta tabla e$ b:$icamente como la$ otra$ pero e$t: con$truida con mucha$ meno$ eti(ueta$.

&uede (ue $ea m:$ Ltil por(ue no hay (ue configurar m:$ (ue el color y el tamaMo.

&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

Artculo porJuliana Monteiro !azaro


12
http://www.desarrolloweb.com/http://www.desarrolloweb.com/descargas/descargar.php?descarga=4358http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/descargas/descargar.php?descarga=4358http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


13/52


'abla con las es/uinas redondeadas0 ti(o 1Otro 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 unpequeCo marco de un p$!el. s un ejemplo de tabla con los bordes redondeados comocualquier otro, de "ec"o, ya "emos visto un ejemplo sobre este asunto en nuestro anteriorart$culo1abla con esquinas redondeadas.7omo siempre, lo mejor para darse cuenta de loque pretendemos construir es verlo en un ejemplo y al lado de estas mismas l$neaspodemos verlo.

n este caso utilizaremos las siguientes imgenes, que podemos guardar pulsando sobreellas con el botn derec"o del ratn y seleccionando Duardar imagen como.... 1ambi3npodemos descargar todo el cdigo y las imgenes en un arc"ivo comprimido.

(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 "abercreado 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 lasetiquetas de las imgenes que se colocan dentro de las celdas tienen que estar pegadas a la etiqueta '/1, que se utilizapara 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 alturaser la suficiente para que quepan todos los contenidos de la tabla.

ste es el cdigo en cuestin:

'1(B% E81#+HOO B4))+O 7%%P(89D+O 7%%&P(789D+O'1)

'1'82D &)7+images/tablitaUOF.gif E81#+K #8D#1+K'/1'1 bacground+images/tablitaUOG.gif'82D &)7+espacio.gif E81#+F #8D#1+K'/1'1'82D &)7+images/tablitaUOH.gif E81#+K #8D#1+K'/1'/1)'1)'1 bacground+images/tablitaUOI.gif'82D &)7+espacio.gif E81#+K #8D#1+F'/1'1 bgcolor+MMM valign+top7uerpo esto es el 7uerpo esto es el 7uerpo esto es el 7uerpo...'/1


1;

(uerpo de la ta#la

(qu$ podremos escribir lo quedeseemos, que la tabla crecerlo suficiente para contenertodo el te!to que coloquemos,incluso imgenes.

spero que parezca un diseCointeresante, aunque seguro quelos "ay mejores...
http://www.desarrolloweb.com/http://www.desarrolloweb.com/articulos/819.phphttp://www.desarrolloweb.com/articulos/819.phphttp://www.desarrolloweb.com/articulos/819.phphttp://www.desarrolloweb.com/descargas/descargar.php?descarga=9990http://www.desarrolloweb.com/descargas/descargar.php?descarga=9990http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/articulos/819.phphttp://www.desarrolloweb.com/descargas/descargar.php?descarga=9990http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


14/52


'1 bacground+images/tablitaUOK.gif'82D &)7+espacio.gif E81#+K #8D#1+F'/1'/1)'1)'1'82D &)7+images/tablitaUOL.gif E81#+K #8D#1+K'/1'1 align+center bacground+images/tablitaUOM.gif'82D &)7+espacio.gif E81#+F #8D#1+K'/1'1'82D &)7+images/tablitaUON.gif E81#+K #8D#1+K'/1'/1)'/1(B%

9o "ay muc"o que e!plicar... simplemente que recojas las imgenes descargando el arc"ivo comprimidoAa notar que "ansido colocadas en un directorio llamado images y que si no estn all$ no funcionar el ejemplo? y que la imagen que se llamaespacio.gif es simplemente un p$!el transparente.


Frames sin bordes

Taller de HTML en el que e(plicamos cmo realiar 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 queson los frames o como se definen ser$a necesario que estudiasen el manual de #12%,por lo menos los cap$tulos dedicadosa frames.

#emos visto que "ay muc"os atributos que sirven para eliminar los bordes de los marcos, tal vez demasiados y "ayaquedado poco claro cual ser$a la forma e!acta de eliminar todos los frames de una vez. )esulta que no se "ace igual en todoslos 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 tambi3nfunciona en las versiones ms modernas de 8nternet !plorer.

n 8nternet !plorer, debemos especificar dos atributos tambi3n en el primer frameset. frameborder+O yframespacing+O.

&i colocamos los tres atributos a la vez en el primer frameset estaremos seguros que no "ay bordes, por lo menos en losnavegadores 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

'titleefinicin de *rames'/title'/"ead


1
http://www.desarrolloweb.com/http://www.desarrolloweb.com/descargas/descargar.php?descarga=9990http://www.desarrolloweb.com/manuales/21http://www.desarrolloweb.com/manuales/21http://www.desarrolloweb.com/articulos/791.php?manual=21http://www.desarrolloweb.com/articulos/791.php?manual=21http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/descargas/descargar.php?descarga=9990http://www.desarrolloweb.com/manuales/21http://www.desarrolloweb.com/articulos/791.php?manual=21http://www.desarrolloweb.com/articulos/791.php?manual=21http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


15/52


'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 lapgina de frames sin bordesen este enlace.


'abla me2orada con imagenes (ara barra de navegaci)nUna tabla de enlaces HTML a la que le intercalamos im!enes para transformarla un poco ) $acerla msvistosa. Utiliable en una barra de nave!acin.

n este taller de #12% vamos a ver como una pequeCa imagen puede resultar muy vistosapara 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, dondepodremos observar la utilizacin de imgenes para camuflar el "ec"o que las celdas sonsiempre rectangulares. %as imgenes aplican un leve biselado y eliminan una esquina, con loque las tablas mejoran sensiblemente su apariencia.

$ota:6n efecto como este o parecido se puede conseguir de muc"as maneras, as$ quenos tenemos que tomar este taller como tan slo una idea de las posibilidades y elmodo de construir las tablas.

/as im)gemes

7reo que viendo las imgenes que "emos colocado en la tabla se comprender un poco la ideasobre la que "emos trabajado. %as imgenes estn ampliadas para que se pueda observar mejorsus l$neas. &e pueden crear con cualquier editor grfico del que dispongamos.

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

sta es la imagen que colocamos en la parte de arriba de la celda superior. 9o podemoscolocar la misma que la de en medio porque queda un poco mal.

(onsideraciones para crear la ta#la

5amos a colocar cada elemento en la tabla en una celda independiente. n la primera celda colocaremos la imagen destinadapara la parte de arriba, en la segunda el te!to del primer enlace, luego la imagen que colocamos en medio de cada celda dete!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=

Portada

Introd0cc*-n a ello

Todos los as0ntos

50e desees

M4s ep/6ra7es

Acabando los enlaces

Cont4ctenos
http://www.desarrolloweb.com/http://www.desarrolloweb.com/articulos/ejemplos/html/frames-sin-bordes/frame1.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/frames-sin-bordes/frame1.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/frames-sin-bordes/frame1.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/articulos/ejemplos/html/frames-sin-bordes/frame1.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


16/52


las celdas de la imagen y las del te!to forman un mismo bloque y aparecer$a deslabazada. %os atributos cellspacing ycellpadding 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 sino 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 sonmuc"o ms cmodos y nos permiten definir una @nica vez el estilo para todas las celdas en lugar de repetir las etiquetas yatributos #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 losestilos 7&&, que aparecen en la cabecera.

abla enlace$ guay.celda Nbackground)color%9O7OE,4 font)$iKe%Opt font)family%*erdanaarial color%9ffffff font)

!eight%bold padding)left%4p' padding)bottom%p'P

&ortada

2ntroducci?n a ello

odo$ lo$ a$unto$

Aue de$ee$

6:$ epQgrafe$

;cabando lo$ enlace$


1>


17/52


18/52


o (ue $ea 6:$ co$a$ 8ecci?n enR$ima

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 elcolor 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%. &edefinen con un cdigo como este en la cabecera del documento #12%:

.opN font)$iKe%1#ptfont)family%*erdanaarialbackground)color%9ffOO##P

(s$ estamos definiendo que los elementos de esa clase tengan tamaCo de letra FO, fuente verdana, o en su defecto, arial, yfondo de color anaranjado.

1ambi3n cabe destacar que para que el ejemplo funcione correctamente es necesario colocar los atributos de la tabla paraque no "aya bordes ni mrgenes, con border+O, cellspacing+O y cellpadding+O. Por ello, para crear un pequeCo margenantes del enlace, se utilizan caracteres especiales , que sirven para colocar espacios en blanco.

l ejemplo en funcionamiento se puede ver en una pgina aparte.


Barra de navegaci)n &'ML

Todos los pasos para conse!uir implementar una barra de nave!acin cu)os enlaces tienen un estilosimilar a una solapa.

5amos a tratar de e!plicar el proceso de creacin de una barra de navegacin sencilla pero muy verstil que podr$amosincluir en una pgina web. l trabajo es sencillo, si se dominan las tablas del #12%, que como muc"os sabrn, son elprincipal 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 unp$!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 partede 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@
http://www.desarrolloweb.com/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/nav0.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/nav_html.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/nav_html.htmlhttp://www.desarrolloweb.com/descargas/descargar.php?descarga=8557http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/nav0.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/nav_html.htmlhttp://www.desarrolloweb.com/descargas/descargar.php?descarga=8557http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


19/52


%as imgenes utilizan la transparencia del D8* para poder crear barras de navegacin a las que podemos aplicarles distintoscolores, 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. ("oravamos a ver cmo "acer una solapa. (l reunir varias solapas crearemos la barra de navegacin.

%as solapas se crean con este cdigo #12%:

-pci?n

%o que da como resultado este efecto:

pci'n

7omo detalles del cdigo anterior podemos seCalar que se utiliza una clase para definir el estilo de la solapa. %as clases sonuna 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%:

.opN font)$iKe%1#ptfont)family%*erdanaarialbackground)color%9ffOO##P

(s$ estamos definiendo que los elementos de esa clase tengan tamaCo de letra FO, fuente verdana, o en su defecto, arial, yfondo 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 estpara crear la l$nea del borde de arriba de la solapa, aunque el color negro se lo da el atributo bgcolor+OOOOOO que tiene lacelda. 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, conlo que veremos la forma de la tabla ms fcilmente. %uego volvemos a colocar el borde+O porque los bordes quedan muyfeos.

(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 deabajo con la l$nea sobre la que aparecen las solapas.


1A


20/52


sta tabla nos dar$a espacio para colocar tres solapas... dependiendo del n@mero de opciones vamos a colocar ms o menosceldas en la primera fila. Posteriormente deberemos colocar el cdigo de cada solapa dentro de cada celda. 7on ello estarrealizada nuestra barra.

6n ejemplo de cdigo completo se puede ver a continuacin:

-pci?n '''

-tra -pci?n

o (ue de$ee$


2B


21/52


Sltima opci?n

l ejemplo conseguido puede verse en la barra de arriba que aparece en esta pgina de ejemplo.


-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, sicolocamos una imagen en un lugar, en principio, no se podr$a colocar te!to ni otros elementos encima. Bueno, esto no esdel todo cierto. )ealmente se pueden utilizar capas para realizar esa tarea, pero el trabajo con capas siempre es complicado ypuede 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 escribirte!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:

E$ta e$ la huella de mi perrito.

E$toy muy contento de (ue $e pa$ee de *eK en cuando por e$te $itio !eb.

&e trata de una tabla a la que le "emos colocado una imagen de fondo, utilizando el atributo bacground. Para que aparezcala imagen entera, la tabla se dimensiona al tamaCo de la imagen. l te!to que queremos escribir en el fondo de la imagen secoloca, 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 lapgina o bien en una tabla.

&e puede ver el ejemplo aqu$.


21
http://www.desarrolloweb.com/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/nav_html.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/texto_en_imagen.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/texto_en_imagen2.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/nav_html.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/texto_en_imagen.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/texto_en_imagen2.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


22/52


l cdigo de la tabla ser$a el siguiente:

E$to podrQa $er una barra de enlace$ T Enlace T -tro enlace T ermino con lo$ enlace$

s un ejemplo muy simple y se consigue un efecto bastante elaborado. &i se embellece un poco ms, se podr$a utilizar parauna barra de navegacin muy decente.

9ota: s importante que el color de las tablas Aatributo bgcolor? o las celdas donde coloques las imgenes de fondoAatributo bacground? sea lo ms parecido al color predominante de la imagen. e este modo, se podrn ver perfectamentelos te!tos que "ayas escrito en la celda mientras se carga la imagen de fondo o, incluso, si no llega a cargarse por cualquierproblema.


'abla con diseo en su base

+mo dar formato a una tabla utiliando dibujos. Un efecto HTML para conse!uir que la silueta de latabla 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 simularuna 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 queveamos el resultado que estamos buscando en unapgina apartepara "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 quetiene el borde inclinado y con una pequeCa sombra. fectivamente, todo el efecto buscado se aplica con una sola imagenque 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 lainferior la imagen. Pondremos de color de fondo en la tabla el mismo gris que el de la imagen, para que parezca que laimagen forma parte de la tabla.

l cdigo es el siguiente:

-pcione$


22
http://www.desarrolloweb.com/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/tabla_con_diseno/tabla1.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/tabla_con_diseno/tabla1.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/tabla_con_diseno/tabla1.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/tabla_con_diseno/tabla1.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


23/52


U o (ue $ea
U -pci?n guay
U 6:$ enlace$
U E$to e$ otro te'to
U &era$
U 6anKana$
U 6elocotone$

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 utilizadounos 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, necesitaremosuna nueva imagen que tenga el color que deseemos para el fondo. Por ejemplo podr$amos "aber utilizado una imagen comoesta:

n este caso el cdigo "ubiese sido este:

-pcione$

U o (ue $ea
U -pci?n guay
U 6:$ enlace$
U E$to e$ otro te'to
U &era$
U 6anKana$
U 6elocotone$


2;


24/52


25/52


sta tabla se puede variar, como ya adelantbamos, cambiando el color de fondo de la tabla, con el atributo bgcolor.

-pcione$

U o (ue $ea
U -pci?n guay
U 6:$ enlace$

9ada ms= speramos que "ayis entendido la t3cnica de la imagen transparente y os "aya parecido interesante este taller.

)ecordar que podemosver el ejemplo completo en una pgina aparte


Listas &'ML hechas con tablasTaller de HTML en el que se realia una lista de elementos/ pero utiliando tablas en lu!ar de laestructura 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 miopinin. &irven para "acer listas con bastante rapidez, pero si queremos realizar algo un poco ms complicado, no tenemosgarant$as de que vaya a funcionar. Por ejemplo, puede que necesitemos una lista de elementos ordenada que tenga variosniveles 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 cadaelemento, coloquemos el logo de la compaC$a para la cual estamos desarrollando la pgina. %a lista permite configurar paracolocar varios tipos de puntos Abullets en ingl3s?: c$rculos, circunferencias, cuadrados, pero si deseamos que tengan otro tipode 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=
http://www.desarrolloweb.com/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/tabla_con_diseno/tabla2.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/tabla_con_diseno/tabla2.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


26/52


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. !olocamos45$67&893 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 unaimagen 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 queocupen 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:

Elemento 1 de la li$ta

E$te $erQa un $egundo elemento

CaracterQ$tica adicional a re$altar

&uede haber elemento$ cuya$ caracterQ$tica$ ocupen *aria$ lQnea$. Colocamo$ B;2I=-& en la

celda del bullet para (ue apareKca arriba.

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&893en la celda del bullet para ue aparezca arriba.


2>


27/52


Para "acer que la imagen del elemento de la lista quede bien alineada con el te!to de la derec"a, "emos utilizado el atributovspace de '82D, que define el espacio libre en pi!els que debe de quedar arriba y abajo de la imagen. sto esespecialmente @til si queremos utilizar bullets de tamaCo reducido.

l cdigo ser$a el siguiente:

Elemento 1 de la li$ta

E$te $erQa un $egundo elemento

CaracterQ$tica adicional a re$altar

&uede haber elemento$ cuya$ caracterQ$tica$ ocupen *aria$ lQnea$. Colocamo$ B;2I=-& en la

celda del bullet para (ue apareKca arriba.


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 67896;789y 68RE8.

%a directiva 6789identifica al mapa y tiene el parmetro namepara indicar el nombre del mapa.

%a directiva 68RE8define 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.


2?


28/52


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 definiruna @ltima area que abarque la totalidad del grfico para direccionar a una 6)% por defecto, con el objeto de contemplarel caso de que no se pulse sobre un area definida.

5eamos un ejemplo completo.

Para activar el mapa debemos indicar la imagen a mostrar, indicando que dic"a imagen es tratada por un mapa. Para elloescribir$amos la siguiente directiva :

&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:

7omo podemos observar, el proceso mas laborioso es el de determinar las coordenadas. !isten programas como7892H


29/52


programa 2(P1#8& permite abrir una imagen tipo .D8* y marcar las zonas sensibles. ste programa creara un fic"ero cone!tension .mapque contendra en su interior las coordenadas de cada area. 7on esta informacin nos sera muc"o mas facilescribir nuestro mapa. Puedes buscar este programa en&"areware.combuscando 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 deuna 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 menose!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 recuadrostienen un borde de F p$!el y colores distintos para el fondo de la celda con la cabecera y el cuerpo del recuadro. %as pautasde 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 elborde 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 elcontenido 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 slose 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:

Decuadro curio$o con 56

E$te e$ el interior del recuadro. E$peramo$ (ue o$ re$ulte elegante... e$ muy $encillo.

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 casoel 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
http://www.desarrolloweb.com/http://www.shareware.com/http://www.shareware.com/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/recuadrohtml-elegante-sencillo.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/recuadrohtml-elegante-sencillo.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.shareware.com/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/recuadrohtml-elegante-sencillo.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


30/52


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 quesea distinto que el fondo asignado para toda la tabla

l cdigo de la segunda tabla es el siguiente:

Decuadro curio$o con 56

E$te e$ el interior del recuadro. E$peramo$ (ue o$ re$ulte elegante... e$ muy $encillo.

2ercera ta#la

Para complicar un poco el ejercicio "emos pensado en que el cuerpo del recuadro destacado podr$a ser un conjunto deopciones. %as opciones las pondremos dentro de una tabla, pero dado que la tabla con las opciones debe tener estilo distintoque la tabla general, "emos metido una tabla dentro de otra, es decir, "emos "ec"o una anidacin tablas.

Decuadro curio$o con56

U

-pci?n uno

U

-tra opci?n con te'to en *aria$ lQnea$

U

o (ue $ea (ue de$ee$ de$tacar


;B


31/52


U

Sltima opci?n

7omo se puede ver, esta tabla no difiere muc"o con la tabla segunda. &implemente que el cuerpo de la tabla es otra tabla. sun ejemplo de anidacin de tablas interesante para practicar #12%.

&e pueden ver las tablas generadas con estos cdigosen una pgina aparte.

Podemos comparar este art$culo con su contrapartida en 7&&.


'eclas r,(idas (ara los enlacesUtiliando el atributo access1e) se pueden definir atajos de teclado para acceder a los enlacesdirectamente 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 todoslos programas en general y sirven para mejorar la comodidad del usuario y la rapidez de uso del software, as$ como aumentarla 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 unatributo llamado accessey 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 accessey+estiloymoda.com'/a

7omo se puede ver, simplemente "emos indicado e como la tecla rpida para el enlace que nos llevar$a a la pginaestiloymoda.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. Paraque el navegador cambie la pgina y se mueva "acia el lin deber$amos pulsar luego la tecla 91).

%a compatibilidad con navegadores cada vez es mayor para las teclas rpidas.


32/52


ecla$ r:pida$ para enlace$a Nte't)decoration%noneP

5amos a "acer enlaces con teclas rpidas

E$tiloymoda.com
,e$arrollo!eb.com
Iuiarte.com

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.

Podemosver el ejemplo en marc"a en una pgina aparte.


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% ye!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 condistintas columnas. n el manual de #12% se e!plicantodos los detalles sobre la creacin de tablas,pero realmente no secuenta cmo utilizarlas para maquetar una pgina web. e modo que era necesario presentar un art$culo prctico para cubrireste asunto.

1ambi3n es importante decir que la corriente actual de diseCo de pginas web utiliza 7&& y capas, en lugar de tablas, para elposicionamiento de los contenidos. &i ya conoces 7&& posiblemente no te interese leer este art$culo. n ese caso terecomendar$a leer los contenidos acerca de la maquetacin 7&&.Pero en la prctica, muc"a gente visita esarrolloEeb.compara aprender a "acer pginas web desde cero, y en un primer momento o si slo tienes conocimientos de #12%, es mssencillo 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 amostrar en la pgina entera. 7omo las tablas tienen filas y columnas, nos servirn para crear varias reas donde se mostrarnlos 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 podemosver acontinuacin 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 cuerpoutilizaremos 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 ycuerpo en este ejemplo es distinta, necesitamos utilizar tablas independientes. Pero la razn ms importante de ponercabecera y cuerpo en tablas distintas es que en algunos navegadores, cuando "ay diseCo con tablas, "asta que no se carga el


;2
http://www.desarrolloweb.com/http://www.desarrolloweb.com/articulos/ejemplos/html/enlaces-teclas-rapidas.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/enlaces-teclas-rapidas.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/html/enlaces-teclas-rapidas.htmlhttp://www.desarrolloweb.com/articulos/627.phphttp://www.desarrolloweb.com/articulos/627.phphttp://www.desarrolloweb.com/articulos/627.phphttp://www.desarrolloweb.com/articulos/1823.phphttp://www.desarrolloweb.com/articulos/1823.phphttp://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/maquetatablas/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/maquetatablas/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/maquetatablas/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/articulos/ejemplos/html/enlaces-teclas-rapidas.htmlhttp://www.desarrolloweb.com/articulos/627.phphttp://www.desarrolloweb.com/articulos/1823.phphttp://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/maquetatablas/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/maquetatablas/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


33/52


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 cuerpoconseguimos que la cabecera de la pgina se cargue y se muestre rpidamente y luego, aunque tarde bastante en cargarse elresto de la pgina con todo el cuerpo, por lo menos el usuario ve la cabecera y puede saber que la pgina est por cargar deltodo.

n este caso la cabecera es bastante t$pica, con el logotipo, un banner y una barra de navegacin "orizontal. l cdigo puedeser como el siguiente.

&ortada T oticia$ T ;genda T ;rti$ta$ T u$cador T Comunidad T

ienda

&i nos fijamos, la cabecera ten$a un contorno negro. sto lo conseguimos de manera similar a como e!plicamos en un talleranterior 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 elborde 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 unfondo 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 endefiniciones de pantalla de MOO ! KOO. Podemos conocer ms sobre diseCos fluidos en el art$culo Pginas fluidas. 1ambi3ntenemos otro art$culo donde podemos saber ms sobredefiniciones 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 elsiguiente:

%a t3cnica para "acer esta tabla es distinta que la tabla de la cabecera. sta tabla no tiene reborde negro, para no recargardemasiado el diseCo de la pgina. Pero lo ms importante es que los mrgenes y espacio entre celdas Acellspacing ycellpadding? los "emos eliminado o puesto a cero. ntonces, los espacios que tiene que "aber entre celdas los "emos puestocon 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 yporque 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


;;
http://www.desarrolloweb.com/http://www.desarrolloweb.com/articulos/2025.phphttp://www.desarrolloweb.com/articulos/473.phphttp://www.desarrolloweb.com/articulos/10.phphttp://www.desarrolloweb.com/articulos/10.phphttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/articulos/2025.phphttp://www.desarrolloweb.com/articulos/473.phphttp://www.desarrolloweb.com/articulos/10.phphttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


34/52


donde estn los contenidos. entro de cada celda colocamos los contenidos necesarios. n la primera ir la barra denavegacin de la izquierda, en la celda del centro el cuerpo principal y en la tercera casilla ir el lateral derec"o, que "emosutilizado 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 dearriba 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"odisponible est limitado al anc"o de la celda.

Podemosver el ejemplo en una pgina aparte.2irar tambi3n el cdigo fuente para ver el ejemplo con su codificacincompleta.


"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!inaautomticamente.

n las etiquetas 21(, como probablemente sabremos, se indican informaciones sobre las palabras clave y descripcionesde los documentos, autor$a y propiedad, m3todos de contacto, etc. Pero tambi3n podemos indicar otras acciones alnavegador que pueden resultar @tiles para los desarrolladores, como indicar un refresco o una redireccin. n este art$culo

veremos cmo "acerlo.

%a etiqueta 21( que se "ace para indicar al navegador un refresco o una redireccin tiene la forma siguiente:

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 21( que utiliza #11P;0685 es equivalente a si 3sta se "ubieraenviado en la cabecera del "ttp. n este caso, que lo tenemos igualado a )*), es para indicar queremos "acer unrefresco de la pgina.

n el atributo 749191 indicamos las caracter$sticas del refresco. l valor asociado contiene dos partes, primero eltiempo 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:

Dedirigir al na*egador a otra 0D

E$ta p:gina cambia en $egundo$ por la portada de ,e$arrollo3eb.com

&e puedever 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, paracomprobar que se refresca y se recarga su contenido, "emos utilizado un poco de javascript para mostrar la "ora, minutos ysegundos actuales, as$ en cada recarga podremos ver que los segundos van incrementndose.


;
http://www.desarrolloweb.com/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/maquetatablas/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/maquetatablas/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/maquetatablas/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/metaredireccion/redirigir.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/metaredireccion/redirigir.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/maquetatablas/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/metaredireccion/redirigir.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


35/52


Defre$car la 0D 5ora%miFecha = ne! ,ateYZdocument.!riteYmiFecha.get5our$YZ U "%" U miFecha.get6inute$YZ U "%" U miFecha.get8econd$YZZ

n este caso, en la 21( 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 mismapgina todo el tiempo.

&e puedever en marc"a en una pgina aparte.


'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 susdiferencias y las ventajas que nos aporta P9D de GI bits para eliminar los "alos. l que vamos a ver es un ejemplo muysimple, 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 colorque 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* yP9D. l formato P9D es muc"as veces desconocido por los desarrolladores, o simplemente ignorado, porqueanteriormente no era compatible con todos los navegadores. n el momento actual, ning@n navegador tiene problemas paramostrar los arc"ivos P9D, pero como este formato no se empez a utilizar desde el principio muc"os de los desarrolladoresno lo usan "abitualmente.


;=
http://www.desarrolloweb.com/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/metaredireccion/refrescar.htmlhttp://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/metaredireccion/refrescar.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/articulos/ejemplos/tallerhtml/metaredireccion/refrescar.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


36/52


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 queen este caso muestran pocas diferencias, o ms bien ninguna a simple vista. %as dos se ven igual de bien, aunque realmenteno 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


;>


37/52


n este otro caso todo va bastante bien, las diferencias son casi inapreciables. l fondo de color rosa es bastante claro y nopermite 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 losdibujos de la imagen.

Por 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 elcolor de la figura ni el transparente del fondo. 7uando "acemos esta imagen con P"otos"op, o cualquier otro programa dediseCo 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$ael 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 lafigura sobre otro fondo, del color que necesitemos. s decir, dibujamos la forma directamente sobre un fondo del mismocolor que el de donde la pensamos colocar. %uego marcamos como transparente el color de fondo. l suavizadopermanecer, tendiendo a ese color en lugar del blanco. Pero claro, siempre tenemos el problema que la imagen slo nosservir 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 bastanteinteresante, porque nos servir siempre, independientemente del fondo sobre el que la pongamos.


;?


38/52


39/52


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 enla 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


40/52


7on este trozo de cdigo se mostrar tu video con los controles de


41/52


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 estaimagen D8* transparente est preparada para colocar sobre un fondo oscuro. e "ec"o, aqu$ tenemos la prueba de lo bienque 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 suaviado 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 yla imagen se coloca sobre un fondo claro, no se ver el "alo. Pero si la imagen tiene un suavizado tirando a claro y se colocasobre 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 imagensiguiente "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 elpi!elado alrededor de la imagen.

Hacer un suaviado 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
http://www.desarrolloweb.com/http://www.desarrolloweb.com/articulos/transparencia-formatos-graficos-web-gif-png.htmlhttp://www.desarrolloweb.com/articulos/transparencia-formatos-graficos-web-gif-png.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/articulos/transparencia-formatos-graficos-web-gif-png.htmlhttp://www.desarrolloweb.com/manuales/51/http://www.desarrolloweb.com/


42/52


7omenzamos con una imagen con el lienzo del color que deseamos como fondo. s decir, colocamos el fondo del mismocolor de del fondo la web.

%uego "acemos el diseCo que queramos.


2


43/52


44/52


l resultado es el siguiente:

4bservaremos que la imagen, sobre fondo blanco, aparece con un "alo azul, pero cuando pongamos la imagen sobre unfondo que tenga la tonalidad azul, el "alo desaparecer de nuestra vista.


Contador de visitas con la (rocedencia de los usuarios4resentamos +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 laprocedencia de los visitantes de tu web. s un servicio gratuito que puedes incorporar en cualquier web, sin prcticamenteconocimientos #12% ni ning@n conocimiento de programacin.

l sistema lo ofrece una pgina web que se puede ac

taller-html.pdf

Documents

Transcript of taller-html.pdf