El Principio Esencial Del Lenguaje HTML

El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags).
Funcionan de la siguiente manera: <XXX> Este es el inicio de una etiqueta. </XXX> Este es el cierre de una etiqueta. Las letras de la etiqueta pueden estar en maysculas o minsculas, indiferentemente. Por claridad, se usarn en este manual slamente las maysculas Lo que haya entre ambas etiquetas estar influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML>: <HTML> [Todo el documento] </HTML> El documento en s est dividido en dos zonas principales: El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD> El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>
Dentro del encabezamiento hay informacin del documento, que no se ve en la pantalla principal, principalmente el ttulo del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El ttulo debe ser breve y descriptivo de su contenido, pues ser lo que vean los dems cuando aadan nuestra pgina a su bookmark (o agenda de direcciones). Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla principal (texto, imgenes, etc.) Por tanto, la estructura queda de esta manera: <HTML> <HEAD> <TITLE> Ttulo de la pgina </TITLE> </HEAD> <BODY> [Aqu van las etiquetas que visualizan la pgina] </BODY> </HTML> Antes de crear nuestra primera pgina, unas consideraciones sobre el texto: Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que ste se acomoda a ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto en distintos prrafos debemos usar la etiqueta <P>, (que no tiene su correspondiente etiqueta de cierre </P>) El texto puede tener unas cabeceras, comprendidas 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. Puedes experimentar en el ejemplo que sigue, cambiando el nmero para comprobar el efecto que se logra. Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER> (no la soportan todos los navegadores, aunque s la mayora de ellos). Nos centra todo lo que est dentro de ella, ya sea texto, imgenes, etc. Tambin tenemos los separadores (horizontal rules), 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
Ejemplo prctico <HTML> <HEAD> <TITLE> Mi pagina del Web - 1 </TITLE> </HEAD> <BODY> <H1> <CENTER> Primera pagina </CENTER> </H1> <HR> Esta es mi primera pagina, aunque todavia es muy sencilla. Como el lenguaje HTML no es dificil, pronto estare en condiciones de hacer cosas mas interesantes. <P> Aqui va un segundo parrafo. </BODY> </HTML> Dando forma al texto Como hemos visto en el ejemplo del captulo anterior, cuando queremos poner un texto sin ninguna caractersca especial, lo ponemos directamente. Unicamente, la separacin entre prrafos (dejando una lnea en blanco) la conseguimos con la etiqueta <P>. Si queremos separar los prrafos, o cualquier otra cosa, pero sin dejar una lnea en blanco, usamos una etiqueta parecida <BR> (break, o romper). Tampoco tiene etiqueta de cierre. Si queremos obtener mltiples lneas en blanco no basta con repetir la etiqueta <P>, sino que hay que combinarla con la etiqueta <BR>. As por ejemplo, si queremos obtener cuatro lneas en blanco, pondramos: <BR><P> <BR><P> <BR><P> <BR><P> Con lo que se obtiene:
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).
A menudo nos interesar presentar las cosas en forma de listas. Podemos escoger entre tres tipos distintos: 1. Listas desordenadas (no numeradas) 2. Listas ordenadas (numeradas) 3. Listas de definicin. Las listas desordenadas (unordered lists) sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un nmero. Su estructura es la siguiente: <UL> <LI> Una cosa <LI> Otra cosa <LI> Otra ms <LI> Etc. </UL>
Es decir, toda la lista est dentro de la etiqueta <UL> y </UL>, y luego cada cosa va precedida de la etiqueta <LI> (list item). El resultado de lo anterior es el siguiente: Una cosa Otra cosa Otra ms Etc.
Se puede anidar una lista dentro de otra. Por ejemplo: <UL> <LI> Mamferos <LI> Peces <UL> <LI> Sardina <LI> Bacalao </UL> <LI> Aves </UL> Que dara el siguiente resultado: Mamferos Peces o Sardina o Bacalao Aves
Las listas ordenadas (ordered lists) sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecer automticamente un nmero correlativo para cada cosa. <OL> <LI> Primera cosa <LI> Segunda cosa <LI> Tercera cosa <LI> Etc. </OL> El resultado es: 1. 2. 3. 4. Primera cosa Segunda cosa Tercera cosa Etc.
Al igual que las listas desordenadas, tambin se pueden anidar las listas ordenadas. El tercer tipo lo forman las listas de definicin. Como su nombre indica, son apropiadas para glosarios (o definiciones de trminos). Toda la lista debe ir englobada entre las etiquetas <DL> y </DL>. Y a diferencia de las dos 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) y 2) la definicin de dicha cosa, que se consigue con la etiqueta <DD> (definition definition). <DL> <DT> Una cosa a definir <DD> La definicin de esta cosa <DT> Otra cosa a definir <DD> La definicin de esta otra cosa </DL>
Su resultado es: Una cosa a definir La definicin de esta cosa Otra cosa a definir La definicin de esta otra cosa 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 vean en pantalla. Esto se consigue encerrando dichos comentarios entre estos dos smbolos:  Ejemplo:  <HTML> <HEAD> <TITLE> Mi pagina del Web - 2 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mis aficiones </H1> </CENTER> <HR> Sin un orden particular, mis <B> aficiones </B> son las siguientes: <UL> <LI> El cine <LI> El deporte <UL> <LI> Natacion <LI> Baloncesto </UL> <LI> La musica </UL> La musica que mas me gusta es <I> (en orden de preferencia): </I> <OL> <LI> El rock <LI> El jazz <LI> La musica clasica </OL> </BODY> </HTML>
Enlaces con otras pginas La caracterstica que ms ha influido en el espectacular xito del Web (o tela de araa) ha sido, aparte la de su carcter multimedia, la posibilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces hipertexto. Estructura de los enlaces En general, los enlaces tienen la siguiente estructura: <A HREF="xxx"> yyy </A> donde xxx es el destino del enlace (Obsrvese las comillas). yyy es el texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado)
Tipos de enlaces Vamos a distinguir cuatro tipos de enlaces: 1. 2. 3. 4. Enlaces dentro de la misma pgina Enlaces con otra pgina nuestra Enlaces con una pgina fuera de nuestro sistema Enlaces con una direccin de email
1. Enlaces dentro de la misma pgina A veces, en el caso de documentos (o pginas) muy extensos, nos puede interesar dar un salto desde una posicin a otra determinada. En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este caso el sitio dentro de la pgina a donde queremos saltar, 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, entonces: <A HREF="#marca"> YYY </A> Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="marca"> </A> Por ejemplo, si quiero saltar desde aqu a la pantalla final, pongo la siguiente etiqueta: <A HREF="#final"> Pulsa para ir al final</A> Que resulta como: Pulsa para ir al final (Puedes comprobar cmo salta a la pantalla final) Y en el final del documento he puesto esta otra etiqueta: <A NAME="final"> </A> 2. Enlaces con otra pgina nuestra Puede ser que tengamos una sola pgina. Pero lo ms frecuente es que tengamos varias pginas, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas. Supongamos que queremos enlazar con la pgina creada en el ejemplo del captulo anterior, que la hemos llamado mipag2.html. En este caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del fichero: <A HREF="mipag2.html"> Ejemplo del captulo 2 </A> Que resulta como: Ejemplo del captulo 2 (Puedes comprobar cmo carga esa pgina) Si queremos que vaya a un sitio concreto de otra pgina nuestra en vez de ir al principio de la pgina, adonde va por defecto, en ese sitio tenemos que colocar una marca (vase la seccin anterior), y completar el enlace con la referencia a esa marca. Lo veremos con el siguiente ejemplo: Quiero poner un enlace desde aqu al captulo 4, pero a un sitio concreto, donde he puesto la marca <A NAME="alinear"></A>. Entonces la etiqueta tiene que ser: <A HREF="cap4.html#alinear"> Capitulo 4 </A> Que resulta: Capitulo 4 (Obsrvese cmo al pulsar el enlace salta al captulo 4, pero no al comienzo, sino a donde yo quiero que lo haga) Una observacin importante: Estoy suponiendo que la pgina en la que estoy escribiendo esta etiqueta y la otra pgina a la que quiero saltar estn en el mismo directorio. Porque pudiera ocurrir que he organizado mi sitio del Web con un
directorio principal, y otros subdirectorios auxiliares. Si la pgina a la que quiero saltar est, p. ej. en el subdirectorio subdir, entonces en la etiqueta tendra que haber puesto "subdir/mipag2.html". Y a la inversa, si quiero saltar desde una pgina a otra que est en un directorio anterior, en la etiqueta tendra que haber puesto "../mipag2.html". Esos dos puntos hace que se dirija al directorio anterior. Obsrvese que se debe utilizar el smbolo / para indicar los subdirectorios, y no este otro \, que es propio nicamente de Windows. Si nos queremos evitar todas estas complicaciones, podemos tener todo junto en un nico directorio, pero esto tiene el inconveniente de que est todo ms desordenado, y sean ms difciles de hacer las futuras modificaciones. 3. Enlaces con una pgina fuera de nuestro sistema Si queremos enlazar con una pgina que est fuera de nuestro sistema (es decir, que est en un servidor distinto al que soporta 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 Netscape (cuyo URL es: http://home.netscape.com/), la etiqueta sera: <A HREF="http://home.netscape.com/"> Pgina inicial de Netscape </A> Que dara como resultado: Pgina inicial de Netscape Es muy importante copiar estas direcciones correctamente (respetando las maysculas y minsculas, pues los servidores UNIX s las distinguen) 4. Enlaces con una direccin de email En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la direccin de email. La estructura de la etiqueta es: <A HREF="mailto: direccin de email"> Texto del enlace </A> Un ejemplo de esto est al final de la pgina principal de este manual. Podra haber puesto: Comentarios a <A HREF="mailto: [email protected]">Francisco Arocena</A> Que resultara: Comentarios a Francisco Arocena Pero hay algunos navegadores que no reconocen este tipo de enlace, y lo veran de esta manera: Comentarios a Francisco Arocena y no tendran ningn medio de conocer la direccin de email. Por lo tanto, es ms seguro poner algo as como: Comentarios a Francisco Arocena en <A HREF="mailto: [email protected]"> [email protected] </A> Que resulta: Comentarios a Francisco Arocena en [email protected] En el procesador de textos copiamos: <HTML> <HEAD> <TITLE> Mi pagina del Web - 3 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mis paginas favoritas </H1> </CENTER>
<HR> Estas son mis paginas favoritas: <P><A HREF="http://home.netscape.com"> Netscape </A> <BR> <A HREF="http://www.microsoft.com"> Microsoft </A> <BR> <A HREF="http://www.yahoo.com"> Yahoo! </A> </BODY> </HTML>
Imgenes La etiqueta que nos sirve para incluir imgenes en nuestras pginas del Web es muy similar a la de enlaces a otras pginas, La nica 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 una imagen. La estructura de la etiqueta es: <IMG SRC="imagen.gif"> Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga). Dentro de la etiqueta se pueden aadir otros comandos, tal como ALT <IMG SRC="imagen.gif" ALT="descripcin"> Con el comando ALT se introduce una descripcin (una palabra o una frase breve) indicativa de la imagen. De momento nos vamos a limitar a escoger la posicin del titular con respecto a la imagen (si es que queremos ponerle un titular, claro est). Se puede poner arriba, en medio o abajo del lado de la imagen. Para ello se aade el comando ALIGN a la etiqueta, de la siguiente manera: <IMG SRC="isla.gif" ALIGN=TOP> Titular alineado arriba Titular alineado arriba <IMG SRC="isla.gif" ALIGN=MIDDLE> Titular alineado en medio Titular alineado en medio <IMG SRC="isla.gif" ALIGN=BOTTOM> Titular alineado abajo Titular alineado abajo
Otra posibilidad es la de utilizar una imagen como enlace a otra pgina. Para estos casos se utilizan generalmente imgenes pequeas (iconos), aunque se puede usar cualquier tipo de imagen.
Ejemplo prctico Primeramente es necesario capturar las tres imgenes que se han utilizado en este captulo: isla.gif, hombre.gif y casa.gif y guardarlas en el mismo directorio en el que se guardar el fichero de texto que se va a crear a continuacin, junto con los de los captulos anteriores. En el procesador de textos copiamos: <HTML> <HEAD> <TITLE> Mi pagina del Web - 4 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mi pagina del Web </H1> </CENTER> <HR> Esta es mi pagina del Web. No es muy extensa, pero tiene todos los elementos basicos. Espero que os guste. Poco a poco le ire anadiendo mas cosas interesantes. <P> <A HREF="mipag2.html"> <IMG SRC="hombre.gif"> </A> Mis aficiones <P> <A HREF="mipag3.html"> <IMG SRC="casa.gif"> </A> Mis paginas favoritas <CENTER> <H3> Un lugar ideal para mis vacaciones </H3> <IMG SRC="isla.gif" ALT="isla"> </CENTER> </BODY> </HTML> Fondos Se puede cambiar el fondo de dos maneras distintas: 1. Con un color uniforme 2. Con una imagen
Fondos con un color uniforme Se consigue aadiendo el comando BGCOLOR a la etiqueta <BODY> (situada al principio del documento), de la siguiente manera: <BODY BGCOLOR="#XXYYZZ"> donde: XX es un nmero indicativo de la cantidad de color rojo YY es un nmero indicativo de la cantidad de color verde ZZ es un nmero indicativo de la cantidad de color azul Estos nmeros estn en numeracin hexadecimal. Esta numeracin se caracteriza por tener 16 dgitos (en lugar de los diez de la numeracin decimal habitual). Estos dgito son: 0123456789ABCDEF 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 Otros colores son: #FFFFFF - Blanco #000000 - Negro #FFFF00 - Amarillo Para hacer un color ms oscuro, hay que reducir el nmero de su componente, dejando los otros dos invariables. As, el rojo #FF0000 se puede hacer ms oscuro con #AA0000, o an ms oscuro con #550000. 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 rosa con #FF7070.
Colocar un fondo en una pgina web Para incluir un fondo en una pgina web necesitamos utilizar el atributo background en la etiqueta <BODY>, al que le asignamos el nombre del archivo que deseamos utilizar como fondo. Si el archivo se encuentra en un directorio distinto que la pgin a web, necesitaremos incluir la ruta al archivo, teniendo en cuenta siempre de utilizar una ruta relativa al archivo .html para que se conserve la ruta en caso de que cambiemos el sitio web de localizacin. <body background="fondo.gif"> Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la pgina como fondo. Por defecto, la imagen de fondo aparece como un mosaico, repitindose a lo largo de todo el espacio de la pgina. Fondo en otros elementos No solo la pgina puede tener un fondo, tambin lo podemos colocar a las tablas o las celdas, por ejemplo. Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas. <table background="fondo.gif"> <td background="fondo.gif"> Consejos para utilizar fondos Veamos ahora algunos consejos que se deberan seguir para una correcta utilizacin de los fondos de imagen. 1) Colocar un fondo de color parecido a la imagen Cuando colocamos un fondo en una pgina debemos utilizar el atributo bgcolor para asignar un color de fondo parecido al predominante en la imagen que compone el mosaico. Posiblemente muchos de nosotros habremos accedido a una pgina en la que no se ve nada y, cuando se carga el fondo, nos damos cuenta que s que haba texto en la pgina, lo que ocurre es que no se vea porque no contrastaba con el color de fondo blanco por defecto. Es posible que en estos casos la imagen de fondo fuera oscura y que el texto fuera blanco y, hasta que no se carga la imagen de fondo, no se puede ver nada. Este problema se agrava si el fondo no se llega a cargar por un error en la transferencia del archivo o porque la imagen ha sido borrada del servidor accidentalmente. 2) Que se puedan leer bien los textos Los fondos estn para hacer ms vistosa la pgina, no para molestar en la lectura de los textos. Es un error muy comn utilizar un fondo que luego molesta al leer los textos. Ya es bastante difcil leer una web en un monitor como para que encima el texto no contraste bien con el fondo que se est utilizando. En este caso cabe indicar tambin que es muy importante que las combinaciones de color del texto y del fondo sean agradables, ya que hay ciertos colores que, aunque
contrastan bien, provocan unas combinaciones difciles de leer, por ejemplo un fondo con un color azul predominante y el texto en rojo. 3) Los fondos de imagen de color homogneo Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen se utilicen colores de una misma gama. Si la imagen tiene partes oscuras y claras, de qu color pondremos el texto para asegurarnos de que se lea bien siempre? Si el texto es claro no contrastar bien con las partes del fondo que tambin son claras. Igual pasar si colocamos el texto con un color oscuro, que no contrastar bien con las partes oscuras del fondo. 4) Tener cuidado con las distintas definiciones de pantalla Es importante saber que un visitante puede acceder a una pgina con un tamao de ventana variable. A veces un fondo se comporta bien con una definicin dada, pero no con otras mayores. Ocurre muy a menudo que se utiliza un fondo y se ve el resultado en una ventana de 800x600 1024x768. Luego accede una persona con una definicin de 1280x1024, o superior, y ve la pgina incorrectamente porque se realiza un mosaico con el fondo que no haba tenido en cuenta el desarrollador. Para entender este punto, puede ser interesante acceder a esta pgina, que se ver bien en una definicin de 800x600 pero mal si es mayor. 5) Hacer un fondo suficientemente grande Es importante que el tamao del archivo que vamos a utilizar como fondo tenga un cierto tamao. Si utilizamos como fondo una imagen de unos pocos pixels, nuestro ordenador trabajar mucho para crear el mosaico repitiendo cientos o miles de veces esa imagen. Sin embargo, si el fondo hubiese sido un poco ms grande, para realizar el mosaico hubiera trabajado mucho menos. En definitiva, tendremos que tener mucho cuidado al utilizar los fondos, puesto que pueden dificultar mucho la presentacin de la informacin en la pgina de una manera clara. Si deseamos utilizar un fondo que pudiera dar algn problema, una idea para asegurarnos que los textos se visualicen correctamente es colocar todo el contenido de la pgina dentro de una tabla y asignarle a la tabla un color de fondo con el atributo bgcolor. <html> <head> <title>Fondo de prueba</title> </head> <body background="fondo1.jpg" bgcolor="FFCECB"> <table width="550" bgcolor=FFCECB align=center> <tr> <td> <h1 style="color:000000">Probando...</h1> <br> Este texto se lee bien porque tiene un fondo plano. <br> </td> </tr> </table> </body> </html>
Para incluir un fondo en una pgina web necesitamos utilizar el atributo background en la etiqueta <BODY>, al que le asignamos el nombre del archivo que deseamos utilizar como fondo. Si el archivo se encuentra en un directorio distinto que la pgina web, necesitaremos incluir la ruta al archivo, teniendo en cuenta siempre de utilizar una ruta relativa al archivo .html para que se conserve la ruta en caso de que cambiemos el sitio web de localizacin. <body background="fondo.gif"> Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la pgina como fondo. Por defecto, la imagen de fondo aparece como un mosaico, repitindose a lo largo de todo el espacio de la pgina. Fondo en otros elementos No solo la pgina puede tener un fondo, tambin lo podemos colocar a las tablas o las celdas, por ejemplo. Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas. <table background="fondo.gif"> <td background="fondo.gif"> Consejos para utilizar fondos Veamos ahora algunos consejos que se deberan seguir para una correcta utilizacin de los fondos de imagen. 1) Colocar un fondo de color parecido a la imagen Cuando colocamos un fondo en una pgina debemos utilizar el atributo bgcolor para asignar un color de fondo parecido al predominante en la imagen que compone el mosaico. Posiblemente muchos de nosotros habremos accedido a una pgina en la que no se ve nada y, cuando se carga el fondo, nos damos cuenta que s que haba texto en la pgina, lo que ocurre es que no se vea porque no contrastaba con el color de fondo blanco por defecto. Es posible que en estos casos la imagen de fondo fuera oscura y que el texto fuera blanco y, hasta que no se carga la imagen de fondo, no se puede ver nada. Este problema se agrava si el fondo no se llega a cargar por un error en la transferencia del archivo o porque la imagen ha sido borrada del servidor accidentalmente. 2) Que se puedan leer bien los textos Los fondos estn para hacer ms vistosa la pgina, no para molestar en la lectura de los textos. Es un error muy comn utilizar un fondo que luego molesta al leer los textos. Ya es bastante difcil leer una web en un monitor como para que encima el texto no contraste bien con el fondo que se est utilizando. En este caso cabe indicar tambin que es muy importante que las combinaciones de color del texto y del fondo sean agradables, ya que hay ciertos colores que, aunque contrastan bien, provocan unas combinaciones difciles de leer, por ejemplo un fondo con un color azul predominante y el texto en rojo. 3) Los fondos de imagen de color homogneo Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen se utilicen colores de una misma gama. Si la imagen tiene partes oscuras y claras, de qu color pondremos el texto para asegurarnos de que se lea bien siempre? Si el texto es claro no contrastar bien con las partes del fondo que tambin son claras. Igual pasar si colocamos el texto con un color oscuro, que no contrastar bien con las partes oscuras del fondo. 4) Tener cuidado con las distintas definiciones de pantalla Es importante saber que un visitante puede acceder a una pgina con un tamao de ventana variable. A veces un fondo se comporta bien con una definicin dada, pero no con otras mayores. Ocurre muy a menudo que se utiliza un fondo y se ve el resultado en una ventana de 800x600 1024x768. Luego accede una persona con una definicin de 1280x1024, o superior, y ve la pgina incorrectamente porque se realiza un mosaico con el fondo que no haba tenido en cuenta el desarrollador. Para entender este punto, puede ser interesante acceder a esta pgina, que se ver bien en una definicin de 800x600 pero mal si es mayor. 5) Hacer un fondo suficientemente grande Es importante que el tamao del archivo que vamos a utilizar como fondo tenga un cierto tamao. Si utilizamos como fondo una imagen de unos pocos pixels, nuestro ordenador trabajar mucho para crear el mosaico repitiendo cientos o miles de veces esa imagen. Sin embargo, si el fondo hubiese sido un poco ms grande, para realizar el mosaico hubiera trabajado mucho menos. En definitiva, tendremos que tener mucho cuidado al utilizar los fondos, puesto que pueden dificultar mucho la presentacin de la informacin en la pgina de una manera clara. Si deseamos utilizar un fondo que pudiera dar algn problema, una idea para asegurarnos que los textos se visualicen correctamente es colocar todo el contenido de la pgina dentro de una tabla y asignarle a la tabla un color de fondo con el atributo bgcolor.
<html> <head> <title>Fondo de prueba</title> </head> <body background="fondo1.jpg" bgcolor="FFCECB"> <table width="550" bgcolor=FFCECB align=center> <tr> <td> <h1 style="color:000000">Probando...</h1> <br> Este texto se lee bien porque tiene un fondo plano. <br> </td> </tr>
</table> </body> </html>
MARQUEE La etiqueta <MARQUEE></MARQUEE> crea una marquesina con un texto en su interior que se desplaza. Funciona unicamente con Ms-Explorer. Sus parmetros son los siguientes : align = top / middle / bottom Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la baja (bottom) o en el centro (middle) de la misma. bgcolor = "codigo de color" Indica el color del fondo de la marquesina. direction = left / right Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha (right) height = num o % Indica la altura de la marquesina en puntos o porcentaje en funcin de la ventana del navegador. width = num o % Indica la anchura de la marquesina en puntos o porcentaje en funcin de la ventana del navegador.
loop = num / infinite Indica el numero de veces que se desplazar el texto por la marquesina. Si se indica infinite, se desplazar indefinidamente. scrolldelay = num. Indica el nmero de milisegundos que tarda en reescribirse el texto por la marquesina, a mayor nmero mas lentamente se desplazar el texto. Veamos un ejemplo de esta etiqueta : <MARQUEE bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 > Bienvenido a mi pagina personal en Internet. </MARQUEE>

El Principio Esencial Del Lenguaje HTML

Cargado por

Copyright:

Formatos disponibles

El Principio Esencial Del Lenguaje HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

El Principio Esencial Del Lenguaje HTML

Cargado por

Copyright:

Formatos disponibles

El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags).

</table> </body> </html>

También podría gustarte