Manual HTML

Manual HTML Bsico
Profesor Federico Martn Maglio

1
MANUAL HTML BSICO
Federico Martn Maglio

Para construir una pgina con el fin de publicarla en Internet, debemos aprender
el lenguaje HTML (HyperText Markup Language). Se dir que es muy fcil construir
pginas WEB hoy en da con los programas que se encuentran a disposicin de todos.
Pero si bien esto es cierto, es necesario conocer lo mnimo del HTML porque siempre
se nos presenta la situacin de que el resultado final, logrado con programas que
generan el cdigo automticamente, no es el esperado. En tal situacin se hace
necesario retocar el cdigo manualmente con un procesador de texto puro como el
Block de Notas que viene con Windows. Para poder hacerlo no hay otra salida que
conocerlo.
El HTML se basa en etiquetar lo que se quiere mostrar en la pgina; estas
etiquetas le dicen al programa navegador de Internet cmo debe mostrar en pantalla la
informacin que contiene. A raz de su forma de funcionamiento, podemos decir que
trabajar en HTML no significa programar ya que el resultado no se compila ni se
ejecuta independientemente.
Para trabajar con HTML se necesitan programas. Estos pueden ser simples o
ms complejos y depende de lo que se quiera lograr.

Lo bsico que se necesita para la realizacin de una pgina Web es:

Cuando es necesario realizar tareas ms especficas, se usarn otros
programas:

Necesitamos...

Un editor de texto... para escribir el cdigo y guardarlo como .htm o .html
(puede ser el Block de Notas de Windows).
Un navegador de internet... para ver cmo est quedando la pgina a
medida que se va construyendo.

Usaremos como mnimo...

Un editor de textos.
Un editor de imgenes... Paint Shop Pro.
Un editor de imgenes en movimiento... Gif Animator.
Un editor de applets de Java para botones... 1 Cool Button Tool o el Ulead
Button.Applet.
Un editor de applets de Java para carteles... Applet Marquee Wizard.

Manual HTML Bsico
2

CONSTRUYENDO UNA PGINA BSICA:

Una pgina de WEB se construye en lenguaje HTML. Su principio esencial es el
uso de etiquetas (tags en ingls). Por lo general, hay una etiqueta para abrir y otra para
cerrar (a sta se le agrega delante la barra /). Debemos tener en cuenta que no todas
las etiquetas necesitan de otra para cerrar una orden.

Las etiquetas funcionan de la siguiente manera...

<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.

Todo documento para la WEB se abre y se cierra con las siguientes etiquetas...

<HTML>
(Aqu va todo el documento)
</HTML>

Todo documento HTML necesita un par de etiquetas HEAD o encabezado que
ser la informacin de la pgina que no se ver directamente en el navegador...

<HTML>
<HEAD>
</HEAD>
</HTML>

Dentro del encabezado debemos poner las etiquetas para el ttulo de nuestra
pgina WEB. Este debe ser corto y descriptivo de nuestra pgina ya que ser lo que se
vea cuando alguien guarda su direccin como favorito...

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
</HTML>

El contenido de la pgina (que es toda la informacin que queremos mostrar en
la WEB) ir entre las etiquetas <body> y </body> que se colocan luego de cerrar el
encabezado y antes de finalizar el documento.

Manual HTML Bsico
3
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Dentro de las etiquetas que abren y cierran se introduce la informacin del
documento. Ahora pondremos el ttulo a la pgina...

<HTML>
<HEAD>
<TITLE>
Mi pgina de WEB
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Ahora guarde este documento en un directorio o carpeta que se haya creado a
tal efecto. Se le da un nombre y la extensin correspondiente para que pueda ser
reconocida por los navegadores.

Lo guardamos como primera.html o primera.htm (si estamos en un sistema
operativo de hasta 8 caracteres para el nombre y 3 caracteres para la extensin).

Lo que acabamos de crear es un esqueleto de una pgina HTML. Todos los
documentos HTML requieren que tengas por lo menos estas etiquetas en l, y dnde
est el ttulo? El ttulo se ve en la parte de arriba del navegador.

Dentro del cuerpo, entre las etiquetas <BODY> y </BODY>, est todo lo que
queremos que aparezca en la pantalla principal (texto, imgenes, etc.).

Manual HTML Bsico
4
Por tanto, la estructura queda de esta manera:

<HTML>
<HEAD>
<TITLE>
Mi pgina de WEB
</TITLE>
</HEAD>
<BODY>
[Aqu van las etiquetas que visualizan la pgina]
</BODY>
</HTML>

Vemos un ejemplo introduciendo un texto, guardamos el archivo y lo
visualizamos con el navegador...

<HTML>
<HEAD>
<TITLE>
Mi pgina de WEB
</TITLE>
</HEAD>
<BODY>
Hola, soy yo. Estoy haciendo una pgina WEB.
</BODY>
</HTML>

Si mi intencin es dar formatos especiales al texto, entonces debemos utilizar
etiquetas especficas. Veremos algunas...

La etiqueta <P> separa el texto en diferentes prrafos.
La etiqueta <BR> baja un rengln.

<HTML>
<HEAD>
<TITLE>
Mi pgina de WEB
</TITLE>
</HEAD>
<BODY>
<P>
Aqu paso a otro prrafo.
<BR>
Aqu bajo un rengln.
</BODY>
</HTML>

Manual HTML Bsico
5

El texto puede tener unas cabeceras o ttulos, comprendidos entre las etiquetas
<H1> y </H1>, <H2> y </H2>, etc. (hasta el nmero 6), siendo el nmero indicativo del
tamao. El tamao mayor es el correspondiente al nmero 1. Veremos cmo queda...

