Manual HTML Para Impresion
Cargado por
Juan Manuel Maya MerazManual HTML Para Impresion
Cargado por
Juan Manuel Maya MerazHTML
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
<CENTER> Mi página Web </CENTER>
Directiva abierta
<HR>
Directiva con parámetros
<BODY bgcolor="#FFFFFF"> </BODY>
Los elementos pueden anidarse unos con otros, teniendo cuidado de poner los cierres
en el lugar adecuado. Por ejemplo, el elemento <H1> combinado con <I> que sirve para
generar texto en itálica, se escribirá:
<H1><I>Texto de prueba </I></H1>.
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:
<HTML> Indica el inicio del documento.
<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento/título de la ventana.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
------------- comandos y texto-----------
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.
<HTML><HEAD><TITLE>Bienvenido a la guía rápida</TITLE></HEAD>
<BODY>
Documento...
</BODY></HTML>
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 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 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 <I>, etc..
CABECERA DEL DOCUMENTO.
Las ordenes <HEAD> y </HEAD> delimitan la cabecera del documento. Dentro de la
cabecera es importante definir el título de la página por medio de las ordenes <TITLE> y
</TITLE>.
Este título será el que aparezca en la barra de nuestro navegador de páginas Web.
Ejemplo:
<TITLE>La página de José Luis</TITLE>
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>
<TITLE> Head de un documento </TITLE>
<META NAME="keywords" CONTENT="HTML, internet ">
</HEAD>
Este otro sirve para que los buscadores puedan ofrecer un breve resumen de los
contenidos de tu página:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME="description" CONTENT="Manual para escribir HTML.">
</HEAD>
Puedes poner todos los elementos <META> que creas necesarios, pero sin repetirlos.
Ejemplo
<html>
<head>
<title>Mi pagina del Web - 1</title>
</head>
<body>
<h1><center>Primera pagina</center></h1>
<hr>
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.
<p>Aquí va un segundo párrafo.
</body>
</html>
CUERPO DEL DOCUMENTO.
La orden <BODY></BODY> 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.
<BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF" TEXT="#AA0000">
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 Color Negro
#FF0000 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 <BODY> 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 <BODY BGCOLOR="BLUE"> 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:
<HTML>
<HEAD>
<TITLE> Mi pagina del Web - 7 </TITLE>
</HEAD>
<BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF" TEXT="#AA0000">
<CENTER>
<H1> Mi página del Web </H1>
</CENTER>
<HR>
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.
</BODY>
</HTML>
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 <PRE> y </PRE>
obliga al navegador a visualizar el texto tal y como ha sido escrito, respetando tabulaciones,
espacios, retornos de carro, etc..
Ejemplo:
<PRE> Este texto ha Sido
Preformateado.</PRE>
Se verá:
Este texto ha Sido
Preformateado.
Para indicar un salto de línea se utiliza la orden <BR> y para un cambio de párrafo
(deja una línea en blanco en medio) se utiliza la orden <P>.
Ejemplo:
Esto es un salto de línea <BR> y esto es <p>un salto de párrafo
Se verá:
Esto es un salto de línea
Y esto es
un salto de párrafo
La orden <P> puede usarse también como orden "cerrada" <P> y </P> 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:
<P Align = right>Este es un ejemplo de un párrafo de texto justificado a la derecha.</P>
<P Align = center>Este es un ejemplo de párrafo de texto centrado.</P>
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 <HR> 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:
<HR align = center size = 20 width = 50%>
Se verá:
La orden <HR> 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
<FIELDSET>. 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:
<FIELDSET>
Esto es una prueba de enmarcado
</FIELDSET>
Se obtiene:
Esto es una prueba de enmarcado
Este elemento tiene un parámetro que permite etiquetar el recuadro: <LEGEND> Si se
escribe:
<FIELDSET>
<LEGEND>Esto es una etiqueta</LEGEND>
Esto es una prueba de enmarcado
</FIELDSET>
Se obtiene:
Esto es una etiquetaEsto es una prueba de enmarcado
El parámetro <LEGEND> 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:
<FIELDSET>
<LEGEND ALIGN=CENTER> Esto es una etiqueta </LEGEND>
Esto es una prueba de enmarcado
</FIELDSET>
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 <FIELDSET> 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 <H1><H2><H3><H4><H5> y <H6>. El texto que
escribamos entre el inicio y el fin de la orden será el afectado por las cabeceras. La cabecera
<H1> será la que muestre el texto en mayor tamaño.
Ejemplo:
<h1>Cabecera tipo 1</h1>
<h2>Cabecera tipo 2</h2>
<h3>Cabecera tipo 3</h3>
<h4>Cabecera tipo 4</h4>
<h5>Cabecera tipo 5</h5>
<h6>Cabecera tipo 6</h6>
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 Ejemplo Resultado
<B>Texto de Texto de
Negrita <B></B>
prueba</B> prueba
Cursiva <I></I> <I>Texto de prueba</I> Texto de prueba
<TT>Texto de
Teletype <TT></TT> Texto de prueba
prueba</TT>
<U>Texto de
Subrayado <U></U> Texto de prueba
prueba</U>
<S>Texto de
Tachado <S></S> Texto de prueba
prueba</S>
<BLINK>Texto de
Parpadeo <BLINK></BLINK> Texto de prueba
prueba</BLINK>
<SUP>Texto de Texto de prueba
Superíndice <SUP></SUP>
prueba</SUP>
<SUB>Texto de
Subíndice <SUB></SUB> Texto de prueba
prueba</SUB>
<CENTER>Texto de
Centrado <CENTER></CENTER> Texto de prueba
prueba</CENTER>
Otra forma de cambiar los tamaños de letra es utilizar el elemento <FONT > 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
<FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font>
<FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font>
<FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT>
Dará como resultado:
AAA AAAAAA
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.
<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT>
<FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER NEW</FONT>
<FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT>
<FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT>
<FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL FONTS</FONT>
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
<FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT>
<FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT>
Resulta:
Esto es una Prueba
13
Ejemplo: <FONT size = +2 color = "#FF0000 face = "Arial"> Texto de prueba </FONT>
Se verá: Texto de prueba
Existen otras órdenes que realizan las mismas operaciones que las antes vistas en tos
del texto.
Hace lo mismo
Orden
que
<STRONG></STRONG> <B></B>
<CITE></CITE> <I></I>
<STRIKE></STRIKE> <S></S>
Para incluir comentarios en la página Web se utiliza la orden <!-- -->.
Ejemplo: <!-- Esto es un comentario sobre mi página Web -->
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:
<ACRONYM TITLE="Hyper Text Markup Language">HTML</ACRONYM>
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 ƒ É Eacute
æ Ê Ecirc è Ë Euml
í Ì Igrave ê Í Iacute
ë Î Icirc ì Ï Iuml
Æ Ð ETH „ Ñ Ntilde
ñ Ò Ograve î Ó Oacute
ï Ô Ocirc Í Õ Otilde
… Ö Ouml * × times
¯ Ø Oslash ô Ù Ugrave
ò Ú Uacute ó Û Ucirc
† Ü Uuml Y« Ý Yacute
¸ Þ THORN § ß szlig
Ë à agrave ç á aacute
å â acirc Ì ã atilde
€ ä auml å aring
® æ aelig ‚ ç ccedil
é è egrave ƒ é eacute
æ ê ecirc è ë euml
í ì igrave ê í iacute
ë î icirc ì ï iuml
¶ ð eth „ ñ ntilde
17
ñ ò ograve î ó oacute
ï ô ocirc Í õ otilde
… ö ouml Ö ÷ divide
¯ ø oslash ô ù ugrave
ò ú uacute ó û ucirc
† ü uuml Y« ý yacute
þ þ thorn Ÿ ÿ 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 <OL> </OL>. Cada
uno de los elementos de la lista irá precedido de la orden <LI>. La orden <OL> puede llevar
los siguientes parámetros:
start num
Indica que número será el primero de la lista. Si no se indica se entiende que
empezará por el número 1.
type tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista
ordenada numéricamente.
Los tipos posibles son :
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
<OL> 1. Colombia
<LI>Colombia
<LI>México 2. México
<LI>Brasil
3. Brasil
<LI>EE.UU.
</OL> 4. EE.UU.
<OL type = A > A. Colombia
<LI>Colombia
<LI>México B. México
<LI>Brasil
C. Brasil
<LI>EE.UU.
</OL> D. 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 <UL></UL> para delimitar la lista, y <LI>
para indicar cada uno de los elementos. La orden <UL> 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:
<OL TYPE=A START=5>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
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
<UL type = disk > • Colombia
<LI>Colombia
<LI>México • México
<LI>Brasil
• Brasil
<LI>EE.UU.
</UL> • EE.UU.
<UL type = square> Colombia
<LI>Colombia
<LI>México México
<LI>Brasil
Brasil
<LI>EE.UU.
</UL> 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 <DL> y </DL>. El elemento marcado como
término se antecede de la orden <DT>, el marcado como definición se antecede de la orden
<DD>.
Ejemplo. Resultado.
<DL>
WWW
<DT>WWW
<DD>Abreviatura de World Abreviatura de World Wide
Wide Web Web
<DT>FTP
FTP
<DD>Abreviatura de File
20
Transfer Protocol
Abreviatura de File
<DT>IRC
Transfer Protocol
<DD>Abreviatura de Internet
Relay Chat IRC
</DL>
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
<MENU></MENU> y los elementos se anteceden de <LI> 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 <DIR></DIR> y los elementos se anteceden de <LI>. 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
<UL type= disk>
<LI>Buscadores
• Buscadores
<UL>
•
<LI>Yahoo
o Yahoo
<LI>Ole
o Ole
<LI>Lycos
o Lycos
</UL>
• Links
<LI>Links
•
<UL>
o Microsoft
<LI>Microsoft
o IBM
<LI>IBM
</UL> </UL>
21
Ejemplo de imágenes en listas
Se escriben todas igual, sólo hay que cambiar el nombre de los gráficos:
<DL>
<DT><IMG SRC="bolaroja.gif">Linea de texto
<DT><IMG SRC="bolaroja.gif">Linea de texto
<DT><IMG SRC="bolaroja.gif">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 <IMG>. 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 <IMG> 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
<IMG src ="caution.gif" alt = "Cuidado !!" >
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:
<IMG src = " http://www.microsoft.com/iexplorer.gif">
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
<IMG src="caution.gif" width=100 >
<IMG src="caution.gif" height=20 >
<IMG src="caution.gif" align=TOP>Atención !!!
<IMG src="caution.gif" align=MIDDLE>Atención !!!
<IMG src="caution.gif" align=BOTTOM>Atencion !!!
Tenga en cuenta <IMG src="caution.gif" hspace=10> esta indicación.
Tenga en cuenta
<IMG src="caution.gif"vspace=20> 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).
<IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">
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 <A> y </A>. 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:
<A href = "http://www.espacio.ya.com"> Pulse para ir a la página de Espacio.ya.com</A>
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:
<A href = "http://www.ya.com/" ><IMG src = "ya.gif"></A>
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:
<A HREF ="dirección del recurso">Texto en el que hay que picar con el ratón para
acceder al recurso</A>.
25
ENLACES A PARTES DE UN DOCUMENTO.
Para establecer un enlace con otra parte del documento, se utiliza la expresión:
<A HREF="#referencia">Texto de enlace</A>
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:
<A NAME="referencia">..texto opcional..</A>, que será el destino del enlace. Por
ejemplo, podemos situar al inicio de una página HTML el siguiente código:
<A NAME="m0">INDICE</A>
<UL>
<LI><A HREF="#m1">Introducción</A>
<LI><A HREF="#m2">Referencias históricas</A>
<LI><A HREF="#m3">Aspectos de interés</A>
</UL>
y después desarrollar cada uno de los apartados:
<A NAME="m1>Introducción</A><BR> ....texto de la introducción....
<A NAME="m2">Referencias históricas</A>
....texto de las referencias históricas....
<A NAME="m3">Aspectos de interés</A>
....texto de los aspectos de interés....
<A HREF="#m0">Índice de contenidos</A>
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:
<A HREF="main.htm#m5">...texto a picar...</A>
permite enlazar con sección m5 de la página main.htm.
Ir al índice <A HREF="indice.htm"> <img src="bolaroja.gif"> </A>.
Y este sería el resultado:
Ir al índice
Para que este la imagen sin borde
Ir al índice <A HREF="indice.htm"> <img src="bolaroja.gif" border=0> </A>.
Y este sería el resultado:
Ir al índice
MARQUEE.
La orden <MARQUEE></MARQUEE> 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:
<MARQUEE bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 > La página de Los
Computadores</MARQUEE>
Si estas utilizando Ms-Explorer veras el efecto producido a continuación:
La pagina de Los Computadores
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:
<TABLE BORDER=n> y </TABLE>
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 <TD> y <TH>.
<TD> indica una celda normal, y <TH> indica una celda de "cabecera", es decir, el contenido
será resaltado en negrita y en un tamaño ligeramente superior al normal. Los parámetros
opcionales de ambas 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 <TR>. A continuación
mostraremos un ejemplo de una tabla que contiene solo texto. Como se indicó anteriormente
el contenido de las celtas puede ser cualquier elemento de HTML, un texto, una imagen, un
Hyperenlace, una Lista, etc...
Ejemplo:
<TABLE border=0 cellspacing=2 cellpadding=2 width =80%>
<TH align = center>Buscadores
<TH align = center colspan = 2>Otros Links
<TR>
<TD align = CENTER>Ya.com
<TD align = CENTER>Supermotor.com
<TD align = CENTER>Rappelweb.com
<TR>
<TD align = CENTER>Red.ya.com
<TD align = CENTER>Finanzas.com
<TD align = CENTER>Tiendapc.com
</TABLE>
30
se verá:
Buscadores Otros Links
Ya.com Supermotor.com Rappelweb.com
Red.ya.com Finanzas.com Tiendapc.com
ejemplo:
<TABLE BORDER=1>
<TR><TH>Comando<TH>función
<TR><TD>TR<TD>Siguiente fila
<TR><TD>TH<TD>Encabezado en columna siguiente
<TR><TD>TD<TD>Texto en la columna siguiente
</TABLE>
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
<CENTER> y </CENTER> antes y después, respectivamente, del conjunto de órdenes de la
tabla.
31
Ejemplo:
<CENTER>
<TABLE BORDER=0>
<TR><TH COLSPAN="2">Secciones del tutorial
<TR><TD>
<UL>
<LI>Comandos básicos
<LI>Imágenes
<LI>Enlaces
</UL>
<TD>
<UL>
<LI>Tablas
<LI>Funciones especiales
<LI>Recomendaciones
</UL>
<TR><TH COLSPAN="2">Introducción de imágenes en una tabla
<TR><TD>Logotipo de Espacio.ya.com<TD><IMG SRC="logo_espacio.gif">
<TR><TH COLSPAN="2">Acceso a otros recursos
<TR><TD>URL del portal de Ya.com Internet_Factory<TD>
<A HREF="http://www.ya.com">http://www.Ya.com </A>
</TABLE>
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:
<font size="n">.....texto.....</font>
donde n es un número entre 1 y 7, siendo 1 el tamaño menor y 7 el mayor:
<font size="1">Tamaño de letra 1</font><BR>
<font size="2">Tamaño de letra 2</font><BR>
<font size="3">Tamaño de letra 3</font><BR>
<font size="4">Tamaño de letra 4</font><BR>
<font size="5">Tamaño de letra 5</font><BR>
<font size="6">Tamaño de letra 6</font><BR>
<font size="7">Tamaño de letra 7</font><BR>
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 <FONT SIZE="+1">..... texto .....</FONT> incrementa en un tamaño el
tamaño actual.
De la misma forma, la orden: <FONT SIZE="-1">..... texto .....</FONT>
disminuye un tamaño.
Ejemplo:
Los tamaños <FONT SIZE="+1">de letra </FONT><FONT SIZE="+2">pueden variarse
33
</FONT><FONT SIZE="+3"> a voluntad </FONT><FONT
SIZE="+4">incrementándolos o </FONT><FONT SIZE="1"> disminuyéndolos</FONT>
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 <FORM> y </FORM>. 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 <FORM> 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 <INPUT>. 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 <FORM>. 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 <SELECT> </SELECT> . 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 <OPTION>. Esta orden
puede incluir el parámetro selected para indicar cual es la opción por defecto. En caso de que
no se especifique, se tomara por defecto la primera opción de la lista.
Areas de texto
Representa un campo de texto de múltiples líneas. Normalmente se utiliza para que se
incluyan en el comentario. La orden usada es <TEXTAREA> </TEXTAREA>, y sus
parámetros:
name = campo
Nombre del campo.
cols = num.
Numero de columnas de texto visibles.
rows = num.
Numero de filas de texto visibles.
wrap = VIRTUAL / PHYSICAL
Justifica el texto automáticamente en el interior de la caja. La opción PHYSICAL envía
las líneas de texto separadas en líneas físicas. La opción VIRTUAL envía todo el texto
seguido.
Veamos a continuación un ejemplo de formulario utilizando todas las formas de
introducción de datos.
Ejemplo:
<FORM action = "mailto: [email protected]" method = post >
Tu Nombre:<INPUT type = text name = nombre size = 30 >
<P>
Tu Edad :
<INPUT type = radio name = edad value = "-20" > Menos de 20 años
<INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 años
<INPUT type = radio name = edad value = "+40" > Mas de 40 años
<P>
<INPUT type = hidden name = lugar value = "pagina personal" >
¿Te parece útil este manual?
37
<SELECT name = donde >
<OPTION>Mucho </OPTION>
<OPTION>Bastante</OPTION>
<OPTION>Regular </OPTION>
<OPTION>Nada </OPTION>
</SELECT>
<P>
Tus Comentarios:
<BR>
<TEXTAREA name = comentario rows = 5 cols = 40 wrap = virtual ></TEXTAREA>
<P>
<INPUT type = submit value = "Enviar" >
<INPUT type = reset value = "Borrar" >
</FORM>
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 [email protected]. 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 <FORM> 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 <APPLET></APPLET> 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 <APPLET> se incluye la orden <PARAM> 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:
<APPLET codebase="http://www.ucm.es/java" code="Laufschrift.class" width = 350
height = 25 >
<PARAM name = bg.color value = "0,255,0">
<PARAM name = message value = "**Bienvenido a mi pagina WEB - Manual de HTML**">
</APPLET>
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 <BGSOUND> 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:
<BGSOUND src= "yesterday.mid" loop= infinite>
Para utilizar esta función en Netscape se utiliza la orden <EMBED>. 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:
<EMBED src= "yesterday.mid" loop= true autostart= true volume=50 width=50
height=15 controls=smallconsole>
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 <FRAMESET>,
</FRAMESET> y <FRAME>. La orden <FRAMESET> indica como se va a dividir la ventana
principal. Pueden incluirse varias ordenes <FRAMESET> anidadas con el objeto de subdividir
una división u otra subdivisión. Los parámetros de <FRAMESET> son rows y cols en función
de si la división de la pantalla se realiza por filas (rows) o columnas (cols). Los parámetros
rows y cols se acompañan de un grupo de números que indican en puntos o en porcentaje el
tamaño de cada una de las subventanas. En caso de utilizar rows los tamaños de las
subventanas se entienden indicados de arriba a abajo, es decir, el primer valor será el
asignado a la ventana superior, el segundo a la ventana inmediatamente inferior, etc... En el
caso de cols los tamaños se aplican de izquierda a derecha.
Ejemplos Se verá
Crea tres subventanas horizontales, la primera
<FRAMESET rows =
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
<FRAMESET cols = "120,*,100">
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
<FRAMESET cols = "15%,*"> verticales, la primera ocupa un 15% de la ventana
principal y la segunda el resto. La segunda orden
<FRAMESET rows = 20%,*">
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 <FRAME> indica las propiedades de cada subventana. Es necesario indicar
una orden <FRAME> para cada subventana creada. Los parámetros de <FRAME> son:
name = "nombre"
Indica el nombre por el que nos referiremos a esa subventana.
src = "URL"
La ventana mostrará en principio el contenido del documento HTML que se indique.
marginwidth = 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 <NOFRAMES>
</NOFRAMES>. 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 <NOFRAMES> </NOFRAMES>.
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
(<BODY>).
Veamos un ejemplo completo de Frames con comentarios:
<HTML>
<HEAD>
<TITLE>Página con Frames</TITLE>
</HEAD>
<FRAMESET cols = "15%,*">
<!-- Creo dos subventanas verticales, la de la izquierda ocupa un 15% de la pantalla, la de la
derecha el resto. -->
<FRAMESET rows = "35%,*">
<!-- Creo dos subventanas horizontales dentro de la subventana izquierda. -->
<FRAME name = "upd" src = "update.htm" scrolling = "auto">
<!-- Llamo a la subventana horizontal superior izquierda con el nombre "upd" y
muestra el documento update.htm -->
<FRAME name = "menu" src = "menu1.htm" scrolling = "auto">
<!-- Llamo a la subventana horizontal inferior izquierda con el nombre "menu" y
muestro el documento menu1.htm -->
</FRAMESET>
44
<!-- Cierro la definición de las subventanas horizontales de la ventana de la izquierda -->
<FRAME name = "home" src = "home.htm" scrolling = "auto">
<!-- Llamo a la subventana vertical derecha con el nombre "home" y muestro el
documento home.htm -->
<NOFRAMES>
<!-- Indico las órdenes para aquellos navegadores que no soporten Frames -->
<BODY>
SU navegador NO MUESTRA FRAMES. Pulse <A href= "home.htm"> AQUI </A> para
ir a la página sin Frames.
</BODY>
</NOFRAMES>
</FRAMESET>
<!-- Cierro la definición de las subventanas verticales -->
</HTML>
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 <A href= >
</A>. Este parámetro se llama target y puede tener los siguientes valores :
target "nombre _ ventana"
Muestra el Hyperenlace en la ventana cuyo nombre se indica.
target "_blank"
Abre una nueva copia del 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 <FRAMESET> definido anteriormente al actual. Si no
hay ningœn <FRAMESET> 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 Resultado
Muestra la pagina de
<A ref.= "http://www.microsoft.com/" target =
Microsoft en una nueva copia
"_blank">
del navegador
Muestra la pagina de Ibm en
<A href= "http://www.ibm.com/" target = "home"> la subventanna llamada
"home"
Muestra la pagina del
<A href= "http://www.yahoo.com/" target = "_top"> 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> </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 ......
-->
</SCRIPT>
47
ANEXOS
48
CÓDIGOS HEXADECIMALES DE COLOR
Estos códigos de color se pueden utilizar como valor de atributo en los elementos
<FONT COLOR> y <BODY BGCOLOR FGCOLOR TEXT LINK VLINK ALINK>. 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: <BODY
BGCOLOR=#FF0000> 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:
<HTML>
<HEAD>
<TITLE>Este es mi primer documento HTML</TITLE>
</HEAD>
<BODY>
PRACTICA # 1
</BODY>
</HTML>
ETIQUETAS PARA TEXTO
RESULTADO
ETIQUETA FUNCION EJEMPLO
<ADDRESS> Se utiliza para agregar <ADDRESS>Mi direccion Mi dirección es:
el efecto de "itálico" al es:</ADDRESS>
texto.
<B> Negritas o remarcado <B>Este es un texto Este es un texto
(bold). remarcado</B> remarcado
<BASE FONT Define el tamaño <BASE FONT SIZE=4>Texto Texto base # 4
SIZE=n> inicial del texto. base # 4</FONT>
Nota: El tamaño base <BASE FONT Texto base +1
del texto por omisión es SIZE=+1>Texto base
3, pero con esta +1</FONT> Texto base +2
etiqueta se puede
modificar, incrementar o <BASE FONT Texto base -1
disminuir. SIZE=+2>Texto base
+2</FONT>
En los ejemplos 1 y 2,
se obtiene el mismo
resultado, ya que la <BASE FONT SIZE= -
base es 3. Resulta lo 1>Texto base -1</FONT>
mismo definir la base a
4 que sumar 1 al valor
por omisión (3).
Texto parpadeante <BLINK>Este texto debe Este texto debe apagar y
<BLINK>
(blinking) apagar y prender</BLINK> prender
<CENTER>Texto
<CENTER> Centrar Texto centrado
centrado</CENTER>
<EM>Este es un texto
<EM> Itálico o enfatizado Este es un texto itálico
itálico</EM>
<FONT SIZE=n> Define el tamaño del <FONT SIZE=4>Texto # Texto base # 4
texto. 4</FONT>
Nota: El tamaño del <FONT SIZE=+1>Texto Texto base +1
texto por omisión es 3, +1</FONT>
pero con esta etiqueta
53
se puede modificar,
<FONT SIZE=+2>Texto
incrementar o disminuir.
+2</FONT> Texto base +2
En los ejemplos 1 y 2, Texto base -1
se obtiene el mismo
<FONT SIZE= -1>Texto base
resultado, ya que la
-1</FONT>
base es 3. Resulta lo
mismo definir el tamaño
a 4 que sumar 1 al valor
por omisión (3).
<H1> Encabezados o títulos <H1>Título Nivel 1</H1>
Título Nivel 1
(headers)
<H2> <H2>Título Nivel 2</H2>
Nota: Los encabezados tienen 6 Título Nivel 2
<H3> niveles o tamaños de texto <H3>Título Nivel 3</H3>
predefinidos. El <H1> es el
primer nivel y por lo tanto el más
Título Nivel 3
<H4> grande. <H4>Título Nivel 4</H4>
Título Nivel 4
<H5> Cada <Hn> es una línea <H5>Título Nivel 5</H5>
independiente y su texto es Título Nivel 5
remarcado (bold).
<H6> <H6>Título Nivel 6</H6>
Título Nivel 6
<I>Este es un texto
<I> Itálico Este es un texto itálico
itálico</I>
<STRIKE>Este es un texto Este es un texto
<STRIKE> Marcado
marcado</STRIKE> marcado
<STRONG>Este es un texto Este es un texto
<STRONG> Negritas o remarcado
remarcado</STRONG> remarcado
<SUB> Subscript H<SUB>2</SUB>O H2O
o
<SUP> Superscript Clima : 30<SUP>o</SUP>C Clima : 30 C
<U>Este es un texto Este es un texto
<U> Subrayado
subrayado</U> subrayado
OTROS ATRIBUTOS PARA TEXTO
(COLOR, TIPO DE LETRA, ETC)
RESULTADO
ETIQUETA FUNCION EJEMPLO
<FONT Modifica el color <FONT COLOR="#FF0000">Este Este texto es
COLOR="#FF0000"> del texto texto es rojo </FONT> rojo
<FONT Modifica el tipo <FACE="Technical">Este texto es de Este texto es
FACE="Technical"> de letra (font) tipo Technical</FONT> de tipo
Technical
54
EJEMPLOS DE COMBINACIÓN DE ETIQUETAS PARA TEXTO
RESULTADO
EJEMPLO
<CENTER><B>Este es un texto remarcado y Este es un texto remarcado y
centrado</B><CENTER> centrado
Este es un texto remarcado e
<B><I>Este es un texto remarcado e itálico</I></B>
itálico
<CENTER><H3>Título Nivel 3 centrado</H3></CENTER
Título Nivel 3 centrado
<FONT SIZE=+1><B><I>Texto +1 remarcado e Texto +1 remarcado e
itálico</I></B></FONT> itálico
<BLINK><H4>Título Nivel 4 parpadeante</H4></BLINK> Título Nivel 4 parpadeante
<B><U><I>Este es un texto remarcado, subrayado e Este es un texto remarcado,
itálico</I></U></B> subrayado e itálico
<FONT COLOR="#FF0000" FACE="Arial" SIZE=3>Este texto Este texto es rojo, tipo Arial y
es rojo, tipo Arial y de tamaño 3</FONT> de tamaño 3
PRIMER DOCUMENTO HTML:
1.- Elementos Básicos
2.- Texto normal (sin atributos)
3.- Salto de línea (break line)
<HTML> Resultado:
<HEAD> Curriculum Vitae:
<TITLE>Página personal de: Ana Luisa Nombre: Ana Luisa Méndez
Méndez</TITLE> Dirección: Blvd. Costero # 2845
</HEAD> Ciudad: Ensenada, Baja California, México
<BODY>
Curriculum Vitae:<BR>
Nombre: Ana Luis Méndez<BR>
Dirección: Blvd. Costero # 2845<BR>
Ciudad: Ensenada, Baja California, México<BR>
</BODY>
</HTML>
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
<HTML> Resultado:
<HEAD>
<TITLE>Página personal de: Ana Luisa Curriculum Vitae:
Méndez</TITLE>
</HEAD>
Nombre: Ana Luisa Méndez
<BODY> Dirección: Blvd. Costero # 2845
<CENTER>
<H2>Curriculum Vitae:</H2> Ciudad: Ensenada, Baja
</CENTER> California, México
<B>Nombre:<I><U>Ana Luisa
Méndez</U></I><BR>
Dirección: <I><U>Blvd. Costero #
2845</U></I><BR>
Ciudad: <I><U>Ensenada, Baja California,
México</U></I><BR>
</B>
<P>
<HR>
</BODY>
</HTML>
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
<HTML> Resultado:
<HEAD>
<TITLE>Página personal de: Ana Luisa Curriculum Vitae:
Méndez</TITLE>
</HEAD>
Nombre:
<BODY>
<CENTER> Ana Luisa Méndez
<H3><U>Curriculum Vitae:</U></H3>
</CENTER> Dirección:
<B>Nombre:<BR> Blvd. Costero # 2845
<FONT SIZE=5>A</FONT>na <FONT
SIZE=5>L</FONT>uisa Ciudad:
<FONT SIZE=5>M</FONT>éndez<BR>
Dirección: <BR>
Ensenada, Baja California,
Blvd. Costero # 2845<BR> México
Ciudad:<BR>
56
Ensenada, Baja California, México<BR>
<P>
<HR>
</BODY>
</HTML>
LISTAS DE ELEMENTOS:
1.- Elementos Básicos
2.- Título (H4) centrado (center)
Ejemplo # 1 Ejemplo # 3
Lista numerada (ordered list) Listas anidadas
Ejemplo # 2 Ejemplo # 4
Lista no numerada (Unordered list) Listas combinadas
<HTML> Resultado:
<HEAD> Universidad Autónoma de Baja
<TITLE>Unidades de la UABC</TITLE> California
</HEAD>
1. Unidad Mexicali
<BODY>
<CENTER> 2. Unidad Tijuana
<H4><U>Universidad Autónoma de Baja
California</U></H4> 3. Unidad Ensenada
</CENTER>
<OL> 4. Unidad Tecate
<LI>Unidad Mexicali
<LI>Unidad Tijuana
<LI>Unidad Ensenada
<LI>Unidad Tecate
</OL>
</BODY>
</HTML>
Resultado:
<HTML>
Universidad Autónoma de Baja
<HEAD>
<TITLE>Unidades de la UABC</TITLE>
California
</HEAD>
• Unidad Mexicali
<BODY>
<CENTER> • Unidad Tijuana
<H4><U>Universidad Autónoma de Baja
California</U></H4> • Unidad Ensenada
</CENTER>
<UL> • Unidad Tecate
<LI>Unidad Mexicali
<LI>Unidad Tijuana
<LI>Unidad Ensenada
<LI>Unidad Tecate
</UL>
57
</BODY>
</HTML>
<HTML> Resultado:
<HEAD> Universidad Autónoma de Baja California
<TITLE>Unidades de la UABC</TITLE>
</HEAD> 1. Unidad Mexicali
<BODY> a. Facultad de Derecho
<CENTER>
<H4><U>Universidad Autónoma de Baja b. Facultad de Medicina
California</U></H4>
</CENTER> c. Facultad de Contabilidad
<OL>
d. Escuela de Ingeniería
<LI>Unidad Mexicali
2. Unidad Tijuana
<OL TYPE =a>
<LI>Facultad de Derecho a. Facultad de Derecho
<LI>Facultad de Medicina
<LI>Facultad de Contabilidad b. Facultad de Odontología
<LI>Escuela de Ingeniería
</OL> c. Escuela de Turismo
<LI>Unidad Tijuana d. Escuela de Ingeniería
<OL TYPE =a> 3. Unidad Ensenada
<LI>Facultad de Derecho
<LI>Facultad de Odontología a. Facultad de Ciencias
<LI>Escuela de Turismo
<LI>Escuela de Ingeniería b. Facultad de Ciencias Marinas
</OL>
c. Escuela de Contabilidad y Admón.
<LI>Unidad Ensenada d. Escuela de Ingeniería
<OL TYPE =a> 4. Unidad Tecate
<LI>Facultad de Ciencias
<LI>Facultad de Ciencias Marinas a. Escuela de Ingeniería
<LI>Escuela de Contabilidad y Admón.
<LI>Escuela de Ingeniería
</OL>
<LI>Unidad Tecate
<OL TYPE =a>
<LI>Escuela de Ingeniería
</OL>
</OL>
</BODY>
</HTML>
<HTML> Resultado:
<HEAD> Universidad Autónoma de Baja California
<TITLE>Unidades de la UABC</TITLE>
58
</HEAD>
1. Unidad Mexicali
<BODY>
o Facultad de Derecho
<CENTER>
<H4><U>Universidad Autónoma de Baja o Facultad de Medicina
California</U></H4>
</CENTER> o Facultad de Contabilidad
<OL>
o Escuela de Ingeniería
<LI>Unidad Mexicali
2. Unidad Tijuana
<UL TYPE =a>
<LI>Facultad de Derecho o Facultad de Derecho
<LI>Facultad de Medicina
<LI>Facultad de Contabilidad o Facultad de Odontología
<LI>Escuela de Ingeniería
</UL> o Escuela de Turismo
<LI>Unidad Tijuana o Escuela de Ingeniería
<UL TYPE =a> 3. Unidad Ensenada
<LI>Facultad de Derecho
<LI>Facultad de Odontología o Facultad de Ciencias
<LI>Escuela de Turismo
o Facultad de Ciencias Marinas
<LI>Escuela de Ingeniería
</UL> o Escuela de Contabilidad y Admón.
o Escuela de Ingeniería
<LI>Unidad Ensenada
4. Unidad Tecate
<UL TYPE =a>
<LI>Facultad de Ciencias o Escuela de Ingeniería
<LI>Facultad de Ciencias Marinas
<LI>Escuela de Contabilidad y Admón.
<LI>Escuela de Ingeniería
</UL>
<LI>Unidad Tecate
<UL TYPE =a>
<LI>Escuela de Ingeniería
</UL>
</OL>
</BODY>
</HTML>
59
ENLACES O LIGAS:
1.- Elementos Básicos
2.- Enlaces externos
3.- Enlaces internos
Resultado:
<HTML>
Ejemplo de un enlace
<HEAD>
<TITLE>Enlaces de Interés</TITLE>
interno (al mismo
</HEAD> documento):
<BODY> Esta liga te lleva al principio de
<CENTER> esta página
<H4>Ejemplo de un enlace interno (al mismo
documento):</H4>
</CENTER>
Esta liga te lleva al <A HREF="#principio">principio </A>de Ejemplo de un enlace
esta página interno (a otro
<P> documento):
<HR>
<P> Esta liga te lleva a la página
<H4>Ejemplo de un enlace interno (a otro documento):</H4> principal del manual de HTML y lo
Esta liga te lleva a la <A HREF="menu0.htm" coloca en el marco (frame)
TARGET=RIGHT>página principal </A> derecho (right)
del manual de HTML y lo coloca en el marco (frame) derecho
(right)</A><P>
<P> Ejemplo de un enlace
<HR> externo:
<P>
<H4>Ejemplo de un enlace externo:</H4> El CECUUE se encuentra
El <A HREF="http://www.ens.uabc.mx">CECUUE</A> se ubicado en la Unidad Ensenada
encuentra ubicado en la Unidad Ensenada de la UABC
de la <A HREF="http://www.uabc.mx">UABC</A><P>
</BODY>
</HTML>
60
IMÁGENES:
1.- Elementos Básicos
2.- Imágenes (gráficas)
3.- Imagen como enlace tipo mailto: (correo)
Resultado:
</HTML>
Comentarios y
<HEAD>
<TITLE>Imágenes</TITLE>
Sugerencias:
</HEAD>
<BODY>
<CENTER>
<H4>Comentarios y Sugerencias:</H4>
</CENTER>
<IMG SRC="linea.gif"><BR>
<A HREF="mailto:[email protected]"><IMG
SRC="correo.gif" BORDER=0></A>
</CENTER>
</BODY>
</HTML>
TABLAS:
1.- Ejemplo # 1 : Tabla de 2 columnas x 2 renglones
2.- Ejemplo # 2 : Tabla de 4 columnas x 5 renglones
<HTML> Resultado:
<HEAD>
<TITLE>Tablas</TITLE>
</HEAD> UNIVERSIDAD AUTONOMA DE BAJA
CALIFORNIA
<BODY>
<CENTER> Mexicali Tijuana
<H4>Universidad Autónoma de Baja
California</H4>
</CENTER> Ensenada Tecate
<HR>
<TABLE BORDER=1>
<TR>
<TD>Mexicali</TD>
<TD>Tijuana</TD>
</TR>
<TR>
<TD>Ensenada</TD>
<TD>>Tecate</TD>
</TR>
</TABLE>
<HR>
</CENTER>
</BODY>
</HTML>
61
<HTML>
<HEAD>
<TITLE>Tablas</TITLE>
</HEAD>
<BODY>
<CENTER>
<H4>Universidad Autónoma de Baja
California</H4>
</CENTER>
<HR> Resultado:
<TABLE BORDER=1>
<TR>
<TD>Unidad</TD> UNIVERSIDAD AUTONOMA DE BAJA
<TD>Escuelas</TD>
<TD>Facultades</TD>
CALIFORNIA
<TD>Institutos</TD> Información al semestre 96-2
</TR>
<TR>
Escuelas Institutos
<TD>Mexicali</TD> Unidad Facultades
<TD ALIGN=CENTER>5</TD>
<TD ALIGN=CENTER>6</TD>
<TD ALIGN=CENTER>2</TD>
Mexicali 5 6 2
</TR>
<TD>Tijuana</TD> Tijuana 6 2 1
<TD ALIGN=CENTER>6</TD>
<TD ALIGN=CENTER>2</TD>
<TD ALIGN=CENTER>1</TD>
Tecate 1
</TR>
<TD>Ensenada</TD> Ensenada 2 2 2
<TD ALIGN=CENTER>2</TD>
<TD ALIGN=CENTER>2</TD>
<TD ALIGN=CENTER>2</TD>
</TR>
<TD>Tecate</TD>
<TD ALIGN=CENTER>1</TD>
</TR>
</TABLE>
<HR>
</CENTER>
</BODY>
</HTML>
62
EJEMPLOS DE IMAGENES
Imagen alineada a la izquierda (por defecto)
<IMG SRC="sugeren.gif">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).
<IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">
Imagen alineada a la izquierda.Texto alineado arriba
<IMG SRC="sugeren.gif" ALIGN=TOP> 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
<IMG SRC="sugeren.gif" ALIGN=BOTTOM> 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
<IMG SRC="sugeren.gif" ALIGN=MIDDLE> 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
<IMG SRC="sugeren.gif" ALIGN=LEFT> 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
Imagen alineada a la izquierda.Texto envolviendo la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto <BR CLEAR>
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
63
Imagen alineada a la derecha.Texto alineado a la izquierda de la imagen
<IMG SRC="sugeren.gif" ALIGN=RIGHT> 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:
<TABLE> <TR><TD>texto texto texto texto texto texto texto texto texto texto texto
texto</TD><TD align=center><IMG SRC="sugeren.gif"></TD></TR> </TABLE>
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
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=272 HEIGTH=92 > 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
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=75 HEIGTH=20 > 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í:
<MAP NAME="nombre1">
<AREA SHAPE="rect" COORDS="1,1,75,46" HREF="indice.htm">
<AREA SHAPE="rect" COORDS="76,1,136,46" HREF="intro.htm">
</MAP>
<IMG SRC="sugeren.gif" USEMAP="#nombre1">
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.
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 <A>, 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.
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,
(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, circle y 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) 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) 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, y no es necesario indicar ninguna coordenada.
EJEMPLOS DE TABLAS
Tabla básica de 3x2
A BC
DE F
<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
65
Dos ejemplos de línea expandida <ROWSPAN>
Item 1 Item 3
Item 2
Item 4 Item 5
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Item 2 Item 3 Item 4
Item 1
Item 5 Item 6 Item 7
<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
</TR>
</TABLE>
Ejemplo de columna expandida <COLSPAN>
Item 1 Item 2
Item 3 Item 4 Item 5
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
66
Tabla con cabeceras <TH>
Head1 Head2 Head3
A B C
D E F
<TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
Combinación de columna expandida y cabecera
Head1 Head2
A B C D
E F G H
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
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
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
67
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
Cabeceras laterales
Head1 Item 1 Item 2 Item 3
Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9
<TABLE BORDER>
<TR><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
<TR><TH>Head2</TH>
<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>
<TR><TH>Head3</TH>
<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>
</TABLE>
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
<TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item
8</TD>
</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD>
</TR>
</TABLE>
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
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=bottom>Resumen de tablas</CAPTION>
<TR>
<TD><TH>TABLE</TH><TH>TR</TH><TH>TD</TH><TH>TH</TH><TH>CAPTION</TH>
</TD>
</TR>
<TR ALIGN=CENTER>
<TH>BORDER</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>ROWSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>COLSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>ALIGN</TH><TD>-</TD><TD>X</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR ALIGN=CENTER>
<TH>VALIGN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>WIDTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>HEIGTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
69
<TR ALIGN=CENTER>
<TH>CELLPADDING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-
</TD>
</TR>
<TR ALIGN=CENTER>
<TH>CELLSPACING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-
</TD>
</TR>
</TABLE>
</CENTER>
Ejemplo con todos los elementos y parámetros
Media
Altura Peso
Hombres 1.9 85
Sexo
Mujeres 1.7 60
<TABLE BORDER>
<TR> <TD><TH ROWSPAN=2></TH>
<TH COLSPAN=2>Media</TH></TD>
</TR>
<TR> <TD><TH>Altura</TH><TH>Peso</TH></TD>
</TR>
<TR> <TH ROWSPAN=2>Sexo</TH>
<TH>Hombres</TH><TD>1.9</TD><TD>85</TD>
</TR>
<TR> <TH>Mujeres</TH><TD>1.7</TD><TD>60</TD>
</TR>
</TABLE>
Otro ejemplo de línea y columna expandidas
12
A
34
C D
<TABLE BORDER>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
70
</TR>
<TR>
</TR>
</TABLE>
AJUSTANDO MÁRGENES Y BORDES
Tabla sin bordes
Item 1 Item 3
Item 2
Item 4 Item 5
<TABLE>
<TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD>
</TR>
<TR> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Aquí no es visible el borde de las celdas debido a que se ha omitido el atributo
BORDER del elemento <TABLE>. 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
<TABLE BORDER=10>
<TR> <TD>Item 1</TD> <TD> Item 2</TD>
</TR>
<TR> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
</TABLE>
Dimensionado de celdas
A B C
D E F
<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
A B C
D E F
71
<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
A B C
D E F
<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
A B C
D E F
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
ALINEACIÓN, TÍTULOS Y SUBTABLAS
Líneas múltiples en un tabla
Enero Febrero Marzo
Otra celda
Celda 1 Celda 2
Celda 3
y esta
Celda 4 Celda 6
es la celda 5
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
72
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD>Celda 4</TD>
<TD>y esta<br>es la celda 5</TD>
<TD>Celda 6</TD>
</TR>
</TABLE>
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
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR ALIGN=center>
<TD>Todas alineadas al centro</TD>
<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD ALIGN=right>Alineado a la derecha</TD>
<TD ALIGN=center>Alineado al centro</TD>
<TD>Por defecto<br>Alineado a la izquierdat</TD>
</TR>
</TABLE>
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
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR VALIGN=top>
<TD>Todas alineadas arriba</TD>
<TD>Esta es la<br>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
<TR>
<TD VALIGN=top>Alineado arriba</TD>
<TD VALIGN=bottom>Alineado abajo</TD>
<TD>Por defecto<br>Alineado al centro</TD>
</TR>
</TABLE>
Titulando las tablas. CAPTION=TOP | BOTTOM
Título arriba
Enero Febrero Marzo
Celda 1 Celda 2 Celda 3
<TABLE BORDER>
<CAPTION ALIGN=top>Titulo arriba</CAPTION>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
</TABLE>
Enero Febrero Marzo
Celda 1 Celda 2 Celda 3
Título abajo
<TABLE BORDER>
74
<CAPTION ALIGN=bottom>Titulo abajo</CAPTION>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
</TABLE>
Anidando tablas. La tabla ABCD dentro de la tabla 12345
3
12 AB
CD
456
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 1 -->
<TD>1</TD>
<TD>2</TD>
<TD>3
<TABLE BORDER>
<TR> <!-- ROW 1, TABLE 2 -->
<TD>A</TD>
<TD>B</TD>
</TR>
<TR> <!-- ROW 2, TABLE 2 -->
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR> <!-- ROW 2, TABLE 1 -->
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
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% Width=50%
Celda 3 Celda 4
<TABLE BORDER WIDTH="50%">
<TR><TD>Width=50%</TD><TD>Width=50%</TD>
</TR>
<TR><TD>Celda 3</TD><TD>Celda 4</TD>
</TR>
</TABLE>
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 2
Celda 3 4
<TABLE BORDER WIDTH="50%">
<TR><TD>Celda 1</TD><TD>2</TD>
</TR>
<TR><TD>Celda 3</TD><TD>4</TD>
</TR>
</TABLE>
El mismo efecto anterior, pero con la tabla dimensionada al 100 %
WIDTH=100% Celda 2
3 Celda 4
<TABLE BORDER WIDTH="100%">
<TR><TD>WIDTH=100%</TD><TD>Celda 2</TD>
</TR>
<TR><TD>3</TD><TD>Celda 4</TD>
</TR>
</TABLE>
Centrado de una tabla en la página
A B C
D E F
<CENTER>
<TABLE BORDER WIDTH="50%">
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
</CENTER>
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 2
Item A Item B Item 4
<TABLE BORDER WIDTH="50%">
<TR><TD>Item 1</TD><TD>Item 2</TD>
</TR>
<TR><TD>
<TABLE BORDER WIDTH=100%>
<TR><TD>Item A</TD><TD>Item B</TD>
</TR>
</TABLE>
</TD>
<TD>Item 4</TD>
</TR>
</TABLE>
LONGITUD VERTICAL DE LAS TABLAS
Tabla que ocupa el 50 % horizontal de la pantalla, y el 25 % vertical. HEIGHT=25%
HEIGHT=25% Item 2
3 4
<TABLE BORDER WIDTH="50%" HEIGHT="25%">
<TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
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
<TABLE BORDER>
<TR><TD BGCOLOR="RED">Texto ROJO</TD>
<TD BGCOLOR="green">Texto VERDE</TD>
</TR>
<TR><TD BGCOLOR="blue">Texto AZUL</TD>
<TD BGCOLOR="YELLOW">Texto AMARILLO</TD>
</TR>
</TABLE>
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:
<TABLE BORDER BGCOLOR="red">
77
....
....
</TABLE>
Para toda la línea:
<TABLE BORDER>
<TR BGCOLOR="red"><TD> texto </TD></TR>
....
</TABLE>
También se puede usar una imagen como fondo de toda la tabla:
<TABLE BORDER BACKGROUND="yellow_r.gif">
....
....
</TABLE>
De sólo una celda:
<TABLE BORDER>
<TR><TD BACKGROUND="yellow_r.gif"> texto </TD></TR>
....
</TABLE>
O de toda la fila:
<TABLE BORDER >
<TR BACKGROUND="yellow_r.gif"><TD> texto </TD></TR>
....
</TABLE>
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:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#DDE0FC" width="20"><img src="angulo1.gif" width="20" height="20">
<td bgcolor="#DDE0FC">
<td bgcolor="#DDE0FC" width="20"><img src="angulo2.gif" width="20" height="20">
</tr>
<tr>
<td bgcolor="#DDE0FC" width="20">
<td bgcolor="#DDE0FC">Recuadro con ángulos redondeados
<td bgcolor="#DDE0FC" width="20">
</tr>
<tr>
<td bgcolor="#DDE0FC" width="20"><img src="angulo4.gif" width="20" height="20">
<td bgcolor="#DDE0FC">
<td bgcolor="#E5E7FD" width="20"><img src="angulo3.gif" width="20" height="20">
</tr>
</table>
78
Como puedes ver, para que el efecto sea completo hay que dar el mismo color
que tienen los gráficos como fondo de las celdas. Estos son los cuatro gráficos
necesarios:
angulo1.gif angulo2.gif
angullo4.gif angulo3.gif
79
También podría gustarte
- Función Del Tanatólogo en El Proceso de DueloAún no hay calificacionesFunción Del Tanatólogo en El Proceso de Duelo4 páginas
- Adicion de Contenido A Las Paginas WebAún no hay calificacionesAdicion de Contenido A Las Paginas Web15 páginas
- Tema #1 Introducion Al Lelenguaje HTMLAún no hay calificacionesTema #1 Introducion Al Lelenguaje HTML6 páginas
- Anexo1_HTML-Conceptos y Etiquetas BásicasAún no hay calificacionesAnexo1_HTML-Conceptos y Etiquetas Básicas50 páginas
- Conceptos Introductorios: Páginas WebAún no hay calificacionesConceptos Introductorios: Páginas Web7 páginas
- Conceptos Básicos de HTML - Manual de HTML y CSSAún no hay calificacionesConceptos Básicos de HTML - Manual de HTML y CSS28 páginas
- Manual Curso Diseño Grafico - HTML ResumenAún no hay calificacionesManual Curso Diseño Grafico - HTML Resumen94 páginas
- La Estructura Básica de Una Página WebAún no hay calificacionesLa Estructura Básica de Una Página Web8 páginas
- Clases - Aplicaciones de InternetAún no hay calificacionesClases - Aplicaciones de Internet116 páginas
- Elementos Basicos de HTML y CSS, Herramientas para EpubsDe EverandElementos Basicos de HTML y CSS, Herramientas para EpubsAún no hay calificaciones
- Historia y Evolucion de Las Redes de ComputadorasAún no hay calificacionesHistoria y Evolucion de Las Redes de Computadoras3 páginas
- Administración de La MercadotecniaAún no hay calificacionesAdministración de La Mercadotecnia21 páginas
- Cuarto Examen Agosto Nov 27-09-03Aún no hay calificacionesCuarto Examen Agosto Nov 27-09-035 páginas
- RESUMEN-La Educación de Los Sujetos Con Discapacidad en ColombiaAún no hay calificacionesRESUMEN-La Educación de Los Sujetos Con Discapacidad en Colombia5 páginas
- Caruajulca Nunez Trabajo Titulo 2019 PDFAún no hay calificacionesCaruajulca Nunez Trabajo Titulo 2019 PDF70 páginas
- Música 4° Básico - Guía 1 DanielaAún no hay calificacionesMúsica 4° Básico - Guía 1 Daniela2 páginas
- Propuesta Modelo de Control Interno para Una EmpresaAún no hay calificacionesPropuesta Modelo de Control Interno para Una Empresa85 páginas
- Corrección de Una Maloclusión Clase III de Angle en Paciente Adulto Con La Técnica Multiloop Edgewise ArchwireAún no hay calificacionesCorrección de Una Maloclusión Clase III de Angle en Paciente Adulto Con La Técnica Multiloop Edgewise Archwire10 páginas
- Inteligencias Multiples en AjedrezAún no hay calificacionesInteligencias Multiples en Ajedrez8 páginas
- Concepto y Ejemplo Cómputo MetricoAún no hay calificacionesConcepto y Ejemplo Cómputo Metrico6 páginas
- Laboratorio - 1 - Programacion para ElectronicaAún no hay calificacionesLaboratorio - 1 - Programacion para Electronica5 páginas
- Relaciones Entre El Materialismo Dialéctico y El Materialismo Histórico0% (1)Relaciones Entre El Materialismo Dialéctico y El Materialismo Histórico26 páginas
- SEMANA (24 Al 28 de Abril) - RAZ. MATEMATICO 02Aún no hay calificacionesSEMANA (24 Al 28 de Abril) - RAZ. MATEMATICO 023 páginas
- Accidentes de Contenedores Puertos PanameñosAún no hay calificacionesAccidentes de Contenedores Puertos Panameños5 páginas
- 8 Tipos de Escucha para Mejorar Tu ComunicaciónAún no hay calificaciones8 Tipos de Escucha para Mejorar Tu Comunicación6 páginas
- Ley de Ohm Serie Paralelo y Mixto (2020)Aún no hay calificacionesLey de Ohm Serie Paralelo y Mixto (2020)19 páginas
- Informe Practicas Pre Profesionales CertificadoAún no hay calificacionesInforme Practicas Pre Profesionales Certificado30 páginas
