Вы находитесь на странице: 1из 11

DISEO WEB

1. Introduccin

1.1. Qu es una pgina Web?
Pues eso de entrada podemos preguntarnos qu es una pgina Web. Habran dos respuestas: para
el internauta y para el diseador.
Para el internauta una pgina WEB es una pantalla en su monitor que le muestra la informacin
que va buscando y enlaces a otros sitios relacionados.
Para el diseador una pgina WEB es un documento construido para mostrar informacin en la
pantalla de un monitor, que contiene adems de la informacin una serie de instrucciones para
indicar como se ha de mostrar esa informacin. Estas instrucciones se escriben siguiendo un
lenguaje llamado HTML
Como ves el diseador define la pgina web como algo ms completo y tcnico que el simple
internauta. La pgina Web se concreta en un documento con un nombre terminado con la
extensin .htm o .html.
Una serie de pginas Web interconectas e interrelacionadas de alguna forma (el mismo tema, el
mismo objetivo...) forman un sitio Web, que habitualmente est almacenado en un servidor.
1.2. El cdigo
Lo mejor para aprender a hacer algo es hacerlo. As que vamos a la primera pgina, crea un
archivo de texto y despus de agregar el cdigo que esta en el bloque inferior gurdalo de la
siguiente manera:
mipagina.htm
<HTML>
<HEAD>
<TI TLE>Mi pr i mer a pagi na web </ TI TLE>
</ HEAD>
<BODY>
<H1 al i gn=" cent er " >Mi Pr i mer a pagi na web </ H1>
<HR>
<P>Est o t an senci l l o es una ver dader a pgi na web, aunque l e f al t a el cont eni do,
per o t odo l l egar . </ P>
</ BODY>
</ HTML>
Si quieres ver como queda esto en el explorador solo tienes que abrir el archivo y listo.


1.3. La explicacin
Si te fijas en la pgina que ves con el explorador solo se ve parte de lo que has escrito,
concretamente todo lo que no est encerrado entre los smbolos < y >. Eso es el contenido de la
pgina, pero y lo que est entre esos parntesis angulares? pues esas son las etiquetas que le
dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el ttulo de la
pgina, etc. Si te fijas cada etiqueta tiene un comienzo y un fin:
<ETI QUETA par met r os> . . . </ ETI QUETA>
Como ves una apertura y un cierre. Algunas etiquetas (como <BR> cambio de lnea o <HR> linea
horizontal) no llevan cierre. Fijate que lo primero que tenemos es la etiqueta <HTML> cerrada al
final del documento con </HTML>, eso quiere decir que estamos ante un HTML:
<HTML> . . . </ HTML>
Dentro de ese documento vemos una parte llamada cabecera, que la reconocers porque est
limitada con la etiqueta <HEAD> </HEAD>. l contenido de esta parte no siempre es visible, y si
lo es nunca se muestra en la pgina en si. Contiene por ejemplo el ttulo que se ve en la ventana
del explorador, arriba a la izquierda. La cabecera queda por tanto:
<HEAD>
<TI TLE>Mi pgi na web</ TI TLE>
</ HEAD>
Puede contener muchas otras cosas, pero eso lo dejamos para ms adelante.

2. EL HTML

