Enviado Por Roymasther

::www.Niteroi.netfirms.com
Introducción----------------------------------------------------------------------------------------

El World Wide Web (WWW) es el servicio de moda en Internet. Es un sistema de

información muy ágil que utiliza el formato hipertexto: con un simple "clic" del
ratón usted escoge las opciones que más le interesan de entre un amplio menú de
imágenes, textos y sonidos. Podrá leer periódicos a través de su ordenador, visitar
museos, entrar en la Casa Blanca, consultar catálogos de empresas….

Podemos definir el WWW como un amplio sistema de hipermedia de acceso a todo un

conjunto de información heterogénea distribuida por toda la red Internet.

Un documento hipertexto no se compone únicamente de texto sino que también

contiene relaciones estructurales (enlaces a otros documentos). Si ampliamos aún más
el concepto y hacemos que los enlaces no sean estrictamente entre texto sino que
pueda intervenir información en otros formatos (gráficos, sonidos, vídeo…) el
resultado es un documento hipermedia. Este concepto de información distribuida va
muy ligada al diseño y estructura de Internet.

La idea básica es que los documentos contienen referencias a otros documentos y en

general a cualquier tipo de información residente localmente o a sistemas remotos.
Estas referencias pueden ser palabras, frases o incluso dibujos.

En lugar de navegar por Internet utilizando una serie de menús, lo hacemos desde
dentro de los mismos documentos facilitando la navegación.

En Marzo de 1989, un físico del CERN (Centro Europeo para la Investigación

Nuclear) llamado Tim Berners-Lee propuso un proyecto de unificación del acceso a
todos los datos que poseía este organismo. Se desarrolló una superficie tipo hipertexto
y un protocolo de comunicación (HTTP: HyperText Transfer Protocol) que permitía a
los científicos que trabajaban en proyectos del CERN consultar toda la información
disponible que se encontraba diseminada en los diferentes ordenadores de las
instituciones que colaboraban con el CERN.

El éxito del proyecto fue tan grande que se empezó a definir un lenguaje de creación
de documentos estructurados llamados HTML (HyperText Markup Language). Al
mismo tiempo empezaron a surgir clientes con interficies muy simples y eficaces que
facilitaban aún más la búsqueda de la información con este sistema.

Los documentos de hipertexto se formatean utilizando el formato HTML que no sólo

permite incluir hiperenlaces sino que también permite dar formato al texto (ordenar
párrafos, poner cabeceras, destacar texto…).
El Lenguaje de Hipertexto: HTML---------------------------------------------------------

Para escribir los documentos de hipertexto se ha desarrollado un formato de datos

o lenguaje llamado HyperText Markkup Language (HTML). Este lenguje permite
dar indicaciones precisas al programa cliente de cómo debe presentarse el
documento en pantalla o al ser impreso. Por ejemplo, se puede señalar que
determinados textos deben ser escritos en negrita, o centrados, etc. También se
puede indicar dónde se debe insertar una imagen en el texto o cualquier otro
objeto multimedia, e informar de en qué fichero del servidor se encuentra éste.
Escribir un documento de hipertexto usando HTML, no es en realidad una tarea
díficil.

Un documento HTML es simplemete un fichero de texto ASCII, en el que se incluye

el texto que se desea mostrar en pantalla. Además del texto, deben introducirse ciertos
comandos o "marcas" (Tags) que indicarán al browser cómo se debe visualizar el
documento en el monitor. A través de los tags se definen los distintos elementos que
componen la imagen.

Los tags se escriben encerrados entre los símbolos "<" y ">", y usualmente los
comandos van por parejas, como veremos después.

Por ejemplo si se desea que un texto aparezca en negrita, debe escribirse el

comando <b> al principio de este texto, y el comando </b> al final.Así, en el
documento HTML, debemos escribir la intrucción de la siguiente forma: <b>este
texto aparecerá en negrita </b> y el texto lo veremos en negrita, como a
continuación: este texto aparecerá en negrita

