html referencia

7/21/2019 HTML Referencia

1/23

IESTP Flix de la Rosa Reategui y Gaviria

Computacin e Informtica I Mdulo / Gestin y Administracin Web

1] Prof. Enrique Pinedo Macedo{} [email protected]

Tutorial de HTML

Internet ha crecido hasta convertirse en lo que es hoy gracias, en gran medida, al HTML. Este

lenguaje de etiquetas es la base sobre la que se construyen las pginas que se intercambian

el servidorweb y el navegador del usuario.

En sus orgenes supuso una revolucin, en tanto que permita la inclusin de imgenes en los

documentos y permita dar cierto formato al texto. Ahora sus posibilidades se han ampliado

todava ms, con la llegada de los CGIs, los lenguajes de scripting, las hojas de estilos, el

lenguaje Java y el DHTML. Conocerlo es un buen comienzo.

Indice

Captulo 1: Introduccin al HTML

1. Qu es el HTML?

2. El concepto de etiqueta (tag)

3. El concepto de argumento

4. Mi primera pgina

Captulo 2: Insercin de textos

1. Creacin de prrafos

2. Dando formato al texto

Captulo 3: Insercin de imgenes

1. Formatos de imgenes

2. Insercin de una imagen de fondo

3. Insercin de imgenes en el documento

Captulo 4: Creacin de enlaces

1. Concepto de enlace o hipervnculo

2. Enlaces externos e internos

3. Las rutas opaths

4. Creando enlaces de texto

5. Creando enlaces de imgenes

6. Eltarget u objetivo del enlace

Captulo 5: Creacin de tablas

1. Introduccin

2. Estructura de una tabla

3. Especificando las dimensiones

4. Posicionamiento del texto

5. Bordes y colores

6. Conclusin


2/23




Captulo 1: Introduccin al HTML

1. Qu es el HTML?



4. Mi primera pgina

1. Qu es el HTML?

Laworld wide web tiene una arquitectura cliente / servidor. Un programa cliente que se

ejecuta en tu ordenador (el navegador o browser) solicita informacin de un programa

servidor que se ejecuta en una mquina en cualquier otro lugar. El servidor enva la

informacin solicitada de vuelta a travs de la red al programa navegador, el cual la

interpreta para mostrarla en la pantalla.

Para que el intercambio de informacin entre el cliente y el servidor se realice de acuerdo aunos parmetros que ambos puedan entender, se utilizan protocolos de comunicaciones.

Internet se fundamenta en el protocolo TCP/IP, sobre el cual se construyen otros protocolos

de aplicacin. En el caso de laworld wide web, el protocolo utilizado es el HTTP (Hipertext

Transfer Protocol).

Cuando el navegador recibe la informacin, la interpreta para mostrarla en la pantalla. Las

pginas que se visualizan estn formadas, fundamentalmente, por textos e imgenes, con

una estructura y un formato especficos. El HTML (Hipertext Markup Language) es lo que nos

permite decirle al navegador cmo debe mostrar la informacin: formato de los textos,

colores, orden de los prrafos, etc.

A menudo observamos como una misma pgina puede visualizarse de manera diferente

(colores, ancho de tablas, formato de textos, etc.) en funcin del navegador que se utilice:

el HTML no es una forma de codificar la informacin, sino de especificar el formato que debe

darse a la informacin. Por ejemplo, podemos transmitir la palabra "Hola!" que tenemos

guardada en un fichero de texto. Pero, cmo decirle al navegador que la muestre de color

rojo y centrada? El HTML es la respuesta.


El HTML describe el aspecto visual que debe tener una pgina mediante la utilizacin de

etiquetas (tags). Las etiquetas le indicarn al navegador la posicin relativa de los elementos

de la pgina, su tamao, las tipografas y colores a utilizar, etc.

Las etiquetas son como instrucciones que le indican al navegador como mostrar la

informacin. Existen dos clases de etiquetas:

I. Etiquetas vacas

Tiene el siguiente formato:

Se utilizan para introducir saltos de lnea, lneas horizontales, y otros elementos no asociados

al formato de textos o imgenes.


3/23




I. Etiquetas contenedoras

Tienen el siguiente formato:

...

Estas etiquetas dan un formato al texto o porcin del documento que engloban. Este tipo de

etiquetas tiene una marca inicial, y una marca final igual que la inicial, pero con el carcter"/". Todo lo que est contenido entre ambas marcas quedar sujeto al formato indicado por

la etiqueta. Por ejemplo, podemos mostrar la palabra "Hola!" en cursiva de la siguiente forma:

Hola!

La mayora de estas etiquetas pueden, a su vez, contener otras etiquetas, de cualquiera de