2.1. El cuerpo del documento
La otra parte es el cuerpo o <BODY> </BODY>, es el contenido de la pgina web. Tiene una
etiqueta con cierre:
<BODY> . . . </ BODY>
Y ahora el contenido:
<H1 al i gn=" cent er " > Mi pr i mer a pgi na web</ H1>
Con esto colocaremos el texto en formato <H1>(o cabecera 1) y centrado (align="center"), o sea,
en tamao grande y centrado en la pgina, una forma de resaltar la frase. Ahora separamos esa
frase por medio de una lnea horizontal:
<HR>
Como ves este es un ejemplo de etiqueta sin cierre. Y por ltimo colocamos un texto explicativo
en un prrafo (<P></P>), o sea, un bloque de texto con un espacio por delante y otro por detrs:
<P>Est o t an senci l l o es una ver dader a pgi na web, aunque
l e f al t a el cont eni do, per o t odo l l egar . </ P>
2.2. Estructura del documento
La estructura de un documento HTML se puede resumir as:
t i po de document o
<HTML>
<HEAD>
<TI TLE>t i t ul o de l a pgi na</ TI TLE>
cosas que af ect an a l a pgi na per o no a su cont eni do
</ HEAD>
<BODY par met r os>
cont eni do de l a pgi na
</ BODY>
</ HTML>
En el tipo de documento deberemos especificar a que estndar del HTML responde nuestra pgina
entre una de las siguientes opciones:
<! DOCTYPE HTML PUBLI C " - / / I ETF/ / DTD HTML 2. 0/ / EN" >
Cumple el estndar HTML 2.0
<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 3. 2 Fi nal / / EN" >
Cumple el estndar HTML 3.2
<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Tr ansi t i onal / / EN"
" ht t p: / / w3. or g/ TR/ REC- ht ml 40/ l oose. dt d" >
Cumple el estndar HTML 4.0
<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0/ / EN"
" ht t p: / / w3. or g/ TR/ REC- ht ml 40/ st r i ct . dt d" >
Cumple el estndar HTML 4.0 y no contiene adems elementos desaconsejables
<! DOCTYPE HTML PUBLI C " - / / W3C/ / DTD HTML 4. 0 Fr ameset / / EN"
" ht t p: / / w3. or g/ TR/ REC- ht ml 40/ f r ameset . dt d" >
Es una definicin de marcos que cumple el estndar HTML 4.0
El HTML 4.0 considera desaconsejables aquellos elementos que, an siendo soportados, han sido
sustituidos por otros ms potentes y, por ello, es posible que sean eliminados del estndar HTML
en el futuro.

2.3. La cabecera
Suele ser el lugar ms indicado para colocar aquellos elementos de la pgina que no alteren el
contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es
el lugar ms recomendable para colocar los scripts y las hojas de estilo, como veremos en los
captulos correspondientes.
Hay tambin otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando
especificamos una URL relativa en un enlace, en principio es para acceder a una pgina situada en
nuestro mismo servidor. Sin embargo, si especificamos:
<BASE HREF=" ht t p: / / www. mi si t i o. com/ " >
Ahora todas nuestras URLs relativas se encontrarn dentro del servidor http://www.misitio.com

2.4. Meta Name
Adems del ttulo de la pgina, uno de los elementos que se pueden incluir aqu son los META.
Entre otras cosas, sirven para indicar propiedades de la pgina como pueda ser el nombre de su
autor. Por ejemplo,
<META NAME=" GENERATOR" CONTENT=" Mozi l l a/ 4. 03 [ es] ( Wi n95; I ) [ Net scape] " >
nos indicara la herramienta con que hemos creado la pgina (en este caso la versin 4.03 en
espaol para Windows 95 del Composer de Netscape). Como veris el uso es muy simple, en
NAME colocamos el nombre de la etiqueta y en CONTENT colocamos su valor, ambos entre
comillas y con el signo igual por delante.
Estas son las propiedades ms comunes:
Name Content
AUTHOR Autor de la pgina.
CLASSI FI CATI ON Palabras que permite clasificar la pgina dentro de un buscador jerrquico
(como Yahoo).
KEYWORDS Palabras clave por las que encontrarn la pgina en los buscadores. Google
no le hace mucho caso.
GENERATOR Herramienta utilizada para hacer la pgina.
DESCRI PTI ON Descripcin del contenido de la pgina. Google le hace algn caso.


2.5. Meta http-equiv
Son etiquetas usadas tambin para dar informacin al navegador y complementan las etiquetas
Meta vistas en el apartado anterior. En algunos casos existen etiquetas Meta Name y http-equiv
similares. Su uso es similar a las etiquetas Meta Name, por ejemplo:
<META HTTP- EQUI V=" expi r es" CONTENT=" Wed, 26 Feb 1997 08: 21: 57 GMT" >
La nica diferencia est en que en lugar de NAME usamos HTTP-EUIV, el resto es igual. Cuando el
contenido conste de ms de varios valores, estos se separan con ; (punto y coma). Veamos
algunos tipos:
HTTP-EQUIV CONTENT
expi r es Fecha desde la que la pgina debe ser recargada por los navegadores
pr agma El contenido debe ser no-cache y sirve para que el navegador no guarde la
pgina en el ordenador del internauta.
Cont ent -
Language
Idioma en el que est escrita la pgina. Se usan las iniciales como: es_ES:
espaol Espaa, en_US: ingles americano...
Ref r esh Indica al navegador el tiempo (en segundos) que debe esperar para
recargar la pgina automticamente y la pgina a la que debe ir. Ambos
datos se separan con un punto y coma.
Cont ent - Type Tipo de documento y juego de caracteres usado. Lo habitual es colocar el
valor:
text/html; charset=iso-8859-1
Si n o se usa los caracteres especiales (letras acentuadas, ) pueden quedar
ilegibles .



