Texto de prueba: Directiva cerrada

HTML El HTML (Hyper Text Markup Language) es un sistema para estructurar documentos; que se utiliza para la creación de páginas Web. Estos documentos pueden ser Mostrados por cualquier navegador, ya sea Netscape, Microsoft Explorer. Mosaic, etc. Básicamente, el HTML consta de una serie de órdenes o directivas, que indican al navegador que estemos utilizando, la forma de representar los elementos (texto, gráficos, etc.) En última instancia el navegador es el que ejecuta todas las órdenes contenidas en el código HTML, de forma que un navegador puede estar capacitado para realizar algunas órdenes, pero no para todas. Así, podremos especificar que una página tenga una imagen de fondo, o un texto parpadeando, pero si nuestro navegador no está capacitado para realizar estas funciones, no podremos observarlas. Las órdenes del HTML pueden ser de dos tipos, cerradas o abiertas. Las órdenes cerradas son aquellas que tienen una palabra clave que indica el principio y otra que indica el final. Entre la orden inicial y la final se pueden encontrar otras órdenes; en cambio las órdenes abiertas constan tan solo de una sola palabra clave. Para diferenciar las órdenes del resto del texto del documento se encierran entre los símbolos ' <' y '>'. Las ordenes cerradas incluyen el carácter '/ '/' antes de la palabra clave para indicar el final de la misma. Una orden puede contener "parámetros". Estos parámetros se indican a continuación de la palabra clave de la orden. Directiva cerrada Mi página Web Directiva abierta
Directiva con parámetros Los elementos pueden anidarse unos con otros, teniendo cuidado de poner los cierres en el lugar adecuado. Por ejemplo, el elemento
combinado con que sirve para generar texto en itálica, se escribirá:
Texto
Texto de prueba
. y este sería el resultado:

Texto de prueba 1

LA ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML. Es recomendable que todo fichero HTML siga la siguiente estructura: Indica el inicio del documento. Inicio de la cabecera. Inicio del título del documento/título de la ventana. Final del título del documento. Final de la cabecera del documento. Inicio del cuerpo del documento. ------------- comandos y texto---------- Final del cuerpo del documento. Final del documento.

Bienvenido a la guía rápida Documento...

Los comandos pueden figurar en letras mayúsculas o en minúsculas, indistintamente.

ESQUEMA DE TIPOS DE UN DOCUMENTO HTML Cuando un visualizador recibe un fichero, antes de mostrarlo necesita saber el tipo de contenido que éste tiene, a fin de procesarlo adecuadamente. No es lo mismo recibir un documento de texto que una fotografía en formato GIF, o un vídeo en formato MPG, o si lo que estamos intentando es transferir un fichero. En cada caso, el visualizador pondrá en juego distintas habilidades, de las muchas que posee. Hay que tener presente que las extensiones de 4 o más letras son propias de sistemas operativos como Unix, Macintosh o Windows95 y las de 3 o menos del DOS.

2

Estas son algunas de las extensiones Standard más comunes y sus contenidos: .html o .htm Documento HTML. Contine texto e instrucciones HTML que serán interpretadas. .text o .txt Contiene texto plano. El visualizador presentará todo el fichero como si fuera un único bloque de texto y no interpretará ninguna instrucción HTML que pudiera llevar. Esto lo hará con cualquier fichero que lleve l leve una extensión desconocida o simplemente no lleve ninguna. .gif Contiene un fichero de imagen en formato GIF. .npg Contiene un fichero de imagen en formato NPG. .xbm Contiene un fichero de imagen en formato X-Bitmap (blanco y negro). .xpm Contiene un fichero de imagen en formato X-Pixmap (color). .jpeg o .jpg Contiene un fichero de imagen en formato codificado jpeg. .mpeg o .mpg Contiene un fichero de imagen de video vi deo o cine (en movimiento). .au Contiene un fichero de audio (sonido) codificado en aiff-encoded. .mid Contiene un fichero de audio (sonido) generado con secuenciadores midi típicos de Windows. .avi Contiene un fichero con video y sonido típico de Windows. .mp3 Contiene un fichero con sonido típico de Windows y otros sistemas. .exe Contiene un fichero binario ejecutable en DOS. .hqx Contiene un fichero binario ejecutable en Macintosh. .Z o .zip Contiene un (o varios) fichero/s comprimido/s de cualquier clase. Para poder utilizarlo hay que indicarle al visualizador una herramienta de compresión-descompresión.

3

Los documentos HTML los puedes escribir con lo que quieras... Siempre que los salves en modo Solo Texto. Es decir, que si utilizas, por ejemplo, Word de Windows o de MAC, por defecto estos programas salvan en formato Word. Y aunque luego los renombres como documentos .htm o .html, el formato interno sigue siendo Word. Tampoco vale dejarlos con la extensión .txt que les dejan la mayoría de editores al salvarlos en modo Solo Texto. No serían interpretados correctamente. Por lo tanto si tienen extensión .txt (y por supuesto son .txt), entonces puedes renombrarlos a .htm, o bien en el momento de guardarlos en formato Solo Texto no dejar la extensión por defecto .txt y darle ya directamente la extensión .htm. Algunos procesadores de texto, ya incluyen entre sus tipos el .htm. Si es así lo que hacen es eliminar la codificación propia, y convertirla a elementos de HTML. Por ejemplo, si tienes un texto en itálica, automáticamente es convertido al elemento , etc..

CABECERA DEL DOCUMENTO. Las ordenes y delimitan la cabecera del documento. Dentro de la cabecera es importante definir el título de la página por medio de las ordenes y . Este título será el que aparezca en la barra de nuestro navegador de páginas Web. Ejemplo: La página de José Luis Dentro de la cabecera de nuestro documento podemos incluir otras órdenes adicionales. La orden <META> indica al navegador de Internet las palabras clave y contenido de nuestra página Web. Muchos de los buscadores de páginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta orden para incluir la página en sus bases de datos. La orden <META> lleva generalmente dos parámetros, name y content.

4

Por ejemplo: puedes poner las palabras clave que contiene la página separadas por comas Head de un documento <META NAME="keywords" CONTENT="HTML, internet ">

Este otro sirve para que los buscadores puedan ofrecer un breve resumen de los contenidos de tu página: Head de un documento <META NAME="description" CONTENT="Manual para escribir HTML.">

Puedes poner todos los elementos <META> que creas necesarios, pero sin repetirlos. Ejemplo Mi pagina del Web - 1
Primera pagina

Esta es mi primera página, aunque todavía es muy sencilla. Como el lenguaje HTML no es difícil, pronto estaré en condiciones de hacer cosas más interesantes.
Aquí va un segundo párrafo.

CUERPO DEL DOCUMENTO. La orden indica el inicio y final de nuestra pagina Web. Será entre el inicio y el final de esta orden donde pongamos los contenidos de nuestra página, textos, gráficos, enlaces, etc.... y por tanto, al contrario de la HEAD sí se ve cuando navegamos por ella. Esta orden tiene una serie de parámetros opcionales que nos permiten indicar la "apariencia" global 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.

5

bgcolor "código de color" Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parámetro background. text "código de color" Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro. link "código de color" Indica el color de los textos que dan acceso a un Hyperenlace. Por defecto es azul. vlink "código de color" Indica el color de los textos que dan acceso a un Hyperenlace que ya hemos visitado con nuestro navegador. Por defecto es púrpura.

El código de color es un número compuesto por tres pares de cifras hexadecimales que indican la proporción de los colores "primarios", rojo, verde y azul. El código de color se antecede del símbolo

#.

Ejemplos : #000000 #FF0000

Color Negro Color Rojo

#00FF00

Color Verde

#0000FF

Color Azul

#FFFFFF

Color Blanco

El primer par de cifras indican la proporción de color Rojo, el segundo par de cifras la proporción de color Verde y las dos últimas la proporción de color Azul. Cada par de cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las proporciones de cada color primario obtendremos diferentes colores. De cualquier forma la mayoría de los editores de HTML nos permiten obtener el código de color correspondiente escogiendo directamente el color de una paleta. 6

DAR COLOR A LA PÁGINA Para modificar los colores de fondo del documento debemos añadir a la etiqueta de cuerpo de documento el parámetro BGCOLOR="#RRGGBB" donde #RRGGBB indica la combinación de tonos de rojo, verde y azul necesarios para conseguir el color que deseamos. No obstante HTML reconoce 16 colores simples black, gray, maroon, purple, green, olive, navy, teal, silver, red, white, lime, yelow, aqua, blue y fuchsia con nombre y apellidos, así que para poner un fondo azul, bastará con poner sin más. Si lo queremos complicar más, necesitamos saber el número en hexadecimal que define el color que queremos y lo ponemos en la etiqueta bgcolor, el color rojo sin ir mas lejos sería #FF0000. Para definir el color del texto, utilizaremos el parámetro TEXT="#RRGGBB". Para definir el color de los enlaces no visitados, LINK="#RRGGBB", para los enlaces visitados VLINK="#RRGGBB", para los enlaces en los que se haga click ALINK="#RRGGBB". Para

insertar

una

imagen

de

fondo,

usamos

el

parámetro

