Manual HTML PDF

2009
Aprenda HTML
Crea tus propias pginas web
Este manual contiene ejemplos html, algunos no podrn ser visualizados
en formato PDF, cuando desee visualizar algn ejemplo que no pueda
realizarse en PDF visite el manual online en:
www.dineroen123.com/capacitacion/aprenda-html.html
www.dineroen123.com
Aprenda cmo ganar dinero en Internet
INTRODUCCION AL HTML
El HTML, acrnimo ingls de Hyper Text Markup Language (lenguaje de marcacin de hipertexto), es un
lenguaje informtico diseado para estructurar textos y presentarlos en forma de hipertexto, que es el
formato estndar de las pginas web.
Para realizar tu pgina Web necesitas en principio un editor de textos para escribir los ficheros que la
compondrn.
Simplemente usando el NOTEPAD de Windows puedes realizar tus pginas Web, ya que una pgina Web
es simplemente un texto al que se le aaden diferentes etiquetas con el objeto de indicar diferentes
propiedades. De cualquier manera existen editores especficos para realizar pginas Web. Dichos editores
permiten por medio de mens e iconos incluir etiquetas de HTML sin necesidad de teclearlas.
Es decir, para poner un texto en cursiva en una pgina Web deberamos escribir la instruccin:
<I>Texto</I> En un editor de Html, simplemente marcaramos el texto con el ratn y pulsaramos el icono
de cursiva, el editor de encargara de poner automticamente las etiquetas <I></I> .
Sin embargo, te aconsejamos que uses el Block de Notas. Tendrs absoluto control sobre tu cdigo y sabrs
encontrar mucho ms fcilmente los errores que, todos, cometemos de vez en cuando.
Cuando escribas tu pginas Web te recomendamos que todos los links, nombres de grficos, etc.. los
consignes en letra minscula ya que la mayora de los servidores Web distinguen entre maysculas y
minsculas. Es decir, las etiquetas:
<IMG SRC="dibujo.gif"> <IMG SRC="Dibujo.Gif">
hacen referencia a ficheros distintos, aunque en tu disco duro harn referencia al mismo fichero, ya que
Windows no distingue entre maysculas y minsculas. As que procura escribir correctamente estos
nombres.
Bsicamente, el HTML consta de una serie de rdenes o etiquetas, que indican al navegador que estemos
utilizando, la forma de representar los elementos (texto, grficos, etc...) que contenga el documento. En este
manual nos referiremos a estas rdenes con la palabra "etiqueta".
Las etiquetas de HTML pueden ser de dos tipos, cerradas o abiertas.
Las etiquetas cerradas son aquellas que tienen una palabra clave que indica el principio de la etiqueta y otra
que indica el final. Entre la etiqueta inicial y la final se pueden encontrar otras etiquetas.
Las etiquetas abiertas constan de una sola palabra clave. Para diferenciar las etiquetas del resto del texto del
documento se encierran entre los smbolos < y >. Las etiquetas cerradas incluyen el carcter / antes de la
palabra clave para indicar el final de la misma. Una etiqueta puede contener "parmetros". Estos parmetros
se indican a continuacin de la palabra clave de la etiqueta.
Ejemplos:
etiqueta cerrada <CENTER> Mi pgina Web </CENTER>
etiqueta abierta <HR>
www.dineroen123.com
etiqueta con parmetros <BODY bgcolor="#FFFFFF"> </BODY>

Los ficheros que contienen documentos HTML suelen tener la extensin .html o .htm. En este manual se han
fijado los siguientes criterios a la hora de escribir la sintaxis de las etiquetas de HTML:
1) Las etiquetas se indican en letra mayscula y en negrilla. 2) Los parmetros de las etiquetas se indican
en letra minscula y negrilla. 3) El resto de elementos se indican en letra normal. 4) Las palabras a resaltar
en el texto se indican en cursiva y negrilla.
ESTRUCTURA BASICA DE UN DOCUMENTO HTML
Un documento escrito en HTML contendra bsicamente las siguientes etiquetas:

<HTML> Indica el inicio del documento. <HEAD> Inicio de la cabecera. <TITLE> Inicio del ttulo del
documento. </TITLE> Final del ttulo del documento. </HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento. </BODY> Final del cuerpo del documento. </HTML> Final del
documento.
El documento se hallar situado en algn ordenador al que se pueda acceder a travs de Internet. Para
indicar la situacin del documento en Internet se utiliza la URL (Uniform Resource Locator). La URL es el
camino que ha de seguir nuestro navegador a travs de Internet para acceder a un determinado recurso, bien
sea una pgina Web, un fichero, un grupo de noticias, etc. Es decir, lo que el navegador de pginas Web
hace es acceder a un fichero situado en un ordenador que est conectado a la red Internet. La estructura de
una URL para una pgina Web suele ser del tipo http://dominio/directorio/fichero. El dominio indica el
nombre del ordenador al que accedemos, el directorio es el nombre del directorio de ese ordenador y fichero
el nombre del fichero que contiene la pgina Web escrita en HTML. Por ejemplo:
http://www.dineroen123.com/manual-html/index.hml
Donde .... http:// es el indicador de pagina Web, www.dineroen123.com es el Dominio (nombre) del
ordenador, /manual-html/ es el Directorio dentro del ordenador index.html es el Fichero que contiene la
pgina Web
CABECERA DEL DOCUMENTO
Las etiquetas HEAD, TITLE y las METAS