2.6. El cuerpo
El cuerpo es el contenido de la pgina propiamente dicho, o sea, lo que se ve, en el es donde
colocarn prcticamente todos los elementos que vamos a ir viendo por este manual. Los atributos
que admite esta etiqueta <BODY>:
BACKGROUND Coloca una imagen como fondo de la pgina.
BGCOLOR Define el color de fondo de la pgina.
BGPROPERTI ES Cuando es igual a FI XED el grfico definido como fondo de la pgina
permanecer inmvil aunque utilicemos las barras de
desplazamiento.
TEXT Color del texto.
LI NK Color de un enlace no visitado (por defecto azul).
VLI NK Color de un enlace ya visitado (por defecto prpura).
ALI NK Color que toma un enlace mientras lo estamos pulsando (por defecto
rojo).
LEFTMARGI N y
TOPMARGI N
Nmero de pixels que dejar de margen entre el borde de la ventana
y el contenido de la pgina.
MARGI NWI DTH y
MARGI NHEI GHT
Equivalentes a los anteriores, pero stos funcionan en Netscape.
No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna
dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido
cambiarlos en las opciones de su navegador y estarn ya a su gusto.



3. FORMATO DE TEXTO

3.1. Dando formato
Evidentemente en las pginas no todo el contenido es igual y por tanto no todo se ha de mostrar
en la misma forma, por eso HTML nos permite modificar el aspecto del texto: podemos darle
diferentes formatos, modificando desde el aspecto de los caracteres (tipo de letra) hasta el color.
Podemos formatear desde las letras una por una hasta bloques completos de texto.

3.2. Estilos de prrafo
Estos estilos o formatos actan a nivel de prrafo

Etiqueta Significado Resultado
<P> Sirve para delimitar un prrafo. Inserta
una lnea en blanco antes del texto.
Soy un prrafo: fjate en los
espacios de antes y de
despus.
<p ALI GN=x> . . .
</ p>
Justificar el texto del prrafo a la
izquierda (ALI GN=LEFT), derecha
(RI GHT), al centro (CENTER) o a ambos
mrgenes (J USTI FY html4 )
Alineacin izquierda
Texto centrado
Alineacin derecha
Texto justificado o sea,
alineado a ambos lados sin
dejar, escalones en el
margen derecho.
<CENTER> . . .
</ CENTER>
Permite centrar todo el bloque de texto
encerrado.
Alineacin por defecto
Texto centrado
<PRE WI DTH=x>
. . . </ PRE>
Representa el texto encerrado en ella con
un tipo de letra de paso fijo. El parmetro
WIDTH especifica el nmero mximo de
caracteres en una lnea.
Est oy en paso f i j o
<BLOCKQUOTE> . . .
</ BLOCKQUOTE>
Mete sangras de prrafo tanto a derecha
como a izquierda. Suele usarse como
tabulador
Si quieres ver el texto
indentado por ambos
mrgenes usa el Blockquote.


3.3. Los encabezados
El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras o ttulos.
Etiqueta Resultado
<H1> . . . </ H1>
4. Cabecera de nivel 1
<H2> . . . </ H2>
4.1. Cabecera de nivel 2
<H3> . . . </ H3>
4.1.1. Cabecera de nivel 3
<H4> . . . </ H4>
4.1.1.1. Cabecera de nivel 4
<H5> . . . </ H5>
4.1.1.1.1 Cabecera de nivel 5
<H6> . . . </ H6> 4.1.1.1.1.1 Cabecera de nivel 6
Actan a nivel de prrafo, es decir, el texto encerrado en <h1></h1> lleva una lnea en blanco
por delante y por detrs. Habitualmente se utilizan para destacar ttulos de los diferentes
apartados o secciones de un texto.

4.2. Cambiando el tipo de letra
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que
estemos utilizando y se pueden utilizar dentro de un prrafo.
Etiqueta Utilidad Resultado
<B> . . . </ B> Pone el texto en negrita. Soy un texto negro como el
tizn
<I > . . . </ I > Representa el texto en cursiva. Estoy ladeado
<U> . . . </ U> Para subrayar algo. Como soy muy importante
estoy subrayado
<S> . . . </ S>
Para tachar. A m, en cambio, nadie me
quiere
<TT> . . . </ TT> Permite representar el texto en un
tipo de letra de paso fijo.
No soy var i abl e
<SUP> . . . </ SUP> Letra superndice. E=mc
2
<SUB> . . . </ SUB> Letra subndice. a
i,j
=b
i,j
+1
<BI G> . . .
</ BI G>
Incrementa el tamao del tipo de
letra.
Soy GRANDE
<SMALL> . . .
</ SMALL>
Disminuye el tamao del tipo de letra.
Cre ver un lindo gatito



