Você está na página 1de 48

As que quieres hacer una pgina Web!

Leccin 1

Te gustar saber que aprender a hacer esto es realmente muy simple. La idea bsica es sta... Una pgina web no es ms que un archivo, un archivo HTML para ser exacto. Se llama HTML porque los documentos que componen las pginas web tienen como extensin .html o .htm. HTML es Hyper Text Mark-up Language. (Lenguaje de Marcado de HyperTexto). Si ni siquiera conoces este tipo de extensin, realmente ests muy verde!! (date un tour rpido para aclarar algunos de estos conceptos). Empecemos. Primero, si tienes uno de esos bonitos editores de HTML y ests pensando en usarlo al mismo tiempo que este tutorial... olvdalo. La peor manera de aprender es usar una de esas cosas, por la sencilla razn de que no aprenders los fundamentos del asunto. Cuando se presente un problema (y se presentarn, no lo dudes) slo podrs resolverlo si has aprendido la mecnica del HTML. La herramienta que necesitas es un navegador para ver tus pginas Web. Netscape Navigator es uno de los normales. Aunque ltimamente Internet Explorer (que tambin es un navegador) se est imponiendo. Adems como supongo que sers usuario de Win9x, Internet Explorer est integrado en tu sistema.

* PREGUNTA: Qu es Bloc de Notas y dnde puedo encontrarlo? R: El Bloc de Notas es el editor de texto por defecto de Windows. En la mayora de los sistemas de Win9x, haz clic en Inicio, Programas y Accesorios. Aparecer un pequeo bloc de notas azul. Para nuestros fines, CUALQUIER editor de texto servir perfectamente. Puedes ir a cualquier sitio donde haya shareware/freeware y elegir el editor que te parezca, muchos de ellos gratis. Pero por ahora, Notepad estar bien. Una cosa que debes evitar es utilizar un procesador de texto para crear tus archivos HTML (en Office, Word se instala como editor predeterminado de pginas Web). En primer lugar porque raramente estn bien preparados para este tipo de archivos, y en segundo lugar, porque a menos que sepas bien lo que ests haciendo, tu archivo no se grabar como un archivo html de texto simple; probablemente lo har con el formato propio del procesador de textos, que incluye caracteres especficos de control, y no funcionar en el navegador. No te preocupes si no entiendes bien lo anterior. Un poco

ms adelante te explicar claramente lo que debes hacer. Y una cosa ms, por lo menos mientras ests aprendiendo... deja el WebComposer, no toques Front Page, olvdate del SperCompiladorWeb. Utiliza el Bloc de Notas.

Como segunda cuestin en esta introduccin (prometo que las lecciones sern ms divertidas), quiero hacer hincapi en una cuestin fundamental: El cdigo HTML est en ingls, por lo que si no tienes ni idea de este idioma puede que haya expresiones que te resulten extraas. Para facilitar la comprensin de aquellos que estn pez en ingls cada vez que aparece una sentencia nueva la he mostrado de la siguiente forma:
HEAD (ENCABEZAMIENTO)

es decir la sentencia y su traduccin Aunque esta estructura se mantendr a lo largo y ancho del tutorial, la traduccin slo aparecer la primera vez que se vea la sentencia, nunca posteriormente. Esto se ha hecho para que os familiaricis con los trminos del cdigo, ya que tendris que usarlos en ingls.

As que quieres hacer una pgina Web!

Leccin 1

Esto va a ser fcil, abre el Bloc de Notas y empieza con esto...


<HTML> </HTML>

Cada una de estas cosas se llama sentencia. Hay sentencias de inicio y de cierre. Para hacer una sentencia de cierre slo tienes que aadir esto: / a la sentencia de inicio. Muchas sentencias, pero no todas, tienen sentencia de cierre. Piensa que las sentencias le hablan al navegador, o mejor an, que le dan instrucciones. Lo que le has dicho al navegador es (ms o menos): esto es el inicio de un documento HTML (<HTML>) y esto es el final de un documento HTML (</HTML>). Ahora necesitamos poner algo en medio.

Cada documento HTML necesita un par de sentencias HEAD (ENCABEZAMIENTO)


<HTML> <HEAD> </HEAD> </HTML>

Lo nico que nos interesa ahora mismo de las sentencias HEAD son las sentencias TITLE (TTULO).
<HTML> <HEAD> <TITLE></TITLE> </HEAD> </HTML>

Y el grueso de la pgina que ir entre sentencias BODY (CUERPO).


<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML>

Oh, y una cosa ms, ponle un ttulo al documento, y pon algo en el cuerpo.
<HTML> <HEAD> <TITLE>Mi primera paginilla</TITLE> </HEAD> <BODY> Hola, Jose Angel! </BODY> </HTML>

Ahora grbalo, no como documento de texto, sino como documento html. Grbalo como Pgina1.html en una nueva carpeta. Si no ests muy seguro de cmo hacer esto... yo te lo explico. En la ventana del Bloc de Notas haz clic en Archivo, y despus en Guardar como. Se abrir un cuadro de dilogo. Haz una nueva carpeta haciendo clic en un icono como ste -> Pnle el nombre que quieras, o djalo como Nueva carpeta. Ahora haz doble clic en esta carpeta para abrirla. En la parte inferior del cuadro de dilogo, donde pone Nombre de archivo escribe Pgina1.html (o el_nombre_que_quieras.html). Y debajo, donde pone Guardar como archivos de tipo: asegrate de escoger la opcin Todos los archivos(*.*). Pulsa Aceptar y... Felicidades! Eres el orgulloso pap (o mam) de una pgina web completamente funcional. Puedes subirla a un servidor y el mundo entero podr ver tu creacin. Si ests usando Netscape, el archivo debe parecerse a esto...

(no hay problema si el icono es un poco diferente)

Ahora puedes hacer doble click en el icono y ver los resultados de tu trabajo. Una cuestin ms que es importante. Cada vez que hagas una modificacin en tu documento HTML (en el Bloc de Notas), necesitas grabar el documento (en Archivo, Guardar), y despus pinchar en el botn Actualizar del navegador para poder ver los cambios. Esto es as porque el navegador lee el documento directamente del disco duro, no de la memoria. Si haces cambios y no grabas, lo que vers en el navegador no tendr nada que ver con el contenido actual del documento HTML. No te preocupes si no entiendes bien la mecnica en un principio. En menos de 10 minutos lo tendrs perfectamente dominado. La mejor manera de usar este tutorial es arrancar el Bloc de Notas, y arrancar el navegador dos veces. Una ventana del navegador contendr el tutorial y la otra tu nueva pgina. Lo nico que tienes que hacer es saltar de una a otra entre las tres ventanas. Como doy por supuesto que ya tienes arrancado el navegador (de otra forma no estaras leyendo esto), abre una segunda ventana para ver el resultado de tu trabajo. Puedes hacerlo de tres formas - 1) Busca el icono del archivo html que acabas de hacer (pgina1.html) y haz doble clic en l (en general debes encontrarlo dentro de la carpeta C:\WebTutor\makapage o algo parecido, dependiendo de dnde hayas instalado el tutorial). - 2) En el navegador, haz clic en Archivo, Abrir, Examinar y busca el archivo en cuestin: pgina1.html. - 3) Pincha en Inicio, Buscar, Archivos o Carpetas,, introduce pgina1.html en Nombre y pincha en Buscar ahora. Cuando el archivo aparezca, pincha dos veces en l y el navegador se arrancar automticamente. El siguiente paso es poner algo ms o menos interesante en la pgina. Dos cosas antes de entrar en la leccin 2. Una, lo que has hecho es el esqueleto de un documento HTML . Esto es la mnima informacin requerida para un documento web, y todos los documentos web deben contener estos componentes bsicos. Y dos, el ttulo del documento es lo que aparece en la barra superior de la ventana del Navegador.

