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

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

Creo que vamos a empezar aprendiendo algo acerca de la forma en que el browser funciona.
Primero un ejemplo...

<BODY BGCOLOR="#00FF00"> Algo que tenga onda como un electrocardiograma! </BODY>

Algo que tenga onda como un electrocardiograma!

<BODY BGCOLOR="#00FF00"> Eh!!! Qué está pasando acá </BODY>

Eh!!! Qué está pasando acá

Tu browser no reconoce el formato. Si no le decís lo contrario, va a mostrar todos los caracteres en un sólo chorro. Si querés empezar una nueva línea, tenés que usar un quiebre de línea. (BReak line)

<BODY BGCOLOR="#00FF00"> Eh!!! Qué está pasando acá </BODY>

Eh!!!
Qué
está
pasando
acá

  básicamente le dice al browser - empezá una nueva línea. Similar a   es  . Este denota el comienzo de un nuevo "párrafo" (paragraph) y casi siempre tiene el efecto de bajar una línea, y dejar una de espacio en el medio.

<BODY BGCOLOR="#00FF00"> Eh!!! Qué está pasando acá </BODY>

Eh!!!

Qué

está

pasando

acá

Algo más acerca de estos quiebres de línea... no podés usarlos más de una vez (consecutivamente). En otras palabras, escribiendo  muchas veces no te va a dar un montón de líneas vacías, usualmente sólo va a dejar una. Cómo podés agregar muchas líneas vacías? Te lo digo en un minuto.

Primero mirá esto:

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

Algo que tenga onda

El browser no va a reconocer más de un espacio. Sé que a primera vista parece bastante estúpido que sea así, pero realmente es mejor tenerlo de esta forma. Te da control absoluto sobre la apariencia del documento.

Hay un pedacito de código que significa "espacio" para el browser ->  

Probá esto...

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

Algo que tenga onda

La & significa el principio de algún caracter especial, el ; significa el fin de ese caracter y las letras del medio son una especie de abreviatura del caracter. Hay varios de estos caracteres especiales. Acá tenés seis más. (Nota: para evitar sobresaltos, escribilos siempre en minúsculas)

  espacio sin retorno de línea( non-breaking space)
< menor que(< - less-than symbol)
> mayor que(> - greater-than symbol)
& símbolo compañia(& - ampersand)
" comillas(" - quotation mark)
 menos( soft hyphen)

No necesitas usar estos códigos todo el tiempo, sólo cuando el tipeo de ese caracter pueda confundir al browser. Cómo sabemos cuando pasa esto? No se me ocurre ninguna regla fija y rápida. Te vas a dar cuenta con la práctica y con un par de desastres ;-)

Por cierto, algunos conceptos sobre errores & desastres. Hay quienes piensan que los errores son malos. Tienen miedo de probar cualquier cosa por miedo a hacer quilombo. Cometer el mismo error una y otra vez puede ser un poco tonto, pero especialmente mientras aprendes, no le tengas miedo para nada a los errores. Son tus nuevos y pequeños amiguitos... Inclusive son fieles, siempre te van a seguir a donde vayas :)
Si no estás arruinando las cosas un poquito, entonces no estás aprendiendo, y probablemente, no estás haciendo nada de nada. Recordá, los errores son parte del proceso de aprendizaje!

Ok, suficiente parloteo pedagógico. Hay otros caracteres especiales . Probablemente no los llegues a usar, pero de todas maneras quiero que sepas que están ahí.

Bueno, no nos vayamos por las ramas. El browser va a mostrar todo el texto en un sólo chorro, si no le especificamos lo contrario con quiebres de línea, etc. Va a reducir toda área vacía a un único espacio. Si querés más espacios, tenés que usar el código pertinente(   ). Hay un detallecito que no cubrimos...Si apretás Enter mientras tipeas, el browser lo va a interpretar como un espacio... excepto que ya haya un espacio, en cuyo caso lo ignora.

Un ejemplito rápido más.

<BODY BGCOLOR="#00FF00"> Algo que tenga onda como un electrocardiograma! </BODY>

Algo
que
tenga
onda
como
un
electrocardiograma!

Suficientemente claro?? Eso espero. Ese fue mi mejor (y último) intento.

La que viene es una etiqueta muy útil. Es bastante explicativa por si misma.

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

Algo que tenga onda

Podés centrar una sola palabra, o la página entera. Todo lo que metas entre las etiquetas <CENTER> va a ir centrado.

Podés especificar la alineación de todo el párrafo adentro de la etiqueta de éste.

<BODY BGCOLOR="#00FF00"> Se mueve para acá, se mueve para allá, esta es la banda más loca que hay

Se mueve para acá,

se mueve para allá,

esta es la banda más loca que hay!

Todo lo que pongas en el párrafo va a ser alineado de acuerdo al atributo que le indiques. Si no indicas ningun atributo, asume por defecto LEFT .

Casi me olvido! Te iba a mostrar como hacer múltiples líneas en blanco. Es en realidad muy simple. Meté un espacio en blanco con un quiebre de línea por cada línea en blanco que quieras.

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

Algo que tenga

onda

Ahora vamos a meter imágenes en nuestra página. Vamos a usar esta. Otra vez, hacé click derecho para guardarla desde esta página en la misma carpeta donde guardas tu página.

Especificamos una imagen con la etiqueta <IMG> (image).

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