<HTML>
<HEAD>
<TITLE>
Mi pgina de WEB
</TITLE>
</HEAD>
<BODY>
<H1>Ttulo ms grande con H1</H1>
<H2>Ttulo menos grande con H2</H2>
<H3>Ttulo un poco menos grande con H3</H3>
<H4>Ttulo en letra normal con H4</H4>
<H5>Ttulo en letra chica con H5</H5>
<H6>Ttulo en letra bien chica con H6</H6>
<P>
<BR>
Aqu bajo un rengln.
</BODY>
</HTML>

Al texto lo puedo alinear el texto en el centro con las etiquetas...
<CENTER> </CENTER> presenta el texto centrado en la pgina.

Lo aplicamos en un ejemplo...

<HTML>
<HEAD>
<TITLE>
Mi pgina de WEB
</TITLE>
</HEAD>
<BODY>
<P>
Manual HTML Bsico
6
<BR>
Aqu bajo un rengln.
<P>
<CENTER>
Este texto est centrado
</CENTER>
</BODY>
</HTML>

Tambin podemos utilizar lneas o separadores que se consiguen con la etiqueta
<HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal
tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo.
Puedo decirle que no ocupe toda la pantalla sino una parte indicndole qu
porcentaje de ella agregndole WIDTH=XX% y hasta puedo cambiarle el ancho
agregndole a la etiqueta SIZE=X como se puede observar a continuacin:

<HTML>
<HEAD>
<TITLE>
Mi pgina de WEB
</TITLE>
</HEAD>
<BODY>
<P>
<BR>
Aqu bajo un rengln.
<P>
<CENTER>
Este texto est centrado
</CENTER>
<HR width=10% SIZE=1>
</BODY>
</HTML>

Manual HTML Bsico
7

DANDO FORMA AL TEXTO:

Debemos tener en cuenta que iniciamos otra pgina, en este caso, la segunda y
por ello, creamos un archivo nuevo que nombraremos segunda.htm o segunda.html.

Para destacar alguna parte del texto se pueden usar:

<B> y </B> para poner algo en negrita (bold).
<I> y </I> para poner algo en cursiva (italic).
<PRE> y </PRE> para poner texto preformateado, es decir, aparecer tal cual uno lo
escribe (respetar los espacios en blanco y los enter para bajar lneas). La fuente
que usar es de espacio fijo.

Vemos un ejemplo:

<HTML>
<HEAD>
<TITLE>
Mi segunda pgina de WEB
</TITLE>
</HEAD>
<BODY>
<B>Estas palabras estn en negrita</B>
<P>
<I>Estas palabras estn en itlica</I>
<P>
<PRE>Este texto est preformateado y esto va luego de 10 espacios
en blanco.
El texto actual fue escrito despus de dar un enter</PRE>
</BODY>
</HTML>

Las listas:

Si necesitamos presentar las cosas en forma de listas podemos elegir entre tres
formas...

1. Listas desordenadas (no numeradas)
2. Listas ordenadas (numeradas)
3. Listas de definicin.

Listas desordenadas (Unordered List):
Sirven para presentar cosas que no necesitan ir precedidas por un nmero.
Tipeamos lo siguiente en el documento segundo.* a continuacin del trabajo anterior:
Manual HTML Bsico
8

Lista desordenada:
<UL>
<LI> Monitor.
<LI> Placa de sonido.
<LI> Teclado.
<LI> Etc.
</UL>

Listas ordenadas (Ordered List):
Sirven para presentar cosas en un orden numerado. Tipeamos lo siguiente a
continuacin del trabajo anterior:

Lista ordenada:
<OL>
<LI> Monitor.
<LI> Placa de sonido.
<LI> Teclado.
<LI> Etc.
</OL>

Listas de definicin:
Sirven para presentar definiciones de trminos o trabajos similares. A diferencia
de las que hemos visto, cada rengln de la lista tiene dos partes:

1. El nombre de la cosa a definir, que se consigue con la etiqueta <DT> (definition
term).
2. La definicin de dicha cosa, que se consigue con la etiqueta <DD> (definition
definition).

Lista de definicin:
<DL>
<DT> Monitor:
<DD> Hardware de la computadora cuya funcin es destruir ojos.
<DT> Placa de sonido:
<DD> Rompe la tranquilidad familiar.
<DT> Teclado:
<DD> Destructor de uas.
</DL>

Manual HTML Bsico
9
Comentarios no visibles en la pantalla:

A veces es muy til escribir comentarios en el documento HTML sobre el cdigo
que escribimos, que nos pueden servir para recordar posteriormente sobre lo que
hicimos, y que no queremos que se vea en pantalla.
Esto se consigue encerrando dichos comentarios entre estos dos smbolos:



Ejemplo:

<HTML>
<HEAD>
<TITLE>
Mi segunda pgina de WEB
</TITLE>
</HEAD>
<BODY>

El texto que figura como comentario en este cdigo no lo vemos en pantalla.
<P>
<B>Estas palabras estn en negrita</B>
<P>
<I>Estas palabras estn en itlica</I>
</BODY>
</HTML>

NOTA:
Para la clase siguiente necesitaremos un texto de unas 2 o 3 pginas ya grabado
en un disquete.

EJERCITACIN:

En el documento creado agregar...

1. Un ttulo de tipo 2 que diga "CAPTULO 2" que est centrado.
2. Agregar a cada ejercicio realizado una lnea que lo divida del otro.
3. Un comentario a cada ejercicio que indique qu es lo que sigue en el cdigo.

Manual HTML Bsico
10
ENLACES CON OTRAS PGINAS:

La caracterstica que ms ha influido en el espectacular xito de la WEB (o tela
de araa) ha sido, aparte la de su carcter multimedia, la posibilidad de unir los distintos
documentos de un mismo sitio o de otro lugar del mundo por medio de enlaces
hipertexto. La llamada a otro documento se realiza con la etiqueta <A HREF> y </A>

Estructura de los enlaces:

<A HREF="xxx"> yyy </A>

