Html

1.INTRODUCCION
1.1. Antes de empezar
Para escribir las líneas e instrucciones de un programa HTML vas a necesitas un editor
de textos, en principio te sirve cualquiera, hasta el propio bloc de notas de Windows,
luego basta con que lo guardes con la extensión html o htm; a partir de ese momento ya
será reconocido como página web por el explorador y por supuesto por los navegadores
de Internet.
Pero hacerlo así, puede suponer que tengas que realizar un enorme esfuerzo tanto en el
aprendizaje de HTML, como en el tiempo dedicado a construir tus páginas web, y hoy
por hoy, tal dedicación ya no es necesaria. Existen una serie de editores especializados
en este lenguaje que realizan la mayor parte de las acciones mediante menús y botones
sin tener que escribirlas en código HTML, de eso ya se encarga el propio editor.
El mismo Windows 98 viene con uno de estos editores de los que te hablo, se trata de
FrontPage Express, según parece es una versión reducida de FrontPage que es uno de
los mejores editores que existen para este tipo de programación. Prácticamente solo
tienes que escribir el texto y poco más, pues el resto ( establecer enlaces a paginas o
archivos, insertar colores de fondo o imágenes, insertar tablas, listas, propiedades de
fuente y texto, etc..) se establece mediante menús existentes en la barra de herramientas,
con lo cual te ahorras tener que aprender como utilizar todo eso en código HTML.
Este tipo de editores se llaman "WYSIWYG", que mas o menos quiere significar que lo
que se ve es lo que se obtiene, por lo que mientras trabajas estas viendo la apariencia
real del formato y diseño de la página y no el código; para cuando tengas que insertar
fragmentos en código HTML para implementar acciones no previstas por el editor,
tendrás una opción para ver la página en código fuente (HTML) y allí podrás escribirlas.
Para que lo entiendas, si estas utilizando Internet Explorer, abre en la barra de
herramientas el menú "ver" y dentro haz clic sobre "código fuente", luego sigue leyendo
en este punto. ¿Que te ha parecido?, pues todo lo que hayas visto entre las expresiones
<HTML>...</HTML> es la programación de esta página, parece complicado, pero en
realidad con este tipo de editores tu estarás escribiendo el texto tal y como lo ves ahora,
como en cualquier editor normal, todo lo demás se insertará mediante menús.
Al margen de que con este manual vas a conocer bien la programación en HTML,
considero imprescindible, por las razones que ya te he expuesto, que te consigas uno de
estos editores. Entre los grandes del tema destacan el FrontPage y Macro media
Dreamweaver, pero también hay un buen número del tipo shareware que podrás
encontrar en la mayoría de webs que ofrezcan recursos gratuitos.
1.2. Empezando
HTML son las siglas de "Hyper Text Markup Language", es un lenguaje de
programación que permite construir documentos para que puedan ser visualizados por
los navegadores de Internet. Hasta la fecha se han producido diversos niveles de
estandarización o revisiones del citado lenguaje; la última es la 3.0 y será la utilizada en
este manual. Solo a partir de Netscape 2.x y Explorer 3.x serán prácticamente
1

reconocidas todas las instrucciones que se citan, otros navegadores mas antiguos pueden
no reconocer alguna de ellas.
El lenguaje HTML consta de una serie de instrucciones que indican al navegador, la
forma de representar los elementos del documento. Todas las instrucciones se designan
mediante una palabra clave que es la que reconoce el navegador. A su vez cada una de
estas instrucciones posee una serie de parámetros que la definen.
Hay dos tipos principales de instrucciones: Abiertas y Cerradas. En las primeras, la
palabra clave se pone únicamente al principio de la instrucción. En las segundas la
palabra clave se pone al principio y al final. En ambos casos las palabras clave van
encerradas entre los símbolos < y > y además en la del final se incluye el signo / antes
de la palabra.
<HTML>..................</HTML>
Esta es una instrucción cerrada, y la primera y fundamental para programar en este
lenguaje. Todo, absolutamente todo lo que contiene el documento HTML, para que sea
reconocido como tal por el navegador debe incluirse dentro de esta instrucción
1.3. Aprender rápido
Como ya te indique anteriormente, con este manual vas a tener suficiente para poder
construir tu propia web, no obstante y para poder aplicar lo que vas a ir aprendiendo
construiremos paso a paso una web muy sencilla a medida que vayamos conociendo
cada una de las instrucciones y sus parámetros. Esta web de ejemplo estará incluida en
unos cuadros de color amarillo.
¿Quieres ir mas rápido?, no tienes paciencia para seguir el tutorial paso a paso. Hazte
con uno de los editores que te he indicado más arriba y sigue solamente los cuadros de
ejemplo, limítate a usar el manual como recordatorio y para incluir las instrucciones que
no tenga el editor en su menú. Seguramente los únicos apartados de este manual a los
que deberás prestar mas atención serán a los FRAMES y FORMULARIOS, para el
resto no tendrás prácticamente necesidad de conocer programación HTML.
Para editar la Web de ejemplo que vamos a construir, abre una carpeta en el directorio
principal de tu disco duro, con el nombre que quieras, dentro iras guardando todas las
páginas y archivos relacionados. Para empezar abrirás seis documentos en los que
escribirás el código que viene a continuación, si es un editor especializado no escribas
nada, míralo en código HTML y verás que ya tiene escrito algo parecido:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Una vez incluido este código guardalos con los siguientes nombres: index.htm,
2

portada.htm, cabeza.htm, menu.htm, form.htm y tablero.htm. También deberias incluir
en este directorio, junto a los archivos anteriores, un archivo de imagen que utilizaremos
en su correspondiente capítulo. Ten en cuenta que solo hay dos formatos de imágenes
que todos los navegadores modernos reconocen. Son las imágenes GIF y JPG, si no
tienes puedes convertirlas con algún editor o visor de imágenes.
NOTA: No utilices acentos en los nombres de archivos y carpetas, causarán errores en
el navegador.
2. ESTRUCTURA DEL DOCUMENTO
2.1. Cabecera
La instrucción <HEAD></HEAD> delimita la cabecera del documento. Dentro de ella
pueden incluirse otras instrucciones importantes: La instrucción cerrada <TITLE>
donde se incluirá el titulo de la página web:
<TITLE>Pagina de ejemplo</TITLE>
Y la instrucción <META> que es abierta, sirve para indicar el contenido y las palabras
clave de la web y es muy importante dado que la mayoria de los buscadores existentes
en internet utilizan el contenido de esta instrucción para incluir la página en sus bases de
datos. Esta instrucción cuenta entre otros con los parámetros name y content.
Los parámetros pueden indicarse o no, sino se establecen el navegador entenderá que
debe usar los designados por defecto. Si en una instrucción se incluyen parámetros estos
deben colocarse junto a la palabra clave de inicio y antes del simbolo >. Los valores
específicos de cada parámetro van encerrados entre comillas y detrás del signo =.
<META name="Pagina de prueba" content="Página creada para aprender a construir
un documento HTML que contendrá todo lo que se aprenda en este tutorial">
El ejemplo anterior indica el nombre que le hemos dado a la página y contiene un breve
resumen definiendo su contenido
<META name="keywords" content="color texto listas tablas enlaces imagenes">
Este ejemplo indicará a los buscadores las palabras clave de la web (keywords), es decir
sus contenidos, las cuales deben ir en el parámetro content separadas entre ellas por un
espacio.
Antes de continuar, añadiremos lo aprendido a nuestra pagina index.htm:
<HTML>
<HEAD>
<TITLE>Pagina de ejemplo</TITLE>
<META name="Pagina de prueba" content="Página creada para aprender a construir
3