Si además quisiéramos que el texto apareciera centrado en la página se debe usar

el comando <center>. El efecto del comando se termina con un tag que incorpora
la barra "/". El texto mostrado antes, centrado y en negrita, que se mostraría en
pantalla como sigue:

Plantilla de un documento HTML-----------------------------------------------------------

<html>........</html>:

Etiquetas de inicio y final de inicio de documento HTML

<title>........</title>:

Entre estas dos etiquetas, es importante poner el título de nuestra página ya que
cuando alguien se conecte, le saldrá en el encabezamiento de la página web.

<body>........</body>

Etiquetas de inicio y final del cuerpo del mensaje, es decir, de nuestra página
HTML. Dentro de estas dos marcas es donde pondremos nuestras instrucciones y
comandos.

Cómo insertar una imagen-------------------------------------------------------------------

 La etiqueta que inserta una imagen es la siguiente:

<IMG SRC= "nombrearchivo.gif">

 Imagina que tienes una imagen que se llama "david.gif", la instrucción que
tendrías que escribir es:

&ltIMG SRC="david.gif">

Cómo hacer un enlace--------------------------------------------------------------------------

 La etiqueta que crea un link hacia otro archivo se llama ANCHOR. Por ejemplo,
si escribes:

<A HREF="nombrearchivo"> Haz click aquí </A> para más

información.

Imagina que quieres escribir una línea donde aparece la palabra

Barcelona, y que cuando pulsen sobre esta palabra quieres que se abra otra
página que has creado tu también y que se llama "historia.html":

Esta es la historia de una ciudad llamada><A

HREF="historia.html"> Barcelona </A>

Cómo hacer que una imagen sea un enlace --------------------------------------------

 Si quieres poner tu foto "david.gif" y que pulsando sobre ella se abra otro
archivo llamado "biografia.html", lo que tienes que escribir es lo
siguiente:

<A HREF= "biografia.html"><IMG SRC="david.gif"></A>

Ejemplo:

<HTML><HEAD><TITLE>Documento de prueba</TITLE></HEAD>
<BODY>
<CENTER><H2>Mi primer documento</H2></CENTER>
<H3>Mi nombre es xxxxxxxxxxx</H3><HR>
<P>Este es mi primer documento HTML y estoy utilizando las instrucciones
aprendidas.</P>
<P>Voy a insertar la imagen "dona.gif":</P>
<P><IMG SRC="dona.gif"></P>
<P>Ahora queremos resaltar parte de lo que vamos a escribir y para ello
utilizamos el tag "bold" que nos pondrá en negrita las siguientes palabras
<B>Ideis mediantibus reis ipsas intelligimus. Interest ego maxime ut clariores et
distinctiores, quntume fieri potest, ideas habeamus<B> y de esta forma
terminamos nuestro relato.<P>
</BODY>
</HTML>
Etiquetas (Tags)---------------------------------------------------------------------
Encabezados:
<Hn>texto</Hn>
n equivale a un número entre 1 y 6. Siendo 1 el de mayor tamaño,
de forma que nuestro titular tendría un cuerpo de letra enorme y, si
utilizamos 6, una letra muy pequeña.

Párrafos y bloques de texto:

<P>texto</P>
Inicio y final de párrafo.

<PRE>texto</PRE>
Respeta el bloque de texto original, tal y como lo hemos escrito con espacios y
tabuladores.

<BLOCKQUOTE&GT;texto</BLOCKQUOTE>
Incluye citas en un bloque separado de la pantalla.

Centrado de texto

<CENTER>texto</CENTER>
Centra un texto o frase.

Dirección personal:

<ADRESS>dirección e-mail</ADRESS>
La dirección aparecerá en cursiva.

Aspecto de los caracteres:

<B>texto</B>
Resultado del texto en negrita.

<I>texto</I>
Resultado del texto en cursiva o itálica.

<U>texto</U>
Texto con caracteres subrayados (no es reconocible por todos los browsers).