los dos tipos. Por ejemplo, para mostrar la palabra "Hola!" en cursiva y negrita:

Hola!


Las etiquetas pueden especificar, por ejemplo, que cierta palabra aparezca en negrita. Pero

si queremos que cierta palabra aparezca de color rojo, necesitamos suministrar un parmetro:

el color. La mayora de las etiquetas tienen parmetros para indicar mltiples aspectos del

formato, como el color, el tamao, la posicin, etc.

El formato de una etiqueta con parmetros es el siguiente:

...

Por ejemplo, para mostrar la palabra "Hola!" en rojo, utilizamos la etiqueta font con elparmetro color igual a red:

Hola!

4. Mi primera pgina

Toda pgina HTML debe comenzar por la etiqueta y terminar con . Todo lo que

figure entre estas etiquetas ser interpretado por el navegador como un documento HTML.

Lo que quede fuera de ellas ser, en la mayora de los casos, ignorado.

El documento HTML se divide siempre en dos partes: cabecera y cuerpo.

4.1. Cabecera

La cabecera figura entre las etiquetas y . En ella se especifica el ttulo,

el autor, y otras caractersticas del documento que no se muestran fsicamente en la

pgina y que sirven para facilitar su indexacin (son lo que se conoce como meta

tags). En la cabecera tambin deben incluirse los scripts que necesite el documento

(JavaScript, JScript, etc.) y las definiciones de estilos (si se utilizan hojas de estilos).

4.2. Cuerpo


4/23


5/23




Prrafo centrado.

Prrafo alineado a la izquierda...

y pegado a esta lnea.

2. Dando formato al texto

Para controlar las tipografas, colores y tamaos de los textos de tu pgina puedes utilizar la

etiqueta ... . Estetag est siendo reemplazado por la utilizacin de hojas de

estilos (CSS), pero para usuarios poco avanzados es mejor comenzar utilizando la etiqueta

, ms fcil de entender y de implementar.

Para elegir el tipo de letra que desea utilizar en un prrafo, basta con incluirlo entre ... . Por ejemplo, si queremos escribir Hola! con letra Century

Gothic utilizamos el siguiente cdigo:

Hola!

Lo que resulta en:

Hola!

Si queremos cambiar el color, emplearemos ... , donde color es un

nmero que indica el color. Este nmero est codificado en hexadecimal, y utiliza 256 bits

para cada uno de los colores primarios (rojo, verde y azul). En hexadecimal con dos

caracteres (de 0 a 9 y de la A a la F) se representan valores de 256bits. As, el color blanco se

expresa como #FFFFFF y el negro como #000000. Como se aprecia, este sistema es poco

intuitivo, por lo que se pueden usar las nomenclaturas estndar de los colores en ingls (red,para el rojo,black para el negro, etc.), pero este sistema es menos flexible y ms dependiente

del navegador.

Veamos un ejemplo:

Hola!

Que resulta en:

Hola!

Finalmente, si lo que queremos es modificar el tamao, le etiqueta a usar es ... , donde tamao es un nmero que puede indicar el tamao

absoluto (con rango de 1 a 7) o el relativo. Por ejemplo, si se utiliza size="2" e texto se mostrar

en tamao 2. Si se utiliza size="+2", se le indica al navegador que muestre el texto 2 veces ms

grande que el tamao por defecto definido.

El siguiente ejemplo

Hola!

Por supuesto, existe la posibilidad de combinar los 3 modificadores anteriores en un mismotag

, para especificar el tamao, color y tipo de letra de una sola vez. En este ejemplo

Hola!


6/23




Indicamos que el texto debe escribirse con tipografacourier, color rojo y tamao 4.

Captulo 3: Insercin de imgenes

1. Formatos de imgenes2. Insercin de una imagen de fondo

3. Insercin de imgenes en el documento

1. Formatos de imgenes

Buena parte de la potencia del HTML se basa en la posibilidad de insertar imgenes en los

documentos. Nuestras pginas adquieren de este modo un aspecto visual atractivo, y se

convierten en una potente herramienta visual para transmitir y comunicar ideas.

Aunque algunos navegadores soportan otros formatos de imgenes, fundamentalmente seutilizan los 2 que originalmente soportaron Netscape y Mosaic (uno de los primeros

navegadores):

1.1 GIF (Graphics Interchange Format)

El formato GIF (Graphics Interchange Format, Formato de Intercambio de Grficos) es

un formato propietario de CompuServe Inc. cuya especificacin data de 1987. Este

formato se caracteriza por limitar la profundidad del color a 256 colores y por poseer