un documento HTML que contendrá todo lo que se aprenda en este tutorial">
<META name="keywords" content="color texto listas tablas enlaces imagenes">
</HEAD>
<BODY>
</BODY>
</HTML>
NOTA: Siempre debes guardar la primera página de tu web con el nombre
"index.htm", pues los navegadores tienen establecido que la primera página a abrir de
una web es la que tiene este nombre.
2.2. Cuerpo
Dentro de la instrucción cerrada <BODY> es donde va a ir todo el contenido que
queramos que tenga nuestra página web. En primer lugar veamos los parámetros que
tiene esta instrucción y para que sirven:
background="nombre del fichero". Si queremos que el fondo del documento sea
alguna imagen este es el parámetro que debe utilizarse, en el espacio entre comillas
debe ir el nombre del fichero. Si no esta en el mismo directorio debe ir con la dirección.
Ten en cuenta que si la imagen es pequeña y no rellena todo el fondo del documento, se
reproducirá tantas veces como sea necesario para rellenarlo. Es como en los fondos del
escritorio en windows.
bgcolor="código del color". Si no utilizaste el parámetro anterior para insertar algún
archivo de fondo, con este podrás ponerle un color. Aúnque pongas un color no se verá
si has utilizado el parámetro background con algún archivo.
text="código de color". Indica un color para el texto que incluyamos en nuestro
documento. Por defecto es negro.
link="código de color". Indica el color de los textos que dan acceso a un hiperenlace.
Por defecto es azul
vlink="código de color". Indica el color de los textos que dan acceso a un hiperenlace
que ya hemos visitado con el navegador. Por defecto es púrpura.
alink="código de color". Indica el color de los textos que dan acceso a un hiperenlace
que está activo. Por defecto es rojo.
Los códigos de color son números hexadecimales compuestos por tres pares de cifras
que indican la proporción de los colores primarios: rojo, verde y azul. El código se
antecede del simbolo#. Asi los colores variarán desde" #000000" que es el negro hasta
el "#FFFFFF" que es el blanco. Entre ellos, por citar alguno, tienes el rojo "#FF0000" o
el azul "#0000FF".
El primer par de cifras indican la proporción de color rojo, el segundo par de cifras la
proporción de color verde y las dos últimas la proporción de color azul. Cada par de
cifras hexadecimales nos permite un rango de 0 a 255. Combinando las proporciones de
cada color primario obtendremos los diferentes colores.
De cualquier manera en tu editor de HTML podrás obtener el código de color
correspondiente escogiendo directamente el color desde una paleta.
4

En HTML existe la posibilidad de incluir comentarios que no serán mostrados por el
visor y son útiles para realizar anotaciones que nos indiquen lo que estamos haciendo en
una determinada parte del documento. Esto puede resultar importante a medida que la
página contenga más cosas y tenga un código muy extenso.
Para incluir comentarios en la página Web se utiliza la instrucción :

Vamos a poner titulo, color de fondo amarillo (me gusta el amarillo), texto negro y un
comentario a nuestra página portada.htm:
<HTML>
<HEAD>
<TITLE>Portada</TITLE>
</HEAD>

<BODY bgcolor"#FFFF00" text"#000000">
</BODY>
</HTML>
.TEXTO
3.1. Juego de caracteres
Este apartado puedes saltartelo si quieres, basta que sepas que todos los visores de
páginas Web actuales soportan todos los caracteres gráficos de la especificación ISO
8859-1, que permiten escribir textos en la mayoria de los paises occidentales. Si tienes
que insertar en tu web algún caracter fuera de lo normal, lee este apartado.
Se han definido dos formas de representar caracteres especiales usando solamente el
código ASCII de 7 bits. Estos caracteres pueden ser representados por un código
númerico o una entidad cuando deseemos que aparezcan en el documento "tal cual". Las
entidades comienzan por el simbolo & y terminan con el simbolo ;.
A continuación están las principales entidades:
Carácter Código Entidad Carácter Código Entidad Carácter Código Entidad Carácter Código Entidad
! ! -- " " -- # # -- $ $ --
% % -- & & -- ' ' -- ( ( --
) ) -- * * -- + + -- ´ , --
- - -- . . -- / / -- : : --
; ; -- < < -- = = -- > > --
? ? -- @ @ -- [ [ -- \ --
] ] -- ^ ^ -- _ _ -- ` ` --
5

{ { -- | | -- } } -- ˜ ~ --
&   nbsp ¡ ¡ iexcl ¢ ¢ cent £ £ pound
¤ ¤ curren ¥ ¥ yen ¦ ¦ brvbar § § sect
¨ ¨ uml (c) © copy ª ª ordf « « laquo
¬ ¬ not  shy (r) ® reg ¯ ¯ macr
° ° deg ± ± plusm ² ² sup2 ³ ³ sup3
´ ´ acute µ µ micro ¶ ¶ para · · middot
¸ ¸ cedil ¹ ¹ sup1 º º ordm » » raquo
1/4 ¼ frac14 1/2 ½ frac12 3/4 ¾ frac34 ¿ ¿ iquest
À À Agrave Á Á Aacute Â Â Acirc Ã Ã Atilde
Ä Ä Auml Å Å Aring Æ Æ AEling Ç Ç Ccedil
È È Egrave É É Eacute Ê Ê Ecirc Ë Ë Euml
Ì Ì Igrave Í Í Iacute Î Î Icirc Ï Ï Iuml
Ð Ð Eth Ñ Ñ Ntilde Ò Ò Ograve Ó Ó Oacute
Ô Ô Ocirc Õ Õ Otilde Ö Ö Ouml × × times
Ø Ø Oslash Ù Ù Ugrave Ú Ú Uacute Û Û Ucirc
Ü Ü Uuml Ý Ý Yacute Þ Þ Thorn ß ß szlig
à à agrave á á aacute â â acirc ã ã atilde
ä ä auml å å aring æ æ aeling ç ç ccedil
è è egrave é é eacute ê ê ecirc ë ë euml
ì ì igrave í í iacute î î icirc ï ï iuml
ð ð eth ñ ñ ntilde ò ò ograve ó ó oacute
ô ô ocirc õ õ otilde ö ö ouml ÷ ÷ divide
ø ø oslash ù ù ugrave ú ú uacute û û ucirc
ü ü uuml ý ý yacute þ þ thorn ÿ ÿ yuml
Por lo tanto la palabra página la podríamos escribir como:
página
página
página
3.2. Espaciados y saltos de línea
En HTML sólo se reconoce un espacio entre palabra y palabra, el resto de los espacios
serán ignorados por el visor.Asimismo tampoco se representan tabulaciones, retornos de
carro, etc... Para ello existen unas instrucciones específicas que indican estos códigos.
La instrucción <PRE></PRE> obliga a visualizar el texto tal y como ha sido escrito,
6