<TT>texto</TT>
Resultado del texto en formato teletipo.

<BLINK>texto</BLINK>
Resultado del texto parpadeante.

Líneas horizontales:
<HR>
El resultado es una línea horizontal. Esta marca no necesita ser cerrada.
Saltos forzados de línea
<BR>texto</BR>
El resultado es un salto forzado a la siguiente línea.
Listas precedidas de un punto--------------------------------------------------------

La lista se delimita con el tag <UL>, y cada uno de sus elementos con <LI>. La primera
es un contenedor que indica al browser que el texto que se encuentra entre los
delimitadores es el contenido de una lista.
Para comprender mejor la manera de construir estas listas veamos un pequeño ejemplo:

<UL>
<LI>manzana</LI>
<LI>melocotón</LI>
</UL>

Listas ordenadas numéricamente--------------------------------------------------

Listas precedidas por un número de orden que empieza en un uno y crece para cada
elemento del mismo nivel. El delimitador de la lista es el<OL> y cada elemento se
especifica con <LI>. Ejemplo:

<OL>
<LI>Canadá</LI>
<LI>China</LI>
<LI>Brasil</LI>
<LI>Australia</LI>

Enlace a un servidor FTP y a una dirección E-Mail--------------------------

Un atractivo especial del uso de URL y, por extensión, de WWW es la posibilidad de

acceder a distintas formas de exportar la información de Internet sin necesidad de
emplear un visualizador diferente.

Enlace a un servidor FTP: con esta utilidad podemos enlazar, desde el

mismo navegador, a un servidor FTP desde donde podremos bajarnos la
información que nos interese. Ejemplo:

<A HREF="ftp://ftp.aud.alcatel.com/tcl">ftp.aud.alcatel.com/tcl</A>

Enlace a una dirección de correo electrónico: "mailto:" seguido de la

dirección de correo electrónico de un usuario, es el modo de recoger los
posibles mensajes de correo desde el propio browser. Normalmente se
abre una ventana de correo, en la que se puede rellenar los distintos
campos propios del mensaje.
Es muy frecuente aprovechar la directiva ADRESS para incluir una
llamada a esta función. Por ejemplo:

<ADRESS> nombre </ADRESS>

<A href="nombre@nose.es">ergonzal@no.es</A>
Tablas Básicas-------------------------------------------------------------------------

La directiva dedicada a tablas es TABLE y delimita el conjunto de una tabla. No es

preciso determinar inicialmente el número de filas o columnas, el browser se encargara
de averiguarlo.
Cada celda de delimita con <TD> y cada fila con <TR>.
No es necesario incluir la última <TR> ya que al final de la tabla supone el cierre de la
fila correspondiente.
La presencia de borde se indica con el atributo border de la directiva <TABLE> que no
tiene parámetros.

El título es un literal delimitado por la directiva <CAPTION> dentro de la

especificación de la tabla. Por último, cada elemento de cabecera estará delimitado por
la directiva <TH>

Nota: no tiene por qué haber un número determinado de elementos por fila, el browser
se encarga de averiguar la longitud de la fila más larga y la aplica al conjunto de la
tabla.

Ejemplo Tablas Básicas----------------------------------------------------------------

<Table border=1>
<CAPTION>Ejemplo de tabla html: </CAPTION>
<TH>Primera columna</TH><TH>Segunda columna</TH><TH>Tercera
columna</TH><TH>Cuarta columna</TH><TR>
<TD>1,1</TD><TD>1,2</TD>,<TD>1,3</TD><TD>1,4</TD><TR>
<TD>2,1</TD><TD>2,2</TD><TD>2,3</TD><TD>2,4</TD><TR>
<TD>3,1</TD><TD>3,2</TD><TD>3,3</TD><TD>3,4</TD>
</TABLE>

El Ejemplo se vería así:

Ejemplo de Tabla HTML:

Primera columna Segunda columna Tercera columna Cuarta columna
1,1 1,2 1,3 1,4
2,1 2,2 2,3 2,4
3,1 3,2 3,3 3,4

Tablas avanzadas y ejemplos:------------------------------------------------------

 Demostración de "Rowspan"
 <TABLE BORDER>
<TR>
<TD> Elemento 1</TD>
<TD ROWSPAN=2 >Elemento 2 <TD>
<TD>Elemento 3 </TD>
</TR>
<TR>
<TD>Elemento 4 </TD><TD>Elemento 5</TD>
</TR>
</TABLE>
<TABLE BORDER> ---------------------------------------------------------------------------

<TR>
<TD>Elemento 1</TD>
<TD Colspan=2>Elemento 2</TD>
</TR>
<TR>
<TD>Elemento 3</TD><TD>Elemento 4</TD><TD>Elemento
5</TD>
</TR>

</TABLE>

El ejemplo se verá así:

Elemento 1 Elemento 2
Elemnto 3 Elemento 4 Elemento 5

Atributo ALIGN y VALIGN---------------------------------------------------------

 ALIGN= LEFT, RIGHT, CENTER

 VALIGN=TOP, BOTTOM, MIDDLE

Se puede aplicar a celdas individuales o filas totales:

<TABLE BORDER>

<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
<TH>Abril</TH>
</TR>
<TR ALIGN=center >
<TD> alineado centro</TD>
<TD>celda 2</TD>
<TD>otra celda,<BR>celda 3</TD>
<TD VALIGN=bottom>celda 4</TD>
</TR>
<TR>
<TD ALIGN= right>alineado a la <BR> derecha</TD>
<TD ALIGN= centro> centro</TD>
<TD ALIGN= left> izquierda</TD>
<TD VALIGN= top>celda 7</TD>
</TR>

</TABLE >

El ejemplo se verá así:

Enero Febrero Marzo Abril

otra celda,
alineado centro celda 2
celda 3 celda 4
alineado a la celda 7
centro izquierda
derecha
Atributos de Texto-----------------------------------------------------------------

Atributo Directiva Ejemplo Resultado

Texto de
Negrita <B></B> <B>Texto de prueba</B>
prueba
Texto de
Cursiva <I></I> <I>Texto de prueba</I>
prueba
Texto de
Subrayado <U></U> <U>Texto de prueba</U>
prueba
Texto de
Tachado <S></S> <S>Texto de prueba</S>
prueba
Superindice <SUP></SUP> Texto de<SUP>prueba</SUP> Texto de prueba
Fórmula de prueba Fórmula de
Subindice <SUB></SUB>
V<SUB>n</SUB> prueba Vn
<CENTER>Texto de Texto de
Centrado <CENTER></CENTER>
prueba</CENTER> prueba

La etiqueta <FONT></FONT> nos permite variar el tamaño y el color de un texto

determinado. Para ésto, utiliza los parámetros SIZE y COLOR.

<SIZE>= valor
Para dar al texto un tamaño en puntos determinados.

Ejemplo Resultado

<FONT size=6 color="#9900CC" > Prueba Prueba

Listas de Definición---------------------------------------------------------------------

Las listas de definición sirven para definiciones de términos.

<DT> El nombre de la cosa a definir.

<DD> Definición de dicha cosa

Ejemplo
<DT>Correo Electrónico:</DT>
<DD>Servicio Telemático similar al
sistema postal ordinario, pero sobre un
sistema informático . También llamado e-
mail. Es un nuevo y eficaz medio de
comunicación entre ordenadores y bancos
de datos de todo el mundo.</DD>
Resultado
Correo Electrónico:
Servicio Telemático similar al
sistema postal ordinario, pero
sobre un sistema informático .
También llamado e-mail. Es un
nuevo y eficaz medio de
comunicación entre
ordenadores y bancos de datos
de todo el mundo.
Varios -------------------------------------------------------------------------------------

 <MARQUEE> </MARQUEE> Marquesina con texto en el interior que se