xxx es el destino del enlace (va entre comillas).
yyy es el texto indicativo del enlace y que en la pantalla se ver de un color especial
y, generalmente, subrayado.

Tipos de enlaces:

1. Enlaces dentro de la misma pgina.
2. Enlaces con otra pgina nuestra (en el mismo sitio).
3. Enlaces con una pgina fuera de nuestro sitio.
4. Enlaces con una direccin de correo electrnico.

1. Enlaces dentro de la misma pgina:

En el caso de documentos (o pginas) muy extensos es muy til poder dar un
salto de una parte a otra.
En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace,
se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos).
Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecern en
la pantalla en color (en forma de hipertexto). Su estructura es...

<A HREF="#marca"> YYY </A>

Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente
etiqueta:

<A NAME="marca"> </A>

Si quiero saltar desde aqu a la pantalla final, pongo la siguiente etiqueta:

<A HREF="#final"> Pulsa para ir al final</A>

Y en el final del documento he puesto esta otra etiqueta:

<A NAME="final"> </A>

Manual HTML Bsico
11
Lo vemos en un ejemplo prctico iniciando nuestra tercer pgina y lo llamamos
tercera.htm o tercera.html.

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
AQU INSERTAMOS UN TEXTO LARGO DE UNAS 2 O 3 PGINAS.
</BODY>
</HTML>

Antes del comienzo del texto ponemos...

<A HREF="#medio"> Pulsa para ir al medio del documento</A>

...y en la parte central del documento ponemos...

<A NAME="medio"> </A>

2. Enlaces con otra pgina nuestra:

Actualmente tenemos 3 documentos. Lo que haremos ahora es enlazarlas entre
s para poder movernos por ellas a nuestro gusto.

Lo primero que haremos es enlazar esta pgina, tercera.htm con la pgina
creada en los ejemplos de los captulos anteriores y que hemos llamado primera.htm y
segunda.htm.
Al final del documento y arriba de la etiqueta </BODY> agregamos...

<A HREF="primera.htm"> Ejercicios del captulo 1 </A>
<A HREF="segunda.htm"> Ejercicios del captulo 2 </A>

En los documentos primera.htm y segunda.htm hacemos lo mismo pero
teniendo cuidado de cambiarle los nombres de las pginas segn corresponda y
cuidando que se muestren cada uno de los enlaces en diferentes renglones y que
quede estticamente bien en la pgina.

Ya tenemos armado nuestro primer sitio de Internet... FELICIDADES.

Complicando ms el asunto, crearemos un enlace desde la primera pgina hacia
el medio del documento de la tercera pgina (recordemos que ya tiene una marca
llamada "#medio"). Lo haremos uniendo la llamada a la pgina ms la llamada a la
marca (todo junto). Entonces, quedar as...

<A HREF="tercera.htm#medio"> Ir al medio del texto de la pgina tercera </A>
Manual HTML Bsico
12

Si son pginas de diferentes subdirectorios?:

Estoy poniendo enlaces a pginas que se encuentran dentro del mismo
subdirectorio. Pero si quiero organizar mi sitio con diferentes directorios (haciendo un
rbol) entonces debo indicar el camino correspondiente. Si la pgina a la que quiero
saltar est en el subdirectorio "ejem", entonces en la etiqueta tendra que haber puesto
"ejem/tercera.htm".

Pero si quiero saltar desde una pgina a otra que est en un directorio anterior,
en la etiqueta tendra que haber puesto "../primera.html". Esos dos puntos hace que se
dirija al directorio anterior (como CD en el D.O.S.).

Entonces...
Para subir un directorio: "ejem/tercera.htm"
Para bajar un directorio: "../primera.htm"

3. Enlaces con una pgina fuera de nuestro sistema

Si queremos enlazar con una pgina que est fuera de nuestro sitio (es decir,
que est en un servidor distinto al que aloja nuestra pgina), es necesario conocer su
direccin completa, o URL (Uniform Resource Locator). El URL podra ser, adems de
la direccin de una pgina del Web, una direccin de ftp, gopher, etc.

Una vez conocida la direccin (o URL), lo colocamos en vez de lo que hemos
llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la pgina de
Microsoft la etiqueta sera la siguiente:

<A HREF="http://www.microsoft.com/"> Pgina de Microsoft </A>

Esta orden la ponemos al final de la pgina primera.htm, la ejecutamos y
hacemos click en el enlace de Microsoft... qu ocurre?

4. Enlaces con una direccin de correo electrnico

Para que el navegador reconozca que es un enlace a una direccin de correo y,
al pulsar sobre ella me abra el programa que me permita enviarlo, debemos introducir la
orden MAILTO: antes de la direccin. Para enviarme un correo a m la orden sera:

<A HREF="mailto:mamaglio@intercom.com.ar"> Enviar correo a Martn </A>

Introducimos la orden al final de la pgina primera.htm, ejecutamos y hacemos
un clic sobre la llamada... qu ocurre?

Manual HTML Bsico
13
IMGENES:

Aqu una observacin... Trabajaremos nicamente con imgenes de tipo .gif y
.jpg que son las ms difundidas en la WEB.
La etiqueta que nos sirve para incluir imgenes en pginas WEB es muy similar a
la de enlaces a otras pginas, que hemos visto en el captulo anterior. La diferencia es
que, en lugar de indicar al programa navegador el nombre y la localizacin de un
documento de texto HTML para que lo cargue, se le indica el nombre y la localizacin
de un fichero que contiene la imagen que queremos poner.

La etiqueta es IMG SRC (image source o fuente de la imagen). La llamada
quedar as...

<IMG SRC="imagen1.jpg">
Abrimos la pgina primera.htm e introducimos el cdigo para llamar a la imagen.
Si la imagen estuviese en otro directorio o en otro sitio, antes del nombre de la
misma se debe indicar su ubicacin.
Dentro de la etiqueta se pueden aadir otros comandos, tal como ALT (este
permite ver una descripcin de la imagen que se carga). Es til para cuando la imagen
tarda en cargarse y el visitante, al sealarla con el ratn, puede ir teniendo una idea de
su contenido.

