Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


Índice.
Curso acelerado de HTM...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


Capítulo 1.
Introducción.


Pu...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez




Capítulo 2.
Directivas y est...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


3. Zona final.

En esta zona, ...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez




Capítulo 3.
Trabajando con t...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


Y si quisiésemos disminuir has...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


Para empezar, en el caso de qu...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez




Capítulo 4.
Presentemos todo...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


Bien, este tipo de lista es id...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


Capítulo 5.
Usando los recurso...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


No hace falta ser quot;Jimy th...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


Capítulo 6.
Hagamos todo más p...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


<TD>Fila 3 Columna 1</TD>
<TD>...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


<TH>Datos de la columna 2</TH>...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


<TD>
<FONT color=quot;#000000q...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez




Capítulo 7.
Y llegamos a los...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


Shareware, sin ir más lejos, e...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez




Lo que deberíamos de poner s...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


Capítulo 8.
Aprende el uso y a...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


Como podéis comprobar es muy f...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez



<FRAME SRC=quot;hola.htmquot;...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


justo en el lugar que a nosotr...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez



</HTML>

Al interpretarse el ...
Cursos y Tutoriales / Stratos-ad.com
       Curso acelerado de HTML de Fernando Rodríguez


Capítulo 9.
Final del curso ac...
Próxima SlideShare
Cargando en…5
×

HTML

418 visualizaciones

Publicado el

Tutorial HTML

Publicado en: Tecnología
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
418
En SlideShare
0
De insertados
0
Número de insertados
10
Acciones
Compartido
0
Descargas
11
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