desplaza. Funciona únicamente con Microsoft Explorer. Los usuarios que
utilizan el Netscape visualizarán el texto estático y sin marquesina.

Align= top/middle/bottom
bgcolor= "Código de color"
direction= left/right
height= número ó %
widht= número ó %
loop= num/infinite
Indica el número de veces que se desplazará el texto por la
marquesina. Si se indica "infinite", se desplazará indefinidamente
scrolldelay= número.
Indica el número de milisegundos que tarda en reescribirse el
texto por la marquesina, a mayor número más lentitud.
 Veamos un ejemplo:

<CENTER> <H3> <FONT COLOR="#FF0099"

<MARQUEE bgcolor="#FFFFCC" widht= 50%
direction=left scrolldelay=0> Feliz Navidad</MARQUEE>
</FONT> </H3> </CENTER>

¬ V Feliz


 VLINK=" Código de color".

Define el color de los enlaces visitados.
ALINK="Código de color".
Define el color de los enlaces activos.
 ALT = "indicativo"
Mostrará el texto indicado en el caso de que el navegador utilizado para ver la
página no sea capaz de visualizar la imagen.

Colores---------------<body vlink="gray" > ---------------------------------------

Hay 5 diferentes aspectos de una página Web de los cuales se puede definir el color: el
fondo, el texto, los enlaces no visitados, los enlaces activos y los enlaces visitados.
Los colores se pueden reproducir utilizando el nombre del color o bien el Código RGB

Nombre de los colores

aqua black blue fuchsia green gray

lime maroon navy olive purple red

silver teal white yellow

Código RGB-----------------------------------------------------------------------------
 &LT;BODY BGCOLOR="#XXYYZZ">

donde:

XX es un número indicativo de la cantidad de color rojo

YY es un número indicativo de la cantidad de color verde
ZZ es un número indicativo de la cantidad de color azul

Estos números están en numeración hexadecimal. Esta numeración se caracteriza por

tener 16 dígitos (en lugar de los diez de la numeración decimal habitual). Estos dígitos
son:

0 1 2 3 4 5 6 7 8 9AB C DE F

Es decir, que en nuestro caso, el número menor es el 00 y el mayor el FF. Así, por
ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro
dos colores .

Los colores primarios son:

#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul

Otros colores son:

#FFFFFF - Blanco
#000000 - Negro
#FFFF00 - Amarillo

Para hacer un color más oscuro, hay que reducir el número de su componente, dejando
los otros dos invariables. Asíel rojo #FF0000 se puede hacer más oscuro con #AA0000,
o aún más oscuro con #550000

Para hacer que un color tenga un tono más suave (más pastel), se deben variar los otros
dos colores haciéndolos más claros (número más alto), en una cantidad igual. Así,
podemos convertir el rojo en rosa con #FF7070
Fuente: WebMaestro

Ejemplo de la tabla del azul:

azul=ff

ff ff00ff ff33ff ff66ff ff99ff ffccff ffffff

cc cc00ff cc33ff cc66ff cc99ff ccccff ccffff

rojo 99 9900ff 9933ff 9966ff 9999ff 99ccff 99ffff

66 6600ff 6633ff 6666ff 6699ff 66ccff 66ffff

33 3300ff 3333ff 3366ff 3399ff 33ccff 33ffff

Vamos a ver un ejemplo de cambio de colores de fondo, del texto y parte del texto:
<HTML>
<HEAD><TITTLE>Colores</TITTLE></HEAD
<BODY BGCOLOR="#000000" TEXT="#FFFFFF">
<H3><CENTER>Documento con el fondo negro y texto en
blanco</CENTER></H3>
<CENTER><FONT COLOR="aqua"><H3>Ahora texto en azul
claro</H3></FONT></CENTER>
</BODY>
</HTML>

Atributos para la Línea Horizontal <HR>

Hay cuatro atributos que permiten ajustar el aspecto de la línea

