Un amigo me pregunto: ¿porque hay que saber HTML si hay programas como el Netscape Composer, el FrontPage entre otros que te facilitan la labor de hacer páginas webs, y además de forma muy rápida y fácil?. No supe que contestarle, tenía razón, pero como el saber no ocupa lugar nunca es malo saber un poco de este lenguaje. Pongamos un ejemplo por el que es bueno tener ciertas nociones. Estas visitando una página que te gusta, podrás abrir el código fuente y copiar la parte interesante. En caso de no conocer HTML, al abrir el código estarás más perdido que un piojo en la cabeza del Lenny Kravitz.
Para realizar tu página necesitas en principio un editor de textos para escribir los ficheros que la compondrán, como puede ser el Bloc de notas del Windows o el Edit del MS-DOS aunque hay editores que incorporan las directivas del HTML con tal de facilitarte la labor como puede ser el EditPlus, entre otros.
Una vez tengas tu página lista tendrás que publicarla a través de un servidor. Como se sale del contenido de este manual me saltaré esta parte, aunque no os será difícil encontrar en Internet webs que ofrecen hosting tanto gratuito como de pago.
A continuación paso a explicar las directivas generales del HTML.
Estructura básica
Estructura Básica
En la actualidad no existe un estándar de HTML ya que tanto Netscape como Microsoft se empeñan en incluir directivas que solo funcionan con sus respectivos navegadores, y como siempre el que sale perdiendo es el usuario, el cual no entra ni sale en estas guerras políticas, sociales o como prefieras llamarlas. De cualquier manera existen diferentes ordenes o directivas que se podrían decir que son activas en cualquier navegador y son las que a continuación mostraré.
Las directivas de HTML pueden ser de dos tipos, cerradas o abiertas. Las directivas cerradas son aquellas que tienen una palabra clave que indica el principio de la directiva y otra que indica el final. Entre la directiva inicial y la final se pueden encontrar otras directivas. Las directivas abiertas constan de una sola palabra clave. Para diferenciar las directivas del resto del texto del documento se encierran entre los símbolos < y >. Las directivas cerradas incluyen el carácter / antes de la palabra clave para indicar el final de la misma. Una directiva puede contener "parámetros". Estos parámetros se indican a continuación de la palabra clave de la directiva. Más adelante se mostrará ejemplos de los diferentes tipos de directivas
En este manual se han fijado los siguientes criterios a la hora de escribir la sintaxis de las directivas de HTML:
Un documento escrito en HTML contendría básicamente las siguientes directivas :
| <HTML> | Inicio del documento |
| <HEAD> | Inicio de la cabecera |
| <TITLE> | Inicio del título del documento |
| </TITLE> | Final del título del documento |
| </HEAD> | Final de la cabecera del documento |
| <BODY> | Inicio del cuerpo del documento |
| </BODY> | Final del cuerpo del documento |
| </HTML> | Final del documento |
Cabecera del documento
La directiva <HEAD> </HEAD> delimita la cabecera del documento. Dentro de la cabecera es importante definir el título de la página por medio de la directiva <TITLE></TITLE>. Este título será; el que aparezca en la barra de nuestro visor
de páginas Web. Un pequeño paréntesis en el manual, ser imaginativos, y no como yo que lo único que se me ocurrió a la hora de poner un nombre a mi página fue el de EL MAKY.
Dentro de la cabecera de nuestro documento podemos incluir otras directivas adicionales. La directiva <META> indica al visor de Internet las palabras clave y contenido de nuestra página Web. Muchos de los buscadores de la red como son Altavista, Lycos, …, utilizan esta información a la hora de indexar el contenido de la web a sus directorios. La directiva <META> lleva generalmente dos parámetros, name y content.
Ejemplo
- <META name = "description" content = "Descripción de la página">
Indica al visor el nombre de la página y sus contenidos principales. - <META name = "keywords" content = "ingenieria, musica, links"> Indica al visor las palabras clave para los buscadores de Internet.
Si los archivos gráficos, sonidos, etc… los decides colocar en un directorio diferente al que esta el fichero html, habrás de utilizar la directiva <BASE>, de la siguiente forma:
Ejemplo
- <BASE href = "http://www.elmaky.com/archivos/">
Un pequeño paréntesis, pero que es importante. Los servidores tiene la particularidad de que diferencian las minúsculas de las mayúsculas en el nombre de los ficheros, cosa que tendrás de tener en cuenta a la hora de escribir los nombres de ficheros en las directivas en el código HTML. Para tal de no complicarte la vida mi recomendación es que escribas los nombres de tus archivos todos en minúscula y evitar así problemas.
Cuerpo del documento
Vamos a lo que es propiamente el contenido principal de nuestra página web, es decir que colocaremos aquello que el mundo va a saber gracias a las palabras, imágenes, enlaces, y sonidos que magistralmente colocareis (que bien hago la pelota). Las directivas a utilizar son, <BODY></BODY>. Podéis modificar la directiva de inicio añadiéndole varios parámetros a continuación os mostraré y que ayudan a mejorar el aspecto final del documento:
- background="nombre de fichero gráfico"
Indica el nombre de un fichero gráfico que servirá como "fondo" de nuestra página. Si la imagen no rellena todo el fondo del documento, esta será reproducida tantas veces como sea necesario. Tener siempre presente una cosa, cuanto más grande sea el archivo más tardará en cargarse.
- bgcolor = "código de color"
Indica un color para el fondo de nuestro documento. Este parámetro es incompatible con el anterior, es decir no se pueden usar los dos a la vez
- text = "código de color"
Nos define el color que tendrá el texto que incluyamos en nuestro documento.
- link = "código de color"
Este código nos define el color de los textos que dan acceso a un Hyperenlace, más adelante definiré en que consiste esta palabra.
- vlink = "código de color"
Indica el color de los textos que dan acceso a un Hyperenlace que ya hemos visitado con nuestro visor.
Ahora el kit de la cuestión que es el codigo de color. Esté es un número compuesto por tres pares de cifras hexadecimales que indican la proporción de los colores "primarios", es decir el rojo, verde y azul. Al código de color se le coloca a su principio el símbolo siguiente #.
En la actualidad muchos editores de HTML te permiten escoger el color directamente de una paleta sin recurrir al aprenderse los números. A continuación te muestro los códigos de los colores más comúnmente utilizados. Siempre puedes ir innovando variando algún numero del código para ver que color aparece.
| negro | #000000 |
| verde oscuro | #008000 |
| rojo oscuro | #000080 |
| oliva | #808000 |
| azul marino | #000080 |
| púrpura | #800080 |
| gris | #808080 |
| amarillo | #FFFF00 |
| verde | #00FF00 |
| aguamarina | #00FFFF |
| fucsia | #FF00FF |
| plateado | #C0C0C0 |
| rojo | #FF0000 |
| azul | #0000FF |
| verde azulado | #008080 |
| blanco | #FFFFFF |
Ejemplo
- <BODY bgcolor=#FFFF00 text=#FFFFFF link=#FF0000 vlink=#000000>
Esta directiva mostraría el fondo amarillo, con las letras en blanco, los hyperenlaces en rojo, y un hyperenlace visitado de color negro.
El siguiente paso es describir las directivas que van a ir dentro del <BODY></BODY>, lo cual paso a realizar en los siguientes capítulos.
Espaciados y saltos de línea
Todos los navegadores de páginas Web actuales soportan todos los caracteres gráficos de la especificación ISO 8859-1, que permiten escribir textos en la mayoría de los países occidentales.
De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres ASCII, se han definido dos formas de representar caracteres especiales usando solamente el código ASCII de 7 bits. Para hacer referencia a estos caracteres se les asigna un código numérico o un nombre de "entidad". Estos caracteres pueden ser representados por un código
numérico o una entidad cuando deseemos que aparezcan en el documento "tal cual". Las entidades comienzan por el símbolo & (ampersand) y terminan con el símbolo ; (punto y coma).
En cualquier libro de HTML podrás encontrar una tabla con las principales entidades. Debido a que cada vez esta en más desuso esta opción he decidido no incluirla para así no complicar el manual.
Una cosa a tener en cuenta es que en HTML solo se reconoce un espacio entre palabra y palabra, es decir aunque pongáis 7 espacios (tontería ponerlos pero a lo mejor se os han escapado) el navegador los ignorará y los eliminará viéndose únicamente uno sólo. De igual forma tampoco se respetan las tabulaciones, retornos de carro, etc…, tan habituales en los editores de texto normales. Para ello existen una serie de directivas que indican estos códigos. Si por el contrario incluimos la directiva <PRE></PRE>, obligamos al visor a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc.., pudiendo de esta forma a escribir 7 espacios continuos.
Para indicar un salto únicamente de línea se utiliza la directiva <BR> y para un cambio de párrafo (deja una línea en blanco en medio) se utiliza la directiva <P>. Esta directiva puede usarse también como directiva "cerrada" <P></P> indicando de esta manera los atributos de un párrafo en concreto. Cuando se usa de esta manera a esta directiva puede añadirse parámetros tal como es align que indica al visor la forma de "justificar" el párrafo. Los valores posibles de este parámetro son LEFT, RIGHT y CENTER.
Ejemplos
- A continuación se muestra la misma frase pero con los dos tipos de directivas.
<PRE> texto </PRE> Con la opción PRE
<P> texto </P> Con la opción P
- Ahora se muestra el parámetro "align"
<P align=left>Alineado a la izquierda<P>
Alineado a la izquierda
<P align=center>Alineado a l centro<P>
Alineado al centro
<P align=right>Alineado a la derecha<P>
Alineado a la derecha
Otra directiva interesante es <HR>, la cual muestra una línea horizontal de tamaño determinable. Tiene los siguientes parámetros opcionales :
- align = posición
Alinea la línea a la izquierda (left), a la derecha (right) o la centra (center), de igual forma que en el párrafo.
- noshade
No muestra sombra, evitando el efecto en tres dimensiones
- size = numero
Indica el grosor de la línea en pixels.
- width = num / %
Indica el ancho de la línea en tanto por ciento en función del ancho de la ventana del visor. También se puede especificar un número que indicaría el ancho de la línea en pixels.
La directiva <HR> sin ningún parámetro mostraría una línea horizontal que ocuparía todo el ancho de la página.
Ejemplos
- <HR>
- <HR align=center size=15 width=25%>
Cabeceras y atributos del texto
En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaños de letra) por medio de las directivas <H1><H2><H3><H4><H5> y <H6>. El texto que escribamos entre el inicio y el fin de la directiva será el afectado por las cabeceras. La cabecera
<H1> será la que muestre el texto en mayor tamaño.
Ejemplos
|
|
Texto |
|
|
Texto |
|
|
Texto |
|
|
Texto |
|
|
Texto |
|
|
Texto |
NOTA: Los textos marcados como "cabeceras" provocan automáticamente un retorno de carro sin necesidad de incluir la directiva <BR>
Para indicar atributos del texto (negrilla, subrayado, etc…) tenemos varias directivas. Algunas de ellas no son reconocidas por determinados visores de Internet, es por ello que segun el visor que este vd. utilizando, verá el resultado correctamente o no.
- Negrita: <B></B> Texto
- Cursiva: <I></I> Texto
- Teletype: <TT></TT> Texto
- Subrayado: <U></U> Texto
- Tachado: <S></S>
Texto - Parpadeo: <BLINK></BLINK> (No disponible con Explorer)
- Superindice: <SUP></SUP> Texto
- Subindice: <SUB></SUB> Texto
Por otro lado la directiva <FONT></FONT> nos permite variar
el tamaño, el color, y el tipo de letra de un texto determinado. Utiliza para ello los parámetros
size, bgcolor y face.
- size = valor
Da al texto un tamaño en puntos determinado.
- size = +/– valor
Da al texto un tamaño tantas veces superior (+) o inferior (-) como indique el valor.
- color = "codigo de color"
Escribe el texto en el color cuyo codigo se especifica.
- face = "nombre de fuente"
Escribe el texto en el tipo de letra especificado.
Ejemplo
- <FONT size = +2 color = "#FF0000 face = "Arial"> Texto </FONT>
Texto
Existen otras directivas que realizan las mismas operaciones que las antes vistas en los atributos del texto.
- <STRONG></STRONG> equivale a <B></B>
- <CITE></CITE> equivale a <I></I>
- <STRIKE></STRIKE> equivale a <S></S>
Como dato final, cualquier palabra o frase que vaya comprendida entre la directiva <!– –> se entenderá como un comentario y el visor no lo tendrá en cuenta, pudiendo de esta manera introducir explicaciones para un mejor entendimiento del código fuente.
Listas de elementos
Existen básicamente tres tipos diferentes de listas: numeradas, sin numerar y de definición. Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos segun el lugar que ocupan en la lista. Para este tipo de lista se utiliza la directiva <OL></OL>. Cada uno de los elementos de la lista irá precedido de la directiva <LI>. La directiva <OL> puede llevar los siguientes parámetros :
- start = num
Indica que número será el primero de la lista. Si no se indica se entiende que empezará por el número 1.
- type = tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada numéricamente.
Los tipos posibles son :
- 1 = Numéricamente. (1,2,3,4,… etc.)
- a = Letras minúsculas. (a,b,c,d,… etc.)
- A = Letras mayúsculas. (A,B,C,D,… etc.)
- i = Numeros romanos en minúsculas. (i.ii,iii,iv,v,… etc.)
- I = Números romanos en mayúsculas. (I,II,III,IV,V,… etc.)
Ejemplos
|
<OL> <LI>España <LI>Francia <LI>Italia <LI>Portugal </OL> |
|
|
<OL type = A > <LI>España <LI>Francia <LI>Italia <LI>Portugal </OL> |
|
Si por lo contrario se utiliza la directiva <UL></UL> para delimitar la lista, obtendremos una lista sin numerar en que los campos irán precedidos de un punto. El parámetro que puede acompañar esta directiva es type, la cual se puede igualar a tres diferentes valores: disk, circle o square, con lo que el topo o marca puede ser un disco, un círculo o un cuadrado, respectivamente.
El último tipo de lista es la denominada, listas de definición las cuales muestran los elementos tipo Diccionario, o sea, término y definición. Se utiliza para ellas la directiva <DL></DL>. El elemento marcado como término se antecede de la directiva <DT>, el marcado como definición se antecede de la directiva <DD>.
Ejemplos
|
<DL> <DT>el <DD>Artículo masculno <DT>la <DD>Artículo femenino </DL> |
|
Estos tipos de listas no son restrictivas entre sí, es decir que se pueden indexar unas dentro de otras para así encontrar listas lo más complejas que puedas llegar a imaginar. Aquí cierro el capítulo, retándote a que hagas pruebas tu mismo, para ver la facilidad de obtener listas grandes.
Imágenes
Hasta el momento hemos visto como se puede escribir texto en una pagina Web, asi como sus posibles formatos. Ahora vamos a incluir la opción de poder introducir imagenes, los cuales dan una vivez a tu página web final, ya que si sólo optáis por introducir texto la página resultaría infumable. Es bueno recordar que como en todo un exceso es malo, por tanto no abuseís de las imágenes. La directiva a utilizar es <IMG>. Hay dos formatos de imagenes, los cuales los navegadores reconocen, estos son los formatos GIF y JPG. Cualquier otro tipo no será reconocido por vuestro visor, por tanto restringiros a estos dos. Hago un pequeño paréntesis, para hacer una pequeña diferenciación entre los dos formatos. El GIF es un formato de menor calidad (256 colores), y por tanto genera archivos más pequeños, mientras que el formato JPG tiene mayor resolución y por tanto mayor grande es el archivo final, pero por lo contrario tiene la posibilidad de comprimirse, a costa de perder una cierta calidad en el archivo gráfico, obténiendose en casos ficheros de menor capacidad que incluso en el primer formato. Mi recomendación es que utilizes el formato GIF como presentación de una imagen, mientras que el JPG sea un archivo al cual llaméis mediante un hyperenlace, aunque la última decisión es vuestra.
Continuando con el manual; como iba diciendo la directiva <IMG> puede incluir varios parámetros, siendo el primero de ellos obligatorio, mientras que los restantes opcionales:
- src = "imagen"
Indica el nombre del fichero gráfico a mostrar.
- alt = "Texto"
Mostrara el texto indicado en el caso de que el navegador utilizado para
ver la página no sea capaz de visualizar la imagen. - align = TOP / MIDDLE / BOTTOM
Indica como se alineará; el texto que siga a la imagen. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior.
- border = tamaño
Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible cuando la imagen forme parte de un Hyperenlace.
- height = tamaño
Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.
- width = tamaño
Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.
- hspace = margen
Indica el numero de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda.
- vspace = margen
Indica el nú;mero de puntos verticales que separaran la imagen del texto que le siga y la anteceda.
A continuación se muesran diferentes combinaciones de estos parámetros para ver como se aplican:
Ejemplos
- <IMG src="maky.gif" alt= "maky" >
Si el visor no pudiese visualizar el gráfico se vería…
- La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pagina Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre la imagen.
<IMG src= "http://www.elmaky.com/maky.gif">
- <IMG src="maky.gif" width=100 >
- <IMG src="maky.gif" height=20 >
- <IMG src="maky.gif" align=TOP>maky
maky
- <IMG src="maky.gif" align=MIDDLE>maky
maky
- <IMG src="maky.gif" align=BOTTOM>maky
maky
- Hola soy<IMG src="maky.gif" hspace=20>el maky
Hola soy
el maky
- Hola soy<IMG src="maky.gif" vspace=40>el maky
Hola soy
el maky
Hyperenlaces
Una de las gracia de internet, por no decir los más importante es que desde una página se pueda acceder a otras, bien sean de la misma web o de diferentes sitios. Esto se realiza mediante hyperenlaces.
Para incluir un Hyperenlace se utiliza la directiva <A></A>. Un hyperenclace puede contener dentro texto o una imagen, resultando en cualquier de los dos casos una directiva donde se podrá pulsar con el ratón para poder navegar hacia otro lugar. Si el Hyperenlace esta indicado por un texto, este aparecerá subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde rodeándola, a no ser que nosotros le especifiquemos que no aperezca el recuadro. Esta directiva tiene el parámetro href que indica el lugar a donde nos llevará el Hyperenlace si lo pulsamos.
Ejemplos
- <A href = "http://www.elmaky.com/">Pulse para ir a la página de el maky</A>
- <A href = "http://www.elmaky.com/"><IMG src = "maky.gif"></A>
También un hyperenlace sirve para llevarnos a una zona determinada de nuestra página. Para ello debemos marcar en nuestra pagina las diferentes secciones en las que se divide. Esta opción se realiza mediante el parámetro name.
Ejemplo
- <A name = "seccion1"></A>
Esta instrucción marca el inicio de una sección dentro de nuestra página. La seccion se llamará; seccion1. Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la siguiente forma :
Ejemplo
- <A href = "#seccion1">Primera Parte</A>
Además podemos utilizar la directiva de Hyperenlace, como un link para enviar un correo electrónico a una dirección de correo determinada.
Ejemplo
- <A href = "mailto:dirección e-mail">Envíame tus sugerencias</A>
También podemos realizar un Hyperenlace a un fichero cualquiera. En este caso el navegador intentará abrir el fichero, y si no puede hacerlo nos preguntará si deseamos grabarlo en nuestro ordenador.
Tablas
Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas, imagenes, etc…) en diferentes filas y columnas separadas entre si. Es una herramienta muy util para "ordenar" contenidos de distintas partes de nuestra página. La tabla se define mediante la directiva <TABLE></TABLE>. Los parámetros opcionales de esta directiva son :
- border = num.
Indica el ancho del borde de la tabla en puntos.
- cellspacing = num
Indica el espacio en puntos que separa las celdas que estan dentro de la tabla.
- cellpadding = num
Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta.
- width = num o %
Indica la anchura de la tabla en puntos o en porcentaje en función del ancho de la ventana del visor. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las celdas.
- height = num o %
Indica la altura de la tabla en puntos o en porcentaje en función del alto de la ventana del visor. Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas.
- bgcolor = codigo de color
Especifica el color de fondo de toda la Tabla.
Para definir las celdas que componen la tabla se utilizan las directivas <TD>
y <TH>. <TD> indica una celda normal, y <TH>
indica una celda de "cabecera", es decir, el contenido será resaltado en negrita y
en un tamaño ligeramente superior al normal. Los parámetros opcionales de
ambas directivas son :
- align = LEFT / CENTER / RIGHT / JUSTIFY
Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY).
- valign = TOP / MIDDLE / BOTTOM
Indica la alineación vertical del contenido de la celda, en la parte superior (TOP), en la inferior (BOTTOM), o en el centro (MIDDLE).
- rowspan = num
Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.
- colspan = num
Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.
- width = num o %
Indica la anchura de la columna en puntos o en porcentaje en función del ancho de la ventana del visor. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos. Este parametro solo funciona en los navegadores modernos.
- bgcolor = codigo de color
Especifica el color de fondo del elemento de la Tabla.
Para indicar que acaba una fila de celdas se utiliza la directiva <TR>.
A continuación mostraremos un ejemplo de una tabla que contiene solo texto.
Como se indicó anteriormente el contenido de las celtas puede ser cualquier elemento
de HTML, un texto, una imagen, un Hyperenlace, una Lista, etc…
Ejemplo
- <TABLE border = 1 cellspacing = 2 cellpadding = 2 width =80%>
- <TH align = center>Deportes
- <TH align = center colspan = 2>Equipos
- <TR>
- <TD align = LEFT>Baloncesto
- <TD align = LEFT>Estudiantes
- <TD align = LEFT>Pamesa
- <TR>
- <TD align =
LEFT>Fútbol
- <TD align = LEFT>Deportivo
- <TD align = LEFT>Celta
- </TABLE>
| Deportes |
Equipos |
|
|---|---|---|
| Baloncesto |
Estudiantes |
Pamesa |
| Fútbol |
Deportivo |
Celta |
Las directivas <TD> y <TH> son cerradas según el estandar de HTML, es decir que un elemento de tabla <TD> deberia cerrarse con un </TD>, sin embargo los visores asumen que un elemento de la tabla, queda automaticamente "cerrado" cuando se "abre" el siguiente.
Las tablas a igual que las listas de elementos, se pueden insertar unas dentro de otras llegando a un nivel de complejidad elevado.
Frames
Las frames es una técnica para subdividir la pantalla del visor en diferentes ventanas. Para que te hagas una idea este manual se ha realizado mediante frames, ya que puedes ver una ventana a la izquierda donde aparece el índice y una segunda ventana donde muestro el contenido del capítulo seleccionado. Las ventanas en realidad son dos archivos diferentes, lo cual se pueden tratar y manipular de forma separada, permitiendo de esta manera definir diferentes coloresm tamaños, etc.
Para definir las diferentes subventanas o frames se utilizan las directivas <FRAMESET> </FRAMESET> y <FRAME>. La directiva <FRAMESET> indica como se va a dividir la ventana principal. Pueden incluirse varias directivas <FRAMESET> anidadas con el objeto de subdividir una subdivisión. Los parámetros de <FRAMESET> son rows y cols en función de si la división de la pantalla se realiza por filas (rows) o columnas (cols). Los parámetros rows y cols se acompañan de un grupo de números que indican en puntos o en porcentaje el tamaño de cada una de las subventanas. En caso de utilizar rows los tamaños de las subventanas se entienden indicados de arriba a abajo, es decir, el primer valor será el asignado a la ventana superior, el segundo a la ventana inmediatamente inferior, etc… En el caso de cols los
tamaños se aplican de izquierda a derecha.
Ejemplos
- <FRAMESET rows = "25%,50%,25%">
Crea tres subventanas horizontales, la primera ocupará un 20% de la ventana principal, la segunda un 50% y la tercera un 25%.
- <FRAMESET cols = "120,*,100">
Crea tres subventanas verticales, la primera y la tercera tendrán un "ancho" fijo de 120 y 100 puntos respectivamente. La segunda ocupará el resto de la ventana principal (*).
- <FRAMESET cols = "15%,*">
- <FRAMESET rows = 20%,*">
En este caso añadimos dos directivas. La primera divide la ventana principal en dos subventanas verticales, la primera ocupa un 15% de la ventana principal y la segunda el resto. La segunda directiva vuelve a subdividir la primera subventana creada anteriormente, pero esta vez en dos subventanas horizontales, la superior ocupará un 20% de la subventana, y la inferior el resto.
- <FRAMESET rows = 20%,*">
La directiva <FRAME> indica las propiedades de cada subventana. Es necesario indicar una directiva <FRAME> para cada subventana creada. Los parámetros de <FRAME> son :
- name = "nombre"
Indica el nombre por el que nos referiremos a esa subventana.
- src = "URL"
La ventana mostrará en principio el contenido del documento HTML que se indique.
- marginwidth = num.
Indica el margen izquierdo y derecho de la subventana en puntos.
- marginheight = num
Indica el margen superior e inferior de la subventana en puntos.
- scrolling = "yes / no / auto"
Indica si se aplica una barra de desplazamiento a la subventana en el caso de que la página que se cargue en ella no quepa en los límites de la subventana. El valor "yes" muestra siempre la barra de desplazamiento, "no" no la muestra nunca (la zona de la página que no quepa en la subventana no la veremos), y "auto" la muestra solo en caso de que sea necesario para poder ver la página.
- noresize
Si se indica este parámetro, el usuario no podrá "redimensionar" las subventanas con el visor. Un usuario que este viendo una pagina con frames puede redimensionarlas seleccionando un borde de la subventana con el cursor y desplazándolo.
- border = num.
Indica el "borde" que separara esta frame de la siguiente. Si se indica cero (0) no se mostrara borde entre las frames, consiguiendo un efecto muy elegante, siempre y cuando el "fondo" de todas las frames sea el mismo, o sean colores solidos.
Los visores que no soportan la característica de subventanas, no mostrarán nada de lo indicado con estas directivas. Es por ello que existe una directiva llamada <NOFRAMES> </NOFRAMES>. Todo los indicado entre esta directiva será lo que muestren los visores sin capacidad para visualizar Frames. Los visores que soporten Frames obviaran las directivas incluidas entre <NOFRAMES> </NOFRAMES>.
Al usar Frames, nos encontramos con un problema. Cuando queramos mostrar una página
Web debemos indicarle al visor en que subventana queremos que se muestre. Por defecto se mostrará en la ventana donde se encuentre el enlace. Para poder escoger la subventana de destino del Hyperenlace se añade un nuevo parámetro a la directiva <A href= > </A>. Este parámetro se llama target y puede tener los siguientes valores :
- target = "nombre_ventana"
Muestra el Hyperenlace en la ventana cuyo nombre se indica.
- target = "_blank"
Abre una nueva copia del visor y muestra el Hyperenlace en ella.
(Si usamos Netscape esto provoca que tengamos funcionando dos copias del programa). - target = "_self"
Se muestra el Hyperenlace en la subventana activa.
- target = "_parent"
El Hyperenlace se muestra en el <FRAMESET> definido anteriormente al actual.
Si no hay ningún <FRAMESET> anterior se muestra a pantalla completasuprimiendo todas las subventanas de la pantalla.
- target = "_top"
Suprime todas las subventanas de la pantalla y muestra el Hyperenlace a pantalla completa.
La definición de las Frames debe ir antes de la definición del cuerpo de documento (<BODY>). Como ejemplo vea el código HTML de este manual.
<HTML>
<HEAD>
<TITLE>Manuales de programación – HTML</TITLE>
</HEAD>
<FRAMESET cols="160,100%" border="0">
</FRAMESET>
</HTML>
Este ejemplo lo que hace es que divide el visor en dos subventanas, una de 160 pixels y la otra el restante de la pantalla. En la primera subventana muestra el archivo el cual contiene el índice, y la segunda la cual he denominado principal la introducción del manual. En los Hyperenlaces de la subventana del índice son de la siguiente manera:
- <A href ="html.html" target=principal>
De esta forma se abren en la subventana de la derecha, manteniendo siempre fijo la subventana del índice. En caso de que el visor no pueda mostrar Frames, el código muestra un enlace a la página de Netscape para poder bajar la última versión de este navegador y así solucionar el problema.
Hasta aquí ha llegado esta pequeña noción de HTML, esperando que esta información te pueda haber sido útil, te recomiendo que pongas en práctica los conocimientos adquiridos en estas 10 lecciones. Si algún día poseo de más tiempo intentaré profundizar más en este lenguaje. Hasta entonces no olvides visitar las otras secciones de elmaky.com