un sistema de compresin rudimentario (basado en el algoritmo LZW) que es efectivo

nicamente cuando los colores de la imagen son planos (sin existencia de mltiples

transiciones de color). De esta forma, es el formato ideal para iconos, diagramas ygrficas.

Otra de sus caractersticas es la posibilidad de crear imgenes GIF entrelazadas. Esto

quiere decir que la informacin de la imagen se almacena por filas no consecutivas,

permitiendo una visualizacin progresiva de la imagen completa pero con poca

resolucin. Segn se va descargando la totalidad de la misma, va aumentando la

resolucin, hasta que se tiene la imagen final.

Pero lo que ms juego ha dado del formato GIF es la posibilidad de crear pequeas

animaciones (GIFs animados). Se basa en el almacenamiento en un mismo fichero de

imagen de varios fotogramas. El formato incluye la definicin de los tiempos entre cadafotograma. A pesar de ser la forma ms sencilla de crear animaciones, no es la ms

ptima en cuanto a tamao y calidad, por lo que queda limitado a iconos y pequeos

efectos visuales.

1.2 JPEG (Joint Photographic Experts Group)

El estndar JPG (Joint Photographic Experts Group) surge con la necesidad de crear

un formato de almacenamiento de imgenes con calidad similar a la de una

fotografa y con un alto grado de compresin (para reducir el tamao de los archivos).

De esta forma, este formato soporta 16 millones de colores y es ideal para imgenes

con multitud de colores, como fotografas.


7/23




El formato permite seleccinar el grado de compresin de la imagen, lo que es ideal

para lograr tamaos de archivo ptimos. El algoritmo de compresin que utiliza es con

prdidas, lo que implica que a mayor grado de compresin, menor es la calidad de la

imagen. Sin embargo, y debido a las caractersticas del ojo humano, determinadas

prdidas de calidad no son apreciables, por lo que se pueden conseguir compresiones

del 50% sin que se aprecie prdida de calidad.

2. Insercin de una imagen de fondo

Para insertar una imagen de fondo basta con aadir un parmetro a la etiqueta . Por

ejemplo:

Con este ejemplo indicamos que el fondo de nuestra pgina sea la imagen fondo.jpg. Esta

imagen debe existir en la misma carpeta que contenga la pgina HTML. Si queremos ordenarlos archivos en diferentes carpetas, podemos indicar dnde se encuentra nuestar imagen.

Veamoslo con otro ejemplo:

En este caso, la imagen est dentro de la carpeta imagenes. Tambin es posible enlazar con

una imagen que est en otro servidor, espicificando su URL (ver apartado 3 para una

explicacin del concepto de URL).

3. Insercin de imgenes en el documentoPara insertar una imagen en el documento se utiliza la etiqueta . Para especificar la

imagen a visualizar se utiliza el parmetro src:

La imagen aparecer en el lugar donde se encuentre la etiqueta. Mediante el uso de otros

parmetros podemos especificar la alineacin del texto alrededor de la imagen, el tamao

de la misma y otras caractersticas. Vamos a ver los ms utilizados:

align: permite especificar la alineacin de la imagen y del texto alrededor de la imagen.

Puede tomar los valores left, right, top, texttop, middle, absmiddle, baseline, bottom,absbottom. Ejemplos:

Texto alineado en el centro...

Texto alineado en el centro...

Texto alineado abajo...


8/23




Texto alineado abajo...

alt: este parmetro permite especificar un texto alternativo, que se muestra cuando el

puntero del ratn pasa por encima de la imagen. Tambin es el texto que aparece antes de

que se complete la carga de la imagen, y en lugar de la misma en los navegadores que no

soportan grficos. Ejemplo:

width / height: permiten especificar el tamao de la imagen (ancho y alto). Si no se incluyen,

la imagen se muestra a su tamao real. Aunque se desee mostrar la imagen a tamao real,

es conveniente incluir estos parmetros para permitir que el navegador construya la pginaantes de haber finalizado la carga de todas las imgenes, mostrando por lo menos el texto

del documento. Ejemplo:

border: cuando una imagen es un enlace, por defecto, el navegador la incluye en una marco

o borde (ver imagen de la izquierda). Si no se desea que aparezca este borde, debe

especificarse border="0" (imagen de la derecha). Tambin puede tomar un valor distinto de

0, en cuyo caso representa el tamao (grosor) del borde.

Captulo 4: Creacin de enlaces



3. Las rutas opaths

4. Creando enlaces de texto



9/23





Una de las mayores virtudes del lenguaje HTML, y la que le da su nombre, es la posibilidad de

crear enlaces o hipervnculos que relacionan diferentes pginas entre s. HTML son las siglas