<IMG SRC="imagen1.jpg" ALT="descripcin">

Cambiamos "descripcin" por lo que corresponda segn la imagen que tengan.
Un aspecto muy importante a tener en cuenta es el tamao de las imgenes en
bytes, porque una imagen que sea muy grande o "pesada" har el acceso a nuestra
pgina muy tedioso y puede ocasionar que el visitante desista de visitarla.

Alineamiento de titulares o descripciones de la imagen:

Si queremos que cada imagen tenga una descripcin visible que explique de qu
se trata, podemos introducir el texto a continuacin de la llamada de la imagen.
Tenemos tres opciones a saber...

<IMG SRC="imagen1.jpg" ALT="descripcin" ALIGN=TOP> Titular alineado arriba

<IMG SRC="imagen1.jpg" ALT="descripcin" ALIGN=MIDDLE> Titular alineado en
medio

<IMG SRC="imagen1.jpg" ALT="descripcin" ALIGN=BOTTOM> Titular alineado abajo

Tambin podemos hacer que la misma imagen sea utilizada como enlace hacia
otra pgina. Primeramente haremos el ejemplo con el archivo "imagen2.jpg". Ponemos
la direccin de la pgina en la llamada de enlace y, al terminar tal orden, ponemos la
imagen y luego su descripcin. Finalmente cerramos con </A>
Manual HTML Bsico
14

<A HREF="segunda.htm"><IMG SRC="imagen2.jpg" ALT="descripcin"></A>

Si hacemos un clic sobre la imagen veremos que nos redirecciona hacia la
pgina sealada. La imagen aparecer rodeada de un rectngulo. Si queremos que el
mismo desaparezca, entonces le decimos que el BORDE debe ser igual a 0.

<A HREF="segunda.htm"><IMG SRC="imagen2.jpg" ALT="descripcin"
BORDER=0></A>

CARACTERES ESPECIALES:

Existen algunas limitaciones para escribir el texto...

Las etiquetas se forman como un comando escrito entre los smbolos "<" y ">",
entonces, si se quisieran escribir estos caracteres como parte normal del texto, dara
esto lugar a una ambigedad, ya que el navegador podra interpretarlos como el
comienzo o final de una etiqueta, en vez de un carcter ms del texto.
El HTML es un lenguaje escrito en idioma ingls, y ste no tiene la letra ni los
acentos a las vocales ni apertura de interrogacin y exclamacin. En los
navegadores en castellano esto no es problema, pero tenemos que tener en cuenta
que la WEB es mundial y, para que todos puedan ver bien los textos, es conveniente
reemplazar algunos caracteres por cdigos.

Para resolver estos problemas, existen cdigos para poder escribir estos caracteres.
Estos cdigos tienen un inicio y un fin. El inicio es el smbolo & y el final es el ;

EJERCITACIN:

1. Creamos un documento nuevo al que llamaremos index.htm.
2. Ponemos un ttulo de tipo 1 centrado.
3. Separamos con una lnea de espesor 5 y que ocupe el 70 % de la pgina.
4. Ponemos llamadas a los documentos primera.htm, segunda.htm y
tercera.htm.
5. Ponemos una llamada al correo electrnico del Instituto.
6. Ponemos llamadas para las siguientes organizaciones: O.N.U., Ministerio de
Cultura y Educacin y diario Clarn.
7. Ponemos la imagen1.jpg con un enlace a imagen2.jpg.

Manual HTML Bsico
15
Para que carateres del cdigo que aparezcan en el texto:

< para < (menor que)
> para > (mayor que)
& para & (ampersand)
" para " (double quotation)

Para vocales, ees, interrogacin y exclamacin:

á para la
é para la
í para la
ó para la
ú para la
Á para la
É para la
Í para la
Ó para la
Ú para la
ñ para la
Ñ para la
ü para la
Ü para la
¿ para
¡ para

Si se escribe en un procesador de textos de forma manual, se puede escribir el
cdigo directamente. Por ejemplo...

<HTML>
<HEAD>
<TITLE>
Mi página con caracteres especiales
</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>
Mi página realizada en el instituto para ver cómo se escriben
los caracteres especiales como la ñ
</H1>
</CENTER>
<HR>
</BODY>
</HTML>

Manual HTML Bsico
16

FORMATO DE FUENTES:

Tamao de las fuentes:

El tamao de las fuentes utilizadas puede cambiarse con el comando SIZE=X,
donde X es el nmero asignado al tamao que puede variar entre 1 y 7. Por ejemplo...

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1> Texto en tamao 1 </FONT> <BR>
</BODY>
</HTML>

Para tener una referencia vlida, el tamao normal es el 3 y de tipo Times New
Roman que se puede cambiar a gusto. Pero cuidado, podemos poner una fuente que el
visitante no tenga en su computadora y as la visualizacin de la pgina puede cambiar
en su esttica.
Para cambiar la fuente la orden es FACE=. Por ejemplo, para que el documento
se vea con la fuente ARIAL, la parte del texto afectada deber quedar de la siguiente
manera...

<FONT FACE="Arial">Este texto est configurado para ver con la fuente Arial</FONT>

Se pueden indicar en el atributo varias fuentes distintas, separadas por una
coma. Si falla la primera, entonces el texto adopta la forma de la segunda, y as
sucesivamente. Si fallan todas, el texto adopta entonces la fuente por defecto. As, por
ejemplo:

<FONT FACE="Flexure, Arial">Este texto se ver con la fuente Flexure, y si no est en
la computadora lo har con la fuente Arial</FONT>

Manual HTML Bsico
17
FONDOS DE PGINA:

Se puede cambiar el fondo de las pginas de dos formas diferentes:

Con un color uniforme.
Con una imagen que haga de textura.

Fondos con un color uniforme:

La etiqueta para dar color al fondo es BGCOLOR y se pone a continuacin de la
etiqueta <BODY>

<BODY BGCOLOR="#RRVVAA">

Donde:

RR es un nmero indicativo de la cantidad de color rojo
VV es un nmero indicativo de la cantidad de color verde
AA es un nmero indicativo de la cantidad de color azul

Estos nmeros indican en numeracin hexadecimal la cantidad del color primario.
En la mezcla final se da el resultado. Esta numeracin se caracteriza por tener 16
dgitos (en lugar de los diez de la numeracin decimal habitual). Estos dgitos son:

0 1 2 3 4 5 6 7 8 9 A B C D E F

Es decir, que en nuestro caso, el nmero menor es el 00 y el mayor el FF. As,
por ejemplo, el color rojo es el #FF0000, porque tiene el mximo de rojo y cero de los
otro dos colores.

Los colores primarios son...

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

Para blanco y negro sern...

#FFFFFF - Blanco
#000000 - Negro

Para hacer un tono ms oscuro del color elegido hay que reducir el nmero de su
componente, dejando los otros dos invariables. As, el rojo #FF0000 se puede hacer
ms claro con #AA0000, o ms oscuro con #550000.

Manual HTML Bsico
18
Para hacer que un color tenga un tono ms suave (ms pastel), se deben variar
los otros dos colores hacindolos ms claros (nmero ms alto), en una cantidad igual.
As, podemos convertir el rojo en anaranjado con #FF7050.

Colores del texto y de los enlaces:

Podemos cambiar el color al texto y a sus enlaces en toda la pgina. Las
etiquetas son:

TEXT: Color del texto.
LINK: Color de los enlaces.
VLINK: Color de los enlaces visitados.
ALINK: Color de los enlaces activos (el que adquieren en el momento de ser pulsados).

La etiqueta, con todas sus posibilidades quedara as (a continuacin de
<BODY>):

<BODY BGCOLOR="# RRVVAA" TEXT="# RRVVAA" LINK="# RRVVAA" VLINK="#
RRVVAA " ALINK="# RRVVAA">

Cambio del color de una parte del texto (y no en toda la pgina):

<FONT COLOR="#0000FF"> Este texto es de color azul </FONT>

Fondos con una imagen:

La segunda alternativa es ponerle una imagen de fondo a la pgina en formato
GIF o JPEG. Esta imagen se repite por toda la pgina en forma de tapiz.

La estructura de la etiqueta es:

<BODY BACKGROUND="fondo1.gif">

A esta etiqueta puede agregrsele otras para el texto y los enlaces.

Hay que tener en cuenta que el visitante puede tener deshabilitada carga de
imgenes. Esto podra ocasionar que el texto no sea legible (depende de cmo lo
hayamos armado). Para evitar el problema, si se pone un fondo que al no ser cargado
pueda traer problemas con el texto, tambin podemos cargar un color que s lo permita.
En tal caso, el color aparecer si la imagen no es cargada.

Manual HTML Bsico
19
Si queremos poner como fondo con una imagen cuya tonalidad general es verde
y arreglamos los colores del texto para que haga un buen contraste, entonces debemos
cargar un color parecido a continuacin.

La etiqueta quedara as:

<BODY BACKGROUND="fondo5.jpg" BGCOLOR="#0000FF">

ALINEACIN Y DIMENSIONADO DE IMGENES:

Alineacin de las imgenes:

Se consigue con la etiqueta ALIGN ms el tipo de alineacin deseado...

ALIGN=RIGHT Alinea la imagen a la derecha de la pgina.
ALIGN=LEFT Alinea la imagen a la izquierda de la pgina.

La orden para alinear la imagen a la derecha sera...

<IMG SRC="imagen1.jpg" ALIGN=RIGHT>

Si queremos que la imagen est centrada en la pgina, entonces la orden sera...

<CENTER><IMG SRC="imagen1.jpg"></CENTER>

Si queremos que el texto no se acomode al costado de la imagen, entonces se
utilizan las siguientes etiquetas que fuerzan al texto a buscar otro lugar. La elegiremos
de acuerdo a nuestra necesidad.

EJERCITACIN:

1. Poner un fondo a la pgina index.htm con un color alternativo.
2. Poner el mismo fondo a las pginas primera.htm, segunda.htm y tercera.htm
con un color alternativo.
3. Hacer que en la pgina tercera.htm aparezcan partes del texto en diferentes
colores, fuentes y tamaos de fuente.

Manual HTML Bsico
20
<BR CLEAR=LEFT> Busca el primer margen libre (clear) a la izquierda.
<BR CLEAR=RIGHT> Busca el primer margen libre a la derecha.
<BR CLEAR=ALL> Busca el primer margen libre a ambos lados.

Lo vemos en un ejemplo prctico creando un archivo cualquiera y veremos que el
texto con la etiqueta <BR CLEAR=ALL> queda debajo de la imagen.

<HTML>
<HEAD>
<TITLE>
Mi pgina de WEB
</TITLE>
</HEAD>
<BODY>
<IMG SRC="imagen1.jpg" ALIGN=RIGHT> Este texto est al lado de la imagen.
<BR> Este texto tambin.
<BR CLEAR=ALL> Busca el primer margen libre a ambos lados.
</BODY>
</HTML>

Dimensionando la imagen:

Los navegadores cuando cargan un documento HTML y encuentran una etiqueta
de una imagen, piden al servidor que les enve nicamente este archivo. Cuando carga
la imagen, recin despus cargan los dems datos porque necesita de la imagen para ir
armando la pgina. Para que el navegador sepa qu tamao tiene la imagen y siga
cargando los otros datos de la pgina (textos), se le puede indicar qu tamao tendr y
as reservar tal lugar.

