Tutorial HTML

Tutorial HTML
La regla general dice que puede aprenderse cómo hacer una

página web mirando el código creado por otros pero, lo normal es
que si seleccionamosVer Código Fuente en el navegador, nos
encontraremos frente a frente con una madeja muy difícil de
desatar y abandonaremos la idea diciéndonos: esto es imposible.
Este tutorial, curso o como quiera llamarse tiene sólo un fin,
aprender a hacer páginas web y a su vez, demostrar que es mucho
más fácil de lo que parece.
A modo de introducción
La web no es más que un montón de documentos enlazados unos con otros que, para
ser interpretados deben estar codificados de cierta manera, utilizando un lenguaje
que todos los navegadores entiendan. Este lenguaje es llamado HTML (HyperText
Markup Language).
Para comenzar a hacer una página web, sólo son necesarios dos elementos:
1. Un procesador de texto cualquiera como el Block de Notas de Windows o
cualquier otro que permita guardar los archivos como 'Sólo Texto', es decir, sin
formatos de ningún tipo.
2. Un navegador.
El hecho que no sea necesario ningún programa especial es una de las características
más importantes para el programador. Esto permite crear páginas web con cualquier
PC y sistema operativo ya que: el código HTML sólo es texto.
Es cierto que existen programas que ayudan a escribir documentos HTML pero, es
conveniente comenzar a hacerlo de una manera manual, para comprender bien la
estructura del lenguaje. Una vez que hayamos pasado esta etapa básica, entonces,
recién entonces, podemos utilizar herramientas simples como HTMLPad,
EZPad,WeBuilder, Amaya o NVU.
Personalmente, no recomiendo utilizar los programas de tipo WYSIWYG (What You See
Is What You Get, en inglés, "lo que ves es lo que obtienes") como
FrontPage,Dreamweaver, GoLive si no se tienen claros los conceptos del lenguaje ya
que algunas de las características avanzadas de estas herramientas pueden distraernos
o confundirnos. Generalmente, agregan códigos automáticos que terminan por
ensuciar lo que hacemos, nos impiden analizarlo o nos dificulta encontrar problemas.
Jamás deben usarse procesadores de texto como Word u OpenOffice ya que lo único
que se necesita es un archivo en texto plano.
Una vez que se escriben los códigos necesarios con un simple procesador de textos, el
archivo se guarda con cualquier nombre y con extensión .html o .htm (en MS-DOS o
cualquier sistema que sólo acepte tres letras en la extensión) y luego, se lo abre con
el navegador.
Principios elementales
El principio esencial del lenguaje HTML (HyperText Markup Language) es el
uso de las etiquetas (tags) que tienen la siguiente estructura:
<ETIQUETA> inicio
[.......]
</ETIQUETA> cierre
Una etiqueta es una palabra (en mayúscula o minúscula), delimitada por los
signos <(mayor que) y > (menor que).
Por regla general, las etiquetas forman bloques que se inician con una
instrucción y finalizan con la misma instrucción a la que se le antepone una
barra inclinada (/):
Cada elemento se divide en tres partes: una etiqueta inicial, el contenido, y
una etiqueta final. Todo lo que hay entre la etiqueta de apertura y la etiqueta
de cierre se ve afectado por esa etiqueta:
<ETIQUETA>
[... contenido ...]
</ETIQUETA>
A veces, es necesario agregar datos adicionales a una instrucción, en ese caso,

la etiqueta de apertura será la que contendrá esos parámetros
llamados atributos:
<ETIQUETA atributo1="valor" atributo2="valor">
... contenido ...
</ETIQUETA>
Eventualmente, ciertas etiquetas no forman bloques ya que son

autosuficientes, en ese caso, la barra inclinada se agrega al final de esa única
etiqueta separada de esta por un espacio en blanco:
<ETIQUETA />
Este concepto de etiquetas de apertura y cierre es la clave para entender el

lenguaje. Como cualquier elemento puede contener a otros elementos, las
etiquetas deben abrirse y cerrarse en el mismo orden en que fueron creadas.
Una página web está compuesta por elementos (objetos) metidos unos dentro
de otros (anidados). El elemento principal, el que contiene a todos los demás
es el documento HTML.
Toda página web está comprendida entre dos etiquetas: <HTML> y </HTML>.
A su vez, el elemento HTML contiene otros dos, los elementos HEAD y BODY.
Esas son las principales zonas de cualquier página web, el encabezamiento,
comprendido entre las etiquetas <HEAD> y </HEAD> y el cuerpo,
comprendido entre las etiquetas <BODY> y</BODY>.
Dentro del encabezado se coloca información genérica que afecta a toda la
página pero que no son visibles. El elemento principal es el título,
comprendido entre las etiquetas <TITLE> y </TITLE>. El título es un texto
breve que describe el contenido y es el mismo que vemos cuando agregamos
una página a los favoritos en Internet Explorer o a los marcadores en Firefox.
<TITLE> Título de la página </TITLE>
Aunque no es muy utilizado, dentro del encabezado también se puede incluir
la etiqueta <BASE>.
En un documento HTML, los vínculos y los recursos externos (imágenes, hojas
de estilo, etc) se indican con una URL. Cuando esas URL son relativas, se
completan de acuerdo a una URL base. BASE permite especificar esa URL
base.
Esta etiqueta debe aparecer antes que cualquier elemento que haga
referencia a una fuente externa.
Por ejemplo, si se declarase esto:
<BASE href="http://bolsanegra.net/pages/pagina1.html">
y más tarde se hiciese una referencia a una URL relativa como esta:
<A href="../imagenes/ejemplo.gif">VINCULO</A>
la URL apuntaría a:
http://bolsanegra.net/imagenes/ejemplo.gif
Dentro del BODY se ubica todo lo que aparecerá en la pantalla (texto,

imágenes, etc.)
De tal manera la estructura básica de cualquier página sería algo así:
<HTML>
<HEAD>
<TITLE>[Aquí va el título]</TITLE>
[Aquí van las etiquetas del encabezado (no son visibles)]
</HEAD>
<BODY>
[Aquí van las etiquetas del cuerpo (lo que muestra la página)]
</BODY>
</HTML>
Las etiquetas pueden estar escritas en mayúsculas o minúsculas de manera

indistinta y suele utilizarse sangría o tabulación entre los diferentes niveles de
anidamiento para facilitar la lectura del código.
Los párrafos
Ahora que conocemos las estructura básica de una página, podemos empezar
a agregarle algo de contenido.
Una de las características principales de una página web es que, cuando
ingresamos un texto, este se va a “acomodar” al tamaño de la ventana sin que
tengamos que agregar ninguna instrucción o carácter especial. Por el
contrario, si queremos separar el texto en distintos párrafos debemos
indicarlo y para eso usamos la etiqueta <P> </P>:
[Este es un párrafo.]
<P>
[Y este es otro, entre ambos se verá una línea en blanco.]
</P>
Los navegadores no reconocen ni saltos de línea ni tabulaciones ni espacios en

blanco extras a menos que se lo indiquemos de manera específica, de tal
manera que, un código escrito así:
[Esto lo escribo en una línea. ]

[Y esto lo escribo en otra.]
[Y aquí dejo 10 espacios en blanco.]
Se verá así:
Esto lo escribo en una línea. Y esto lo escribo en otra. Y aquí dejo
10 espacios en blanco.
El atributo align en la etiqueta P permite especificar la alineación del párrafo.
Puede tener tres valores: “center“, “left” y “right” (centrado, a la izquierda
y a la derecha):
<P ALIGN="left">
[a la izquierda (es el valor por defecto)]

</P>
<P ALIGN="center">
[en el centro]
</P>
<P ALIGN="right">
[a la derecha]
</P>
a la izquierda (es el valor por defecto)
en el centro
a la derecha
De manera elemental podemos dar formato a los textos utilizando etiquetas

especiales: los encabezados:
<H1> ... </H1>
<H2> ... </H2>,
<H3> ... </H3>
<H4> ... </H4>

<H5> ... </H5>
<H6> ... </H6>
Cada una de esta etiquetas mostrará el texto comprendido entre ellas son un
tamaño distinto donde, por defecto, H1 será el mayor y H6 el menor.
<H1>
<H2> <H3>
<H4> <H5> <H6>
Otra etiqueta elemental, <CENTER> </CENTER>, permite central los textos (y
cualquier otra cosa comprendida entre ellas) en la pantalla:
<CENTER>
[Este texto estará centrado]

</CENTER>
[Este texto estará NO estará centrado]
Los separadores se consiguen con la etiqueta <HR / > (horizontal rules) y esta
es una de las pocas etiquetas que no posee cierre. Con ella se obtiene una
raya horizontal tan ancha como la pantalla, y con la apariencia de estar
embutida sobre el fondo:
<HR />
[Este texto está comprendido entres dos líneas horizontales]

<HR />
Esta etiqueta tiene los siguientes atributos:
align=left|center|
alineación
right
(sin sombra) algunos navegadores muestran las líneas horizontales con

noshade
un efecto tridimensional con sombra y este atributo elimina el efecto
size=valor grosor de la línea em pixeles
width=valor ancho de la línea
Aunque los navegadores no lo requieran, es conveniente que nos

acostumbremos a agregarle la barra de cierre.
IMPORTANTE: cuidar el orden en que se colocan las etiquetas.

Como una etiqueta puede estar incluida (anidada) dentro de otra, debe
respetarse el orden de inicio y de cierre, esto es, la jerarquía. Y siempre debe
cerrarse la última etiqueta abierta.
Este código es incorrecto
<CENTER>
<P>
[un texto centrado en la pantalla.]

</CENTER>
</P>
La forma correcta de escribirlo sería esta:
<CENTER>
<P>
[un texto centrado en la pantalla.]

</P>
</CENTER>
Aunque las indentaciones del texto no son necesarias, es conveniente

utilizarlas para visualizar los elementos y comprender donde comienzan y
donde terminan.
EJEMPLO PRACTICO:
En un procesador de textos cualquiera escribimos lo siguiente:
<HTML>
<HEAD>
<TITLE>La primera pagina</TITLE>
</HEAD>
<BODY>
<H1>
<CENTER>Este es el título</CENTER>
</H1>
<HR />
Y aquí se coloca un texto cualquiera.
Aunque lo escribamos en líneas separadas, los navegadores
mostrarán un sólo párrafo. Para separar un texto de otro,
debemos utilizar la etiqueta P:
<P>
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh euismod
tincidunt ut laoreet
dolore magna aliquam erat volutpat.
</P>
</BODY>
</HTML>
Ahora, guardamos el archivo con el nombre que se nos ocurra pero con
extensión HTM o HTML y lo abrimos con el navegador.
Textos, textos, textos

A veces es necesario escribir comentarios o aclaraciones en el documento, de
tal manera de recordar lo que hicimos pero no queremos que se vean en
pantalla. Esto se consigue encerrándolos entre los símbolos: <!−− y −−> Por
ejemplo:


Cuando queremos poner un texto sin ninguna característica especial,
simplemente lo escribimos. La separación entre párrafos (dejando una línea
en blanco) la conseguimos con la etiqueta <P>.
Si queremos separar los párrafos (o cualquier otro elemento), pero sin dejar
una línea en blanco, debemos usar la etiqueta <BR /> (break, o romper). Esta
etiqueta tampoco tiene etiqueta de cierre así que le agregamos la barra final.
Si queremos obtener múltiples líneas en blanco no es suficiente repetir la
etiqueta<P>, hay que combinarla con <BR />. Por ejemplo, si queremos
obtener cuatro líneas:
<BR /> <P> </P>
<BR /> <P> </P>
<BR /> <P> </P>
<BR /> <P> </P>
Al escribir el texto, si ponemos más de un espacio en blanco entre dos

palabras el navegador sólo reconocerá uno de ellos. Debemos indicárselo en
forma explícita utilizando el código (non-breaking space).
Las etiquetas <B> </B> (bold) permiten destacar alguna parte del texto. Las
etiquetas<I> </I> (italic) muestran el texto en cursiva.
Lo mismo puede hacerse con otras dos etiquetas alternativas, <STRONG>
</STRONG>que ponen el texto en negrita y <EM> </EM> en cursiva.
en negrita utilizando la etiqueta B
y en negrita utilizando la etiqueta STRONG
en itálica utilizando la etiqueta I
y en itálica utilizando la etiqueta EM

Hay más etiquetas simples para dar formato, <STRIKE> </STRIKE> o <S>
</S>muestran el texto tachado, <U> </U> lo muestra subrayado:
texto TACHADO con la etiqueta S
y texto TACHADO con la etiqueta STRIKE
texto subrayado con la etiqueta U