de HiperText Mark-up Language, que podra traducirse como lenguaje de etiquetashipertexto.

Los enlaces, vnculos o hipervnculos (tambin conocidos como links, su denominacin

inglesa) son simplemente caminos hacia otras pginas de la world wide web. Su

funcionamiento es muy simple: el texto que queramos permita ir a otra pgina se marca de

forma especial (ya veremos cmo). A partir de entonces, en la pgina aparecer resaltado

(originalmente, mediante color azul y subrayado), y cuando el ratn se mueva sobre dicho

texto, cambiara el puntero para indicar que ah tenemos un enlace. Al pulsar sobre l,

instruimos al navegador para abrir la pgina a la que hace referencia.

El resultado es la vinculacin de nuestra pgina y la pgina a la que hace referencia elenlace. De esta forma, se va creando entre las pginas de diferentes sitios una maraa de

hiperenlaces, que da nombre a laworld wide web (tela de araa mundial).


Lo primero que debemos entender, antes de lanzarnos a la creacin de enlaces, es el

funcionamiento de laworld wide web. Nuestras pginas residen en un ordenador (llamado

tpicamentehost). Este ordenador est conectado a la red permanentemente, y pone a

disposicin de todas las pginasweb

que alberga. Simplificando un poco, podemos decir

que nuestras pginas podrn enlazar con pginas de otroshosts (lo que sera un enlace

externo) o con pginas de nuestro propiohost (enlace interno).

Realmente, nuestrohost puede contener pginas de diferentessites (no slo las nuestras, sino

tambin las de otras personas o empresas). Si enlazamos con ellas tambin creamos enlaces

externos.

La diferencia fundamental est en la necesidad de indicar, para un enlace externo, el

nombre del host que contiene la pgina a la que estamos enlazando. Para los enlacesinternos, no ser necesario. El navegador sabe que si un enlace no lo indica es interno, lo que


10/23




quiere decir que la pgina enlazada est en el mismohost que la pgina que contiene el

enlace. Puede parecer complicado, pero realmente no lo es.

3. Las rutas opaths

El concepto de ruta opath tambin suele confundir al principio. Cuando creamos un sitio

web pequeo, con un centenar de pginas, quiz no nos preocupe demasiado el orden, y

no nos importe que todas ellas se encuentren en el mismo fichero. Los ficheros son como los

cajones de los espacios de almacenamiento de loshots.

Cranme, meterlo todo en un mismo cajn no es buena idea. Sobre todo si nuestrosite crece,

y tenemos miles de pginas. Mantener un site en estas condiciones es ardua tarea.

El orden siempre ayuda, lo que nos induce a crear mltiples ficheros o cajones para

almacenar las pginas. Dentro de un fichero o carpeta, podemos crear subcarpetas para

clasificar mejor, y as sucesivamente. El resultado final es que para localizar una pginadebemos indicar la ruta opath hacia ella. Esta ruta no es ms que la sucesin de los nombres

de los ficheros hasta llegar al que, finalmente, contiene la pgina.

Por ejemplo, si la pgina ejemplo1.html est en la carpeta ejemplos, la cual a su vez est en

la carpeta tutoriales, su ruta sera:

/tutoriales/ejemplos/ejemplo1.html

El concepto de ruta relativa y ruta absoluta aaden ms complejidad al asunto. La ruta se

dice absoluta si parte de la raz de nuestra zona de almacenamiento (es decir, parte de la

carpeta que contiene a cualquier otra, y que normalmente se designa simplemente por el

carcter/). El ejemplo anterior es una ruta absoluta. Se caracteriza por comenzar con dichocarcter/.

Si la ruta parte de otra carpeta, entonces es relativa. Por ejemplo, desde la pgina

ejemplo1.html podemos referenciar a una pgina contenida en la carpeta tutoriales, y de

nombre tutorial1.html, de este modo:

../tutorial1.html

Y desde tutorial1.html, podemos referenciar la pgina ejemplo1.html as:

ejemplos/ejemplo1.html

Como se observa, estos ejemplos no comienzan con el carcter/, lo que indica que son rutas

relativas. Relativas a qu? A la carpeta que almacena la pgina que contiene el enlace.

La cadena .. (dos puntos seguidos) tiene un significado especial: referencia siempre a la

carpeta padre.

4. Creando enlaces de textos

Si comprendemos los conceptos anteriores, no tendremos ninguna dificultad para crear

enlaces. La etiqueta HTML destinada a tal efecto es ... . La viene deanchor

(en ingls, ancla).


11/23




Por ejemplo, si queremos que el siguiente texto "Enlace" tenga un enlace a la pgina ndice