Para indicar el tamao en ancho y alto, las etiquetas son...

WIDTH (ancho)
HEIGHT (alto)

Por ejemplo, para imagen1.jpg:

<IMG SRC="imagen1.jpg" WIDTH=200 HEIGHT=100>

De tal manera, podemos decirle al navegador que muestre la imagen en otro
tamao del que realmente tiene. Podemos decirle...

<IMG SRC="imagen1.jpg" WIDTH=100 HEIGHT=50>

Manual HTML Bsico
21
FORMATO DE LAS IMGENES:

Tamao de las imgenes:

Al cargar una imagen, el tiempo de carga vara segn cmo est la lnea y su
tamao en bytes. Debemos tener cuidado en este punto reduciendo el tamao de la
imagen con un programa como el Paint Shop Pro. Tenemos varias alternativas...

1. Reducir la resolucin de la imagen. Generalmente tienen unos 300 pixeles. Se los
puede bajar a 72.
2. Reducir las imgenes .gif a un mximo de 256 colores (las .jpg tienen que ser
siempre de 16,7 millones de colores).
3. Reducir la imagen a un tamao que sea suficiente para apreciarla con claridad.
Cuanto ms pequea en pixeles sea, ms pequea en bytes ser.

GIFs transparentes:

Una caracterstica muy til del formato .gif es la opcin de hacer transparente un
color determinado, es decir, que en la pgina del Web ese color concreto no se vea,
siendo reemplazado por el fondo de la pgina. Esto es muy beneficioso cuando
queremos realizar ejectos atractivos con imgenes irregulares o de texto.
Se debe tener en cuenta que slo puede tener transparencia el formato .gif de
tipo 89 a, ya que tambin est el tipo 87 a con el que no nos ser posible realizarlo. Con
el programa Paint Shop Pro podemos elegir el formato final del archivo.

GIFs animados:

Este formato tiene la particularidad de que es posible superponer varias
imgenes diferentes que, al ser cargadas por el navegador, se irn reproduciendo una a
una consecutivamente dando la impresin de ver una animacin (igual que con los
dibujos animados).
Para realizar tal efecto, guardamos las imgenes que conformarn la animacin
en un directorio (pueden ser 4).
Luego las unimos con el programa Microsoft Gif Animator, guardamos el archivo
(que ser uno solo) y, al cargarlo en el navegador, se reproducirn consecutivamente.

Manual HTML Bsico
22

TABLAS:

Estructura de una tabla:

1. Una tabla tiene un comienzo y un fin; adentro, todos los atributos necesarios para
las filas y columnas. Todo el cdigo debe ir entre <BODY> y </BODY>.

<TABLE>
[resto de las etiquetas]
</TABLE>

Para que los bordes puedan verse en el navegador, le agregamos la etiqueta
BORDER a <TABLE>

2. El siguiente nivel corresponde a las etiquetas para formar cada fila (row) de la tabla,
que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que
tenga la tabla. Para una tabla con dos filas quedara as su estructura:

<TABLE BORDER>
<TR>
[etiquetas de las distintas celdas de la primera fila]
</TR>
<TR>
[etiquetas de las distintas celdas de la segunda fila]
</TR>
</TABLE>

3. En el ltimo nivel estn las etiquetas de cada celda, que son <TD> y </TD>, que dan
lugar al contenido de cada celda concreta (texto, imgenes, etc.). Hay que repetirla
tantas veces como celdas queremos que haya en esa fila teniendo cuidado de que
en cada fila tengamos el mismo nmero de celdas para formar las columnas.

En el siguiente ejemplo tendremos 2 columnas y en cada fila 2 celdas:

<TABLE BORDER>
<TR>
<TD>fila1-celda1</TD>
</TR>
<TR>
</TR>
</TABLE>

Manual HTML Bsico
23
Dibujada en la hoja quedara...

Para ir apreciando los cambios realizados, creamos un archivo llamado
tabla.htm con el siguiente cdigo...

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>

Probamos sacando la celda 3 de la fila 2 para ver qu pasa...

Luego restituimos la etiqueta quitada...

Ahora le agregamos un ttulo a la tabla. Lo creamos con las etiquetas
<CAPTION> y </CAPTION> que deben ubicarse despus de <TABLE BORDER>. Entre
las etiquetas tipeamos el ttulo.

Ahora vamos a variar el espesor de los bordes. A esto lo hacemos poniendo un
signo = y un nmero. El listado ahora debe estar as:

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
Manual HTML Bsico
24
<BODY>
<TABLE BORDER=5>
<CAPTION>Ttulo de la tabla</CAPTION>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>

Celdas de cabecera:

Seguidamente, pondremos ttulo a cada columna. Es como poner otra fila pero el
texto aparecer en negrita y centrado. La etiqueta es <TH> y </TH> (en vez de la
normal <TD> y </TD>).

Entonces, el agregado ser...

<TR>
<TH>Columna 1</TH>
<TH>Columna 2</TH>
<TH>Columna 3</TH>
</TR>

Agregamos el texto de arriba, guardamos el archivo y lo visualizamos en el
navegador...

Contenido de las celdas:

Dentro de las celdas podemos poner todo lo que querramos. Se hace como
hicimos anteriormente pero con el cuidado de introducir todas las rdenes dentro de la
celda correspondiente.

Para poner un texto...

<TD>Este texto est dentro de una celda</A></TD>

Manual HTML Bsico
25

Para poner una imagen...

<TD><IMG SRC="imagen1.jpg"></TD>

Para poner un enlace...

<TD><A HREF="primera.htm">Ir a la primera pgina</A></TD>

Posicionar contenido en una celda:

Normalmente, el contenido de una celda est alineado a la izquierda. Pero se
puede cambiar esto aadiendo dentro de la etiqueta de la celda los siguientes atributos:

<TD ALIGN=CENTER> Al centro </TD>
<TD ALIGN=RIGHT> A la derecha </TD>
<TD ALIGN=LEFT> A la izquierda </TD>

Tambin podemos controlar el alineamiento vertical (que por defecto es en el
medio). Se puede cambiar aadiendo dentro de la etiqueta de la celda los siguientes
atibutos:

<TD VALIGN=TOP> Arriba </TD>
<TD VALIGN=BOTTOM> Abajo </TD>

Variando las dimensiones de la tabla:

El navegador se encarga dimensionar automticamente el tamao total de la
tabla de acuerdo con el nmero de filas, de columnas, por el contenido de las celdas,
espesor de los bordes, etc.
Pero a veces nos puede convenir forzar el dibujo a una forma determinada en
cuanto a su tamao. Para ello estn las etiquetas WIDTH (horizontal) y HEIGHT
(vertical) que debern estar acompaadas por el signo = ms el nmero del porcentaje
que queramos y su smbolo.

Para una tabla que ocupe slo el 60 % de la pgina pondremos...

<TABLE WIDTH=60% HEIGHT=200>

Como podemos ver, estira las 3 columnas en forma automtica hasta ocupar el
porcentaje indicado y cada celda ahora es ms ancha.

Manual HTML Bsico
26

Celdas que abarcan a otras varias:

Con la etiqueta COLSPAN=nmero una celda se extiende en lo horizontal sobre
otras (depende del nmero). Con la etiqueta ROWSPAN=nmero la celda se extiende
en lo vertical sobre otras.

Por ejemplo, si queremos que una celda que abarque a dos columnas
agregamos...

<TR>
<TD COLSPAN=2> Celda en 2 columnas </TD>
</TR>

Color de fondo en las tablas:

Para que una tabla tenga un color de fondo, debemos seguir los mismos
parmetros que con la pgina (color de fondo).

En esto hay varias posibilidades...

1. Que la totalidad de la tabla tenga un color de fondo. El encabezado nos quedar...

<TABLE BORDER=5 WIDTH=60% HEIGHT=200 BGCOLOR="#00FF00">

2. Si queremos que una celda determinada tenga un color de fondo colocamos el
atributo dentro de la etiqueta de la celda correspondiente. Por ejemplo, vamos a
hacer que slo la celda 1 de la fila 1 tenga un color azul. Nos quedar as...

<TD BGCOLOR="#0000FF">fila1-celda1</TD>

Hasta ahora, el listado total de la tabla debera ser...

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=5 WIDTH=60% HEIGHT=200 BGCOLOR="#00FF00">
<CAPTION>Ttulo de la tabla</CAPTION>
<TR>
<TH>Columna 1</TH>
<TH>Columna 2</TH>
<TH>Columna 3</TH>
Manual HTML Bsico
27
</TR>
<TR>
<TD BGCOLOR="#0000FF">fila1-celda1</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>

Imgenes de fondo en las tablas:

Si en vez de color queremos una imagen de fondo, procedemos como ya hemos
hecho con la etiqueta BACKGROUND="fondo5.gif" a continuacin de TABLE o de
alguna celda en particular.

Separacin entre las celdas de una tabla:

Por defecto, la separacin entre las distintas celdas de una tabla es de dos
pixels. Pero se puede variar esto con el atributo CELLSPACING, que se pone dentro de
la etiqueta TABLE.

Para obtener una separacin de 20 pixels entre celdas ponemos...

<TABLE BORDER=5 CELLSPACING=20>

Separacin entre el borde y el contenido dentro de las celdas:

Por defecto, la separacin entre el borde y el contenido dentro de las celdas es
de un pixel. Se puede cambiar esto con el atributo CELLPADDING, que se pone dentro
de la etiqueta TABLE.

Para obtener una separacin de 20 pixels entre el contenido y los bordes, dentro
de cada celda ponemos...

<TABLE BORDER=5 CELLPADDING=20>
Manual HTML Bsico
28

SONIDOS:

A nuestra pgina podemos agregarle msica de fondo pero slo se escuchar si
la computadora del visitante est preparada para procesarlo y un navegador que
soporte su recepcin y reproduccin.
Los formatos ms comunes son los .mid y .wav aunque actualmente hay otros
que son de mejor calidad. Pero para el ejemplo trabajaremos con los ms comunes.
Hay que tener en cuenta que no todos los navegadores soportan sonido ni las
mismas rdenes para su reproduccin.

Internet Explorer utiliza la siguiente etiqueta...

<BGSOUND SRC="fichero_de_sonido" LOOP=n>

El atributo LOOP (en ingls, lazo) sirve para especificar el nmero (n) de veces
que se debe ejecutar el fichero de sonido. Si se escoje el nmero n=-1 o se pone
LOOP=infinite, el sonido se ejecutar indefinidamente. Si se omite este atributo, y
entonces el fichero se ejecutar una sola vez.

Netscape utiliza otra etiqueta...

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

WIDTH es la anchura y HEIGHT la altura de una consola de control que aparece
y que tiene diferentes teclas (play, stop, pausa, etc.). El valor recomendado para xxx es
de 200 y para yyy es de 60.

Dentro de la etiqueta se pueden aadir los siguientes atributos...

AUTOSTART="true" (arranca automticamente).
LOOP="true" (se ejecuta ininterrumpidamente).
EJERCITACIN:

1. Realizar una tabla con 2 filas, con una celda cada una. La primera como
cabecera, con el texto "Esto es un gran lo" y la segunda con una imagen
cualquiera.
2. La tabla deber tener un ancho del 80 % y un borde de tamao 3.
3. Agregar dos filas con 3 celdas cada una.
4. Poner un color de fondo a toda la tabla.
5. A la cabecera ponerle un color diferente.

Manual HTML Bsico
29

La etiqueta queda de esta manera...

<EMBED SRC="msica.mid" WIDTH=200 HEIGHT=55>

