Manual HTML Básico MANUAL HTML BÁSICO. Federico Martín Maglio

Transcripción

1 1 MANUAL HTML BÁSICO Federico Martín Maglio Para construir una página con el fin de publicarla en Internet, debemos aprender el lenguaje HTML (HyperText Markup Language). Se dirá que es muy fácil construir páginas WEB hoy en día con los programas que se encuentran a disposición de todos. Pero si bien esto es cierto, es necesario conocer lo mínimo del HTML porque siempre se nos presenta la situación de que el resultado final, logrado con programas que generan el código automáticamente, no es el esperado. En tal situación se hace necesario retocar el código 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 página; estas etiquetas le dicen al programa navegador de Internet cómo debe mostrar en pantalla la información que contiene. A raíz 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 más complejos y depende de lo que se quiera lograr. Lo básico que se necesita para la realización de una página Web es: Necesitamos... Un editor de texto... para escribir el código y guardarlo como.htm o.html (puede ser el Block de Notas de Windows). Un navegador de internet... para ver cómo está quedando la página a medida que se va construyendo. Cuando es necesario realizar tareas más específicas, se usarán otros programas: Usaremos como mínimo... Un editor de textos. Un editor de imágenes... Paint Shop Pro. Un editor de imágenes 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.

2 2 CONSTRUYENDO UNA PÁGINA BÁSICA: Una página de WEB se construye en lenguaje HTML. Su principio esencial es el uso de etiquetas (tags en inglés). 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... (Aquí va todo el documento) Todo documento HTML necesita un par de etiquetas HEAD o encabezado que será la información de la página que no se verá directamente en el navegador... Dentro del encabezado debemos poner las etiquetas para el título de nuestra página WEB. Este debe ser corto y descriptivo de nuestra página ya que será lo que se vea cuando alguien guarda su dirección como favorito... El contenido de la página (que es toda la información 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.

3 3 Dentro de las etiquetas que abren y cierran se introduce la información del documento. Ahora pondremos el título a la página... Mi página de WEB Ahora guarde este documento en un directorio o carpeta que se haya creado a tal efecto. Se le da un nombre y la extensión 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 extensión). Lo que acabamos de crear es un esqueleto de una página HTML. Todos los documentos HTML requieren que tengas por lo menos estas etiquetas en él, y dónde está el título? El título se ve en la parte de arriba del navegador. Dentro del cuerpo, entre las etiquetas y, está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.).

4 4 Por tanto, la estructura queda de esta manera: Mi página de WEB [Aquí van las etiquetas que visualizan la página] Vemos un ejemplo introduciendo un texto, guardamos el archivo y lo visualizamos con el navegador... Mi página de WEB Hola, soy yo. Estoy haciendo una página WEB. Si mi intención es dar formatos especiales al texto, entonces debemos utilizar etiquetas específicas. Veremos algunas... La etiqueta <P> separa el texto en diferentes párrafos. La etiqueta <BR> baja un renglón. Mi página de WEB Hola, soy yo. Estoy haciendo una página WEB. <P> Aquí paso a otro párrafo. <BR> Aquí bajo un renglón.

5 5 El texto puede tener unas cabeceras o títulos, comprendidos entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1. Veremos cómo queda... Mi página de WEB <H1>Título más grande con H1</H1> <H2>Título menos grande con H2</H2> <H3>Título un poco menos grande con H3</H3> <H4>Título en letra normal con H4</H4> <H5>Título en letra chica con H5</H5> <H6>Título en letra bien chica con H6</H6> Hola, soy yo. Estoy haciendo una página WEB. <P> Aquí paso a otro párrafo. <BR> Aquí bajo un renglón. Al texto lo puedo alinear el texto en el centro con las etiquetas... <CENTER> </CENTER> presenta el texto centrado en la página. Lo aplicamos en un ejemplo... Mi página de WEB <H1>Título más grande con H1</H1> <H2>Título menos grande con H2</H2> <H3>Título un poco menos grande con H3</H3> <H4>Título en letra normal con H4</H4> <H5>Título en letra chica con H5</H5> <H6>Título en letra bien chica con H6</H6> Hola, soy yo. Estoy haciendo una página WEB. <P> Aquí paso a otro párrafo.