de este tutorial, de nombre html.html, escribiremos:

Enlace

Y el resultado ser:

Enlace

Como se ve, la sintxis es muy sencilla. El enlace anterior es relativo, porque no incluye el

nombre delhost. Si queremos crear un enlace absoluto a esta misma pgina, tendremos que

escribir:

Enlace

La codificacin de este ejemplo est partida en 2 por cuestiones de espacio (deber estar

en una sola lnea). Como se ve, ahora aparece el host (www.google.com) y la ruta

(/tutoriales/html/html.html).


Para que una imagen se convierta en un enlace, basta con incluir la definicin de la imagen

dentro de las etiquetas y .

Por ejemplo:

En este ejemplo, el enlace est en la imagen imagen.gif. Y el resultado:

Como se ve, la imagen est especificada con una ruta relativa.

Captulo 5: Creacin de tablas

1. Introduccin


3. Especificando las dimensiones


5. Bordes y colores

6. Conclusin


12/23




1. Introduccin

Quiz uno de los elementos de presentacin de datos ms comunes es las pginasweb sea

la tabla, que nos ayuda a organizar la informacin cmodamente en filas y columnas,

mejorando notablemente el aspecto visual de la misma.

Sin embargo, la utilidad de las tablas HTML va mucho ms all de la simple presentacin

ordenada de la informacin. El lenguaje HTML tiene enormes carencias en lo que a

maquetacin de los elementos de una pgina se refiere (posicionamiento de imgenes,

mrgenes, alineacin del texto...). Los diseadores han suplido tradicionalmente estas

deficiencias utilizando tablas de forma profusa.

Hoy en da es comn la presencia de varias tablas en una pginaweb, incluso tablas dentro

de celdas de otras tablas. Si an no sabes cmo crear una tabla, este es el momento de

aprender los fundamentos.


En HTML, las tablas se construyen especificando filas y celdas. El conjunto de celdas de una

fila ir encerrado en las etiquetas de fila, y el conjunto de filas de la tabla, en las etiquetas de

tabla.

El comienzo y fin de una tabla se define mediante eltag ... . Para especificar

cada fila de la tabla se utilizan las etiquetas ... . Finalmente, para especificar cadacelda de una fila habr que usar las etiquetas ... .

Teniendo en cuenta estas simples reglas, vamos a mostrar a continuacin algunos ejemplos:

Fila 1, celda 1

Fila 1, celda 2

Fila 2, celda 1Fila 2, celda 2

El ejemplo anterior crea la siguiente tabla de 2 filas y 2 columnas:

Fila 1, celda 1 Fila 1, celda 2



13/23




3. Dimensionando la tabla

Las etiquetas que definen la tabla admiten diferentes parmetros para lograr el correcto

dimensionamiento de las celdas y de los bordes que forman la tabla. Tambin es posible

especificar la separacin que debe existir entre el texto y el borde de la tabla.

Los parmetros que rigen estas caractersticas son los siguientes:

Parmetro Etiqueta Significado

width

Anchura total de la tabla o anchura de la celda. Puede

especificarse en % o en pixels.

height Altura de la celda. Puede especificarse en % o en pixels.

cellspacing Separacin entre celdas.

cellpadding Separacin entre el texto y el borde de la celda.

El parmetro height se especifica para el tag que define una celda, pero afectar

siempre a toda la fila. Por otra parte, podramos especificar anchuras de celdas incoherentes

(dando diferente anchura a celdas de una misma columna, o haciendo que la suma de las

anchuras no coincida). Todos estos errores suelen ser asumidos por los navegadores sin

problemas, pero hay que tener cuidado, ya que la forma en la que visualizan una tablaerrnea diferir entre navegadores de distintos fabricantes.

Jugando con los parmetros anteriores podemos ya modificar la tabla del ejemplo anterior

para obtener diferentes presentaciones. Vemoslo con algunos ejemplos:

Aumentamos la anchura (por defecto, la anchura de cada celda se adapta al texto

de la misma), y la separacin entre celdas:

Fila 1, celda 1

Fila 1, celda 2

Fila 2, celda 1

Fila 2, celda 2




14/23




Anchura y altura de la primera columna diferentes de la de la segunda, y mayor

espacio entre el texto y el borde de la tabla:

Fila 1, celda 1

Fila 1, celda 2

Fila 2, celda 1

Fila 2, celda 2




Como se observa en los ejemplos anteriores, nos falta todava ejercer control sobre la posicin

que ocupa el texto dentro de cada celda.

Para estos menesteres existen una serie de parmetros que detallamos a continuacin, y quese aplican altag :

Parmetro Significado