Para conseguir que la consola sea invisible hay que aadirle el atributo
HIDDEN="true"...

<EMBED SRC="msica.mid" HIDDEN="true">

Fondo sonoro combinado para el Explorer y el Netscape

Para que nuestro fondo sonoro se ejecute por visitantes que utilicen Explorer o
Netscape indistintamente debemos poner ambas etiquetas de llamada.

<BGSOUND SRC="msica.mid">
<EMBED SRC="msica.mid" HIDDEN="true">

TEXTO EN MOVIMIENTO:

Podemos poner un texto que se desplace por la pantalla; esto recibe el nombre
de Marquesina (marquee en ingls).

La etiqueta es...

<MARQUEE> Este texto se desplaza </MARQUEE>

Si agregamos atributos, cambiaremos su aspecto...

WIDHT, HEIGHT ajustan el ancho y alto de la marquesina. Pueden ser igual a un
nmero de pixels, o a un porcentaje de la pantalla...

<MARQUEE WIDTH=70% HEIGHT=60> Esta marquesina ocupa el 70 % del ancho de
la pantalla y tiene una altura de 60 pixels </MARQUEE>

BEHAVIOR (comportamiento en ingls) definir la forma de ejectuar el
desplazamiento del texto...

BEHAVIOR=SCROLL (el texto aparecer por el lado derecho y desaparecer por el
izquierdo).
BEHAVIOR=SLIDE (el texto aparecer por el lado derecho y se detendr al llegar al
izquierdo).
BEHAVIOR=ALTERNATE... lo ponemos en una pgina y vemos qu pasa...

Manual HTML Bsico
30
Agragamos a la pgina index.htm la siguiente lnea y la visualizamos...
<MARQUEE BEHAVIOR=ALTERNATE>Veremos qu pasa </MARQUEE>

BGCOLOR="#FF0000" (color de fondo de la marquesina).
DIRECTION=LEFT o RIGHT (modifica la direccin de desplazamiento).

SCROLLAMOUNT=XX (define la cantidad de desplazamiento en en pixeles de cada
movimiento de avance).

LOOP=XX (veces que el texto aparecer, si no est, aparecer indefinidamente).

HSPACE=XX, VSPACE=XX (separa la marquesina del texto de la pgina en lo
horizontal y vertical tantos pixeles como se le indique).

PUBLICACIN Y PROMOCIN DE UNA PGINA:

Cmo coloco mi pgina en la red?
Cmo doy a conocer a los dems la existencia de mi pgina?

Publicacin de una pgina:

El propsito que tenemos al confeccionar una pgina del Web es el de publicarla
y ponerla a disposicin de todo el mundo.

No podemos colocarla directamente en la red porque no tenemos un servidor, es
decir, un ordenador conectado permanentemente con Internet, adems sera muy caro.

La solucin es instalarla en un servidor conectado a la WWW (World Wide Web:
la telaraa mundial), la red de servidores interconectados entre s que nos permite
acceder a cualquier pgina en cualquier parte del mundo, y navegar a travs de ellas.

Formas para colocar una pgina en la red:

Quines tienen servidores?, en qu lugar puedo ponerla?.

Instituciones oficiales y acadmicas a sus miembros, para la difusin de
informacin relacionada con esos organismos.

Proveedores comerciales de acceso a Internet, o ISPs (Internet Service
Providers) que ceden frecuentemente a sus usuarios un espacio determinado en sus
servidores, para que puedan colocar sus pginas personales, bien sea gratuitamente o
por una tarifa determinada.

Empresas comerciales que, sin ser proveedores de acceso a Internet, se dedican
a alquilar espacio para la colocacin de pginas, de carcter personal o comercial.
Manual HTML Bsico
31

Ciertos servidores que conceden de una manera gratuita espacio para la
colocacin de pginas personales. Los ms populares son Xoom y Geocities, que
conceden un gran espacio.

Cmo enviar las pginas al servidor:

Una vez de haber confeccionado en nuestro disco duro la pgina Web, y estando
ya lista para ser colocada en el servidor, surge la cuestin de cmo proceder para
enviarla. Para ello, primero hay que registrarse eligiendo un lugar y una clave secreta.
Luego, nos conectamos con un programa FTP para subir las pginas al lugar
seleccionado.

Promocin de una pgina:

1. Incluir la direccin (o URL) de la pgina en la firma de nuestros correos electrnicos.
2. Enviar un correo a las listas avisando de la existencia de la pgina.
3. Incluir la direccin en los buscadores. Para ello tienen formas de avisar de la
existencia de una pgina nueva.

Consejos para facilitar la labor a los motores de bsqueda:

Para que nuestra pgina sea catalogada como corresponde por los motores de
bsqueda debemos...

1. Poner un ttulo bien descriptivo en la etiqueta <TITLE> y lo ms corto posible.
2. Poner un resumen del contenido de la pgina en el comienzo de la misma porque
algunos buscadores leen las primeras 25 de la misma.
3. Utilizar etiquetas <META> que van entre <HEAD> y </HEAD>

Las etiquetas <META> sirven para suministrar informacin detallada del
contenido de una pgina.
Hay diferentes tipos... pero veremos las siguientes...

<META NAME ="description" CONTENT="Primera pgina creada en el Instituto">

En este caso, lo que est incluido en el atributo CONTENT (contenido) es lo que
presentar el motor de bsqueda, adems del ttulo de la pgina.

<META NAME="keywords" CONTENT="educacin alumno manual HTML">

En este otro caso, se incluyen en el atributo CONTENT las palabras claves para
la bsqueda de nuestra pgina. Se pueden poner tantas como se crea necesario,
incluso sus plurales.

Manual HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Manual HTML

Caricato da

Copyright:

Formati disponibili

Manual HTML Bsico

Profesor Federico Martn Maglio

Potrebbero piacerti anche