BACKGROUND="imagenfondo.gif". Los formatos de ficheros más utilizados son el gif y jpg. Cabe reseñar que el fichero debe estar en el mismo directorio que el documento HTML que lo llama, en caso contrario se debe especificar el PATH a dicho fichero gráfico. Y OJO, ya dije anteriormente que aunque en el código HTML da igual escribir las etiquetas en mayúsculas o minúsculas, cuando se hace una llamada a un fichero, enlace, etc... Si existen diferencias, con lo cual para evitar problemas, escribimos todo en minúsculas. EJEMPLO 2: Mi pagina del Web - 7

Mi página del Web

Esta es mi página del Web. No es muy extensa, pero tiene todos los elementos básicos. Espero que os guste. Poco a poco le iré añadiendo más cosas interesantes.

7

ESPACIADOS Y SALTOS DE LÍNEAS. En

HTML solo se reconoce un espacio entre palabra y palabra, el resto de los espacios

serán ignorados por el navegador. Asimismo tampoco se respetan las tabulaciones, retornos de carro etc... Para ello existen una serie de órdenes que indican estos códigos. Las ordenes
y
obliga al navegador a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc.. Ejemplo:
Este texto ha Sido Preformateado.
Se verá: Este texto ha Sido Preformateado. Para indicar un salto de línea se utiliza la orden
y para un cambio de párrafo (deja una línea en blanco en medio) se utiliza la orden
. Ejemplo: Esto es un salto de línea
y esto es
un salto de párrafo Se verá: Esto es un salto de línea Y esto es un salto de párrafo

La orden
puede usarse también como orden "cerrada"
y
indicando de esta manera los atributos de un párrafo en concreto. Cuando se usa de esta manera tiene el parámetro align que indica al navegador la forma de "justificar" el párrafo. Los valores posibles de este parámetro son LEFT, RIGHT y CENTER , estando aun en estudio el valor JUSTIFY.

8

Ejemplo:
Este es un ejemplo de un párrafo de texto justificado a la derecha.

Este es un ejemplo de párrafo de texto centrado.
Se verá: Este es un ejemplo de un párrafo de texto justificado a la derecha. Este es un ejemplo de párrafo de texto centrado. La orden
muestra una línea horizontal de tamaño determinable que sirve para separar párrafos o temas. 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). noshade No muestra sombra, evitando el efecto en tres dimensiones. size número Indica el grosor de la línea en pixeles. width num / % Indica el ancho de la línea en tanto por ciento en función del ancho de la ventana del navegador. También se puede especificar un número que indicaría el ancho de la línea en pixeles. Ejemplo:

Se verá: La orden
sin ningún parámetro mostraría una línea horizontal que ocuparía todo el ancho de la página. Estas líneas sencillas son las que ves en este manual para separar las diferentes secciones.

9

. Recuerda que si no tienes la versión adecuada de navegador, en los siguientes

ejemplos

sólo

verás

el

texto,

pero

no

los

enmarcados.

Si se escribe:
Esto es una prueba de enmarcado
Se obtiene: Esto es una prueba de enmarcado Este elemento tiene un parámetro que permite etiquetar el recuadro: Si se escribe:
Esto es una etiqueta Esto es una prueba de enmarcado
Se obtiene: Esto es una etiquetaEsto es una prueba de enmarcado El parámetro tiene tres atributos que indican la posición de la etiqueta: LEFT (por defecto), RIGHT y CENTER , aunque no funciona en todos los navegadores. Por ejemplo:
Esto es una etiqueta Esto es una prueba de enmarcado
Se obtiene: Esto es una etiquetaEsto es una prueba de enmarcado Si en estos ejemplos no ves el recuadro o la etiqueta no está donde debiera, es porque no tienes una versión de navegador adecuada. Por supuesto, dentro del recuadro generado por
se puede poner cualquier cosa: formularios, imágenes, texto, etc.

10

CABECERAS. En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaños de letra) por medio de las órdenes
y
. El texto que escribamos entre el inicio y el fin de la orden será el afectado por las cabeceras. La cabecera
será la que muestre el texto en mayor tamaño. Ejemplo:
Cabecera tipo 1

Cabecera tipo 2

Cabecera tipo 3

Cabecera tipo 4

Cabecera tipo 5

Cabecera tipo 6
Se verá:

Cabecera tipo 1 Cabecera tipo 2 Cabecera tipo 3 Cabecera tipo 4 Cabecera tipo 5 Cabecera tipo 6

11

ATRIBUTOS DEL TEXTO. Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias órdenes. Algunas de ellas no son reconocidas por determinados navegadores de Internet, es por ello que según el navegador que este Ud. Este utilizando, verá el resultado correctamente o no. Atributo

Orden

Negrita

Cursiva

Teletype

Subrayado

Tachado

Parpadeo

Superíndice

Subíndice

Centrado

Ejemplo

Resultado

Texto de

Texto de

prueba

prueba

Texto de prueba Texto de prueba Texto de prueba Texto de prueba ~~Texto de prueba~~ Texto de prueba ^{Texto de

Texto de prueba

Texto de prueba

Texto de prueba

Texto de prueba

Texto de prueba

prueba} _{Texto de prueba} Texto de prueba

Texto de prueba

Texto de prueba

Otra forma de cambiar los tamaños de letra es utilizar el elemento con el atributo VALOR, que es un número entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notación respecto a la anterior es que no se produce un salto de párrafo después de cada cambio, por lo que pueden hacerse cosas como esta:

12

AAA AAA AAA Dará como resultado:

AAAAAA

AAA

Utiliza para ello los parámetros size, color 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 "código de color" Escribe el texto en el color cuyo código se especifica. face "nombre de font" Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el ordenador que "lee" la pagina se usara el font predeterminado del navegador.
FACE ="arial">Texto de prueba 12345 con tipo ARIAL

FACE="courier new">Texto de prueba 12345 con tipo COURIER NEW FACE="courier">Texto de prueba 12345 con tipo COURIER FACE="roman">Texto de prueba 12345 con tipo ROMAN FACE="small fonts">Texto de prueba 12345 con tipo SMALL FONTS

Se verá:

Texto de prueba 12345 con tipo ARIAL Texto de prueba 12345 con tipo COURIER NEW Texto de prueba 12345 con tipo COURIER

Texto de prueba 12345 con tipo ROMAN

Texto de prueba 12345 con tipo VERDANA Texto de prueba 12345 con tipo SMALL FONTS

EJEMPLO Esto es una Prueba Resulta:

Esto es una Prueba 13

Ejemplo: Texto de prueba Se verá: Texto

de prueba

Existen otras órdenes que realizan las mismas operaciones que las antes vistas en tos del texto. Orden

Hace lo mismo que

Para incluir comentarios en la página Web se utiliza la orden . Ejemplo: Los comentarios no serán mostrados por el navegador y son útiles para realizar anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una determinada parte del documento. Asimismo veremos mas adelante que la orden de comentario nos será de utilidad para incluir código JavaScript en nuestra página Web.

En los navegadores de última generación se ha implementado un efecto que permite incluir explicaciones ocultas que aparecen al pasar el ratón por encima, pero sin cambiar de página ni abrir ninguna ventana nueva. Por ejemplo, si escribes:

HTML Al pasar el ratón sobre la palabra HTML, se desvela su significado: HTML

JUEGO DE CARACTERES. 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. 14

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". Asimismo hay caracteres que se utilizan para las ordenes de HTML, por ejemplo < y >. 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). A continuación veamos una tabla con las principales entidades : Carácter Código Entidad Carácter Código Entidad !

!

--

"

"

--

#

#

--

$

$

--

%

%

--

&

&

--

'

'

--

(

(

--

)

)

--

*

*

--

+

+

--

,

,

--

-

-

--

.

.

--

/

/

--

:

:

--

;

;

--

<

<

--

=

=

--

>

>

--

?

?

--

@

@

--

[

[

--

\

\

--

]

]

--

^

^

--

_

_

--

`

`

--

{

{

--

|

|

--

15

}

}

Espacio

--

~

~

--

nbsp

Á

¡

iexcl

cent

£

£ pound

¢

¢

?

¤ curren

´

¥

yen

|

¦ brvbar

¤

§

sect

Â

¨

uml

©

©

copy

»

ª

ordf

Ç

«

laquo

å

¬

not

-

shy

¨

®

reg

ø

¯

macr

°

°

deg

±

± plusmn

²

²

sup2

3

³

sup3

«

´

acute

µ

µ

micro

¦

¶

para

á

· middot

ü

¸

cedil

1

¹

sup1

º

º

ordm

È

»

raquo

¼

¼ frac14

1Ú2

½ frac12

¾

¾ frac34

À

¿ iquest

Ë

À Agrave

ç

Á Aacute

å

Â

Acirc

Ì

Ã

Atilde

€

Ä

Auml



Å

Aring

®

Æ

AElig

‚

Ç Ccedil

16

é

È Egrave

æ

Ê

í

Ecirc

ƒ

É Eacute

è

Ë

Ì Igrave

ê

Í Iacute

ë

Î

Icirc

ì

Ï

Iuml

Æ

Ð

ETH

„

Ñ

Ntilde

ñ

Ò Ograve

î

Ó Oacute

ï

Ô

Ocirc

Í