4.3. Estilos de texto
Son formatos predefinidos aplicables a caracteres individuales (y a grupos por supuesto).
Realmente no se usan demasiado salvo que se controlen mediante los estilos CSS.
Etiqueta Significado Efectos
<CI TE> . . .
</ CI TE>
Cita, por ejemplo de un texto Esta frase no es ma
<CODE> . . .
</ CODE>
Cdigo i nt x=0;
<STRONG> . . .
</ STRONG>
Fuerte, negrita. Hay cosas importantes.
<EM> . . . </ EM> Enfasis. Para poner nfasis
<KBD> . . . </ KBD> Teclado El usuario debe teclear Mul t i vac
es el mej or .
<VAR> . . . </ VAR> Representar variables de un cdigo. La variable x, definida
anteriormente...
<SAMP> . . .
</ SAMP>
Para representar una serie de
caracteres literalmente.
Estoy en un l i t er al
<ABBR> . . .
</ ABBR>
Abreviaturas. La WWW usa el protocolo http




4.4. Otros elementos
Estas etiquetas realmente no son formato ni de prrafo ni de texto, pero hay que ponerlas en
algn sitio:

Etiqueta Significado Resultado
<BR> Cambio de lnea. Simple salto de linea
<HR> Barra horizontal.

<! - - . . . - - > Comentarios. No se ve el contenido

5. CARACTERES ESPECIALES

5.1. Caracteres especiales
Si habis estudiado o ledo algo acerca del modo de funcionamiento de los ordenadores y la
informtica, casi seguro que sabis que la informacin que introduces en el ordenador est
codificada es decir, escrita de alguna manera que sea entendible para la mquina. En relacin con
esto habris topado con unas siglas algo extraas cdigo ASCII, que no es ms que una forma de
codificar los caracteres asignando a cada uno un valor numrico. Sin entrar en ms detalles
resulta que el cdigo ASCII solo tiene 128 smbolos, pero existe una extensin del cdigo que
llega a los 256 smbolos, aunque slo estn normalizados los 128 primeros, los restantes se usan
para caracteres extraos como nuestra o la o el , o las letras acentuadas.
Es decir que todo lo que no sean caracteres ingleses quedan codificados con cdigos ASCII por
encima de 127, como caracteres especiales o extendidos. En base a esto existen muchos juegos
de caracteres para mostrar las pginas, juegos que se adaptan a las particularidades de cada
idioma.

5.2. Caracteres extendidos en HTML
Cualquier carcter, especial o no, puede mostrarse en una pgina usando su cdigo ASCII, es
decir, el nmero que tiene asignado, encerrado entre &# y ;. Por ejemplo el smbolo @ tiene
como cdigo ASCII el 64, as podemos representarlo como:
&#64;
Si usaremos el nmero 127 obtendremos nuestra tilde ~ . No obstante muchos caracteres
especiales tienen sinnimos que nos facilitan su insercin en las pginas Web:
Cdigo Resultado
&aacut e; , &Aacut e; , &eacut e; , &Eacut e; , . . . , , , , , , , , y
&nt i l de; y &Nt i l de; y
&i quest ;
&i excl ;
&or dm;
&or df ;
&t r ade;
o
&copy;
&r eg;
&nbsp; Espacio en blanco



5.3. Caracteres reservados
En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas, establecer
parmetros, etc.. Para poder emplearlos sin riesgo deberemos escribir los siguiente cdigos:

Cdigo Resultado
&l t ; <
&gt ; >
&amp; &
&quot ; "

6. ENLACES

6.1. Enlaces
Las pginas Web no son ms que un caso particular de documentos de hipertexto, es decir,
documentos cuyo contenido no es solo el texto simple que podemos leer sino tambin el contenido
de otras fuentes a las que accedemos desde el documento. En el caso de las pginas Web estas
otras fuentes pueden estar situadas en cualquier parte de la red, y a ellos se accede mediante los
enlaces o links: unos elementos interactivos del documento que aparentemente son solo eso una
palabra o un grfico que habitualmente destacan por su color o su forma. Es prcticamente
imposible que una pgina Web no posea uno de estos enlaces.
Los enlaces que nos encontramos en cualquier pgina pueden ser de dos tipos: internos a la
propia pgina o externos a otra pgina. La forma de construir unos y otros es muy similar como
vers a continuacin.


