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

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

Hemos cubierto un montón hasta ahora. Manipular fuentes y texto, imagenes, links. Para lo básico, no queda mucho más de que hablar.
Creo que voy a tomarme un minuto para hablar de la resolución de la pantalla. Yo trabajo en una pantalla de 800 pixels por 600 pixels. Esta es la resolución más usada, pero hay varios que usan 1024x768 y algunos que todavía usan 640x480. Probablemente hay algunos por ahí que usan otras cosas, incluso. Y a mí que me soba, dirás vos? Tiene mucho que ver con la forma en que los demás van a ver tu página. Fijate una muestra de una página, en las 3 resoluciones más usadas.


640×480	800×600	1024×768

Siempre es una muy buena idea chequear tu página en otras resoluciones. Tu hermosísimo y cuidadosamente planeado diseño puede ser destrozado por una resolución distinta a la tuya. Ver tu página a varias resoluciones te puede dar desagradables sorpresas...

Ahora veamos algunos formatos de texto que nos quedaron en el tintero. El primero es <BLOCKQUOTE> . En la mayoría de los browsers, esto "tira" de los dos márgenes laterales.(no sé si es la mejor terminología, pero si me entendiste, entonces está bastante bien... Si no te gustó mi uso del idioma, se reciben críticas en jajaja@nomeimporta.com )

<BODY BGCOLOR="#00FF00"> <BLOCKQUOTE> Escucha, oh Hijo de Albión, las palabras proféticas: Laméntate y entristécete, porque el dolor asuela Albión en tres frentes. El Rey de Oro tropezará en su reino con la Roca de la Contienda. El Gusano de ardiente aliento reclamará el trono de Prydain; Llogres se quedará sin señor, pero Caledón se salvará. La Bandada de Cuervos acudirá en tropel a sus umbrías cañadas, y el graznido será su canción. </BLOCKQUOTE> </BODY>

Escucha, oh Hijo de Albión, las palabras proféticas:
Laméntate y entristécete, porque el dolor asuela Albión en tres frentes. El Rey de Oro tropezará en su reino con la Roca de la Contienda. El Gusano de ardiente aliento reclamará el trono de Prydain; Llogres se quedará sin señor, pero Caledón se salvará. La Bandada de Cuervos acudirá en tropel a sus umbrías cañadas, y el graznido será su canción.

Otra herramienta útil son las listas. Las hay ordenadas, y no ordenadas.

Esta es una lista ordenada

algo
algo más
otra cosa
otra cosa más

Esta es una lista no ordenada

no sé
sigo sin saber
todavía no se me ocurre
la verdad, ni idea

Primero, construyamos una lista no ordenada. Es asombrosamente fácil....

Empezá con esto...

<BODY BGCOLOR="#00FF00"> Lo que quiero para Navidad </BODY>

Lo que quiero para Navidad

Nota: técnicamente, todavía no empezamos a hacer una lista... Eso es sólo el encabezamiento

Agreguemos un par de etiquetas de lista no ordenada (Unordered List)

<BODY BGCOLOR="#00FF00"> Lo que quiero para Navidad <UL> </UL> </BODY>

Lo que quiero para Navidad

Agreguemos un item.

<BODY BGCOLOR="#00FF00"> Lo que quiero para Navidad <UL> <LI>un muñequito de Matrix </UL> </BODY>

Lo que quiero para Navidad

un muñequito de Matrix

Agreguemos un par más...

<BODY BGCOLOR="#00FF00"> Lo que quiero para Navidad <UL> <LI>un muñequito de Matrix <LI>una bicicleta <LI>una batería <LI>una 9 mm. <LI>una Pamela Anderson </UL> </BODY>

Lo que quiero para Navidad

un muñequito de Matrix
una bicicleta
una batería
una 9 mm.
una Pamela Anderson

Joya!! Ya hicimos nuestra primera lista!

Cómo hacer una lista ordenada? Sencillito!! Cambiamos la etiqueta <UL> por una <OL> (Ordered List)

<BODY BGCOLOR="#00FF00"> Lo que quiero para Navidad <OL> <LI>un muñequito de Matrix <LI>una bicicleta <LI>una batería <LI>una 9 mm. <LI>una Pamela Anderson </OL> </BODY>

Lo que quiero para Navidad

un muñequito de Matrix
una bicicleta
una batería
una 9 mm.
una Pamela Anderson

Otro tipo de lista, es la Definition List (traducción? Lista de definiciones ??)

CinicMan: Dícese del Gran Maestro, aquel que es ídolo de multitudes. También usado como sinónimo de hermoso, bien parecido.

Empezá con esto <BODY BGCOLOR="#00FF00"> <DL> </DL> </BODY>

Ahora agreguemos un título a la definición (Definition Title).

<BODY BGCOLOR="#00FF00"> <DL> <DT><B>CinicMan</B> </DL> </BODY>

CinicMan

Nota: las negritas las puse yo... Es opcional, funciona igual sin eso, pero me parece que queda mucho mejor así.

Ahora agreguemos un item a la definición.

<BODY BGCOLOR="#00FF00"> <DL> <DT><B>CinicMan</B> <DD>Dícese del Gran Maestro, aquel que es ídolo de multitudes. También usado como sinónimo de hermoso, bien parecido. </DL> </BODY>

CinicMan: Dícese del Gran Maestro, aquel que es ídolo de multitudes. También usado como sinónimo de hermoso, bien parecido.

Otra cosita que vas a usar seguido es la línea horizontal (Horizontal Rule).

<BODY BGCOLOR="#00FF00"> <HR> </BODY>

Tenemos un par de atributos que podemos incluir.... Como el ancho (width)

