Así que querés hacer una Página WEB!

Así que querés hacer una Página WEB!
Lección 2

Para mantener las cosas un poco más limpias, voy a escribir solamente los que va entre las etiquetas <BODY> . Voy a omitir la etiquetas HTML y TITLE . Es innecesario decirlo, no las borres de tu documento.

<BODY> </BODY>

Escribí algo que tenga onda.

<BODY> Algo que tenga onda </BODY>

Algo que tenga onda

Siempre que hagas un cambio a tu documento, grabalo y después hacé click en el botón Refresh de tu browser. En algunas circunstancias puede que apretar este botón no sea suficiente... en ese caso, apretá Refresh MIENTRAS mantenés apretado el Shift, nada más fácil, eh?

Creo que lo primero que vamos a aprender es cómo cambiar el color de fondo. Creo que estarás de acuerdo que el blanco es bastante aburrido. (nota: el blanco no siempre es el color por defecto)

<BODY BGCOLOR="#00FF00" > Algo que tenga onda </BODY>

Algo que tenga onda

00FF00 es el código de computadora para el verde. Acá hay algunos más

Podés especificar una imagen de fondo en su lugar. (Nota: la imagen tendría que estar en la misma carpeta que el archivo html. Más de esto abajo)

<BODY BACKGROUND="ondas.gif" > Algo que tenga onda </BODY>

Algo que tenga onda

Acá está la imagen de fondo

Para que la imagen aparezca, el browser tiene que encontrarla. Por ahora, queremos que la imagen esté en la misma carpeta que tu documento html ( pagina1.html ). La manera más fácil de hacer esto es haciendo click derecho sobre la imagen de arriba, y luego elegir Save Image As (o alguna variante por el estilo). Navega hasta donde sea que hayas puesto tu pagina1.html y grabá la imagen ahí. Después nos vamos a meter en este asunto con más profundidad.

Es bastante obvio que la imagen fue repetida varias veces hasta ocupar toda la pantalla. Si usas una imagen larga y finita podés obtener un efecto como este...

<BODY BACKGROUND="barrazul.gif" > Algo que tenga onda </BODY>

Acá está la imagen que usamos

(En realidad mide 800x2, pero la compimí acá a 530x2 así entra en la pantalla de todos)

Volvamos a nuestra vieja pantalla verde plana.

<BODY BGCOLOR="#00FF00"> Algo que tenga onda </BODY>

Algo que tenga onda

Podemos hacer cosas en negrita

<BODY BGCOLOR="#00FF00"> Algo que tenga onda </BODY>

Algo que tenga onda

Lo que le estamos diciendo al browser es: en la  empezá a escribir en negrita, y en la  para de escribir en negrita.

El mismo principio se aplica con las cursivas

<BODY BGCOLOR="#00FF00"> Algo que tenga onda </BODY>

Algo que tenga onda

.... y con el subrayado .

<BODY BGCOLOR="#00FF00"> Algo que tenga onda </BODY>

Algo que tenga onda

Volvamos a la pantalla verde plana.

<BODY BGCOLOR="#00FF00"> Algo que tenga onda </BODY>

Algo que tenga onda

Podemos usar etiquetas en combinación si queremos:

<BODY BGCOLOR="#00FF00"> Algo que tenga onda </BODY>

Algo que tenga onda

Este es un ejemplo de etiquetas anidadas . Si vas a usar etiquetas en combinación (cosa que probablemente vas a estar haciendo muy seguido), para evitar confundir al browser las etiquetas tienen que estar anidadas, no superpuestas. Dejame ilustrarte....

<ESTO> <AQUELLO> </ESTO> </AQUELLO> Etiquetas superpuestas .... nene malo, caca.
<ESTO> <AQUELLO></AQUELLO> </ESTO> Etiquetas anidadas... nene bueno, browser feliz.

Un tipo de efecto de texto muy útil es el de texto mono-espaciado, o Typewriter Text.

<BODY BGCOLOR="#00FF00"> <TT> Algo que tenga onda </TT> </BODY>

Algo que tenga onda

Cada letra usa la misma cantidad de espacio horizontal.

Esto es texto común `->`	iiiiiiiiii oooooooooo mmmmmmmmmm
`Esto es mono-espaciado->`	`iiiiiiiiii oooooooooo mmmmmmmmmm`

Podemos cambiar el tamaño también... Es bastante sencillo!

Primero agrega la etiqueta de fuente  ...

<BODY BGCOLOR="#00FF00"> Algo que tenga onda </BODY>

Luego especificá el atributo de tamaño.

<BODY BGCOLOR="#00FF00"> Algo que tenga onda </BODY>

Algo que tenga onda

Las fuentes vienen en 7 tamaños

pequeñitas	chicas	normal	extra normal	grandes	muy grandes	gritando
1	2	3	4	5	6	7

Dos cosas que quiero aclarar ahora. Primero, una ETIQUETA le dice al browser que haga algo. Un ATRIBUTO va adentro de la <ETIQUETA> y le dice al browser cómo hacerlo.
Lo segundo son las cosas predeterminadas (o por defecto). Como probablemente sabrás, el valor por defecto es el valor que el browser asume que tiene que usar si vos no le indicaste lo contrario. Un buen ejemplo es el tamaño de la fuente. El predeterminado es 3. Si no le decís nada va a ser 3. Si le hacés señas a la pantalla, va a seguir siendo 3.

