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 Profesor Federico Martn Maglio 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 Profesor Federico Martn Maglio 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 Profesor Federico Martn Maglio 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> Hola, soy yo. Estoy haciendo una pgina WEB. <P> Aqu paso a otro prrafo. <BR> Aqu bajo un rengln. </BODY> </HTML>
Manual HTML Bsico Profesor Federico Martn Maglio 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> Hola, soy yo. Estoy haciendo una pgina WEB. <P> Aqu paso a otro prrafo. <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> <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> Hola, soy yo. Estoy haciendo una pgina WEB. <P> Aqu paso a otro prrafo. Manual HTML Bsico Profesor Federico Martn Maglio 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> <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> Hola, soy yo. Estoy haciendo una pgina WEB. <P> Aqu paso a otro prrafo. <BR> Aqu bajo un rengln. <P> <CENTER> Este texto est centrado </CENTER> <HR width=10% SIZE=1> <HR width=30% SIZE=4> <HR width=100% SIZE=8> </BODY> </HTML>
Manual HTML Bsico Profesor Federico Martn Maglio 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 Profesor Federico Martn Maglio 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 Profesor Federico Martn Maglio 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:
<!-- y -->
Ejemplo:
<HTML> <HEAD> <TITLE> Mi segunda pgina de WEB </TITLE> </HEAD> <BODY> <!-- Esto es un comentario al cdigo que no se ver en pantalla --> 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 Profesor Federico Martn Maglio 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 Profesor Federico Martn Maglio 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 Profesor Federico Martn Maglio 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 Profesor Federico Martn Maglio 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...
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 Profesor Federico Martn Maglio 14
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.
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 Profesor Federico Martn Maglio 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 Profesor Federico Martn Maglio 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> <FONT SIZE=2> Texto en tamao 2 </FONT> <BR> <FONT SIZE=3> Texto en tamao 3 </FONT> <BR> <FONT SIZE=4> Texto en tamao 4 </FONT> <BR> <FONT SIZE=5> Texto en tamao 5 </FONT> <BR> <FONT SIZE=6> Texto en tamao 6 </FONT> <BR> <FONT SIZE=7> Texto en tamao 7 </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 Profesor Federico Martn Maglio 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 Profesor Federico Martn Maglio 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>):
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 Profesor Federico Martn Maglio 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 Profesor Federico Martn Maglio 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 Profesor Federico Martn Maglio 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 Profesor Federico Martn Maglio 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:
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 Profesor Federico Martn Maglio 24 <BODY> <TABLE BORDER=5> <CAPTION>Ttulo de la tabla</CAPTION> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD> </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>).
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 Profesor Federico Martn Maglio 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:
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 Profesor Federico Martn Maglio 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...
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...
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 Profesor Federico Martn Maglio 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.
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...
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 Profesor Federico Martn Maglio 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.
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 Profesor Federico Martn Maglio 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 Profesor Federico Martn Maglio 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.
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.