HTML

  1. 1. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Índice. Curso acelerado de HTML de Fernando Rodriguez. · Capítulo 1. Introducción. · Capítulo 2. Directivas y estructura de un documento HTML. · Zona Cabecera. · Cuerpo del Documento. · Zona final. · Capítulo 3. Trabajando con texto. · Directivas BASEFONT y FONT. · Directiva P, CENTER, BR y HR para el tratamiento de los párrafos. · Resaltando el texto. · Reutilizando nuestros archivos ASCII. · Capítulo 4. Presentemos todo más elegantemente: las listas. · Listas Numeradas. · Listas Marcadas. · Listas de Definiciones. · Capítulo 5. Usando los recursos de Internet. · Los enlaces hipertexto. ·¡Dios mío, si todo se hace con una directiva!. · Ya se cargar archivos .HTM desde mi página, ahora... quiero ¡más!. · Algunos truquillos y avisos a la hora de utilizar el FTP. · Capítulo 6. Hagamos todo más profesional con las tablas. · Lo que tenemos que tener claro. · Aprendiendo a utilizar la directiva <TABLE>. · Las directivas <CAPTION> y <TH>. · Pero... ¿Cómo controlo la información? · Consideraciones finales. · Capítulo 7. Y llegamos a los gráficos... · Los dos formatos gráficos más utilizados. · Análisis del formato GIF. · Análisis del formato JPG. ·¿Y cómo los inserto en mi página? · Capítulo 8. Aprende el uso y abuso de los frames. ·¿Qué es eso de los frames? ·¡Manos a la obra! · Cómo indicarle al navegador la división. · La etiqueta <BASE> · Un ejemplo antes de marchar. · Y llegamos, nuevamente, al final. · Capítulo 9. Final del curso acelerado. 1
  2. 2. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Capítulo 1. Introducción. Pues bien, se supone que con este artículo se va a intentar que todo aquel que lo siga sepa hacer una página WEB lo mínimamente interesante y elegante como para atraer la atención del quot;cybernautaquot;, sin demasiadas pretensiones pero eso sí, funcional quot;a topequot;. Para empezar, dejar claro, que no se va a ver ni muchísimo menos todo lo que es el HTML (que es lenguaje con el que se implementan las páginas WEB), sino que se verá sus comandos más populares y efectivos a la hora de llevar a la práctica las acciones básicas para que la página que diseñemos tenga la suficiente calidad como para ser visitada. Por otro lado, sólo veremos HTML, así que no habrá ni Java ni historias parecidas, ya que entre otras razones un servidor tiene conocimientos al respecto, así que si tú sabes Java y quieres contarnos algo esta es tú oportunidad. 2
  3. 3. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Capítulo 2. Directivas y estructura de un documento HTML. A pesar de que existen montones de programas para crear páginas web de un modo súper automatizado, nosotros nos vamos a valer de nuestro procesador de textos preferidos para crear los documentos html, o lo que es lo mismo, los archivos .htm que los distintos navegadores entienden y son capaces de interpretar. Una vez que nos encontremos frente a nuestro procesador de textos ya podemos empezar a darle a la tecla. Bien, aquí vamos a ver la estructura que debe de tener todo documento HTML que creemos, de esta forma, siempre partiremos de un esqueleto básico, al que tan sólo tendremos que añadir comandos y textos para hacer que se adapte a lo que nosotros queramos. Antes de comentaros las tres zonas básicas en las que se divide un documento HTML, os diré qué son las directivas. Durante la creación de cualquier documento HTML es necesario utilizar las directivas, marcas o tags, dichas directivas, van entre los símbolos de mayor y menor, esto es, van entre < y >. Para indicar a qué es a lo que afectan las directivas, lo que se hace es poner una directiva al comienzo de lo que se quiere afectar y otra al final, con la peculiaridad de que esta última tendrá también la barra /. De esta forma, el esquema de una directiva sería: <directiva> Zona del documento afectada </directiva> Una vez entendida esta tontería pasamos a describir las 3 zonas de un documento HTML. Todo documento HTML tiene o dispone de tres zonas claramente diferenciadas, estas son: 1. Zona Cabecera. En esta zona es la que indica el comienzo de nuestro documento HTML, la verdad es que es algo tan chorra como tener que poner la directivas <HTML> y <HTML/> en el documento. La primera de ellas sirve para indicar que empezamos ahí, mientras que la última (la que tiene /) indica que terminaremos ahí (todo esto ya os lo conté más arriba). Cabe decir que es indiferente (y esto se va a aplicar a todo lo que veamos) que se escriban las directivas HTML en mayúsculas o en minúsculas. Otra de las directivas que se puede considerar dentro de la zona de cabecera y que va dentro de la directiva HTML (todo el documento va dentro de la directiva HTML) es la de HEAD. Esta directiva, indica el comienzo de la zona en donde podemos poner el título de nuestra página WEB, es decir, el título de la ventana del navegador cuando cargue nuestra página WEB. Para ello basta utilizar, dentro de HEAD, la directiva TITLE que nos permite escribir el título. Un ejemplo de todo lo visto hasta ahora podría ser el siguiente: <HTML> <HEAD> <TITLE>Macedonia Magazine</TITLE> </HEAD> </HTML> Si metiéramos esto en un archivo de texto normal y corriente con la extensión htm y lo cargaremos en nuestro navegador favorito, veríamos que en la zona de títulos de la ventana se leería Macedonia Magazine. 2. Cuerpo del Documento. En esta zona escribiremos la mayor parte de nuestra página WEB, ya que mediante las directiva <BODY> podemos escribir texto para que aparezca en la página o también podemos incluir otras directivas que nos permitan poner gráficos, enlaces, música, en definitiva, todo lo que nos ofrece la amplia gama de directivas del HTML. De esta forma, si queremos escribir algo sólo tenemos que ponerlo entre la directiva de BODY. 3
  4. 4. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez 3. Zona final. En esta zona, deberán de estar las directivas de cierre, esto es, las que llevan incluido la barra /. Asegurate que al final del documento encuentras las directivas </BODY> y </HTML>. Resumen de todo lo visto. 1. Siempre hay que acordarse que hay que comenzar la escritura de una página WEB con <HTML>. 2. Si deseamos que aparezca algo en la ventana del navegador al cargarse nuestra página, deberemos de incluir la cabecera del documento y en su interior poner el título. Esto se conseguía con <HEAD><TITLE> Título de la página</TITLE></HTML>. 3. Todo lo que queremos contar, los gráficos, el sonido, los enlaces, todo eso, ha de ir entre dos directivas, estas son <BODY> y </BODY>. 4. Debemos de asegurarnos que al final de la página leemos el cierre de la directiva HTML, esto es, que leemos </HTML>. Un ejemplo para aclarar todo A continuación tenéis un ejemplo que si lo metéis en un archivo .htm y lo cargáis en vuestro navegador leeréis quot;Se supone que tengo que salir en pantalla.quot;, como podéis comprobar es una chorrada. <HTML> <HEAD> <TITLE>Ejemplo de HTML</TITLE> <BODY> Se supone que tengo que salir en pantalla. </BODY> </HEAD> </HTML> En el siguiente capítulo veremos como sacar el texto más bonito ;-). 4
  5. 5. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Capítulo 3. Trabajando con texto. Bueno, después de aprender las cuatro bobadas para poder quot;sacar algoquot; en el navegador, vamos a aprender unos cuantos conceptos básicos de manejo del texto, que nos va a posibilitar el poder presentarlo de una forma elegante en pantalla. Antes de pasar a la materia en si, señalar que existen una serie de caracteres que no son representados en pantalla tal cual, es decir, que en algunas versiones antiguas de los navegadores, son presentados en pantalla de forma distinta a como nosotros esperábamos y sí, resulta que entre esos caracteres se encuentra nuestra querida eñe y los acentos. Para poder representarlos os pongo una tabla de correspondencia en la que podéis ver lo que tendréis que poner para representar este o aquel carácter que no se encuentre entre los estándar. Carácter Original Sustitución á &aacute; é &eacute; í &iacute; ó &oacute; ú &uacute; ñ &ntilde; ü &uuml;; ç &ccedil; < &lt; > &gt; & &amp; quot; &quot; Directivas BASEFONT y FONT. Ahora vamos a ver como poder cambiar el tamaño del texto que saquemos por pantalla así como el color del mismo. En lo referente al tamaño del texto contamos por un lado con la directiva <BASEFONT> que nos permite establecer un tamaño por defecto para nuestro texto, así, si ponemos por ejemplo: <BASEFONT size = 3> conseguiremos que todo el texto que vayamos a sacar tenga un tamaño de 3, ahorrándonos de esta manera un tratamiento particular de cada párrafo. La otra posibilidad con la que contamos a la hora de cambiar el tamaño del texto es la directiva <FONT> </FONT>. De esta forma, queremos que la frase quot;Tengo tamaño 3quot; salga por pantalla y con tamaño 3, tan sólo deberíamos de poner: <FONT size = 3> Tengo tamaño 3 </FONT> Sin embargo, la directiva <FONT> tiene la particularidad de poder aumentar o disminuir en x unidades el tamaño que se tenga establecido como base para el texto a sacar, es decir, si suponemos un tamaño base de fuente de valor 2 y queremos aumentarlo hasta 5, podríamos poner: <FONT size = +3> Tengo tamaño 3 </FONT> 5
  6. 6. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Y si quisiésemos disminuir hasta una unidad de 1: <FONT size = -1> Tengo tamaño 3 </FONT> Lógicamente, al acabar con </FONT> el tamaño del texto volvería a ser el establecido como defecto, bien por <BASEFONT> o bien por el que tenga el navegador. Otras de las posibilidades que nos ofrece la directiva FONT es la de poder cambiar el color del texto a elegir, para ello utilizaremos el clásico concepto del RGB, es decir, el color que vemos es una mezcla en determinadas unidades de R(rojo), G(verde) y B(Azul), para ello, tendremos hasta 256 colores distintos a elegir para el rojo, verde y azul. Para llevar esto a cabo pondremos: <FONT colorquot;#000000quot;> Texto a imprimir con color <FONT> A modo de ejemplo, te pongo estas combinaciones: Color Directiva FONT Rojo <FONT color=quot;#FF0000quot;> Verde <FONT color=quot;#00FF00quot;> Azul <FONT color=quot;#0000FFquot;> Negro <FONT color=quot;#000000quot;> Blanco <FONT color=quot;#FFFFFFquot;> Directiva P, CENTER, BR y HR para el tratamiento de los párrafos. Con la directiva <P> </P>, podremos trabajar con párrafos por separado, esto es, todo lo que esté entre la directiva citada, constituirá un párrafo independiente y además podremos alinearlo según nos convenga. La justificación del texto que vaya entre <P> y </P>, podrá hacerse a izquierda, al centro o a la derecha, par ello basta con añadir a la directiva el campo align=alineación_escogida. Para que lo veas más claro una tabla: Alineación Construcción Izquierda <P align=left> Centro <P align=center> Derecha <P align=right> Como podéis ver es bien sencillo formatear el texto mediante esta directiva. Antes de pasar a comentaros otras dos directivas útiles, decir que la directiva <P> formatea el texto por defecto a la Izquierda y que para el caso de querer formatear el texto al centro, también existe otra directiva que es <CENTER> con su correspondiente </CENTER>. Reseñar que en el caso de esta directiva, abarcaremos muchas más estructuras para centrar que con la ya explicada <P> Otras dos directivas que también os serán interesantes y de valiosa utilizad son por una lado <BR>, que se encarga de producir un salto de línea. Esta instrucción, no lleva su correspondiente pareja con la barra, es decir, es única. Por otro lado, se encuentra la directiva <HR> que producirá una línea en pantalla. Tampoco necesita de la directiva pareja con la barra invertida. Resaltando el texto. Ahora vamos a ver como poder incluir texto en negrita, cursiva, subrayado o incluso, como poder hacer títulos de distintos tamaños. 6
  7. 7. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Para empezar, en el caso de querer sacar el texto en negrita tan sólo deberemos de utilizar la directiva <B> con su correspondiente </B>, de esta manera, todo el texto que esté entre la directiva saldrá en negrita en la pantalla de tú navegador. Si lo que queremos hacer es que salga subrayado, pues podremos utilizar la directiva <U> y </U> de forma idéntica a lo que hacíamos con negrita. Ya por último, si queremos que salga en cursiva, deberemos de aplicar lo anterior con la directiva <I>. En el caso de querer resaltar de una forma aún más notoria el texto, es decir, si lo que queremos es hacer títulos o cabeceras deberemos de utilizar la directiva <Hx> con su correspondiente <Hx>, en donde x es igual a un valor entre 1 y 6. Con x=1 mostraríamos el texto al tamaño más grande y con x=6 al más pequeño. Reutilizando nuestros archivos ASCII. Si tienes un archivo en formato ASCII en el cual ya te has currado los tabulados, tablas, y demás historias y deseas pasarlo a tu página WEB sin necesidad de tener que teclearlo otra vez, la directiva <PRE> y su cierre </PRE>, te permiten poder poner el archivo ASCII que tengas conservando todas las características del mismo. La única pega de todo esto es que no podremos aplicar, lógicamente, los atributos que nos brinda el HTML. Ya para terminar, os recomiendo que hagáis un pequeño ejemplo por vuestra cuenta con lo visto en el capítulo este y así conocer mejor las directivas de las que hablamos aquí. 7
  8. 8. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Capítulo 4. Presentemos todo más elegantemente: Las Listas. Hasta ahora, hemos vi sto lo suficiente como para poder sacar texto de diferente color por pantalla, sin embargo, se echaba en falta, una forma de poder hacer listas ordenadas con las que estructurar nuestra información. ¿Un ejemplo?. Pues muy fácil, imaginar que queréis poner un menú, lógicamente, deberá de tener diferentes opciones, pues bien, gracias a las facilidades que nos ofrecen las listas, podremos mostrar dichas opciones, en pantalla, numeradas, marcadas, etc. ¿Qué no?, pues echar un vistazo al ejemplo que viene a continuación para que os aclaréis un poco más acerca de que van las listas que vamos a explicar: Menú 1. Menú 2. • Opción Primera. • Opción Primera. • Opción Segunda. • Opción Segunda. Cómo podéis ver, las listas nos permiten presentar texto de forma estructurada, siendo muy útiles cuando queremos hacer menús, listar índices, etc. Bien, una vez visto lo que es el concepto de lista, pasamos a materia. Listas Numeradas. Este tipo de lista es aquella que tiene sus componentes ordenados por un número indicativo. El ejemplo lo tenemos más arriba, en el Menú1. Con este tipo de lista, podemos hacer que el navegador vaya generando los números de los elementos que componen dicha lista, por nosotros. Esto nos puede ahorrar, en muchos casos, bastante tiempo. Para poder llevar a cabo la implementación de dicha lista, deberemos de utilizar la directiva <OL> con su correspondiente </OL>, ahora bien, dentro de dicha directiva, deberemos de poner el texto a listar, pero este, ha de ir encerrado en otra directiva, que es <LI>, esto es, <LI> elemento de la lista </LI>. Cómo lo mejor es ver esto con un ejemplo, os voy a poner el código necesario para generar una lista igual a la generada para el Menú 1 (ejemplo de arriba). Menú 1. <OL> <LI> Opción Primera </LI> <LI> Opción Segunda </LI> </OL> Como podéis ver, este tipo de listas no tienen ningún misterio. Bueno, para ser sinceros, sí tienen un secretito, y es que si después de la instrucción <OL> ponéis type igualado a un tipo de carácter de comienzo, la lista, en lugar de mostrar números, mostrará los componentes ordenados en función del carácter insertado. Así, si queremos que salga ordenada, nuestra lista, por las letras del abecedario pondríamos <OL type=a>, el resto sería igual. Como nota curiosa, si queréis sacar los listados en números romanos, no tenéis más que poner <OL type=I>. Listas Marcadas. 8
  9. 9. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Bien, este tipo de lista es idéntico al anterior, salvo que en lugar de ir poniendo los componentes de la lista con un identificador de ordenación, simplemente ponemos una marca, un punto. Como podéis observar más arriba, el Menu 2, es una lista de este tipo. El código necesario para generar este tipo de lista, sería igual que el del anterior, salvo que la directiva <OL> cambia a <UL>. Lo mejor será que ponga el código necesario para generar la lista del ejemplo del Menú 2, ahí va: Menú 1. <UL> <LI> Opción Primera </LI> <LI> Opción Segunda </LI> </UL> Creo que sobran más explicaciones. ¡A por el siguiente tipo de lista! Listas de Definiciones. Este tipo de lista nos va a permitir, generar estupendos formatos de texto en donde poner una explicación, una definición o similares. Sin ir más lejos son las que utilizamos para poner las explicaciones en la sección de quot;Bájate algo interesantequot;. Para que no te confundas, lo mejor será que veas un ejemplo de una lista de este tipo y después te explico cómo hacer ese mismo ejemplo, ¿ok?, pues vamos: Encabezamiento1 Toooodo el texto que nos habla acerca del encabezamiento. Como puedes observar, ¡es genial para hacer comentarios breves, definiciones y similares! Encabezamiento2 Bueno, pues aquí tenemos otro título más. Bueno, ¿Convencido de que puede sernos de utilidad en el futuro?, bien, pues vamos a ver como narices se hace eso. La implementación de este tipo de listas es prácticamente igual que las dos anteriores. Aquí también necesitamos una directiva general al estilo de <OL> y <UL>, esta directiva va a ser <DL> y su correspondiente </DL>. Como ya habrás adivinado, dentro deberá de ir el cuerpo, al igual que en las dos listas ya vistas, sin embargo, aquí deberemos de definir, para un elemento, dos cuerpo distintos, uno para poner el texto que va en la zona del encabezamiento y otro para poner texto que acompañara a dicho encabezamiento. El encabezamiento se codifica con <DT> Encabezamiento </DT> y el texto que lo define con <DD> texto </DD>. Lógicamente primero irá <DT> y después <DD>. Bueno, mejor vamos a ver el código del ejemplo. <DL> <DT>Encabezamiento1</DT> <DD>Toooodo el texto que nos habla acerca del encabezamiento. Como puedes observar, ¡es genial para hacer comentarios breves, definiciones y similares!</DD> <DT>Encabezamiento2</DT> <DD>Bueno, pues aquí tenemos otro título más.</DD> </DL> 9
  10. 10. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Capítulo 5. Usando los recursos de Internet. Bueno, detrás de este título se esconde la explicación para poder hacer que desde nuestras páginas seamos capaces de quot;saltarquot; a todos los recursos que nos ofrece, por un lado el hipertexto y por otro internet. Bien, Hasta ahora, hemos visto lo suficiente como para poder hacer una página que nos muestre el texto de una forma elegante, con distintos colores e incluso que sea capaz de ordenar nuestra información con imponentes listas. Sin embargo, ¿cómo puedo tener mi información en distintos archivos HTM para cargarlos al pinchar en un determinado sitio?, ¿Cómo puedo hacer que la gente me envíe un mail con sólo pulsar sobre el texto indicativo?, ¿Cómo, cuando tenga mi página, podré ofrecer un Link a...Macedonia ;) ?. Esa y otras respuestas aquí y ahora... Los enlaces hipertexto. Hombre, está clarísimo que, si algún día construimos nuestra página WEB, deberíamos de, no sólo sacar texto interesante (para algunas personas) por pantalla, también deberíamos de aprovecharnos de todo lo que es Internet, en definitiva, de todo lo que nos ofrece el HTM que, a modo de culturilla general te diré que son las siglas de HyperText Markup Language, hablando en cristiano el lenguaje de Hipertexto. Como tal, el hipertexto nos ofrece una serie de mecanismos que son, precisamente, los encargados de dotar a la WWW de la versatilidad y dinamismo que tiene. Gracias al hipertexto, podemos desde saltar por distintos documentos a realizar todas las operaciones que nos permite la ya citada World Wide Web, esto es, FTP, Telnet, Gopher, cargar gráficos, música, etc, etc. Nosotros, en este capítulo, vamos a aprender como acceder a servidores mediante FTP's, crear enlaces con otras páginas, cargar otros archivos HTML tanto dentro como fuera de nuestro servidor e incluso de pasada (ya que se hablará de ellos en el Capítulo 6), cómo cargar un gráfico que se encuentra en otro servidor distinto al que está nuestra página. ¡Dios mío, si todo se hace con una directiva!. Pues sí, con la directiva <A> y su correspondiente </A> se pueden hacer maravillas, tan sólo hay que variar sus parámetros. Así, mediante esta directiva, podremos realizar los ya citados enlaces a imágenes para insertarlas en nuestros documentos (se verá en el siguiente capítulo). Pero volvamos a lo que estamos, a nosotros ahora nos interesa para poder crear enlaces en nuestros documentos. Para empezar, vamos a partir de lo básico, esto es, cómo cargar otros archivos HTM desde nuestro servidor, o lo que es lo mismo, cómo hacer que cuando se pulse sobre una determinada palabra o frase se cargue otra página distinta a la actual. Bien, para hacer lo citado en el párrafo de arriba, deberemos de utilizar, junto a la directiva <A> el parámetro quot;HREFquot; lugar en dónde irá el nombre y ubicación (si está en el mismo que el que lo llama no hace falta) del archivo HTM. Como siempre, un ejemplo. A continuación, os pongo un código que haría que en la pantalla apareciera quot;Pulsa aquíquot; de tal forma que si se pulsara sobre la palabra aquí, se cargara el archivo HTM con nombre hola.htm. Pulsa <A HREF=quot;hola.htmquot;>aquí</A> 10
  11. 11. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez No hace falta ser quot;Jimy the programatorquot; para saber que lo que metamos entre <A>y </A> (llevando el parámetro HREF adecuadamente) será interactivo y nos permitirá pulsar sobre él, haciendo que se cargue el archivo indicado en HREF al pulsar sobre dicho texto. Fijaros, que el archivo que se carga se indica mediante HREF=quot;nombrearchivo.htmquot; y que, si habéis probado ya el ejemplo, en pantalla veréis la palabra aquí en azul y subrayada. Vaya, al igual que veis los menús en Macedonia. Ya se cargar archivos .HTM desde mi página, ahora... quiero ¡más!. Bien, para poder realizar Links, el sistema es idéntico, lo único que cambiará será que en lugar de poner el nombre de un archivo, pondremos, si no lo has adivinado ya, la dirección del Link. De esta manera, será muy fácil hacer que cuando tus lectores visiten tú página y quieras ofrecer más información sobre un tema que se encuentra en un Link que tú sabes, pueda, pulsando únicamente sobre la palabra que tú quieras, acceder a dicho Link. El ejemplo más claro, lo tienes en Macedonia, ¿Cómo te crees que hacemos nosotros para que, en la sección de Links, los lectores que así lo deseen puedan saltar a otro Link pulsando sobre la dirección?. Ahí va el código de un ejemplo que hace que al pulsar sobre la palabra Macedonia tu navegador te lleve ¡hasta aquí mismo!, lógicamente si estás ejecutándolo a la vez que te encuentras conectado a la Red. Para ir a la revista más frutera, sólo tienes que pulsar a... <A href=quot;http://www.geocities.com/SiliconValley/Park/9221quot;>Macedonia</A> Del mismo modo que podemos ofrecer de esa forma tan fácil Links desde nuestras páginas, también podemos hacer que la gente pueda hacer quot;download'squot; (quot;bajarsequot; cosas a su ordenador) desde la misma mediante la creación de enlaces FTP. Así, poniendo el código que sigue a continuación, accederíamos al servidor de la Universidad de Oviedo para hurgar entre los archivos que nos puede ofrecer y traérnoslos para nuestro sufrido disco duro. Pulse <A HREF=quot;ftp.petra.uniovi.esquot;>aquí</A> para acceder al servidor de la Facultad de Informática de Oviedo De esta forma, si se pulsara sobre la palabra quot;aquíquot;, accederías al servidor de la Facultad de Informática de Oviedo, el cual, por cierto, seguro que andará jodidillo como es habitual ;). Como os cité al comienzo del artículo, también te gustará que la gente pueda mandarte un e- mail con sólo pulsar sobre una palabrita que ponga eso, e-mail. Tampoco debemos ir muy lejos, la directiva <A> de toda la vida te resolverá el problema, así, te voy a poner el código que hace falta para hacer que al pulsar sobre Kapit, puedas mandarme un mail ;) <A HREF=quot;mailto:i9808685@petra.euitio.uniovi.esquot;>Kapit</A> Algunos truquillos y avisos a la hora de utilizar el FTP. Por experiencia, si quieres hacer que, desde tú página, la gente pueda bajarse tus archivos .ZIP, en lugar de poner un enlace de tipo FTP, prueba a poner en el parámetro HREF simplemente el nombre del archivo .ZIP. Por ejemplo, HREF=quot;datos.zipquot;. Te evitarás problemas. Por otro lado, hay veces que, poner enlaces a otras páginas que poseen este o aquel gráfico o simplemente un archivo .HTM, que te ocuparía mucho espacio en tú página, podrán ralentizar todo un poquito y ya sabes que cuando se trabaja en Internet, a no ser que tengas un servidor muy rápido, es una chuminada andar haciendo experimentos con miles de gráficos y gif animados, pero, eso es otra historia que será contada en el capítulo 6. Hasta entonces ya podéis ir haciendo, al menos, páginas curiosas. 11
  12. 12. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Capítulo 6. Hagamos todo más profesional con las tablas. Aprender a utilizar las tablas para la confección de una página de calidad es algo esencial ya que, como vamos a ver dentro de unos momentos, las tablas nos van a permitir no sólo realizar una maquetación más profesional de nuestra página WEB sino que, además, se van a convertir en un estupendo aliado para el trabajo con gráficos. Sin más, comenzamos el quot;avistamientoquot; a las tablas. Lo que tenemos que tener claro. Antes de empezar a ver cómo podemos construirnos nuestras propias tablas, tenemos que tener claro qué es una tabla para poder ver mejor sus ventajas a la hora de utilizarlas para maquetar nuestra página WEB. Una tabla no es más que filas y columnas en donde, el cruce de cada fila y columna produce un hueco o espacio denominado celda. En dichas celdas, podremos meter información ya sea en forma de texto o gráfica constituyendo, así la unidad mínima de que se compone cualquier tabla, es decir, esto que tenéis a continuación es una tabla. Fila 1 Columna 1 Fila 1 Columna 2 Fila 2 Columna 1 Fila 2 Columna 2 Fila 3 Columna 1 Fila 3 Columna 2 Lo que estáis viendo, es el ejemplo más quot;bruscoquot; de tabla que se puede construir ya que, ni siquiera están definidos los atributos del texto que se encuentran dentro de nuestra tabla sin embargo, los más imaginativos de vosotros, habréis observado, que las posibilidades que nos brinda una tabla son enormes ya que podremos presentar nuestra información ordenada como queramos, situándola en las celdas que estimemos oportunas dependiendo de en que fila o columna queremos mostrar la información. Como veremos a continuación, podremos construirnos una tabla con la sencilla directiva <TABLE>, la cual, se podrá combinar con todas las directivas ya vistas para poder ofrecer todas las posibilidades que hemos aprendido pero dentro de una tabla perfectamente ordenada y sincronizada con la información que queremos representar. Aprendiendo a utilizar la directiva <TABLE> Ya se ha indicado en el párrafo de más arriba que, para poder construir una tabla tan sólo hay que utilizar la directiva <TABLE>, la cual, lógicamente, deberá de llevar su correspondiente </TABLE> para indicar al navegador dónde acaba la tabla que estamos definiendo. A su vez, dentro de la directiva <TABLE>, deberemos de saber utilizar dos directivas más, una de ellas se encargará de definir las columnas de una fila y la otra hará lo propio con las filas creando una nueva cuando sea invocada, así, si utilizamos la directiva <TD> con su correspondiente </TD>, poniendo información dentro, ya tendremos definida una celda o columna de la fila correspondiente de nuestra tabla mientras que, si ponemos la directiva <TR> ordenaremos al intérprete de nuestro navegador, que cree una nueva fila. Decir, que para la directiva <TR> no hay que añadir, como cabría esperar, </TR> ya que no hace falta, se pone si más y se crea la nueva fila. Cómo lo mejor es un ejemplo, he decidido poneros el código necesario para crear la tabla que os ofrecí más arriba, ahí va: <CENTER><TABLE border=quot;2quot;> <TD>Fila 1 Columna 1</TD> <TD>Fila 1 Columna 2</TD> <TR> <TD>Fila 2 Columna 1</TD> <TD>Fila 2 Columna 2</TD> <TR> 12
  13. 13. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez <TD>Fila 3 Columna 1</TD> <TD>Fila 3 Columna 2</TD> </TABLE>/CENTER> Todo lo que podéis ver está explicado, utilizamos la directiva <CENTER> para centrar la tabla en pantalla, aprovechándonos, de que podemos combinar sin ningún tipo de problema las directivas que vamos conociendo. Si os fijaís un poco en el ejemplo, veréis que la directiva <TABLE> va acompañada de un atributo llamado border, es decir, lo que tenemos es <TABLE border=quot;2quot;>. Bien, nos encontramos con un claro ejemplo de atributos añadidos a directivas (como era el caso del atributo align que añadíamos a la directiva <P> por poner un ejemplo). Con el atributo border=quot;númeroquot;, conseguimos que nuestras tablas sean capac es de mostrar un borde para que, el lector, pueda diferenciar las filas y columnas de nuestra tabla perfectamente. Habrá ocasiones en las que deseemos mantener invisibles los bordes de nuestras tablas (un caso sería el de la maquetación de un texto en columnas), para ello sólo tendremos que eliminar el atributo border de la directiva <TABLE> y las líneas divisorias desaparecerán. El atributo border, podrá estar igualado al valor de grosor que nosotros queramos dar a nuestra tabla, cuanto más valor, más grosor tendrá. En el caso de poner border sin nada más, la tabla se creará con un borde simple. A continuación, os voy a poner la tabla que estamos utilizando pero sin la directiva border para que veáis el efecto que produce ver una tabla sin bordes. Fila 1 Columna 1 Fila 1 Columna 2 Fila 2 Columna 1 Fila 2 Columna 2 Fila 3 Columna 1 Fila 3 Columna 2 Las directivas <CAPTION> y <TH> Pese a que no requieran excesivos esfuerzos para su implementación, he decidido ponéroslas a parte, para que así, no veáis todo quot;tan de golpequot;. Con este par de directivas, podremos poner títulos a la tabla y a las columnas. El título a la tabla que estemos creando, se insertará con la directiva <CAPTION> y su correspondiente </CAPTION> justo después de haber comenzado a defi nir la tabla, esto es, justo después de haber definido la directiva <TABLE>. Lógicamente, entre la directiva <CAPTION> tendrá que ir la información que nosotros queramos que sea el título de nuestra tabla. Por otro lado, podremos dar título a cada columna de nuestra tabla para ello, deberemos de poner el título correspondiente a cada una de las columnas con la directiva <TH> y su correspondiente </TH>, es decir, habrá que poner tantas directivas <TH> y </TH>, como columnas existan en nuestra tabla y el título, deberá de ir, lógicamente, entre dichas directivas, también, es importante añadir que, después de poner todas las directivas <TH>, deberemos de poner una <TR> para empezar a trabajar, en serio, con nuestra tabla. Así, para crear una tabla como esta: Macedonia Magazine Datos de la columna 1 Datos de la columna 2 Fila 1 Columna 1 Fila 1 Columna 2 Fila 2 Columna 1 Fila 2 Columna 2 Fila 3 Columna 1 Fila 3 Columna 2 Habría que poner el código siguiente: <CENTER><TABLE border> <CAPTION>Colabora con Macedonia Magazine</CAPTION> <TH>Datos de la columna 1</TH> 13
  14. 14. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez <TH>Datos de la columna 2</TH> <TD>Fila 1 Columna 1</TD> <TD>Fila 1 Columna 2</TD> <TR> <TD>Fila 2 Columna 1</TD> <TD>Fila 2 Columna 2</TD> <TR> <TD>Fila 3 Columna 1</TD> <TD>Fila 3 Columna 2</TD> </TABLE>/CENTER> Pero... ¿Cómo controlo la información? Seguro que os habréis preguntado cómo poder hacer para que vuestra información, salga de un color determinado en la tabla o tenga un tamaño determinado, etc. La respuesta es bien fácil ¡Cómo siempre!. Sí, tan sólo tenemos que aplicar todo lo que sabemos para formatear nuestro texto correctamente, pero dentro de una celda, ya sea la de definición del título de la tabla, de las columnas o de las propias celdas. Es bien fácil, pero más trabajoso e indispensable. De esta forma, si quisiésemos que la tabla del ejemplo anterior saliese mucho más quot;profesionalquot; y acorde con el tamaño de letra que estamos utilizando, esto es, así: Macedonia Magazine Datos de la columna 1 Datos de la columna 2 Fila 1 Columna 1 Fila 1 Columna 2 Fila 2 Columna 1 Fila 2 Columna 2 Fila 3 Columna 1 Fila 3 Columna 2 Tan sólo tendríamos que poner el código siguiente: <CENTER><TABLE border> <CAPTION> <FONT color=quot;#FF0000quot; size=quot;3quot; face=quot;arialquot;> Colabora con Macedonia Magazine </FONT> </CAPTION> <TH> <FONT color=quot;#00FFFFquot; size=quot;2quot; face=quot;arialquot;> Datos de la columna 1</FONT> </TH> <TH> <FONT color=quot;#00FFFFquot; size=quot;2quot; face=quot;arialquot;> Datos de la columna 2</FONT> </TH> <TD> <FONT color=quot;#000000quot; size=quot;2quot; face=quot;arialquot;> Fila 1 Columna 1 </FONT> </TD> <TD> <FONT color=quot;#000000quot; size=quot;2quot; face=quot;arialquot;> Fila 1 Columna 2 </FONT> </TD> <TR> 14
  15. 15. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez <TD> <FONT color=quot;#000000quot; size=quot;2quot; face=quot;arialquot;> Fila 2 Columna 1 </FONT> </TD> <TD> <FONT color=quot;#000000quot; size=quot;2quot; face=quot;arialquot;> Fila 2 Columna 2 </FONT> </TD> <TR> <TD> <FONT color=quot;#000000quot; size=quot;2quot; face=quot;arialquot;> Fila 3 Columna 1 </FONT> </TD> <TD> <FONT color=quot;#000000quot; size=quot;2quot; face=quot;arialquot;> Fila 3 Columna 2 </FONT> </TD> </TABLE>/CENTER> Como podéis observar, no es nada del otro mundo, es sólo combinar todo lo que hemos aprendido para realizar una salida de textos quot;dignaquot; pero poniéndolo dentro de la tabla. ¡Por cierto!, acordaos de cerrar la directiva <P> justo al comenzar la construcción de una tabla y de volver a abrirla cuando acabéis de definirla sino queréis que, el texto que venga después de definir a nuestra tabla, se vaya a cazar champiñones ;-). Consideraciones finales La construcción de una tabla, es mucho más deseada según avanzamos en el diseño de nuestra página WEB. Para ello, disponemos de muchos más secretos y atributos que añadir a la directiva <TABLE> que nosotros hemos puesto aquí pero eso, os tocara a vosotros investigar por la multitud de tutoriales que existen en la red. Lo básico ya lo habéis aprendido y con la práctica, aprenderéis a dominar la localización de vuestras tablas. Hay multitud de utilidades que dar a las tablas, podemos añadir enlaces dentro de sus celdas ofreciéndolos de un modo ordenado (tan sólo tenéis que aplicar lo que vimos en el capítulo 5 a las celdas de vuestras tablas), colocar gráficos perfectamente maquetados, como veremos en el capítulo siguiente, realizar presentaciones de nuestros texto en forma de columnas, como si se tratase de un periódico, ofrecer catálogos, etc, etc. Tan sólo tenéis que poner a prueba vuestra imaginación de diseñador y utilizar las tablas, y probar los atributos que ya hemos estudiado junto a la directiva <TABLE>... ¿qué pasaría si pusiera <TABLE align=quot;leftquot;>?. ¡Probadlo! 15
  16. 16. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Capítulo 7. Y llegamos a los gráficos... ¡Al fín los gráficos!, suspirareis muchos... Sí, una página WEB sin gráficos, resulta de lo más soso que os podáis imaginar, si no llama la suficiente atención visual del visitante, este lo más probable que haga es marcharse y olvidar para siempre la dirección salvo que, sepa de antemano lo que se va a encontrar, claro. En este capítulo del curso acelerado de HTML de Macedonia, vamos a abordar qué formatos gráficos podemos utilizar en nuestras páginas WEB, sus peculiaridades, cómo insertarlos y, por último, algunas precauciones sobre su quot;uso y abusoquot;. Sin más, comenzamos. Los dos formatos gráficos más utilizados. En el mundo de la informática, programación, etc, existen una grandísima cantidad de formatos gráficos, realmente, podríamos llegar a decir que, existe un formato gráfico para cada tipo de utilidad que necesite un programador, dependiendo de montones de factores. Sin embargo, por fortuna, existe un estándar de utilización de formatos cuando nos movemos en la creación de una página WEB, así, siempre utilizaremos dos formatos o bien .GIF o bien .JPG, los cuales, como vamos a ver a continuación van a tener una serie de características que los van a diferenciar para determinados tipos de cometido y tareas a la hora de dar vistosidad a nuestra página WEB. Antes de proceder con el análisis de cada tipo de archivo decir que, si posees gráficos que se encuentran en otro formato como puede ser un BMP, un PNG, un TIF, etc, existen multitud de programas Shareware que te permiten hacer cambios de un formato a otro, sin ir más lejos, tenéis el veterano Graphics Work Shop (GWS para los amigos), el SEA , Paint Shop Pro, Corel, Adobe, etc... (si bien estos dos últimos ya son comerciales). Análisis del formato GIF. Los más viejos del lugar, sabrán de sobra que este formato fue creado por la empresa Unisys hace ya, mucho tiempo y que con el paso del tiempo, ha ido evolucionando hasta ser un formato con un nivel mucho mayor de complejidad que el original GIF con el que todo nosotros solíamos contemplar los gráficos cuando, 256 colores era todo un lujo.. :,-) El formato GIF utilizado en nuestros días como perfecto aliado en la construcción de una página WEB, posee las siguientes características: Permite la utilización de fondos transparentes. Emplea un máximo de 256 colores. Permite la posibilidad de crear animaciones mediante la inserción de varias imágenes, una detrás de otra, en el archivo. Esta basado en una compresión que es muy elemental, pero es compresión a fin de cuentas, llamada LZW. La utilización de gráficos de tipo GIF, nos será de muchísima utilidad para poder poner iconos, gráficos que no tienen forma cuadrada y que, mediante la transparencia de su fondo, hacen que la página adquiera toques muy profesionales, para los típicos y sorprendentes gráficos animados, etc. Sin embargo, no busquéis elevada calidad de imagen con este archivo gráfico porque no se ha hecho en absoluto para ello. El máximo de colores que soporta son 256 y su cometido en la página WEB no es más que el de dar vistosidad ayudando a realizar la maquetación pero, en ningún caso, el de mostrar gráficos de gran calidad como pueden ser fotografías escaneadas, para esos tendremos, como vamos a ver a continuación, el formato JPG. Antes de continuar, no podría pasar sin recomendaros que os hicierais con un buen programa para la realización de gráficos .GIF animados, existen multitud de ofertas en el mundo 16
  17. 17. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Shareware, sin ir más lejos, está el GifIcon que lo podéis encontrar en la siguiente dirección: http://www.mindworkshop/alchemy/gificon.html, es súper sencillo de manejar y tiene unos resultados altamente interesantes. Análisis del formato JPG Este formato, tiene una grandísima ventaja de cara al GIF, y es la derivada de poder manejar simultáneamente hasta 16,7 millones de colores siendo, así, el formato ideal para poder representar gráficos de alta calidad y que se escapen, totalmente, de las pretensiones de un GIF. Otro de los puntos fuertes del formato JPG es el que posibilita la grabación de nuestros gráficos en distintos modos de calidad de esta manera, podemos sacrificar un poco de calidad visual de nuestro gráfico y ganar en espacio. Esto último es muy importante por dos razones la primera porque en la práctica totalidad de las ocasiones (por lo menos eso es lo que nos pasa a nosotros) el espacio que tengáis en vuestra página WEB será muy limitado y tendréis que medir quot;al dedilloquot; lo que vais poniendo y por otro lado, porque a menor tamaño menos tardará el navegador que utilicéis en reconocer el archivo gráfico y mostrároslo por la pantalla y creerme, hay multitud de páginas que fracasan precisamente en el tema de la lentitud debido a que sus autores deciden quot;atiborrarlaquot; de archivos gráficos que hacen la carga terriblemente lenta para los navegadores produciendo que el quot;navegantequot; decida dar antes al botón de Stop que estar sentado y esperar una eternidad a que la página tenga el aspecto visual correcto. ¿Y cómo los inserto en mi página? Bien, la inserción de gráficos en nuestras páginas es una de las tareas más fáciles que existe ya que sólo tenemos que utilizar una directiva llamada <IMG> para realizar tal acción cabe decir que junto a tal directiva deberemos de poner el nombre de nuestro gráfico y que para eso utilizaremos la etiqueta src=quot;nombre_del_gáficoquot;. Por ejemplo, si quisiésemos sacar por pantalla el logotipo de Macedonia y centrado en pantalla, es decir, hacer algo así: Tan sólo deberíamos de poner el código HTML siguiente: <CENTER> <IMG src=quot;logo.gifquot;> </CENTER> En dónde “logo.gif” es nombre del archivo que contiene dicho gráfico. Como podéis ver es muy fácil mostrar gráficos en pantalla lógicamente, existen más atributos para poner a <IMG>, pero mejor que los miréis con una referencia de todas los comandos del lenguaje HTML ya que, como sabéis, el cometido de este curso es aprender hacer una página desde el nivel más básico no enseñaros todo lo que existe sobre HTML. Otra de las cosas que considero importante, es el tema de poder crear enlaces a otras páginas mediante la pulsación de un gráfico además, aprovecharé y os enseñaré una cosa más para que cuando ofrezcáis el enlace a otra página, esta sea accedida en una nueva ventana de nuestro navegador evitando el incordio que supone ver cómo la página a la que ofreces el enlace te quot;machacaquot; la tuya. Lógicamente, esto sólo nos interesará para cuando ofrezcamos Links a otras páginas, nunca para estar navegando en la nuestra. Así, si quisiésemos ofrecer un link a la sección quot;Colabora con nosotrosquot; de esta página pulsando sobre el logotipo de Macedonia... ¡Púlsalo ya!: 17
  18. 18. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Lo que deberíamos de poner sería: <CENTER> <A HREF=quot;index09.htmquot; target=quot;_newquot;> <IMG src=quot;logo.gifquot;> </A> </CENTER> Podéis observar que ponemos un atributo llamado target con el valor _new para hacer que la página a la que ofrecemos el enlace se cargue en una nueva ventana del navegador. De no haberlo puesto, machacaría lo que estáis viendo mostrando el enlace aquí mismo. Poniendo gráficos de fondo Poner gráficos de fondo, puede ser una estupenda manera de realzar o... ensombrecer nuestro texto en pantalla, me explico. Ahora mismo, si estas leyendo Macedonia con 16 millones de colores, podrás observar que el fondo en el que aparecen los artículos es salmón texturizado mientras que, en el que sale el menú es de mármol. Esto se consigue utilizando un pequeño gráfico de fondo el cual, se va repitiendo en todas las direcciones simulando que es un gran gráfico que hemos puesto de fondo.. Sin ir más lejos el fondo que tienes en el menú no es más que el gráfico siguiente repetido, sin parar, hasta que ya no hay texto, para conseguir tal efecto, tan sólo tenemos que añadir justo al comienzo de nuestro documento la siguiente instrucción: <BODY background =quot;nombre_archivo.extensiónquot;> En dónde el archivo será el gráfico que vosotros elijáis para poner de fondo. Como podéis ver es muy sencillo dar fondo a vuestras páginas pero, recordad, intentar elegir gráficos pequeños y que mantenga coherencia entre todos sus lados para que, el juntarlos produzca algo homogéneo. Consideraciones finales La inclusión de gráficos en nuestras páginas es algo imprescindible si queremos que, al menos, tenga oportunidad de llamar la atención del usuario que está en esos momentos visitándola. El uso de archivos GIF animados se ha extendido enormemente y siempre es agradable observar esta o aquella animación en la pantalla del monitor al igual, que alguna imagen de alta calidad para realzar la página. Si bien, hay que ser cautos y no aprovecharse de los gráficos pues, un uso indiscriminado de estos acabarán por ralentizar nuestra página y hacer, como ya indiqué por algún sitio del artículo, que el usuario se acabe marchando al estar esperando un tiempo casi interminable para ver la pantalla de nuestra página en condiciones. Otro de los aspectos a tener en cuenta, es el uso de las ya vistas tablas con los gráficos. Esta combinación, produce efectos estupendos de maquetación con respecto al texto y es cita obligada de prueba a todo WEB Master que se precie ;). Por último, recodar que si utilizáis gráficos .JPG a veces os será mejor sacrificar calidad que cargar con todo el tamaño original del archivo. Del mismo modo, intentar encontrar gráficos de fondo pequeños y que mantengan, si están unidos, la coherencia entre sí, lo demás con un poco de práctica y una guía con los comandos posibles para utilizar los gráficos, lo tenéis chupado ;). 18
  19. 19. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Capítulo 8. Aprende el uso y abuso de los frames. Creo que después de este artículo dedicado a los frames ya podréis hacer algo exactamente igual a lo que es ahora mismo MACEDONIA. Después de este capítulo se realizará uno más dedicado a ver por encima todo lo que no hemos incluido en este curso acelerado (de ahí lo de acelerado) pero que debes de tener bien presente que existe y está esperando que lo exprimas al máximo. Sin más, comenzamos este penúltimo capítulo del curso de HTML. ¿Qué es eso de los frames? Los frames constituyen una interesantísima forma de quot;modelarquot; nuestras páginas WEB ya que nos permiten dividir en distintas zonas nuestra página. El ejemplo más claro de uso lo tenéis a la hora de diseñar vuestras páginas con un menú en donde poner las opciones de la misma y, en otro sitio aparte, la información a ofrecer (como en MACEDONIA). La característica principal de todo esto radica en poder utilizar cada una de dichas zonas que quot;hemos creadoquot; como si fuesen páginas WEB autónomas pues cada una irá cargando toda su información (gráficos y archivos HTML) en su propia parcela dejando el resto de las zonas de pantalla intactas. Un ejemplo de esto lo tenéis delante de vuestros ojos. Cuando en MACEDONIA elegís una opción del menú la única zona de la pantalla que se actualiza es la que está a la derecha de vuestra pantalla dejando la del menú sin tocar. Como podéis apreciar, el uso de los frames es extremadamente útil. Las distintas zonas de la pantalla en las que podemos dividir nuestra página se denominan paneles y, en cada panel creado, tendremos que trabajar con código HTML independiente. De aquí es fácil deducir que en una página con n paneles habrá n documentos HTML cargados simultáneamente. Ahora mismo MACEDONIA tiene cargado un total de dos documentos HTML uno para el menú y el otro para el panel destinado a la información, en el que estáis leyendo vaya. ¡Manos a la obra! Para empezar a utilizar frames es necesario definir un archivo HTML en el que se definan, valga la redundancia, aquellos ficheros HTML que deberán de aparecer en los frames que nosotros creemos. Este fichero suele recibir el nombre del tipo index.htm y lo único que contendrá, como ya he citado, es la información relativa a los frames que vamos a utilizar y cuales van a ser los archivos HTML que carguemos en dichos frames. Para llevar todo esto a la práctica vamos a necesitar de muy pocas directivas como vamos a ver a continuación. Con la directiva <FRAMESET> tendremos la oportunidad de dividir la pantalla de nuestro navegador favorito en las zonas que estimemos nos sean necesarias. Lógicamente podremos realizar divisiones tanto verticales como horizontales. Junto a la directiva <FRAMESET> deberemos de utilizar un par de parámetros más que son ROWS y COLS. Con el parámetro ROWS podremos dividir la pantalla en zonas horizontales. A su vez, también podremos determinar el tamaño de cada una de ellas medido siempre en tanto por ciento (también podremos utilizar valores decimales de tanto por ciento para ello bastará con poner la coma ',' separando ambas partes, por ejemplo 22,35%) haciendo incluso más fácil y cómoda su utilización. Un ejemplo de cómo poder dividir la pantalla del navegador a la mitad sería la siguiente: <FRAMESET ROWS=quot;50%,50%quot;> ....... </FRAMESET> 19
  20. 20. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Como podéis comprobar es muy fácil realizar una división de pantalla. Además, también tenemos la oportunidad de dejar al navegador que calcule por si mismo las dimensiones de las zonas (en cuanto a porcentaje a cubrir) de las parcelas que creemos. Para ello sólo tendremos que poner un asterisco y el resto se realizará automáticamente. Ahí va un ejemplo y, después, su explicación para ver todo más claro. <FRAMESET ROWS=quot;20%,40%,*quot;> ....... </FRAMESET> Esa sencilla instrucción <FRAMESET> se va a encargar de dividir la pantalla en tres zonas horizontales diferentes. Una de ellas, la primera, ocupará un 20% del total de pantalla, la otra un 40% y, por último, la tercera zona ¿qué ocupará?. Muy sencillo, ocupará simplemente el resto que será de 40%. En el caso de que queramos dividir la pantalla de forma vertical deberemos de utilizar el parámetro COLS que funciona exactamente igual que lo visto para la ROWS, es decir, el ejemplo siguiente divide la pantalla en dos zonas verticales. <FRAMESET COLS=quot;50%,50%quot;> ....... </FRAMESET> Cómo indicarle al navegador la división. Una vez que hemos aprendido cómo dividir nuestra página para mostrar la información en diferentes zonas, deberemos de saber cómo indicarle al navegador que queremos utilizar la división que tenemos en mente. Para ello utilizaremos un archivo .HTM que contendrá todas las divisiones que deseamos realizar en nuestra página así como los archivos HTML que se cargarán nada más que sean inicializadas. En dicho archivo meteremos, por tanto, las órdenes relacionadas con la división de la pantalla (descrita anteriormente) junto a las relacionadas con la carga de los archivos .HTM que se llevarán a cabo con la directiva <FRAME> y los parámetros SRC, NAME, SCROLLING y NORESIZE. Todas ellos son opcionales salvo SRC que deberá de estar presente obligatoriamente. Pero vayamos por partes: SRC. Esta directiva nos va a servir para indicar el nombre del archivo que se cargará en el primero de los planos que creemos. De esta forma si ponemos el parámetro así: <FRAME SRC=quot;hola.htmquot;> El primero de los planos de que dispongamos se verá cargado con el archivo hola.htm. NAME. Con NAME podremos dar un nombre a el plano que creemos. La forma de dar el nombre será una cadena de caracteres entrecomillada, es decir: <FRAME SRC=quot;hola.htmquot; NAME=quot;plano1quot;> Como veremos más adelante, la asignación de nombres a los planos será muy importante pues nos permitirá poder volcar la información que seleccionemos en un plano o frame determinado a otro distinto. Esto, sin ir más lejos, es lo que ocurre en nuestro menú. NORESIZE. Este parámetro opcional nos asegura que el usuario no podrá redimensionar el frame, es decir, quot;protegequot; al frame de posibles manipulaciones por parte del usuario para hacer que se comporte como una especie de ventana cambiante, eso sí, cambiante en cuanto al tipo de división que tenga (podremos hacer que el plano sea más ancho o alto dependiendo de cómo esté realizada la división). SCROLLING. Dicho parámetro podrá tener tres valores distintos que serán yes, no y auto. Han de ir entrecomillados y sirven para indicar si se deben de poner o no las barras de desplazamiento. La opción yes nos las habilitará, la opción no nos las quitará y, por último, con auto dejaremos en manos del navegador la decisión, es decir, si hay más texto del que se puede ver en pantalla se pondrán y viceversa. La forma de poner el parámetro SCROLLING y, el anteriormente explicado, NORESIZE podría ser: 20
  21. 21. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez <FRAME SRC=quot;hola.htmquot; NAME=quot;plano1quot; NORESIZE SCROLLING=quot;autoquot;> Esta instrucción nos cargaría en un plano el archivo hola.htm. Además de no permitir al usuario modificar el tamaño del mismo, crear barras de desplazamiento, si la información no entrara y etiquetar el plano con el nombre plano1. Una vez analizadas todas las opciones para poder dividir a nuestras anchas la pantalla os pongo lo que podría ser el archivo destinado a cargarlas el cual, os vuelvo a repetir, deberá de ser el que se llame al entrar a vuestra página. En nuestro caso os diré que el primer archivo que es llamado es uno con el nombre de index.htm que contiene las definiciones necesarias para realizar la división en pantalla de nuestra página. Os pongo a continuación nuestro archivo index.htm que utiliza todo lo v isto hasta ahora. <HTML> <HEAD> <TITLE> MACEDONIA Magazine </TITLE> </HEAD> <FRAMESET COLS=quot;23%,*quot;> <FRAME SRC=quot;index0.htmquot; NAME = quot;MENUquot; SCROLLING =quot;autoquot; NORESIZE> <FRAME SRC=quot;hola.htmquot; NAME = quot;TEXTOquot; SCROLLING =quot;autoquot; NORESIZE> </FRAMESET> <BODY> </BODY> </HTML> Como podéis comprobar no tiene ningún misterio... La etiqueta <BASE> Ya para finalizar, vamos a ver cómo poder hacer que desde un frame o plano podamos cargar la información en otro diferente. Antes de continuar, debemos de tener bien claro que hasta ahora, al realizar el enlace desde una página o frame concreto a un archivo HTML (independientemente de su localización, esto es, de si es de nuestra propia página o de otra distinta), se realizaba quot;machacandoquot; la información de la parcela o frame en el que estábamos, o lo que es lo mismos, desde el que realizábamos tal petición de carga. Pues bien, ahora vamos a aprender cómo podemos beneficiarnos de los frames para poder realizar cargas de información en los distintos frames de que dispongamos, es decir, veremos cómo poder construirnos una página que tenga un menú a la izquierda y muestre la información a la derecha.. Uhmmm ¿en qué página he visto yo eso? ;-). Si volvéis a repasar los atributos que se pueden poner a un frame que creemos, encontraréis que, de entre ellos, había uno destinado a poner el nombre del mismo. Recordémoslo: <FRAME SRC=quot;index0.htmquot; NAME = quot;MENUquot; SCROLLING =quot;autoquot; NORESIZE> Si os fijáis, en la directiva FRAME, el atributo NAME = quot;MENUquot; lo que hacía era dar un nombre al frame que vamos a definir, pues bien, si nosotros al comienzo de dicho frame, el cual cargará en el ejemplo el archivo index0.htm, ponemos <BASE TARGET=quot;MENUquot;>, haremos que la información siempre se cargue en la parcela o frame al que habíamos llamado MENU y que, en este caso, va a ser el mismísimo lugar en dónde se ha cargado el archivo quot;index0.htmquot;, es decir, no hemos conseguido nada nuevo... Sin embargo, ¿qué pasaría si en lugar de poner el nombre que habíamos dado al frame en el que se carga el archivo index0.htm ponemos el de otro frame?. Pues muy sencillo, que habremos conseguido volcar el quot;linkquot; o archivo .htm 21
  22. 22. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez justo en el lugar que a nosotrosotros más nos interesa en estos momentos, en otro frame distinto al actual. Un ejemplo antes de marchar. Con esto, ya habremos logrado quot;configurarquot; una ventana con las mismas quot;facilidadesquot; que puede ofrecer tanto Macedonia como cualquier otra página de las que circulan por Internet. Los frames son un estupendo aliado a la hora de separar y ofrecer la información de la forma más ordenada posible, si bien, todo en abuso es malo y tal y como reza el título de este capítulo, el abuso puede producir que nuestra página sea un cúmulo de frames molestos que sólo dejen vislumbrar la información en porciones muy reducidas de nuestro navegador. Os lo digo ahora y no me cansaré de avisaros, ojo con el uso que dais a los frames pues pueden mandar quot;al carajoquot; vuestra página. Recordad, no es bueno utilizar ni muchos frames ni muchos gif animados, estáis avisados. Bien, como creo que ya toca ofrecer un ejemplo más claro de todo lo explicado os mostraré un ejemplo con la cabecera de la definición de frame y, después, el código de los dos archivos que utiliza. Pensad que en el caso de Macedonia realmente es así, utilizamos un archivo .htm (que es el que se lanza cuando entráis en el servidor) que crea dos frames y, en cada uno de ellos, carga su archivo .htm correspondiente (index0.htm y hola.htm). En fín, utilizando el esquema de Macedonia, ahí va: Código del fichero index.htm <HTML> <HEAD> <TITLE>Creador de frames. index.htm </TITLE> </HEAD> <FRAMESET COLS=quot;25%,75%quot;> <FRAME SRC=quot;index0.htmquot; NAME = quot;MENUquot; SCROLLING =quot;autoquot; NORESIZE> <FRAME SRC=quot;hola.htmquot; NAME = quot;TEXTOquot; SCROLLING =quot;autoquot; NORESIZE> </FRAMESET> <BODY> </BODY> </HTML> Código del fichero index0.htm <HTML> <HEAD> <TITLE>Frame lado izquierdo. index0.htm</TITLE> </HEAD> <BODY><h2>Texto de la frame izquierda </h2> </BODY> </HTML> Código del fichero index1.htm <HTML> <HEAD> <TITLE>Frame lado derecho. index1.htm</TITLE> </HEAD> <BODY><h2>Texto de la frame derecha </h2> </BODY> 22
  23. 23. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez </HTML> Al interpretarse el archivo index.htm se crearán dos frames en pantalla, uno a la izquierda y otro a la derecha. El del lado izquierdo ocupará sólo un 25% del total de la pantalla mientras que el del lado derecho estará quot;apoderadoquot; de un 75% utilizable. Y llegamos, nuevamente, al final. Pues sí amigos, nuevamente acabamos otro capítulo más de este mini cursillo de html, y también, todo los grandes temas que quería tratar. Para el siguiente número del fanzine daré por concluido el curso introductorio hablando de todas esas cosas que quedan en el tintero por tratar y que, por causa de tiempo y conocimientos no puedo llevar a cabo (y ahora mismo estoy pensando en Java). Por eso, voy a lanzar ya la petición de continuidad de este curso. Si hay alguien de los que está leyendo esto que sea capaz de llevar una continuación del mismo ofreciendo temas más avanzados y profundizando mucho más en todos los aspectos tratados pues tiene mi invitación. Lo dicho, en el próximo número concluimos el primer curso de Macedonia. 23
  24. 24. Cursos y Tutoriales / Stratos-ad.com Curso acelerado de HTML de Fernando Rodríguez Capítulo 9. Final del curso acelerado. Como ya se anunció en el capítulo de la edición pasada, el cursillo rápido sobre HTML toca a su fin irremediablemente sin embargo, hay gran cantidad de temas que no se han tratado en este únicamente por querer ofrecer una visión lo más sencilla y práctica del quot;lenguajequot;. No dudéis que, pese a que el HTML es un quot;lenguajequot; sencillísimo, hay un montón de cosas que nos hemos dejado en el tintero y merecerían la pena tratar. Temas como la posibilidad de permitir al usuario escribir en nuestras páginas datos y que luego nos lo mande vía mail (imaginaros un cuestionario), creación de menús en los que el visitante pueda interactuar más directamente, más comandos (muchos más) que nos hagan la quot;vida más fácilquot; a la hora de trabajar quot;a peloquot; en la construcción de nuestras páginas WEB, inclusión de CGI´s, en definitiva, que sólo hemos dado y muy por encima, un vistazo a las posibilidades que se nos pueden ofrecer a la hora de diseñar una página. De todos modos, creo que lo más importante, esto es, sentar las bases para la creación de páginas WEB, está hecho. Tan sólo queda animar a gente que lea esto y posea conocimientos suficientes para que se proponga realizar algún curso sobre JAVA y HTML más avanzado a fin de poder derivar en una exposición mucho más competa y seria de lo que aquí se ha pretendido enseñar. (¿qué os parece quot;HTML Avanzadoquot; ó quot;La hora del JAVAquot;?. Al menos ya tenemos nombres para las quot;¿secciones futuras?quot; ;) ) Hablar, como decía más arriba, de temas que se nos han quedado en el tintero nos llevaría mucho tiempo pero citaré que hay bastantes comandos no vistos y que pueden seros de mucha utilidad. Tan sólo tenéis que pasar por alguna WEB en español que tenga algún tipo de tutorial. La verdad es que hay muchísimas en dónde elegir y siempre encontraréis información a vuestro gusto así que os animo a una sesión con vuestro buscador favorito. Otros temas quot;más avanzadosquot; como el uso de CGI´s tampoco han sido tratados ya que alargarían innecesariamente el cursillo, dejando de ser este eso, un cursillo ;). Nuevamente pido de quot;valientesquot; capaces de hablarnos de estos temas o, incluso, otros sí ya más serios como la programación en JAVA. En fin, espero que os sirva de algo este primer quot;cursoquot; que acaba en Macedonia o, al menos, que os deis cuenta que aprender este quot;lenguajequot; no es nada complicado. Recordad que, lo visto aquí, sirve para crear algo como Macedonia ;). 24

×