Cada browser tiene una configuración de fuente por defecto, nombre de fuente, tamaño y color. Si no estuviste toqueteando esos valores, son Times New Roman 12pt (que vendría a ser 3 para nuestros propósitos) y en negro. Con los nuevos browsers podemos especificar otras fuentes que las por defecto. Como ARIAL y COMIC SANS .

<BODY BGCOLOR="#00FF00"> Algo que tenga onda </BODY>

Algo que tenga onda

La fuente sólo va a aparecer si el usuario la tiene instalada en su computadora. Dejame repetir... Si la persona que mira la página no tiene instalada la fuente que vos especificaste, entonces va a usar la fuente por defecto. Así que sé juicioso con las fuentes que usas. Arial y Comic Sans MS son bastante conocidas en entorno Windows. Tambien la Impact! . Podés cubrirte un poco especificando más de una fuente. (Sí! Podés hacer eso!). Sólo tenés que hacer uno de estos... Ta-tán!! .

Para los lentos como yo que pueden no entender todo a la primera, esto es lo que pasa: El browser busca la fuente ARIAL . Si la encuentra, la usa. Si no, busca HELVETICA . Si tampoco la encuentra, ruega por LUCIDA SANS . Si no puede encontrar ninguna, se sienta y llora un ratito. Fuera de joda, si no encuentra ninguna usa la que tiene por defecto.

Creo que es buen momento (don Nieeeembra!) para explayarnos un poquito en la sintaxis. Habrás visto que usé comillas arriba. SON IMPORTANTES. No tenés idea cuantas veces hice una página, pero estaba toda escrachada... Y enfatizo TODA escrachada por una sola comilla faltante o fuera de lugar, o un espacio faltante, o un > faltante.... Algún día no vamos a depender más de este tipo de código, pero por ahora vamos a tener que seguir siendo muy cuidadosos... Otra cosa que podés notar es que todas las etiquetas están en MAYÚSCULA. Eso es sólo una manera de resaltarlas y mantener el texto ordenado. Si hay mucho texto dando vuelta, las mayúsculas sobresalen más. Podés usar tanto  como  . Incluso podés usar  si eso es lo que hacés para excitarte...

Bueno, de vuelta a lo entretenido.
Podés cambiar el color de la fuente si querés.

<BODY BGCOLOR="#00FF00"> Algo que tenga onda </BODY>

Algo que tenga onda

Podemos, por supuesto, usar más de un ATRIBUTO en cada <ETIQUETA> ...

<BODY BGCOLOR="#00FF00"> Algo que tenga onda </BODY>

Algo que tenga onda

Quién nos para ahora?!

<BODY BGCOLOR="#00FF00"> Algo que tenga onda </BODY>

Algo que tenga onda

Siento la necesidad de repetir que las etiquetas múltiples deben ser anidadas.

<ESTO> <AQUELLO> <LO DEMAS> Hoo-ha!! </LO DEMAS> </AQUELLO> </ESTO>

No importa que etiqueta venga primero. No significa que si querés hacer algo rojo y en negrita tenés que hacer uno de los dos primero. Lo podés hacer en el orden que te divierta. Como...

<AQUELLO> <LO DEMAS> <ESTO> Hoo-ha!! </ESTO> </LO DEMAS> </AQUELLO>

La manera más rápida confundir al browser, por no mencionar a vos mismo, es superponer las etiquetas...

<ESTO> <AQUELLO> <LO DEMAS> Hoo-ha!! </ESTO> </LO DEMAS> </AQUELLO>

(no se me ocurría una manera de explicar esto, así que espero que los ejemplos repetitivos hayan hablado por mí ;-)

Una cosita más y ya terminamos esta lección. El browser tienen opciones por defecto para el color del texto, el color de los links, el color del link activo y el color de los links visitados, además del color de fondo. Los predeterminados son:

El texto es negro
Los links son azules
El link activo es rojo
Los links visitados son violetas

Podés cambiar estos colores si lo necesitas (fijate que dije si lo necesitas ). El mundo entero se acostumbró a los links azules. Para que confundir al mundo? ;-)
Podés cambiar estos colores para todo el documento en la etiqueta <BODY>.

<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000" > Algo que tenga onda </BODY>

Algo que tenga onda

Ya sé que todavía no tratamos cómo hacer links, así que la información no va a estar arriba, por más que mires. Esto es simplemente para mostrarte cómo cambiarlo, cuando aprendamos a hacer links, ok?
    Se ve que el fondo es negro ahora, y el texto es amarillo.
     Los links son rojos
     Los links visitados son rojo oscuro
     Y los links activos son verdes.

Ahí está! Ahora sabés casi todo acerca de como manipular el texto en tu documento. Ahora podés hacer Letras rojas y grandes o letras chiquitas y en negrita . Podés usar otras fuentes , o texto mono-espaciado .

Inclusive podés hacer un sube-y-baja
El código para el sube-y-baja está acá si lo querés ver.

Antes de que salgan todos corriendo al recreo, hay una cosita más que quiero que sepas. Podés ver el código HTML de cualquier página que estés viendo en tu browser, eligiendo View/Document Source (o algo así, pero todos los browsers tienen esta habilidad). Así que si mientras surfeas en la WEB te encontrás con una linda paginita y pensás "Cómo recarajos hicieron esto?", tenés la respuesta a un par de clicks...

<--VOLVER SEGUIR-->

Así que querés hacer una Página WEB!
Lecciones Intro - 1 - 2 - 3 - 4 - 5 - 6
Principiantes	Tutorial de Tablas	Tutorial de Frames

CERRAR