6 6 <BR> Aquí bajo un renglón. <P> <CENTER> Este texto está centrado </CENTER> También podemos utilizar líneas 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 indicándole qué porcentaje de ella agregándole WIDTH=XX% y hasta puedo cambiarle el ancho agregándole a la etiqueta SIZE=X como se puede observar a continuación: Mi página de WEB <H1>Título más grande con H1</H1> <H2>Título menos grande con H2</H2> <H3>Título un poco menos grande con H3</H3> <H4>Título en letra normal con H4</H4> <H5>Título en letra chica con H5</H5> <H6>Título en letra bien chica con H6</H6> Hola, soy yo. Estoy haciendo una página WEB. <P> Aquí paso a otro párrafo. <BR> Aquí bajo un renglón. <P> <CENTER> Este texto está centrado </CENTER> <HR width=10% SIZE=1> <HR width=30% SIZE=4> <HR width=100% SIZE=8>

7 7 DANDO FORMA AL TEXTO: Debemos tener en cuenta que iniciamos otra página, 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 líneas). La fuente que usará es de espacio fijo. Vemos un ejemplo: Mi segunda página de WEB <B>Estas palabras están en negrita</b> <P> <I>Estas palabras están en itálica</i> <P> <PRE>Este texto está preformateado y esto va luego de 10 espacios en blanco. El texto actual fue escrito después de dar un enter</pre> Las listas: Si necesitamos presentar las cosas en forma de listas podemos elegir entre tres formas Listas desordenadas (no numeradas) 2. Listas ordenadas (numeradas) 3. Listas de definición. Listas desordenadas (Unordered List): Sirven para presentar cosas que no necesitan ir precedidas por un número. Tipeamos lo siguiente en el documento segundo.* a continuación del trabajo anterior:

8 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 continuación del trabajo anterior: Lista ordenada: <OL> <LI> Monitor. <LI> Placa de sonido. <LI> Teclado. <LI> Etc. </OL> Listas de definición: Sirven para presentar definiciones de términos o trabajos similares. A diferencia de las que hemos visto, cada renglón 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 definición de dicha cosa, que se consigue con la etiqueta <DD> (definition definition). Lista de definición: <DL> <DT> Monitor: <DD> Hardware de la computadora cuya función es destruir ojos. <DT> Placa de sonido: <DD> Rompe la tranquilidad familiar. <DT> Teclado: <DD> Destructor de uñas. </DL>

9 9 Comentarios no visibles en la pantalla: A veces es muy útil escribir comentarios en el documento HTML sobre el código 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 símbolos:  Ejemplo: Mi segunda página de WEB  El texto que figura como comentario en este código no lo vemos en pantalla. <P> <B>Estas palabras están en negrita</b> <P> <I>Estas palabras están en itálica</i> EJERCITACIÓN: En el documento creado agregar Un título de tipo 2 que diga "CAPÍTULO 2" que esté centrado. 2. Agregar a cada ejercicio realizado una línea que lo divida del otro. 3. Un comentario a cada ejercicio que indique qué es lo que sigue en el código. NOTA: Para la clase siguiente necesitaremos un texto de unas 2 o 3 páginas ya grabado en un disquete.

10 10 ENLACES CON OTRAS PÁGINAS: La característica que más ha influido en el espectacular éxito de la WEB (o tela de araña) ha sido, aparte la de su carácter 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 página. 2. Enlaces con otra página nuestra (en el mismo sitio). 3. Enlaces con una página fuera de nuestro sitio. 4. Enlaces con una dirección de correo electrónico. 1. Enlaces dentro de la misma página: En el caso de documentos (o páginas) 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 aparecerán 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>

11 11 Lo vemos en un ejemplo práctico iniciando nuestra tercer página y lo llamamos tercera.htm o tercera.html. AQUÍ INSERTAMOS UN TEXTO LARGO DE UNAS 2 O 3 PÁGINAS. 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 página 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 página, tercera.htm con la página creada en los ejemplos de los capítulos anteriores y que hemos llamado primera.htm y segunda.htm. Al final del documento y arriba de la etiqueta agregamos... <A HREF="primera.htm"> Ejercicios del capítulo 1 </A> <A HREF="segunda.htm"> Ejercicios del capítulo 2 </A> En los documentos primera.htm y segunda.htm hacemos lo mismo pero teniendo cuidado de cambiarle los nombres de las páginas según corresponda y cuidando que se muestren cada uno de los enlaces en diferentes renglones y que quede estéticamente bien en la página. Ya tenemos armado nuestro primer sitio de Internet... FELICIDADES. Complicando más el asunto, crearemos un enlace desde la primera página hacia el medio del documento de la tercera página (recordemos que ya tiene una marca llamada "#medio"). Lo haremos uniendo la llamada a la página más la llamada a la marca (todo junto). Entonces, quedará así... <A HREF="tercera.htm#medio"> Ir al medio del texto de la página tercera </A>