Õ Otilde

…

Ö

Ouml

*

×

¯

Ø Oslash

ô

Ù Ugrave

ò

Ú Uacute

ó

Û

†

Ü

Y«

Ý Yacute

¸

Þ THORN

§

ß

Ë

à agrave

ç

á aacute

å

â

acirc

Ì

ã

atilde

€

ä

auml



å

aring

®

æ

aelig

‚

ç

ccedil

é

è egrave

ƒ

é eacute

æ

ê

í

Uuml

ecirc

Euml

times

Ucirc

szlig

è

ë

euml

ì igrave

ê

í iacute

ë

î

icirc

ì

ï

iuml

¶

ð

eth

„

ñ

ntilde

17

ñ

ò ograve

î

ó oacute

ï

ô

ocirc

Í

õ

…

ö

ouml

Ö

÷ divide

¯

ø oslash

ô

ù ugrave

ò

ú uacute

ó

û

†

ü

uuml

Y«

ý yacute

þ

þ

thorn

Ÿ

ÿ

otilde

ucirc

yuml

Por lo tanto la palabra página la podríamos escribir como: Página Página Página Es por ello que si deseamos que cualquier navegador de páginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes entidades o códigos para representarlas.

LISTAS. Existen tres tipos de listas, numeradas, sin numerar y de definición. Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos según el lugar que ocupan en la lista. Para este tipo de lista se utiliza las órdenes

. Cada uno de los elementos de la lista irá precedido de la orden
. La orden
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 : 18

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

Números romanos en minúsculas. (i.ii,iii,iv,v,... etc.)

I

Números romanos en mayúsculas. (I,II,III,IV,V,... etc.) Ejemplo

Resultado 1.

Colombia

2.

México

3.

Brasil

4.

EE.UU.

A.

Colombia

B.

México

C.

Brasil

D.

EE.UU.

Colombia
México
Brasil
EE.UU.

Colombia
México
Brasil
EE.UU.

Las listas sin numerar representan los elementos de la lista con un "topo" o marca que antecede a cada uno de ellos. Se utiliza la orden
para delimitar la lista, y
para indicar cada uno de los elementos. La orden
puede contener el parámetro type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk, circle o square, con lo que el topo o marca puede ser un disco, un círculo o un cuadrado. En algunos casos puede interesarnos que la lista no comience por el número 1 (por ejemplo si es una lista que continua en otra página). Se puede conseguir con el atributo START combinado con TYPE. Esto es una lista ordenada con letras mayúsculas y que comienza por la E: E. Primera linea F. Segunda linea G. Tercera linea H. Cuarta linea 19

Se escribe:

Primera linea
Segunda linea
Tercera linea
Cuarta linea

El número que pones en el atributo START indica en que número o letra comenzará la lista, la E es la quinta letra. Ejemplo

Resultado

Colombia
México
Brasil

•

Colombia

•

México

•

Brasil

•

EE.UU.



Colombia



México



Brasil



EE.UU.

EE.UU.

Colombia
México
Brasil
EE.UU.

Las listas de definición muestran los elementos tipo Diccionario, o sea, término y definición. Se utiliza para ellas las órdenes
y
. El elemento marcado como término se antecede de la orden
, el marcado como definición se antecede de la orden
. Ejemplo.

Resultado. WWW

WWW
Abreviatura de World

Abreviatura de World Wide

Wide Web

Web

FTP
Abreviatura de File

FTP

20

Transfer Protocol

Abreviatura de File

IRC

Transfer Protocol

Abreviatura de Internet IRC

Relay Chat

Abreviatura de Internet Relay Chat

Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio se comportan igual que las listas sin numerar. La lista de Menú utiliza la orden y los elementos se anteceden de
El resultado es una lista sin numerar más "compacta" es decir, con menos espacio interlineal entre los elementos. La lista de Directorio utiliza la orden y los elementos se anteceden de
. Los elementos tienen un limite de 20 caracteres. Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo "índice de materias". Ejemplo

Resultado

Buscadores •

Buscadores

•

Yahoo o

Yahoo

o

Ole

o

Lycos

Ole
Lycos
•

Links

Links •

o

Microsoft

o

IBM

Microsoft
IBM

21

Ejemplo de imágenes en listas Se escriben todas igual, sólo hay que cambiar el nombre de los gráficos:

Linea de texto
Linea de texto
Linea de texto

IMÁGENES. Hasta el momento hemos visto como se puede escribir texto en una página Web, así como sus posibles formatos. Ahora veremos como incluir una imagen en nuestra página, para ello utilizaremos la orden . Hay dos formatos de imágenes que todos los navegadores modernos reconocen. Son las imágenes GIF y JPG. Cualquier otro tipo de fichero gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado por el navegador, a no ser que dispongas de un programa externo que permita su visualización. La orden tiene varios parámetros : 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. lowsrc "imagen" Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga la página. Este parámetro no es reconocido por la totalidad de los navegadores ya que esta en estudio su aplicación, así que en la mayoría de los casos será ignorado mostrándose solo la primera imagen (src). En Netscape muestra la imagen indicada por lowsrc en primer lugar, y posteriormente muestra la imagen indicada por src. Si las imágenes son iguales pero tienen distinta "resolución" se conseguirá un efecto tipo "Fade". Si las imágenes son de distinto tamaño la imagen indicada en src se redimensionara al tamaño indicado por la imagen indicada en lowsrc

22

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. ismap / usemap Indica que la imagen es un MAPA. Veremos estos parámetros mas adelante en este manual. Ejemplo Si el navegador no pudiese visualizar el gráfico..... La imagen a mostrar puede encontrase en el mismo lugar (URL) que la página Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre la imagen. 23

Ejemplo: Veamos varios ejemplos "jugando" con los tamaños de la imagen, así como comprobando la alineación de los textos. (Recuerde que en función del navegador que Ud. utilice pueden verse o no los efectos de cada parámetro). Ejemplo Atención !!! Atención !!! Atencion !!! Tenga en cuenta esta indicación. Tenga en cuenta esta indicación. Imagen con un texto alternativo Sirve para que, si no es posible cargar la imagen, aparezca un texto en su lugar. También se utiliza para que al colocar el puntero del ratón sobre la imagen, sin pulsar, aparezca el texto. Para verlo tienes de deshabilitar la opción de cargar imágenes de tu visualizador (sólo es posible con Netscape).

ENLACES. La característica principal de una página Web es que podemos incluir Hypervinculos. Un Hypervinculo es un elemento de la página que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc. Para incluir un Hyperenlace se utiliza las ordenes y . El texto o imagen que se encuentre dentro de los límites de esta orden será sensible, esto quiere decir que si 24

pulsamos con el ratón sobre el, se realzará la función de Hypervinculo. Si el Hypervinculo 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. Esta orden tiene el parámetro href que indica el lugar a donde nos llevará el Hypervinculo si lo pulsamos. Ejemplo: Pulse para ir a la página de Espacio.ya.com Se vera: Pulse para ir a la página de Espacio.ya.com Lo mismo podríamos hacer con un gráfico. Ejemplo: Para buscar en Internet: Se vera: Para buscar en Internet: http://www.ya.com A continuación analizamos los enlaces a recursos externos y los enlaces a partes de una página (índices).