align Alineacin horizontal. Puede tomar los valores left (izquierda), center (centro)

y right (derecha).

valign Alineacin vertical. Puede tomar los valores top (superior), middle (central),

botton (inferior) y baseline (lnea de base).

Jugando con estos parmetros podemos modificar el ejemplo anterior para que el texto de

la primera celda est en la parte inferior de la misma, y alineado a la derecha:

Fila 1, celda 1

Fila 1, celda 2

Fila 2, celda 1

Fila 2, celda 2


15/23




Fila 1, celda 1

Fila 1, celda 2


5. Bordes y colores

Para terminar esta introduccin al mundo de la creacin de tablas en HTML, slo nos falta

indicar cmo podemos mejorar el aspecto de nuestras tablas.

Lo primero que querremos hacer es jugar con la anchura del borde. Para ello se ha definidoel parmetro border de la etiqueta , que define la anchura de todos los bordes de la

tabla enpixels. Si se especifica con valor 0, el borde no se visualiza.

El color del borde lo controla el parmetro bordercolor, que se aplica al tag . Este

parmetro toma valores hexadecimales o nombres de colores predefinidos, segn el alfabeto

ingls. La forma en que se indica un color con cdigo hexadecimal es la misma que se utiliza

para otros elementos de una pgina (por ejemplo, para el color de fondo).

Finalmente, tambin podemos modificar el color de fondo de cada celda de forma

independiente, aplicando el parmetro bgcolor altag . Los colores se especifican de

igual forma.

Con todo esto, podemos mejorar el aspecto del ejemplo anterior de la siguiente forma:

Fila 1, celda 1

Fila 1, celda 2

Fila 2, celda 1

Fila 2, celda 2

Fila 1, celda 1

Fila 1, celda 2



16/23




6. Conclusin

Las tablas son el corazn de muchas pginas web. Bien empleadas pueden mejorar

notablemente el diseo de nuestra pgina, y facilitar la navegabilidad.

La presencia de muchas tablas posee, sin embargo, algunos inconvenientes:

Mayor complejidad en el cdigo (sobre todo si tenemos muchas tablas anidadas) lo

que dificulta el mantenimiento de la pgina

Ralentizacin de la renderizacin de la pgina en algunos navegadores (esto afecta

en mayor medida al Navegador).

Por estos motivos, aunque es bueno usar tablas, conviene no abusar de ellas.

Marcos

Un marco (o frame) es una ventana independiente dentro de la ventana general del

navegador. Cada marco tendr sus bordes y sus propias barras de desplazamiento. As cada

pgina se dividir en la prctica en varias pginas independientes.

Para crearlos necesitaremos un documento HTML especfico, que llamaremos documento de

definicin de marcos. En l especificaremos el tamao y posicin de cada marco y eldocumento HTML que contendr. Vamos a ver un ejemplo de este tipo de documento:

Mi primera pgina con marcos


17/23




Lo siento, pero slo podrs ver esta pgina si tu navegador tiene la capacidad de visualizar

marcos.

Vamos a explicar detalladamente este ejemplo antes de investigar algo ms a fondo cada

una de las etiquetas. Vemos que la cabecera de la pgina es similar a un documento normal,

pero el habitual BODY es sustituido por un FRAMESET. En cada FRAMESET se divide la ventana

actual (sea la general o un marco) en varias ventanas definidas o por el parmetro COLS o

por ROWS. En ste, separado por comas, se define el nmero de marcos y el tamao de cada

uno.

Dentro del se hacen dos cosas. Primero, definir cada uno de los marcos

ponindoles un nombre y especificando qu fichero HTML le corresponde mediante laetiqueta . Por ltimo, especificamos lo que ver el usuario en el supuesto (cada vez

ms raro) de que su navegador no soporteframes dentro de la etiqueta . Ahora

veremos todos estos elementos en mayor detalle.

1. Etiqueta

Segn el estndar, esta etiqueta slo debera contener el nmero y tamao de cada marco,

pero las extensiones de Netscape y Explorer al estndar obligan a estudiar un par de

parmetros ms.

En general, los navegadores dibujan un borde de separacin entre los marcos. Si deseas

eliminarlo puedes hacerlo de dos maneras: en las etiquetas de cada una de los

marcos contiguos al borde a eliminar o incluyendo el parmetro FRAMEBORDER=0 en el

.

Cuando eliminas ese borde, podrs ver cmo el navegador deja an un hueco entre marcos.

Este se elimina aadiendo los parmetros FRAMESPACING=0 BORDER=0.

Vamos a examinar por ltimo los parmetros COLS y ROWS. Deberemos asignarles una lista