horizontal. Los atributos son SIZE, WIDTH, ALIGN y NOSHADE:

 <HR SIZE=núm> El atributo SIZE indica qué grosor debe tener

la línea.
 <HR WIDTH=número (tanto por cien)> Por defecto la línea
horizontal es tan ancha como la página. Con el atributo WIDTH
se puede especificar el ancho exacto en píxeles o el tamaño
relativo (en tanto por cien, por ejemplo WIDTH=80%) respecto
al ancho de la página.
 <HR ALIGN=left/right/center> Dado que, con el atributo
WIDTH, las líneas no tienen porque coincidir con el ancho de la
página, se hace necesario un mecanismo para especificar su
alineación horizontal, en este caso con el atributo ALIGN, que
puede tomar los valores izquierda, derecha y centro.
 <HR NOSHADE> Este atributo especifica que la barra no debe
tener efectos de sombra.

EJEMPLO:

<HR WIDTH=60% NOSHADE align=left>

Atrivutos para
listas--------------------------------------------------------------------------

Las listas ordenadas siempre empiezan en 1 y van subiendo progresivamente. Se

han añadido dos atributos: TYPE y START.

TYPE Letras mayúsculas: TYPE= A

Letras minúsculas: TYPE= a
Números romanos: TYPE= I

START Especifica el número del primer elemento de la lista, para cuando

queramos que comiencen en un valor distinto al uno. El orden se da
siempre en número, y se presenta según el tipo especificado. Por
ejemplo START=5 se mostraría como 'E', 'e', 'V', o '5' según el tipo.

Ejemplo:

<OL TYPE=A START=8> H. Cultura

<LI>Cultura I. Ciencia
<LI>Ciencia J. Música
<LI>Música
<LI>Ocio
K. Ocio
Listas Desordenadas------------------------------------------------------------------

En las listas desordenadas se emplean por defecto discos en cada línea, que van
cambiando conforme las listas se van anidando. En Netscape pasan de un disco sólido a
un círculo o un cuadrado.

TYPE=disc
Permite especificar el tipo de símbolo qué queremos
TYPE=circle
TYPE emplear en nuestras líneas. (Independientemente del
TYPE=square (disco,
nivel de anidamiento).
círculo o cuadrado).

Ejemplo:

<UL TYPE=circle> o Televisión

<LI>Televisión o Radio
<LI>Radio
<LI>Internet
o Internet
<UL TYPE=square>  Televisión
<LI>Televisión  Radio
<LI>Radio
<LI>Internet
 Internet

También, se han añadido atributos al elemento <LI> para dar mayor flexibilidad.
El atributo TYPE cambia el tipo de lista para ese elemnto y los siguientes. En las listas
ordenadas, también se puede utilizar el atributo VALUE para modificar el número de
ese elemento y los siguientes

Atributos de las Imágenes

Posición del titular con respecto las imágenes:

Para poner un texto explicativo (pero menor de una línea completa),se puede poner
arriba, en medio o abajo del lado de la imagen, debemos añadir el atributo <ALIGN> a
la etqueta:

<IMG SRC="casa.gif" ALIGN TOP>Texto alineado arriba

Texto alineado arriba

<IMG SRC="casa.gif" ALIGN=MIDDLE>Texto alineado en medio

Texto alineado en medio

<IMG SRC="casa.gif" ALIGN=bottom>Texto alineado abajo

 Texto alineado abajo

Alineación y dimensionado de Imágenes

Las imágenes también se pueden alinear a la izquierda o a la derecha, con el mismo

atributo <ALIGN>que utilizamos para determinar la posición del titular de la imagen.

<IMG SRC="casa.gif" ALIGN=right>

o por el contrario, podemos alinear esta imagen a la izquierda.Y para conseguirlo,

escribiremos:

<IMG SRC="casa.gif" ALIGN=left>

Para interrumpir el rellenado del texto a los lados de la imagen y dejar un espacio en
blanco parcialmente, se usan las extensiones de la etiqueta <BR>