ENLACES A RECURSOS EXTERNOS. Los recursos externos básicos que pueden visualizarse son: Páginas HTML (http://...) Gopher (gopher://...) Servidores FTP (ftp://...) News (news:...) Imágenes (...) En todos ellos se requieren la orden general: Texto en el que hay que picar con el ratón para acceder al recurso. 25

ENLACES A PARTES DE UN DOCUMENTO. Para establecer un enlace con otra parte del documento, se utiliza la expresión: Texto de enlace en la que referencia indica la marca hacia la que hay que enlazar, y texto de enlace el texto sobre el que se picará para establecer dicho enlace. Para que la orden se ejecute correctamente, deberá existir en alguna parte del documento la expresión: ..texto opcional.., que será el destino del enlace. Por ejemplo, podemos situar al inicio de una página HTML el siguiente código: INDICE

Introducción
Referencias históricas
Aspectos de interés
y después desarrollar cada uno de los apartados: Introducción
....texto de la introducción.... Referencias históricas ....texto de las referencias históricas.... Aspectos de interés ....texto de los aspectos de interés.... Índice de contenidos Cada vez que se pique con el ratón el texto de la referencia (HREF), se enlazará con la sección correspondiente (NAME).

26

El enlace se puede realizar también hacia una parte de un documento particular. Así, la expresión: ...texto a picar... permite enlazar con sección m5 de la página main.htm. Ir al índice . Y este sería el resultado: Ir al índice

Para que este la imagen sin borde Ir al índice . Y este sería el resultado: Ir al índice

MARQUEE. La orden crea una marquesina con un texto en su interior que se desplaza. Funciona únicamente con Ms-Explorer. Sus parámetros son los siguientes : align top / middle / bottom Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la baja (bottom) o en el centro (middle) de la misma. bgcolor "código de color" Indica el color del fondo de la marquesina. direction left / right Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha (right) height núm o % Indica la altura de la marquesina en puntos o porcentaje en función de la ventana del navegador.

27

width núm o % Indica la anchura de la marquesina en puntos o porcentaje en función de la ventana del navegador. loop núm / infinite Indica el numero de veces que se desplazará el texto por la marquesina. Si se indica infinite, se desplazará indefinidamente. scrolldelay núm. Indica el número de milisegundos que tarda en reescribirse el texto por la marquesina, a mayor número mas lentamente se desplazará el texto. Veamos un ejemplo de esta orden: Ejemplo: La página de Los Computadores Si estas utilizando Ms-Explorer veras el efecto producido a continuación:

TABLAS. Ya es hora de ver otro tipo de funciones que adornaran nuestra página en esta parte del curso veremos las TABLAS, Las tablas son elemento que nos permiten representar cualquier elemento de nuestra página (texto, listas, imágenes, etc.) En diferentes filas y columnas separadas entre si. Es una herramienta muy œtil para "ordenar" contenidos de distintas partes de nuestra página. La información contenida en una tabla estará contenida entre las órdenes: y
donde BORDER=n indica el grosor del borde de la tabla. Cuando

n

es 0 la tabla se visualizará

sin borde y a medida que dicho número se incremente, el borde será de mayor grosor. Los parámetros opcionales para esta orden son :

28

cellspacing num Indica el espacio en puntos que separa las celdas que están 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 ó % Indica la anchura de la tabla en puntos o en porcentaje en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las celdas. height num ó % Indica la altura de la tabla en puntos o en porcentaje en función del alto de la ventana del navegador. Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas. bgcolor código de color Especifica el color de fondo de toda la Tabla. Para definir las celdas que componen la tabla se utilizan las ordenes y . indica una celda normal, y 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 ordenes 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.

29

colspan num Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna. width num ó % Indica la anchura de la columna en puntos o en porcentaje en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos. Este parámetro solo funciona en los navegadores modernos. bgcolor código de color Especifica el color de fondo del elemento de la Tabla. Para indicar que acaba una fila de celdas se utiliza la orden . 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:

Buscadores Otros Links
Ya.com Supermotor.com Rappelweb.com
Red.ya.com Finanzas.com Tiendapc.com

30

se verá:

Buscadores

Otros Links

Ya.com

Supermotor.com

Rappelweb.com

Red.ya.com

Finanzas.com

Tiendapc.com

ejemplo:

Comando función
TR Siguiente fila
TH Encabezado en columna siguiente
TD Texto en la columna siguiente
se verá: Comando

función

TR

Siguiente fila

TH

Encabezado en la columna siguiente

TD

Texto en la columna siguiente

Observa como los encabezamientos de las columnas (TH) figuran en negrita y centrados, mientras que el texto de las celdas (TD) aparece sin resaltar y alineado a la izquierda. Las celdas de una tabla pueden contener todo tipo de información: enlaces, gráficos, listas, ... Las tablas también pueden centrarse en la pantalla, utilizando las órdenes y antes y después, respectivamente, del conjunto de órdenes de la tabla.

31

Ejemplo:

Secciones del tutorial

Comandos básicos
Imágenes
Enlaces

Tablas
Funciones especiales
Recomendaciones

Introducción de imágenes en una tabla
Logotipo de Espacio.ya.com
Acceso a otros recursos
URL del portal de Ya.com Internet_Factory http://www.Ya.com
Se verá: Secciones del tutorial •

Comandos básicos

•

Tablas

•

Imágenes

•

Funciones especiales

•

Enlaces

•

Recomendaciones

Introducción de imágenes en una tabla Logotipo de Espacio.ya.com Acceso a otros recursos URL del portal de Ya.com Internet_Factory

http://www.Ya.com

32

TAMAÑOS DE LETRAS. Los tamaños de letra puede variarse a lo largo de una página con la orden: .....texto..... donde n es un número entre 1 y 7, siendo 1 el tamaño menor y 7 el mayor: Tamaño de letra 1
Tamaño de letra 2
Tamaño de letra 3
Tamaño de letra 4
Tamaño de letra 5
Tamaño de letra 6
Tamaño de letra 7
Tamaño de letra 1

Tamaño de letra 2

Tamaño de letra 3

Tamaño de letra 4

Tamaño de letra 5

Tamaño de letra 6

Tamaño de letra 7 En el caso de no querer dar un valor al tamaño a la letra el valor por defecto será de 3. Sin embargo, el tamaño de letra también puede modificarse incrementando o disminuyendo el tamaño que ese momento tenga la letra. Así, la orden ..... texto ..... incrementa en un tamaño el tamaño actual. De la misma forma, la orden: ..... texto ..... disminuye un tamaño. Ejemplo: Los tamaños de letra pueden variarse 33

a voluntad incrementándolos o disminuyéndolos Se vería: Los tamaños de letra

pueden variarse

a voluntad incrementádolos o

disminuyéndolos

FORMULARIOS PARA LA CAPTURA DE DATOS. Otra de las posibilidades que proporciona HTML es la entrada de datos de los usuarios mediante un conjunto de elementos de control para luego procesarla. En un formulario podremos solicitar diferentes datos (campos) cada uno de los cuales quedará asociado a una variable. Una vez se hayan introducido los valores en los campos, el contenido de estos será enviado a la dirección (URL) donde tengamos el programa que pueda procesar las variables. Para poder realizar este último paso de procesar las variables necesitaremos realizar un programa externo en algún lenguaje de programación. A este programa externo se le suele llamar

CGI

(Common Gateway Interface). La creación de este

tipo de programas sería tema de otro manual diferente, por lo que aquí veremos como se pueden enviar las variables a nuestra dirección de correo electrónico. La declaración del formulario se pone entre las ordenes
y
. En el interior de la declaración se indican los elementos (variables) de entrada. Se pueden incluir todas las ordenes que se deseen dentro de estas dos pero no es posible anidar formularios entre si. La orden
tiene los parámetros action y method. action = "programa" Indica el programa que va a "tratar" a las variables que se envien con el formulario. En nuestro caso enviaremos las variables por correo electrónico, con lo que el "programa" será "mailto: direccion_de_correo".

method = POST / GET Indica el método segœn el que se transferiran las variables. POST produce la modificación del documento de destino (como en el caso de enviar por correo las variables). GET no produce cambios en el documento destino (como en el caso de una consulta a una base de datos, p.ej. una página de bœsqueda en Internet). 34

Campos de Entrada Para la introducción de las variables se utiliza la orden . Esta orden tiene el parámetro type que indica el tipo de variable a introducir y name que indica el nombre que se le dará al campo. Cada tipo de variable tiene sus propios parámetros. type= text name = campo Indica que el campo a introducir será un texto. Sus parámetros son : maxlenght = numero Numero máximo de caracteres a introducir en el campo. size = numero Tamaño en caracteres que se mostrará en pantalla. value = "texto" Valor inicial del campo. Normalmente será " ", o sea, vació. type = password name = campo Indica que el campo sera una palabra de paso. Mostrará asteriscos (*) en lugar de las letras escritas. Sus parámetros opcionales son los mismos que para text. type = checkbox name = campo El campo se elegirá marcando una casilla. Se permite marcar varias casillas. Los valores de las casillas serán indicados por : value = "valor" checked La casilla aparecerá marcada por defecto.

type = radio name = campo El campo se elegirá marcando una casilla. Solo permite marcar una sola de las casillas. Los valores de las casillas serán indicados por: value = "valor" 35

type = image name = campo El campo contendrá el valor de las coordenadas del punto de la imagen pinchado. Debe indicarse la imagen con el parámetro: src = "fichero de imagen". type = hidden name = campo El usuario no puede modificar su valor, ya que el campo no es visible se manda siempre con el valor indicado por el parámetro: value = "valor" type = submit Representa un botón. Al pulsar este botón la información de todos los campos se envía al programa indicado en . Tiene el parámetro value = "texto" que indica el texto que aparecerá en el botón. type = reset Representa un botón. Al pulsar este botón se borra el contenido de todos los campos. El parámetro value = "texto" indica el texto que aparecerá en el botón. Campos de Selección Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger una o varias. Se utiliza para ellos la orden . Sus parámetros son : name = campo Nombre del campo size = num Numero de opciones visibles. Si se indica 1 se presenta como un menú desplegable, se indica mas de uno se presenta como una lista con barra de desplazamiento. múltiple Permite seleccionar mas de un valor para el campo.

36

Las diferentes opciones de la lista se indican con la orden
se vería: Tu Nombre: Tu Edad :

Menos de 20 años

Mas de 40 años

¿Te parece útil este manual? Tus

Comentarios:

Enviar

Restablecer

Si rellenas este FORM y pulsas sobre el botón Enviar, (estando conectado a Internet), se generará un mensaje de correo a mi dirección de correo . Si pulsas el botón Borrar se borraran los datos que hayas introducido en el Formulario. Si en vez de enviar estas variables por correo electrónico, fuesen enviadas a un programa (CGI), este programa podría tratarlas y dar como respuesta una nueva página Web. IMPORTANTE : La opción mailto: en el parámetro action de la orden
solo funciona correctamente con Netscape. En Microsoft Explorer esta opción da como resultado un correo en blanco. Para enviar un formulario por e-mail sin importar el navegador utilizado se 38

ha de utilizar un programa externo que realicé este proceso. En la pagina MAILFORM encontraras información de como implementar un programa externo para el envío de formularios vía e-mail en tu pagina Web.

EXTENSIONES DEL HTML. Netscape y Microsoft han añadido al estándar de HTML diversas ordenes para hacer más atractiva la visualización de las páginas Web. Veremos aquí las más interesantes y la forma de usarlas. Estas órdenes pueden no funcionar en algún navegador de HTML, pero el uso de ellas por parte de los dos "grandes" del software para Internet hace prever que serán inmediatamente incluidas en las nuevas versiones del resto de los navegadores.

APPLET. La orden indica la ejecución de un programa (applet) externo escrito en lenguaje JAVA. Java es un lenguaje creado por Sun Microsystems que permite realizar operaciones multimedia sin incorporar nuevas ordenes HTML. Los applets son muy variados, y cada uno de ellos realiza una tarea distinta. Hay applets para hacer que el texto se mueva dentro de la hoja, se contraiga y expanda, etc. Esta orden tiene los siguientes parámetros : codebase URL Dirección donde se encuentra el applet Java ( Por ejemplo http://www.ucm.es/java). Si el Applet se encuentra en el mismo lugar que la pagina Web este parámetro no es necesario. code programa Indica el nombre del programa (applet) Java a ejecutar. width nœm. height nœm. Indican el espacio (ancho y alto) en puntos en el que el programa realizará su función.

39

Dentro de la orden se incluye la orden que envía al programa Java los parámetros necesarios para su funcionamiento. Esta orden suele tener como mínimo los parámetros : name campo Nombre de la variable a enviar. value valor Valor de la variable a enviar. Veamos un ejemplo en el que se ejecuta un programa Java que permite que un texto se desplace de un lado a otro de una zona de la pantalla: Ejemplo:

SONIDO DE FONDO. Nuestra página Web puede tener un sonido que se active al entrar en la página. Esta característica de Ms Explorer utiliza la orden y tiene los siguientes parámetros : src "fichero" Indica el nombre del fichero que contiene el sonido (.waw, .mid). loop num / infinite Indica el número de veces que se reproducirá el sonido. Si se indica infinite, el sonido se reproducirá de forma continua hasta que abandonemos la página. Un ejemplo de esta orden sería:

40

Ejemplo: Para utilizar esta función en Netscape se utiliza la orden . Esta orden se utiliza realmente para "incrustar" un objeto en nuestra pagina Web. Dicho objeto puede ser un fichero de sonido, un vídeo, un gráfico BMP, etc. Tiene los siguientes parámetros : src "fichero" Indica el nombre del fichero que contiene el sonido (.waw, .mid) o el video (.avi). autostart true Si deseamos que la reproducción se inicie inmediatamente. loop true Incluirlo si deseamos que la reproducción no se detenga. (cuando termina, vuelve a comenzar automáticamente). volume nœmero Volumen al que se reproducen los ficheros de sonido. width nœmero height nœmero Anchura y Altura de la representación del objeto. (Si es un sonido no es necesario este parámetro). controls smallconsole Visualiza una serie de controles que nos permiten iniciar la reproducción del fichero, así como realizar una pausa o detenerlo. Un ejemplo de esta orden sería: Ejemplo:

41

FRAMES. Las frames es una técnica para subdividir la pantalla del navegador en diferentes ventanas. Cada una de estas ventanas se podrá manipular por separado, permitiéndonos mostrar en cada una de ellas una página Web diferente. Esto es muy util para, por ejemplo, mostrar permanentemente en una ventana los diferentes contenidos de nuestra página, y en otra ventana mostrar el contenido seleccionado. Para definir las diferentes subventanas o frames se utilizan las ordenes , y . La orden indica como se va a dividir la ventana principal. Pueden incluirse varias ordenes anidadas con el objeto de subdividir una división u otra subdivisión. Los parámetros de 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

Se verá Crea tres subventanas horizontales, la primera

ocupará un 20% de la ventana principal, la segunda

"25%,50%,25%">

un 50% y la tercera un 25%. 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 (*). En este caso "anidamos" dos ordenes. 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 orden vuelve a subdividir la primera subventana creada anteriormente, pero esta vez en dos subventanas horizontales, la superior ocupará un 20% de la

42

subventana, y la inferior el resto.

La orden indica las propiedades de cada subventana. Es necesario indicar una orden para cada subventana creada. Los parámetros de 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 = núm. Indica el margen izquierdo y derecho de la subventana en puntos. marginheight = núm 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 Un usuario que este viendo una pagina con frames puede redimensionarla seleccionando un borde de la subventana con el cursor y desplazándolo. Si se indica este parámetro, el usuario no podrá "redimensionar" las subventanas con el navegador. border = núm. 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 sólidos.

43

Los navegadores que no soportan la característica de subventanas, no mostrarán nada de lo indicado con estas ordenes. Es por ello que existe una orden llamada . Todo los indicado entre esta orden será lo que muestren los navegadores sin capacidad para visualizar Frames. Los navegadores que soporten Frames obviaran las ordenes incluidas entre . Si su navegador puede visualizar Frames tendrá en estos momentos la pantalla dividida en dos zonas independientes, en la izquierda verá el índice de materias de este manual, y en la derecha estará viendo la sección del manual que haya seleccionado. En otro caso simplemente verá la sección del manual. La definición de las Frames debe ir antes de la definición del cuerpo de documento (). Veamos un ejemplo completo de Frames con comentarios: Página con Frames 44

Al usar Frames, nos encontramos con un problema. Cuando queramos mostrar una página Web debemos indicarle al navegador 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 orden . 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 navegador y muestra el Hyperenlace en ella. (Si usamos Netscape esto provoca que tengamos funcionando dos copias del programa).

45

target "_self" Se muestra el Hyperenlace en la subventana activa. target "_parent" El Hyperenlace se muestra en el definido anteriormente al actual. Si no hay ningœn anterior se muestra a pantalla completa suprimiendo todas las subventanas de la pantalla. target "_top" Suprime todas las subventanas de la pantalla y muestra el Hyperenlace a pantalla completa. Ejemplos
ref.=

Resultado

"http://www.microsoft.com/"

target

=

"_blank">

Muestra la pagina de Microsoft en una nueva copia del navegador Muestra la pagina de Ibm en

la

subventanna

llamada

"home" Muestra

la

pagina

del

buscador Yahoo a pantalla completa

SCRIPTS. Un Script es un programa escrito en un lenguaje distinto al HTML que se puede incluir en una página Web "tal cual". Para incluir estos programas en una página Web se utiliza la orden <SCRIPT> . Esta orden tiene el parámetro language para indicar el lenguaje de programación utilizado para el Script. El código del programa debe "ocultarse" con las órdenes de comentario de HTML con el objeto de que no sean mostradas por los navegadores que no reconocen la orden <SCRIPT>. Los scripts más usados suelen estar escritos en lenguaje JAVA. Este lenguaje desarrollado por Sun Microsystems permite realizar operaciones de animación y multimedia en una página Web. 46

La inclusión de un Script en una página Web se haría de la siguiente forma : <SCRIPT language = "JavaScript"> < !-instrucciones del programa ...... -->

47

ANEXOS

48

CÓDIGOS HEXADECIMALES DE COLOR Estos códigos de color se pueden utilizar como valor de atributo en los elementos y . Algunos no funcionarán en ciertos visualizadores, así como si Windows no está configurado con 256 colores al menos. La codificación de estos colores está basada en mezclas cromáticas RGB (RED GREEN BLUE), es decir, se mezclan ciertas cantidades de los tres colores básicos (rojo verde y azul), para conseguir el color deseado. La cantidad de cada color está definida por el código que utilizamos, que tiene seis dígitos en hexadecimal. Si los cortamos en 3 grupos de dos de izquierda a derecha, obtendremos la cantidad (en hexadecimal) de cada color. La sintaxis para cambiar el fondo de la página (background) a color rojo es: y para dar color al texto, ver la página Texto de colores. Para combinaciones generales de colores, ver el ejemplo de control de colores. Lista de códigos RGB Puedes probar los diez primeros para hacerte una idea, o puedes verlos todos desde aquí White rgb=#FFFFFF Red rgb=#FF0000 Green rgb=#00FF00 Blue rgb=#0000FF Magenta rgb=#FF00FF Cyan rgb=#00FFFF Yellow rgb=#FFFF00 Black rgb=#000000 Aquamarine rgb=#70DB93 Baker's Chocolate rgb=#5C3317 Blue Violet rgb=#9F5F9F Brass rgb=#B5A642 Bright Gold rgb=#D9D919 Brown rgb=#A62A2A Bronze rgb=#8C7853 Bronze II rgb=#A67D3D Cadet Blue rgb=#5F9F9F Cool Copper rgb=#D98719 Copper rgb=#B87333 Coral rgb=#FF7F00 Corn Flower Blue rgb=#42426F Dark Brown rgb=#5C4033 Dark Green rgb=#2F4F2F Dark Green Copper rgb=#4A766E Dark Olive Green rgb=#4F4F2F Dark Orchid rgb=#9932CD Dark Purple rgb=#871F78 Dark Slate Blue rgb=#6B238E Dark Slate Grey rgb=#2F4F4F 49

Dark Tan rgb=#97694F Dark Turquoise rgb=#7093DB Dark Wood rgb=#855E42 Dim Grey rgb=#545454 Dusty Rose rgb=#856363 Feldspar rgb=#D19275 Firebrick rgb=#8E2323 Forest Green rgb=#238E23 Gold rgb=#CD7F32 Goldenrod rgb=#DBDB70 Grey rgb=#C0C0C0 Green Copper rgb=#527F76 Green Yellow rgb=#93DB70 Hunter Green rgb=#215E21 Indian Red rgb=#4E2F2F Khaki rgb=#9F9F5F Light Blue rgb=#C0D9D9 Light Grey rgb=#A8A8A8 Light Steel Blue rgb=#8F8FBD Light Wood rgb=#E9C2A6 Lime Green rgb=#32CD32 Mandarian Orange rgb=#E47833 Maroon rgb=#8E236B Medium Aquamarine rgb=#32CD99 Medium Blue rgb=#3232CD Medium Forest Green rgb=#6B8E23 Medium Goldenrod rgb=#EAEAAE Medium Orchid rgb=#9370DB Medium Sea Green rgb=#426F42 Medium Slate Blue rgb=#7F00FF Medium Spring Green rgb=#7FFF00 Medium Turquoise rgb=#70DBDB Medium Violet Red rgb=#DB7093 Medium Wood rgb=#A68064 Midnight Blue rgb=#2F2F4F Navy Blue rgb=#23238E Neon Blue rgb=#4D4DFF Neon Pink rgb=#FF6EC7 New Midnight Blue rgb=#00009C New Tan rgb=#EBC79E Old Gold rgb=#CFB53B Orange rgb=#FF7F00 Orange Red rgb=#FF2400 Orchid rgb=#DB70DB Pale Green rgb=#8FBC8F Pink rgb=#BC8F8F Plum rgb=#EAADEA Quartz rgb=#D9D9F3 Rich Blue rgb=#5959AB Salmon rgb=#6F4242 Scarlet rgb=#8C1717 Sea Green rgb=#238E68 Semi-Sweet Chocolate rgb=#6B4226 Sienna rgb=#8E6B23 Silver rgb=#E6E8FA 50

Sky Blue rgb=#3299CC Slate Blue rgb=#007FFF Spicy Pink rgb=#FF1CAE Spring Green rgb=#00FF7F Steel Blue rgb=#236B8E Summer Sky rgb=#38B0DE Tan rgb=#DB9370 Thistle rgb=#D8BFD8 Turquoise rgb=#ADEAEA Very Dark Brown rgb=#5C4033 Very Light Grey rgb=#CDCDCD Violet rgb=#4F2F4F Violet Red rgb=#CC3299 Wheat rgb=#D8D8BF Yellow Green rgb=#99CC32

51

.

EJEMPLOS

52

EJEMPLO DE UN DOCUMENTO HTML: Este es mi primer documento HTML PRACTICA # 1

ETIQUETAS PARA TEXTO ETIQUETA

FUNCION

EJEMPLO

RESULTADO

Se utiliza para agregar
Mi direccion el efecto de "itálico" al es:
texto.

Negritas o remarcado (bold). Define el tamaño inicial del texto.

Este es un texto remarcado

Este es un texto remarcado

Texto base # 4

Texto base # 4

Nota : El tamaño base del texto por omisión es 3, pero con esta etiqueta se puede modificar, incrementar o disminuir.

Texto base +1

Texto base +2

Mi dirección es:

Texto base +1

Texto base +2 Texto base -1

En los ejemplos 1 y 2, se obtiene el mismo Texto base -1 base es 3. Resulta lo mismo definir la base a 4 que sumar 1 al valor por omisión (3).

Texto parpadeante (blinking)

Este texto debe apagar y prender

Centrar

Texto centrado

Itálico o enfatizado

Este es un texto itálico

Define el tamaño del texto.

Texto # 4

Nota : El tamaño del texto por omisión es 3, pero con esta etiqueta

Texto +1

Este texto debe apagar y prender Texto centrado Este es un texto itálico

Texto base # 4 Texto base +1

53

se puede modificar, Texto incrementar o disminuir. +2

Texto base +2

En los ejemplos 1 y 2, Texto base -1 se obtiene el mismo Texto base resultado, ya que la -1 base es 3. Resulta lo mismo definir el tamaño a 4 que sumar 1 al valor por omisión (3).

Encabezados o títulos
Título Nivel 1
(headers)
Título Nivel 2

Título Nivel 1

niveles o tamaños de texto predefinidos. El
es el primer nivel y por lo tanto el más grande.

Título Nivel 3

Título Nivel 3

Cada es una línea independiente y su texto es remarcado (bold).

Título Nivel 5

Nota: Los encabezados tienen 6

Título Nivel 4

Título Nivel 6

Título Nivel 2

Título Nivel 4 Título Nivel 5 Título Nivel 6

Itálico

Este es un texto itálico

Este es un texto itálico

Marcado

~~Este es un texto marcado~~

Este es un texto marcado

_{^{Negritas o remarcado Este es un texto Este es un texto remarcado remarcado Subscript H₂O H2O o Superscript Clima : 30^oC Clima : 30 C

Subrayado

Este es un texto subrayado

Este es un texto subrayado

OTROS ATRIBUTOS PARA TEXTO (COLOR, TIPO DE LETRA, ETC) ETIQUETA

FUNCION Modifica el color del texto Modifica el tipo de letra (font)

EJEMPLO Este texto es rojo

RESULTADO Este texto es rojo

Este texto es de Este texto es de tipo tipo Technical Technical

54

EJEMPLOS DE COMBINACIÓN DE ETIQUETAS PARA TEXTO RESULTADO

EJEMPLO}}Este es un texto remarcado y centrado

Este es un texto remarcado y centrado Este es un texto remarcado e itálico

Este es un texto remarcado e itálico
Título Nivel 3 centrado

Título Nivel 3 centrado

Texto +1 remarcado e itálico

Texto +1 remarcado e itálico

Título Nivel 4 parpadeante

Título Nivel 4 parpadeante

Este es un texto remarcado, subrayado e itálico

Este es un texto remarcado, subrayado e itálico

Este texto es rojo, tipo Arial y de tamaño 3

Este texto es rojo, tipo Arial y de tamaño 3

PRIMER DOCUMENTO HTML: 1.- Elementos Básicos 2.- Texto normal (sin atributos) 3.- Salto de línea (break line) Página personal de: Ana Luisa Méndez

Resultado: Curriculum Vitae: Nombre: Ana Luisa Méndez Dirección: Blvd. Costero # 2845 Ciudad: Ensenada, Baja California, México

Curriculum Vitae:
Nombre: Ana Luis Méndez
Dirección: Blvd. Costero # 2845
Ciudad: Ensenada, Baja California, México

55

ATRIBUTOS AL TEXTO (EJEMPLO #1): 1.- Elementos Básicos 2.- Título (H2) centrado (center) 3.- Texto remarcado (bold) 4.- Texto itálico (italic) 5.- Texto subrayado (underline) 6.- Caracteres especiales Página personal de: Ana Luisa Méndez
Curriculum Vitae:
Nombre:Ana Luisa Méndez
Dirección: Blvd. Costero # 2845
Ciudad: Ensenada, Baja California, México

Resultado:

Curriculum Vitae: Nombre: Ana Luisa Méndez Dirección: Blvd. Costero # 2845 Ciudad: Ensenada, Baja California, México

ATRIBUTOS AL TEXTO (EJEMPLO #2): 1.- Elementos Básicos 2.- Título (H3) centrado (center) 3.- Texto remarcado (bold) 4.- Tamaño de la letra (font size) 5.- Caracteres especiales Página personal de: Ana Luisa Méndez
Curriculum Vitae:
Nombre:
Ana Luisa Méndez
Dirección:
Blvd. Costero # 2845
Ciudad:

Resultado:

Curriculum Vitae: Nombre: Ana Luisa Méndez Dirección: Blvd. Costero # 2845 Ciudad: Ensenada, Baja California, México

56

Ensenada, Baja California, México

LISTAS DE ELEMENTOS: 1.- Elementos Básicos 2.- Título (H4) centrado (center) Ejemplo # 1 Lista numerada (ordered list) Ejemplo # 2 Lista no numerada (Unordered list) Unidades de la UABC
Universidad Autónoma de Baja California

Unidad Mexicali
Unidad Tijuana
Unidad Ensenada
Unidad Tecate

Ejemplo # 3 Listas anidadas Ejemplo # 4 Listas combinadas Resultado:

Universidad Autónoma de Baja California 1.

Unidad Mexicali

2.

Unidad Tijuana

3.

Unidad Ensenada

4.

Unidad Tecate

Unidades de la UABC

Unidad Mexicali
Unidad Tijuana
Unidad Ensenada
Unidad Tecate

Resultado:

Universidad Autónoma de Baja California •

Unidad Mexicali

•

Unidad Tijuana

•

Unidad Ensenada

•

Unidad Tecate

57

Unidades de la UABC

Resultado: Universidad Autónoma de Baja California 1.

Unidad Mexicali


Unidad Mexicali

Facultad de Derecho
Facultad de Medicina
Facultad de Contabilidad
Escuela de Ingeniería

2.

3.

4.

b.


c.


d.


a.

Facultad de Derecho

b.

Facultad de Odontología

c.

Escuela de Turismo

d.


Unidad Ensenada

Unidad Ensenada

Facultad de Ciencias
Facultad de Ciencias Marinas
Escuela de Contabilidad y Admón.

Facultad de Derecho

Unidad Tijuana

Unidad Tijuana

Facultad de Derecho
Escuela de Turismo

a.

a.


b.


c.


d.


Unidad Tecate a.


Unidad Tecate


Unidades de la UABC

Resultado: Universidad Autónoma de Baja California

58

1.


Unidad Mexicali

Facultad de Derecho

2.

Unidad Tijuana

Facultad de Derecho
Escuela de Turismo

3.

Unidad Ensenada


4.

Unidad Mexicali o

Facultad de Derecho

o


o


o


Unidad Tijuana o

Facultad de Derecho

o


o

Escuela de Turismo

o


Unidad Ensenada o


o


o


o


Unidad Tecate o


Unidad Tecate


59

ENLACES O LIGAS: 1.- Elementos Básicos 2.- Enlaces externos 3.- Enlaces internos Enlaces de Interés

Resultado:

Ejemplo de un enlace interno (al mismo documento):

Esta liga te lleva al principio de esta página
Ejemplo de un enlace interno (al mismo documento):
Esta liga te lleva al principio de Ejemplo de un enlace esta página

Ejemplo de un enlace interno (a otro documento):
Esta liga te lleva a la página principal del manual de HTML y lo coloca en el marco (frame) derecho (right)

interno (a otro documento):

Esta liga te lleva a la página principal del manual de HTML y lo coloca en el marco (frame) derecho (right)

Ejemplo de un enlace
externo:

Ejemplo de un enlace externo:
El CECUUE se encuentra El CECUUE se ubicado en la Unidad Ensenada encuentra ubicado en la Unidad Ensenada de la UABC

de la UABC

60

IMÁGENES: 1.- Elementos Básicos 2.- Imágenes (gráficas) 3.- Imagen como enlace tipo mailto: (correo) Resultado:

Comentarios y Sugerencias:

Imágenes

Comentarios y Sugerencias:

TABLAS: 1.- Ejemplo # 1 : Tabla de 2 columnas x 2 renglones 2.- Ejemplo # 2 : Tabla de 4 columnas x 5 renglones Tablas

Mexicali Tijuana

Ensenada >Tecate

Resultado:

UNIVERSIDAD AUTONOMA DE BAJA CALIFORNIA Mexicali Tijuana Ensenada Tecate

61

Tablas

Unidad Escuelas Facultades Institutos

Mexicali 5 6 2

Tijuana 6 2 1

Ensenada 2 2 2

Tecate 1

Resultado:

UNIVERSIDAD AUTONOMA DE BAJA CALIFORNIA Información al semestre 96-2

Unidad Facultades

Escuelas Institutos

Mexicali

5

6

2

Tijuana

6

2

1

1

Tecate

Ensenada

2

2

2

62

EJEMPLOS DE IMAGENES Imagen alineada a la izquierda (por defecto) texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Imagen con un texto alternativo Sirve para que, si no es posible cargar la imagen, aparezca un texto en su lugar. También se utiliza para que al colocar el puntero del ratón sobre la imagen, sin pulsar, aparezca el texto. Para verlo tienes de deshabilitar la opción de cargar imágenes de tu visualizador (sólo es posible con Netscape).

Imagen alineada a la izquierda.Texto alineado arriba texto texto texto texto texto texto exto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto Imagen alineada a la izquierda.Texto alineado abajo texto texto texto texto texto texto exto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto Imagen alineada a la izquierda.Texto alineado al centro texto texto texto texto texto texto exto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto t exto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Imagen alineada a la izquierda.Texto envolviendo la imagen texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto t exto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto 63

Imagen alineada a la derecha.Texto alineado a la izquierda de la imagen texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Si tu visualizador no soporta esto, hay un truco para conseguir algo parecido:

texto texto texto texto texto texto texto texto texto texto texto texto

texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Imagen redimensionada a más.Texto alineado a la derecha de la imagen texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto. Aquí la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamaño original es de 136x46 puntos. Este es su aspecto al doble: 272x92. Imagen redimensionada a menos.Texto alineado a la derecha de la imagen texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texzto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto. Aquí la imagen es la misma de los ejemplos anteriores, pero ha sido redimensionada por el visualizador. Su tamaño original es de 136x46 puntos. Este es su aspecto a la mitad: 75x23 Por ejemplo, en la siguiente imagen, la mitad izquierda nos envía a indice.htm y la mitad derecha a intro.htm. Mueve el puntero del ratón horizontalmente sobre la imagen y observa la ventanita de estado que hay en la parte inferior izquierda de la pantalla, verás como cambia el nombre del link.

Se escribe así: Aunque se comprende a simple vista, analicémoslo: En primer lugar tenemos el elemento MAP, que lo que está haciendo es definir un mapa de coordenadas. Va acompañado del atributo NAME que da nombre al mapa. Es 64

necesario nombrarlo porque podría haber más de uno en la misma página, y evidentemente, sus nombres no deberán repetirse. A continuación tenemos el atributo AREA que define las áreas de la imagen. El parámetro SHAPE="rect" indica la figura geométrica que estamos utilizando para ello. Al igual que con los otros mapas, puede ser rect circ y poly. poly. El parámetro COORDS fácilmente se adivina que indica las coordenadas del área, en este caso vértice superior izquierdo e inferior derecho, respectivamente. HREF ya sabemos lo que hace: indica un link con una página, pero esta vez no va acompañando al elemento , digamos que es un atributo prestado. Hay un área por cada link definido. Si un área no queremos que tenga link se definirá con NOHREF. NOHREF. IMG SRC también son conocidos: hacen que se visualice la imagen. Y por fin, USEMAP nos dice qué mapa de coordenadas hay que aplicar a la imagen. A una misma imagen se le pueden aplicar distintos mapas si se desea. Fíjate en que nombre1, nombre1, (el nombre del mapa) va precedido del símbolo #. Esto se debe a que, en este caso, el mapa al que se hace referencia está en la misma página que la instrucción IMG. Podría estar en otra, y en ese caso el símbolo tendría que estar después del nombre de la página. Por ejemplo: otrapagina.htm#nombre1 Como ya se ha dicho más arriba, hay tres figuras geométricas definibles para las áreas: rect, rect, circle y poly. poly. El rectángulo ya lo conocemos; consiste en parejas de coordenadas que indican los vértices superior izquierdo e inferior derecho respectivamente del área. Para el cículo (circ (circ)) son necesarios tres valores: x,y r donde x,y es el par de coordenas que indican el punto donde está el centro del cículo, y r es el radio del círculo medido en puntos. Para los polígonos (poly ( poly)) se necesitan tantas parejas de coordenadas como vértices tenga el polígono, procurando que la última pareja quede unida a la primera, ya que la figura debe estar cerrada. No es obligatorio que sean figuras regulares. En el caso de que se quiera emplear todo el gráfico como área de enlace, es decir, un solo link, se puede emplear default, default, y no es necesario indicar ninguna coordenada.

EJEMPLOS DE TABLAS Tabla básica de 3x2 A BC DE F

A B C

D E F

65

Dos ejemplos de línea expandida Item 1 Item 3 Item 2 Item 4 Item 5

Item 1 Item 2 Item 3

Item 4 Item 5

Item 1

Item 2 Item 3 Item 4 Item 5 Item 6 Item 7

Item 1 Item 2 Item 3 Item 4


Ejemplo de columna expandida Item 1 Item 2 Item 3 Item 4 Item 5

Item 1 Item 2


66

Tabla con cabeceras Head1 Head2 Head3 A B C D E F

Head1 Head2 Head3

A B C

D E F

Combinación de columna expandida y cabecera Head1 Head2 A B C D E F G H

Head1 Head2

A B C D

E F G H

Combinación de cabeceras múltiples y columnas expandidas Head1 Head2 Head 3 Head 4 Head 5 Head 6 A B C D E F G H 67

Head1 Head2

Head 3 Head 4 Head 5 Head 6

A B C D E F G H

Cabeceras laterales Head1 Item 1 Item 2 Item 3 Head2 Item 4 Item 5 Item 6 Head3 Item 7 Item 8 Item 9

Head1 Item 1 Item 2 Item 3



Combinación de cabeceras laterales y líneas expandidas Item 1 Item 2 Item 3 Item 4 Head1 Item 5 Item 6 Item 7 Item 8 Head2 Item 9 Item 10 Item 3 Item 11

Head1 Item 1 Item 2 Item 3 Item 4

Item 5 Item 6 Item 7 Item 8

Head2 Item 9 Item 10 Item 3 Item 11

68

Combinación de cabeceras superiores y laterales. Tabla centrada. Contenidos centrados. Título al pie. TABLE TR TD TH CAPTION BORDER X - - ROWSPAN - X X COLSPAN - X X ALIGN X X X X VALIGN - X WIDTH X - X HEIGTH X - X CELLPADDING X - - CELLSPACING X - - Resumen de tablas 69

Resumen de tablas
TABLE TR TD TH CAPTION

BORDER X - - - -

ROWSPAN - - X X -

COLSPAN - - X X -

ALIGN - X X X X

VALIGN - - X - -

WIDTH X - X - -

HEIGTH X - X - -

CELLPADDING X - - -

CELLSPACING X - - -

Ejemplo con todos los elementos y parámetros Media Altura Peso Hombres 1.9 85 Sexo Mujeres 1.7 60

Media

Altura Peso

Sexo Hombres 1.9 85

Mujeres 1.7 60

Otro ejemplo de línea y columna expandidas 12 A 34 C D 70

A 1 2

3 4

C D

AJUSTANDO MÁRGENES Y BORDES Tabla sin bordes Item 1 Item 3 Item 2 Item 4 Item 5


Item 4 Item 5

Aquí no es visible el borde de las celdas debido a que se ha omitido el atributo BORDER del elemento . La omisión o no es equivalente a parametrizarlo; se consigue lo mismo así: BORDER =0, y como ya habrás deducido, el valor de BORDER puede ser variable. Mira el siguiente ejemplo: Tabla con borde de 10 puntos Item 1 Item 2 Item 3 Item 4

Item 1 Item 2

Item 3 Item 4

Dimensionado de celdas A

B C

D E F

A B C

D E F

A B C D E F 71

A B C

D E F

A

B

C

D

E

F

A B C

D E F

A

B

C

D

E

F

A B C

D E F

ALINEACIÓN, TÍTULOS Y SUBTABLAS Líneas múltiples en un tabla Enero

Febrero

Celda 1 Celda 2 Celda 4

Marzo Otra celda Celda 3

y esta Celda 6 es la celda 5

72

Enero Febrero Marzo

Celda 1 Celda 2 Otra celda
Celda 3 Celda 4 y esta
es la celda 5 Celda 6

Alineado horizontal del contenido de las celdas. ALIGN=LEFT | RIGHT | CENTER Se puede aplicar individualmente a una celda o a toda la línea Enero

Febrero

Marzo Otra celda Todas alineadas al centro Celda 2 Celda 3 Por defecto Alineado a la derecha Alineado al centro Alineado a la izquierda

Enero Febrero Marzo

Todas alineadas al centro Celda 2 Otra celda
Celda 3

Alineado a la derecha Alineado al centro Por defecto
Alineado a la izquierdat

73

Alineado vertical del contenido de las celdas. VALIGN=TOP | BOTTOM | MIDDLE Se puede aplicar individualmente a una celda o a toda la columna Enero Febrero Marzo Todas alineadas arriba Esta es la Celda 3 Celda 2 Alineado arriba Por defecto Alineado abajo Alineado al centro

Enero Febrero Marzo

Todas alineadas arriba Esta es la
Celda 2 Celda 3

Alineado arriba Alineado abajo Por defecto
Alineado al centro

Titulando las tablas. CAPTION=TOP | BOTTOM Título arriba Enero Febrero Marzo Celda 1 Celda 2 Celda 3
Titulo arriba
Enero Febrero Marzo


Enero Febrero Marzo Celda 1 Celda 2 Celda 3 Título abajo 74

Titulo abajo
Enero Febrero Marzo


Anidando tablas. La tabla ABCD dentro de la tabla 12345 3 12 AB CD 456

1 2 3

A B

C D

4 5 6

75

LONGITUD HORIZONTAL DE LAS TABLAS Tabla que ocupa el 50 % de la pantalla, y cuyas celdas están dimensionadas al 50 % cada una respecto a la longitud total de la tabla

Width=50% Celda 3

Width=50% Celda 4

Width=50% Width=50%

Celda 3 Celda 4

Tabla dimensionada al 50 % de la pantalla, celdas sin dimensionar. Obsévese que se alargan más de lo que lo harían sin forzar la longitud de la tabla

Celda 1 Celda 3

2 4

Celda 1 2

Celda 3 4

El mismo efecto anterior, pero con la tabla dimensionada al 100 %

WIDTH=100% 3

Celda 2 Celda 4

WIDTH=100% Celda 2

3 Celda 4

Centrado de una tabla en la página

A D

B E

C F

A B C

D E F

76

Tabla forzada al 50 % de la página, conteniendo otra tabla anidada en una de sus celdas. La segunda tabla está forzada a ocupar el 100 % de la celda receptora.

Item 1 Item A

Item 2 Item B

Item 4

Item 1 Item 2

Item A Item B

Item 4

LONGITUD VERTICAL DE LAS TABLAS Tabla que ocupa el 50 % horizontal de la pantalla, y el 25 % vertical.

HEIGHT=25% 3

HEIGHT=25%

Item 2 4

HEIGHT=15% Item 2

3 4

FONDOS DE COLORES O GRÁFICOS EN LAS TABLAS Una tabla de cuatro celdas. Cada una de un color. (Sólo Netscape 3.0 o superior)

Texto ROJO Texto VERDE Texto AZUL Texto AMARILLO

Texto ROJO Texto VERDE

Texto AZUL Texto AMARILLO

En este ejemplo se ha dado color individualmente a cada celda. El atributo BGCOLOR="color" puede utilizarse en cada elemento de la tabla para efectos globales. Por ejemplo, para hacer toda la tabla en rojo, sólo sería necesario escribir: 77

.... ....

Para toda la línea:

....

texto

También se puede usar una imagen como fondo de toda la tabla: .... ....

De sólo una celda:

....

texto

O de toda la fila:

....

texto
Utilizando una técnica parecida, también se pueden conseguir recuadros con las esquinas redondeadas. Al igual que en el anterior ejemplo, es necesario tener un gráfico previamente, pero este nos dará algo más de trabajo. Con cualquier editor de gráficos (el "Paint" de Windows, por ejemplo) generas un círculo del color que quieras, y con el borde transparente o de otro color. A continuación lo cortas en cuatro porciones, como una tarta, y guardas cada trozo con un nombre cualquiera, por ejemplo, angulo1, angulo2, etc. Así

Recuadro con ángulos redondeados Y este es el código necesario:

Recuadro con ángulos redondeados

78

Report "Texto de prueba: Directiva cerrada"

Your name

Email

Reason

Description

Copyright © 2025 IDOC.TIPS. All rights reserved.
About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy

Sign In

Email

Password

Remember me Forgot password?

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

Buscadores	Otros Links
Ya.com	Supermotor.com	Rappelweb.com
Red.ya.com	Finanzas.com	Tiendapc.com

Comando	función
TR	Siguiente fila
TH	Encabezado en columna siguiente
TD	Texto en la columna siguiente

Secciones del tutorial
Comandos básicos Imágenes Enlaces	Tablas Funciones especiales Recomendaciones
Introducción de imágenes en una tabla
Logotipo de Espacio.ya.com
Acceso a otros recursos
URL del portal de Ya.com Internet_Factory	http://www.Ya.com

Unidad	Escuelas	Facultades	Institutos
Mexicali	5	6	2
Tijuana	6	2	1
Ensenada	2	2	2
Tecate	1

Head1	Item 1	Item 2	Item 3
Head2	Item 4	Item 5	Item 6
Head3	Item 7	Item 8	Item 9

	TABLE	TR	TD	TH	CAPTION
BORDER	X	-	-	-	-
ROWSPAN	-	-	X	X	-
COLSPAN	-	-	X	X	-
ALIGN	-	X	X	X	X
VALIGN	-	-	X	-	-
WIDTH	X	-	X	-	-
HEIGTH	X	-	X	-	-
CELLPADDING	X	-	-	-
CELLSPACING	X	-	-	-

Enero	Febrero	Marzo
Todas alineadas al centro	Celda 2	Otra celda Celda 3
Alineado a la derecha	Alineado al centro	Por defecto Alineado a la izquierdat

Enero	Febrero	Marzo
Todas alineadas arriba	Esta es la Celda 2	Celda 3
Alineado arriba	Alineado abajo	Por defecto Alineado al centro

Texto de prueba: Directiva cerrada

Recommend Documents

Texto de prueba

Primera pagina

Mi página del Web

y

. El texto que escribamos entre el inicio y el fin de la orden será el afectado por las cabeceras. La cabecera

será la que muestre el texto en mayor tamaño. Ejemplo:

Cabecera tipo 1

Cabecera tipo 2

Cabecera tipo 3

Cabecera tipo 4

Cabecera tipo 5

Cabecera tipo 6

Encabezados o títulos

Título Nivel 1

Título Nivel 2

es el primer nivel y por lo tanto el más grande.

Título Nivel 3

Título Nivel 5

Título Nivel 4

Título Nivel 6

Título Nivel 3 centrado

Título Nivel 4 parpadeante

Curriculum Vitae:

Curriculum Vitae:

Universidad Autónoma de Baja California

Universidad Autónoma de Baja California

Universidad Autónoma de Baja California

Universidad Autónoma de Baja California

Ejemplo de un enlace interno (al mismo documento):

Ejemplo de un enlace interno (a otro documento):

Ejemplo de un enlace externo:

Comentarios y Sugerencias:

Universidad Autónoma de Baja California

Universidad Autónoma de Baja California