de tamaos separada por comas. Se admiten los siguientes formatos de tamao:

Con porcentajes: Al igual que con las tablas, podemos definir el tamao de un marco

como un porcentaje del espacio total disponible.

Absolutos: Si ponemos un nmero a secas, el marco correspondiente tendr el tamao

especificado en pixels.

Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos indicando que

queremos todo el espacio sobrante para ese marco. Podemos poner este smbolo en

varios marcos, que se repartirn el espacio equitativamente como buenos hermanos.

Si queremos que uno tenga ms deberemos ponerle al asterisco un nmero delante.

As, un marco con un espacio de 3* ser tres veces ms grande que su compaero,

que tiene un asterisco slo, el pobre.


18/23




Por ejemplo, el siguiente cdigo es una muestra de cmo combinar los tres mtodos:

Supongamos que el ancho total de la ventana son 640 pixels. El primer marco ocupar el 10%,

es decir, 64 pixels. El tercero necesita 200, luego nos quedan 476 para los otros dos. Como elcuarto debe tener el doble de espacio que el segundo, tenemos aproximadamente 158

pixels para este ltimo y 316 para el cuarto marco.

Hay que tener cuidado cuando usamos valores absolutos en la definicin de marcos;

debemos asegurarnos de tener al menos un marco con un tamao relativo si queremos estar

seguros del aspecto final de la pgina.

Por ltimo, indicar que las etiquetas se pueden anidar. Esto se hace poniendo

otro donde normalmente colocamos las etiquetas tal que as:

El resultado del anidamiento lo podris contemplar aqu.


19/23




2. Etiqueta Esta etiqueta define tan slo las caractersticas de un marco determinado, no de un conjunto

de ellos. Estos son los parmetros que admite:

Parmetro Utilidad

NAME Asigna un nombre a un marco para que despus podamos referirnos a l.

SRC Indica la direccin del documento HTML que ocupar el marco.

SCROLLINGDecide si se colocan o no barras de desplazamiento al marco para que podamosmovernos por su contenido. Su valor es por defecto AUTO, que deja al navegadorla decisin. Las otras opciones que tenemos son YES y NO.

NORESIZE Si lo especificamos el usuario no podr cambiar de tamao el marco.

FRAMEBORDERAl igual que su homnimo en la etiqueta , si lo igualamos a cero seeliminar el borde con todos los marcos contiguos que tengan tambin este valora cero.

MARGINWIDTHPermite cambiar los mrgenes horizontales dentro de un marco. Se representa enpixels

MARGINHEIGHT Igual al anterior pero con mrgenes verticales.

15.3. Acceso a otros marcos

Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva pginaa la que queremos acceder la veremos encerrada en ese mismo marco. Es posible que

deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que no sirve de ndice y otro

donde mostramos los contenidos sera deseable que los enlaces del marco ndice se abrieran

en el otro marco. Esto es posible hacerlo gracias al parmetro TARGET.

Este parmetro se puede colocar en tres etiquetas: , y . En las dos primeras

sirve para indicar el marco en el que abriremos ese enlace en particular y el ltimo

modificaremos el marco en el que por defecto se nos muestran todos los enlaces.

Pero para que un parmetro funcione, es habitual que le asignemos un valor, y TARGET no es

una excepcin. Para indicarle el marco que deseamos le asignaremos el nombre del mismo.As, en los ejemplos anteriores, si en el marco llamado indice tenemos un enlace que

queremos se abra en el marco principal pondremos:

Tambin existen cuatro nombres reservados que podremos utilizar en el parmetro TARGET:

_top

Elimina todos los marcos existentes y muestra la nueva pgina en la ventana original sin

marcos.

_blank


20/23




Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.

_self

Muestra la nueva pgina en el marco donde est declarado el enlace.

_parent

Muestra la nueva pgina en el que contiene al marco donde se declara el

enlace. En el ejemplo que pusimos de anidados, un enlace situado en el marco

ejemplo cuyo parmetro TARGET fuese igual a _parent eliminara la separacin entre los

marcos ejemplo y principal y mostrara en ese nuevo marco la nueva pgina.

SonidoAun cuando les pueda parecer increble a algunos hombres de poca fe, es posible escuchar

sonidos (o msica) desde el propio navegador. Los navegadores incorporan desde hace

tiempo la capacidad de reproducir sonido. El nico problema es que los archivos suelen ser

grandes y, siendo algo innecesario y superfluo, poca gente incluye melodas en sus pginas.

Los formatos que se puede asegurar que los navegadores reproducirn son los archivos WAV,

MIDI y MP3.

1. Sonido activado por el usuario

