Documentos de Académico
Documentos de Profesional
Documentos de Cultura
INDICE
1
HTML Básico
Lenguaje HTML
HTML significa HiperText Markup Language ( Lenguaje de marcas de hipertexto). HTML, es un
sistema de marcadores (tags) dentro de un documento para que pueda ser publicado en el World Wide
Web. Los documentos preparados en HTML (de ahora en adelante páginas) incluyen referencias a
gráficos y marcadores de formato. Se usará un Web browser o navegador (como Microsoft Internet
Explorer o Mozilla Firefox) para poder visualizar estas páginas.
Un página simple para la Web comienza con un tag <HTML> . Al final de la página se incluye un tag
de cierre </HTML> (el slash significa cierre en HTML). De forma general en HTML todo tag tiene si cierre.
Contiene el título del documento. No da nombre a la página sino que define una
cadena que es interpretada como el título de la página. Este título es mostrado en la
barra de título de la ventana que muestra la página.
Ejemplo.-
<HTML>
<HEAD>
<TITLE>
Primera página en HTML
</TITLE>
</HEAD>
</HTML>
2
HTML Básico
Especifica el inicio y el fin del cuerpo de la página. El cuerpo contiene la descripción de la información
que será visualizada. Se pueden incluir distintas opciones para controlar los márgenes, el color del fondo,
etc.
Ejemplo.-
<HTML>
<HEAD>
<TITLE> Ejemplo de página con BODY </TITLE>
</HEAD>
<BODY>
Texto que es visualizado
</BODY>
</HTML>
1.1.3.1 BACKGROUND
Permite indicar la imagen que será mostrada como fondo de la página. Si la imagen
que se muestra es menor que el área de visualización en el navegador, la imagen se
mostrará como mosaico para llenar dicho área de visualización.
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Ejemplo de Imágen de fondo en página</TITLE>
</HEAD>
<BODY BACKGROUND = “imagenes/fondo.gif”>
Página con imagen de fondo
</BODY>
</HTML>
3
HTML Básico
1.1.3.2 BGPROPERTIES
1.1.3.3 BGCOLOR
El color se indica como una constante numérica hexadecimal en formato RGB, por
ejemplo #FF0000 se corresponde con el rojo; #00FF00 con el verde y #0000FF con el
azul. También se puede indicar con el nombre de una constante de color, según la
siguiente tabla:
4
HTML Básico
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Ejemplo de Color de fondo en página</TITLE>
</HEAD>
<BODY BGCOLOR=”#FF0000”>
Página con color de fondo rojo
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Ejemplo de Color de fondo en página</TITLE>
</HEAD>
5
HTML Básico
<BODY BGCOLOR=”red”>
Página con color de fondo rojo
</BODY>
</HTML>
<BODY
[MARGINHEIGHT = Pixels1]
[MARGINWIDTH = Pixels2]
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Ejemplo de Márgenes en página</TITLE>
</HEAD>
<BODY BGCOLOR=”#FF0000” MARGINHEIGHT = “80px”
MARGINWIDTH = “80px”>
Página con márgenes de 80 pixels
</BODY>
</HTML>
6
HTML Básico
hiperenlace está activo cuando se ha hecho clic sobre él y se está intentando mostrar
la página a la cual está enlazado.
Para ver posibles valores del parámetro Color ver página 4. Para ver como se crean
hiperenlaces véase más adelante Hiperenlaces página 19
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página con Parámetros LINK de BODY</TITLE>
</HEAD>
<BODY ALINK = “#FFFF00” LINK =”#FF0000” VLINK =”#00FF00”>
<P>
<A HREF = “http://www.microsoft.com”>
Link ya visitado a Microsoft
</A>
</P>
<P>
<A HREF = “http://www.novell.com”> Link activo a Novell</A>
</P>
<P>
<A HREF = “http://www.oracle.com”> Link no visitado a Oracle </A>
</P>
</BODY>
</HTML>
1.1.3.6 TEXT
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página de prueba de parámetro TEXT en BODY</TITLE>
</HEAD>
<BODY TEXT = “#00FF00”>
Página con color de texto verde
7
HTML Básico
</BODY>
</HTML>
Hemos visto hasta ahora que si se incluye texto entre los marcadores de <BODY> ese texto aparece
en la página. Si se incluyen varias líneas de texto veremos que al ser visualizadas aparecen en una
misma línea:
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página de prueba de texto en varias líneas</TITLE>
</HEAD>
<BODY>
Página con texto en una línea
y más texto en otra
</BODY>
</HTML>
Al contrario, texto que aparentemente va a aparecer en una sola línea puede aparecer en el
navegador en líneas distintas si la ventana de este no es capaz de mostrar toda la línea de una vez,
produciéndose lo que técnicamente se denomina wordwrap que no es más que pasar de forma
automática el texto que no cabe en una línea a la siguiente:
Para lograr que el texto aparezca en párrafos distintos se debe colocar el tag <P> al comienzo de
cada nuevo párrafo. El tag <P> además de hacer que el texto comience en una nueva línea deja un
espacio en blanco entre ellas.
8
HTML Básico
<HTML>
<HEAD>
<TITLE>Página de prueba de texto en varias líneas tap P</TITLE>
</HEAD>
<BODY>
<P>Página con texto en una línea</P>
<P>y más texto en otra</P>
</BODY>
</HTML>
Si se incluyen varios tag <P> seguidos, los navegadores los ignorarán y entenderán que solo hay uno,
por lo tanto, no se utilizará este método para abrir espacio en blanco entre varias líneas.
Si lo que se desea es comenzar una nueva línea pero no un párrafo distinto se utilizará el tag <BR>
que no tiene tag terminador ya que no es un tag contenedor.
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página de prueba de texto en varias líneas tag BR</TITLE>
</HEAD>
<BODY>
<P>Volverán las oscuras golondrinas <BR>
de tu balcón sus nidos a colgar <BR>
y jugando ...
</P>
<P>Esta es una poesía de G.A. Bécquer</P>
</BODY>
</HTML>
Se debe tener cuidado con el tag <BR> ya que si la ventana del navegador no es lo suficiente grande
pueden aparecer saltos de línea adicionales.
Tenemos también el tag <NOBR> cuyo significado es el contrario: el texto que aparece entre el tag
<NOBR> y </NOBR> no se permite que se divida entre dos líneas evitando el efecto de wordwrap.
9
HTML Básico
El tag <P> admite un modificador para alinear el texto en su interior, es el atributo ALIGN y puede
tomar estos valores: LEFT, RIGHT,CENTER y JUSTIFY.
<HTML>
<HEAD>
<TITLE>Página de prueba de texto en varias líneas tag BR</TITLE>
</HEAD>
<BODY>
<P ALIGN="left">este texto está alineado a la izquierda en la ventana del navegador </P>
<P ALIGN="right">y este otro está alineado a la derecha</P>
<P ALIGN="center">Este sin embargo está centrado</P>
<P ALIGN="justify">El texto de este párrafo queda alineado tanto a la izquierda como
a la derecha excepto la última línea del mismo que queda alineado a la izquierda.
El efecto se ve completo cuando hay varias líneas en el párrafo</P>
</BODY>
</HTML>
1.1.5 TÍTULOS
Los títulos en HTML son texto generalmente en un tamaño superior o cuando menos diferente al del
texto normal. Hay hasta seis tipos de títulos desde el <H1> hasta el <H6> que pueden servir para indicar
capítulos y subcapítulos. El tipo de letra y el tamaño de la misma depende del navegador en que se
muestre.
En donde:
alineami
descripción
ento
left Por defecto. Alinea al borde izquierdo
center Alinea al centro
right Alinea al borde derecho
justify Justifica el título a izquierda y derecha
10
HTML Básico
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página de ejemplo de Títulos</TITLE>
</HEAD>
<BODY>
<H1>Esto es un título de tipo H1</H1>
<H2>Esto es un título de tipo H2</H2>
<H3>Esto es un título de tipo H3</H3>
<H4>Esto es un título de tipo H4</H4>
<H5>Esto es un título de tipo H5</H5>
<H6>Esto es un título de tipo H6</H6>
Esto es texto normal
</BODY>
</HTML>
Como puede verse en la figura los tag de título insertan un salto de línea parecido al del tag <P>.
Se puede utilizar una línea horizontal para dividir visualmente dos zonas de texto de la página. Ello se
consigue con el tag <HR> que dibuja una línea horizontal con sombra a lo largo del área de visualización
del navegador.
11
HTML Básico
No se requiere tag de terminación puesto que no es un contenedor. Pone un salto de párrafo implícito,
tanto antes como después de la línea horizontal.
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página de ejemplo de Línea Horizontal</TITLE>
</HEAD>
<BODY>
<H1>Esto es un título de tipo H1</H1>
Esto es texto dentro de un párrafo
<HR>
Esto es texto dentro de otro párrafo
</BODY>
</HTML>
Son tags que modifican los atributos del texto que se visualiza, que hacen referencia a
conceptos lógicos como ejemplo, cita, enfatizado etc. El resultado de estos tags al ser
visualizados varía de un navegador a otro. Todos tienen tag finalizador para indicar
donde termina la aplicación del formato.
12
HTML Básico
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página con Formato de Texto con elementos lógicos</TITLE>
<HEAD>
<BODY>
En esta página aparecen diversos formatos de texto aplicados con tags de
elementos lógicos <BR>
En esta línea aparece texto con formato de <CITE>Cita de
autor</CITE><BR>
Aparece texto como <CODE>Código de ordenador</CODE> y texto
<EM>enfatizado</EM><BR>
También aparece <KBD>texto para teclear</KBD> y de
<SAMP>ejemplo</SAMP> <BR>
Texto en <STRONG>Strong</STRONG> y de <VAR>variable ficticia</VAR>
<HR>
<ADDRESS>
Realizado por: Casimiro Montes <BR>
cmontes@casiopea.moyano.za <BR>
</ADDRESS>
</BODY>
</HTML>
Son tags que hacen referencia a atributos físicos del texto como por ejemplo negrita,
cursiva, etc. Todos necesitan de un tag terminador.
o <B> Hace aparecer el texto en negrita
o <I> Muestra el texto en cursiva
o <TT> Aparece el texto en una fuente monoespaciada.
13
HTML Básico
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página con Formato de Texto con elementos físicos</TITLE>
<HEAD>
<BODY>
En esta página aparecen diversos formatos de texto aplicados con tags de
elementos físicos<BR>
En esta línea aparece texto en <B>negrita</B> y en <I>cursiva</I><BR>
Aparece texto como <TT>en fuente monoespaciada</TT> y texto
<U>subrayado</U> <BR>
También aparece <S>texto tachado</S><BR>
Texto en <BIG>GRANDE</BIG> y en <SMALL>pequeño</SMALL><BR>
Texto en <SUP>superíndica</SUP> y en <SUB>subíndice</SUB>
</BODY>
</HTML>
Hay una serie de caracteres que no aparecen en el conjunto de caracteres básicos ASCII, incluidos
los caracteres específicos de determinados idiomas, algunos símbolos matemáticos, etc. La forma de
incluir este tipo de caracteres es utilizar un ampersand (&) seguido del nombre del carácter. (En alguno
de los ejemplos anteriores se han utilizado caracteres acentuados, tal y como han sido escritos solo se
visualizarán correctamente cuando el navegador tenga configurado el idioma como español). En la
siguiente tabla se enumeran los símbolos con sus nombres:
14
HTML Básico
¤ ¤ ¤
¥ ¥ ¥
¦ ¦ ¦&brkbar;
§ § §
¨ ¨ ¨ or ¨
© © ©
ª ª ª
« « «
¬ ¬ ¬
­ ­
® ® ®
¯ ¯ ¯ &hibar;
° ° °
± ± ±
² ² ²
³ ³ ³
´ ´ ´
µ µ µ
¶ ¶ ¶
· · ·
¸ ¸ ¸
¹ ¹ ¹
º º º
» » »
¼ ¼ ¼
½ ½ ½
¾ ¾ ¾
¿ ¿ ¿
À À À
Á Á Á
  Â