As que quieres hacer una pgina Web!

Leccin 2

Para hacer las cosas ms claras slo mantendr las sentencias <BODY>. Voy a omitir <HTML>, <HEAD> & <TITLE>. Desde luego, mantn estas sentencias en tu documento.
<BODY> </BODY>

Escribe Algo realmente bonito.


<BODY> Algo realmente bonito </BODY>

Algo realmente bonito Cuando hagas un cambio en el documento, grbalo. Es decir, en el Bloc de Notas, utiliza Archivo, Guardar , y despus pincha en el botn Actualizar de tu navegador. Algunas veces pinchar en botn Actualizar no har que el documento cambie... en ese caso pincha en Actualizar, pulsando la tecla Maysculas. La primera cosa que vamos a aprender es cmo cambiar los colores del fondo.
<BODY BGCOLOR="#CCFFCC"> Algo realmente bonito </BODY>

Algo realmente bonito


CCFFCC

es la palabra en la jerga del ordenador para verde claro. Aqu hay unos pocos ms.

En el modo de 256 colores, todas las imgenes se reducen a estos colores. Adicionalmente si el color de fondo especificado no es uno de estos 256, el navegador elegir el color que ms se le parezca. Aunque en estos momentos no es muy importante entender cmo los navegadores y los colores trabajan juntos, tal vez te interese echarle un vistazo a los famossimos 216 colores de Netscape. Puedes especificar una imagen de fondo en lugar de un color. (Nota, la imagen debe estar en la misma carpeta que el archivo HTML. Se ver algo ms de esto ms abajo.)
<BODY BACKGROUND="ondas.gif"> Algo realmente bonito </BODY>

Aqu est la imagen de fondo

Para que la imagen pueda verse, es evidente que el navegador debe poder encontrarla. Por ahora, mantendremos las imgenes en la misma carpeta que el documento HTML (pgina1.html). La forma ms fcil de hacer esto es hacer clic con el botn derecho del ratn sobre la imagen superior y elegir Guardar Imagen como (o la variante que sea). Ahora busca la carpeta donde pusiste el documento pgina1.html y guarda la imagen all. Ms adelante veremos todo esto con mucho ms detalle. Problablemente es obvio que la imagen est repetida varias veces. Si usas otro tipo de imagen puedes conseguir un efecto como ste...
<BODY BACKGROUND="bluebar.gif"> Algo realmente bonito </BODY>

Esta es la imagen de fondo


(Mide 1700x4, pero aqu est comprimida a 560x4 para que quepa en cualquier pantalla)

PREGUNTA: He visto pginas en las que la imagen de fondo est fija, y el resto se desliza sobre esta imagen. Cmo puedo hacer eso? R: Simple... aade BGPROPERTIES=FIXED a la sentencia BODY...
<BODY BACKGROUND="mifondo.gif" BGPROPERTIES=FIXED>

Ten en cuenta que este truco es especfico de Internet Explorer. Es decir, slo la gente que use Internet Explorer o navegadores basados en l podrn verla. Aqu hay un ejemplo.

As que quieres hacer una pgina Web!

Leccin 3

Volvamos a la vieja pantalla


<BODY> Algo realmente bonito </BODY>

Algo realmente bonito Podemos hacer que la letra sea negrita.


<BODY>

Algo realmente <B>bonito</B> </BODY>

Algo realemente bonito Lo que hacemos (ms o menos) es decirle al navegador: cuando veas una <B> empieza a hacer la letra en negrita, y cuando veas una </B> deja de hacer las letras en negrita. Lo mismo se aplica a la cursiva o itlica...
<BODY> Algo <I>realmente</I> <B>bonito</B> </BODY>

Algo realmente bonito ...y al subrayado.


<BODY> <U>Algo</U> <I>realmente</I> <B>bonito</B> </BODY>

Algo realmente bonito Volvamos al principio.


<BODY> Algo realmente bonito </BODY>

Algo realmente bonito Tambin podemos usar sentencias combinadas si queremos.


<BODY> Algo realmente <I><B>bonito</B></I> </BODY>

Algo realmente bonito Esto es un ejemplo de sentencias anidadas. Si vas a usar un par de sentencias combinadas (como probablemente has hecho hace un momento), procura no confundir al navegador, y anida las sentencias sin solaparlas. Djame explicarlo...
<ESTO><AQUELLO></ESTO></AQUELLO> <ESTO><AQUELLO></AQUELLO></ESTO>

Sentencias solapadas.... mal hecho Sentencias anidadas.... bien hecho

As que quieres hacer una pgina Web!

Leccin 4
Un tipo de texto muy til es la fuente de espacio uniforme, o Texto de Mquina de Escribir.
<BODY> <TT>Algo realmente bonito</TT> </BODY>

Algo realmente bonito

Cada letra utiliza la misma cantidad de espacio horizontal... iiiiiiiiii oooooooooo mmmmmmmmmm
iiiiiiiiii oooooooooo mmmmmmmmmm

Este es el tipo normal ->

Este es el tipo de espacio uniforme ->

Podemos cambiar el tam

ao de la fuente. Es muy sencillo!.

Primero aade las sentencias <FONT> (FUENTE) ...


<BODY> Algo realmente <FONT>bonito</FONT>

</BODY>

Ahora especifica un atributo SIZE (TAMAO) .


<BODY> Algo realmente <FONT SIZE="6">bonito</FONT> </BODY>

Algo realmente

bonito
medio normal grande 3 4 5

Las fuentes vienen en 7 tamaos:

minsculo

pequeo

y realmente
6

enorme!
7

Dos cosas que quiero discutir ahora. Primero, una sentencia o <TAG> le dice al navegador que haga algo. Un ATRIBUTO va dentro de la sentencia o <TAG> y le dice al navegador cmo hacerlo. La sentencia <FONT> le dice al navegador que debe utilizar un tipo de fuente, el atributo SIZE le dice que debe utilizar un tamao determinado. <FONT SIZE="5"> le dice al navegador que utilice el tamao de fuente 5. La segunda cosa es acerca de los valores por defecto. Como probablemente sabrs, el valor por defecto es un valor que el navegador asume si no se le dice otra cosa. Un buen ejemplo es el tamao de la fuente. El valor por defecto es 3 (habitualmente). Si t no lo dices nada ser 3. Si le chillas al ordenador ser 3. Cada navegador tiene una fuente por defecto, que incluye el nombre de la fuente (tambin llamado tipo), tamao y color. A menos que hayas estado tocando donde no debes y lo hayas liado probablemente ser Times New Roman 12pt (que se traduce como 3 para nosotros) en negro. Por supuesto podemos especificar otros nombres de fuentes. Como ARIAL y COMIC SANS.

<BODY> Algo realmente <FONT FACE="ARIAL">bonito</FONT> </BODY>

Algo realmente bonito La fuente slo se mostrar correctamente si est instalada en tu ordenador. Repito... Si la persona que est viendo la pgina no tiene instalada en su ordenador la fuente especificada, slo ver la fuente por defecto. As que procura ser prudente en el uso de las fuentes. Arial y Comic Sans MS son omnipresentes en Windows. Tambin lo es . Puedes ampliar tus opciones especificando ms de una fuente (S! puedes hacerlo!). Prueba esto... <FONT FACE="ARIAL,

Impact!

HELVETICA, LUCIDA SANS">Otras fuentes ocultas</FONT>.

