Capitulos de este wiki
  1. 1 Introducción al lenguaje HTML
  2. 2 Primeros pasos con HTML
  3. 3 Parrafos en HTML
  4. 4 Cómo insertar imagenes en una pagina
  5. 5 Cómo crear enlaces hipertexto
  6. 6 PRÁCTICA 1: La pagina web de "La chistera"
  7. 7 Anclas (I)
  8. 8 Anclas (II)
  9. 9 Formato de texto
  10. 10 La etiqueta FONT
  11. 11 Texto preformateado
  12. 12 Acentos y otros caracteres especiales
  13. 13 Listas en HTML (I)
  14. 14 Listas en HTML (II)
  15. 15 Comentarios en HTML
  16. 16 Practica 2: Un sitio web completo
  17. 17 Usando color en el WWW
  18. 18 Cómo cambiar la apariencia de una pagina
  19. 19 Imagenes en las paginas Web (I)
  20. 20 Imagenes en las paginas Web (II)
  21. 21 Imagenes en las paginas Web (III)
  22. 22 Cómo cambiar la apariencia de las imagenes
  23. 23 Alternativas a las imagenes inline (I)
  24. 24 Alternativas a las imagenes inline (II)
  25. 25 Mejoras en las imagenes
  26. 26 Cómo se crea una tabla HTML (I)
  27. 27 Cómo se crea una tabla HTML (II)
  28. 28 Alineamiento de tablas
  29. 29 Alineamiento de celdas y filas
  30. 30 Ancho de tablas y celdas
  31. 31 Celdas que abarcan varias filas o columnas
  32. 32 Margenes y separación de celdas
  33. 33 Anidamiento
  34. 34 Practica 3 - Tabla de Datos
  35. 35 Practica 4 - Pagina Web con una estructura creada con tablas
  36. 36 Practica 4 - Pagina Web con una estructura creada con tablas
  37. 37 Practica 4 - Pagina Web con una estructura creada con tablas
  38. 38 Estandares y extensiones del lenguaje HTML (I)
  39. 39 Estandares y extensiones del lenguaje HTML (II)
  40. 40 Extensiones a las listas (I)
  41. 41 Extensiones a las listas (II)
  42. 42 Alineamiento
  43. 43 La etiqueta META
  44. 44 Otras etiquetas del lenguaje HTML 3.2
  45. 45 El atributo TARGET
  46. 46 La etiqueta BASE
  47. 47 Creación de paginas con frames
  48. 48 Creación del documento de definición de frames (I)
  49. 49 Creación del documento de definición de frames (II)
  50. 50 Pagina completa con frames
  51. 51 Atributos de la etiqueta FRAME
  52. 52 Compatibilidad: NOFRAME
  53. 53 Anidamiento de framesets
  54. 54 Bordes de los frames
  55. 55 Valores especiales del atributo TARGET
  56. 56 Practica 5: Web de Los Alpes con frames
  57. 57 Frames flotantes
  58. 58 Sonido vídeo y otros ficheros externos
  59. 59 Multimedia Inline (I)
  60. 60 Multimedia Inline (I)
  61. 61 Plug-ins y objetos incrustados
  62. 62 Java en las Paginas Web
  63. 63 Inserción de Applets Java (I)
  64. 64 Inserción de Applets Java (II)
  65. 65 Inserción de Applets Java (III)
  66. 66 ActiveX, la tecnología del futuro
  67. 67 Formularios en HTML
  68. 68 Controles de Formularios (I)
  69. 69 Controles de Formularios (II)
  70. 70 Controles de Formularios (III)
  71. 71 Controles de Formularios (IV)
  72. 72 Otros controles
  73. 73 Practica 6-Formulario para "Los Alpes"
  74. 74 Como usar los datos de un formulario
  75. 75 Envío De Ficheros Usando Formularios

Curso completo de HTML - Bordes de los frames

54 - Bordes de los frames

[editar]
Curso gratis creado por Jorge Ferrer, Víctor García y Rodrigo García. Extraido de: http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/
23 de Febrero de 2006

Cuando creamos páginas con frames estos aparecen divididos por unas líneas horizontales y verticales (ver 8-19) que además el usuario que vea nuestra página podrá mover a su antojo (a no ser que usemos el atributo NORESIZE).