Imágenes

Tal como explicábamos en la Lección 1, para insertar una imagen en un documento

HTML se utiliza la etiqueta:

<IMG SRC= "nombre_archivo.gif">

Las imágenes deben estar guardadas en alguno de estos formatos gráficos: GIF, JPEG.
El formato GIF almacena las imágenes con un máximo de 256 colores, en forma
comprimida. Es el formato más extendido debido a que todos los navegadores gráficos
lo soportan.
El formato gif es más recomendado para iconos, gráficos, ... y el formato JPG es más
útil para fotografías porque almacena las imágenes con 16.7 millones de colores y
comprime el tamaño hasta la décima parte de su tamaño original.

Borde de las imágenes

Para el borde de las imágenes, utilizaremos las etiquetas:

<IMG.....BORDER>

Indicará el tamaño del borde de la imagen. Si se desea que no se muestre

el borde se usará BORDER=0.

Ejemplo:

<IMG SRC="prohibido.gif" border=1>

<IMG SRC="prohibido.gif" border=0>

Dimensionado de las imágenes

Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes, pues una
imagen grande supone un fichero grande, y esto puede resultar en un tiempo excesivo
de carga, con el consiguiente riesgo de que quien esté intentando cargar nuestra página
se canse de esperar, y desista de ello.

El atributo HEIGHT determina el alto de la imagen a mostrar, se especifica en puntos

de la pantalla (píxeles) o en tanto por ciento sobre el tamaño del documento. En caso de
que la imagen sea mayor o menor se escalará a este tamaño.

El atributo WIDTH indica el ancho al que se mostrará la imagen, escalándola a este

tamaño. También se expresará en pixeles o en tanto por ciento.

Ejemplo:
< IMG SRC="fun.gif" width="165" height="95">

Teniendo en cuenta la proporción de la imágen, si no se

indican bien los valores, ésta saldrá deformada.

< IMG SRC="fun.gif" width="156" >

Al indicar sólo uno de los valores, el otro se ajusta

adecuadamente según la proporción de la imágen.

Espaciado de separación de la imágen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del
texto o de otro elemento. Se especificará en puntos. Con el atributo VSPACE se indica
el margen vertical.

<IMG .. HSPACE=... VSPACE=...>

Ejemplo:

<img src="cuadrado.gif"><img
src="cuadrado.gif">
<img src="cuadrado.gif"
hspace=50><img src="cuadrado.gif">

Sonidos

Nuestra página puede contener un sonido de fondo que se active automáticamente al

entrar en la página.

Fondo sonoro para el Microsoft Internet Explorer:

A partir de la versión 2.0 reproduce los fondos sonoros sin necesidad de

añadir nada.
La etiqueta que se utiliza es:

<BGSOUND SRC="fichero_de_sonido" LOOP=n>

src = "fichero"
Indica el nombre del fichero de sonido, que puede estar en formato .mid
o .wav
loop = num / infinite
Indica el número de veces que se reproducirá el sonido. Si se indica
infinite, el sonido se reproducirá indefinidamente.
 Fondo sonoro para el Netscape:

La versión 2.0 deL Netscape es capaz de reproducir sonidos, pero es

necesario tener instalado el plug-in Crescendo de Liveupdate. (Hay que
instalarlo manualmente en el directorio plugins del Netscape 2.0). La
versión 3.0, si se trata de la versión completa, lleva incorporado el plug-
in Live Audio capaz de reproducir los sonidos.

La etiqueta básica para el Netscape es:

<EMBED SRC="fichero_de_sonido" WIDTH=xxx HEIGHT=yy>

embed src="fichero"
Inserta el fichero de sonido en nuestra página.
Autostart="true"
La reproducción se inicia automáticamente
width="n" height="n"
Altura y anchura de una consola, y que tienes diferentes teclas: play,
stop, pausa..
Loop="true"
Reproducirá ininterrumpidamente.
Volume="n"
Volumen al que se reproducen los ficheros de sonido.
controls=smallconsole
Visualiza los controles para iniciar la reproducción, así como realizar una
pausa.