Para cabezas cuadradas como yo que no entienden bien lo que sucede, esto es lo pasa: El navegador busca ARIAL. Si la encuentra, la utiliza. Si no, busca HELVETICA. Si tampoco la encuentra, busca LUCIDA SANS. Y si tampoco encuentra sta ltima usa la fuente por defecto. Qu fuentes son las ms habituales? Estas: Andale Mono Arial Arial Black Comic Sans MS Courier New Georgia Impact Times Rew Roman Trebuchet MS Verdana Para ver cmo se muestran las fuentes realmente en tu navegador, tal vez quieras utilizar el Visor de Fuentes Handy Dandy.

As que quieres hacer una pgina Web!

Leccin 5

Creo que es un buen momento para decir algo acerca de la sintaxis. Habrs notado que uso comillas en varios lugares, y esto es importante. Dondequiera que haya un ATRIBUTO="valor", el valor debe estar entre comillas. Aunque las ltimas versiones de los navegadores soportan atributos sin entrecomillar, algunos navegadores no los soportan, lo que dar lugar a errores. Adems debes procurar ser ordenado, y te dir por qu. No te puedes hacer una idea de cantas veces he hecho una pgina y todo se ha liado... Y quiero decir que todo estaba mal porque haba olvidado poner unas simples comillas o un espacio, o haba olvidado un signo >. Algn da no necesitaremos este tipo de cdigo, pero mientras tanto debemos ser cuidadosos. Otra cuestin es mi uso de las LETRAS MAYSCULAS para muchas cosas. Esto es slo una preferencia personal. Encuentro ms fcil visualizar las sentencias cuando uso letras maysculas. Puedes utilizar <font> en lugar de <FONT>. Tambin puedes usar <fOnT> si eso es lo que te hace feliz. El HTML es completamente INsensitivo a las maysculas o las minsculas dentro de las sentencias. Bien, volvamos al divertido trabajo... Tambin puedes cambiar el color de la fuente.
<BODY> Algo realmente <FONT COLOR="#FF0000">bonito</FONT> </BODY>

Algo realmente bonito Tambin podemos, por supuesto, utilizar ms de un ATRIBUTO en una sentencia <FONT>...
<BODY> Algo realmente <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">bonito</FONT> </BODY>

Algo realmente

bonito

Vaya, esto empieza a cambiar!


<BODY BGCOLOR="#FFFFFF"> Algo realmente <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">bonito</FONT></B></I></U> </BODY>

Algo realmente

bonito
<TAG3><TAG2><TAG1>Hola!</TAG1></TAG2></TAG3>

Creo que es necesario apuntar otra vez que las sentencias mltiples deben estar anidadas.

No importa qu sentencia vaya primero. Es decir, si quieres hacer una fuente roja y en negrita no tienes que especificar obligatoriamente el color primero y el tipo despus. Puedes hacerlo en el orden que quieras. Como ahora...
<TAG2><TAG1><TAG3>Hola!</TAG3></TAG1></TAG2>

La forma ms rpida de confundir al navegador, y no digamos a t mismo, es solapar las sentencias...


<TAG3><TAG2><TAG1>Hola!</TAG3></TAG1></TAG2>

(No veo una forma ms fcil de explicarlo as que espero que el uso de los colores en los ejemplos lo aclare lo suficiente.)

As que quieres hacer una pgina Web!

Leccin 6

Otras sentencias muy tiles son los encabezamientos. Aunque estn un poco obsoletos en las pginas actuales, tan llenas de grficos, son una buena herramienta que deberas tener en cuenta. Vienen en tamaos del 1-6.
<H1>Algo <H2>Algo <H3>Algo <H4>Algo <H5>Algo <H6>Algo realmente realmente realmente realmente realmente realmente bonito<H1> bonito<H2> bonito<H3> bonito<H4> bonito<H5> bonito<H6>

Algo realmente bonito


Algo realmente bonito
Algo realmente bonito
Algo realmente bonito
Algo realmente bonito
Algo realmente bonito

Un atributo muy til es ALIGN (ALINEAR)...el ejemplo lo explica claramente.


<H2 ALIGN="left">Algo realmente bonito<H2> (izquierda) <H2 ALIGN="center">Algo realmente bonito<H2> (centro) <H2 ALIGN="right">Algo realmente bonito<H2> (derecha)

Algo realmente bonito Algo realmente bonito Algo realmente bonito


Una cosa ms y daremos por terminada esta leccin. El navegador tiene una configuracin por defecto para el color del texto, el color de los enlaces, el color del enlace activo y el color de los enlaces visitados. La configuracin es El texto es habitualmente negro Los enlaces son habitualmente azules El enlace activo es habitualmente rojo Los enlaces visitados son habitualmente morados Puedes cambiar esta configuracin si es necesario (advierte que he dicho si es necesario). Todo el mundo sabe que los enlaces son azules. Por qu confundirlos?. Adems el color de los enlaces ayuda a saber cales se han visitado y cales no, lo que en una pgina con 25, 30 o 200 enlaces ayuda bastante a no perderse. Puedes cambiar esta configuracin para el documento completo en la sentencia <BODY>.
<BODY BGCOLOR="#00000" TEXT="#FFFF66" LINK="#00FF66" VLINK="#00BB33" ALINK="#00CCFF"> Algo realmente bonito </BODY>

Algo realmente bonito S que no hemos hablado de cmo hacer los enlaces, por lo que esa informacin no se muestra arriba (para qu liar las cosas?). Esto es simplemente para mostrarte cmo hacer los cambios de color para cuando aprendas a hacer los enlaces. Ahora el color de fondo es negro y el texto es amarillo. Los enlaces son ahora verde nen (LINK) Los enlaces visitados son verde oscuro (VLINK) Y los enlaces activos son azul cielo (ALINK)

He escrito un pequeo bloque de HTML & JavaScript llamado Color Picker que hace muy fcil (y divertido) experimentar diferentes configuraciones de color. Con l, no slo puedes elegir colores, sino que puedes elegir diferentes fuentes y diferentes tamaos, cambiar a negrita o itlica, y tambin

experimentar con las imgenes de fondo. La sentencia <BODY> se genera automticamente para que la puedas utilizar en tu documento. Sigamos. Ahora ya sabes lo suficiente como para manipular el texto en tus documentos. Puedes hacer grandes

letras rojas o letras pequeas en negrita. Puedes usar otras Fuentes, o

fuentes de espacio uniforme.

Y tambin puedes hacer un s

ube y baja.

(El cdigo para el sube y baja est aqu por si quieres verlo.) Antes de que acabemos esta leccin, hay algo sobre lo que quiero llamar tu atencin. Puedes ver el cdigo HTML de cualquier pgina pinchando en Ver/Cdigo fuente en la barra de rdenes de tu navegador. Los trminos pueden ser algo diferentes, pero todos los navegadores incorporan esta utilidad. As que, cuando ests navegando y te encuentres preguntndote a t mismo "Cmo ha hecho eso?", ya sabes que la respuesta est solamente a un par de clics de distancia.

As que quieres hacer una pgina Web!

Leccin 7
Creo que empezaremos ahora aprendiendo algo acerca de cmo funcionan los navegadores. Primero un ejemplo...
<BODY> Algo realmente bonito como un pajarito! </BODY>

Algo realmente bonito como un pajarito!


<BODY> Hey! Qu est pasando aqu? </BODY>

Hey! Qu est pasando aqu? El navegador no reconoce el formato. A menos que le digas otra cosa, muestra todos los caracteres seguidos. Si quieres empezar en una lnea nueva debes usar un indicador de lnea nueva.
<BODY> Hey! <BR>Qu <BR>est <BR>pasando <BR>aqu? </BODY>

Hey! Qu est pasando aqu?


<BR>