respetando tabulaciones, espacios, retornos de carro, etc. ...Para indicar un salto de línea
se utiliza <BR> y para un cambio de párrafo ( una línea en blanco en medio ) se utiliza
<P>.
La instrucción <P> puede usarse también como cerrada <P></P> indicando de esta
manera los atributos de un párrafo en concreto. Cuando se usa de esta manera tiene el
parámetro align que indica al visor la forma de justificar el párrafo. Los valores posibles
de este parámetro son left, right y center.
SI PONEMOS SE VERA ASI
Esto es una frase Esto es una frase
<PRE>Esto es una frase</PRE> Esto es una frase
Esto<BR> es una<P> frase
Esto
es una
frase
<P align="right">párrafo justificado a
laderecha </P> párrafo justificado a la derecha
<P align="center">párrafo de texto
centrado </P> párrafo de texto centrado
La Instrución <HR> muestra una línea horizontal de tamaño determinable. Utilizada sin
ningún parámetro mostraría una línea horizontal que ocuparía todo el ancho de la
página. Tiene los siguientes parámetros opcionales:
align = "posición". Alinea la línea a la izquierda (left), a la derecha (right) o la centra
(center).
noshade. No muestra sombra, evitando el efecto en tres dimensiones.
size = "número". Indica el grosor de la línea de pixels.
width = "número en tanto por ciento (%)". Indica el ancho de la línea en tanto por
ciento en función del ancho de ventana del visor. También se puede especificar un
número sin poner el simbolo de porcentaje, entonces indicaría el ancho de la línea en
pixels.
<HR align = "center" size="20" width="50%">
3.3. Cabeceras
En un documento de HTML se pueden indicar seis tipos de cabeceras. El texto que
escribamos entre el inicio y el fin de cada instrucción será el afectado por ella. Los
textos marcados como cabeceras provocan automáticamente un retorno de carro sin
necesidad de incluir la instrucción <BR>:
SI PONEMOS SE VERA ASI
7

<H1>Texto de prueba</H1>
Texto de prueba
<H2> Texto de prueba</H2>
Texto de prueba
Texto de prueba
Texto de prueba
Texto de prueba
<H6> Texto de prueba</H6> Texto de prueba
<H3>Texto de Prueba</H3>Esta es mi página.
Texto de Prueba
Esta es mi página.
NOTA: El uso de estas instrucciones puede ser útil para poner el título, pero puedes
prescindir de ellas, dado que ya podremos aumentar el tamaño de letra de cualquier
frase con los atributos de texto que veremos a continuación.
3.4. Atributos de texto
Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias instrucciones.
Algunas de ellas pueden ser no reconocidas por determinados visores de Internet:
Atributo Directiva Ejemplo Resultado
Negrita <B></B>
<B>Texto de
prueba</B>
Texto de prueba
Cursiva <I></I>
<I> Texto de
prueba</I>
Texto de prueba
Teletype <TT></TT>
<TT> Texto deT
prueba</TT>
Texto de prueba
Subrayado <U></U>
<U> Texto de
prueba</U>
Texto de prueba
Tachado <S></S>
<S> Texto de
prueba</S>
Texto de prueba
Parpadeo <BLINK></BLINK>
<BLINK> Texto de
prueba</BLINK>
Texto de prueba
Superíndice <SUP></SUP>
<SUP> Texto de
prueba</SUP>
Texto de prueba
Subíndice <SUB></SUB> <SUB> Texto de Texto de prueba
8

prueba</SUB>
Centrado <CENTER></CENTER>
<CENTER> Texto
de
prueba</CENTER>
Texto de prueba
Por otro lado la instrucción <FONT></FONT> nos permite variar el tamaño, el color y
el tipo de letra de un texto determinado. Utiliza para ello los parámetros size, bgcolor y
face.
size = "valor". Da al texto un tamaño en puntos determinado.
color ="código de color". Escribe el texto en el color cuyo código se especifica.
face ="nombre de font". Escribe el texto en el tipo de letra especificado. Si este tipo de
letra no existe en el ordenador que ve la página, se usará el tipo de fuente
predeterminado del navegador.
<FONT size="2" color ="#FF0000" face="Arial">Texto de prueba</FONT>
Existen otras instrucciones que realizan las mismas operaciones que las antes vistas en
los atributos del texto, asi <STRONG></STRONG> es igual que <B></B>,
<EM></EM> es igual que <I></I> y <STRIKE></STRIKE> es igual que <S></S>.
Añadiremos algo de lo aprendido en nuestra página portada.htm:
<HTML>
<HEAD>
</HEAD>
<p align="center"><font size="7"><strong>ESCRIBIENDO</strong></font></p>
<p align="left"><font size="3">Estamos empezando a escribir en esta página web
para ver que es lo que sucede, de paso probamos los parámetros que hemos
aprendido.</font></p>
<p align="left"><font size="3"><em>Ahora probamos a escribir en
cursiva</em></font><br>
<font size="3" face="Arial">Ahora probamos a escribir con otro tipo de letra y de
paso hemos hecho un salto de linea</font></p>
</BODY>
</HTML>
¡Hey! empieza a parecer un programa
4. LISTAS
Existen tres tipos de listas: numeradas, sin numerar y de definición.
4.1. Listas numeradas
9

Las listas numeradas representan los elementos de las lista numerando cada uno de ellos
según el lugar que ocupan. Para este tipo de lista se utiliza la instrucción <OL></OL>.
Cada uno de los elementos debe ir precedido de la instrucción <LI>. La instrucción
<OL> puede llevar los siguientes parámetros:
start ="número". Indica qué número será el primero de la lista. Si no se indica se
entiende que empezará por el número 1.
type ="tipo". Indica el tipo de numeración utilizada. Si no se indica se entiende que
será una lista ordenada numéricamente.
Los tipos posibles son:
l = Numéricamente (1,2,3,4, ... , etc.)
a = Letras minúsculas (a,b,c,d, ..., etc.)
A = Letras mayúsculas (A,B,C,D, ..., etc.)
i = Números romanos en minúsculas (i,ii,iii,iv,v,..., etc.)
I = Números romanos en mayúsculas (I,II,III,IV,V, ..., etc.)
SI PONEMOS SE VERÁ ASI
<OL>
<LI> Primero
<LI> Segundo
<LI> Tercero
</OL>
1. Primero
2. Segundo
3. Tercero
<OL type ="A">
<LI> Primero
<LI> Segundo
<LI> Tercero
</OL>
A. Primero
B. Segundo
C. Tercero
4.2. Listas sin numerar
Las listas sin numerar representan los elementos de la lista con una marca que antecede
a cada uno de ellos. Se utiliza la instrucción <UL></UL> para delimitar la lista, y <LI>
para indicar cada uno de los elementos. La instrucción <UL> puede contener el
parámetro type que indica la forma de la marca que antecede a cada elemento de la
lista. Los valores de type pueden ser disk (disco), circle (circulo)o square (cuadrado).
<UL type ="circle">
<LI> Primero
<LI> Segundo
<LI> Tercero
</UL>
• Primero
• Segundo
• Tercero
4.3. Listas de definición
10