Figura 8.19. En general los navegadores dibujan líneas con aspecto 3-D para separar los frames.

Desde la aparición de los frames los programadores de páginas Web han estado reclamando un mayor control sobre la disposición sobre estos bordes y con la aparición de Netscape 3.0 e Internet Explorer 3.0 se introdujeron nuevos métodos para definir sus características.

Estos métodos no son más que la inclusión de tres nuevos atributos para las etiquetas FRAME y FRAMESET. Estos son BORDERCOLOR y FRAMEBORDER para FRAME y BORDER para FRAMESET. Aprendamos a usarlos uno por uno.

Cambiando el color del borde

El primero de los atributos, BORDERCOLOR, nos permitirá cambiar el color del borde. El color puede indicarse tanto con el número hexadecimal RGB (por ejemplo #99CC99) o bien usando uno de los nombres predeterminados que vimos en el capítulo 115. Por ejemplo para poner el borde de color rojo podríamos usar:

   <FRAME BORDERCOLOR="red">
  
O bien:
   <FRAME BORDERCOLOR="#FF0000">
  

Dado que los bordes son compartidos por varios frames, en el caso de que cada uno de los bordes indique un color diferente el resultado es impredecible y depende del navegador. Por esta razón no podemos fiarnos de que si se da esta situación lo que nosotros con nuestro navegador será lo mismo que vean los navegantes y por tanto debemos evitarla en lo posible.

Si en cada uno de los frames de las páginas creadas en la sección anterior usamos este atributo para indicar bordes rojos obtendremos el resultado de la figura 8.20. El código usado es:

 <FRAMESET COLS="150,*">
  <FRAME SRC="frame1.htm" BORDERCOLOR="#FF0000">
  <FRAMESET ROWS="100,*">
  <FRAME SRC="frame21.htm" BORDERCOLOR="#FF0000">
  <FRAME SRC="frame22.htm" BORDERCOLOR="#FF0000">
  </FRAMESET>
  </FRAMESET>
	   

Figura 170. Con el atributo BORDERCOLOR podemos elegir el color que queramos para los bordes de los frames.

Hay que admitir que el cambio en la apariencia de la página no es muy importante, sin embargo puede ser muy útil en ciertos Webs en los que los colores están muy cuidados.

El navegador Netscape permite también usar el atributo BORDERCOLOR en la etiqueta FRAMESET, en este caso el valor que demos a este atributo afectará a todos los frames dentro de ese frameset. De esta manera podríamos habernos evitado escribir BORDERCOLOR="#FF0000" tres veces en el ejemplo anterior. Sin embargo debemos tener en cuenta que esta posibilidad sólo la ofrece Netscape Navigator y no Explorer ni otro navegador. Además tampoco ha sido aceptada por el estándar HTML 4.0.

Como quitar el borde

Muchos diseñadores de Webs que habían sido detractores de los frames cambiaron su opinión sobre ellos una vez se ofreció la posibilidad de quitar los bordes de estos. De esta forma se puede crear la ilusión de que existe un sólo frame (o una página sin frames), mientras aprovechamos las posibilidades para mantener siempre visibles ciertas partes de la página.

La etiqueta FRAME tiene un atributo que puede ser usado para quitar los bordes de los frames: FRAMEBORDER. Este atributo puede tomar dos valores: "1" y "0" que significan mostrar los bordes y ocultarlos respectivamente. El valor por defecto es mostrar los bordes (FRAMEBORDER="1") y si queremos que estos desaparezcan debemos escribir explícitamente:

   <FRAME FRAMEBORDER="0">
  

Al igual que antes se pueden producir conflictos si un borde es compartido por dos frames uno de los cuales indica FRAMEBORDER="0" y el otro FRAMEBORDER="1". La decisión que tome el navegador en esta situación es impredecible y por tanto debe ser evitada en la medida de lo posible.

Aunque no ha sido aceptado por el estándar HTML 4.0, es importante hacer notar que tanto Netscape como Explorer admiten el uso del atributo FRAMEBORDER en la etiqueta FRAMESET. De esta forma podemos conseguir quitar todos los bordes de una vez poniendo FRAMEBORDER="0" en la primera etiqueta FRAMESET en lugar de repetirla para cada uno de las apariciones de FRAME.

El atributo FRAMEBORDER surgió como extensión al estándar de HTML. Inicialmente los valores válidos eran yes y no. Sin embargo HTML 4.0 introdujo el soporte de frames en el estándar y los valores aceptados de FRAMEBORDER son 1 y 0. La conclusión es que aunque en las páginas existentes podamos encontrarnos cualquier combinación de los valores anteriores, en las páginas nuevas deberíamos usar sólo los valores numéricos estándar.

Figura 171. Usando FRAMEBORDER="0" ocultamos los bordes de los frames con lo que se consigue una gran mejora en la apariencia.

En la mayoría de las ocasiones quitando el borde de los frames se consigue una apariencia muy mejorada de nuestras páginas. Para conseguir este efecto en las páginas creadas en el ejemplo anterior sólo tenemos que cambiar ligeramente el código para incluir el atributo FRAMEBORDER="0":

   <FRAMESET COLS="150,*">
	<FRAME SRC="frame1.htm" FRAMEBORDER="0">
	<FRAMESET ROWS="100,*">
	<FRAME SRC="frame21.htm" FRAMEBORDER="0">
	<FRAME SRC="frame22.htm" FRAMEBORDER="0">
	</FRAMESET>
	</FRAMESET>
  
Con este código obtendríamos el resultado de la figura 8.21 en la que no se distinguen los bordes de los frames y por lo tanto no se pueden redimensionar. Sin embargo si hacemos la ventana del navegador más pequeña aparecerán en cada uno de los frames unas barras de desplazamiento que delatarán su presencia, como vemos en la figura 8.22.

Figura 8.22. Aún usando el atributo FRAMEBORDER si hacemos la ventana del navegador pequeña aparecerán barras de desplazamiento en cada uno de los frames.

Grosor del borde

Una de las últimas extensiones de Netscape Navigator relacionadas con los frames es el atributo BORDER. Con él podemos indicar el grosor del borde que separa los frames asignándole un valor en pixeles. La forma de usar este atributo es:

   <FRAMEBORDER BORDER="TamañoBordeEnPixeles">
	...
	</FRAMEBORDER>
  

Si existen varias etiquetas FRAMEBORDER en una misma página (es decir si las hemos anidado) podemos usar el atributo BORDER en cualquiera de ellas, pero es conveniente usarla una única vez. Vamos a usarla con nuestro ejemplo para crear un borde grueso entre las dos divisiones del segundo de los FRAMESETS. Para ello usamos el código:

   <FRAMESET COLS="150,*">
	<FRAME SRC="frame1.htm">
	<FRAMESET ROWS="100,*" BORDER="20">
	<FRAME SRC="frame21.htm">
	<FRAME SRC="frame22.htm">
	</FRAMESET>
	</FRAMESET>
  
Con lo que obtenemos el resultado de la figura 8.23.

Figura 8.23. Con el atributo BORDER podemos cambiar el grosor de los bordes. En este caso el borde horizontal tiene un grosor de 20 pixeles.

[editar]

194 opiniones

html

muy completo
fLakita

Me gustaria saber como se pone el signo de copyleft.
Gracias
sara

deberian poner como hacer un enlace a otra pagina desde un boton
luis

este tutorial esta fabuloso!
esta chivo

gracias por publicar cosas buenas
1 2 3 4 5 6 7 ... 39 | siguiente >

Cursos gratis relacionados con 'Curso completo de HTML'

Este es un curso tremendamente completo, guiado y con ejemplos y prácticas pensadas para convertirlo... Más »
El objetivo de este curso es aprender a programar en el lenguaje Ada, desde sus... Más »
Práctico y completo curso de hacking.
Completo curso de Linux, un sistema operativo gratuito y de libre distribución inspirado en el... Más »
Completo curso acerca de los virus informáticos, historia, clasificación, protección...

Autor y licencia de 'Curso completo de HTML'


Curso gratis de Jorge Ferrer, Víctor García y Rodrigo García. Extraido de: http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/ CopyLeft
Licencia GNU Free Documentation License: http://www.gnu.org/copyleft/fdl.html
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.