bsicamente dice: empieza en una nueva lnea.

Puedes usar la sentencia <BR> para saltarte una lnea? Claro.


<BODY> <BR>Qu <BR>est <BR> <BR>pasando <BR> <BR>aqu? </BODY>

Qu est pasando aqu? Quieres saltarte varias lneas? Facilongo.


<BODY> <BR>Qu <BR>est

<BR> <BR>pasando <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>aqu? </BODY>

Qu est pasando

aqu?

Volvamos a nuestra paginilla simple.


<BODY> Algo realmente bonito </BODY>

Algo realmente bonito Esta es la sentencia de prrafo. Piensa en un prrafo como en un bloque de texto.
<BODY> <P>Algo realmente bonito</P> </BODY>

Algo realmente bonito Por s misma no es muy espectacular no?. Aunque para muchos navegadores, empezar un nuevo prrafo tiene el efecto de saltarse una lnea.
<BODY> <P>Algo realmente bonito</P> <P>como un pajarito</P> </BODY>

Algo realmente bonito como un pajarito Bueno, pero para qu ms sirve la sentencia <P>? Bien, es muy buena para alineamientos.
<BODY> <P ALIGN="left">Algo realmente bonito</P> <P ALIGN="center">como un pajarito</P> <P ALIGN="right">o una florecilla</P> <P ALIGN="left"> Algo realmente bonito <BR>como un pajarito <BR>o una florecilla </P> <P ALIGN="center"> Algo realmente bonito <BR>como un pajarito <BR>o una florecilla </P> <P ALIGN="right"> Algo realmente bonito <BR>como un pajarito <BR>o una florecilla </P> </BODY>

Algo realmente bonito

como un pajarito o una florecilla Algo realmente bonito como un pajarito o una florecilla Algo realmente bonito como un pajarito o una florecilla Algo realmente bonito como un pajarito o una florecilla Algo ms acerca de la sentencia <P>... aunque en los ejemplos superiores he utilizado la sentencia de cierre (</P>), no es enteramente necesaria. Casi todos los navegadores asumen que cuando un nuevo <P>rrafo ha empezado, el antiguo ha terminado. As que...
<P>Algo que decir <P>Algo por aadir

es lo mismo que...
<P>Algo que decir</P> <P>Algo por aadir</P>

Y una ltima cosa antes de terminar. Hemos visto antes cmo hacer que algo aparezca centrado. Hay otro camino para centrar las cosas que deberas tener en tu lista de trucos. Es claramente obvio. Puedes centrar una sola palabra o la pgina completa. Todo lo que vaya entre sentencias <CENTER> (CENTRAR) , acabar centrado.
<BODY> <CENTER>Algo realmente bonito</CENTER> </BODY>

Algo realmente bonito

As que quieres hacer una pgina Web!

Leccin 9

chale un ojo a esto...


<BODY> Algo </BODY> realmente bonito

Algo realmente bonito El navegador no reconocer ms de un espacio entre letras. S que a primera vista esto puede parecer una estupidez, pero realmente es bueno que esto sea as. Porque as tienes un control absoluto sobre la apariencia del documento. Hay un pequeo trozo de cdigo que le dice al navegador: "espacio" -> &nbsp; Ahora prueba esto...
<BODY> Algo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; realmente&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bonito </BODY>

Algo

realmente

bonito

El smbolo & quiere decir que vamos a empezar un carcter especial y el smbolo ; significa que acaba el carcter especial. Los smbolos entre ambos son el cdigo para ese carcter especial. Hay slo unos pocos de estos caracteres especiales. Aqu hay seis ms. (Nota: siempre hay que utilizar letras minsculas)
&nbsp; &lt; &gt; &amp; espacio smbolo smbolo smbolo en blanco < (menor que) > (mayor que) &

&quot; &shy;

" (comillas) guin

No tienes por qu usarlos siempre, solamente cuando la utilizacin del carcter real pueda confundir al navegador. Cmo puedes saber cando es eso?. No hay una 'regla' especial y explcita. Lo averiguars con un poco de prctica y unas pocas meteduras de pata. Por cierto, acerca de las meteduras de pata. Hay gente que piensa que los errores son malos. Tienen miedo de probar cualquier cosa nueva por temor a romperla. Cometer el mismo error una y otra vez es de tontos, pero cuando ests aprendiendo (especialmente), no tengas miedo de liarlo todo. Los errores son tus amigos :-) Si no metes patas, probablemente no ests aprendiendo mucho y seguramente no ests haciendo nada. Recuerda, meter patas es un forma perfectamente aceptable de aprendizaje. Bueno, basta de bla, bla, bla... Hay ms caracteres especiales an. Dificilmente los usars pero quiero que sepas que existen. Volvamos sobre lo anterior, porque si eres como yo, tal vez ests un poco liado. El navegador mostrar tu texto en una lnea continua, a menos que t le digas lo contrario con retornos de carro, etc. Tambin reducir todas las reas vacias a 1 slo espacio. Si quieres ms espacios, debes usar el cdigo de espacio (&nbsp;). Una cosilla ms que no hemos dicho... Si el retorno de carro (o Enter) lo haces mientras escribes el texto, la mayora de los navegadores lo interpretarn como un espacio... a menos que ya haya un espacio all. Un ejemplo rpido ms.
<BODY> Algo<BR>realmente<BR>bonito<BR> como<BR>un<BR>pajarito </BODY>

Algo realmente bonito como un pajarito

As que quieres hacer una pgina Web!

Leccin 10

Ahora vamos a empezar a colocar imgenes en la pgina. Usaremos sta. Una vez ms, haz clic con el botn derecho del ratn para copiarla de esta pgina y guardarla en la tuya.

Se inserta una imagen con la sentencia <IMG> (IMAGEN) .


<BODY> <IMG> </BODY>

Tambin debemos especificar el archivo y el tamao.


<BODY> <IMG SRC="chef.gif" WIDTH=130 HEIGHT=101> (ANCHURA y ALTURA) </BODY>

PREGUNTA: Cmo puedo saber la ALTURA y la ANCHURA de una imagen? R: Bueno, hay un par de formas diferentes. Una es cargar la imagen en un programa de grficos. En Propiedades aparece la altura y la anchura. Uno muy bueno (y gratis) es Irfan View. Un editor de grficos muy popular es Paint Shop Pro. Es shareware con

caducidad, pero es un buen editor. Hay una versin ms antigua que RECOMIENDO a los principiantes, y sta no caduca. Est (o estaba) disponible aqu. Otro mtodo es utilizar un editor de texto o de html que importa el tamao cuando se inserta la imagen. Puedes hacerlo con NoteTab, y la sentencia de imagen se construye automticamente cuando se arrastra el archivo de imagen al documento actual. Se puede insertar una imagen en 6 dcimas de segundo.

Ahora djame hacer hincapi en que no slo hay que especificar qu imagen, sino que tambin hay que especificar dnde est la imagen. La entrada anterior, "chef.gif", le dice al navegador que busque la imagen llamada chef.gif en la misma carpeta (o directorio) en que se encuentra el documento html. Abajo hay unos pocos diagramas. quiere decir que la imagen est en la misma carpeta que contiene el documento html.
SRC="chef.gif"

quiere decir que la imagen est en un subdirectorio de la carpeta que contiene el documento. Puede haber tantos subdirectorios como sea necesario.
SRC="images/chef.gif"

quiere decir que la imagen est en el directorio superior a aquel en que se encuentra el documento html.
SRC="../chef.gif"

quiere decir que la imagen est dos directorios por encima de aquel en que se encuentra el documento html.
SRC="../../chef.gif"