12 12 Si son páginas de diferentes subdirectorios?: Estoy poniendo enlaces a páginas 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 página a la que quiero saltar está en el subdirectorio "ejem", entonces en la etiqueta tendría que haber puesto "ejem/tercera.htm". Pero si quiero saltar desde una página a otra que está en un directorio anterior, en la etiqueta tendría 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 página fuera de nuestro sistema Si queremos enlazar con una página que esté fuera de nuestro sitio (es decir, que esté en un servidor distinto al que aloja nuestra página), es necesario conocer su dirección completa, o URL (Uniform Resource Locator). El URL podría ser, además de la dirección de una página del Web, una dirección de ftp, gopher, etc. Una vez conocida la dirección (o URL), lo colocamos en vez de lo que hemos llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la página de Microsoft la etiqueta sería la siguiente: <A HREF=" Página de Microsoft </A> Esta orden la ponemos al final de la página primera.htm, la ejecutamos y hacemos click en el enlace de Microsoft... qué ocurre? 4. Enlaces con una dirección de correo electrónico Para que el navegador reconozca que es un enlace a una dirección de correo y, al pulsar sobre ella me abra el programa que me permita enviarlo, debemos introducir la orden MAILTO: antes de la dirección. Para enviarme un correo a mí la orden sería: <A HREF="mailto:mamaglio@intercom.com.ar"> Enviar correo a Martín </A> Introducimos la orden al final de la página primera.htm, ejecutamos y hacemos un clic sobre la llamada... qué ocurre?

13 13 IMÁGENES: Aquí una observación... Trabajaremos únicamente con imágenes de tipo.gif y.jpg que son las más difundidas en la WEB. La etiqueta que nos sirve para incluir imágenes en páginas WEB es muy similar a la de enlaces a otras páginas, que hemos visto en el capítulo anterior. La diferencia es que, en lugar de indicar al programa navegador el nombre y la localización de un documento de texto HTML para que lo cargue, se le indica el nombre y la localización 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 página primera.htm e introducimos el código 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 ubicación. Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT (este permite ver una descripción de la imagen que se carga). Es útil para cuando la imagen tarda en cargarse y el visitante, al señalarla con el ratón, puede ir teniendo una idea de su contenido. <IMG SRC="imagen1.jpg" ALT="descripción"> Cambiamos "descripción" por lo que corresponda según la imagen que tengan. Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes en bytes, porque una imagen que sea muy grande o "pesada" hará el acceso a nuestra página 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 descripción visible que explique de qué se trata, podemos introducir el texto a continuación de la llamada de la imagen. Tenemos tres opciones a saber... <IMG SRC="imagen1.jpg" ALT="descripción" ALIGN=TOP> Titular alineado arriba <IMG SRC="imagen1.jpg" ALT="descripción" ALIGN=MIDDLE> Titular alineado en medio <IMG SRC="imagen1.jpg" ALT="descripción" ALIGN=BOTTOM> Titular alineado abajo También podemos hacer que la misma imagen sea utilizada como enlace hacia otra página. Primeramente haremos el ejemplo con el archivo "imagen2.jpg". Ponemos la dirección de la página en la llamada de enlace y, al terminar tal orden, ponemos la imagen y luego su descripción. Finalmente cerramos con </A>

14 14 <A HREF="segunda.htm"><IMG SRC="imagen2.jpg" ALT="descripción"></A> Si hacemos un clic sobre la imagen veremos que nos redirecciona hacia la página señalada. La imagen aparecerá rodeada de un rectángulo. 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="descripción" BORDER=0></A> EJERCITACIÓN: 1. Creamos un documento nuevo al que llamaremos index.htm. 2. Ponemos un título de tipo 1 centrado. 3. Separamos con una línea de espesor 5 y que ocupe el 70 % de la página. 4. Ponemos llamadas a los documentos primera.htm, segunda.htm y tercera.htm. 5. Ponemos una llamada al correo electrónico del Instituto. 6. Ponemos llamadas para las siguientes organizaciones: O.N.U., Ministerio de Cultura y Educación y diario Clarín. 7. Ponemos la imagen1.jpg con un enlace a imagen2.jpg. CARACTERES ESPECIALES: Existen algunas limitaciones para escribir el texto... Las etiquetas se forman como un comando escrito entre los símbolos "<" y ">", entonces, si se quisieran escribir estos caracteres como parte normal del texto, daría esto lugar a una ambigüedad, ya que el navegador podría interpretarlos como el comienzo o final de una etiqueta, en vez de un carácter más del texto. El HTML es un lenguaje escrito en idioma inglés, y éste no tiene la letra ñ ni los acentos a las vocales ni apertura de interrogación y exclamación. 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 códigos. Para resolver estos problemas, existen códigos para poder escribir estos caracteres. Estos códigos tienen un inicio y un fin. El inicio es el símbolo & y el final es el ;