Las listas de definición muestran los elementos tipo diccionario, o sea, término y
definición. Se utiliza para ellas la instrucción <DL></DL>. El elemento marcado como
término se antecede de la instrucción <DT>, el marcado como definición se antecede de
la instrucción <DD>.
<DL>
<DT> PRIMERO
<DD>El número uno
<DT>SEGUNDO
<DD>El número dos
<DT>TERCERO
<DD>El número tres
</DL>
PRIMERO
El número uno
SEGUNDO
El número dos
TERCERO
El número tres
4.4. Apuntes finales sobre las listas.
Existen otros dos tipos de listas menos comunes. Las listas de menú y las de directorio
que se comportan igual que las listas sin numerar. La lista de menú utiliza la instrucción
<MENU></MENU> y los elementos se anteceden de <LI>. El resultado es una lista
sin numerar más compacta, con menos espacio interlineal. La lista de directorio utiliza
la instrucción <DIR></DIR> y los elementos se anteceden de <LI>.
Para seguir con nuestra intención de construir una Web, vamos a poner una de las listas
que hemos aprendido en el documento menu.htm:
<HTML>
<HEAD>
<TITLE>Indice</TITLE>
</HEAD>
<BODY bgcolor"#000000">
<OL>
<LI> Tablero
<LI> Formulario
<LI> Volver
</OL>
</BODY>
</HTML>
5. TABLAS
Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas,
imágenes, etc.) en diferentes filas y columnas separadas entre sí. Es una herramienta
muy útil para ordenar los contenidos. Se define mediante la instrucción
<TABLE></TABLE>. Los parámetros opcionales de esta directiva son:
11

border ="número". Indica el ancho del borde de la tabla en puntos.
cellspacing ="número". Indica el espacio en puntos que separa las celdas que están
dentro de la tabla.
cellpadding ="número". Indica el espacio en puntos que separa el borde de cada celda
y el contenido de ésta.
width ="número o %". Indica la anchura de la tabla en puntos o en porcentaje en
función del ancho de la ventana del visor. Si no se indica este parámetro, el ancho se
adecuará al tamaño de los contenidos de las celdas.
height ="número o %". Indica el alto de la tabla en puntos o en porcentaje en función
del alto de la ventana del visor. Si no se indica este parámetro, la altura se adecuará a la
altura de los contenidos de las celdas.
bgcolor = "código de color". Especifica el color de fondo de toda la tabla.
Para definir las celdas que componen la tabla se utilizan las instrucciones <TD> y
<TH>. <TD> indica una celda normal, y <TH> indica una celda de cabecera, el
contenido será resaltado en negrita y en un tamaño ligeramente superior al normal. Los
parámetros opcionales de ambas instrucciones son:
align ="valor". Indica como se debe alinear el contenido de la celda. Sus valores son: a
la izquierda (left), a la derecha (right), centrado (center) o justificado (justify).
valign ="valor". Indica la alineación vertical del contenido de la celda. Sus valores son:
en la parte superior (top), en la inferior (bottom), o en el centro (middle).
rowspan = "número". Indica el número de filas que ocupará la celda. Por defecto
ocupa una sola fila.
colspan =" número". Indica el número de columnas que ocupará la celda. Por defecto
ocupa una sola columna.
width ="número o %". Indica la anchura de la columna en puntos o en porcentaje en
función del ancho de la ventana del visor. Si no se indica este parámetro, el ancho se
adecuará al tamaño de los contenidos. Este parámetro sólo funciona en los navegadores
modernos.
bgcolor = "código de color". Especifica el color de fondo de la celda.
Para indicar que acaba una fila de celdas se utiliza la instrucción <TR>. A continuación
mostraremos un ejemplo de una tabla que contiene solo texto. Como se indicó
anteriormente el contenido de las celdas puede ser cualquier elemento de HTML, un
texto, una imagen, un hiperenlace, una lista, etc.
EJEMPLO
12

<TABLE border ="4" cellspacing ="4" cellpadding ="4" width ="80%">
<TH align ="center">Primero
<TH align ="center" colspan ="2">Segundo
<TR>
<TD align ="left">uno
<TD align ="left">dos
<TD align ="left">tres
<TR>
<TD align ="left">cuatro
<TD align ="left">cinco
<TD align ="left">seis
</TABLE>
SE VERÁ ASI
Primero Segundo
uno dos tres
cuatro cinco seis
Las instrucciones <TD> y <TH> son cerradas según el estándar de HTML, es decir,
que un elemento de la tabla <TD> debería cerrarse con un </TD>, sin embargo los
visores asumen que un elemento de la tabla, queda automáticamente "cerrado" cuando
se "abre" el siguiente.
Continuando con nuestra web abriremos el archivo tablero.htm e insertaremos la tabla
anterior:
<HTML>
<HEAD>
<TITLE>Tablero</TITLE>
</HEAD>
<TABLE border ="4" cellspacing ="4" cellpadding ="4" width ="80%">
<TH align ="center">Primero
<TH align ="center" colspan ="2">Segundo
<TR>
<TD align ="left">uno
<TD align ="left">dos
<TD align ="left">tres
<TR>
<TD align ="left">cuatro
<TD align ="left">cinco
<TD align ="left">seis
</TABLE>
</BODY>
13

</HTML>
6. IMÁGENES
6.1. Insertar imágenes
Hasta ahora hemos escrito texto en nuestra Web. Vamos a ver ahora como insertar
imágenes. Para incluir una imagen en nuestra página Web utilizaremos la instrucción
<IMG>. Recuerda que actualmente los navegadoes solo reconocen dos formatos: GIF y
JPG. Cualquier otro tipo de fichero gráfico o de imagen (BMP, PC , CDR ,etc.) no será
mostrado por el visor, a no ser que disponga de un programa externo que permita su
visualización. La instrucción <IMG> tiene varios parámetros:
src = "imagen". Indica el nombre del fichero gráfico a mostrar.
alt = "texto". Mostrará el texto indicado en el caso de que el navegador utilizado para
ver la página no sea capaz de visualizar la imagen.
lowscr = "imagen". Muestra una segunda imagen "superpuesta" sobre la primera una
vez se carga la página. Este parámetro no es reconocido por la totalidad de los
navegadores, así que en la mayoría de los casos será ignorado mostrándose sólo la
primera imagen. Netscape muestra la imagen indicada por lowscr en primer lugar, y
posteriormente la indicada por src. Si las imágenes son iguales pero tienen distinta
resolución se conseguirá un efecto tipo "Fade". Si las imágenes son de distinto tamaño
la imagen indicada en src se redimensionará al tamaño indicado por la imagen
referenciada en lowscr.
align ="valor". Indica cómo se alineará el texto que siga a la imagen. Los valores son:
(top) alinea el texto con la parte superior de la imagen, (middle) con la parte central y
(bottom) con la parte inferior.
border ="número". Indica el tamaño del borde de la imagen. A toda imagen se le
asigna un borde que será visible cuando la imagen forma parte de un hiperenlace.
height = "número o %". Indica el alto de la imagen en puntos o porcentaje. Se usa para
variar el tamaño de la imagen original.
width ="número o %". Indica el ancho de la imagen en puntos o porcentaje. Se usa
para variar el tamaño de la imagen original.
hspace ="número". Indica el número de espacios horizontales, en puntos, que
separarán la imagen del texto que la siga y la anteceda.
vspace ="número". Indica el número de puntos verticales que separarán la imagen del
texto que la siga y la anteceda.
ismap/usemap. Indica que la imagen es un MAPA. Veremos estos parámetros en el
siguiente apartado.
14