quiere decir que la imagen est en un subdirectorio del directorio superior. Es decir, el directorio superior contiene dos subdirectorios, uno con la imagen y otro con el documento html.
SRC="../images/chef.gif"

SRC="../../../other/images/chef.gif"

Bueno, esto no voy a intentar explicarlo. Espero que captes la idea.

Hay otra forma de hacer todo esto. Todas las referencias a imgenes pueden incluir su URL completa. La URL es la direccin completa de un archivo cualquiera en la red, y cada una de ellas es nica. Por ejemplo:
http://www.servidor.net/usuario/mipagina/varios/imagenes/chef.gif

Por qu, te preguntars, utilizamos entonces las referencias URL relativas (parciales) en contraposicin a las referencias URL absolutas (completas)? Pues porque normalmente construirs tu sitio web localmente (lese en tu propio disco duro) y todos los enlaces funcionarn perfectamente. Cuando las pginas estn terminadas, solo tienes que subir al servidor todo el montn de archivos y todo funcionar tal y como tenas previsto. Adicionalmente, es ms fcil para el navegador conseguir localizar la imagen y las pginas cargan ms rpido. Entonces, hay an alguna razn para usar una URL? Por supuesto que s, si la imagen est un servidor completamente diferente.

PREGUNTA: En cuanto subo mis pginas a la Red, todos mis enlaces a las imgenes se estropean, aunque en mi disco duro funcionan perfectamente. Uso URLs relativas y estoy completamente seguro de que he subido y actualizado las imgenes, porque puedo verlas en mi programa FTP. Qu sucede? R: Suena a problema de maysculas/minsculas. Para un sistema basado en Windows, Chef.gif es lo mismo que CHEF.GIF y lo mismo que chef.gif. Para un servidor de tipo UNIX (de los que hay muchos) son tres imgenes completamente diferentes. Si le ests diciendo al servidor que busque Chef.gif, pero lo que el servidor encuentra es CHEF.GIF, la imagen no aparecer. La solucin? Utiliza siempre letras minsculas para los nombres de archivo. Haz de esto un hbito y nunca ms tendrs este tipo de problemas. Otro hbito realmente bueno es evitar los espacios en tus nombres de archivo. Cambia los espacios por subrayados. Cambia Mi Mamita.gif por mi_mamita.gif.

As que quieres hacer una pgina Web!

Leccin 11

Otro atributo de la sentencia IMG que merece mencin especial es ALT...


<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 ALT="Chef">

es un subttulo para la imagen cuando un usuario tiene un navegador que (por la razn que sea) no muestra imgenes. Puede que est utilizando un navegador de slo texto, puede haber cancelado la muestra de imgenes para conseguir ms velocidad o cualquier otra cosa. En estos casos, el atributo ALT puede ser muy importante para tu visitante.
ALT

Algo muy importante que debes saber acerca de las imgenes es el tamao. Prueba esto...
<BODY> <IMG SRC="chef.gif"> </BODY>

Como puedes ver, el navegador averigua el tamao de la imagen por s mismo. Por qu, entonces, andar enredando con las dimensiones de la imagen?. Porque con las dimensiones el navegador puede reservar espacio para la imagen y cargar el resto de la pgina. Una vez que la pgina entera ha cargado, el navegador vuelve atrs y empieza a cargar las imgenes. Sin dimensiones, cuando el navegador llega a una imagen tiene que hacer una pausa, cargar la imagen, y despus continuar cargando la pgina. En definitiva, el navegador funciona mucho mejor con las dimensiones de la imagen declaradas. Bueno Jose Angel, todo eso est muy bien pero aaaaaahhh!, para qu demonios sirve?

Prueba esto...
<BODY> <IMG SRC="chef.gif" WIDTH=300 HEIGHT=101> </BODY>

<BODY> <IMG SRC="chef.gif" WIDTH=40 HEIGHT=200> </BODY>

Puedes especificar las dimensiones que te parezcan, aunque no tengan nada que ver con las dimensiones originales de la imagen. An no te percatas de para qu sirve? Bueno, mira bien este pequeo punto rojo -> Es un cuadrado de 1x1. Mira lo que puedo hacer con l...
<BODY> <P ALIGN="center"><IMG <P ALIGN="center"><IMG <P ALIGN="center"><IMG <P ALIGN="center"><IMG </BODY> SRC="red_dot.gif" SRC="red_dot.gif" SRC="red_dot.gif" SRC="red_dot.gif" WIDTH=500 HEIGHT=1> WIDTH=500 HEIGHT=2> WIDTH=500 HEIGHT=8> WIDTH=2 HEIGHT=200>

As que quieres hacer una pgina Web!

Leccin 12

Ahora vamos a aprender a hacer enlaces (s, por fin!). Es verdaderamente simple. Enlazaremos con Yahoo. Empieza con esto...
<BODY> Ir a Yahoo! </BODY>

Ir a Yahoo! Ahora aade dos sentencias de enlace.


<BODY> Ir a <A>Yahoo!</A> </BODY>

Ir a Yahoo! Aade la URL y ya est!. URL es una abreviatura de Universal Resource Locator (Localizador Universal de Recursos). Una frase rimbombante como muchas de las que usan la gente de los ordenadores. Una URL es simplemente una direccin.
<BODY> Ir a <A HREF="http://www.yahoo.com/">Yahoo!</A> </BODY>

Ir a Yahoo! Hagamos uno ms.


<BODY> Ir a Netscape! </BODY>

Ir a Netscape!
<BODY> Ir a <A HREF="http://home.netscape.com/">Netscape!</A> </BODY>

Ir a Netscape!

As que quieres hacer una pgina Web!

Leccin 13

Una direccin de correo electrnico enlaza de la misma forma. Utilizaremos la direccin de correo en lugar de la direccin de la pgina.
<BODY> Envame un <A HREF="mailto:forrest@bubbagump.com">correo!</A> </BODY>

Envame un correo! Observa que en los enlaces a las pginas la direccin empieza con
HREF="http://

mientras que en las direcciones de correo se usa


HREF="mailto:

PREGUNTA: Cmo puedo aadir un Asunto a mi mensaje de correo? R: Es muy sencillo, pero hay un truco. Puedes aadir el Asunto al enlace como sigue...
<A HREF="mailto:forrest@bubbagump.com?subject:Hola chico!">

... pero, advierte que por ah fuera hay algunos programas de correo que no saben qu hacer con sto. Para esos programas el mensaje puede parecer enviado, cuando en realidad ha cado en el olvido. Si crees que tus pginas las van a visitar gente que tiene ese tipo de programas, no lo especifiques.

PREGUNTA: Cmo puedo librarme de ese odioso subrayado en mis enlaces? R: Bien, tcnicamente no puede hacerse con HTML. Pero s puede hacerse usando Style Sheets (Hojas de estilo). Si colocas lo siguiente entre las sentencias HEAD de tu documento, cualquier navegador que soporte las Style Sheets puede reproducir los enlaces sin subrayado...
<style type="text/css"><!-a:link, a:visited, a:active {text-decoration: none} --></style>

Tambin podemos hacer que una imagen sea un enlace. Usando el ejemplo anterior de 'Ir a Netscape!', simplemente substituiremos con sentencia <IMG> la palabra Netscape!
<BODY>

Ir a <A HREF="http://home.netscape.com/"><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101></A> </BODY>

Ir a

PREGUNTA: Cmo te libras de ese borde azul tan feo que rodea a la imagen? R: Simple... aade BORDER=0 (BORDE) a la sentencia IMG.