6.2. La etiqueta <A>
La etiqueta <A></A> nos sirve para delimitar la zona de la pgina que constituye el enlace. Lo
que est encerrado en esta etiqueta ser mostrado por el navegador de forma resaltada, bien sea
por el color si es texto o por un borde si es una imagen (a menos que modifiquemos el formato), y
si pulsamos con el cursor del ratn sobre esa zona el navegador se dirigir al lugar apuntado por
ese enlace. El formato completo de esta etiqueta es el que sigue:
<A HREF=" di r ecci n de dest i no" t ar get =" dest i no" >Pul sar par a sal t ar </ A>
La direccin de destino ser la pgina Web especificada mediante una URL, en formato absoluto o
relativo. En ambos casos el destino puede incluso ser un elemento concreto dentro de la pgina.
En este caso se ha usado un texto pero igualmente podramos colocar una imagen.
El atributo t ar get es una manera de decirle al navegador en que ventana debe abrir esa nueva
pgina. Por ahora veremos dos de sus valores posibles:
_blank
Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.
_self
Muestra la nueva pgina en el marco donde est declarado el enlace. Este es el destino
por defecto de cualquier enlace dentro de una pgina
En el apartado dedicado a los frames veremos algo ms de este parmetro.

6.3. Las URLs
Cualquier elemento conectado a la red Internet se identifica por un conjunto de cuatro nmeros
entre 0 y 255, algo as como 84.234.12.122, cualquier sitio de Internet est identificado por esta
direccin. Pero como quiera que recordar esos nmeros no es nada fcil existen unos servidores
de nombre que transforman esas direcciones en nombres ms humanos como
www.espaciolatino.com. A estas direcciones se les llama Universal Resource Locator, o URL, es la
forma de localizar cualquier pgina en Internet. En general tiene el siguiente formato:
pr ot ocol o: / / mqui na: puer t o/ r ut a/ f i cher o@usuar i o
donde protocolo puede ser uno de los siguientes:
http
Es el protocolo para la transmisin de documentos HTML, es decir, el que habitualmente
usamos para ver las pginas en nuestro navegador.
https
Es similar al anterior pero con la particularidad de que la informacin viaja codificada
mediante tcnicas de encriptacin.
ftp
Es un protocolo para la transmisin de ficheros (File Transfer Protocol). Permite
intercambiar ficheros con sitios en los que se ejecuten servidores ftp. Los navegadores
actuales permiten acceder a estos servidores FTP, pero lo ms normal es usar unos
programas al efecto denominados clientes de FTP.
mailto
Otro protocolo para la transmisin de datos, pero en este caso a travs de servidores de
correo.
news
Mediante este protocolo accedemos a los denominados grupos de noticias, listas de
distribucin de mensajes relativos a temas concretos. Habitualmente se accede a estos
servidores mediante el cliente de correo.
telnet
Es un terminal de acceso remoto en modo texto. Es un sistema bastante inseguro por lo
que no es habitual en servidores donde la seguridad est bien pensada.
Lo ms normal en nuestras pginas ser acceder a elementos de otros pginas y por tanto lo
habitual ser usar URL del estilo http://servidor.dom/pgina.htm o similar.
En un enlace podremos usar la URL como hemos escrito ms arriba, URL absoluta, pero tambin
podremos usar formatos como /pagina.htm, parece que faltara la primera parte de la direccin
verdad? Pues no, en estos casos el navegador completa esa parte con la correspondiente de la
pgina en la que est el enlace, son las URL relativas. Por ejemplo si miras la URL de esta pgina
vers que es
http://www.espaciolatino.com/tutorhtml/tema6.html
Pues bien si en esta pgina colocara un enlace en la forma
<A hr ef =" t ema3. ht m" >Tema 3</ A>
Esta direccin realmente apuntara a
http://www.espaciolatino.com/tutorhtml/tema3.html
Como ltimo detalle a tener en cuenta es el uso de la / como forma de referirse a la raiz del sitio.
As este enlace
<A hr ef =" / i ndex. ht m" >Por t ada</ A>
estara apuntando a http://www.espaciolatino.com/index.htm.
6.4. Anclas
Como dijimos, es posible acceder a una posicin dentro del documento HTML. Para ello lo primero
que tenemos que hacer es colocar marcas de destino en el documento al que queremos acceder:
<A NAME=" ancl a" >
A estos elementos se les llama anclas. Su uso es muy simple: en una etiqueta de enlace
colocamos el smbolo # seguido del nombre del ancla de esta manera:
<A HREF=" #ancl a" >Ancl a en est a pgi na</ A>
Al pulsar sobre este enlace se mostrar en la ventana la parte de la pgina actual que contiene el
ancla. Si queremos acceder a un ancla en otra pgina basta indicarlo al final de su URL. Como en
este ekemplo:
<A HREF=" enl aces. ht ml #ancl a" >Ancl a en l a pgi na enl aces. ht ml </ A>