SI PONEMOS SE VERA ASÍ
Te gusta<IMG src ="imagen.jpg" alt="Lastima,
no puedes verla"
height="120" width="120" align="middle"
hspace="20">Mi imagen
Te gusta Mi
imagen
Si el visor no pudiese visualizar el gráfico.......
Te gusta Lastima, no puedes verla
Mi imagen
La imagen a mostrar puede encontrarse en el mismo lugar (URL) que la página Web. Si
no fuese así, el nombre de la imagen ha de contener la URL donde se encuentre la
imagen. Ejemplo:
<IMG src="http://www.unsitio.com/imagen.gif">
Para probar lo aprendido insertaremos la imagen en la página portada.htm. Allí donde
en el ejemplo se consigne imagen.jpg deberás escribir el nombre de archivo de tu
imagen con su extensión gif o jpg:
<HTML>
<HEAD>
</HEAD>
<p align="center"><font size="7"><strong>ESCRIBIENDO</strong></font></p>
<p align="left"><font size="3">Estamos empezando a escribir en esta página web
para ver que es lo que sucede, de paso probamos los parámetros que hemos
aprendido.</font></p>
<p align="left"><font size="3"><em>Ahora probamos a escribir en
cursiva</em></font><br>
<font size="3" face="Arial">Ahora probamos a escribir con otro tipo de letra y de
paso hemos hecho un salto de linea</font></p>
<p align="center">Te gusta<IMG src ="imagen.jpg" alt="Lastima, no puedes verla"
height="120" width="120" align="middle" hspace="20">Mi imagen</p>
</BODY>
</HTML>
6.2. Mapas
15

Un Mapa es una imagen que permite realizar diferentes hiperenlaces en función de la
"zona" de la imagen que se pulse. Las instrucciones para crear mapas son
<MAP></MAP> y <AREA>.La instrucción <MAP> identifica al mapa y tiene el
parámetro name para indicar el nombre del mapa. La instrucción <AREA> define las
áreas sensibles de la imagen. Tiene los siguientes parámetros obligatorios:
shape = "tipo". Indica el tipo de área a definir. Los tipos de área pueden ser los
siguientes : (rect) Area rectangular. Se deben especificar las coordenadas de la esquina
superior izquierda y las de la esquina inferior derecha. (poly) Polígono. Se deben
especificar las coordenadas de todos los vértices del polígono. El visor se encarga de
"cerrar" la figura. (circle) Circulo. Se debe especificar en primer lugar las coordenadas
del centro del círculo y a continuación el valor del radio (en puntos).
coords = "coordenadas". Indica las coordenadas de la figura indicada con shape.
href = "url". Indica la dirección a la que se accede si se pulsa en la zona delimitada por
el área indicada.
Si dos áreas se superponen, se ejecutará la que se encuentre en primer lugar en la
definición del mapa. Es importante definir una última área que abarque la totalidad del
gráfico para direccionar a una URL "por defecto", con el objeto de contemplar el caso
de que no se pulse sobre un área definida.
Aunque el tema de los mapas sobrepasa las pretensiones de este curso, vamos a ver un
ejemplo ficticio:.
<MAP name = "casa">
<AREA shape = "poly" coords = "2,62,57,62,28,1" href= "tejado.htm">
<AREA shape = "rect" coords = "21,101,35,138" href= "puerta.htm">
<AREA shape = "rect" coords = "2,64,57,138" href= "casa.htm">
<AREA shape = "circle" coords = "80,76,21" href= "arbol.htm">
<AREA shape = "rect" coords = "78,98,85,138" href= "tronco.htm">
<AREA shape = "rect" coords = "0,0,96,138" href= "dibujo.htm">
</MAP>
Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen
es tratada por un mapa. Para ello escribiríamos la siguiente instrucción :
<IMG src = "grafico.gif" usemap = "#casa">
El proceso mas laborioso es el de determinar las coordenadas. Existen programas que
permiten realizar este proceso de una manera sencilla, simplemente definiendo las zonas
con el ratón.
7. FRAMES
16

Las frames es una técnica para subdividir la pantalla del visor en diferentes ventanas.
Cada una de estas ventanas se podrá manipular por separado, permitiéndonos mostrar en
cada una de ellas una página Web diferente. Esto es muy útil para, por ejemplo, mostrar
permanentemente en una ventana los diferentes contenidos de nuestra página, y en otra
ventana mostrar el contenido seleccionado.
Para definir las diferentes subventanas o frames se utilizan las instrucciones
<FRAMESET> </FRAMESET> y <FRAME>. La instrucción <FRAMESET>
indica como se va a dividir la ventana principal. Pueden incluirse varias directivas
<FRAMESET> anidadas con el objeto de subdividir una subdivisión. Los parámetros
de <FRAMESET> son rows y cols en función de si la división de la pantalla se realiza
por filas (rows) o columnas (cols). estos parámetros se acompañan de un grupo de
números que indican en puntos o en porcentaje el tamaño de cada una de las
subventanas. En caso de utilizar rows los tamaños de las subventanas se entienden
indicados de arriba a abajo, es decir, el primer valor será el asignado a la ventana
superior, el segundo a la ventana inmediatamente inferior, etc... En el caso de cols los
tamaños se aplican de izquierda a derecha.
EJEMPLOS RESULTADOS
<FRAMESET rows=
"25%,50%,25%">
Crea subventanas horizontales, la primera ocupará un 20% de la
ventana principal, la segunda un 50% y la tercera un 25%.
<FRAMESET
cols="120,*,100">
Crea tres subventanas verticales, la primera y la tercera tendrán
un ancho fijo de 120 y 100 puntos respectivamente. La segunda
ocupará el resto de la ventana principal (*).
<FRAMESET
cols="15%,*">
<FRAMESET
rows="20%,*">
En este caso "anidamos" dos directivas. La primera divide la
ventana principal en dos subventanas verticales, la primera
ocupa un 15% de la ventana principal y la segunda el resto. La
segunda directiva vuelve a subdividir la primera subventana
creada anteriormente, pero esta vez en dos subventanas
horizontales, la superior ocupará un 20 % de la subventana, y la
inferior el resto.
La instrucción <FRAME> indica las propiedades de cada subventana. Es necesario
indicar una instrucción <FRAME> para cada subventana creada. Sus parámetros son :
name = "nombre". Indica el nombre por el que nos referiremos a esa subventana.
src = "URL" . La ventana mostrará en principio el contenido del documento HTML
que se indique.
marginwidth =" numero". Indica el margen izquierdo y derecho de la subventana en
puntos.
marginheight = "numero". Indica el margen superior e inferior de la subventana en
puntos.
scrolling = "valor". Indica si se aplica una barra de desplazamiento a la subventana en
el caso de que la página que se cargue en ella no quepa en los límites de la subventana.
El valor (yes) muestra siempre la barra de desplazamiento, (no) no la muestra nunca (la
17

zona de la página que no quepa en la subventana no la veremos), y (auto) la muestra
solo en caso de que sea necesario para poder ver la página.
noresize. Si se indica este parámetro, el usuario no podrá redimensionar las subventanas
con el visor. Un usuario que este viendo una pagina con frames puede redimensionarlas
seleccionando un borde de la subventana con el cursor y desplazándolo.
border = "numero". Indica el borde que separara esta frame de la siguiente. Si se
indica cero (0) no se mostrara borde entre las frames, consiguiendo un efecto muy
elegante.
Los visores que no soportan la característica de subventanas, no mostrarán nada de lo
indicado con estas instrucciones. Por eso existe una instrucción llamada
<NOFRAMES> </NOFRAMES>. Todo lo indicado en ella será lo que muestren los
visores sin capacidad para visualizar frames. Los visores que soporten frames obviaran
esta instrucción y su contenido.
Si tu visor puede visualizar frames habrás visto que en mi web la pantalla esta dividida
en dos zonas, a la izquierda esta el menú, siempre visible y a la derecha se van viendo
los diferentes contenidos. Las frames deben ir antes de la definición del cuerpo de
documento.
Insertaremos unas frames con sus correspondientes comentarios en nuestra página
index.htm. Recuerda que esta será la primera página de la Web:
<HTML>
<HEAD>
<TITLE>Index</TITLE>
</HEAD>
<FRAMESET rows = "15%,*">