La manera ms sencilla de incluir sonidos es dejando al usuario la decisin de escucharlos o

no. Para hacerlo incluiremos el sonido en el parmetro HREF de un enlace, como si fuera una

pgina HTML:

Si pulsas te saludo

2. Sonido de fondo

Lo del sonido de fondo de una pgina se reproducir empleando el siguiente cdigo:

El parmetro SRC indicar el archivo a reproducir. Esta etiqueta admite tambin otro

parmetro, LOOP, que indica el nmero de veces consecutivas que sonar el fichero. Si se

indica LOOP="infinite", el archivo se reproducir indefinidamente, mientras estemos en la

pgina. Emplear los parmetros width="0" height="0" para evitar que el reproductor se

visualice.


21/23




Los estndares del HTML

Ejemplo de ampliacin de una etiqueta. Separador , con las que se puede modificar su

apariencia y posicionamiento:

Ocupa el 75% de su anchura(width) normal.

Tiene una anchura de 300 pixels.

Se puede alinear a la izquierda:

O a la derecha:

Se puede variar su espesor:

Tambin se puede hacer que sea una lnea slida, no embutida sobre el fondo:

Texto en movimientoVamos a ver distintas soluciones para conseguir texto en movimiento: haciendo uso del

lenguaje HTML (las marquesinas).

Marquesinas (Marquees)

Una marquesina (en ingls,marquee) es una ventana en la que se desplaza un texto.

La etiqueta bsica es:

Texto que se desplaza

Como no hemos aadido ningn atributo dentro de la etiqueta, el comportamiento de la

marquesina es el que tiene pordefecto: ocupa todo el ancho de la pantalla, tiene la altura


22/23




de una lnea y el texto se desplaza lentamente de derecha a izquierda. Vamos a ver los

distintos atributos que modifican su apariencia y comportamiento:

WIDHT, HEIGHT

Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden ser igual a un nmero

de pixels, o a un porcentaje de la pantalla. Ejemplo:

Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una

altura de 60 pixels

ALIGN

Modifica el alineamiento del texto que rodea a la marquesina, que puede serTOP (arriba),

MIDDLE (en medio) o BOTTOM (abajo). Ejemplo:

La palabra "Hola!" estar alineada con la parte

inferior de la marquesina Hola!

BEHAVIOREste atributo (que quiere decir en inglscomportamiento) sirve para definir de qu manera

se va a efectuar el desplazamiento del texto. Si es igual a SCROLL (el valor por defecto), el

texto aparece por un lado, se desplaza hasta el otro hasta desaparecer por l, y vuelve a

empezar (como los casos que hemos visto anteriormente). Si es igual a SLIDE, aparece por un

lado y se desplaza hasta llegar al otro extremo, y se para ah. Si es igual a ALTERNATE se

desplaza alternativamente hacia un lado y otro, siempre dentro de los lmites de la

marquesina. Ejemplo:

Este texto se mueve a un lado y otro, sin desaparecer

BGCOLORCon este atributo se modifica el color de fondo de la marquesina, Ejemplo:

Esta marquesina tiene un fondo de color rosa

DIRECTION

Este atributo sirve para modificar la direccin hacia la que se dirige el texto. Por defecto es

LEFT (izquierda). Se puede hacer que el texto se dirija hacia la derecha igualando este atributo

a RIGHT. Ejemplo:

Este texto se dirige hacia la derecha

SCROLLAMOUNT

Define la cantidad de desplazamiento del texto en cada movimiento de avance, expresado

en pixels. Cuanto mayor es el nmero, ms rpido avanza. Ejemplo:

Doy saltos grandes

SCROLLDELAY

Define el tiempo entre cada movimiento de avance, expresado en milisegundos. Cuanto

mayor es el nmero ms lento avanza. Ejemplo:

Espero mucho entre cada salto

LOOP

Especifica el nmero de veces que aparecer el texto. Es indefinido por defecto.


23/23



23] P f E i Pi d M d {} i l @ il

HSPACE, VSPACE

Definen, respectivamente, la separacin en sentido horizontal o vertical del texto que est

fuera de la marquesina.

Fuentes dentro de las marquesinas

Si se desea que el texto que aparece dentro de una marquesina tenga una fuente concreta,

distinta de la que tiene por defecto el navegador, se debe poner la etiqueta

porfuera de la etiqueta de la marquesina. Ejemplo:

Esto se ve con la fuente Impact

NOTA: Para que esto surta efecto, la fuente indicada debe estar instalada en el disco duro

del usuario. Vase all tambin cmo se pueden indicar otras fuentes alternativas.

Marquesina dentro de una Tabla:

Marquesina dentro de una tabla

html referencia

Documents