7. IMGENES

7.1. Insertar imgenes
Una pgina web sin alguna imagen es como el mar sin sal. Para incluir grficos e imgenes en
nuestras pginas utilizaremos la etiqueta
<I MG SRC=" f i cher o_gr af i co" ALT=" descr i pci on" WI DTH=88 HEI GHT=31 BORDER=0>
El parmetro SRC especifica la URL del fichero que contiene el grfico. Los formatos estndar en la
red son el GIF, PNG y JPG. Si quieres saber ms sobre imgenes e Internet debes dirigirte a esta
seccin dedicada al tema en la gua de diseo.
El parmetro ALT especifica el texto que se mostrar en lugar del grfico en aquellos navegadores
que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de que el usuario los haya
desactivado. Algunos navegadores lo muestran cuando pasamos el ratn por encima de la imagen.
Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo siempre. De
hecho, el estndar HTML 4.0 obliga a hacerlo. Su uso es adems muy interesante cara a los robots
buscadores que de este atributo pueden sacar informacin del tema tratado en la pgina.
Los atributos WIDTH y HEIGHT indican el ancho y alto del grfico en pixels. Su uso no es
obligatorio pero si muy aconsejable para mejorar el tiempo de carga de la imagen: el navegador
sabe el espacio que ocupar la imagen y puede seguir colocando los otros elementos de la pgina
mientras se termina de descargar la imagen.
Por ltimo vemos el atributo BORDER que como podrs adivinar tan solo coloca el ancho del borde
que rodea la imagen. Por defecto su valor es cero, salvo el caso que vemos en el siguiente
apartado.
Por ejemplo
<img src="/imgs/im_crear/pubcorreo.gif" width="30" height="32" alt="correo">



7.2. Imgenes y enlaces
Recordars que al hablar de los enlaces decamos que en el contenido de la etiqueta <A> poda ir
texto o una imagen. En este caso el navegador destaca la imagen colocndole un borde del color
que use para sealar los enlaces de texto. Algo bastante lgico pero que en la mayora de los
casos queda poco esttico, afortunadamente podemos eliminar ese borde poniendo a 0 el atributo
BORDER.
<a hr ef =" t ema1. ht m" >
<i mg sr c=" / i mgs/ i m_cr ear / i ndi ce2. png"
al t =" Tema 1" wi dt h=" 45" hei ght =" 30" >
</ a>
Se ve as:
Sin embargo,
<a hr ef =" t ema1. ht m" >
<i mg sr c=" / i mgs/ i m_cr ear / i ndi ce2. png"
al t =" Tema 1" wi dt h=" 45" hei ght =" 30" BORDER=" 0" >
</ a>
Se ve as:

7.3. Alineacin respecto al texto
HTML nos permite controlar la disposicin de las imgenes en la pgina con relacin al texto, para
ello usamos el parmetro ALI GN :
ALIGN=
Significado Muestra
TOP Coloca el punto ms alto de la imagen coincidiendo con
ms alto de la lnea de texto actual.
Este es el texto
MI DDLE Alinea el punto medio (en altura) de la imagen con la
base del texto.
Este es el texto
BOTTOM Alinea el punto ms bajo de la imagen con la base del
texto.
Este es el texto
LEFT
Coloca la imagen a la izquierda del texto. Este es el texto
y esta es otra
lnea
RI GHT
Coloca la imagen a la derecha del texto. Este es el texto
y esta es otra
lnea
Hay que aclarar que la base del texto es la lnea donde descansan casi todas las letras del alfabeto
excepto algunas como la p, la g o la j.
Fuente: Creatuweb manualesgratis