à à Ã
Ä Ä Ä
Å Å Å
Æ Æ Æ
Ç Ç Ç
È È È
É É É
Ê Ê Ê
Ë Ë Ë
Ì Ì Ì
Í Í Í
Î Î Î
Ï Ï Ï
Ð Ð Ð
Ñ Ñ Ñ
Ò Ò Ò
Ó Ó Ó
Ô Ô Ô
Õ Õ Õ
Ö Ö Ö
× × ×
Ø Ø Ø
Ù Ù Ù
Ú Ú Ú
Û Û Û
Ü Ü Ü
Ý Ý Ý
Þ Þ Þ
ß ß ß
à à à
á á á
â â â
ã ã ã
15
HTML Básico
ä ä ä
å å å
æ æ æ
ç ç ç
è è è
é é é
ê ê ê
ë ë ë
ì ì ì
í í í
î î î
ï ï ï
ð ð ð
ñ ñ ñ
ò ò ò
ó ó ó
ô ô ô
õ õ õ
ö ö ö
÷ ÷ ÷
ø ø ø
ù ù ù
ú ú ú
û û û
ü ü ü
ý ý ý
þ þ þ
ÿ ÿ ÿ
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página con símbolos</TITLE>
</HEAD>
<BODY>
Para asegurar la correcta visualización de caracteres específicos
de un idioma se deben incluir los
nombres de las letras precedidas de un & (ampersand)y terminado en ; (punto y
coma)<BR>
Por ejemplo para mostrar la Ñ se debe poner &Ntilde;<BR>
<HR>
<ADDRESS>© Mateo González Manjarrés</ADRRESS>
</BODY>
</HTML>
16
HTML Básico
1.1.9 <BLOCKQUOTE>
Sirve para diferenciar un bloque de texto del resto. Funciona como un elemento <BODY> es decir
como un contenedor pudiendo contener tags de formato. Normalmente este grupo de texto es mostrado
en los navegadores con un sangrado en el margen izquierdo.
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página de ejemplo con BLOCKQUOTE</TITLE>
</HEAD>
<BODY>
Este es un texto escrito como texto normal, y por tanto se mostrará sin
ningún tipo de sangría
<BLOCKQUOTE>
Este sin embargo está incluido dentro de un tag
<I><BLOCKQUOTE></I>
y por tanto es mostrado con una sangría
en su margen izquierdo respecto al texto normal
</BLOCKQUOTE>
Esto sin embargo ya está fuera del bloque.
</BODY>
</HTML>
17
HTML Básico
1.1.10 <PRE>
Es un contenedor, en cuyo interior los saltos de línea en el texto, si se traducen en nuevas líneas al
ser visualizado. El texto en su interior es visualizado en una fuente monoespaciada por lo que es idóneo
para mostrar datos en forma de tabla en donde los datos de las celdas ha de quedar alineado.
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página de ejemplo con PRE</TITLE>
</HEAD>
<BODY>
Datos de Ventas por mes
<PRE>
Mes Importe
================
Ene 25.000
Feb 34.000
Mar 134.600
Abr 45.000
May 35.400
Jun 234.000
Jul 87.000
Ago 98.500
Sep 34.800
Oct 345.890
Nov 99.400
Dic 125.700
================
</PRE>
</BODY>
</HTML>
Permite indicar el tipo de letra, el color y el tamaño del texto que contenga, es decir del texto que
aparezca entre el tag <FONT> y </FONT>. Hay elementos HTML que no modifican el texto que contienen
18
HTML Básico
si el elemento está dentro del ámbito de <FONT> por lo que habrá que repetir el tag <FONT> dentro de
estos elelementos.
El uso del tag <FONT> se desaconseja por anticuado. En su lugar se deben utilizar las hojas de estilo.
En donde color hace referencia al color que tendrá el texto según la tabla de la página 4. El parámetro
tipo hace referencia al nombre de la familia de fuente que se va a utilizar (Arial, Times, Courier New,
etc.). Y el parámetro tamaño inidca el tamaño de la fuente, no en puntos, sino en un tamaño
predeterminado por el navegador comprendido entre 1 y 7 el mayor.
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página con distintos tipos de letra</TITLE>
</HEAD>
<BODY>
<H1>
<FONT COLOR=blue FACE="Arial">
Encabezado en arial y color azul
</FONT>
</H1>
<P>Esto es texto sin tipo predefinido</P>
<P>
<FONT FACE="Courier New" SIZE=5>
Y esto en tipo courier y tamaño 5
</FONT>
</P>
</BODY>
</HTML>
1.1.12 HIPERENLACES
Un hiperenlace es una zona, de texto o imagen, sensible de la página desde la cual, haciendo clic con
el ratón sobre ella, nos desplazamos a otra página, a otra zona de la misma página o se accede a otros
servicios como correo electrónico, FTP etc.
19
HTML Básico
El tag que permite indicar un hiperenlace en una página es el tag <A> con su correspondiente
terminador </A>.
Todo lo que se encuentra entre el tag <A> y el terminador, es sensible a la pulsación del ratón para
desplazarse a otro lugar.
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página con hiperenlaces</TITLE>
</HEAD>
<BODY>
<H1>Enlaces varios</H1>
Enlace a otra página en otro servidor:
<A HREF=”http://www.elpais.es”>El País</A><BR>
Enlace a otra página en el mismo servidor:
<A HREF=”otra.htm”>Otra página</A><BR>
Enlace a otro lugar de esta misma página:
<A HREF=”#marcador”>Más abajo</A><BR>
<BR>
Enlace a una cuenta de correo electrónico:
<A HREF=”mailto:jbueno@teleline.es”>Mail para Jaime Bueno</A><BR>
Enlace a un grupo de noticias:
<A HREF=”news:es.alt.chistes”>Chistes</A><BR>
Enlace a un servidor FTP:
<A HREF=”ftp://ftp.rediris.es/pub”>Rediris</A><BR>
Enlace telnet a un servidor:
<A HREF=”telnet://gugu.usal.es”>Gugu en USAL</A>
<BR>
<HR>
<A NAME=”marcador”>
<ADDRESS>
© Mateo González<BR>
I.E.S. Venancio Blanco<BR>
SALAMANCA
</ADDRESS>
</BODY>
</HTML>
20
HTML Básico
Nótese en el ejemplo anterior la forma en que se define un marcador en la misma página, y como se
escribe un enlace a este marcador. Adviértase también la forma en la que se hacen enlaces a los
distintos servicios Internet como FTP, NEWS, etc.
1.1.13 LISTAS
<OL [TYPE=tipo][START=número]>
tipo descripción
1 Valor por defecto. Asocia números a cada elemento de la lista
a Asocia letras minúsculas a cada elemento de la lista
A Asocia letras mayúsculas con cada elemento de la lista
i Asocia números romanos en minúsculas a cada elemento de la lista
I Asocia números romanos en mayúsculas a cada elemento de la lista
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página con lista numerada</TITLE>
</HEAD>
<BODY>
<H1>Canciones del L.P. <I>Tranquilo Majete</I></H1>
<BR>
<OL>
<LH><B>Título</B></LH>
<LI>Tranquilo Majete</LI>
<LI>Lluvia en Soledad</LI>
<LI>La Mujer Barbuda</LI>
<LI>Madera de Colleja</LI>
<LI>Pasa el Tiempo</LI>
21
HTML Básico
<LI>Buena Onda</LI>
</OL>
</BODY>
</HTML>
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página con lista numerada y anidada</TITLE>
</HEAD>
<BODY>
<H1>Delegaciones <I>TEKA S.A.</I></H1>
<BR>
<OL>
<LI>Ávila</LI>
<OL TYPE=a>
<LI>Arévalo</LI>
<LI>Cebreros</LI>
</OL>
<LI>Salamanca</LI>
<OL TYPE=a>
<LI>Béjar</LI>
<LI>Alba de Tormes</LI>
<LI>Ciudad Rodrigo</LI>
</OL>
<LI>Zamora</LI>
<OL TYPE=a>
<LI>Benavente</LI>
<LI>Toro</LI>
</OL>
</OL>
</BODY>
</HTML>
22
HTML Básico
Son listas de campos o líneas que no tienen definida una relación o estructura común,
en resumen, sin ordenar.
<UL [TYPE=tipo]>
Tipo Descripción
disc Asocia un círculo sólido a cada campo en la lista
circle Asocia un círculo hueco a cada campo en la lista
square Asocia un cuadrado lleno a cada campo en la lista
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página con lista con viñetas y anidada</TITLE>
</HEAD>
<BODY>
<H1>Delegaciones <I>TEKA S.A.</I></H1>
<BR>
<UL>
<LI>Ávila
<UL TYPE=square>
<LI>Arévalo</LI>
<LI>Cebreros</LI>
</UL>
<LI>Salamanca</LI>
<UL TYPE=square>
<LI>Béjar</LI>
<LI>Alba de Tormes</LI>
<LI>Ciudad Rodrigo</LI>
</UL>
<LI>Zamora</LI>
<UL TYPE=square>
<LI>Benavente</LI>
23
HTML Básico
<LI>Toro</LI>
</UL>
</UL>
</BODY>
</HTML>
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página con Lista de Definición</TITLE>
</HEAD>
<BODY>
<H1>Diccionario: <I>de la A a la Z</I></H1>
<DL>
<DT><I><B>Adermar</B></I></DT>
<DD>Hacer mellas, roturas o hendeduras en el filo del destral, de resultas
de un golpe
</DD>
<DT><I><B>Bayal</B></I></DT>
<DD>Palanca compuesta por dos maderos, uno derecho y otro encorvado,
unidos con una abrazadera de hierro, que sirve en las tahonas para volver
las piedras de un lado a otro cuando es necesario picarlas
</DD>
</DL>
</BODY>
</HTML>
24
HTML Básico
NOTA: Dentro de las listas de un tipo, por ejemplo numeradas, se pueden incluir listas
de otro tipo, por ejemplo con viñetas o de definición. La forma de hacerlo sería
semejante a la forma en que se anidaron sublistas en los ejemplos anteriores.
1.1.14 GRÁFICOS
Hasta ahora solo sabemos incluir texto en las páginas WWW, y darle formato para que aparezca un
poco atractivo a los ojos del internauta. Si se ha navegado por Internet se habrá observado que el
principal atractivo de las páginas es la combinación adecuada del texto, que se ha de recordar que es la
información útil de una página, junto con elementos gráficos. Se podría resumir en que lo bonito son los
gráficos y lo útil el texto.
Antes de ver como se incluyen elementos gráficos en la página se debe discutir un poco sobre lo que
un gráfico representa. Un gráfico es una colección de muchísimos puntos que van a ser mostrados sobre
la pantalla del navegante. Esto quiere decir que al mostrar elementos gráficos en nuestra página estamos
obligando al visitante de nuestra página a descargar una gran cantidad de bytes, por lo tanto se debe
cuidar de este hecho y minimizar el tamaño de nuestros gráficos disminuyendo el número de colores o la
resolución a la que se muestra el gráfico, siempre, claro está, que la calidad de visualización del mismo
no se vea afectada.
Los formatos de archivos gráficos más usados en la red son el formato .GIF y el formato .JPG,
seguidos del formato .PNG, cada uno con sus pros y sus contras.
El formato .GIF usa para mostrar un punto hasta 256 colores diferentes, un poco insuficiente para
mostrar imágenes fotográficas con muchos colores y alta definición. Por el contrario, si nuestro gráfico no
precisa de tantos colores, es el formato ideal ya que solo usa un byte por punto y para su
almacenamiento utiliza técnicas de compresión con lo que ocupa muy poco espacio y por lo tanto su
trasmisión es bastante rápida. Cuenta con otra característica que le hace aún más atractivo para
determinados tipos de gráficos y es la posibilidad de definir uno de los colores como trasparente. Esto
permite hacer zonas del mismo transparentes viéndose lo que hay tras la imagen. Otra posibilidad muy
atractiva de este formato gráfico es la posibilidad de almacenar en un único archivo varias imágenes que
son mostradas de forma secuencial, una tras otra dando la apariencia de movimiento, es lo que se
denomina GIF animado.
El formato .JPG codifica cada color en 24 bit, lo que da un total de 16,7 millones de colores, lo que
permite reproducir de forma muy fidedigna una imagen con muchos colores y alta definición. Su gran
ventaja es la capacidad de compresión del gráfico muy superior a la ofrecida por el formato .GIF
25
HTML Básico
El formato .PNG permite color verdadero, utiliza técnicas de compresión y definir un color como
transparente.
De lo expresado se deduce que el formato del gráfico que vayamos a incluir en nuestra página vendrá
dado por el número de colores que contenga el mismo.
alineación descripción
absbottom Alinea la parte de abajo de la imagen con la parte inferior absoluta del
texto.
absmiddle Alinea el centro de la imagen con el centro del texto en vertical.
baseline Alinea la parte de debajo de la imagen con la línea de la parte inferior del
texto (baseline)
bottom Alinea la parte inferior de la imagen con la parte inferior del texto
left Es el valor por defecto. Alinea la imagen a la izquierda el texto. Todo el
texto precedente y posterior se alinea a la derecha de la imagen
middle Alinea el centro de la imagen con el centro del texto en vertical.
right Alinea la imagen a la derecha el texto. Todo el texto precedente y
posterior se alinea a la izquierda de la imagen
texttop Alinea la parte superior de la imagen con el borde absoluto superior del
texto.
top Alinea la parte superior de la imagen con la parte superior del texto
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página con Imágenes</TITLE>
</HEAD>
<BODY>
<H1>Galería de Fotos</H1>
<P><IMG SRC="imagenes/tulipan.jpg" HEIGHT="75px" ALIGN="LEFT">
Imagen alineada a la izquierda aunque no se coloque al inicio de la línea
26
HTML Básico
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página con Imágenes</TITLE>
</HEAD>
<BODY>
<H1>Galería de Fotos</H1>
<P><IMG SRC="imagenes\tulipan.jpg" HEIGHT="75px" ALIGN="TOP">
Imagen alineada en su parte superior con el texto.Solo respecto a la primera
línea.
</P>
<P><IMG SRC="imagenes\monte.jpg" HEIGHT="100px" ALIGN="CENTER">
Imagen alineada en su parte central con el texto. También
solo respecto a la primera línea.
</P>
<P><IMG SRC="imagenes\cirugia.jpg" HEIGHT="100px" ALIGN="BOTTOM">
Imagen alineada en su parte inferior con el texto
</P>
</BODY>
</HTML>
27
HTML Básico
En el siguiente ejemplo veremos gráficos de tipo .GIF con color transparente, texto alternativo e
hiperenlaces.
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página con Imágenes</TITLE>
</HEAD>
<BODY BGCOLOR="moccasin">
<H1>La Web del Moyano</H1>
<A HREF=”concursar.htm”>
<IMG SRC="imagenes\concurso.gif"
ALT= “Concursar en directo" HEIGHT="50px" BORDER="0">
</A>
<A HREF="http://www.elpais.es">
<IMG SRC="imagenes\cultura.gif"
ALT="Noticias Culturales" HEIGHT="50px" BORDER="0">
</A>
<A HREF="buscar.htm">
<IMG SRC="imagenes\saberMas.gif"
ALT="Saber más" HEIGHT="50px" BORDER="0">
</A>
</BODY>
</HTML>
28
HTML Básico
Se trata de imágenes, con zonas o áreas bien definidas que permiten la navegación a destinos
diferentes cuando se hace clic con el ratón sobre alguna de estas zonas.
Existe la posibilidad de indicar que el proceso de averiguar en qué zona de la imagen se hizo clic y
averiguar a que destino se debe ir, se realice en el lado del servidor o en el lado del cliente. La tendencia
en la actualidad es que este proceso se realice del lado del cliente para descargar de proceso al servidor.
Sólo vamos a ver esta última manera.
Las zonas sensibles de un mapa de imagen pueden ser de varios tipos: de forma rectangular, de
forma circular o de forma de polilínea.
Aunque se puede realizar la descripción de las regiones de forma manual, como veremos más
adelante, para este proceso se recomienda la utilización de algún programa de diseño de páginas WWW
como por ejemplo Microsoft Front Page, o Macromedia Dreamweaver.
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Universidades de España</TITLE>
</HEAD>
<BODY>
<H1>Universidades de España</h1>
<P> </P>
<MAP name=”Mapa”>
<AREA HREF=”http://www.iesvb.com/baleares.htm”
COORDS=”404, 193, 66” ALT= “Baleares” SHAPE=”circle”>
<AREA HREF=”http://www.iesvb.com/castillaleon.htm” ALT=”Castilla y León”
SHAPE=”polygon” COORDS=”91, 41, 121, 39, 148, 33, 160, 41, 176,
48, 179, 39, 191, 32, 199, 32, 208, 40, 206, 48, 207, 60, 205,
72, 207, 82, 222, 82, 242, 82, 249, 94, 238, 110, 239, 125, 225,
128, 222, 118, 202, 114, 150, 164, 128, 168, 120, 160, 102, 158, 101,
152, 77, 157, 89, 112, 103, 99, 91, 92, 91, 81, 76, 81, 89, 37, 87,
40”>
<AREA HREF=”http://www.iesvb.com/canarias.htm” ALT=”Canarias”
SHAPE=”rect” COORDS=”284, 311, 491, 399”>
</MAP>
<P>
<IMG BORDER=”0” SRC=”images/Espana.gif” WIDTH=”492px”
HEIGHT=”400px” USEMAP=”#Mapa”>
</P>
</BODY>
</HTML>
29
HTML Básico
En el ejemplo se ha definido un mapa de imagen con tres zonas sensibles: una de tipo circular para
las Islas Baleares, otra de forma rectangular para las Islas Canarias y finalmente otra de tipo polilínea
para Castilla y León.
Nótese que para indicar que una imagen es un mapa de imagen con zonas sensibles se acompaña a
la definición de la imagen el parámetro USEMAP
Tras el parámetro se incluye el nombre de la definición del mapa que se definirá con el tag <MAP>.
<MAP name=”Mapa”>
<AREA HREF=”http://www.moyano.za/baleares.htm” COORDS=”404, 193, 66”
ALT= “Baleares” SHAPE=”circle”>
<AREA HREF=”http://www.moyano.za/castillaleon.htm” ALT=”Castilla y León”
SHAPE=”polygon” COORDS=”91, 41, 121, 39, 148, 33, 160, 41, 176, 48, 179,
39, 191, 32, 199, 32, 208, 40, 206, 48, 207, 60, 205, 72, 207, 82, 222,
82, 242, 82, 249, 94, 238, 110, 239, 125, 225, 128, 222, 118, 202, 114,
150, 164, 128, 168, 120, 160, 102, 158, 101, 152, 77, 157, 89, 112, 103, 99,
91, 92, 91, 81, 76, 81, 89, 37, 87, 40”>
<AREA HREF=”http://www.moyano.za/canarias.htm” ALT=”Canarias”
SHAPE=”rect” COORDS=”284, 311, 491, 399”>
</MAP>
Como se ve, dentro del ámbito de influencia del tag <MAP> ... </MAP> se definen las zonas sensibles
mediante el tag <AREA>
<AREA REF.=”URL” COORDS=”coordenadas” ALT=”texto” SHAPE=”circle” | “rect” |
“poly”>
o URL hace referencia al destino al que navegar si el usuario hace clic sobre la
zona. Coordenadas es una lista de coordenadas separadas por comas y
depende del tipo de región indicado por el parámetro SHAPE.
SHAPE COORDS
30
HTML Básico
circle “x1,y1,r” x1,y1 son las coordenadas del centro y r es el radio del círculo
poly “x1,y1,x2,y2...xn,yn” cada par xi,yi son las coordenadas de cada vértice de la polilínea
rect “x1,y1,x2,y2” x1,y1 hace referencia a la esquina superior izquierda del
rectángulo, x2,y2 hace referencia a la esquina inferior derecha del
rectángulo
o ALT indica el texto que es mostrado cuando el ratón se detiene sobre la zona
sensible durante 2 segundos.
NOTA: La dirección de destino de las zonas sensibles y en general de cada hipervínculo se muestra
de forma automática en la línea de estado en la parte inferior de los navegadores
1.1.16 VÍDEOS
El tag <IMG> sirve también para mostrar un video en la página WWW. Se utiliza el parámetro
DYNSRC en lugar del parámetro SRC.
El parámetro LOOP indica las veces que se va a repetir la reproducción del video. Un valor de –1
indica reproducción continua, un valor de 0 ó 1 indica reproducción una sola vez y cualquier otro valor la
cantidad que se indique.
Ejemplo.-
1.1.17 MARCOS
Un marco define un área de la pantalla para contener una subpágina. Los marcos se pueden distribuir
dividiendo la pantalla en bandas verticales u horizontales, y cada una de ellas se puede a su vez volver a
subdividir. El tag definitorio de marcos es <FRAMESET> y es un contenedor de tags <FRAME> que
define cada uno un marco. En cada marco se mostrará una página HTML distinta. Se debe incluir un tag
terminador </FRAMESET>. El tag <FRAMESET> remplaza al tag <BODY> en la definición de la página.
<FRAMESET [BORDER=espacio_entre_marcos]
[COLS=marcos_verticales] [ROWS=marcos_horizontales]
[FRAMEBORDER=0 | 1] [TITLE=tool_tip]
31
HTML Básico
Si aparece en la misma descripción las opciones ROWS y COLS las definiciones de los marcos se
distribuirán de izquierda a derecha y de arriba abajo.
Cada uno de los marcos en que se subdivide un marco padre se define con el tag <FRAME>
Existe el tag <NOFRAMES> sirve para incluir texto que será visualizado en aquellos navegadores que
no soportan el tag <FRAMESET>. Necesita de tag delimitador </NOFRAMES>. En los navegadores que
si soportan la visualización de marcos el texto contenido en el tag <NOFRAMES> es descartado.
<HTML>
<HEAD>
<TITLE>Página con Marcos</TITLE>
</HEAD>
<FRAMESET ROWS=”*,*” COLS=”*,*”>
<FRAME SRC=”http://www.marca.es”>
<FRAME SRC=”http://www.abc.es”>
<FRAME SRC=”http://www.elpais.es”>
32
HTML Básico
<FRAME SRC=”http://www.diarioas.es”>
</FRAMESET>
<NOFRAMES>
Esta página contiene marcos <BR>
Y su navegador no los soporta
</NOFRAMES>
</HTML>
En el ejemplo anterior debe advertirse como se han utilizado las opciones COLS y ROWS para definir
los cuatro marcos de idéntico tamaño: “*,*” significa dividir en dos el ancho del navegador si se está
hablando de la opción COLS y y de igual alto si se está hablando de la opción ROWS. Nótese también
que al utilizar ambas opciones lo que se está haciendo es una subdivisión de tipo tabla cartesiana. Por
ejemplo si se hubiera deseado que el marco dedicado al Marca y al ABC tuvieran doble altura que el
dedicado a El País y al Diario As la codificación de los marcos habría quedado:
<HTML>
<HEAD>
<TITLE>Página con Marcos</TITLE>
</HEAD>
<FRAMESET ROWS=”2*,*” COLS=”*,*”>
<FRAME SRC=”http://www.marca.es”>
<FRAME SRC=”http://www.abc.es”>
<FRAME SRC=”http://www.elpais.es”>
<FRAME SRC=”http://www.diarioas.es”>
</FRAMESET>
<NOFRAMES>
Esta página contiene marcos <BR>
Y su navegador no los soporta
</NOFRAMES>
</HTML>
33
HTML Básico
En lugar del asterisco para definir el tamaño de los marcos se podría haber utilizado del mismo modo
el porcentaje. Por ejemplo la última página de marcos la habríamos conseguido también:
<HTML>
<HEAD>
<TITLE>Página con Marcos</TITLE>
</HEAD>
<FRAMESET ROWS=”67%,33%*” COLS=”50%,50%”>
<FRAME SRC=”http://www.marca.es”>
<FRAME SRC=”http://www.abc.es”>
<FRAME SRC=”http://www.elpais.es”>
<FRAME SRC=”http://www.diarioas.es”>
</FRAMESET>
<NOFRAMES>
Esta página contiene marcos <BR>
Y su navegador no los soporta
</NOFRAMES>
</HTML>
El uso más corriente para definir marcos es el de establecer un marco como índice o menú de
opciones del sitio web en la parte superior de la ventana o en la parte izquierda de la misma. Cuando el
usuario pulsa en una opción en el índice se actualiza el o los otros marcos de la página. Con un ejemplo
se verá mejor.
Supongamos que queremos diseñar una página que sirva de enlace a los principales periódicos a
nivel nacional. Para una muestra con los cuatro del ejemplo anterior basta. La idea es que en un marco
izquierdo aparezcan los enlaces a estos cuatro periódicos y cuando seleccione el usuario uno de ellos en
el marco de la derecha aparezca la página web de ese periódico. La página podría tener una apariencia
como:
34
HTML Básico
Página de marcos:
<HTML>
<HEAD>
<TITLE>Periódicos de ámbito nacional</TITLE>
</HEAD>
<FRAMESET COLS=”125,*”>
<FRAME SRC=”indice.htm”>
<FRAME NAME=”Diario” >
</FRAMESET>
<NOFRAMES>
Esta página contiene marcos <BR>
Y su navegador no los soporta
</NOFRAMES>
</HTML>
Página Indice.htm
<HTML>
<HEAD>
<TITLE>Indice de Periódicos</TITLE>
</HEAD>
<BODY BGCOLOR=bisque>
<H4>Periódicos</H4>
<HR>
<A TARGET=”Diario” HREF=”http://www.elpais.es”>El País</A><BR>
<A TARGET=”Diario” HREF=”http://www.abc.es”>ABC</A><BR>
<A TARGET=”Diario” HREF=”http://www.marca.es”>Marca</A><BR>
<A TARGET=”Diario” HREF=”http://www.diarioas.es”>Diario As</A>
</BODY>
</HTML>
En la página de marcos hay que destacar que se puso nombre al marco de la derecha
(NAME=”Diario”) y que se dejó en blanco la dirección de destino de este marco con lo que aparecerá
vacía la primera vez que se muestre.
En la página Indice.htm se debe resaltar la manera en que se hace que en el marco de la derecha
aparezca la página de un periódico u otra (TARGET=”Diario”)
Como nombre que se incluye en la opción TARGET se pueden incluir nombres predeterminados con
un significado especial. Son los siguientes:
35
HTML Básico
Nombre Significado
_blank La página se cargará en una nueva ventana en blanco
_parent Carga el documento en la ventana anterior. Si no hay ventana anterior actúa lo mismo
que _self
_self Valor por defecto. Carga la página en la ventana actual
_top Carga la página en la ventana primera o principal del navegador
Como una extensión a los marcos <FRAME> en Microsoft Internet Explorer aparecen los marcos en
línea (especificados dentro del propio código HTML de la página) definidos con el tag <IFRAME>. Definen
al igual que el tag <FRAME> zonas rectangulares de la página en donde se pueden mostrar distintas
páginas HTML deforma simultanea. En las últimas versiones del Internet Explorer se permite definir el
fondo del marco como transparente y solapar varios marcos en la misma posición jugando con su
posición z para crear efectos visuales..
Ejemplo.-
<HTML>
<HEAD>
<TITLE>Página con IFRAME</TITLE>
</HEAD>
<BODY BGCOLOR=”beige”>
<H1 ALIGN=”center”>Prensa española</H1>
<H5>Periódicos</H5>
<TABLE BORDER=”0” HEIGHT=”75%” WIDHT=”800px”>
<TR>
<TD VALIGN=”top” WIDTH=”150px”>
<A HREF=”http://www.elpais.es” TARGET=”marco”>
El País</A><BR>
<A HREF=”http://www.abc.es” TARGET=”marco”>Diario ABC</A><BR>
36
HTML Básico
1.1.19 COMENTARIOS
Dentro del código HTML se pueden incluir comentarios con el tag <!--- comentario --->. También se
puede usar el tag <COMMENT> y su terminador </COMMENT> aunque se recomienda el primero por ser
este último obsoleto.
37
HTML Básico
1.2 FORMULARIOS
Los formularios proveen un interface para adquirir, mostrar y devolver información desde y hacia un
cliente. Mediante el uso de controles como cajas de texto, botones de opción, caja de opción, listas
desplegables, etc. tan familiares en las aplicaciones de tipo windows, se implenta la posibilidad de
intercambiar información entre un cliente y un servidor.
En una página HTML los controles antes mencionados han de aparecer dentro del contenedor
formulario <FORM>. Cuando los controles contenidos en el formulario son enviados (submitted) al
servidor solo el nombre y el valor de dichos controles es enviado.
URL?name=value&name=value&name=value
Los controles que permiten la introducción directa de texto por parte del usuario son: INPUT
type=text, INPUT type=password, y TEXTAREA
38
HTML Básico
<HTML>
<HEAD>
<TITLE>Página de acceso</TITLE>
</HEAD>
<BODY>
<FORM ACTION =”http://www.iesv/uno.asp ”>
<LABEL FOR=”txtNombre” >
Usuario:
</LABEL>
<INPUT TYPE=”text” NAME=”Nombre” VALUE=””
SIZE=”25” TABINDEX=”1” ID=”txtNombre” /><br>
<LABEL FOR=”txtPassword” >
Contraseña:
</LABEL>
<INPUT TYPE=”password” NAME=”Password” VALUE=””
SIZE=”8” tabindex=”2” ID=”txtPassword” />
</FORM>
</BODY>
</HTML>
Tanto este como el anterior solo permiten la introducción de una línea de texto. El siguiente control
permite la introducción de texto en varias líneas.
39
HTML Básico
Las propiedades del mismo nombre tienen el mismo significado que en los controles anteriores. Las
demás propiedades tienen el siguiente significado:
<HTML>
<HEAD>
<TITLE>Página de acceso</TITLE>
</HEAD>
<BODY>
<FORM ACTION ="http://www.iesv/uno.asp">
<LABEL FOR="txtNombre" >
Usuario:
</LABEL>
<INPUT TYPE="text" NAME="Nombre" VALUE=""
SIZE="25" TABINDEX="1" ID="txtNombre" /><BR>
<LABEL FOR="txtPassword" >
Contraseña:
</LABEL>
<INPUT TYPE="password" NAME="Password" VALUE=""
SIZE="8" tabindex="2" ID="txtPassword" /><BR>
<LABEL FOR="txtComentario" >
Observaciones:
</LABEL>
<TEXTAREA COLS="25" ROWS="5" ID="txtComentario"
NAME="Comentario">
</TEXTAREA>
</FORM>
</BODY>
</HTML>
40
HTML Básico
Los controles que permiten la elección de opciones entre varias prefijadas son la caja de opción, el
botón de opción y las listas desplegables.
Las propiedades que coinciden en nombre con los controles anteriores tienen idéntico significado.
El tag FIELDSET permite agrupar controles poniéndoles un marco alrededor de ellos. Es un tag de
tipo bloque y debe incluir un tag terminador.Se puede incluir un tag LEGEND para incluir un texto en la
parte superior del marco.
FIELDSET [ALIGN=alineamiento]
El parámetro ALIGN sirve para indicar como se alinea dentro de su contenedor el elemento pudiendo
tomar los valores que también se muestran en la página 26
LEGEND
Es un tab d bloque y debe llevar tag terminador. Su función es incluir un texto en la parte superior de
un bloque FIELDSET por que ha de ser el primer elemento que se incluya en este.
<HTML>
<HEAD>
<TITLE>Pedido</TITLE>
</HEAD>
<BODY BGCOLOR="silver">
<FONT FACE="Arial">
<H1>Pedido</H1>
<FORM ACTION=”http://www.ies/pedido.asp” METHOD=”post”>
<TABLE>
<TBODY>
<TR>
<TD COLSPAN="2">
<FIELDSET >
<LEGEND><B>Datos</B></LEGEND>
<TABLE align="center">
41
HTML Básico
<TBODY>
<TR>
<TD ALIGN=”right”>nombre:</TD>
<TD ALIGN=”left”>
<INPUT TYPE="text" NAME="nombre" ID="nombre"
SIZE="25" MAXLENGHT="40" />
</TD>
</TR>
<TR>
<TD ALIGN="right">dirección:</TD>
<TD ALIGN="left">
<INPUT TYPE="text" NAME="direccion" ID="direccion"
SIZE="25" MAXLENGHT="50" />
</TD>
</TR>
<TR>
<TD ALIGN="right">teléfono:</TD>
<TD ALIGN="left">
<INPUT TYPE="text" NAME="telefono" ID="telefono"
SIZE="10" MAXLENGHT="10" />
</TD>
</TR>
</TBODY>
</TABLE>
</FIELDSET>
</TD>
</TR>
<TR VALIGN="top">
<TD>
<FIELDSET>
<LEGEND><B>Tamaño</B></LEGEND><BR>
<INPUT TYPE="radio" CHECKED NAME="tamanio" ID="tamanio"
VALUE="p" >pequeña<BR />
<INPUT TYPE="radio" NAME="tamanio" ID="tamanio"
VALUE="m" />mediana<BR />
<INPUT TYPE="radio" NAME="tamanio" ID="tamanio"
VALUE="f" />familiar<BR />
</FIELDSET>
</TD>
<TD>
<FIELDSET>
<LEGEND><B>Ingredientes</B></LEGEND><BR>
<INPUT TYPE="checkbox" checked NAME="queso" ID="queso"
VALUE="q" />queso<BR />
<INPUT TYPE="checkbox" NAME="bacon" ID="bacon"
VALUE="b" />bacon<BR />
<INPUT TYPE="checkbox" NAME="salami" ID="salami"
VALUE="s" />salami<BR />
<INPUT TYPE="checkbox" checked NAME="pimientos"
ID="pimientos" VALUE="i" accesskey="i">pimientos<BR />
<INPUT TYPE="checkbox" NAME="champinion"
ID="champinion" VALUE="c" />champiñón<BR />
</FIELDSET>
</TD>
</TR>
42
HTML Básico
</TBODY>
</TABLE>
</FORM>
</FONT>
</BODY>
</HTML>
Adviertase como se ha utilizado una tabla (se verá en el tema dedicado a maquetación) para situar la
infomación, como se han usado los tag FIELDSET.
Por último vamos a ver el control de lista desplegable que se define con el tag SELECT. La función de
este control es permitir al usuario la elección de una de las diversas opciones (líneas) que aparecen en el
mismo.
Los parámetros con igual nombre que los ya vistos en controles anteriores tienen idéntico significado.
Mediante el tag OPTION se indica el contenido de la lista, cada tag OPTION hace referencia a una
línea en la lista.
43
HTML Básico
<HTML>
<HEAD>
<title>Reserva de vuelo</title>
</HEAD>
<BODY>
<H1>Reserva de pasaje</H1>
<HR />
<FORM ACTION=”http://www.iesvreserva.php” METHOD=”post”>
día:
<INPUT TYPE="text" SIZE="2" MAXLENGHT="2" VALUE="1" NAME="dia" ID="dia" />
mes:
<SELECT NAME="mes">
<OPTION SELECTED VALUE="1">Enero</OPTION>
<OPTION VALUE="2">Febrero</OPTION>
<OPTION VALUE="3">Marzo</OPTION>
<OPTION VALUE="4">Abril</OPTION>
<OPTION VALUE="5">Mayo</OPTION>
<OPTION VALUE="6">Junio</OPTION>
<OPTION VALUE="7">Julio</OPTION>
<OPTION VALUE="8">Agosto</OPTION>
<OPTION VALUE="9">Septiembre</OPTION>
<OPTION VALUE="10">Octubre</OPTION>
<OPTION VALUE="11">Noviembre</OPTION>
<OPTION VALUE="12">Diciembre</OPTION>
</SELECT>
año:
<SELECT NAME="anio">
<OPTION SELECTED VALUE="1">2001</OPTION>
<OPTION VALUE="2">2002</OPTION>
<OPTION VALUE="3">2003</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
44
HTML Básico
Hemos visto hasta ahora como el usuario puede introducir información en un FORM. Vamos a ver
ahora como puede realizar el envío de esta información a una servidor para ser procesada.
El envío de la información desde el cliente al servidor se puede realizar de una de las siguientes
formas:
Muestra una imagen sobre la cual se puede hacer clic para proceder al envío de la
información al servidor.
La imagen queda identificada por el parámetro SRC, siendo posible tambien visualizar
un video si se incluye en su lugar el parámetro DYNSRC.
Existe la posibilidad de limpiar todos los campos de un formulario a sus valores por defecto o bien
utilizando un botón de reset o utilizando el método del objeto FORM llamado reset.
45
HTML Básico
En el siguiente ejemplo se ve un formulario completo con botones para enviar y reiniciar los datos. El
envío de información se hace al pulsar sobre una imagen.
<HTML>
<HEAD>
<TITLE>Página con Submit</TITLE>
</HEAD>
<BODY BGCOLOR="#c0c0c0">
<FORM METHOD="post" ACTION="grabar.asp">
e-mail: <INPUT TYPE="text" NAME="email" SIZE="50" MAXLENGTH="255" />
<BR />
comentarios:<BR />
<TEXTAREA COLS="50" ROWS="15" NAME="comentarios" />
</TEXTAREA><BR />
<INPUT TYPE="image" src="imagenes/enviar.gif" NAME="enviar"
VALUE="Enviar" />
<INPUT TYPE="reset" NAME="cancelar" VALUE="cancelar" />
</FORM>
</BODY>
</HTML>
46
HTML Básico
1.3 OBJETOS
Mediante el tag <OBJECT> podemos incluir en una página elementos que el navegador no es capaz
de interpretar por si mismo sino que precisa de programas externos (plugins o extensiones) para su
correcta interpretación como por ejemplo applets de java o presentaciones flash.
<OBJECT [NAME=”nombre”][HEIGHT=”alto”][WIDTH=”ancho”]
[ARCHIVE=”url”][CODE=”url”][CODEBASE=”url”][DATA=”url”]
[CLASSID=”url”][STANDBY=”texto”][TYPE=”tipo”]
o ARCHIVE. Url o lista de Url’s que se precisan ser precargadas por el componente
o CODE. Url al archivo de clase Java para el elemento
o CODEBASE. Url al código base del elemento
o DATA. Url a los datos usados por el elemento
o CLASSID. Identificador de clase para el objeto
o STANDBY. Asigna un mensaje que el navegador puede mostrar mientras el objeto
se esté cargando.
o TYPE. Designa el tipo de contenido del recurso definido en el atributo "data".
<OBJECT DATA="http://www.htmlquick.com/es/img/links/button.jpg"
TYPE="image/jpg">
</OBJECT>
47
HTML Básico
<OBJECT CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"
WIDTH="150" HEIGHT="175" TYPE="audio/midi">
<PARAM NAME="FileName" VALUE="../sonidos/xfiles.mid"></PARAM>
<PARAM NAME="autostart" VALUE="true"></PARAM>
</OBJECT>
En casi todos ellos dentro del tab OBJECT se utilizan tags PARAM. El tag <PARAM> define un
parámetro para ser usado en un tag HTML OBJECT. Estos valores pueden ser usados por el objeto
contenedor en tiempo de ejecución, para definir valores iniciales. Deben estar ubicados justo después del
tag de apertura del objeto.
En alguno de los ejemplos anteriores tambien ha aparecido el tag EMBED que sirve para incrustar un
archive multimedia en una página. Puede aparecer dentro de un tag OBJECT o el solo, en este caso el
tipo de archivo arrancar el programa (plugin o extensión) asociado a ese tipo de contenido.
48