La etiqueta <HEAD></HEAD> delimita la cabecera del documento. Dentro de la cabecera es importante
definir el ttulo de la pgina por medio de la etiqueta <TITLE></TITLE>. Este ttulo ser el que aparezca en
la barra de nuestro navegador de pginas Web.
Ejemplo:
<TITLE>Pgina del Manual de HTML</TITLE>
www.dineroen123.com
Dentro de la cabecera de nuestro documento podemos incluir otras etiquetas adicionales. La etiqueta
<META> indica al navegador de Internet las palabras clave y contenido de nuestra pgina Web.
Ejemplos:
<META name="Pagina de Jos" content="Mi pgina personal, Msica y Pelculas">
Indica al navegador el nombre de la pgina y sus contenidos principales.
<META name="keywords" content="Jos msica pelculas links Espaa">
Indica al navegador las palabras clave para los buscadores de Internet.
Otro uso de la etiqueta <META> es la de indicar documentos con "refresco automtico". Si se indica una
URL se sustituir el documento por el indicado una vez transcurridos el nmero de segundos especificados.
Si no se incluye ninguna URL se volver a cargar en el navegador el documento en uso transcurridos los
segundos indicados. Esto es til para pginas que cambian de contenido con mucha frecuencia o para re
direccionar a la persona que visita nuestra pgina Web a una nueva direccin donde se encuentra una
versin actualizada de nuestra pgina Web.
Ejemplo:
<META http-equiv="refresh" content="15;URL=http://www.microsoft.com"> Transcurridos 15 segundos
se acceder a la pgina Web de Microsoft.
La etiqueta <BASE> indica la localizacin de los ficheros, grficos, sonidos, etc... a los que se hace
referencia en nuestra pgina Web. Si no se incluye esta etiqueta el navegador entiende que dichos elementos
se encuentran en el mismo lugar donde se encuentra nuestra pgina Web.
Ejemplo:
<BASE href="http://www.dineroen123.com/manual-html/">
CUERPO DEL DOCUMENTO
La etiqueta BODY
La etiqueta <BODY></BODY> indica el inicio y final de nuestra pgina Web. Ser entre el inicio y el final
de esta etiqueta donde pongamos los contenidos de nuestra pgina, textos, grficos, enlaces, etc.... Esta
etiqueta tiene una serie de parmetros opcionales que nos permiten indicar la "apariencia" global del
documento:
background= "nombre de fichero grfico" Indica el nombre de un fichero grfico que servir como "fondo"
de nuestra pgina. Si la imagen no rellena todo el fondo del documento, esta ser reproducida tantas veces
como sea necesario.
bgcolor = "cdigo de color" Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el
parmetro background.
www.dineroen123.com
text = "cdigo de color" Indica un color para el texto que incluyamos en nuestro documento. Por defecto es
negro.
link = "cdigo de color" Indica el color de los textos que dan acceso a un Hiperenlace. Por defecto es azul.
vlink = "cdigo de color" Indica el color de los textos que dan acceso a un Hiperenlace que ya hemos
visitado con nuestro navegador. Por defecto es purpura.
El cdigo de color es un nmero compuesto por tres pares de cifras hexadecimales que indican la proporcin
de los colores "primarios", rojo, verde y azul. El cdigo de color se antecede del smbolo #.
Ejemplos: #000000 - Negro #FF0000 - Rojo #00FF00 - Verde #0000FF - Azul #FFFFFF - Blanco
El primer par de cifras indican la proporcin de color Rojo, el segundo par de cifras la proporcin de color
Verde y las dos ltimas la proporcin 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.
JUEGO DE CARACTERES DEL DOCUMENTO
Para escribir, por ejemplo, letras acentuadas y la