15 15 Para que carateres del código que aparezcan en el texto: < para < (menor que) > para > (mayor que) & para & (ampersand) " para " (double quotation) Para vocales, eñes, interrogación y exclamación: á 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 código directamente. Por ejemplo... Mi página con caracteres especiales <CENTER> <H1> Mi página realizada en el instituto para ver cómo se escriben los caracteres especiales como la ñ </H1> </CENTER> <HR>

16 16 FORMATO DE FUENTES: Tamaño de las fuentes: El tamaño de las fuentes utilizadas puede cambiarse con el comando SIZE=X, donde X es el número asignado al tamaño que puede variar entre 1 y 7. Por ejemplo... <FONT SIZE=1> Texto en tamaño 1 </FONT> <BR> <FONT SIZE=2> Texto en tamaño 2 </FONT> <BR> <FONT SIZE=3> Texto en tamaño 3 </FONT> <BR> <FONT SIZE=4> Texto en tamaño 4 </FONT> <BR> <FONT SIZE=5> Texto en tamaño 5 </FONT> <BR> <FONT SIZE=6> Texto en tamaño 6 </FONT> <BR> <FONT SIZE=7> Texto en tamaño 7 </FONT> <BR> Para tener una referencia válida, el tamaño 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 visualización de la página puede cambiar en su estética. 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>

17 17 FONDOS DE PÁGINA: Se puede cambiar el fondo de las páginas 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 continuación de la etiqueta <BODY BGCOLOR="#RRVVAA"> Donde: RR es un número indicativo de la cantidad de color rojo VV es un número indicativo de la cantidad de color verde AA es un número indicativo de la cantidad de color azul Estos números indican en numeración hexadecimal la cantidad del color primario. En la mezcla final se da el resultado. Esta numeración se caracteriza por tener 16 dígitos (en lugar de los diez de la numeración decimal habitual). Estos dígitos son: A B C D E F Es decir, que en nuestro caso, el número menor es el 00 y el mayor el FF. Así, por ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro dos colores. Los colores primarios son... #FF Rojo #00FF00 - Verde #0000FF - Azul Para blanco y negro serán... #FFFFFF - Blanco # Negro Para hacer un tono más oscuro del color elegido hay que reducir el número de su componente, dejando los otros dos invariables. Así, el rojo #FF0000 se puede hacer más claro con #AA0000, o más oscuro con #

18 18 Para hacer que un color tenga un tono más suave (más pastel), se deben variar los otros dos colores haciéndolos más claros (número más alto), en una cantidad igual. Así, podemos convertir el rojo en anaranjado con #FF7050. Colores del texto y de los enlaces: Podemos cambiar el color al texto y a sus enlaces en toda la página. 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 quedaría así (a continuación de ): <BODY BGCOLOR="# RRVVAA" TEXT="# RRVVAA" LINK="# RRVVAA" VLINK="# RRVVAA " ALINK="# RRVVAA"> Cambio del color de una parte del texto (y no en toda la página): <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 página en formato GIF o JPEG. Esta imagen se repite por toda la página en forma de tapiz. La estructura de la etiqueta es: <BODY BACKGROUND="fondo1.gif"> A esta etiqueta puede agregársele otras para el texto y los enlaces. Hay que tener en cuenta que el visitante puede tener deshabilitada carga de imágenes. Esto podría ocasionar que el texto no sea legible (depende de cómo lo hayamos armado). Para evitar el problema, si se pone un fondo que al no ser cargado pueda traer problemas con el texto, también podemos cargar un color que sí lo permita. En tal caso, el color aparecerá si la imagen no es cargada.