PREGUNTA: Cmo hago un enlace a un archivo cualquiera de forma que la gente pueda bajrselo? R: Simple tambin, haz un enlace al archivo en cuestin. Supongamos que tienes unos pocos documentos de Microsoft Word que te gustara ofrecer. Enlaza con ellos...
<A HREF="miresumen.doc">Descargar mi resumen</A> <BR><A HREF="mibio.doc">Descargar my autobiografa</A> Descargar mi resumen Descargar mi autobiografa

Te preguntars cmo ests seguro de que el archivo se grabe en el disco duro en vez de mostrarse en la pantalla o cargarse donde sea. De hecho tienes muy poco control sobre lo que sucede cuando un usuario descarga un archivo. La gran mayora sabe que haciendo clic con el botn derecho lo puede grabar en el disco duro. Otros pueden tener un programilla para manejar el archivo. Deja a la gente que lo haga como quiera. Tu trabajo es simplemente ofrecerlo para la descarga. Si el archivo es grande (ms de 200Kb) o una coleccin de archivos, tal vez quieras comprimirlos y/o agruparlos en un archivo zip.

As que quieres hacer una pgina Web!

Leccin 14

PREGUNTA: Cmo puedo hacer un enlace que abra una nueva ventana del navegador? R: Bueno, lo primero es que esto puede hacerlo fcilmente tu visitante si quiere. Todo lo que tiene que hacer es clic con botn derecho y elegir "Abrir vnculo en una ventana nueva". Si queremos que esta accin se produzca automticamente debes aadir TARGET="_blank" al enlace...
Ir a <A HREF="http://home.netscape.com/" TARGET="_blank">Netscape!</A>

Hay mucho ms de esto en el Tutor de Marcos (Frames). Te recuerdo cmo librarte del borde azul, pero ten en cuenta que a veces no es obvio que una imagen es un enlace. Por lo que, a veces, el borde azul es til.
<BODY> Ir a <A HREF="http://home.netscape.com/"><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 BORDER=0></A> </BODY>

Ir a Una nota ms acerca de los enlaces... Es perfectamente aceptable enlazar a la pgina de cualquiera sin pedir permiso. Los enlaces son lo que hacen que la Red sea la Red. Ahora que ya sabes hacer enlaces, voy a decirte algo acerca de ciertas pginas que me ponen enfermo. Odio el buscar informacin acerca de un tema y encontrarme con una pgina con 14 docenas de enlaces acerca de ese tema, pero absolutamente nada ms. Sigues uno de esos enlaces y

lo nico que consigues son MS ENLACES a otras pginas que enlazan con otras pginas que enlazan... pero no ves ni una simple pgina que tenga lo que ests buscando! Si ests haciendo una pgina, por supuesto incluye enlaces si crees que le aaden inters, pero trata de no hacer una pgina que slo consista en enlaces, enlaces y ms enlaces!.

As que quieres hacer una pgina Web!

Leccin 15

Antes de continuar, necesitamos volver a algo que hemos visto. Cuando incluyas imgenes en tus pginas recuerda que contienen un montn de datos y pueden ser muy lentas en cargar. Una forma de reducir el tamao (por tamao quiero decir ahora Kilobytes) es reducir sus dimensiones. Reducir las dimensiones a la mitad produce una imagen con slo 1/4 del tamao en Kb. Tambin se puede reducir el nmero de colores. Por ejemplo:

Dimensiones 310 x 304 Nmero de colores- 238 Tamao - 69 Kb

Dimensiones 207 x 203 Nmero de colores- 238 Tamao 34 Kb

Dimensiones 207 x 203 Nmero de colores- 48 Tamao - 19 Kb

Toda la edicin de estas imgenes se ha hecho con Paint Shop Pro.


( Una vieja versin, pero sin caducidad, est disponible aqu. Aunque es un poco antigua y no tan buena como la ltima versin, sigue siendo un GRAN editor de grficos - PERFECTO para los nuevos autores en la red.)

Ahora veamos, la primera es una imagen grande, bonita y con mucha calidad, pero mralo de esta forma... si tus pginas tardan mucho en cargar, los visitantes probablemente se larguen y entonces no vern nada. Para ver cmo se pueden reducir las imgenes, prueba el Optimizador GIF inferior. T le envas una imagen, y l te la devuelve "optimizada". Observa que el Optimizador no es parte de este tutorial. Es un programa residente en otro ordenador. Esto es slo una interfaz, y debes estar conectado para usarlo.

Optimizador GIF
GifOptimizer es una herramiento GRATUITA, y en lnea que reduce el tamao de los archivos GIF, hasta el 75%, permitiendo a ls pginas web cargar ms rpido. La optimizacin se produce en cuatro pasos sencillos:

1. Sube tu imagen GIF al servidor del Optimizador. 2. Reduce el nmero de colores usado en la imagen. Este paso tambin elimina los datos extras y los comentarios del archivo GIF. 3. Reduce la altura y la anchura de la imagen. 4. Graba la imagen optimizada GIF en tu ordenador para usarla en tu sitio web. GifOptimizer puede reducir el tamao de las imgenes GIF hasta 150K, incluso GIFs animados. salo tan a menudo como quieras, sin cargo.
Paso 1: Subir la imagen GIF

Archivo remoto
Si la imagen a optimizar est en alguna parte de la Red:

1. Introduce la URL en el campo inferior (Asegrate de introducir la URL de la imagen

en s, no la URL de la pgina en la que est.) 2. Pincha en el botn "Subir".