Ejemplo2: Fondo sonoro

Ejemplo1:
combinado para Netscape e Internet
Fondo sonoro para Netscape
Explorer

<EMBED src= "yesterday.mid" <BGSOUND SRC= "yester.mid">

loop= true autostart= true <EMBED src= "yesterday.mid"
volume=50 loop=1
width=50 height=15 autostart= true
controls=smallconsole> width=145 height=60>
Resultado1 Resultado2

Formularios

Los formularios permiten solicitar información al visitante. Esta información es enviada

directamente a nosotros a travésde nuestro buzón de correo y sin necesidad de un
programa externo que procese esa información.
Pero este tipo de formulario sólo podrá ser utilizado por la mayoría de navegadores, con
la excepción del Internet Explorer

Etiquetas de inicio
<FORM ACTION="mailto:direccion_email" METHOD="POST"
ENCTYPE="TEXT/PLAIN">
Indica que los datos sean enviados por correo electrónico a
ACTION
la dirección especificada.
El atributo POST indica que los datos sean enviados
METHOD=POST
immediatamente al pulsar el botón de envío.
 Permite recibir la información como un fichero de texto,
ENCTYPE=TEXT/PLAIN
sin codificar.

Elementos
<INPUT TYPE="texto" | "password" NAME="...">
INPUT Introducción básica de elementos
TYPE Indica el tipo de entrada
NAME Nombre que asignamos a la variable

Introducción de Texto (una línea y

múltiples líneas)
Ejemplo de una sola línea
<FORM
ACTION="mailto:dirección_de_email" Introduzca su sistema
METHOD="POST" ENCTYPE="TEXT/PLAIN"> operativo:
Introduzca su sistema operativo
<BR><INPUT TYPE="text"
NAME="sistemaoperativo">
</FORM>

Ejemplo múltiples líneas

Comentarios
<FORM
ACTION="mailto:dirección_de_email"
METHOD="POST"
ENCTYPE="TEXT/PLAIN">
Comentarios
<BR><TEXTAREA NAME="comentarios"
cols=40 rows=6>
</FORM>

Password

El texto no es reconocible, es decir los caracteres que se introducen se

convierten en astériscos.

Ejemplo de Password
<FORM
ACTION="mailto:dirección_de_email" Introduzca su
METHOD="POST" contraseña:
ENCTYPE="TEXT/PLAIN">
Introduzca su contraseña:
BR<INPUT TYPE="password"
NAME="Contraseña">
</FORM>
Envío de Datos
<INPUT TYPE=SUBMIT...> Enviar Datos
Botón de envío / borrado de datos

<INPUT TYPE=SUBMIT VALUE="Enviar Datos">

Enviar Datos

<INPUT TYPE=SUBMIT VALUE="Borrar

datos"></STRONG< td>
borrar datos

Ejemplo: Resultado

<PRE>
<FORM METHOD=POST ACTION="mailto:identificativo@redestb.es">
<STRONG>Nombre:
<INPUT TYPE="TEXT" NAME="nombre" VALUE="" SIZE=15>
Ciudad:
<INPUT TYPE="TEXT" NAME="ciudad" VALUE="" SIZE=15>
E-Mail:
<INPUT TYPE="TEXT" NAME="email" VALUE="" SIZE=30>
Comentarios:</STRONG>
<TEXTAREA NAME="comentario" ROWS=6 COLS=40>
</TEXTAREA>
<INPUT TYPE=SUBMIT VALUE="Enviar Datos"> <INPUT TYPE=RESET
VALUE="borrar datos">
</FORM>
</PRE>

Libro de visitas
Nombre:

Ciudad:

E- Mail:

Comentarios:

Enviar Datos borrar datos

Enviado por Héctor robles flores

(Alojamiento Huaraz)