19 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 continuación. La etiqueta quedaría así: <BODY BACKGROUND="fondo5.jpg" BGCOLOR="#0000FF"> EJERCITACIÓN: 1. Poner un fondo a la página index.htm con un color alternativo. 2. Poner el mismo fondo a las páginas primera.htm, segunda.htm y tercera.htm con un color alternativo. 3. Hacer que en la página tercera.htm aparezcan partes del texto en diferentes colores, fuentes y tamaños de fuente. ALINEACIÓN Y DIMENSIONADO DE IMÁGENES: Alineación de las imágenes: Se consigue con la etiqueta ALIGN más el tipo de alineación deseado... ALIGN=RIGHT ALIGN=LEFT Alinea la imagen a la derecha de la página. Alinea la imagen a la izquierda de la página. La orden para alinear la imagen a la derecha sería... <IMG SRC="imagen1.jpg" ALIGN=RIGHT> Si queremos que la imagen esté centrada en la página, entonces la orden sería... <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.

20 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 práctico creando un archivo cualquiera y veremos que el texto con la etiqueta <BR CLEAR=ALL> queda debajo de la imagen. Mi página de WEB <IMG SRC="imagen1.jpg" ALIGN=RIGHT> Este texto está al lado de la imagen. <BR> Este texto también. <BR CLEAR=ALL> Busca el primer margen libre a ambos lados. Dimensionando la imagen: Los navegadores cuando cargan un documento HTML y encuentran una etiqueta de una imagen, piden al servidor que les envíe únicamente este archivo. Cuando carga la imagen, recién después cargan los demás datos porque necesita de la imagen para ir armando la página. Para que el navegador sepa qué tamaño tiene la imagen y siga cargando los otros datos de la página (textos), se le puede indicar qué tamaño tendrá y así reservará tal lugar. Para indicar el tamaño 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 tamaño del que realmente tiene. Podemos decirle... <IMG SRC="imagen1.jpg" WIDTH=100 HEIGHT=50>

21 21 FORMATO DE LAS IMÁGENES: Tamaño de las imágenes: Al cargar una imagen, el tiempo de carga varía según cómo esté la línea y su tamaño en bytes. Debemos tener cuidado en este punto reduciendo el tamaño de la imagen con un programa como el Paint Shop Pro. Tenemos varias alternativas Reducir la resolución de la imagen. Generalmente tienen unos 300 pixeles. Se los puede bajar a Reducir las imágenes.gif a un máximo de 256 colores (las.jpg tienen que ser siempre de 16,7 millones de colores). 3. Reducir la imagen a un tamaño que sea suficiente para apreciarla con claridad. Cuanto más pequeña en pixeles sea, más pequeña en bytes será. GIFs transparentes: Una característica muy útil del formato.gif es la opción de hacer transparente un color determinado, es decir, que en la página del Web ese color concreto no se vea, siendo reemplazado por el fondo de la página. Esto es muy beneficioso cuando queremos realizar ejectos atractivos con imágenes irregulares o de texto. Se debe tener en cuenta que sólo puede tener transparencia el formato.gif de tipo 89 a, ya que también 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 imágenes diferentes que, al ser cargadas por el navegador, se irán reproduciendo una a una consecutivamente dando la impresión de ver una animación (igual que con los dibujos animados). Para realizar tal efecto, guardamos las imágenes que conformarán la animación 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 reproducirán consecutivamente.

22 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 código debe ir entre y. <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 quedaría 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 están las etiquetas de cada celda, que son <TD> y </TD>, que dan lugar al contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila teniendo cuidado de que en cada fila tengamos el mismo número 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> <TD>fila1-celda2</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR> </TABLE>

23 23 Dibujada en la hoja quedaría... Para ir apreciando los cambios realizados, creamos un archivo llamado tabla.htm con el siguiente código... <TABLE BORDER> <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> Probamos sacando la celda 3 de la fila 2 para ver qué pasa... Luego restituimos la etiqueta quitada... Ahora le agregamos un título a la tabla. Lo creamos con las etiquetas <CAPTION> y </CAPTION> que deben ubicarse después de <TABLE BORDER>. Entre las etiquetas tipeamos el título. Ahora vamos a variar el espesor de los bordes. A esto lo hacemos poniendo un signo = y un número. El listado ahora debe estar así:

24 24 <TABLE BORDER=5> <CAPTION>Título 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> Celdas de cabecera: Seguidamente, pondremos título 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>