(Ejemplo: http://www.algunsitio.com/linda_imagen.gif )

http:// Subir

Archivo local
Si la imagen est en tu ordenador: (Los usuarios de Internet Explorer deben tener al menos la versin 3.02 y los aadidos de la versin que estn disponibles aqu.)

1. Pulsa el botn Examinar. 2. Localiza la imagen GIF en tu disco duro. 3. Pincha en "Subir".

Subir

As que quieres hacer una pgina Web!

Leccin 16

Otra opcin que se puede utilizar, sobre todo si vas a ofrecer un montn de fotografas es hacer thumbnails (o fotos en miniatura) que enlazan con las versiones normales de la imagen. Supongamos que quiero ofrecer tres fotografas de, digamos tres de mis coches (qu ms quisiera yo).

Haz clic en la miniatura para ver una imagen mayor

Lo primero que necesitas hacer es arrancar tu editor de imgenes y hacer versiones ms pequeas de las que necesites. Tambin ayudar el hecho de reducir la profundidad del color. Este punto es muy

importante. He visto a mucha gente intentando hacer una miniatura, por el simple procedimiento de reducir las dimensiones de la sentencia <IMG>. Lo nico que hace esto es empaquetar la misma foto en un espacio ms pequeo. Lo que necesitas es crear una copia menor de la imagen y usarla como enlace a la imagen original. Como la mejor forma de aprender es practicar, hagamos una. Creo que utilizaremos el Corvette (es decir, el coche azul, por si hay algn ignorante que no lo sepa). Coloca la imagen original y la imagen pequea en tu carpeta de trabajo. Una vez ms, haz clic con el botn derecho y Guardar imagen como. Empieza con tu sentencia <IMG>.
<BODY> <IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62> </BODY>

Aade las sentencias <A>.


<BODY> <A><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A> </BODY>

Y la URL de la fotografa original, y bingo, ya lo tienes!


<BODY> <A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A> </BODY>

Si quieres puedes eliminar el borde azul. Pero quizs quieras mantenerlo para que tus visitantes sepan que se trata de un enlace. Es tu eleccin.

<BODY> <A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62 BORDER=0></A> </BODY>

Un programa fantstico para hacer esto es ThumbsPlus.

As que quieres hacer una pgina Web!

Leccin 17

FAQ: Mis enlaces de imgenes tienen unos pequeos guiones al lado. Tambin hay espacios entre ellos y me gustara que desaparecieran para que las imgenes estuvieran contiguas. Y no lo entiendo porque todo funciona bien en el navegador A pero no el B.

R: Algunos navegadores (casi todos?) interpretan un retorno de carro entre las imgenes como un espacio. Unos pocos navegadores no lo hacen as. Es muy simple. La pequea lnea azul es simplemente el subrayado del enlace en un espacio en blanco. La cura es eliminar el retorno de carro que pueda haber justo antes o justo despus de la imagen. Este es el cdigo para las imgenes superiores:

Ahora haremos desaparecer las lneas azules:

Y con otro pequeo ajuste tambin desaparecen los espacios:

Es una molestia? Slo si no entiendes lo que pasa ni cmo arreglarlo. El navegador A es un desastre? No necesariamente, slo es diferente del navegador B. Los navegadores a veces hacen cosas diferentes con el mismo cdigo. Otra forma de hacer enlaces es enlazar no con una pgina, sino con una parte especfica de la misma pgina. Para ser mgicamente transportado a donde hablamos por primera vez de las URLs, haz clic aqu (recuerda que ests en la leccin 17). Como esto puede ser muy complicado de hacer como ejemplo, te explicar directamente cmo se ha hecho. Primero empezaremos con el punto dnde la gente va a ir a parar. Elige una palabra y envulvela en sentencias <A>.
<A>Aade</A> la URL y ya est!

Ahora dale al punto elegido un NAME (NOMBRE).


<A NAME="llegada">Aade</A> la URL y ya est!

Lo que acabas de hacer es marcar el punto en cuestin. Ahora ese punto puede ser enlazado. Empieza a construir el enlace.
Haz clic <A>aqu</A> para ser mgicamente transportado...

Aade el documento de referencia...


Haz clic <A HREF="leccin06.html">aqu</A> para ser mgicamente transportado...

Y por ltimo, aade la sentencia NAME que has elegido...

Haz clic <A HREF="lesson06.html#llegada">aqu</A> para ser mgicamente transportado...

Y esto es todo! No es exactamente ciruga neurocerebral verdad?

As que quieres hacer una pgina Web!

Leccin 18

Ya hemos hecho un montn de trabajo. Manipulacin de textos y fuentes, imgenes, enlaces. Para las cuestiones bsicas, esto es casi todo lo que hay que aprender. Ahora vamos a hablar de las resoluciones de pantalla. Mi pantalla puede tener 640 pxeles por 480 pxeles como mnimo. Muchos otros usan 800x600 y unos pocos (aunque cada vez ms) usan 1024x768. Y estoy seguro de que hay por ah unas pocas resoluciones ms. Para qu sirve esto?. Tiene mucho que ver con el aspecto futuro de tus pginas, cuando se muestren en otras pantallas, que es para lo que las ests haciendo. Aqu hay unas tomas de una pgina a diferentes resoluciones.

640480

800600

1024768

Es una buena idea comprobar tu pgina en diferentes resoluciones. Tu pgina tan cuidadosamente diseada puede aparecer fatal a diferentes resoluciones. Especialmente si diseas tu pgina en alta resolucin y luego la ves a baja resolucin. Te sorprenders. Para los usuarios de Windows95 hay un juguetito de MS Powertoy llamado Quickres que te permite cambiar de resolucin de pantalla fcilmente. Ahora veamos un par de herramientas de formateo disponibles. La primera es <BLOCKQUOTE> (BLOQUE DE FORMATO). En la mayora de los navegadores comprime los bordes laterales, manteniendo el texto tal cual est. (No s si sta es la terminologa correcta, pero si entiendes lo que digo es bastante aproximado). Como ves el texto inferior se pierde por la parte derecha de la pantalla, lo que te obliga a utilizar la barra inferior de desplazamiento.

Espaa se constituye en un Estado social y democrtico de Derecho, que propugna como valores superiores de su ordenamiento jurdico la libertad, la justicia, la igualdad y el pluralismo poltico. Pero si aadimos las sentencias <BLOCKQUOTE>, <BODY> <BLOCKQUOTE> Espaa se constituye en un Estado social y democrtico de Derecho, que propugna como valores superiores de su ordenamiento jurdico la libertad, la justicia, la igualdad y el pluralismo poltico. </BLOCKQUOTE> </BODY>

conseguimos el siguiente efecto:

Espaa se constituye en un Estado social y democrtico de Derecho, que propugna como valores superiores de su ordenamiento jurdico la libertad, la justicia, la igualdad y el pluralismo poltico. Estoy seguro de que cuando la sentencia <BLOCKQUOTE> fu desarrollada tena un propsito muy diferente, como poder reproducir tal cual profundos escritos en prosa de autores de los que nunca he odo hablar. Pero aqu, en las trincheras, tiene una utilizacin mucho ms mundana.

As que quieres hacer una pgina Web!

Leccin 19

Otra herramienta muy til es LIST(LISTA). Hay listas ORDERED(NUMERADAS) y listas UNORDERED(SIN NUMERAR). Esta es una lista numerada 1. algo grande 2. algo pequeo 3. algo corto 4. algo largo Esta es una lista sin numerar

algo rojo algo azul algo viejo algo nuevo

Primero construiremos una lista UNORDERED(SIN NUMERAR). Es realmente facilongo, de verdad.

Empieza con esto...


<BODY> Lo que quiero para Reyes </BODY>

Lo que quiero para Reyes Nota: tcnicamente no hemos empezado a construir la lista an. Esto es slo el encabezamiento. Aade un par de sentencias de lista sin numerar.
<BODY> Lo que quiero para Reyes <UL> </UL> </BODY>

Lo que quiero para Reyes Aade una entrada a la lista.


<BODY> Lo que quiero para Reyes <UL> <LI>un gran camin rojo </UL> </BODY>

Lo que quiero para Reyes

un gran camin rojo

Aade unas pocas ms...


<BODY> Lo que quiero para Reyes <UL> <LI>un gran camin rojo <LI>una lancha rpida <LI>una batera <LI>una ametralladora <LI>una Adriana Skleranikova </UL> </BODY>

Lo que quiero para Reyes


un gran camin rojo una lancha rpida una batera una ametralladora una Adriana Skleranikova

Bingo! Ya has hecho una lista! Cmo hacer una lista numerada Fcil! Cambia la sentencia <UL> por <OL>.
<BODY> Lo que quiero para Reyes <OL> <LI>un gran camin rojo <LI>una lancha rpida <LI>una batera <LI>una ametralladora <LI>una Adriana Skleranikova </OL> </BODY>

Lo que quiero para Reyes 1. 2. 3. 4. un gran camin rojo una lancha rpida una batera una ametralladora

5. una Adriana Skleranikova

As que quieres hacer una pgina Web!

Leccin 20

Otro tipo de lista es la lista definida. aardvark Esto es un mamfero africano que parece un oso hormiguero. Y, como todo el mundo sabe, la primera palabra en cualquier diccionario respetable (es broma). Empieza con esto...
<BODY> <DL> </DL> </BODY>

Ahora aade un ttulo definitorio...


<BODY> <DL> <DT>Artculo 3: </DL> </BODY>

Artculo 3: Aade una entrada.


<BODY> <DL> <DT>Artculo 3: <DD>1. El castellano es de lengua espaola oficial del Estado. Todos los espaoles tienen el deber de conocerla y el derecho a usarla. </DL> </BODY>

Artculo 3: 1. El castellano es de lengua espaola oficial del Estado. Todos los espaoles

tienen el deber de conocerla y el derecho a usarla. Como toque final me gustara poner el ttulo en negrita. No es obligatorio, claro, pero creo que queda mucho mejor.
<BODY> <DL> <DT><B>Artculo 3:</B> <DD>1. El castellano es de lengua espaola oficial del Estado. Todos los espaoles tienen el deber de conocerla y el derecho a usarla. </DL> </BODY>

Artculo 3: 1. El castellano es de lengua espaola oficial del Estado. Todos los espaoles tienen el deber de conocerla y el derecho a usarla.

As que quieres hacer una pgina Web!

Leccin 21

Hay otra sentencia que encontrars muy til, y que se utiliza muy a menudo. Es la Lnea Horizontal.
<BODY> <HR> </BODY>

Tenemos unas pocas opciones disponibles...


<BODY> <HR WIDTH=20%>

<HR WIDTH=50%> <HR WIDTH=100%> <HR WIDTH=20> <HR WIDTH=50> <HR WIDTH=100> </BODY>

Los grficos hablan por s mismos.


<BODY> <HR WIDTH=60% ALIGN="left"> <HR WIDTH=60% ALIGN="right"> <HR WIDTH=60% ALIGN="center"> </BODY>

Tambin podemos controlar el grosor de la lnea...


<BODY> <HR WIDTH=60% <HR WIDTH=60% <HR WIDTH=60% <HR WIDTH=60% </BODY> SIZE=1> SIZE=3> SIZE=8> SIZE=15>

Y podemos hacer una lnea slida.


<BODY> <HR WIDTH=60% <HR WIDTH=60% <HR WIDTH=60% <HR WIDTH=60% </BODY> SIZE=1 NOSHADE> SIZE=3 NOSHADE> SIZE=8 NOSHADE> SIZE=15 NOSHADE>

As que quieres hacer una pgina Web!

Leccin 22

Recuerdas que dije que el navegador no entenda el formato?. S, dije que slo mostraba el texto en una lnea contnua, algo as como esto
<BODY> ///\\___ (@ @) +----oOO----(_)-----------+ | JOSE ANGEL | | | | Presidente | +-----------------oOO-----+ |__|__| || || ooO Ooo </BODY>

///\\___ (@ @) +----oOO----(_)-----------+ | JOSE ANGEL | | | | Presidente | +-----------------oOO-----+ |__|__| || || ooO Ooo Bien, con la sentencia <PRE> (PREFORMATO) podemos evitarlo y hacer que el navegador muestre las cosas tal y como las hemos tecleado en el Bloc de Notas.
<BODY> <PRE>

///\\___ (@ @) +----oOO----(_)-----------+ | JOSE ANGEL | | | | Presidente | +-----------------oOO-----+ |__|__| || || ooO Ooo </PRE> </BODY>

///\\___ (@ @) +----oOO----(_)-----------+ | JOSE ANGEL | | | | Presidente | +-----------------oOO-----+ |__|__| || || ooO Ooo

Perctate de que se ha usado una fuente de espaciado uniforme. La ltima sentencia que vamos a discutir es el comentario.
<BODY> <!--Esto es un comentario--> Esto no lo es <P>Un comentario puede ser colocado en cualquier lugar del documento y el navegador ignorar todo lo que hay entre las marcas de inicio y final. Puedes insertar mensajes ocultos, <!--Hola Mami--> notas para t mismo, <!--Recoger la leche--> o escribir un mensaje de ayuda para alguien que est leyendo el cdigo de tu pgina.<!--Copia algo de esta pgina y ests muerto--> </BODY>

Esto no lo es Un comentario puede ser colocado en cualquier lugar del documento y el navegador ignorar todo lo que hay entre las marcas de inicio y final. Puedes insertar mensajes ocultos, notas para t mismo, o escribir un mensaje de ayuda para alguien que est leyendo el cdigo de tu pgina. Para dejarlo absolutamente claro, el comentario debe empezar con <!-- y terminar con --> Puedes (y se hace a menudo), colocar sentencias dentro del comentario, aunque sern ignoradas. El navegador simplemente ignorar todo lo que haya hasta que vea un -->

As que quieres hacer una pgina Web!

Leccin 23
Bien, con esto hemos terminado. Ya conoces todas las sentencias bsicas que necesitas para crear una pgina web. Que no son muchas? Seguro. Si hay ms? Desde luego. Muchsimas ms. Pero te aseguro que tienes el armamento bsico que necesitas. Una vez que hayas asimilado, comprendido y PRACTICADO con todas estas sentencias, puedes empezar con los tutoriales ms avanzados: Tutor de Tablas, Tutor de Formularios y Tutor de Marcos (Frames). Estos tutoriales te darn unos pocos trucos ms para que los aadas a tu caja de herramientas de publicacin. Adems de todo eso hay unas cuantas sentencias que son redundantes; sentencias que tienen un uso especializado pero que, en la prctica, duplican muchas de las presentadas aqu; hay unas cuantas pasadas de moda y otras pocas con un uso limitadsmo. Y por supuesto estn aquellas pocas de uso especfico de un navegador (es decir, que slo funcionan en uno). En otra parte del tutorial hay una separata con el lenguaje estructural (prrafos, listas, tablas, etc.) y con el lenguaje de presentacin (colores, fuentes, etc.). El resultado, en parte, ha sido una introduccin a las style sheets (hojas de estilo). Aunque comprender el funcionamiento de las style sheets no es necesario en absoluto para hacer pginas web, constituye un rea donde quizs te interese expandir tus estudios. Una de las cosas ms interesantes que se pueden hacer en una pgina es conseguir que hagan cosas. Puedes investigar el fascinante mundo de JavaScript y aprender a escribir mini programas para insertarlos en tus pginas. Es un poco ms complejo que el HTML, pero en breve espero terminar un Tutor de JavaScript, con el que podrs adquirir una base slida. Adems hay docenas de sitios que ofrecen cdigo JavaScript de "copiar y pegar", absolutamente gratis. Mencion al principio del tutorial lo que pensaba acerca de los editores de HTML. En mi opinin, los mejores editores no son del tipo SuperAutomtico, ya sabes, esos que dicen que puedes hacer una pgina sin escribir ni una lnea de cdigo. El problema es que, y lo he visto en un montn de pginas, realmente parecen como si el autor no tuviera la ms mnima idea de HTML. Y eso no es lo peor. Si un problema aparece (y aparecern), alguien con un conocimiento bsico de HTML puede resolverlo en dos patadas, mientras que alguien que se ha acostumbrado a utilizar esos editores no tendr ni idea de cmo hacerlo. Adems esos editores no pueden hacerlo todo. Ciertos diseos (o layouts) slo se consiguen escribiendo el cdigo a mano. Los autores ms experimentados utilizan siempre un editor basado en texto. Lo que hacen este tipo de editores es presentar una serie de sentencias, que puedes elegir con un simple clic. As que no tienes que teclear los cdigos, LEFT, RIGHT, CENTER o lo que sea, evitando en gran medida los errores TIPOGRFICOS. Y tienes un absoluto control sobre el diseo de la pgina. Algunos (todos gratuitos) estn en la Lista de Editores Gratuitos de HTML. Todo lo que tienen en comn es que debes saber algo de HTML. Ellos te facilitarn el trabajo de hacer el cdigo. No intentarn hacer la pgina por t.

Una vez que has terminado tus pginas, debes subirlas al servidor. El servidor es un ordenador que ejecuta un programa que muestra documentos a todo quel que los solicita. Para ver una gua de ayuda a la hora de subir tus pginas, chale un ojo a Subiendo tus pginas. Y para terminar, puedes aprender algo acerca del estilo y del contenido de las pginas web en Las 10 mejores maneras de saber si tienes una paginucha.

Buena suerte, y feliz HTML!

Você também pode gostar