<BODY BGCOLOR="#00FF00"> <HR WIDTH=20%> <HR WIDTH=50%> <HR WIDTH=100%> <HR WIDTH=20> <HR WIDTH=50> <HR WIDTH=100> </BODY>

Este es bastante transparente en su funcionamiento...

<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=40% ALIGN=LEFT > <HR WIDTH=40% ALIGN=RIGHT > <HR WIDTH=40% ALIGN=CENTER > </BODY>

Podemos controlar el grosor...

<BODY BGCOLOR="#00FF00"> <HR WIDTH=60% SIZE=1 > <HR WIDTH=60% SIZE=3 > <HR WIDTH=60% SIZE=8 > <HR WIDTH=60% SIZE=15 > </BODY>

Y podemos hacer líneas sólidas...

<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% SIZE=1 NOSHADE > <HR WIDTH=60% SIZE=3 NOSHADE > <HR WIDTH=60% SIZE=8 NOSHADE > <HR WIDTH=60% SIZE=15 NOSHADE > </BODY>

Te acordás que te dije que el browser no reconoce el formato del texto, sino que te lo muestra en un solo chorro? Algo así...

<BODY BGCOLOR="#00FF00">

                 \|/
                (@ @)
     +----oOO----(_)-----------+
     |         CinicMan        |
     |          es un          |
     |          maestro        |
     +-----------------oOO-----+
               |__|__|
                || ||
               ooO Ooo

</BODY>

\|/ (@ @) +----oOO----(_)-----------+ | CinicMan | | es un | | maestro | +-----------------oOO-----+ |__|__| || || ooO Ooo

Bueno, con la etiqueta the <PRE> (preformato), le ponemos freno a ese problema, y le decimos al browser que muestre todo como está escrito .

<BODY BGCOLOR="#00FF00">

<PRE>
                 \|/
                (@ @)
     +----oOO----(_)-----------+
     |         CinicMan        |
     |          es un          |
     |          maestro        |
     +-----------------oOO-----+
               |__|__|
                || ||
               ooO Ooo

</PRE> </BODY>

                 \|/
                (@ @)
     +----oOO----(_)-----------+
     |         CinicMan        |
     |          es un          |
     |          maestro        |
     +-----------------oOO-----+
               |__|__|
                || ||
               ooO Ooo

Nota: la letra es mono-espaciada .

La última etiqueta que vamos a explicar es la de comentario.

<BODY BGCOLOR="#00FF00">  Esto no es un comentario. Un comentario puede ir en cualquier parte del documento, y tu browser va a ignorar cualquier cosa que pongas entre el comienzo  y el fin del mismo. Podés insertar mensajes secretos  , notas para ubicarte a vos mismo mientras haces una página  , incluso mensajes de ayuda para alguien que pueda querer ver  cómo hiciste tu página...

Esto no es un comentario. Un comentario puede ir en cualquier parte del documento, y tu browser va a ignorar cualquier cosa que pongas entre el comienzo y el fin del mismo. Podés insertar mensajes secretos , notas para ubicarte a vos mismo mientras haces una página , incluso mensajes de ayuda para alguien que pueda querer ver cómo hiciste tu página...

Sólo para que quede todo absolutamente claro, el comentario empieza con  Podés (usualmente) poner otras etiquetas html adentro de un comentario. De todas maneras yo no probaría, porque sabe Diós que aberraciones puede hacer algún browser de esos raros que andan sueltos...

Bueno, con eso terminamos!! Ya sabés todas las etiquetas básicas para crear tu propia página! No hay más etiquetas que las que expliqué?? Claro que síííí!!! Hay un montón más. Pero dormí tranquilo, sabés alrededor del 70% de las herramientas que vas a necesitar para hacer tu página. Una vez que practiques un poco con lo recién aprendido, podés seguir con mis otros tutoriales un poquito más avanzados: Tutorial de Tablas, Tutorial de Frames y el Tutorial de Forms. Ellos te van a mostrar el 27% que te falta saber. Y el 3% que queda? En su mayoría son etiquetas tan específicas, que casi no las vas a usar. O, etiquetas cuyo uso puede ser reemplazado por otras.

Al comienzo de este tutorial te di mis opiniones sobre los editores HTML. En mi opinión los mejores no son esos editores grandes, famosos y "mágicos". Esos que dicen que no necesitas saber una palabra de HTML para hacer tu propia página. El hecho es que las páginas hechas con estos editores parecen hechas por personas que no saben nada de HTML ;-) No sólamente eso... Cuando se te presente algún problema (que se te va a presentar, no lo dudes), una persona que sepa HTML es probable que lo resuelva mucho más rapido que alguien que estuvo dependiendo de uno de esos perpetradores de páginas, como el FrontPage.

Los autores más experimentados usan editores de HTML basados en texto . Lo que hacen estos editores es abrirte automáticamente una serie de menúes para escribir las etiquetas cómodamente con un par de clicks. Te evitan tener que tipear los códigos de colores, LEFT, RIGHT, CENTER y otras cosas. Hay muchos y la mayoría son gratis. Acá tenés una lista de algunos . Tienen en común que NECESITAS saber algo de HTML. Van a hacer tu tipeo fácil. No lo van a intentar hacer por vos.
Qué uso yo? El CuteHTML casi exclusivamente. De todas maneras, si querés y tenés alguno de esos editores mágicos de los que hablé, los podés usar como herramienta para probar, y para sacar cosas de sus (a veces) extensas librerías. Eso sí, después controlá el código que hacen esos programas, y te vas a dar cuentar porqué opino como opino, y porque hablo tan mal de ellos.

Una vez que hayas creado tus páginas, tenés que subirlas a algún servidor para que el resto del mundo las vea. Acá tenés un par de sugerencias sobre como hacerlo.

<--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