<FRAME name="cabeza" src"cabeza.htm">

<FRAMESET cols = "20%,*">

<FRAME name = "menu" src = "menu.htm" >

<FRAME name = "portada" src = "portada.htm" >

</FRAMESET>

18

<NOFRAMES>

<BODY>
SU VISOR NO MUESTRA FRAMES.
</BODY>
</NOFRAMES>
</FRAMESET>

</HTML>
8. HIPERENLACES
Una de las grandes características de una página Web es que se pueden insertar
hiperenlaces. Un hiperenlace es un elemento que permite el acceso a otro recurso,
página Web o archivo. Para incluirlos se utiliza la instrucción <A></A>. El texto o
imagen que se encuentre dentro de los límites de la instrucción será sensible, esto quiere
decir que si pulsamos con el ratón sobre él, se realzará la función de hiperenlace
indicada por la instrucción <A></A>. Si el hiperenlace está indicado por un texto, éste
aparecerá subrayado y en distinto color, si se trata de una imagen, ésta aparecerá con un
borde rodeándola. Esta directiva tiene el parámetro href que indica el lugar a donde nos
llevará el hiperenlace si lo pulsamos.
SI PONEMOS SE VERÁ ASÍ
<A href="portada.htm" target="_blank"> Pulsa aquí Pulsa aquí
<A href= "portada.htm"target="_blank">
<IMG src="imagen.jpg" width="120" height="90"></A>
Si situamos el ratón encima de la frase o imagen y pulsamos, el navegador accederá a la
página Web indicada por el parámetro href, es decir, accederá a la página portada.htm.
Compruebalo si quieres. Te falta por conocer el parámetro target que aprenderás al
final de este capítulo.
Un hiperenlace también puede llevarnos a una zona de nuestra página. Para ello
debemos marcar en nuestra página las diferentes secciones en las que se divide. Lo
haremos con el parámetro name.
<A name="sección1"></A>
Esta instrucción marca el inicio de una sección dentro de nuestra página. La sección se
llamará sección1. Para hacer un enlace a esta sección dentro de nuestra página lo
haríamos de la siguiente forma:
<A href="#sección1">Primera Parte</A>
19

Un hiperenlace puede hacerse a cualquier tipo de fichero. Hemos visto cómo hacer
enlaces a páginas Web o secciones dentro de una página Web, pero podríamos hacer un
enlace a un grupo de noticias, a una dirección de correo o a un fichero cualquiera:
<A href="news://news.actualidad.es/">Noticias de actualidad</A>
<A href="mailto:nombre@ext">Envíame tus sugerencias</A>
<A href="archivo.zip"> Pulsa aquí para descargar este archivo </A>
El segundo y tercer ejemplo resultan muy interesantes, pues en un caso puedes hacer
que te escriban a tu dirección de correo electrónico y con el otro puedes permitir a tus
visitantes que descarguen ficheros a su ordenador pues el navegador intentará ejecutar el
fichero, y si no puede hacerlo, como sería el caso de un fichero comprimido, preguntará
al visitante si desea grabarlo en su ordenador.
Si estamos usando frames, debemos tener en cuenta en que ventana queremos que se
muestre la nueva página enlazada. Por defecto se mostrará en la ventana donde se
encuentre el enlace. Para poder escoger otra ventana debe añadirse un nuevo parámetro
a la instrucción <A href= > </A>. Este parámetro se llama target y puede tener los
siguientes valores:
target = "nombre_ventana" Muestra el hiperenlace en la ventana cuyo nombre se
indica.
target = "_blank" Abre una nueva copia del visor y muestra el hiperenlace en ella. (Si
usamos Netscape esto provoca que tengamos funcionando dos copias del programa).
target = "_self" Se muestra el hiperenlace en la subventana activa.
target = "_parent" El hiperenlace se muestra en el <FRAMESET> definido
anteriormente al actual. Si no hay ninguno se muestra a pantalla completa suprimiendo
todas las subventanas de la pantalla.
target = "_top" Suprime todas las subventanas de la pantalla y muestra el hiperenlace a
pantalla completa.
Ya has visto un ejemplo más arriba, cuando hemos hecho abrir una ventana para ver la
página portada.htm.
Vamos a abrir nuestra página menu.htm e insertaremos enlaces en cada uno de los
elementos de la lista; Uno en el primer elemento de la lista para que nos abra la página
tablero htm, otro en el segundo elemento que abrirá la página form.htm y el tercero para
que nos permita volver a la portada. Recordemos que nuestra web se iniciará con frames
y por lo tanto vamos a hacer que cuando se abran las páginas lo hagan en la subventana
inferior derecha, a la que pusimos el nombre de "portada":
<HTML>
<HEAD>
<TITLE>Indice</TITLE>
</HEAD>
20

<BODY bgcolor"#0000FF" text"#000000">
<OL>
<LI> <A href="tablero.htm" target="portada"></A>Tablero
<LI><A href="form.htm" target="portada"></A>Formulario
<LI><A href="portada.htm" target="portada"></A>Volver
</OL>
</BODY>
</HTML>
9. FORMULARIOS
Los formularios nos permiten dentro de una página Web solicitar información al
visitante y procesarla. En un formulario podremos solicitar diferentes datos (campos)
cada uno de los cuales quedará asociado a una variable. Una vez se hayan introducido
los valores en los campos, el contenido de éstos será enviado a la dirección (URL)
donde tengamos el programa que pueda procesar las variables. Para poder realizar este
último paso de procesar las variables necesitaremos un programa externo en algún
lenguaje de programación como PERL, C++ o Visual Basic. A este programa externo se
le suele llamar CGI (Common Gateway Interface). La creación de este tipo de
programas excede a este manual, aquí veremos como se pueden enviar las variables a
nuestra dirección de correo electrónico.
La declaración del formulario se pone entre las instrucciones <FORM></FORM>. En
el interior de la declaración se indican los elementos (variables) de entrada. La
instrucción <FORM> tiene los siguientes parámetros:
action = "programa". Indica el programa que va a "tratar" a las variables que se envíen
con el formulario. En nuestro caso enviaremos las variables por correo electrónico, con
lo que el "programa" será "mailto: direccion_de_correo".
method ="valor". Indica el método según el que se transferirán las variables. Su
valores son: (post) que produce la modificación del documento de destino (como en el
caso de enviar por correo las variables), y (get)que no produce cambios en el documento
destino (como en el caso de una consulta a una base de datos, p.ej. una página de
búsqueda en Internet).
9.1. Campos de Entrada
Para la introducción de las variables se utiliza la instrucción <INPUT>. Esta instrucción
tiene el parámetro type que indica el tipo de variable a introducir y name que indica el
nombre que se le dará al campo. Cada tipo de variable tiene sus propios parámetros.
type="text" name ="campo". Indica que el campo a introducir será un texto. Sus
parámetros son:
* maxlenght ="numero". Número máximo de caracteres a introducir en el campo.
*size = "numero". Tamaño en caracteres que se mostrará en pantalla.
21