Las etiquetas de formato pueden aplicarse individualmente o combinarse
<STRONG>
<EM>
<CENTER>
texto en negrita, itálica y centrado
</CENTER>
texto en negrita, itálica y no centrado
</EM>
texto en negrita
</STRONG>
En matemáticas se utilizan índices y subíndices, estos se consiguen escrbir

con las etiquetas <SUP> </SUP> y <SUB> </SUB> respectivamente. Por
ejemplo, si quisiéramos escribir m2 para indicar metros cuadrados:
m<sup>2</sup>
Para escribir Vx:
V<sub>x</sub>
Para controlar cambiar el tamaño de las fuentes hay dos etiquetas de uso
frecuente que permiten aumentarlo o disminuirlo, son <BIG>
</BIG> y <SMALL> </SMALL>:
Tamaño de texto normal: ABCDEFG abcdefg 01234567
Utilizando BIG: ABCDEFG abcdefg 01234567
Utilizando SMALL: ABCDEFG abcdefg 01234567
Anidando estas etiquetas, el efecto se va acumulado ya que toma como

referencia el tamaño del texto anterior:
[texto normal]
<BIG>
texto grande
<BIG>
aún más grande
<BIG>
mucho más grande
</BIG>
</BIG>
</BIG>
[texto normal]
texto grande
aún más grande
mucho más grande

Otra etiqueta que permite que formateemos es <PRE> </PRE>. El texto que
se encuentre entre ella estará preformateado, por defecto, aparecerá con
una fuente de espaciado fijo (tipo Courier) pero lo más importante es que se
respetarán los espacios en blanco y saltos de línea, tal y como estaban en el
documento HTML.
<PRE>
este texto
preformateado
se mostrará
tal y como lo escribamos
</PRE>
Se verá así:
este texto
preformateado con PRE

se mostrará
Aunque no es muy utilizada, la etiqueta <TT> </TT> (typewriter) muestra el

texto de un tamaño levemente menor y con la apariencia de haber sido escrito
con unamáquina de escribir . La diferencia con la anterior es que no
preformatea el texto, sino que únicamente cambia su apariencia.
este texto
preformateado con TT
no se mostrará
La etiqueta <BLOCKQUOTE> </BLOCKQUOTE> generalmente la utilizamos
para destacar una cita textual dentro del texto general. Este párrafo está
escrito entre ambas etiquetas.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Para terminar, hay algunas etiquetas especiales que no se utilizan para dar
formato sino para identificar el tipo de texto.
CITE se utiliza cuando el texto es una cita o una referencia, DFN indica que se
define el término y VAR que el texto es una variable o un argumento, por
defecto, se muestran en itálica:
Utilizando la etiqueta CITE para mostrar una cita.
Utilizando la etiqueta DFN para mostrar una definición.
Utilizando la etiqueta VAR para mostrar una variable.

ABBR se usa para indicar que el contenido es una abreviatura, ACRONYM para
indicar que es un acrónimo y Q para citas cortas. Ninguna de las dos posee un
formato predefinido:
Mediante ABBR para indicar que el contenido es una abreviatura.
Utilizamos ACRONYM para indicar que es un acrónimo.
Utilizamos Q para mostrar una cita corta.

Con CODE designamos un fragmento de código, con KBD indicamos que el
texto debería ser introducido por el usuario y con SAMP que estamos
mostrando la salida de un programa, script, etc. en ambos casos, el formato
de salida es similar a TT:
Con la etiqueta CODE indicamos que el texto es un código.
Con la etiqueta KBD indicamos que el texto debe ser introducido por
el usuario.
Con la etiqueta SAMP mostramos la salida de un programa, script, etc.

INS se usa para indicar que un texto se ha insertado en el código y DEL para
indicar que un texto se ha borrado:
Un texto dentro de la etiqueta INS
Un texto dentro de la etiqueta DEL
La mayoría de estas etiquetas se muestran de manera diferente según el

navegador. Esto se debe a que, en general, al no ser de uso común, no se les
asigna un formato y utilizan el predeterminado.
Listas
Las listas nos permiten agregar información de manera más clara. Hay tres
tipos diferentes: las listas no-ordenadas (no numeradas), las listas ordenadas
(numeradas) y las listas de definiciones.
Las listas no-ordenadas (unordered lists) sirven para mostrar cosas que no
necesitan ir precedidas por un número. La etiqueta a utilizar es <UL>
</UL> y, cada item en la lista se agrega con la etiqueta <LI> </LI>:
<UL>
<LI> Un item </LI>
<LI> Otro item </LI>
<LI> Cualquier item </LI>
<LI> Ultimo item </LI>
</UL>
Las listas ordenadas (ordered lists) sirven para mostrar datos en un orden
determinado. Los items se agregan igual que en el caso anterior, la diferencia
es que utilizamos la etiqueta <OL> </OL> para enmarcar todo. El resultado
será el mismo pero cada item estará precedido por un número correlativo:
<OL>
<LI> Un item </LI>
<LI> Otro item </LI>
<LI> Cualquier item </LI>
<LI> Ultimo item </LI>
</OL>
Las listas de definición se utilizan para glosarios. Toda la lista debe ir entre
las etiquetas <DL> </DL> (definition list). A diferencia de las anteriores, cada
renglónn tiene dos partes: el nombre de la cosa a definir (definition term) se
coloca en la etiqueta <DT> </DT> y la definición en si misma (definition
definition) en la etiqueta<DD> </DD>:
<DL>
<DT> Palabra 1 </DT>
<DD> La definición de la palabra 1 </DD>
<DT> Palabra 2 </DT>
<DD> La definición de la palabra 2 </DD>
</DL>
Este es un ejemplo de las tres clase de listas:
LISTA NO-ORDENADA
• Un item
• Otra otro item
• Cualquier item
• Ultimo item
LISTA ORDENADA
1.Un item
2.Otra otro item
3.Cualquier item
4.Ultimo item
LISTA DE DEFINICIONES
Palabra 1
La definición de la palabra 1
Palabra 2
La definición de la palabra 2
Al igual que casi todas las etiquetas HTML, las listas pueden anidarse, es
decir, ponerse una dentro de otra:
<UL>
<LI> Animales
<UL>
<LI> Mamíferos
<UL>
<LI> Vaca </LI>
<LI> Leon </LI>
</UL>
</LI>
</UL>
<UL>
<LI> Reptiles
<UL>
<LI> Sapo </LI>
<LI> Serpiente </LI>
</UL>
</LI>
</UL>
</LI>
<LI> Vegetales
<UL>
<LI> Cebolla </LI>
<LI> Pino </LI>
</UL>
</LI>
</UL>
Que se vería así:

• Animales
o Mamíferos
 Vaca
 Leon
o Reptiles
 Sapo
 Serpiente
• Vegetales
o Cebolla
o Pino
Las etiquetas UL, OL y DL forman BLOQUES, visualmente, crean un salto de

línea tal y como lo hace la etiqueta P.
Aunque hay dos etiquetas más para definir listas, DIR y MENU, ya no se
utilizan porque los navegadores las muestran como si fuesen listas no-
ordenadas (UL). DIR fue originalmente creado para crear listas multicolumna
y MENU para columnas simples.
Fuentes
Hay dos etiquetas que pueden utilizarse para manejar las fuentes pero ambos
están en desuso. El elemento <FONT> </FONT> cambia el tamaño, tipo y
color de la fuente, y BASEFONT establece el tamaño base de fuente (los
cambios producidos con FONTson relativos a este tamaño base , si no se
indica, el tamaño base es 3).
En ambos casos, los atributos son:
color=color especifica el color de los caracteres
face=fuente la lista de nombres de fuentes separados por comas
size=valor indica el tamaño (entero entre 1 y 7 o relativo)

<font face="Arial" color="red" size="1">
[texto]
</font>
<br />
<font face="Tahoma" color="green" size="+2">
[texto]
</font>
<br />
<font face="Verdana,Arial,Tahoma" color="blue" size="-2">
[texto]
</font>
<br />
<font size="1">Valor 1</font>
<br />
Un ejemplo utilizando la etiqueta

FONT indicando un color
Otro ejemplo utilizando FONT
Otro color y más chico
Los diferentes tamaños que se pueden indicar se size:
Valor 1 Valor 2 Valor 3
Valor 4 Valor 5
Valor 6 Valor 7
La etiqueta BDO está relacionado con la direccionalidad del texto (de
izquierda a derecha o de derecha a izquierda). Su uso es muy limitado.
Existen algunas limitaciones para escribir un texto. Una de ellas es a que las
etiquetas se escriben entre los símbolos < y >, por lo tanto, si se escriben
estos caracteres como parte del texto, el navegador podría interpretarlos
como el comienzo o final de una etiqueta, en vez de un carácter más del
texto.
Para resolver este problema, existen unos códigos especiales para poder
escribir estos caracteres y otros relacionados con las etiquetas.
< para < (less than, menor que)
> para > (greater than, mayor que)
& para & (ampersand)
" para " (double quotation)
Estos códigos empiezan siempre con el signo & y acaban siempre con ; (punto
y coma).
De una manera similar, existen códigos para escribir letras específicas de
distintos idiomas. En castellano, los códigos de las vocales acentuadas se
forman comenzando con &, seguido de la vocal y por la
palabra acute (aguda). Como todos los demás, siempre terminan con el
signo ; (punto y coma):
á para la á
é para la é
í para la í
ó para la ó
ú para la ú
Á para la Á
É para la É
Í para la Í
Ó para la Ó
Ú para la Ú
Estos son otros códigos básicos del idioma español:
ñ para la ñ
Ñ para la Ñ
ü para la ü
Ü para la Ü
¿ para ¿
¡ para ¡
¿Esto significa que debemos reemplazar esos carcteres por su correspondiente

símbolo? No, es muy posible que el navegador muestre los textos
correctactamente, pero nunca podremos estar seguros que le ocurra lo mismo
a todos los que accedan a nuestras páginas.
En la práctica, el problema no es tan grave, pues los programas editores de
HTML suelen tener la posibilidad de escribir los códigos automáticamente. Lo
mismo hacen los servicios que ofrecen blogs o páginas personales.
Vínculos
Una de las características destacables de una página web es la posibilidad de
unir distintos documentos por medio de hipertexto o hipervínculos. Eso que
comunmente llamamos vínculos o enlaces.
Estos enlaces o hipertexto son zonas (generalmente palabras o frases)
especiales que permite pulsar sobre ellas para ir a otras páginas.
En general, los enlaces tienen la siguiente estructura:
<A HREF="URL"> TextoVisible </A>
donde URL es el destino del enlace (siempre entre comillas) y TextoVisible es

el textoindicativo del enlace (generalmente tiene un color que lo diferencia
y, por defecto, está subrayado)
Podemos distinguir tres tipos de enlaces:
1. Enlaces dentro de la misma página
2. Enlaces con otra página de nuestro sitio
3. Enlaces con una página externa
1. ENLACES DENTRO DE LA MISMA PÁGINA:
A veces, en el caso de páginas extensas, es interesante dar un “salto” desde
una parte a otra dentro de la misma. Para conseguir esto, debemos identificar
el destino, “marcándolo” con una etiqueta:
<A NAME="UnaMarca"> </A>
luego, desde cualquier lugar de la misma página, podemos crear el enlace:
<A HREF="#UnaMarca"> Texto del enlace </A>
2. ENLACES CON OTRA PÁGINA DENTRO DE NUESTRO SITIO:

Lo más frecuente es que tengamos varias páginas que deberían enlazarse
entre si. Supongamos que queremos colocar un vínculo entre la página
principal con una página cualquiera, por ejemplo, PAGINA2.html.
<A HREF="PAGINA2.html"> Ir a la Página 2 </A>
Combinando este método con el anterior, podemos dirigirnos a un sitio

concreto de otra página. Para eso, en la página destino tenemos que colocar
una marca y el enlace sería así:
<A HREF="PAGINA2.html#UnaMarca"> Ir a un Marca en la Página 2 </A>
En todos estos casos, estamos suponiendo que ambas páginas están en el

mismo directorio pero, generalmente, los sitios web se organizan de manera
similar a como lo hacemos con nuestra PC: un directorio principal, y otros
subdirectorios auxiliares.
Si la página a la que se quiere saltar está en un subdirectorio, la referencia
debería ser:
HREF = "subdirectorio/PAGINA2.html"
A la inversa, si se quiere saltar desde una página a otra que está en un

directorio anterior, la referencia debería ser:
HREF = "../PAGINA2.html"
3. ENLACES CON UNA PÁGINA EXTERNA:

Si queremos enlazar con una página que esté fuera de nuestro sistema (es
decir, que esté en un servidor distinto al nuestro, es necesario conocer su
dirección completa, o URL (Uniform Resource Locator).
<A HREF="http://www.google.com."> Google </A>

Por último, hay una etiqueta especial que se usa raramente y que puede ser
utilizada para proporcionar información de contacto, esta es ADDRESS y suele
aparecer el principio de un documento.
<ADDRESS>
<A href="URL_cualquiera">
Nombre de la persona
</A>
Imágenes
La forma de incluir imágenes en nuestras páginas es muy similar a como lo
hacemos con los enlaces a otras páginas. La única diferencia es que, en
lugar de indicar el nombre y la localización de un documento HTML, se le
indica el nombre y la localización de un archivo que contiene una color.
La etiqueta que utilizamos es IMG y el atributo SRC (image source, fuente de
la imagen):
<IMG SRC="URLimagen" />
Dentro de una etiqueta se pueden añadir otros comandos, a los que

denominamos atributos o parámetros. En el caso de las imágenes, un
parámetro inportante es ALT, por medio de este, podemos introducir una
descripción (una palabra o una frase breve) indicativa de la imagen. Si bien se
puede omitir, es la manera por la cual un programa navegador de sólo texto
puede acceder a ellas o, por lo menos, hacerse una idea de lo que
pretendemos mostrar. Además, como es posible que, por alguna razón, no
pueda cargarse un imagen y, muchas veces se las utiliza como enlace a otras
páginas, es fundamental que mostremos algún texto alternativo que indique
su destino
<IMG SRC="URLimagen" ALT="Un texto que explica la imagen" />
Las reglas respecto a la forma de ingresar el destino son las mismas que las
que rigen para los enlaces. Si no se indica nada quiere decir que el archivo
está en el mismo directorio que el documento HTML. Si la imagen está fuera
de nuestro sitio, se debe indicar la URL o dirección completa,
El formato de la imagen es, en términos generales, irrelevante aunque
normalmente se utilizan los formatos GIF, JPG y PNG.
Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes.
Cuanto más grande sea el archivo, más tiempo de carga será necesario. Dado
que los navegadores leen y ejecutan secuencialmente, al encontrarse una
etiqueta IMG, se inicia la carga de la imagen y recién cuando termina, se
continúa con el resto de la página. Esto es así por una simple razón, el
navegador desconoce el tamaño de la imagen y, por lo tanto debe cargarla por
completo para saber dónde continuar.
Una forma de minimizar este efecto es utilizar otros dos
parámetros, WIDTH (ancho) yHEIGHT (alto). De esta manera, le decimos al
navegador cuál es el tamaño de la imagen y puede “reservar” el espacio
necesario para continuar con la carga del resto de la página a la vez que
también va cargando la imagen.
<IMG SRC="URLimagen" ALT="texto" WIDTH="ancho" HEIGHT="alto" />
Es conveniente hacer esto con todas las imágenes, incluso con las más
pequeñas (iconos, botones, etc), para que no haya ninguna interrupción en el
proceso de carga del documento.
Para elegir la posición de la imagen con respecto al texto hay distintas

posibilidades. La más sencilla es colocarla entre dos párrafos, con un titular a
un lado. Se puede poner arriba, en el medio o abajo de la imagen. Para ello se
añade el parámetro ALIGNa la etiqueta:
<IMG SRC="URLimagen" ALIGN="top" /> Título alineado arriba
<IMG SRC="URLimagen" ALIGN="middle" /> Título alineado en medio
<IMG SRC="URLimagen" ALIGN="bottom" /> Título alineado abajo
Las imágenes pueden combinarse con el texto de tal forma que este se ubique
en cierta posición, rodeándola. Para eso, los atributos ALIGN admiten varios
valores. En los siguientes ejemplos se muetran las distintas posibibilidades. En
todo los casos, el texto se escribe sin saltos de línea, inmediatamente después
de la etiqueta IMG:
Lorem ipsum dolor sit

amet, consectetuer
adipiscing elit, sed diam
ALIGN=”Left” (Default)
nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam
erat volutpat.
Lorem ipsum dolor sit ALIGN=”right”

amet, consectetuer
adipiscing elit, sed diam
nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam
erat volutpat.

amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod ALIGN=”top”
tincidunt ut laoreet dolore magna
aliquam erat volutpat.

sed diam nonummy nibh euismod ALIGN=”middle”

sed diam nonummy nibh euismod ALIGN=”absmiddle”

sed diam nonummy nibh euismod ALIGN=”bottom”

sed diam nonummy nibh euismod ALIGN=”absbottom”
Si se quiere interrumpir el proceso de rellenado del texto a los lados de la
imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en
blanco parcialmente, se pueden emplear las variaciones de etiqueta <BR />:
<BR CLEAR=LEFT> busca el primer margen libre a la izquierda
<BR CLEAR=RIGHT> busca el primer margen libre a la derecha

<BR CLEAR=ALL> busca el primer margen libre a ambos lados
Este texto está a un lado de la imágen.
Este también está a un lado de la imágen, en la línea siguiente.
Este otro texto, en cambio, se muestra en el primer margen libre a la izquierda.
Otra posibilidad que nos dan las imágenes es la de utilizarlas como enlace a
otra página. La forma de hacerlo es crear un enlace normal y reemplazar el
texto explicativo por la imagen:
<A HREF="URL"> Un enlace con un texto </A>
<A HREF="URL">
<IMG SRC="URLimagen" />
</A>
Por defecto, si la imagen es un vínculo, está rodeada de un rectágulo del

mismo color de los enlaces. Si no se desea que aparezca, hay que indicarlo
dentro de la etiqueta mediante el atributo BORDER=0, es decir:
<A HREF="URL">
<IMG SRC="URLimagen" BORDER="0" />
</A>
Por medio de los parámetros WIDTH y HEIGHT podemos mostrar las imágenes
con una dimensión diferente a la que realmente tiene, variando el ancho o el
alto. Esto es muy utilizado para poner en la página un thumbnail (una
reproducción en pequeño de una imagen), que hace de enlace a la imagen. De
esta manera podemos no “recargamos” la página, y el visitante será quien
decida qué imágenes desea ver con su tamaño real.
<A HREF="URL">
<IMG SRC="URLimagen" WIDTH="50" HEIGHT="50" BORDER="0"
ALT="click para ver la imagen de 500x500" />
</A>
WIDTH y HEIGHT no modifican el archivo original y, por lo tanto, aún cuando
las veamos pequeñas, la cantidad de bytes a cargar será la misma que si la
mostráramos completas.
En todos los casos, es esencial minimizar la demora en la carga de las

imágenes y para eso, debemos hacer un uso razonable de las herramientas que
nos proveen los programas gráficos:
• Reduciendo su tamaño (menos pixeles = menos kilobytes para cargar)
• Reduciendo el número de colores
• Simplificándolas o comprimiéndolas
• Si es posible, el archivo no debería sobrepasar los 100K y su tamaño no
debería superar los 500×500 pixeles.
Cuando se carga la imagen de una página, esta queda almacenada en el
caché. Por lo tanto, si esta misma imagen se utiliza en otras páginas no será
requerida al servidor para ser cargada de nuevo. Por ello, siempre que se
pueda, es conveniente repetir la misma imagen para los botones, los íconos,
las barras de separación, etc.
Tablas
Las tablas en HTML son una de las formas más comunes de tabular el
contenido alineándolo en filas y columnas.
La etiqueta general, que engloba a todas las demás es <TABLE> y </TABLE>.
Es decir:
<TABLE>
[resto de las etiquetas]
</TABLE>
En el siguiente nivel, dentro de la anterior, están las etiquetas para formar

cada fila (table row) de la tabla, que son <TR> y </TR>. Hay que repetirlas
tantas veces como filas queremos que tenga la tabla. Es decir que, para una
tabla con dos filas:
<TABLE>
<TR>
[etiquetas de las celdas primera fila]
</TR>
<TR>
[etiquetas de las celdas segunda fila]
</TR>
</TABLE>
En el último nivel (dentro de las anteriores) están las etiquetas de cada celda
(table data), que son <TD> y </TD> y las de encabezado (table header) que
es <TH> y</TH>:
Dentro de las etiquetas TD se coloca el contenido (texto, imágenes, etc.) y
dentro de las etiquetas TH un texto que, por defecto, se mostrará en negrita.
Hay que repetir la etiqueta tantas veces como celdas queremos que haya en
esa fila:
<TABLE>
<TR>
<TH>
TITULO O ENCABEZADO
</TH>
</TR>
<TR>
<TD>
CONTENIDO
</TD>
</TR>
</TABLE>
Una etiqueta alternativa, permite añadir un título general a toda la tabla, un

texto encima de esta que indica cuál es su contenido. Se consigue con la
etiqueta<CAPTION> </CAPTION>:
<TABLE>
<CAPTION>
TITULO DE LA TABLA
</CAPTION>
[resto de las etiquetas]
</TABLE>
Por último, hay una serie de etiquetas opcionales que se utilizan para agrupar
otras etiquetas.
COL (columna de una tabla) y COLGROUP (grupo de columnas de una tabla) se
usan para agrupar columnas, mientras que THEAD (cabecera de
tabla), TFOOT (pie de tabla) y TBODY (cuerpo de tabla) se usan para agrupar
filas.
Este ejemplo es una tabla simple, con dos filas y tres columnas con un
encabezado. Dentro de cada celda se incluye un texto:
<TABLE>
<CAPTION>
EJEMPLO DE UNA TABLA
</CAPTION&gt
<TR>
<TH>
COLUMNA 1
</TH>
<TH>
COLUMNA 2
</TH>
<TH>
COLUMNA 3
</TH>
</TR>
<TR>
<TD>
fila1-celda1
</TD>
<TD>
fila1-celda2
</TD>
<TD>
fila1-celda3
</TD>
</TR>
<TR>
<TD>
fila2-celda1
</TD>
<TD>
fila2-celda2
</TD>
<TD>
fila2-celda3
</TD>
</TR>
</TABLE>
Este es un ejemplo de una tabla simple:

COLUMNA 1 COLUMNA 2 COLUMNA 3
fila1-celda1 fila1-celda2 fila1-celda3
¿Qué pasa si colocamos un número distinto de celdas en las filas? El navegador
dibuja la tabla y la completa con espacios en blanco.
En el ejemplo anterior, eliminamos la fila1-celda2 y, para verlo claramente,
vamos a agregarle un borde y ampliar el ancho de las celdas:
COLUMNA 1 COLUMNA 2 COLUMNA 3
fila1-celda1 fila1-celda3
Como se vé, ese espacio vacío no queda en el medio sino al final de la fila.
Hasta ahora, en los ejemplos las celdas sólo contenían texto pero se puede
poner cualquier otro elemento HTML, incluyendo imágenes, vínculos, lista,
etc. Incluso, también puede ponerse otra tabla:
<TABLE BORDER=1>
<TR>
<TD>
<IMG SRC="URLimagen">
</TD>
<TD>
<TABLE BORDER=1>
<TR>
<TD>1</TD><TD>2</TD>
</TR>
<TR>
<TD>3</TD><TD>4</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
1 2
3 4
Cada etiqueta de una tabla posee una serie de atributos que le dan una gran
flexibilidad.
Estos son los atributos del elemento TABLE:
align=alineamiento posición de la tabla respecto a la ventana
background=imagen imagen de fondo
bgcolor=color color de fondo de las celdas
border=valor controla la anchura del marco que rodea una tabla
cellpadding=valor espacio dentro de celdas
cellspacing=valor espacio entre celdas
frame=dato qué partes del marco representar
height=valor altura de una celda
rules=dato líneas de división entre filas y columnas
width=valor anchura de la celda
Vamos a ver algunos de los más utilizados.

Una de las característica más evidentes de las tablas es los datos pueden ir
enmarcados por un borde. Para esto le agregamos el atributo BORDER a la
etiquetaTABLE, y ponemos un valor que indicará su ancho:
<TABLE BORDER=ancho>
Por defecto, el valor a BORDER es 1 por lo que, si no queremos verlo,
debemos escribir BORDER=0.
Normalmente es el navegador el que se encarga de dimensionar el tamaño
total de la tabla de acuerdo con el número de filas y columnas y,
fundamentealmente, de acuerdo al contenido de las celdas, espesor de los
bordes, etc. Sin embargo, a veces es necesario forzarlo para que la tabla
tenga unas dimensiones totales mayores o menores de las que le
corresponden, tanto en ancho como en alto. Esto se consigue añadiendo
dentro de la etiqueta de la tabla los atributos WIDTH y HEIGHT, y dándoles un
valor que puede ser un porcentaje, o a una cifra expresada en pixeles.
<TABLE WIDTH=400 HEIGHT=200>
Por defecto, las tablas son transparentes pero pueden tener un color de
fondo, para ello usamos el atributo BGCOLOR=”#XXYYZZ”.
<TABLE BGCOLOR="#000000">
También es posible utilizar una imagen como fondo, para ello usamos el
atributoBACKGROUND=”URLimagen”.
<TABLE BACKGROUND="URLimagen">
Por defecto, la separación entre las distintas celdas de una tabla es de dos
pixeles pero eso puede modificarse con el atributo CELLSPACING. De forma
similar, por defecto, la separación entre el borde y el contenido dentro de las
celdas es de un pixel pero se puede cambiar con el atributo CELLPADDING.
<TABLE CELLSPACING=10 CELLPADDING=5>
Estos son los atributos del elemento TR:

align=left|center|right|justify|char alineación
bgcolor=color color de fondo de una fila
char=caracter carácter de alineación, p.ej. char=’:’
charoff=valor offset para carácter de alineación
valign=top|middle|bottom|baseline alineación vertical en celdas

Y estos son los atributos de los elemento TH y TD:
abbr=texto abreviatura de celda de cabecera
axis=dato lista de cabeceras relacionadas separadas por comas
background=imagen imagen de fondo
bgcolor=color color de fondo de una celda

colspan=cantidad número de columnas abarcado por celda
headers=dato lista de id’s de celdas de encabezado
height=valor altura de una celda
nowrap suprimir ajuste automático de líneas
rowspan=cantidad número de filas abarcado por la celda
scope=dato campo de aplicación de una celda de cabecera
width=valor ancho de la celda

Algunos de los atributos de las celdas son similares a los del elemento TABLE,
tanto el ancho como el alto pueden establecerse añadiendo los
atributos WIDTH y HEIGHT.
<TD WIDTH=400 HEIGHT=200>
Así mismo pueden tener un color o una imagen de fondo:
<TD BGCOLOR="#000000">
<TD BACKGROUND="URLimagen">
1 2
3 4
Normalmente, el contenido de una celda está alineado a la izquierda, el
atributoALIGN es el que se usa para modificarlo. Estos son los valores
utilizados habitualmente:
<TD ALIGN="left">alineado a la izquierda</TD>
<TD ALIGN="right">alineado a la derecha</TD>
<TD ALIGN="center">centrado</TD>
<TD ALIGN="justify">texto justificado</TD>
Un par de atributos permiten que una celda se “expanda” abarcando otras.

MedainteCOLSPAN la extendemos horizontalmente y
con ROWSPAN verticalmente:
Este es el modelo de una tabla con seis celdas, dos filas y tres columnas:
<TABLE BORDER=1>
<TR>
<TD>CELDA 1</TD>
<TD>CELDA 2</TD>
<TD>CELDA 3</TD>
</TR>
<TR>
<TD>CELDA 4</TD>
<TD>CELDA 5</TD>
<TD>CELDA 6</TD>
</TR>
</TABLE>
CELDA 1 CELDA 2 CELDA 3

Ahora, vamos a extender la celda 1 para que abarque la celda 2:
<TABLE BORDER=1>
<TR>
<TD COLSPAN="2">CELDA 1</TD>
<TD>CELDA 3</TD>
</TR>
<TR>
<TD>CELDA 4</TD>
<TD>CELDA 5</TD>
<TD>CELDA 6</TD>
</TR>
</TABLE>
CELDAS 1 y 2 CELDA 3
Y también extendemos la celda 4 para que abarque la celdas 5 y 6:
<TABLE BORDER=1>
<TR>
<TD>CELDA 3</TD>
</TR>
<TR>
</TR>
</TABLE>
CELDAS 1 y 2 CELDA 3
CELDA 4, 5 y 6
En el otro sentido, extendemos la celda 1 para que abarque la celdas 4:
<TABLE BORDER=1>
<TR>
<TD ROWSPAN="2">CELDA 1</TD>
<TD>CELDA 2</TD>
<TD>CELDA 3</TD>
</TR>
<TR>
<TD>CELDA 5</TD>
<TD>CELDA 6</TD>
</TR>
</TABLE>
CELDA 2 CELDA 3
CELDAS 1 y 4
CELDA 5 CELDA 6
Por último, combinamos ambos atributos y extendemos la celda 5 para que
abarque la celdas 6:
<TABLE BORDER=1>
<TR>
<TD ROWSPAN="2">CELDA 1</TD>
<TD>CELDA 2</TD>
<TD>CELDA 3</TD>
</TR>
<TR>
<TD COLSPAN="2">CELDAS 5 y 6</TD>
</TR>
</TABLE>
CELDA 2 CELDA 3
CELDAS 1 y 4
CELDAS 5 y 6
Estos son los atributos de los elementos COL y COLGROUP que se verán más
adelante:
span=valor los atributos de COL afectan a N columnas
width=valor especificación de la anchura de la columna

Estos son los atributos de los elementos TBODY, TFOOT y THEAD que se verán
más adelante:

Por último, el elemento CAPTION sólo tiene un atributo: align=alineamiento.
Formularios
Una de las técnicas más utilizadas para que una página web tenga cierto grado
de interactividad es el uso de los llamados formularios que son los que nos
permiten buscar, hacer pedidos, escribir mensajes, suscribirse, etc.
Aunque las etiquetas HTML para formularios no son muchas, tienen un número
muy amplio de atributos y, algunos de ellos, son muy complejos.
Para sólo dar una idea de su funcionamiento, un formulario se crea con la
etiqueta<FORM> </FORM>, dentro de la cual se insertan otras que crean los
controles: botones, entrada de texto, casillas de verificación, menúes, etc.
Estos son los atributos del elemento FORM:
accept-charset=tipo lista de codificaciones caracteres soportadas
accept=tipo lista tipos MIME para subir ficheros
action=URL proceso en el servidor
enctype=tipo
method=GET | POST método HTTP usado para enviar el formulario
name=texto nombre del formulario
onreset=script el formulario fue reinicializado
onsubmit=script el formulario fue enviado
target=destino representar en este marco
Veamos un ejemplo simple, supongamos que deseamos crear una lista de

usuarios. Cada uno deberá introducir su nombre y dirección de email y pulsar
un botón para enviarnos los datos. Estos datos los recibiremos directamente
en nuestro correo,y con ellos confeccionáramos la lista manualmente.
La estructura general de ese formulario sería:
<FORM ACTION="mailto:dirección_de_email"
METHOD="POST" ENCTYPE="TEXT/PLAIN">
[elementos para introducir datos]
[botón de envío]
</FORM>
En este caso, el atributo ACTION indica la acción a efectuar (enviar datos por
email). El atributo METHOD=POST indica que los datos sean
enviados inmediatamente apenas se pulse el botón de envio (no se analizan ni
verifican). El atributoENCTYPE=”TEXT/PLAIN” hace que sea enviado como
texto plano, sin codificar.
Los elementos para introducir los datos pueden ser de diferente
tipo, texto, menúesy botones. En todos los casos, se utiliza la
etiqueta <INPUT> </INPUT>:
<INPUT TYPE="xxx" NAME="yyy" VALUE="zzz">
En donde:
xxx es una palabra que indica el tipo de introducción
yyy es el nombre que le asignamos a la variable de introducción del dato
zzz es la palabra asociada a un elemento
¿Confuso?, no es para menos, veamos uno por uno:
Para introducir datos por medio de una línea de texto, la palabra clave
es INPUT TYPE=”text” y, el VALUE no se utiliza. Por ejemplo solicitamos que
se introduzca un nombre:
Escriba su nombre:<BR>
<INPUT TYPE="text" NAME="nombre">
</FORM>
Se ve así:
Escriba su nombre:
La longitud del formulario es, por defecto, de 20 caracteres. Se puede variar

incluyendo en la etiqueta el atributo SIZE=”cantidad”. Sea cual sea la
longitud del formulario, si no se indica nada, puede introducirse cualquier
cantidad de caracteres. Se puede limitar incluyendo en la etiqueta el
atributo MAXLENGTH=”cantidad”.
Escriba su nombre (hasta 4 caracteres):<BR>

<INPUT TYPE="text" NAME="nombre SIZE="20" MAXLENGTH="4">
</FORM>
Escriba su nombre (hasta 4 caracteres):
También es posible introducir un texto y que los caracteres sean

irreconocible, por ejemplo, que se vean como los típicos asteriscos que
aparecen cuando se nos pide ingresar una contraseña. Para esto, hay que
cambiar el atributo TYPE=”text” por el atributo TYPE=”password”.
Ingrese su contraseña (hasta 8 caracteres):<BR>
<INPUT TYPE="password" NAME="nombre SIZE="20" MAXLENGTH="8">
</FORM>
Ingrese su contraseña (hasta 8 caracteres):
Si queremos que el usuario confirme una opción determinada, podemos usar

un formulario de confirmación, o checkbox, que se consigue con la
etiqueta INPUT TYPE=”checkbox”.
<INPUT TYPE="checkbox" NAME="Lista">
Incluir en la lista de correo
</FORM>

Si queremos que el formulario aparezca marcado por defecto, hay que añadir
el atributo CHECKED dentro de la etiqueta.
<INPUT TYPE="checkbox" NAME="Lista" CHECKED>
</FORM>

Cuando queremos que el usuario elija una única opción entre varias, usamos
los botones de radio, con la etiqueta INPUT TYPE=”radio"”.
¿Color preferido?<BR>
<INPUT TYPE="radio" NAME="ColorPreferido" VALUE="Rojo"
CHECKED> ROJO
<INPUT TYPE="radio" NAME="ColorPreferido" VALUE="Verde"> VERDE
<INPUT TYPE="radio" NAME="ColorPreferido" VALUE="Azul"> AZUL
</FORM>
¿Color preferido?
ROJO
VERDE
AZUL
El atributo opcional CHECKED se ha añadido en la primera etiqueta para que
aparezca marcada por defecto.
Todo esto muy bien pero ¿cómo se envian los datos?
El elemento esencial en cualquier formulario es el botón de envío que se
consigue con la etiqueta INPUT TYPE=”submit”.
<INPUT TYPE="submit" VALUE="Enviar datos">
</FORM>
Otro botón que puede agregarse con facilidad es el de borrado de los datos
introducidos. Es muy similar al anterior, INPUT TYPE=”reset”.
<INPUT TYPE="reset" VALUE="Borrar datos">

</FORM>
Escriba su nombre:
Enviar datos Borrar datos
El botón de envío puede sustituirse por una imagen utilizando la etiqueta:

INPUT TYPE=”submit” VALUE=”Enviar datos”
por
INPUT TYPE=”image” SRC=”URLimagen”
<INPUT TYPE="image" SRC="URLimagen" BORDER=0>
</FORM>
Escriba su nombre:
Un tipo de etiqueta INPUT muy común es el que contiene el

atributo TYPE=”button”. Se utiliza para ejecutar rutinas script creadas por el
usuario
<INPUT TYPE=button VALUE="Pulsa para ir"
onClick=".......">
Estos son los atributos del elemento INPUT:

accept=tipo lista de tipos MIME para subir ficheros
accesskey=carácter carácter de la tecla de accesibilidad
align=alineación alineación vertical u horizontal
alt=texto descripción corta
checked para radiobotones y casillas de verificación
disabled no disponible en este contexto
ismap=datao usar mapa de imágenes en servidor
maxlength=cantidad máximo de caracteres para campos de texto
name=texto enviar como parte del formulario
onblur=script el elemento perdió el foco

onchange=script el valor del elemento fue modificado
onfocus=script el foco se dirigió hacia el elemento
onselect=script se seleccionó parte de un texto
readonly para texto y contraseñas
size=cantidad específico de cada tipo de campo
src=URL para campos con imágenes
tabindex=cantidad posición en el orden de tabulación
type=tipo qué tipo de control hace falta
usemap=URL usar mapa de imágenes en el cliente
value=valor especificar para radiobotones y casillas de verificación

Una alternativa de la etiqueta INPUT es la etiqueta BUTTON, funcionan igual
pero ofrecen más posibilidades gráficas. Por ejemplo, botones con relieve y un
efecto visual al ser oprimidos.
<BUTTON NAME="enviar" VALUE="Probar" TYPE="button">
<IMG src="URLimagen" />
</BUTTON>
</FORM>
Escriba su nombre:
Estos son los atributos del elemento BUTTON:

name=texto
tabindex=valor posición en el orden de tabulación
type=(button|submit|reset) para usar como botón de formulario
value=dato se manda al servidor cuando se envía

Cuando el texto a introducir es largo, por ejemplo un comentario, es
conveniente utilizar un formulario de texto de líneas múltiples, esto se logra
con la etiquetaTEXTAREA:
<TEXTAREA NAME="nombre" ROWS="cantidad" COLS="cantidad">

Donde ROWS representa la cantidad de filas (alto) y COLS la cantidad de
columnas (ancho)
Introducir comentarios:<BR>
<TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
</FORM>
Que resulta:
Introducir comentarios:
Estos son los atributos del elemento TEXTAREA:

cols=cantidad ancho
name=texto
onselect=script se seleccionó parte de un texto
readonly
rows=cantidad alto
tabindex=cantidad posición en el orden de tabulación

Si queremos que el usuario, en vez de introducir un texto, escoja entre varias
opciones, podemos usar un formulario en forma de menú, para esto, tenemos
la etiqueta SELECT y, dentro ella, cada opción se identifica con la
etiqueta OPTION.
Seleccione un color:<BR>
<SELECT NAME="EligeColor">
<OPTION>Rojo</OPTION>
<OPTION>Verde</OPTION>
<OPTION>Azul</OPTION>
</SELECT >
</FORM>
Seleccione un color:
Por defecto, sólo se ve una opción, si queremos que sean visibles más,
añadimos el atributos MULTIPLE SIZE=”cantidad”.
<SELECT NAME="EligeColor" MULTIPLE SIZE="2">
Un menú también permite elegir entre distintas direcciones web y actuar

como vínculos, para esto se agrega el atributo VALUE:
<OPTION VALUE="http://www.google.com.ar/">Google</OPTION>
Este es el resultado:
Estos son los atributos del elemento SELECT:

multiple por defecto es selección simple
name=texto nombre del campo
onblur=script; el elemento perdió el foco
onchange=script; el valor del elemento fue modificado
onfocus=script; el foco se dirigió hacia el elemento
size=cantidad filas visibles
tabindex=número posición en el orden de tabulación

Estos son los atributos del elemento OPTION:
label=texto para usar en menúes jerárquicos
selected
value=dato por defecto el contenido del elemento
Todos estos controles y etiquetas pueden ser utilizados dentro de un mismo

formulario, por ejemplo:
Escriba su nombre:
Escriba su apellido:
Introducir comentario:
Enviar datos
Borrar datos
El envío de formularios requiere autorización por parte del servidor. Si la

página se encuentra en un proveedor de hosting, deberíamos consultar con el
servicio técnico para que nos informen cuáles son las opciones disponibles. La
mayoría de los proveedores tienen ya instalados los recursos para realizar
estas tareas.
Insertar elementos
Los scripts son pequeños programas que se ejecutan en la PC del usuario. El
lenguaje más utilizado es JavaScript pero existen otros.
Como cada navegador tienes rutinas diferentes para hacer las mismas cosas,
es necesario tener un uso bastante profundo del lenguaje para
implementarlas.
No todos los usuarios tienen navegadores que acepten scripts, y, en muchos
casos, los desactivan por lo que no es aconsejable depender de ellas para que
la página funcione. Lo ideal es siempre tener una alternativa.
Generalmente se insertan en el HEAD pero, sependiendo de lo que hagan,
pueden ser ubicadas en cualquier parte de la página. En el atributo TYPE, se
debe especificar el lenguaje utilizado:
<SCRIPT TYPE="text/javascript:">
[...............]
</SCRIPT>
Los scripts también pueden estar en archivos externos y para cargarlos,
utilizamos el atributo SRC:
<SCRIPT SRC="URLarchivo" TYPE="text/javascript:"></SCRIPT>
Para advertir a los navegadores sin soporte de scripts, existe el

elemento NOSCRIPT. Si el navegador no ejecuta el script,se debería mostrar
el contenido del elementoNOSCRIPT, y viceversa:
<SCRIPT TYPE="text/javascript:">
[...............]
</SCRIPT>
<NOSCRIPT>
El navegador no acepta scripts
</NOSCRIPT>
Estos son los atributos del elemento SCRIPT:

charset=carácter codificación de caracteres del recurso vinculado
defer el AU puede retrasar la ejecución del script
language=lenguaje nombre del lenguaje predefinido de scripts
src=URL URL del script externo
type=tipo tipo de contenido para lenguaje de scripts

El elemento NOSCRIPT no posee atributos.
Java es un lenguaje de programación desarrollado por Sun Microsystems, y su
principal caracterísstica es la de ser independiente de los sistemas operativos
lo que permite que pueda ejecutarse en cualquier PC que tenga un navegador
compatible.
Java y Javascript son dos lenguajes distintos y, en ambos casos, no es
necesario saber programar para utilizarlos en nuestras páginas.
En el caso de Java, los programas a insertar se denominan applets y son un
conjunto de archivos que se colocan en el servidor y ejecutan todo tipo de
acciones (efectos visuales, sonoros, relojes, programas educativos, juegos,
etc)
Para incluirlos en una página web debemos tener el programa del applet
(archivo .class) y luego, utilizar la etiqueta APPLET. Por lo general, también
se deben añadir parámetros, y para eso utilizamos la etiqueta PARAM:
<APPLET CODE=URL_archivo.class WIDTH=ancho HEIGHT=alto>

<PARAM NAME="nombre" VALUE="contenido">
[Su navegador no soporta Java]
</APPLET>
Al igual que con los scripts, es recomendable agregar una línea de advertencia
para que los navegadores que no soporten Java muestren un texto indicativo.
Una página web también puede tener otro tipo de archivos incorporados
(sonidos, video, Flash). Hasta hace muy poco, las etiquetas para cada tipo de
archivo eran diferentes e incluso, variaban según el navegador. Por ejemplo
una forma de incorporar un sonido de fondo en Internet Explorer era:
<BGSOUND SRC="URL_archivo(mid/wav)" LOOP=nveces(infinite)>
y en Netscape:
<EMBED SRC="URL_archivo(mid/wav)" WIDTH=ancho HEIGHT=alto>
Actualmente, la mayoría de los navegadores utilizan sólo una etiqueta para

ejecutar aplicaciones externas. La etiqueta <OBJECT> </OBJECT> permite
controlar que programa utilizar y PARAM el tipo de objeto y otros valores
necesarios para su ejecución o personalización. La estuctura básica para
incrustar objetos de Flash(archivos swf o reproductores de video o MP3) es:
<OBJECT WIDTH="ancho" HEIGHT="alto" ID="nombre"
TYPE="application/x-shockwave-flash"
DATA="URL_archivo">
<PARAM NAME="nombre" VALUE="......." />
[ <param NAME="parametros" VALUE="valor" /> ]
</OBJECT>
La etiqueta OBJECT permite incrustar casi cualquier tipo de archivo siempre

que se especifique el tipo en el atributo TYPE:
<OBJECT TYPE="application/mpeg" DATA="URL_archivo.MPG">
[ ....... ]
</OBJECT>
Incluyendo las antes mencionadas applets:

<OBJECT CODETYPE="application/java" CLASSID="java:nombre.class">
[ ....... ]
</OBJECT>
También pueden incluirse otros documentos HTML:
<OBJECT DATA="URLarchivo.HTML">
[ ....... ]
</OBJECT>
Algunos otros ejemplos

de TYPE: text/html, image/png, image/gif, video/mpeg,text/css, audio/basi
c. Para más detalles ver información en la W3C
El elemento <IFRAME> <IFRAME> permite insertar un marco dentro de un
documento HTML y es muy similar a insertarlo mediante la etiqueta OBJECT.
La información a insertar se asigna mediante el atributo SRC y habitualmente
es utilizado para mostrar el contenido de documentos HTM externos:
<IFRAME SRC="URLcontenido" WIDTH="ancho" HEIGHT="alto">
</IFRAME>
Estilo
Las hojas de estilo permiten controlar la presentación de una página web
determinando el espacio entre las líneas de texto, el tipo y tamaño de las
fuentes, el grosor de los márgenes, los colores usados y, además, el fomateo
individual de cualquier etiqueta.
Como veremos más adelante, se pueden definir variaciones de diseño por
medio de las “clases”. Si necesitáramo varios estilos de párrafos diferentes, se
pueden definir clases para la etiqueta P, por
ejemplo: P.normal, P.subrayado, P.tablas, etc.
Las hojas de estilo en cascada (CSS) permiten definir las reglas que utiliza el
navegador para presentar una página web y esto lo podemos hacer de tres
maneras diferentes:
• Añadiendo instrucciones de estilo a etiquetas concretas
• Incluyendo las instrucciones en el documento HTML de una página
concreta
• Enlazando todos los documentos con un archivo de definición del estilo
Para agregar estilo a una etiqueta concreta, debemos añadirle el
atributo STYLE que contendrá una serie de propiedades:
<P>
Texto normal.
</P>
<P STYLE="margin-left: 30px; color:red">
Texto en color rojo y con sangría.
</P>
Texto normal.
Texto en color rojo y con sangría.
De esta manera, variando la forma en que se comporta habitualmente la

etiqueta P.
Todo el contenido del atributo STYLE se pone entre comillas, en cada
propiedad, el valor se asigna mediante dos puntos (:) y las distintas
propiedades se separan con un punto y coma (;).
Hay dos etiquetas que se usan junto con las hojas de estilo. <DIV>
</DIV> y <SPAN> </SPAN> permiten agrupar un conjunto de elementos
(párrafos, encabezados, listas, tablas, divisiones, etc) y declarar reglas de
estilo para todas. Por ejemplo, el color de fondo de un conjunto de párrafos o
el borde de una imagen.
DIV es un elemento en bloque, por ejemplo:
<DIV>
[... etiquetas varias ...]
</DIV>
SPAN es un elemento en línea, permite agrupar varios elementos en línea

seguidos dentro de un mismo bloque para después darles formato con la hoja
de estilo. A menudo, la etiqueta SPAN se emplea para asignar clases a
porciones de texto.
<SPAN>
[... contenido ...]
</SPAN>
Si queremos cambiar la apariencia de una sección entera (que agrupe un
conjunto de etiquetas), utilizamo la etiqueta DIV, y definimos el estilo
globalmente:
<DIV STYLE="font-size: 16px; color: red">
<P>Establecemos el color de la sección como rojo.</P>
<P>La fuente tendrá 16 pixeles de alto.</P>
<P>Y este será igual que los otros.</P>
</DIV>
Que se verá así:
Establecemos el color de la sección como rojo

La fuente tendrá 16 pixeles de alto.
Y este será igual que los otros.
Para modificar una de las etiquetas dentro del DIV y darle un estilo diferente,
podemos establecer un estilo particular para esa etiqueta:
<DIV STYLE="font-size: 16px; color: red">
<P STYLE="font-size: 14px; color: black">
Pero esta será diferente.
</P>
</DIV>
Establecemos el color de la sección como rojo.

Pero esta será diferente.
El estilo dentro de una etiqueta tiene precedencia sobre el estilo del bloque.
Es este orden de prioridades lo que le da el nombre de estilo en cascada (hay
una cascada de métodos para aplicar los estilos, teniendo un orden de
precedencia riguroso de unos sobre otros).
Algo similar podemos hacer mediante la etiqueta SPAN, aunque generalmente
se usa para cambiar elementos más pequeños (palabras o letras), en lugar de
bloques enteros. Por ejemplo:
<DIV STYLE="font-size: 16px; color: red;">
<P STYLE="font-size: 14px; color: black;">Pero esta será
<SPAN style="font-size: 18px; color: green;">MUY</SPAN>
diferente.</P>
</DIV>
Establecemos el color de la sección como rojo.

Pero esta será MUY diferente.
Introducir el estilo en etiquetas concretas es sencillo de aplicar y es adecuado
si sólo se desea hacer algúnn cambio puntual pero no es práctico ya que
debemos examinar todo el documento en busca de etiquetas cuando queremos
hacer algún cambio.
Para definir estilos globales en un documento HTML utilizamos la
etiqueta <STYLE> </STYLE> dentro de la cual escribimos las propiedades. Por
regla general, está ubicada en el HEAD del documento, pero también puede
ser incluida en el BODY.
Esta etiqueta tiene un atributo TYPE que indica el tipo de medio en que va a
ser publicado, en este caso será “text/css”.
<STYLE TYPE="text/css">
[lista de propiedades]
</STYLE>
Este es un ejemplo de cómo se escribe un bloque de instrucciones de estilo:
<STYLE TYPE="text/css">
BODY {background: yellow; font-size: 12px;

font-family: Arial; margin-left: 30px;}
H1 {background: blue; font-size: 16px;
font-weight: bold; color: red}
H2 {font-size: 14px; font-weight: bold; color: red}
DIV {background: URL(fondo.jpg)}
</STYLE>
Se colocan las distintas etiquetas a las que se quiere dar un estilo y a

continuación, englobadas por los signos “{” y “}” van las distintas propiedades
con sus respectivos valores, separadas por un punto y coma.
Si STYLE se coloca en el HEAD, todas las etiquetas definidas tendrán el estilo
indicado.
Si tuvieramos muchas páginas y quisiéramos darles a todas el mismo estilo,
podríamos crear un vínculo a un archivo de texto que contenga las
definiciones. Este archivo, que generalmente tiene la extensión CSS, sólo
tendrá las propiedades pero no las etiquetas STYLE de inicio y ciere.
Para incluirlo en la página utilizamos la etiqueta <LINK />:
<LINK REL=stylesheet HREF="URL_archivo.css" TYPE="text/css">
Todos los métodos pueden aplicarse a la vez en una misma página Podemos
tener un archivo externo genérico, una o varias etiquetas STYLE y usar el
atributo style en etiquetas individuales.
Para evitar conflictos entre los distintos métodos, existe un orden de
precedencia, es decir, cuál regla prevalecerá sobre la otra si dan definiciones
contradictorias.
El orden de precedencia de mayor a menor es el siguiente:
• los estilos definidos dentro de una etiqueta con el atributo STYLE
• los estilos definidos por la etiqueta STYLE
• los estilos contenidos en los archivos externos
Los marcos
Los frames (marcos) son un método que aún es utilizado para dividir la
pantalla en diferentes ventanas que pueden actuar independientemente unas
de otras, como si se tratara de páginas diferentes.
Su característica más importante es que, haciendo click sobre un vínculo en
un frame, puede cargarse otro documento HTML en un sector de la página.
Frecuentemente se usa tener un área estrecha en un panel lateral donde se
encuentra un índice con vínculos que cargan las distintas páginas.
Para crear una página con frames, debemos crear un documento HTML
especial en el que se definen las zonas su distribución, tamaño y contenido.
Imaginemos que la página va a tener dos frames distribuidos en columnas (una
al lado de la otra) y que la izquierda ocupa el 20% del ancho de la pantalla, y
el otro, el 80% restante.
<HTML>
<HEAD>
<TITLE>Ejemplo Frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="URLcontenido1" NAME="nombre1">
<FRAME SRC="URLcontenido2" NAME="nombre2">
</FRAMESET>
</HTML>
La diferencia fundamental es que no se utiliza la etiqueta BODY sino la

etiquetaFRAMESET (definir los frames). En ella se agrega un
atributo COLS=”tamaños” con las medidas de las columnas. Si hubiéramos
distribuido una sobre la otra, el tributo a usar sería ROWS (filas). El ancho de
las columnas o la altura de las filas puede establecerse como porcentaje o en
valores absolutos (en pixeles).
Luego, con la etiqueta FRAME indicamos cuál será el contenido de cada sector
mediante el atributo SRC (source). También podemos agregarle un
atributo NAME para poder referenciar el sector.
Los archivos que serán el contenido son documentos HTML normales con sólo
una diferencia, los vínculos a las páginas que queremos que se muestren en
los frames deben incluir el atributo extra TARGET que tendrá como valor el
nombre dado al frame. Por ejemplo la página URLcontenido1 será:
<HTML>
<HEAD>
<TITLE>Indice</TITLE>
</HEAD>
<BODY>
<P><A HREF="pagina1.html" TARGET="nombre2">Página 1</A>
<P><A HREF="pagina2.html" TARGET="nombre2">Página 2</A>
</BODY>
</HTML>
TARGET (destino) sirve para hacer que al ser activado el enlace no se cargue
en el frame del vínculo sino en otro, en el que hayamos llamado con ese
nombre en el documento de definición de los frames.
Para evitar que los navegadores que no soportan frames no carguen la página
utilizamos la etiqueta NOFRAMES y la colocamos a continuación de las
etiquetasFRAME:
<HTML>
<FRAMESET ... >
<FRAME ... >
<FRAME ... >
<NOFRAMES>
<BODY>
[Aquí ponemos el código que queremos mostrar
si no se soportan frames]
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
Ya vimos que la etiqueta FRAMESET tiene como atributos

principales COLS y ROW. Todos estos son posibles ejemplos:
<FRAMESET COLS="xx, yy">

<FRAMESET COLS="xx, yy, zz"&gt
<FRAMESET COLS="%20, %80">
<FRAMESET ROWS="%10, %70, %20"&gt
<FRAMESET COLS="40, 600">
Un valor relativo se consigue poniendo un asterisco (*), en vez de un número.

Esto se interpreta como que ese frame debe tener el espacio restante. En este
ejemplo, habrá tres filas, la superior y la inferior de una altura fija de 100
pixels, y la del medio ocupará el espacio restante:
<FRAMESET ROWS="100,*,100">
Si hay más de un frame con asterisco, ese espacio se dividirá por igual entre
ellos.
Si hay un número antes del asterisco, ese frame tendrá esa cantidad
adicional , “2*,*”daría dos tercios para el primer frame y un tercio para el
otro.
Por defecto, los frames se muestran con un borde de separación entre ellas,
para eliminarlo, se debe incluir el atributo FRAMEBORDER=0 dentro de la
etiquetaFRAMESET y, para que también desaparezcan las separaciones entre
frames hay que añadir el atributo FRAMESPACING=0
La etiqueta FRAME posee otros atributos aparte de NAME y SRC:
MARGINWIDTH=”número” y MARGINHEIGHT=”número” controlan los
márgenes dentro de un frame.
SCROLLING=”yes|no|auto” define si el frame tendrá o no una barra de
despazamiento.
NORESIZE no se le asigna un valor sino que indicar que la ventana no se pueda
re-dimensionar FRAMEBORDER=”no” elimina el borde.
Como vimos, el atributo TARGET indica donde se mostrará el contenido.
El nombre puede ser cualquiera siempre que el primer carácter sea
alfanumérico y no pueden incluirse algunos cuyos significados están
reservados:
TARGET=”_blank” hace que se abra el vínculo en una nueva ventana.
TARGET=”_self” hace que el vínculo se cargue en el propio frame.
TARGET=”_top” hace que el vínculo se cargue a pantalla completa,
suprimiendo todos los frames.
Como cualquie etiqueta, los frames pueden anidarse, es decir, ponerse uno
dentro de otro.
Supongamos que queremos hacer lo siguiente, un frame horizontal superior
ocupando todo el ancho de la pantalla; otro vertical en la parte izquierda,
debajo del anterior y un tercero ocupando el resto de la pantalla.
<HTML>
<HEAD>
<TITLE>Frames anidadas</TITLE>
</HEAD>
<FRAMESET ROWS="15%, *">
<FRAME SRC="filasuperior">
<FRAMESET COLS="20%, *">
<FRAME SRC="columnaizquierda">
<FRAME SRC="columnaderecha">
</FRAMESET>
</FRAMESET>
</HTML>
Los tipos de elementos

En HTML, los elementos del BODY se pueden dividir en dos grandes grupos:
elementos en bloque y elementos en línea (inline).
Los elementos en bloque pueden contener elementos en línea y también a
otros elementos en bloque. Suelen provocar un salto de línea antes y otro
después de los contenidos del elemento. Los elementos P (párrafo), OL (lista
ordenada) y LI (objeto de lista) son elementos en bloque.
Los elementos en línea no pueden contener elementos en bloque. Los
elementos EM(énfasis) y STRONG (énfasis fuerte) son elementos en línea.
La mayoría de los elementos tiene atributos (propiedades). Por ejemplo, ya
vimos que, para crear un hipervínculo con el elemento A, hay que agregarle
un valor a su atributo HREF.
Para asignar un valor a los atributos, en la etiqueta inicial, después del
nombre del elemento, se incluye atributo=”valor” para cada atributo siendo
conviente que el valor siempre esté entre comillas.
Estos son los atributos del elemento BODY:
ALINK=color color de los vínculos activos
BACKGROUND=url imagen de fondo

BGCOLOR=color color de fondo
LINK=color color de los vínculos
ONLOAD=script ejecutar script al cargar
ONUNLOAD=script ejecutar script al salir
TEXT=color color de los textos
VLINK=color color de los vínculos vistados

Y estos son los atributos del elemento P:
ALIGN=[left|center|right|justify] alineamiento
Hay una serie de atributos que son comunes a casi todos los elementos:
CLASS=nombre indica que es parte de estilo específico
DIR=[ltr|rtl] dirección en la que se va a escribir el texto
ID=nombre identificador único
LANG=codigo lenguaje del contenido
ONCLICK=script se hizo click con el mouse
ONDBLCLICK=script se hizo doble click con el mouse
ONKEYDOWN=script se pulsó una tecla
ONKEYPRESS=script se pulsó y soltó una tecla pulsada
ONKEYUP=script se soltó una tecla
ONMOUSEDOWN=script se pulsó un botón del mouse
ONMOUSEMOVE=script se movió el mouse
ONMOUSEOUT=script se quitó el mouse del elemento
ONMOUSEOVER=script se colocó el mouse encima del elemento
ONMOUSEUP=script se soltó un botón del mouse
STYLE=estilos reglas de estilo individuales para el elemento
TITLE=texto titulo de un elemento
El fondo de una página

Utilizando los atributos del BODY podemos cambiar el fondo de dos maneras,
con un color uniforme o con una imagen.
Para cambiar el color se debe agregar el atributo BGCOLOR y darle un valor
que es un número que indica la cantidad de componentes rojo, verde y azul
(RGB). Estos números se escriben en notación hexadecimal (00 a FF), por
ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y cero
de los otro dos colores.
Algunos de los colores más comunes:
#FF0000 = rojo
#00FF00 = verde
#0000FF = azul
#FFFF00 = amarillo
#FFFFFF = blanco
#000000 = negro
<BODY BGCOLOR="#RRGGBB">
Para oscurecer un color hay que reducir el número de su componente,

dejando los otros sin modificar:
#FF0000 = rojo
#AA0000 = rojo más oscuro
#550000 = rojo mucho más oscuro
Para hacer que un color tenga un tono más suave (pastel), se deben variar los
otros dos colores haciéndolos más claros (aumentando el valor), en una
cantidad igual.
#FF7070 = rojo transformado en rosa
Así como el color de fondo por defecto es el blanco, el de los texto es negro y
el de los vínculos es azul
Para definir el color de los textos, usamos el atributo TEXT con el valor del
color:
Para los vínculos, hay tres atributos que controlan el color normal, el color de
los vínculos visitados y el color de los vínculos activos (el que adquieren en el
momento de ser pulsados), estos atributos
son LINK, VLINK y ALINK respectivamente.
< BODY BGCOLOR="#RRGGBB" TEXT="#RRGGBB"
LINK="#RRGGBB" VLINK="#RRGGBB" ALINK="#RRGGBB">
El fondo de la página puede ser una imagen. Esta, se repite en toda la página,
como si fuera un mosaico. El atributo a usar es BACKGROUND cuyo contenido
será la URL de la imagen.
Hay que tener en cuenta que algunos navegadores no muestren las imágenes,
por lo tanto es conveniente definir un color de fondo para que la página pueda
mostrarse correctamente.
<BODY BACKGROUND="URL_imagen" BGCOLOR="#RRGGBB">
Mapas e imágenes
Hemos visto que podemos enlazar una página con otra usando vínculos de
texto o imágenes individuales.
Una alternativa es utilizar una imagen única, para enlazar a varias páginas,
yendo a una u otra según el área en donde se haga click. A este tipo de
imagenes se las llaman mapas.
Para crear un mapa, debemos partir de una imagen, y utilizar código HTML
para crear las áreas (zonas activas o hotspots).
Para definir un área activa rectangular, necesitamos conocer las coordenadas
de su ángulo superior izquierdo y las de su ángulo inferior derecho. Estas
coordenadas las obtenemos con cualquie programa gráfico.
La etiqueta que crea un mapa es <MAP> </MAP> que contendrá una o más
etiquetas<AREA /> con los datos de cada zona.
Supongamos que la primera zona activa tiene estas dos coordenadas (a1,b1) y
(c1,d1) y que la segunda zona activa tiene las coordenadas (a2,b2) y (c2,d2),
el código resultante sería este:
<MAP NAME="nombremapa">
<AREA SHAPE="RECT" COORDS="a1,b1,c1,d1" HREF="URLdestino1">
<AREA SHAPE="RECT" COORDS="a2,b2,c2,d2" HREF="URLdestino2">
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
<IMG SRC="URL_imagen" USEMAP="#nombremapa"
WIDTH="ancho" height="alto">
Cuando hagamos click en la parte superior de la imagen, nos redirigiremos a la

página de Google normal, y haciendo click más abajo, a Google Images.
En la etiqueta MAP, agregamos un atributo NAME para identificar la imagen

del mapa. En la etiqueta AREA, definimos el atributo HREF con la URL de
destino, SHAPE con la forma que va a tener y COORDS con las coordenadas
del área.
AREA SHAPE=”DEFAULT” NOHREF es una etiqueta que define el área
completa del mapa , indicando que su forma es la que tiene por defecto
(rectangular). Si se quisiera que el mapa no abarcara la totalidad de la
imagen, o incluso que tuviera una forma distinta, habría que indicarlo aquí, en
lugar de la instrucción DEFAULT. Por último,NOHREF hace que el área
completa de la imagen no sea una zona no-activa sino sólo las áreas definidas.
La etiqueta IMG es similar a las usadas anteriormente exceto que se le agrega
un atributo nuevo, USEMAP que indica que es el mapa definido anteriormente
con ese nombre.
Las zonas activas se pueden definir también como círculos o polígonos. Para
una circular, el atributo es SHAPE=”CIRCLE” y las coordenadas deben ser
tres, la de su centro (x,y) y la de su radio (r):
<AREA SHAPE="CIRCLE" COORDS="x,y,r" HREF="URLvinculo">
Para definir una zona poligonal hay que usar el atributo SHAPE=”POLYGON” y
conocer las coordenadas de los distintos puntos (x1,y1), (x2,y2), (x3,y3), etc:
<AREA SHAPE="POLYGON" COORDS="x1,y1,x2,y2,x3,y3,..."
HREF="URLvinculo">
Crear estilos
Para poder utilizar hojas de estilo y sacarles el máximo provecho es
indispensable entender cuál es la estructura de un documento HTML.
Podemos imaginarnos que una página web es un conjunto de cajas (bloques)
metidas una dentro de la otra, siendo la más grande, la que contiene a todas,
el elemento definido con la etiqueta HTML.
En este tipo de estructura, donde hay elementos contenidos en otros hay una
cierta jerarquía, los elementos padre son los contenedores y los elementos
hijos los contenidos:
<DIV> elemento padre
<Algún texto cualquiera> elemento hijo

<IMG SRC="imagen" /> elemento hijo
</DIV>
Una parte fundamental de las hojas de estilo es lo que se llama herencia.

Muchas de las propiedades de estilo de los elementos padre son heredadas por
los elementos hijo, pero no al revés.
Como la etiqueta BODY engloba a las demás, si le asignamos un estilo
determinado, todos los elementos que estén dentro de la página heredarán
este estilo. Por ejemplo:
BODY {background-color: #000000;
color: yellow;
margin: 20px;
Si colocáramos esa definición dentro de una etiqueta STYLE en el HEAD de

nuestra página, esta se mostraría con fondo negro, letras amarillas y márgenes
en los cuatro lados.
Lo que está entre las llaves ({}), se llama selector (en este caso BODY), y es lo
que utilizamos para definir a que parte del documento vamos a aplicar las
propiedades que están entre las llaves.
SELECTOR {propiedad: valor}
Los selectores pueden ser aún más complejos; los selectores contextuales
permiten aplicar reglas de estilo a elementos insertados dentro de otros. En
este ejemplo, la regla se aplicaría a los elementos STRONG que estén
incluidos (hijos) en un elementoUL (padre):
UL STRONG {color: red}
Todos los elementos STRONG que no estén contenidos dentro de un

elemento UL no serán afectados por la regla.
Esto mismo puede hacerse mucho más específico. En este ejemplo se aplicará
la regla sólo si el elemento STRONG se encuentra en una lista de tipo UL en
una celda (TD) de una tabla:
TD UL STRONG {color: green}
La inclusión global de estilo a las distintas etiquetas puede no ser suficiente

ya que, muchas veces, necesitamos que algunas tengan ciertas características
diferentes. Para ello recurrimos a las clases.
SELECTOR.clase {propiedad: valor}
Supongamos que definimos H2 con un color y una fuente determinada pero,

de tanto en tanto, necesitamos utilizar la misma etiqueta pero con otras
características:
H2.rojo {color: red}

H2.verde {color: green}
H2.azul {color: blue}
Para crear una clase, agregamos un punto al selector y un nombre único.

Luego, en la página, podemos utilizar cualquiera de ellas, agregando el
atributo CLASS a la etiqueta:
<H2 CLASS=rojo>
Encabezado de color rojo.
</H2>
<H2 CLASS=verde>
Encabezado de color verde.
</H2>
Las clases pueden no estar asociadas a una etiqueta sino que pueden ser
independientes. Para esto, simplemente escribimos su nombre anteponiéndole
un punto.
.clase {propiedad: valor}
Por ejemplo, podemos definir una clase genérica para textos en color rojo con
esta clase:
.rojo {color: red}
Y utilizar con cualquier etiqueta:
<P CLASS="rojo">Este texto será rojo.</p>
<P>Pero este texto no.</p>
Algo similar se logra por medio del atributo ID (identificar). Las clases
permiten que apliquemos las mismas propiedades a diferentes elementos, en
cambio, ID, le da un nombre (identificador) único a un elemento de la página
y de esta manera, lo diferencia del resto.
Para crear una regla de estilo de este tipo, debemos utilizar el carácter # y
luego el nombre del identificador:
#algoespecial {color : white; font-size: 16px;}
Y la usaríamos así:
<div id="algoespecial">
[... el texto se vería en blanco y de 16 pixeles de alto ...]
</div>
Aunque los identificadores pueden utilizarse en cualquier momento, lo

razonable es reservarlos para identificar áreas importantes de la página (el
footer, la barra de navegación, el encabezado, etc)
Supongamos que atribuimos los mismos atributos a diferentes etiquetas:
H1 {font-size: 16px; font-weight: bold;}
Para simplificar, podríamos agruparlos, separando cada selector con una

coma:
H1, H2, H3 {font-size: 16px; font-weight: bold;}
Algunas propiedades admiten dos tipos de sintaxis, la primera, afecta sólo a

un tipo:
P {font-weight: bold;
font-style: italic;
font-size: 12px;
font-family: Times;
La segunda, nos permite agrupar varias propiedades en una sola instrucción:
P {font: bold italic 12px Times}
En estos casos, el orden de los atributos es importante y depende de cada

propiedad. Por ejemplo, el orden de la propiedad margin es arriba, derecha,
abajo, arriba, así que esta definición:
P {margin-top: 20px;
margin-right: 10px;
margin-left: 30px;
margin-bottom: 50px;
Es igual que esta:
P {margin: 20px 10px 50px 30px;}
Otro tipo de selectores son las llamadas pseudo-clases.

A veces es útil seleccionar elementos no por su tipo sino por su presentación.
Por ejemplo, el elemento A, admite tres pseudo-clases que son link (no
visitados), visited(visitados) y active (activos,). Las pseudo-clases se
especifican anteponiendo el carácter dos puntos a su nombre:
SELECTOR:pseudoclase {propiedad: valor}
Hay otra pseudo-clase muy utilizada y es hover, que se activa cuando se pasa
el puntero del ratón pasa por encima del vínculo, y que debe ponerse justo
antes deA:active:
A:link {color: white}
A:visited {color: red}
A:hover {color: yellow}
A:active {color: green}
De esta manera, podemos controlar la forma en que se verán los vínculos de

acuerdo a cómo se actúe sobre ellos.
Por último, tenemos los selectores llamados pseudo-elementos cuya sintaxis
es similar a las pseudo-clases pero se aplican a otro tipo de etiquetas.
Estos se aplican a la primera línea y a la primera letra de un párrafo:
p:first-letter {font-size: 200%;}
p:first-line {text-transform: uppercase}
Para entender las hojas de estilo debemos comprender que los elementos en
bloque y elementos en línea son rectángulos y que cada rectángulo o cuadro
tiene un área donde se ubica el contenido y opcionalmente, un borde. Entre el
borde y el contenido hay un área de relleno (padding) y entre el borde
opcional y el borde real hay un área de margen (margin) que separa los
elementos en bloque entre si.
El ancho de un elemento es igual al ancho del área de su contenido y el ancho
del rectángulo es la suma de los anchos del elemento, el relleno, el borde y el
margen. Lo mismo ocurre con la altura.
Los elementos en bloque poseen propiedades para establecer ancho (width) y
alto (height).
Los elementos en línea ocupan una o varias líneas del texto de un elemento en
bloque. En una misma línea puede haber varios elementos en línea y, en
general, no se puede especificar su tamaño pero si sus márgenes, bordes y
rellenos.
Elementos en línea Elementos en bloque

Datos de caracteres P
Entidades de caracteres H1, H2, H3, H4, H5, H6
TT, I, B, BIG, SMALL UL, OL
EM, STRONG, DFN, CODE, SAMP PRE
KBD, VAR, CITE, ABBR, ACRONYM DL, DIV, NOSCRIPT, BLOCKQUOTE
A, IMG, OBJECT, BR, SCRIPT FORM, HR, TABLE, FIELDSET, ADDRESS
MAP, Q, SUB, SUP, SPAN, BDO
INPUT, SELECT, TEXTAREA, LABEL, BUTTON

En cualquier sitio de las hojas de estilo se pueden añadir comentarios siempre
que se encuentren escritos entre los caracteres /* y */:
/* color verde cabeceras de nivel 1 */
H1 {font: 20px bold; color=#00FF00}
Las propiedades CSS

Las hojas de estilo requieren un estudio más profundo y, seguramente, serán
parte de algún otro tutorial, por ahora, veamos un resumen de las
propiedades que podemos incluir.
font-size establece el tamaño del texto en puntos (pt), pulgadas (in),
centímetros (cm), o pixeles (px)
{font-size: 12pt;}
{font-size: 1in;}
{font-size: 5cm;}
{font-size: 24px;}
font-family establece la fuente del texto. Se pueden especificar una o varias

fuentes alternativas:
{font-family: Arial;}
{font-family: Arial, Helvetica;}
{font-family: Arial, Helvetica, sans-serif;}
{font-family: "Courier New";}
font-weight establece el espesor de la fuente (extra-light, light, demi-

light, medium,demi-bold, bold, y extra-bold) y dependen en las fuentes:
{font-weight: medium;}
{font-weight: bold;}
font-style establece la fuente como cursiva:
{font-style: italic;}
font-variant establece una variante de la fuente. Puede ser normal y small-

caps(letras minúsculas similares a mayúsculas, pero más pequeñas):
{font-style: small-caps;}
line-height establece la separación entre líneas, que se puede expresar en

puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje (%):
{line-height: 20pt}
{line-height: 150%}
color establece el color del texto de acuerdo con su valor hexadecimal o
usando los nombres de colores:
{color: #33CC00}
{color: red}
background destaca secciones de una página, estableciendo un color o una

imagen de fondo:
{background: red;}
{background: #6633FF;}
{background: URL(URLimagen);}
background-color color del fondo en formato hexadecimal o transparent (sin

valor):
{background-color: #FF00000;}
background-image especifica la imagen de fondo o none (ninguna):
{background-image: url(URLimagen);}
{background-image: none;}
background-repeat indica si la imagen de fondo se repite y cómo lo hace. Los

valores pueden ser repeat, repeat-x, repeat-y y no-repeat:
{background-repeat: no-repeat;}
background-attachment indica si la imagen de fondo está fija (fixed) o no

(scroll):
{background-attachment: fixed;}
background-position indica la posición inicial de la imagen de fondo:
{background-position: left;}
word-spacing establece la separación entre caracteres. Puede tomar el

valor normal o una longitud que se añade al valor normal. Puede ser un valor
negativo:
{word-spacing: 1em;}
letter-spacing igual que el caso anterior:

{letter-spacing: 1cm;}
line-height establece la distancia entre las líneas de base de dos líneas

sucesivas. Puede ser normal, un número, una longitud o un porcentaje del
tamaño de la fuente del elemento:
{line-height: 1.2em;}
text-decoration permite remarcar el texto. Los valores soportados

son underline(subrayado), line-through (tachado), none (ninguno)
e italic (cursiva):
{text-decoration: underline}
{text-decoration: line-through}
text-align permite justificar los elementos HTML a la izquierda, al centro o a

la derecha:
{text-align: left}
{text-align: center}
{text-align: right}
text-indent provoca una indentación del texto. Se puede expresar en puntos,

pulgadas, centímetros o pixels:
{text-indent: 0.5cm;}
text-transform puede ser capitalize (la primera letra de cada palabra en

mayúsculas),uppercase (todo en mayúsculas), lowercase (todo en minúsculas)
y none (neutraliza todo):
{text-transform: uppercase;}
vertical-align establece la alineación vertical de un elemento en línea y

puede serbaseline, sub, super, top, text-top, middle, bottom, text-bottom,
o un porcentaje:
{vertical-align: middle;}
margin margin-left margin-right margin-botton margin-top establecen los

márgenes. Se pueden especificar en puntos, pulgadas (inches), centímetros o
pixeles (se pueden usar valores negativos). Con margin se engloban las cuatro
propiedades con cuatro valores (top, right, bottom, left):
{margin: 10px 20px 5px 15px;}

{margin-left: 0.5in;}
{margin-right: 0.5in;}
{margin-top: 1in}
padding padding-top padding-right padding-bottom padding-left establecen

el relleno y sus valores son similares a margin excepto que no pueden tomar
valores negativos:
{padding: 10px 20px 5px 15px;}
{padding-left: 0.5in;}
{padding-right: 0.5in;}
{padding-top: 1in;}
border-width border-top-width border-right-width border-bottom-width

border-left-width establece el ancho del borde y puede
ser thin (delgado), medium(mediano), thick (grueso) o una longitud.
Con border-width se especifican los cuatro simultánemante:
{border-width: 1px 2px;}
border-color establece el color del borde:
{border-color: red;}
border-style indica el estilo de los cuatro bordes y

ser none (ninguno), dotted(punteado), dashed (a
trazos), solid (continuo), double (doble), groove (canal), ridge(cresta), inset
(bajorrelieve), o outset (altorrelieve):
{border-style : inset;}
border-top border-right border-bottom border-left establece las

propiedades de cada borde (ancho, color, estilo):
{border-top : 3px #000 dashed;}
{border-bottom : 3px #000 dashed;}
{border-right : 3px #000 double;}
{border-left : 3px #000 double;}

border es un resumen de todas las propiedades para los cuatro bordes (ancho,
color, estilo):
{border: 3px black double}
width especifica el ancho. Puede ser auto, una longitud, o un porcentaje del
elemento padre:
{width: 100px;}
height especifica el alto. Puede ser auto, una longitud, o un porcentaje del
elemento padre:
{height: 100px;}
float indica que un elemento flota a la izquierda (left), a la derecha (right) o

que no es un objeto flotante (none):
{float: right;}
clear indica si un elemento puede tener objetos flotantes a sus lados. Con
clear el elemento se mueve hacia abajo hasta quedar debajo del objeto que
flota. Conclear:both no se permite que haya un objeto flotante a ningún lado
y con clear:nonese permiten objetos flotantes a ambos lados:
{clear: both;}
display indica si un elemento es en bloque (block), en línea (inline), si es un

objeto de lista (list-item) o si no debe ser representado (none):
{display: block;}
white-space establece cómo tratar a los espacios contenidos en un elemento

en bloque. Con el valor normal, varios espacios seguidos se convierten en uno
solo. Con el valor pre se comportan como si utilizarámos la etiqueta PRE (se
conservan los espacios). Con el valor nowrap sólo se producen saltos de línea
donde haya etiquetasBR:
{white-space: nowrap;}
list-style-type establece el estilo de numeración de la lista. Puede

ser: disc (un círculo relleno), circle (un círculo hueco), square (un
cuadrado), decimal (números), lower-roman (números romanos en
minúscula), upper-roman (números romanos en mayúscula), lower-
alpha (letras minúsculas), upper-alpha (letras mayúsculas) o none(ningún
marcador):
{list-style-type: disk;}
list-style-image es una variante de list-style-type que se utiliza cuando se
quiere tener una imagen personalizada:
{list-style-image: url(URLimagen);}
list-style-position indica dónde se coloca el marcador y puede tomar los

valores inside(interior) y outside (exterior):
{list-style-position: inside;}
list-style resume todas las anteriores (tipo, posición, margen):
{list-style: url(URLimagen) circle;}
HTML dinámico
DHTML (Dynamic HTML, HTML dinámico) está basado en la idea de convertir
las etiquetas HTML en objetos que pueden ser programados mediante
JavaScript u otros lenguajes. de esta manera, la página puede ser modificada
o tener cierta interacción con los visitantes.
Normalmente, podemos agregar una imagen con la etiqueta IMG,
dimensionarla, alinearla y, por supuesto, establecer su fuente. Una vez que el
navegador la cargue y la muestre, permanecerá en la pantalla sin
alteraciones.
Con el DHTML podríamos conseguir que, ante ciertas acciones del usuario, la
imagen cambie alguna de sus propiedades sin que tenga que recargarse la
página.
Una de las técnicas más simples es cambiar el archivo de la imagen. Esta es
una etiqueta normal:
<IMG SRC="URLimagen">
Para convertirla en un objeto al que se pueda hace referencia desde un

lenguaje, basta añadirle el atributo ID y darle un nombre único:
<IMG SRC="URLimagen" ID="unnombre">
La imagen se cargará normalmente pero ahora, en cualquier parte del

documento HTML podemos incluir rutinas JavaScript que la modifiquen. Para
esto, usamos los llamados eventos, atributos comunes a casi todas las
etiquetas y que ejecutan esos scripts cuando se produce determinada
situación. Los más comunes sononmouseclick, onmouseover y onmouseout.
En forma genérica, sería algo así:
<IMG SRC="URLimagen" ID="unnombre"
onmouseclick="rutinascript">
Las rutinas scripts son complejas pero hay algunas que podemos utilizar sin
tener demasiado conocimiento.
El código del ejemplo es el siguiente:
<img src="imagen1" id="demo01"
onmouseover="getElementById('demo01').src='imagen2';" />
Como se ve, hay dos distintos, uno para la imagen de la izquieda y otro para el
de la derecha. El primero de ellos es el que usamos normalmente, el segundo
es una variante a utilizar cuando el servidor en que nos encontramos no lo
acepte. La forma general es:
getElementById('nombreID').propiedad='valor';
En ambos casos, la propiedad es src o sea la fuente de la imagen y el valor es

la URL de la imagen.
Por supuesto, falta algo, cuando la imagen cambia, no podemos restaurarla,
así que le agregamos el evento onmouseout e invertimos el preoceso:
Cuyo código sería:
<img src="imagen1" id="demo03"
onmouseover="getElementById('demo03').src='imagen2';"
onmouseout="getElementById('demo03').src='imagen1';" />
Aquí, el valor de ID del ejemplo es otro ya que debe ser un nombre único. Eso,
que puede ser una desventaja es lo que nos permite no solo cambiar la
apariencia de un elemento con un efecto rollover:
AL PASAR EL CURSOR SOBRE ESTE PARRAFO, CAMBIA DE COLOR
<P ID=”demo04″
onMouseOver=”getElementById(‘demo04′).style.color=’red’;”
onMouseOut=”getElementById(‘demo04′).style.color=’black’;”>
[.... Texto del párrafo ...]
</P>
Donde getElementById('demo04').style.color es la propiedad color de la

propiedad estilo del objeto en uso, en este caso P.
También podemos cambiar las propiedades de cualquier objeto de la página,
siempre que lo hayamos identificado:
ESTE PARRAFO NO TIENE EL EFECTO ROLLOVER
ESTE PARRAFO CAMBIA EL COLOR DEL PARRAFO ANTERIOR
<P ID="demo05">
[.... El párrafo que no tiene el efecto ...]
</P>
<P
onMouseOver="getElementById('demo05').style.color='red';"
onMouseOut="getElementById('demo05').style.color='black';">
[.... El párrafo con el efecto ...]
</P>
Lo podemos complicar un poco más, haciendo que ambos cambien:
ESTE PARRAFO CAMBIA DE COLOR AL PASAR EL MOUSE
ESTE PARRAFO CAMBIA DE COLOR Y TAMBIÉN CAMBIA AL PARRAFO ANTERIOR

<P id="demo06"
onmouseover="getElementById('demo06').style.color = 'red';"
onmouseout="getElementById('demo06').style.color = 'black';">
[.... El primer párrafo ...]
</P>
<P id="demo07"
onmouseover="getElementById('demo07').style.color = 'blue';
getElementById('demo06').style.color = 'blue';"
onmouseout="getElementById('demo07').style.color = 'black';
getElementById('demo06').style.color = 'black';">
[.... El segundo párrafo ...]
</P>
Casi cualquier propiedad puede ser cambiada, algunas como las que asignan el
tamaño, harán que el espacio necesario para el elemento se re-dimensione.
PARA CAMBIAR EL COLOR DE FONDO:

utilizar getElementById('xxx').style.backgroundColor
En resumen, para cambiar el estilo de cualquier elemento de la página, se

puede utilizar cualquier rutina interceptora de eventos, y establecer la nueva
propiedad en forma directa dentro del mismo objeto mediante:
getElementById('identificador').style.propiedad = 'valor'
Hasta aquí llegamos, ya es el momento de salir a investigar. Ahora sí, es

tiempo de navegar y mirar los códigos fuente de las páginas. Aprender de lo
que otros han hecho. Eventualmente, surgirán preguntas y los errores serán
inevitables. Sólo hay una solución, probar, probar, probar, una y otra vez.

Tutorial HTML

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Tutorial HTML

Caricato da

Copyright:

Formati disponibili

Tutorial HTML

La regla general dice que puede aprenderse cómo hacer una

[... contenido ...]

A veces, es necesario agregar datos adicionales a una instrucción, en ese caso,

<ETIQUETA atributo1="valor" atributo2="valor">

... contenido ...

Eventualmente, ciertas etiquetas no forman bloques ya que son

Este concepto de etiquetas de apertura y cierre es la clave para entender el

Dentro del BODY se ubica todo lo que aparecerá en la pantalla (texto,

Las etiquetas pueden estar escritas en mayúsculas o minúsculas de manera

Los navegadores no reconocen ni saltos de línea ni tabulaciones ni espacios en

[Esto lo escribo en una línea. ]

[a la izquierda (es el valor por defecto)]

De manera elemental podemos dar formato a los textos utilizando etiquetas

<H1> ... </H1>

<H2> ... </H2>,

<H3> ... </H3>

<H4> ... </H4>

<H6> ... </H6>

[Este texto estará centrado]

[Este texto está comprendido entres dos líneas horizontales]

Esta etiqueta tiene los siguientes atributos:

(sin sombra) algunos navegadores muestran las líneas horizontales con

size=valor grosor de la línea em pixeles

width=valor ancho de la línea

Aunque los navegadores no lo requieran, es conveniente que nos

IMPORTANTE: cuidar el orden en que se colocan las etiquetas.

[un texto centrado en la pantalla.]

La forma correcta de escribirlo sería esta:

[un texto centrado en la pantalla.]

Aunque las indentaciones del texto no son necesarias, es conveniente

<TITLE>La primera pagina</TITLE>

Y aquí se coloca un texto cualquiera.

Aunque lo escribamos en líneas separadas, los navegadores

mostrarán un sólo párrafo. Para separar un texto de otro,

debemos utilizar la etiqueta P:

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit,

sed diam nonummy nibh euismod

dolore magna aliquam erat volutpat.

Textos, textos, textos

<BR /> <P> </P>

<BR /> <P> </P>

<BR /> <P> </P>

<BR /> <P> </P>

Al escribir el texto, si ponemos más de un espacio en blanco entre dos

y en negrita utilizando la etiqueta STRONG

en itálica utilizando la etiqueta I

y en itálica utilizando la etiqueta EM

y texto TACHADO con la etiqueta STRIKE

texto subrayado con la etiqueta U

texto en negrita, itálica y centrado

texto en negrita, itálica y no centrado

En matemáticas se utilizan índices y subíndices, estos se consiguen escrbir

Para escribir Vx:

Utilizando BIG: ABCDEFG abcdefg 01234567

Utilizando SMALL: ABCDEFG abcdefg 01234567

Anidando estas etiquetas, el efecto se va acumulado ya que toma como

mucho más grande

aún más grande

mucho más grande

tal y como lo escribamos

< para < (less than, menor que)

> para > (greater than, mayor que)

& para & (ampersand)

" para " (double quotation)