Ahora especifiquemos qué imagen (SRC o fuente) y con qué tamaño (WIDTH, HEIGHT o ancho y alto).

<BODY BGCOLOR="#00FF00"> <IMG SRC="glorioso.jpg" WIDTH=100 HEIGHT=56 > </BODY>

Dejame que te aclare que la fuente (SRC), no sólo especifica qué imagen, sino también dónde se encuentra esa imagen. La fuente anterior, "glorioso.jpg", significa que el browser buscará dicha imagen en la misma carpeta(o directorio) en que la página (documento html) está guardada. Para los newbies, abajo hay un par de diagramas bastante claros...


		`SRC="glorioso.jpg"` significa que la imagen está en la misma carpeta que el documento html que la invoca
		`SRC="imagenes/glorioso.jpg"` significa que la imagen está en una carpeta más abajo que el documento que la invoca. Esto puede ir hacia abajo las veces necesarias.
		`SRC="../glorioso.jpg"` significa que la imagen está en una carpeta superior a el documento html que la invoca.
		`SRC="../../glorioso.jpg"` significa que la imagen está dos carpetas por arriba que el documento html que la invoca.
		`SRC="../imagenes/glorioso.jpg"` significa que la imagen está en una carpeta para arriba, y en otra diferente hacia abajo que el doc... ya te hiciste a la idea, no?
		`SRC="../../../otros/imagenes/glorioso.jpg"` ni siquiera voy a intentar poner esto en palabras... Espero que hayas agarrado la idea.

Hay otra forma de hacer esto. Todas las referencias se pueden indicar con su correspodiente URL completo- Por ejemplo: http://www.ejemplo.com/muchascosas/otros/imagenes/glorioso.jpg

Porqué es mucho más conveniente usar referencias(URLs) relativas y no absolutas ?? Porque así podés hacer tu sitio localemente, offline, y todavía va a funcionar. Cuando tus páginas estén listas, sólamente tenés que subir todo el toco al servidor, y todo va a seguir joyita. Como bonustrack, es más fácil para el browser encontrar las imagenes, y tu página va a cargar más rápido. Hay alguna razón para usar URLs absolutas? Por supuesto, si la imagen reside en otro servidor distinto.

* FAQ: Ni bien subo mis cosas a la WEB, todos los links a mis imágenes dejan de funcionar. He usado URLs relativos y definitivamente subí todo porque lo hice mediante un servidor de FTP. Me están discriminando?

Suena a un problema de MAYÚSCULAS y minúsculas. Para un sistema basado en Windows, GLORIOSO.jpg es los mismo que gLOriOSO.jpG y que glorioso.jpg. Poné esa imagen en un servidor (generalmente se manejan con Unix) y se convierte en 3 nombres de archivos diferentes. Le estás pidiendo que busque Glorioso.JPG, pero lo único que puede encontrar es glorioso.jpg. Solución? Usá siempre todos los nombres completamente en minúsculas. Hacé de esto un hábito, y nunca tendrás este tipo de problemas. Otro hábito práctico de adoptar es el de evitar usar espacios en los nombres de archivos (sustituilos por un _). Ahh, y evita caracteres extraños, como los acentos, eñes, &, ?, ¿, etc.

Otro atributo de la etiqueta IMG que merece ser mencionado es el ALT ...

<IMG SRC="glorioso.jpg" WIDTH=100 HEIGHT=56 ALT="El glorioso" >

ALT es algo así como una sustitución que se hace cuando el browser (por cualquier motivo) no puede cargar esa imagen. Hay gente que configura su browser para que no baje ninguna imagen, así navegan más rápido. En esos casos, este atributo puede ser muy importante para tu visitante.

Algo muy copado que tendrías que saber sobre las imágenes y su tamaño.

Probá esto...

<BODY BGCOLOR="#00FF00"> <IMG SRC="glorioso.jpg" > </BODY>

Como te habrás dado cuenta, el browser "adivina" cuan grande es la imagen por sí solito. Para qué calentarse en darle las dimensiones entonces? Te ahorro explicaciones técnicas: porque hace que tu página carque más rápido ya que le facilitas las cosas a tu browser.

Qué es lo copado entonces? Fijate en esto...

<BODY BGCOLOR="#00FF00"> <IMG SRC="glorioso.jpg" WIDTH=250 HEIGHT=250 > </BODY>

<BODY BGCOLOR="#00FF00"> <IMG SRC="glorioso.jpg" WIDTH=40 HEIGHT=150 > </BODY>

Podés indicarle las dimensiones que se te ocurran, y sobreescribir lar dimensiones reales. Todavía dudando si puede ser copado esto? Bueno, mirá este puntito rojo -> <-

Lo viste? No, porque no puse nada (pero te hice mirar fijo, eh? Ayy, que me divierto barato! ;-) Ahora en serio, acá está el puntito -> <- Es un cuadradito miserable de 1x1. Mirá lo que puedo hacer con este gurrumín...

<BODY BGCOLOR="#00FF00"> <IMG SRC="puntito.gif" WIDTH=510 HEIGHT=1 > <IMG SRC="puntito.gif" WIDTH=510 HEIGHT=2 > <IMG SRC="puntito.gif" WIDTH=510 HEIGHT=5 > <CENTER> <IMG SRC="puntito.gif" WIDTH=2 HEIGHT=200 > </CENTER> </BODY>

Para ser un punto tan chiquito, hace mucho ruido, no?

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