*value = "texto". Valor inicial del campo. Normalmente será " ", o sea, vacío.
type ="password" name ="campo". Indica que el campo será una contraseña.
Mostrará asteriscos (*) en lugar de las letras escritas. Sus parámetros opcionales son los
mismos que para text.
type ="checkbox" name ="campo". El campo se elegirá marcando una casilla. Se
permite marcar varias casillas. Los valores de las casillas serán indicados por:
* value = "valor"
* checked. La casilla aparecerá marcada por defecto.
type ="radio" name = "campo". El campo se elegirá marcando una casilla. Solo
permite marcar una sola de las casillas. Los valores de las casillas serán indicados por:
* value = "valor"
type ="image" name ="campo". El campo contendrá el valor de las coordenadas del
punto de la imagen pinchado. Debe indicarse la imagen con el parámetro:
* src = "fichero de imagen".
type = "hidden" name ="campo". El usuario no puede modificar su valor, ya que el
campo no es visible se manda siempre con el valor indicado por el parámetro:
* value = "valor"
type = "submit". Representa un botón. Al pulsar este botón la información de todos los
campos se envía al programa indicado en <FORM>. Tiene el parámetro value =
"texto" que indica el texto que aparecerá en el botón.
type = "reset". Representa un botón. Al pulsar este botón se borra el contenido de todos
los campos. El parámetro value = "texto" indica el texto que aparecerá en el botón.
9.2. Campos de Selección
Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger
una o varias. Se utiliza para ellos la instrucción <SELECT> </SELECT> . Sus
parámetros son :
name ="campo". Nombre del campo
size ="número". Número de opciones visibles. Si se indica 1 se presenta como un menú
desplegable, si se indica más de uno se presenta como una lista con barra de
desplazamiento.
multiple. Permite seleccionar más de un valor para el campo.
Las diferentes opciones de la lista se indican con la instrucción <OPTION>. Esta
instrucción puede incluir el parámetro selected para indicar cual es la opción por
defecto. En caso de que no se especifique, se tomará por defecto la primera opción de la
lista.
9.3. Áreas de Texto
22

Representa un campo de texto de múltiples líneas. Normalmente se utiliza para que se
incluyan comentarios. La instrucción usada es <TEXTAREA> </TEXTAREA>, y sus
parámetros:
name ="campo". Nombre del campo.
cols ="número". Numero de columnas de texto visibles.
rows = "número". Numero de filas de texto visibles.
wrap ="valor". Justifica el texto automáticamente en el interior de la caja. El valor
(phisical) envía las líneas de texto separadas en líneas físicas. El valor (virtual) envía
todo el texto seguido.
Veamos a continuación un ejemplo de formulario utilizando todas las formas de
introducción de datos.
<FORM action = "mailto: tucorreo@ext.es" method =" post" >
Tu Nombre:<INPUT type = "text" name = "nombre" size = "30" >
Tu Contraseña: <INPUT type ="password" name ="clave" size ="8" >
<P>
Archivos a Enviar:
<INPUT type = "checkbox" name = "archivo" value = "imagen" > Imagen jpg
<INPUT type = "checkbox" name = "archivo" value ="fichero" > Archivo zip
<P>
Tu Edad :
<INPUT type = "radio" name = "edad" value = "-20" > Menos de 20 años
<INPUT type = "radio" name = "edad" value = "+20" > Mas de 20 años
<P>
<INPUT type ="hidden" name ="lugar" value = "pagina personal" >
Como encontraste mi página :
<SELECT name = "donde" >
<OPTION>De casualidad
<OPTION>Por un buscador
<OPTION>Me la comentaron
</SELECT>
<P>
Tus Comentarios:
<BR>
<TEXTAREA name ="comentario" rows ="5" cols ="40" wrap ="virtual"
></TEXTAREA>
<P>
<INPUT type ="submit" value = "Enviar" >
<INPUT type = "reset" value = "Borrar" >
</FORM>
Si se rellenase este formulario y se pulsa sobre el botón Enviar, (estando conectado a
Internet), se generará un mensaje de correo a la dirección de correo especificada. Si se
pulsa el botón Borrar se borraran los datos que haya en el formulario.
El texto que se recibiría por correo electrónico sería parecido a este
nombre=Pedro+Perez&clave=12345678&archivo=Imagen&archivo=fichero&edad=+20
23

&lugar=pagina+personal &donde=Por+un+buscador &comentario%94=
Espero+que+me+mandes+los%0D%0Aficheros+antes+del+martes%0D%0A%0D%0ASaludos.
%0D%0A
:Podemos observar que en el correo se separan las variables con el símbolo &, los
espacios se sustituyen por el signo + y se representan los códigos de retorno de carro y
avance de línea del campo de texto con los caracteres %0D y %0A respectivamente.
Si en vez de enviar estas variables por correo electrónico, fuesen enviadas a un
programa (CGI), este programa podría tratarlas y dar como respuesta una nueva página
Web.
NOTA: El envio por correo electrónico solo funciona correctamente con Netscape. En
Microsoft Explorer esta opción da como resultado un correo en blanco. Para enviar un
formulario por e-mail sin importar el visor utilizado se ha de utilizar un programa
externo que realice este proceso. De todos modos vamos a insertar el código anterior a
nuestra página form.htm, para ver el efecto sin insertar el botón enviar:
<HTML>
<HEAD>
</HEAD>

<BODY bgcolor"#C0C0C0" text"#000000">
<FORM action = "mailto: tucorreo@ext.es" method =" post" >
Tu Nombre:<INPUT type = "text" name = "nombre" size = "30" >
Tu Contraseña: <INPUT type ="password" name ="clave" size ="8" >
<P>
Archivos a Enviar:
<INPUT type = "checkbox" name = "archivo" value = "imagen" > Imagen jpg
<INPUT type = "checkbox" name = "archivo" value ="fichero" > Archivo zip
<P>
Tu Edad :
<INPUT type = "radio" name = "edad" value = "-20" > Menos de 20 años
<INPUT type = "radio" name = "edad" value = "+20" > Mas de 20 años
<P>
<INPUT type ="hidden" name ="lugar" value = "pagina personal" >
Como encontraste mi página :
<SELECT name = "donde" >
<OPTION>De casualidad
<OPTION>Por un buscador
<OPTION>Me la comentaron
</SELECT>
<P>
Tus Comentarios:
<BR>
<TEXTAREA name ="comentario" rows ="5" cols ="40" wrap ="virtual"
></TEXTAREA>
<P>
24