Todos los navegadores de pginas Web actuales soportan todos los caracteres grficos del la especificacin
ISO 8859-1 , que permiten escribir textos en la mayora de los pases occidentales.
De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres ASCII, se han definido
dos formas de representar caracteres especiales usando solamente el cdigo ASCII de 7 bits. Para hacer
referencia a estos caracteres se les asigna un cdigo numrico o un nombre de " entidad ". Asimismo hay
caracteres que se utilizan para las etiquetas de HTML, por ejemplo < y > . Estos caracteres pueden ser
representados por un cdigo numrico o una entidad cuando deseemos que aparezcan en el documento "tal
cual". Las entidades comienzan por el smbolo & (ampersand) y terminan con el smbolo ; (punto y coma).
A continuacin veamos una tabla con las principales entidades:
Caracter Cdigo Entidad
Caracter Cdigo Entidad
!
--
"
"
--
#
--
$
--
%
--
&
&
--
'
'
--
(
--
)
--
*
--
+
--
,
--
-
--
.
--
/
--
:
--
;
--
<
<
--
=
--
>
>
--
?
--
[
--
]
--
_
{
}
@
--
\
--
^
--
--
`
--
{
--
|
--
}
--
~
--

nbsp
¡
iexcl
¢
cent
£
pound
¤
curren
¥
yen
¦
brvbar
§
sect
¨
uml
©
copy
ª
ordf
«
laquo
¬
not

shy
®
reg
¯
macr
°
deg
±
plusmn
²
sup2
³
sup3
´
acute
µ
micro
¶
para
·
middot
¸
cedil
¹
sup1
º
ordm
»
raquo
¼
frac14
½
frac12
¾
frac34
¿
iquest
À
Agrave
Á
Aacute
Â
Acirc
Ã
Atilde
Ä
Auml
Å
Aring
Æ
AElig
Ç
Ccedil
È
Egrave
É
Eacute
Ê
Ecirc
Ë
Euml
Ì
Igrave
Í
Iacute
Î
Icirc
Ï
Iuml
Ð
ETH
Ñ
Ntilde
Ò
Ograve
Ó
Oacute
Ô
Ocirc
Õ
Otilde
Ö
Ouml
×
times
Ø
Oslash
Ù
Ugrave
Ú
Uacute
Û
Ucirc
Ü
Uuml
Ý
Yacute
Þ
THORN
ß
szlig
à
agrave
á
aacute
â
acirc
ã
atilde
ä
auml
å
aring
æ
aelig
ç
ccedil
è
egrave
é
eacute
ê
ecirc
ë
euml
ì
igrave
í
iacute
î
icirc
ï
iuml
ð
eth
ñ
ntilde
ò
ograve
ó
oacute
ô
ocirc
õ
otilde
ö
ouml
÷
divide
ø
oslash
ù
ugrave
ú
uacute
û
ucirc
ü
uuml
ý
yacute
þ
thorn
ÿ
yuml
Por lo tanto la palabra pgina la podramos escribir como:

p gina p á gina p á gina
Es por ello que si deseamos que cualquier visor de pginas Web pueda visualizar las letras acentuadas de
nuestro documento debemos utilizar sus correspondientes entidades o cdigos para representarlas.
ESPACIOS Y SALTOS DE LINEA
Como conseguirlos
En HTML solo se reconoce un espacio entre palabra y palabra, el resto de los espacios sern ignorados por
el navegador.
Ejemplo
Se ver como
Esto es una frase
Esto es una frase
As mismo, tampoco se respetan las tabulaciones, retornos de carro etc... Para ello existen una serie de
etiquetas que indican estos cdigos. La etiqueta <PRE></PRE> obliga al navegador a visualizar el texto tal
y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc..
Ejemplo
Se ver como
<PRE>
Este texto ha sido
preformateado .
Este texto ha sido
preformateado .
</PRE>
Para indicar un salto de linea se utiliza la etiqueta <BR> y para un cambio de prrafo (deja una lnea en
blanco en medio) se utiliza la etiqueta <P> .
Ejemplo
Se ver como
Este texto tiene<BR>saltos de lnea y <P> de prrafo. Este texto tiene saltos de lnea y
de prrafo.
La etiqueta <P> puede usarse tambin como etiqueta "cerrada" <P></P> indicando de esta manera los
atributos de un prrafo en concreto. Cuando se usa de esta manera tiene el parmetro align que indica al
navegador la forma de "justificar" el prrafo. Los valores posibles de este parmetro son LEFT, RIGHT y
CENTER , estando aun en estudio el valor JUSTIFY .
Ejemplo
Se ver como
<P Align=right>Este es un ejemplo de un prrafo de texto

justificado a la derecha.</P>
Este es un ejemplo de prrafo de texto

justificado a la derecha
<P Align=center>Este es un ejemplo de prrafo de texto

centrado.</P>
Este es un ejemplo de prrafo de texto

centrado
La etiqueta <HR> muestra una lnea horizontal de tamao determinable. Tiene los siguientes parmetros
opcionales: align = posicin Alinea la lnea a la izquierda (left), a la derecha (right) o la central (center).
noshade No muestra sombra, evitando el efecto en tres dimensiones. size = numero Indica el grosor de la
linea en pixels. width = num / % Indica el ancho de la lnea en tanto por ciento en funcin del ancho de la
ventana del navegador. Tambin se puede especificar un nmero que indicara el ancho de la lnea en pixels.
Ejemplo:
<HR align= center size= 20 width=50%>
La etiqueta <HR> sin ningn parmetro mostrara una lnea horizontal que ocupara todo el ancho de la
pgina. Estas lneas sencillas son las que ves en este manual para separar las diferentes secciones
CABECERAS
Cmo poner titulares a tu documento Web

En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaos de letra) por medio de las
etiquetas <H1><H2><H3><H4><H5> y <H6> . El texto que escribamos entre el inicio y el fin de la
etiqueta ser el afectado por las cabeceras. La cabecera <H1> ser la que muestre el texto en mayor tamao.
Ejemplo
Se vera como
<H1>Texto de Prueba</H1>
Texto de prueba
Texto de Prueba
<H3>Texto de Prueba</H3> Texto de Prueba

Texto de Prueba
Los textos marcados como "cabeceras" provocan automticamente un retorno de carro sin necesidad de
incluir la etiqueta <BR> . Por ejemplo
Ejemplo
Se vera como
Pgina de Jos
<H3>Pagina de Jos</H3>Esta es mi pgina personal.
Esta es mi pgina personal
ATRIBUTOS DEL TEXTO
Dando formato al texto: negrita, cursiva, subrayado...

Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias etiquetas. Algunas de ellas no son
reconocidas por determinados navegadores de Internet, es por ello que segn el navegador que este vd.
utilizando, ver el resultado correctamente o no.
Atributo
Etiqueta
Ejemplo
Resultado
Negrita
<B></B>
<B> Texto de prueba </B>
Texto de prueba
Cursiva
<I></I>
<I> Texto de prueba </I>
Texto de prueba
Teletype
<TT></TT>
<TT> Texto de prueba </TT>
Texto de prueba
Subrayado <U></U>
<U> Texto de prueba </U>
Texto de prueba
Tachado
<S></S>
<S> Texto de prueba </S>
Texto de prueba
Parpadeo
<BLINK></BLINK>
<BLINK> Texto de prueba </BLINK>
Texto de prueba
<SUP> Texto de prueba </SUP>
Texto de prueba
<SUB> Texto de prueba </SUB>
Texto de prueba
Superindice <SUP></SUP>
Subindice <SUB></SUB>
Centrado
<CENTER></CENTER> <CENTER> Texto de prueba </CENTER> Texto de prueba
Por otro lado la etiqueta <FONT></FONT> nos permite variar el tamao, el color, y el tipo de letra de un
texto determinado. Utiliza para ello los parmetros size , bgcolor y face .
size = valor Da al texto un tamao en puntos determinado. size = + / - valor Da al texto un tamao tantas
veces superior (+) o inferior (-) como indique el valor. color = "cdigo de color" Escribe el texto en el color
cuyo codigo 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 pgina se usara el font predeterminado del navegador.
Ejemplo
Se vera como
<FONT size = +2 color = "#FF0000 face = "Arial" > Texto de prueba </FONT> Texto de prueba
Existen otras etiquetas que realizan las mismas operaciones que las antes vistas en los atributos del texto.
Ejemplo
Se vera como
<FONT size = +2 color = "#FF0000 face = "Arial" > Texto de prueba </FONT> Texto de prueba
www.dineroen123.com
Para incluir comentarios en la pgina Web se utiliza la etiqueta .

Ejemplo:

Los comentarios no sern 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 ms adelante que la etiqueta de comentario nos ser de utilidad para incluir cdigo JavaScript en
nuestra pgina Web.
LISTAS DE ELEMENTOS
Creando listas
Existen tres tipos de listas, numeradas, sin numerar y de definicin. Las listas numeradas representarn los
elementos de la lista numerando cada uno de ellos segn el lugar que ocupan en la lista. Para este tipo de
lista se utiliza la etiqueta <OL></OL> . Cada uno de los elementos de la lista ir precedido de la etiqueta
<LI> . La etiqueta <OL> puede llevar los siguientes parmetros:
start = num Indica que nmero ser el primero de la lista. Si no se indica se entiende que empezar por el
nmero 1. type = tipo Indica el tipo de numeracin utilizada. Si no se indica se entiende que ser una lista
ordenada numricamente. Los tipos posibles son:
1 = Numricamente. (1,2,3,4,... etc.) a = Letras minsculas. (a,b,c,d,... etc.) A = Letras maysculas.
(A,B,C,D,... etc.) i = Nmeros romanos en minsculas. (i.ii,iii,iv,v,... etc.) I = Nmeros romanos en
maysculas. (I,II,III,IV,V,... etc.)
Ejemplo
<OL> <LI> Espaa <LI> Francia <LI> Italia <LI> Portugal </OL>
<OL type = A > <LI> Espaa <LI> Francia <LI> Italia <LI> Portugal </OL>
Resultado
1.
2.
3.
4.
Espaa
Francia
Italia
Portugal
1.
2.
3.
4.
Espaa
Francia
Italia
Portugal
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 etiqueta <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los
elementos. La etiqueta <UL> puede contener el parmetro 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 circulo o un cuadrado.
Ejemplo
Resultado
<UL type = disk > <LI> Espaa <LI> Francia <LI> Italia <LI> Portugal </UL>
<UL type = square > <LI> Espaa <LI> Francia <LI> Italia <LI> Portugal </UL>
Espaa
Francia
Italia
Portugal
Espaa
Francia
Italia
Portugal
Las listas de definicin muestran los elementos tipo Diccionario, o sea, trmino y definicin. Se utiliza para
ellas la etiqueta <DL></DL> . El elemento marcado como trmino se antecede de la etiqueta <DT> , el
marcado como definicin se antecede de la etiqueta <DD> .
Ejemplo
Resultado
<DL> <DT> WWW <DD> Abreviatura de World Wide Web WWW Abreviatura de World Wide Web
<DT> FTP <DD> Abreviatura de File Transfer Protocol
FTP Abreviatura de File Transfer Protocol
<DT> IRC <DD> Abreviatura de Internet Relay Chat </DL> IRC 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 etiqueta <MENU></MENU> y los elementos se anteceden de
<LI> El resultado es una lista sin numerar mas "compacta" es decir, con menos espacio interlineal entre los
elementos. La lista de Directorio utiliza la etiqueta <DIR></DIR> y los elementos se anteceden de <LI> .
Los elementos tienen un lmite 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 <UL> <LI> Yahoo <LI> Ole
<LI> Lycos </UL> <LI> Links <UL> <LI> Microsoft <LI> IBM
</UL> </UL>
Buscadores
o Yahoo
o Ole
o Lycos
Links
o Microsoft
o IBM
IMAGENES
Cmo poner imgenes, grficos, fotos...
Hasta el momento hemos visto como se puede escribir texto en una pgina Web, as como sus posibles
formatos. Para incluir una imagen en nuestra pgina Web utilizaremos la etiqueta <IMG> . Hay dos
formatos de imgenes que todos los navegadores modernos reconocen. Son las imgenes GIF y JPG .
Cualquier otro tipo de fichero grfico o de imagen (BMP, PCX, CDR, etc...) no ser mostrado por el
navegador, a no ser que disponga de un programa externo que permita su visualizacin.
La etiqueta <IMG> tiene varios parmetros:
www.dineroen123.com
src = "imagen" Indica el nombre del fichero grfico a mostrar.

alt = "Texto" Mostrara el texto indicado en el caso de que el navegador utilizado para ver la pgina no sea
capaz de visualizar la imagen.
lowsrc = "imagen" Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga la pagina.
Este parmetro no es reconocido por la totalidad de los navegadores ya que est en estudio su aplicacin, as
que en la mayora de los casos ser ignorado mostrndose 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 imgenes son iguales pero tienen distinta "resolucin" se conseguir un efecto tipo "Fade". Si las
imgenes son de distinto tamao la imagen indicada en src se redimensionara al tamao indicado por la
imagen indicada enlowsrc
align = TOP / MIDDLE / BOTTOM Indica cmo 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 = tamao Indica el tamao 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 = tamao Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamao de la
imagen original.
width = tamao Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamao de la
imagen original.
hspace = margen Indica el numero de espacios horizontales, en puntos, que separarn la imagen del texto
que la siga y la anteceda.
vspace = margen Indica el nmero 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 parmetros ms adelante en este
manual.
Ejemplo
Se vera como
<IMG src= "caution.gif" alt= "Cuidado !!" >

Si el navegador no pudiese visualizar el grfico.....
La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pagina Web. Si este no fuera el caso,
el nombre de la imagen ha de contener la URL donde se encuentre la imagen.
Ejemplo
<IMG src= "http://www.microsoft.com/iexplorer.gif" >
www.dineroen123.com
Veamos varios ejemplos "jugando" con los tamaos de la imagen, as como comprobando la alineacin de
los textos. (Recuerde que en funcin del navegador que vd. utilize pueden verse o no los efectos de cada
parmetro).
Ejemplo
Se vera como
<IMG src= "caution.gif" width= 100 >
<IMG src= "caution.gif" height= 20 >

<IMG src= "caution.gif" align= TOP > Atencion !!!
Atencion !!!
<IMG src= "caution.gif" align= MIDDLE > Atencion !!!
Atencion !!!
<IMG src= "caution.gif" align= BOTTOM > Atencion !!!
Atencion !!!
Tenga en cuenta <IMG src= "caution.gif" hspace= 20 > esta
indicacion.
Tenga en cuenta <IMG src= "caution.gif" vspace= 40 > esta

indicacion.
Tenga en cuenta
indicacion
esta
Tenga en cuenta
indicacion.
esta
ENLACES
Los links, enlaces externos e internos

La caracterstica principal de una pgina Web es que podemos incluir Hiperenlaces. Un Hiperenlace es un
elemento de la pgina que hace que el navegador acceda a otro recurso, otra pgina Web, un archivo, etc...
Para incluir un Hiperenlace se utiliza la etiqueta <A></A> . El texto o imagen que se encuentre dentro de los
lmites de esta etiqueta ser sensible, esto quiere decir que si pulsamos con el ratn sobre l, se realzar la
funcin de hiperenlace indicada por la etiqueta <A></A> . Si el Hiperenlace est indicado por un texto, este
aparecer subrayado y en distinto color, si se trata de una imagen, esta aparecer con un borde rodendola.
Esta etiqueta tiene el parmetro href que indica el lugar a donde nos llevar el Hiperenlace si lo pulsamos.
Ejemplo
Se vera como
<A href = "http://www.microsoft.com/" > Pulse para ir a la pgina de

Microsoft </A>
Pulse para ir a la pgina de

Microsoft
Si situamos el ratn encima de la frase y pulsamos, el navegador acceder a la pgina Web indicada por el
parmetro href , es decir, acceder a la pgina situada en http://www.microsoft.com/
Lo mismo podramos hacer con un grfico.
Ejemplo
Se vera como
Para buscar en Internet : <A href = "http://www.yahoo.com/" > <IMG src =

"yahoo.gif" ></A>
Para buscar en Internet :
Pulsando sobre la imagen se accedera a la pgina situada en http://www.yahoo.com/.

Un Hiperenlace tambin puede llevarnos a una zona de nuestra pgina. Para ello debemos marcar en nuestra
pgina las diferentes secciones en las que se divide. Lo haremos con el parmetro name .
Ejemplo:
<A name = "seccion1" ></A>
Esta instruccin marca el inicio de una seccin dentro de nuestra pgina. La seccin se llamar seccion1 .
Para hacer un enlace a esta seccin dentro de nuestra pgina lo haramos de la siguiente forma:
<A href = "#seccion1" > Primera Parte </A>
O tambin:
<A href = "http://www.mipagina.dom/mipagina.htm#seccion1" > Primera Parte </A>
Un Hiperenlace puede hacerse a cualquier tipo de fichero. Con las etiquetas anteriores hemos visto como
hacer enlaces a pginas Web o secciones dentro de una pgina web, pero podramos hacer un Hiperenlace a
un grupo de noticias, o a otro servicio de Internet.
Ejemplo:
<A href = "news://news.actualidad.es/" > Noticias de actualidad </A>
Asimismo podemos hacer que el Hiperenlace de como resultado el envo de un correo electrnico a una
direccin de correo determinada.
Ejemplo:
<A href = mailto:usuario@email.dom> Envame tus sugerencias </A>
Tambin podemos realizar un Hiperenlace a un fichero cualquiera. En este caso el navegador intentar
"ejecutar" el fichero, y si no puede hacerlo nos preguntar si deseamos grabarlo en nuestro ordenador. Esta
es una forma sencilla de permitir a los visitantes de nuestra pgina copiar ficheros a su ordenador.
<A href = "manual.zip" > Pulsa aqui para llevarte una copia del manual. </A>
TABLAS
Aprende a maquetar la informacin

Las tablas nos permiten representar cualquier elemento de nuestra pgina (texto, listas, imgenes, etc...) en
diferentes filas y columnas separadas entre s. Es una herramienta muy util para "ordenar" contenidos de
distintas partes de nuestra pgina. La tabla se define mediante la etiqueta <TABLE></TABLE>. Los
parmetros opcionales de esta etiqueta son:
border = num. Indica el ancho del borde de la tabla en puntos.
cellspacing = num Indica el espacio en puntos que separa las celdas que estan dentro de la tabla.
cellpadding = num Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta.
width = num % Indica la anchura de la tabla en puntos o en porcentaje en funcin del ancho de la ventana
del navegador. Si no se indica este parmetro, el ancho se adecuar al tamao de los contenidos de las
celdas.
height = num % Indica la altura de la tabla en puntos o en porcentaje en funcin del alto de la ventana del
navegador. Si no se indica este parmetro, la altura se adecuar a la altura de los contenidos de las celdas.
bgcolor = cdigo de color Especifica el color de fondo de toda la Tabla.
Para definir las celdas que componen la tabla se utilizan las etiquetas <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 tamao ligeramente superior al normal. Los parmetros opcionales de ambas etiquetas son:
align = LEFT / CENTER / RIGHT / JUSTIFY Indica cmo 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 alineacin vertical del contenido de la celda, en la parte
superior (TOP), en la inferior (BOTTOM), o en el centro (MIDDLE).
rowspan = num Indica el nmero de filas que ocupar la celda. Por defecto ocupa una sola fila.
colspan = num Indica el nmero 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 funcin del ancho de la
ventana del navegador. Si no se indica este parmetro, el ancho se adecuar al tamao de los contenidos.
Este parmetro solo funciona en los navegadores modernos.
bgcolor = cdigo de color Especifica el color de fondo del elemento de la Tabla. Para indicar que acaba una
fila de celdas se utiliza la etiqueta <TR> . A continuacin mostraremos un ejemplo de una tabla que
www.dineroen123.com
contiene solo texto. Como se indic anteriormente el contenido de las celtas puede ser cualquier elemento de
HTML, un texto, una imagen, un Hiperenlace, una Lista, etc...
Ejemplo
<TABLE border = 4 cellspacing = 4 cellpadding = 4 width = 80% >
<TR> <TH align = center > Buscadores</TH> <TH align = center colspan = 2 > Otros Links</TH>
</TR> <TR> <TD align = LEFT > Yahoo </TD> <TD align = LEFT > Microsoft </TD> <TD align =
LEFT > IBM </TD> </TR> <TR> <TD align = LEFT > Infoseek </TD> <TD align = LEFT > Apple
</TD> <TD align = LEFT > Digital </TD> </TR>
</TABLE>
Se veria como:
Buscadores
Otros Links
Yahoo
Microsoft
IBM
Infoseek
Apple
Digital
Las etiquetas <TD> y <TH> son cerradas segn el estndar de HTML, es decir que un elemento de tabla
<TD> debera cerrarse con un </TD> , sin embargo los navegadores asumen que un elemento de la tabla,
queda automticamente "cerrado" cuando se "abre" el siguiente.
MAPAS
Los mapas permiten insertar varios enlaces en una sola imagen

Un Mapa es una imagen que permite realizar diferentes Hiperenlaces en funcin de la "zona" de la imagen
que se pulse. Las etiquetas para crear mapas son <MAP></MAP> y <AREA> .
La etiqueta <MAP> identifica al mapa y tiene el parmetro name para indicar el nombre del mapa.
La etiqueta <AREA> define las reas sensibles de la imagen. Tiene los siguientes parmetros obligatorios:
shape = "tipo" Indica el tipo de rea a definir.
coords = "coordenadas" Indica las coordenadas de la figura indicada con shape.
href = "URL" Indica la direccin a la que se accede si se pulsa en la zona delimitada por el area indicada.
Los tipos de rea pueden ser los siguientes:
rect rea rectangular. Se deben especificar las coordenadas de la esquina superior izquierda y las de la
esquina inferior derecha.
www.dineroen123.com
poly Polgono. Se deben especificar las coordenadas de todos los vrtices del polgono. El navegador se
encarga de "cerrar" la figura.
circle Crculo. Se debe especificar en primer lugar las coordenadas del centro del crculo y a continuacin el
valor del radio (en puntos).
Si dos reas se superponen, se ejecutar la que se encuentre en primer lugar en la definicin del mapa. Es
importante definir una ltima rea que abarque la totalidad del grfico para direccionar a una URL "por
defecto", con el objeto de contemplar el caso de que no se pulse sobre un area definida.
Veamos un ejemplo completo.
<MAP name = "casa" > <AREA shape = "poly" coords = "2,62,57,62,28,1" href= "tejado.htm" > <AREA
shape = "rect" coords = "21,101,35,138" href= "puerta.htm" > <AREA shape = "rect" coords =
"2,64,57,138" href= "casa.htm" > <AREA shape = "circle" coords = "80,76,21" href= "arbol.htm" >
<AREA shape = "rect" coords = "78,98,85,138" href= "tronco.htm" > <AREA shape = "rect" coords =
"0,0,96,138" href= "dibujo.htm" > </MAP>
Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen es tratada por un
mapa. Para ello escribiramos la siguiente etiqueta:
<IMG src = "grafico.gif" usemap = "#casa" >
Como podemos observar, el proceso ms laborioso es el de determinar las coordenadas. Existen programas
como MAPTHIS que permiten realizar este proceso de una manera sencilla, simplemente definiendo las
zonas con el ratn. El programa MAPTHIS permite abrir una imagen tipo .GIF y marcar las zonas sensibles.
Este programa creara un fichero con extensin .map que contendr en su interior las coordenadas de cada
rea. Con esta informacin nos ser mucho ms fcil escribir nuestro mapa.
FORMULARIOS
Los formularios permiten a los usuarios introducir datos en una pgina web
Los formularios nos permiten dentro de una pgina Web solicitar informacin al visitante y 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
direccin (URL) donde tengamos el programa que pueda procesar las variables. Para poder realizar este
ltimo pas de procesar las variables necesitaremos realizar un programa externo en algn lenguaje de
programacin como PHP, ASP, PERL, C++ o Visual Basic. A este programa externo se le suele llamar CGI
(Common Gateway Interface). La creacin de este tipo de programas sera tema de otro manual diferente,
por lo que aqu veremos cmo se pueden enviar las variables a nuestra direccin de correo electrnico.
La declaracin del formulario se pone entre las etiquetas <FORM></FORM> . En el interior de la
declaracin se indican los elementos (variables) de entrada. La etiqueta <FORM> tiene los parmetros
action y method .
www.dineroen123.com
action = "programa" Indica el programa que va a "tratar" a las variables que se enven con el formulario. En
nuestro caso enviaremos las variables por correo electrnico, con lo que el "programa" ser "mailto:
direccion_de_correo" .
method = POST / GET Indica el mtodo segn el que se transferiran las variables. POST produce la
modificacin 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
pgina de bsqueda en Internet).
Campos de Entrada
Para la introduccin de las variables se utiliza la etiqueta <INPUT> . Esta etiqueta tiene el parmetro 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 parmetros.
type= text
name = campo Indica que el campo a introducir ser un texto. Sus parmetros son :
maxlenght = numero Numero mximo de caracteres a introducir en el campo.
size = numero Tamao en caracteres que se mostrar en pantalla.
value = "texto" Valor inicial del campo. Normalmente ser " ", o sea, vacio.
type = password name = campo
Indica que el campo sera una palabra de paso. Mostrar asteriscos (*) en lugar de las letras escritas. Sus
parmetros 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 sern
indicados por :
value = "valor" checked La casilla aparecera 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 seran indicados por:
value = "valor"
type = image name = campo
El campo contendr el valor de las coordenadas del punto de la imagen pinchado. Debe indicarse la imagen
con el parmetro:
src = "fichero de imagen".
www.dineroen123.com
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 parmetro:
value = "valor"
type = submit
Representa un botn. Al pulsar este botn la informacin de todos los campos se enva al programa indicado
en <FORM> . Tiene el parmetro value = "texto" que indica el texto que aparecer en el botn.
type = reset Representa un botn. Al pulsar este botn se borra el contenido de todos los campos. El
parmetro value = "texto" indica el texto que aparecer en el botn.
Campos de Seleccion
Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger una o varias. Se utiliza
para ellos la etiqueta <SELECT> </SELECT> . Sus parmetros son:
name = campo Nombre del campo
size = num Nmero de opciones visibles. Si se indica 1 se presenta como un men desplegable, se se indica
mas de uno se presenta como una lista con barra de desplazamiento.
multiple Permite seleccionar mas de un valor para el campo.
Las diferentes opciones de la lista se indican con la etiqueta <OPTION> . Esta etiqueta puede incluir el
parametro selected para indicar cul es la opcin por defecto. En caso de que no se especifique, se tomara
por defecto la primera opcin de la lista.
reas de texto.
Representa un campo de texto de mltiples lneas. Normalmente se utiliza para que se incluyan en el
comentario. La etiqueta usada es <TEXTAREA> </TEXTAREA> , y sus parmetros :
name = campo Nombre del campo.
cols = num. Nmero de columnas de texto visibles.
rows = num. Nmero de filas de texto visibles.
wrap = VIRTUAL / PHYSICAL Justifica el texto automticamente en el interior de la caja. La opcin
PHYSICAL enva las lneas de texto separadas en lneas fsicas. La opcin VIRTUAL enva todo el texto
seguido.
Veamos a continuacin un ejemplo de formulario utilizando todas las formas de introduccin de datos.
<FORM action = "mailto:usuario@email.dom" method = post > Tu Nombre: <INPUT type = text name =
nombre size = 30 > Tu Clave: <INPUT type = password name = clave size = 8 > <P> Archivos a Enviar:
www.dineroen123.com
<INPUT type = checkbox name=archivo value = "Manual" > Manual de Html <INPUT type = checkbox
name=archivo value = "Mapthis" > Programa Mapthis <INPUT type = checkbox name=archivo value =
"Help" > Archivo de Ayuda <P> Tu Edad : <INPUT type = radio name=edad value = "-20" > Menos de 20
aos <INPUT type = radio name=edad value = "20-40" > Entre 20 y 40 aos <INPUT type = radio
name=edad value = "+40" > Mas de 40 aos <P> <INPUT type = hidden name=lugar value = " pgina
personal" > Como encontraste mi pgina : <SELECT name=donde> <OPTION> De casualidad
<OPTION> Por el buscador Ole <OPTION> Por el buscador Yahoo <OPTION> Me la comentaron
</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>
Ahora veamos el efecto producido en la pgina Web:
Tu Nombre:
Tu Clave:
Archivos a Enviar:
Tu Edad :
Manual de Html
Menos de 20 aos
Como encontraste mi pgina :
Programa Mapthis
Entre 20 y 40 aos
Archivo de Ayuda
Mas de 40 aos
De casualidad
Tus Comentarios:
Enviar
Borrar
Si rellenas este FORM y pulsas sobre el botn Enviar , (estando conectado a Internet), se generar un
mensaje de correo a la direccin de correo usuario@email.dom. Si pulsas el botn Borrar se borraran los
datos que hayas introducido en el Formulario. El texto que se recibira por correo electrnico sera parecido
a este:
nombre=Pedro+Perez &clave=12345678 &archivo=Manual &archivo=Mapthis &edad=20-40
&lugar=pagina+personal &donde=Por+el+buscador+Ole &comentario%94=
Espero+que+me+mandes+los%0D%0Aficheros+antes+del+martes%0D%0A%0D%0AS aludos.%0D%0A
Podemos observar que en el correo se separan las variables con el smbolo & , los espacios se sustituyen por
el signo + y se representan los cdigos de retorno de carro y avance de lnea del campo de texto con los
caracteres %0D y %0A respectivamente.
Si en vez de enviar estas variables por correo electrnico, fuesen enviadas a un programa (CGI), este
programa podra tratarlas y dar como respuesta una nueva pgina Web.
www.dineroen123.com
Para enviar un formulario por e-mail sin importar el navegador utilizado se ha de utilizar un programa
externo que realice este proceso.
Truco!!!
Se puede utilizar un Formulario como "lanzador" de links, es decir, por medio de una lista desplegable
permitir al usuario escoger un Link y acceder a el. Para ello se utiliza el parametro "OnClick". Ejemplo :
<FORM> <SELECT name = "list" > <OPTION SELECTED value= "http://www.24k-ebusiness.com" >
24k <OPTION value= "http://www.microsoft.com" > Microsoft <OPTION value= "http://www.ibm.com"
> Ibm <OPTION value= "http://www.novell.com" > Novell <OPTION value= "http://www.hp.com" >
Hewlett Packard <OPTION value= "http://www.fujitsu.com" > Fujitsu <OPTION value=
"http://www.3com.com" > 3Com </SELECT> <INPUT TYPE=BUTTON value= "Ir a..." onClick=
"top.location.href=this.form.list.options[this.form.list.selectedIndex].value" > </FORM>
Este sera el efecto producido:
APPLET
Con esta etiqueta es posible incluir aplicaciones Java en una pgina web
La etiqueta <APPLET></APPLET> indica la ejecucin 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 etiquetas 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 etiqueta tiene los siguientes parmetros:
codebase = URL Direccin 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 parametro no es necesario.
code = programa Indica el nombre del programa (applet) Java a ejecutar.
width = num.
height = num. Indican el espacio (ancho y alto) en puntos en el que el programa realizar su funcin.
Dentro de la etiqueta <APPLET> se incluye la etiqueta <PARAM> que enva al programa Java los
parmetros necesarios para su funcionamiento. Esta etiqueta suele tener como mnimo los parmetros :
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 desplaze de un lado a
otro de una zona de la pantalla:
www.dineroen123.com
<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>
MARQUEE
Esta etiqueta permite incluir una marquesina, un texto que se desplaza horizontalmente
La etiqueta <MARQUEE></MARQUEE> crea una marquesina con un texto en su interior que se
desplaza. Funciona nicamente con Ms-Explorer. Sus parmetros 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 = "codigo de color" Indica el color del fondo de la marquesina.
direction = left / right Indica hacia qu lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha
(right)
height = num o % Indica la altura de la marquesina en puntos o porcentaje en funcin de la ventana del
navegador.
width = num o % Indica la anchura de la marquesina en puntos o porcentaje en funcin de la ventana del
navegador.
loop = num / infinite Indica el nmero de veces que se desplazar el texto por la marquesina. Si se indica
infinite, se desplazar indefinidamente.
scrolldelay = num. Indica el nmero de milisegundos que tarda en reescribirse el texto por la marquesina, a
mayor nmero ms lentamente se desplazar el texto.
Veamos un ejemplo de esta etiqueta:
<MARQUEE bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 > Bienvenido a mi pgina personal en
Internet. </MARQUEE>
Si estas utilizando Ms-Explorer veras el efecto producido a continuacin:
www.dineroen123.com
SONIDO DE FONDO
HTML permite incluir sonido o msica de fondo en una pgina web

Nuestra pgina Web puede tener un sonido que se active al entrar en la pgina. Esta caracterstica de Ms
Explorer utiliza la etiqueta <BGSOUND> y tiene los siguientes parmetros:
src = "fichero" Indica el nombre del fichero que contiene el sonido (.waw, .mid). loop = num / infinite
Indica el nmero de veces que se reproducir el sonido. Si se indica infinite, el sonido se reproducir de
forma continua hasta que abandonemos la pgina.
Un ejemplo de esta etiqueta sera:
<BGSOUND src= "yesterday.mid" loop= infinite >
Para utilizar esta funcin en Netscape se utiliza la etiqueta <EMBED> . Esta etiqueta se utiliza realmente
para "incrustar" un objeto en nuestra pgina Web. Dicho objeto puede ser un fichero de sonido, un video, un
grafico BMP, etc... Tiene los siguientes parmetros:
src = "fichero" Indica el nombre del fichero que contiene el sonido (.waw, .mid) o el video (.avi).
autostart = true Incluirlo si deseamos que la reproduccin se inicie inmediatamente.
loop = true Incluirlo si deseamos que la reproduccin no se detenga. (al terminar, vuelve a comenzar
automticamente).
volume = numero Volumen al que se reproducen los ficheros de sonido.
width = numero
height = numero Anchura y Altura de la representacin del objeto. (Si es un sonido no es necesario este
parametro).
controls = smallconsole Visualiza una serie de controles que nos permiten iniciar la reproduccin del
fichero, asi como realizar una pausa o detenerlo.
Un ejemplo de esta etiqueta sera :
<EMBED src= "yesterday.mid" loop= true autostart= true volume= 50 width= 50 height= 15 controls=
smallconsole >
FRAMES
Los frames o marcos permiten dividir una pgina en varias. Scripts - Programas incrustados en HTML
Las frames es una tcnica para subdividir la pantalla del navegador en diferentes ventanas. Cada una de estas
ventanas se podr manipular por separado, permitindonos mostrar en cada una de ellas una pgina Web
diferente. Esto es muy til para, por ejemplo, mostrar permanentemente en una ventana los diferentes
contenidos de nuestra pgina, y en otra ventana mostrar el contenido seleccionado.
www.dineroen123.com
Para definir las diferentes subventanas o frames se utilizan las etiquetas <FRAMESET> </FRAMESET> y
<FRAME> . La etiqueta <FRAMESET> indica cmo se va a dividir la ventana principal. Pueden incluirse
varias etiquetas <FRAMESET> anidadas con el objeto de subdividir una subdivisin. Los parmetros de
<FRAMESET> son rows y cols en funcin de si la divisin de la pantalla se realiza por filas (rows) o
columnas (cols). Los parmetros rows y cols se acompaan de un grupo de nmeros que indican en puntos o
en porcentaje el tamao de cada una de las subventanas. En caso de utilizar rows los tamaos 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 tamaos se aplican de
izquierda a derecha.
Ejemplos
Resultado
<FRAMESET rows = "25%,50%,25%">
Crea tres subventanas horizontales, la primera ocupar un 20%

de la ventana principal, la segunda un 50% y la tercera un 25%.
<FRAMESET cols = "120,*,100">
Crea tres subventanas verticales, la primera y la tercera tendrn

un "ancho" fijo de 120 y 100 puntos respectivamente. La
segunda ocupar el resto de la ventana principal (*).
<FRAMESET cols = "15%,*">

<FRAMESET rows = 20%,*">
En este caso "anidamos" dos directivas. La primera divide la

ventana principal en dos subventanas verticales, la primera
ocupa un 15% de la ventana principal y la segunda el resto. La
segunda directiva vuelve a subdividir la primera subventana
creada anteriormente, pero esta vez en dos subventanas
horizontales, la superior ocupar un 20% de la subventana, y la
inferior el resto.
La etiqueta <FRAME> indica las propiedades de cada subventana. Es necesario indicar una etiqueta
<FRAME> para cada subventana creada. Los parmetros de <FRAME> son :
name = "nombre" Indica el nombre por el que nos referiremos a esa subventana.
src = "URL" La ventana mostrar en principio el contenido del documento HTML que se indique.
marginwidth = num. Indica el margen izquierdo y derecho de la subventana en puntos.
marginheight = num Indica el margen superior e inferior de la subventana en puntos.
scrolling = "yes / no / auto" Indica si se aplica una barra de desplazamiento a la subventana en el caso de que
la pgina que se cargue en ella no quepa en los lmites de la subventana. el valor " yes " muestra siempre la
barra de desplazamiento, " no " no la muestra nunca (la zona de la pgina que no quepa en la subventana no
la veremos), y " auto " la muestra solo en caso de que sea necesario para poder ver la pgina.
noresize Si se indica este parmetro, el usuario no podr "redimensionar" las subventanas con el navegador.
Un usuario que este viendo una pgina con frames puede redimensionarlas seleccionando un borde de la
subventana con el cursor y desplazndolo.
border = num. Indica el "borde" que separara esta frame de la siguiente. Si se indica cero (0) no se mostrara
borde entre las frames, consiguiendo un efecto muy elegante, siempre y cuando el "fondo" de todas las
frames sea el mismo, o sean colores solidos.
www.dineroen123.com
Los navegadores que no soportan la caracterstica de subventanas, no mostrarn nada de lo indicado con
estas etiquetas. Es por ello que existe una etiqueta llamada <NOFRAMES> </NOFRAMES> . Todo los
indicado entre esta etiqueta ser lo que muestren los navegadores sin capacidad para visualizar Frames. Los
navegadores que soporten Frames obviaran las etiquetas 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
seccin del manual que haya selecionado. En otro caso simplemente ver la seccin del manual.
La definicin de las Frames debe ir antes de la definicin del cuerpo de documento ( <BODY> ).
Veamos un ejemplo completo de Frames con comentarios:
<HTML> <HEAD> <TITLE> Pagina con Frames </TITLE> </HEAD>
<FRAMESET cols = "15%,*" > 
<FRAMESET rows = "35%,*" > 
<FRAME name = "upd" src = "update.htm" scrolling = "auto" > 
<FRAME name = "menu" src = "menu1.htm" scrolling = "auto" > 
</FRAMESET> 
<FRAME name = "home" src = "home.htm" scrolling = "auto" > 
<NOFRAMES>  <BODY>
SU navegador NO MUESTRA FRAMES. Pulse <A href= "home.htm" > AQUI </A> para ir a la pgina sin
Frames. </BODY> </NOFRAMES>
</FRAMESET> 
</HTML>
Al usar Frames, nos encontramos con un problema. Cuando queramos mostrar una pgina 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 aade un
nuevo parmetro a la etiqueta <A href= > </A> . Este parmetro 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).
www.dineroen123.com
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 ningn <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
Resultados
Muestra la pagina de Microsoft en una nueva
<A href= "http://www.microsoft.com/" target = "_blank">
copia del visor
Muestra la pagina de Ibm en la subventanna
<A href= "http://www.ibm.com/" target = "home">
llamada "home"
Muestra la pagina del buscador Yahoo a
<A href= "http://www.yahoo.com/" target = "_top">
pantalla completa
SCRIPTS
Un Script es un programa escrito en un lenguaje distinto al HTML que se puede incluir en una pgina Web
"tal cual". Para incluir estos programas en una pgina Web se utiliza la etiqueta <SCRIPT> </SCRIPT> .
Esta etiqueta tiene el parmetro language para indicar el lenguaje de programacin utilizado para el Script.
El cdigo del programa debe "ocultarse" con las etiquetas de comentario de HTML  con el objeto de
que no sean mostradas por los navegadores que no reconocen la etiqueta <SCRIPT> . Los scripts ms
usados suelen estar escritos en lenguaje JavaScript.
La inclusin de un Script en una pgina Web se hara de la siguiente forma:
<SCRIPT language = "JavaScript" > < !-- instrucciones del programa ...... --> </SCRIPT>
Esperamos le haya sido til.

Visite el rea de capacitacin para otros cursos y manuales gratis

Manual HTML PDF

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual HTML PDF

Cargado por

Copyright:

Formatos disponibles

2009

etiqueta con parmetros <BODY bgcolor="#FFFFFF"> </BODY>

ESTRUCTURA BASICA DE UN DOCUMENTO HTML

Un documento escrito en HTML contendra bsicamente las siguientes etiquetas:

CABECERA DEL DOCUMENTO

Las etiquetas HEAD, TITLE y las METAS

CUERPO DEL DOCUMENTO

JUEGO DE CARACTERES DEL DOCUMENTO

Para escribir, por ejemplo, letras acentuadas y la

Caracter Cdigo Entidad

Por lo tanto la palabra pgina la podramos escribir como:

ESPACIOS Y SALTOS DE LINEA

Esto es una frase

Esto es una frase

Este texto ha sido

<P Align=right>Este es un ejemplo de un prrafo de texto

Este es un ejemplo de prrafo de texto

<P Align=center>Este es un ejemplo de prrafo de texto

Este es un ejemplo de prrafo de texto

Cmo poner titulares a tu documento Web

<H3>Texto de Prueba</H3> Texto de Prueba

ATRIBUTOS DEL TEXTO

Dando formato al texto: negrita, cursiva, subrayado...

<B> Texto de prueba </B>

<I> Texto de prueba </I>

<TT> Texto de prueba </TT>

<U> Texto de prueba </U>

<S> Texto de prueba </S>

<BLINK> Texto de prueba </BLINK>

<SUP> Texto de prueba </SUP>

<SUB> Texto de prueba </SUB>

<CENTER></CENTER> <CENTER> Texto de prueba </CENTER> Texto de prueba

Para incluir comentarios en la pgina Web se utiliza la etiqueta .

src = "imagen" Indica el nombre del fichero grfico a mostrar.

<IMG src= "caution.gif" alt= "Cuidado !!" >

<IMG src= "caution.gif" width= 100 >

<IMG src= "caution.gif" height= 20 >

Tenga en cuenta <IMG src= "caution.gif" vspace= 40 > esta

Los links, enlaces externos e internos

<A href = "http://www.microsoft.com/" > Pulse para ir a la pgina de

Pulse para ir a la pgina de

Para buscar en Internet : <A href = "http://www.yahoo.com/" > <IMG src =

Para buscar en Internet :

Pulsando sobre la imagen se accedera a la pgina situada en http://www.yahoo.com/.

Aprende a maquetar la informacin

Los mapas permiten insertar varios enlaces en una sola imagen

type = hidden name = campo

Como encontraste mi pgina :

<APPLET codebase= "http://www.ucm.es/java" code= "Laufschrift.class" width = 350 height = 25 >

HTML permite incluir sonido o msica de fondo en una pgina web

<FRAMESET rows = "25%,50%,25%">

Crea tres subventanas horizontales, la primera ocupar un 20%

<FRAMESET cols = "120,*,100">

Crea tres subventanas verticales, la primera y la tercera tendrn

<FRAMESET cols = "15%,*">

En este caso "anidamos" dos directivas. La primera divide la

target = "_self" Se muestra el Hyperenlace en la subventana activa.

Esperamos le haya sido til.

También podría gustarte