<INPUT type = "reset" value = "Borrar" >
</FORM>
</BODY>
</HTML>
10. OTRAS INSTRUCCIONES
Netscape y Microsoft han añadido al estándar de HTML diversas instrucciones que
hacen más atractiva la visualización de las páginas Web. Veremos aquí algunas de ellas
y la forma de usarlas.
Estas instrucciones pueden no funcionar en algún visor de HTML, pero el uso de ellas
por parte de los dos "grandes" del software para Internet hace prever que serán
inmediatamente incluidas en las nuevas versiones del resto de los visores.
10.1. Applet
La instrucción <APPLET></APPLET> indica la ejecución de un programa (applet)
externo escrito en lenguaje JAVA. Java es un lenguaje creado por Sun Microsystems
que permite realizar operaciones multimedia sin incorporar nuevas instrucciones
HTML. Los applets son muy variados, y cada uno de ellos realiza una tarea distinta.
Hay applets para hacer que el texto se mueva dentro de la hoja, se contraiga y expanda,
etc.... Esta instrucción tiene los siguientes parámetros :
codebase ="url". Dirección donde se encuentra el applet Java. Si se encuentra en el
mismo lugar que la pagina Web este parámetro no es necesario.
code ="programa". Indica el nombre del programa (applet) a ejecutar.
width = "número". Indica el ancho en puntos en el que el programa realizará su
función.
height ="número". Indica el alto en puntos en el que el programa realizará su función.
Dentro de la instrucción <APPLET> se incluye la instrucción <PARAM> que envía al
programa Java los parámetros necesarios para su funcionamiento. Esta instrucción suele
tener como mínimo los parámetros:
name ="campo". Nombre de la variable a enviar.
value = "valor". Valor de la variable a enviar.
Veamos un ejemplo en el que se ejecuta un programa Java que permite que un texto se
desplace de un lado a otro de una zona de la pantalla:
<APPLET codebase="http://www.ucm.es/java" code="Laufschrift.class"
width="350" height="25" >
<PARAM name ="bg.color" value = "0,255,0">
25

<PARAM name = "message" value = "**Bienvenido a mi pagina WEB - Manual de
HTML**">
</APPLET>
10.2. Marquee
La instrucción <MARQUEE></MARQUEE> crea una marquesina con un texto en su
interior que se desplaza. Funciona únicamente con Explorer. Sus parámetros son los
siguientes :
align ="valor". Indica si el texto del interior de la marquesina se alinea en la zona alta
(top), en la baja (bottom) o en el centro (middle) de la misma.
bgcolor = "codigo de color". Indica el color del fondo de la marquesina.
direction ="valor". Indica hacia que lugar se desplaza el texto, hacia la izquierda (left)
o hacia la derecha (right).
height ="número o %". Indica la altura de la marquesina en puntos o porcentaje en
función de la ventana del visor.
width = "número o %". Indica la anchura de la marquesina en puntos o porcentaje en
función de la ventana del visor.
loop = "num / infinite". Indica el numero de veces que se desplazará el texto por la
marquesina. Si se indica infinite, se desplazará indefinidamente.
scrolldelay = "número". Indica los milisegundos que tarda en reescribirse el texto por
la marquesina, a mayor número mas lentamente se desplazará.
<MARQUEE bgcolor ="#FFFFFF" width= "15%" scrolldelay ="0" > Bienvenido a
mi web</MARQUEE>
Aún nos queda una página de nuestro ejemplo en la que no hemos puesto nada. Es el
momento, abrimos cabeza.htm e insertamos el código anterior:
<HTML>
<HEAD>
<TITLE>Cabeza</TITLE>
</HEAD>

<BODY bgcolor"#FF0000" text"#000000">
<MARQUEE bgcolor ="#FF0000" width= "15%" scrolldelay ="0" > Bienvenido a
mi web</MARQUEE>
</BODY>
</HTML>
10.3. Sonido de Fondo
26

Nuestra página Web puede tener un sonido que se active al entrar en la página. Esta
característica de Ms Explorer utiliza la instrucción <BGSOUND> y tiene los siguientes
parámetros :
src = "fichero". Indica el nombre del fichero que contiene el sonido (.waw, .mid).
loop = "num / infinite". Indica el número de veces que se reproducirá el sonido. Si se
indica infinite, el sonido se reproducirá de forma continua hasta que abandonemos la
página.
Ejemplo:<BGSOUND src= "police.mid" loop=" infinite">
Para utilizar esta función en Netscape se utiliza la directiva <EMBED>. Esta directiva
se utiliza realmente para "incrustar" un objeto en nuestra pagina Web. Dicho objeto
puede ser un fichero de sonido, un vídeo, un gráfico BMP, etc... Tiene los siguientes
parámetros:
src ="fichero". Indica el nombre del fichero que contiene el sonido (.waw, .mid) o el
vídeo (.avi).
autostart ="true". Incluirlo si deseamos que la reproducción se inicie inmediatamente.
loop ="true". Incluirlo si deseamos que la reproducción no se detenga. (se repite
continuamente).
volume ="número". Volumen al que se reproducen los ficheros de sonido.
width = "numero". Anchura de la representación del objeto. (Si es un sonido no es
necesario este parámetro).
height = "numero". Altura de la representación del objeto. (Si es un sonido no es
necesario este parámetro).
controls = "smallconsole". Visualiza una serie de controles para manejar la
reproducción del fichero.
Ejemplo :<EMBED src= "police.mid" loop="true" autostart=" true" volume="50">
10.4. Scripts
Un Script es un programa escrito en un lenguaje distinto al HTML que se puede incluir
en una página web. Para incluir estos programas se utiliza la instrucción
<SCRIPT></SCRIPT>. Esta instrucción tiene el parámetro language para indicar el
lenguaje de programación utilizado para el Script. Para que el código del programa no
sea visto por los navegadores que no reconocen la instrucción <SCRIPT> debe cerrarse
con la instrucción de comentario de HTML . Explicarte algo más sobre los
lenguajes de programación para Scripts es algo que se sale de este tutorial dedicado al
HTML. Desde luego, el siguiente paso para mejorar una web, pasa ineludiblemente por
el uso de Scripts, y deberías aprender lenguajes de programación como JAVASCRIPT
para construirlos. No obstante, existen multitud de Scripts construidos para los que no
necesitas esos conocimientos, basta con que copies los códigos en tus páginas.
27

Para que veas un ejemplo, a continuación pongo el código de un Script cuya función
consiste en hacer que al pasar el ratón por encima de una imagen se muestre otra
diferente:
<script language="javascript">

</script>
<img src="imagen01.jpg" name="ejemplo"
onMouseover="document.images['ejemplo'].src=imagen2.src"
onMouseout="document.images['ejemplo'].src=imagen1.src">
Pasa el ratón por la imagen
para ver el efecto:
11.VER TU WEB
Bien, enhorabuena, ya has construido tu web, a partir de ahora puedes modificarla y
añadirle todo lo que quieras, el límite lo marcas tú. Si has seguido el curso y creado los
diversos archivos que te he indicado, cuando abras con el explorador la página
index.htm debes ver una web similar a esta, para verla mejor hazlo a pantalla completa:
Pulsa aqui
Gracias por haberme seguido hasta aquí, espero haberte servido de ayuda
TUTORIAL SACADO DE INTERNET (DESCONOZCO LA DIRECCIÓN DE ESTE
TUTORIAL
28

Html

Más contenido relacionado

La actualidad más candente

Similar a Html

Más de jpalencia

Último

Html