Curso de Html
------ SUMARIO ------
----- Inicio del texto --------
Un documento html (página web) puedes construirse con un simple editor
de textos, tal como el 'Bloc de Notas' de windows o con otros, tales
como Notetab (http://www.notetab.ch).
El formato que posee un fichero html es plano (ASCII).
Para crear una página htm se usan códigos. Estos códigos van
encentrados entre los signos 'mayor que' y 'menor que' '<' y '>'
CÓDIGOS PAREADOS (POR PAREJAS).
Estos códigos se usan por parejas, es decir, si queremos que un texto
aparezca en negrita debemos de poner al inicio de la palabra el codigo
de 'Inicio de negrita' <b> y al final de la misma el código de final
de negrita '</b>.
<b>Texto en negrita</b>
Se observa que el código inicial (<b>) es igual al final (</b>) con la
única diferencia de que para indicar el fin del código activado
colocamos una barra inclinada '/' en el comando que finaliza la acción
iniciada, en este caso negrita.
Los usuarios que utilizan wordperfect 5.1 entenderán estos
perfectamente, pues es similar a la ventana mostrar códigos de dicho
programa.
<p> indica párrafo nuevo y este no se cierra con otro código.
MAYUSCULAS o minúsculas
Da igual escribir la codificación en mayúscula o minúscula, aunque se
sugiere colocarlos en mayúscula.
Te bastará con los más sencillo para poder diseñar tus páginas web.
Olvídate del marketing y de estar cambiando de programa cada dos por
tres. Aunque es más complicado con la práctica y un poco de tiempo
verás que merece la pena.
---- ---- ---- --
Un documento html tiene una estructura sencilla.
Este es el formato básico.
*---- ----
---- ---- ---- ---- ---- ---- ---- ---- ---- *
<HMTL>
<HEAD>
<TITLE>Titulo</TITLE> <--- Encabezado.
<HEAD>
<BODY>
<---- Cuerpo. Texto de la página. (Ascii)
</BODY>
</HTML>
*---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- *
MUY IMPORTANTE.
Toda fichero html (que es un fichero txt pero grabado con la extensión
.html o .htm en lugar de .txt) ha de empezar con el código <HTML> al
principio del mismo y debe terminar con </HTML>.
Al abrir el navegador este fichero, el va leyendo y al ver <HTML> sabe
que se trata de un fichero htm o html y entonces el navegar traduce
esos codigos.
Cabecera (<HEAD>) y cuerpo (<BODY>)
En la cabecera se incluye el título del documento. Cabecera es todo
los que esta delimitado entre los CÓDIGOS de inicio y fin de cabecera
<HEAD> ..... </HEAD>
Dentro de la cabecera se coloca el título <TITLE>... </TITLE>. El
texto introducido entre estos CÓDIGOS es el texto que aparece como
título de la ventana en la página web, es decir, el texto que aparece
en la banda azul del programa.
*---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- *
<HTML>
<HEAD>
<TITLE>Página web de Solotxt</TITLE>
</HEAD>
<BODY>
Bienvenidos a la página web de solotxt
</BODY>
</HTML>
*---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- *
Si este fichero lo grabamos como index.htm (hemos de utilizar este
nombre para los ficheros de inicio, página principal de nuestras
páginas) y lo abrimos con un navegador nos aparecerá en la barra de
título del programa el título:
Página web de Solotxt, y como texto dentro de la página lo escrito
'Bienvenidos a la página web de solotxt'.
La mejor forma de aprender es practicando así que intenta hacer el
ejemplo anterior.
CUERPO DE UN DOCUMENTO (<BODY>)
El cuerpo va delimitado entre los CÓDIGOS <BODY> .. </BODY>
En el ejemplo anterior hemos colocado un texto como cuerpo de la
página web 'Bienvenidos a la página web de solotxt'. El cuerpo es el
texto que aparece dentro de la ventana de la página.
---- ---- ---- ----
Existen unos tamaños de encabezados ya predefinidos que se utilizan
para destacar un texto, estos tienen seis niveles.
Si deseo colocar un título muy grande utilizaremos <H1>...</H1> o
<H6>..</H6> para el más pequeño.
<HTML>
<HEAD>
<TITLE>Página web de
Solotxt</TITLE>
</HEAD>
<BODY>
<H1>Bienvenidos a la página web de solotxt</H1>
</BODY>
</HTML>
Observa que el texto 'Bienvenido a la página web de solotxt aparece
muy grande al leerlo con el navegador ya que he utilizado el encabezado
de nivel 1 (<H1>) el más grande.
De esta forma si se trata de identificar un capitulo principal
utilizaremos un nivel 1, para un subcapitulo del nivel 1, el nivel 2,
y así sucesivamente..
Hemos comentado que entre los códigos <BODY> .. </BODY> aparece el
texto de la página web.
A este texto podemos aplicarles ciertos formatos tales como:
Negrita <B>...</B>
Cursiva <I>...</I>
Teletipo <TT>...</TT> (fuente fija)
Tachado <STRIKE>...<STRIKE>
<p> Indica el comienzo de nuevo párrafo.
<br> Indica salto de línea.
<HR> Indica línea horizontal.
<PRE>...</PRE>Indica preformateado, texto tal cual.
<BLOCKQUOTE>...</BLOCKQUOTE> Bloque de texto sangrado.
<!- Comentario -> El texto 'comentario' no se visualiza en el
navegador.
Podemos utilizar diversos CÓDIGOS con una misma palabra al igual que
lo hacemos con cualquier procesador de textos.
Si deseamos poner un texto en negrita y cursiva lo hariamos así:
<B><I>Negrita y cursiva</I></B>
---- --
Veremos ahora lo que podemos hacer dentro del cuerpo del mensaje.
<CENTER>
Utilizaremos este código para centrar cualquier texto, ya sea una
palabra, un párrafo o varios.
--> Ejemplo:
<CENTER>Esto aparecerá centrado</CENTER>
--> Otro ejemplO.
<HTML><HEAD><TITLE>Practicando centrados</TITLE></HEAD>
<BODY>
<CENTER>
<!-- Todo lo siguiente aparecerá centrado -->
<H1>Capitulo 1</H1>
Texto del capítulo 1<BR>
<!-- línea en blanco -->
<HR>
Delante de este párrafo aparece una línea.
</CENTER>
</BODY>
</HTML>
El comando es <FON FACE='tipo_de_letra?>..</FONT>
Hace que el texto se muestre con la letra indicada.
<FONT FACE='helvetica'>Esto se ve en helvetica</FONT>
La mejor forma de buscar otros tipos de letras es editando el codigo
fuente de las paginas web que veas. Si usas explorer Editar/codigo
fuente.
* SALTOS DE LÍNEA Y DE PÁRRAFO.
<BR> lo utilizaremos para saltar de linea
<P> para insertar línea nueva y comienzo de párrafo.
Util para separar los párrafos elcomando <HR> (Horizontal rule, linea
horizontal).
<BODY BGCOLOR='green'>
Green en ingles es verde, habrás de poner siempre el nombre del color
en inglés, en español no vale.
Igualmente puedes editar las paginas web que te gusten y copiarte el
nombre del color o el código como ahora veremos.
Otra forma de poner el color es similar a:
<BODY BGCOLOR="#AA99BB">
El código anterior, AA99BB, equivale al color rojo. una tabla de
colores con su equivalente te vendra bien. Esto es bueno porque no
utilizamos un fondo para la página, lo cual hace que su lectura sea
mas veloz pues es el navegador el que pone el color en la pantalla de
la persona que visita tu página.
<BODY BACKGROUND="dibujo.gif">
Esta línea nos mostraría un dibujo, foto, como fondo del texto de la
página. Se suele utilizar mucho para colocar las iniciales de tu
empresa, anagrama, etc. Aquí debes jugar con los colores del dibujo
para que no sean molestos a la hora de leer el texto que aparecerá
encima del mismo.
Puedes probar con cualquier fichero .gif o .jpg que son los más
utilizados y probar fondos. El formato .bmp que crea el Paint no es
válido, a pesar de ocupar mucho mas.
Los ficheros gráficos deben estar entre 15 o 20 K, si ocupan más la
gente se aburrirá esperando que carguen los gráficos de tu página y se
marcharán desesperados.
---- ---- ----
14.Listas
Por último hoy hablaremos de como colocar una lista, serie, numerada,
no numerada.
<UL> Unorderer list, lista sin ordenadr
<OL> Orderer list, lista ordenada
<LI> List item, lista item, enumera linea
Un ejemplo de una lista numerada, ordenada seria:
Hoy compro:
1. pan
2. vino
3. dulces
La lista anterior no numerada, -unorder list- <UL> seria
Hoy compro
* pan
* vino
* dulces
Los item son las cosas que he comprando, es decir, la enumeración.
El ejemplo anterior codificado quedaria así:
<HTML><HEAD><TITLE>..</TITLE></HEAD>
<BODY>
Hoy compro:
<OL>
<LI>1. pan
<LI>2. vino
<LI>3. dulces
</OL>
</BODY></HTML>
Pasar una lista numerada a no numerada, es decir, no ordenada, es muy
sencillo, basta con cambiar los CÓDIGOS <OL>..</OL> por <UL>...</UL>
Estas son similares a las ordenadas (<OL>..</OL>) y no ordenadas
(<UL>..</UL>).
Vimos que cada item (linea) dentro de las numeradas <OL> y no
numeradas <UL> va precedido del código <LI> (item).
Las listas de definicion (Definition List, DL) tiene como codigos
delimitadores: <DL>..</DL> y como item, datos de definición llevan el
código <DD> (Definition Data, Datos de la Definición).
El navegador al leer una lista de definicion sangra los elementos <DD>
(Datos de la definicion), es decir, crea como una tabulación
apareciendo el texto de la definición mas hacia la derecha.
Ejemplo, para que se vea más claro:
<HTML><HEAD><TITLE>Ejemplo de Lista de Definición</TITLE>
<BODY>
<H2>Lista de Definición</H2>
<DL>
<DT>Elemento 1
<DD>Definición del elemento 1
<DT>Elemento 2
<DD>Definición del elemento 2
<DT>Elemento 3
<DD>Definición del elemento 3
</DL>
</BODY></HTML>
Las listas de definición nos pueden servir para crear diccionarios. Es
decir podemos plasmar un texto como el siguiente en html.
Internet.
Red de ordenadores.
Home-Page
Página inicial.
¿Como convertiriamos esto en html?, muy sencillo.
Utilizaremos: <DL>..</DL> y
en su interior: <DT> para el termino definido
<DD> para la definición del anterior
Para recordar con mas facilidad, T (termino), D (definicion del
término).
Este sería el código HTML para el texto anterior.
<HTML><HEAD><TITLE>Otro ejemplo de definiciones</TITLE>
<BODY>
<H2>Definiciones</H2>
<DL>
<DT>Internet.
<DD>Red de ordenadores.
<DT>Home-Page
<DD>Página inicial.
</DL>
</BODY></HTML>
---- ---- ----
16.Texto subrayado
Se me olvido comentar el código para subraya una palabra <U>..</U>.
Viene del ingles underline (subrayado).
Permite subrayar una palabra, párrafo, es decir todo lo que
seleccionemos.
<HTML><HEAD><TITLE>Ejemplo de subrayado</TITLE></HEAD>
<BODY>
<U>Este texto aparecerá subrayado</U> y la segunda palabra de la
siguiente linea<BR>primera <U>segunda</U>
</BODY>
</HTML>
Recordar que podemos combinar varios CÓDIGOS a la vez, si quisiéramos
poner 'Grupo CasíNada' en cursiva, negrita y subrayado la línea
quedaría así:
<K><B><U>Grupo Casínada</K></B></U>
y si quisiéramos poner la palabra Casí nada en rojo quedaría así:
<K><B><U>Grupo <FONT COLOR='red'>Casínada</FONT></K></B></U>
---- ---- ----
From: profesor@solotxt.freeservers.com (Grupo Casí-Nada)
Para crear una línea horizontal utilizamos el código <HR> (Horizontal
rule, línea horizontal). Util para separar varios párrafos (<P>).
Podemos incluso colocar varias líneas utilizando:
<HR><HR> (nos mostrará dos líneas horizontales).
Las líneas <HR> pueden tener una anchura (WIDTH, ancho), alineación
(ALIGN), tamaño (SIZE) e incluso podremos hacer que la línea no lleve
sombreado (NOSHADE)
Para añadir estos párametros basta con colocar a la derecha de la
palabra HR el parámetro con su valor.
Por ejemplo, si queremos una línea con una anchura de un 20% y que
está aparezca alineada a la derecha escribiremos:
<HR WIDTH=20% ALIGN=RIGHT>
Recordar que RIGHT=derecha y LEFT=izquierda.
Se pueden añadir tantos parámetros como deseemos al código HR
(Horizontal rule, línea horizontal).
-- Por ejemplo:
Línea sin sombra y con un ancho del 75% de la ventana y con un tamaño
8.
<HR WIDTH=75% SIZE=7 NOSHADE>
-- Línea con un grosor de 4 (se mide en pixels).
<HR SIZE=4>
-- Línea centrada con un ancho del 45%.
<HR WIDTH=45%>
(Observar que no utilizamos el comando <CENTER>).
-- Línea horizontal completa.
<HR>
COMO COMPROBAR QUE EL CÓDIGO ES CORRECTO.
Ahora no os pongo la estructura completa de la página pero hay una
forma facil de comprobar y prácticar.
1. Crea un documento con el bloc de notas con lo siguiente:
<HTML><HEAD><TITLE>Pruebas</TITLE></HEAD><BODY>
</BODY></HTML>
2. Grabarlo como pruebas.htm y no lo cierres.
3. Abre el navegador y el fichero pruebas.htm
4. Ves haciendo modificaciones en el bloc de notas, puedes copiar de
Aquí una línea por ejemplo:
<HR WIDTH=45%>
5. Sitúate en el cuerpo del fichero pruebas.htm y pega
(edición/pegar).
6. Ves al navegador y pulsa F5 o Ver/Actualizar (para ie5).
7. Verás la página con los nuevos cambios.
Yo he utilizado ese sistema para comprobar que no he tenido error a la
hora de colocar la codificación, teniendo el fichero pruebas.htm para
lo comentado en el escritorio.
---- ---- ----
From: profesor@solotxt.freeservers.com (Grupo Casí-Nada)
Convertir un texto en html
Podemos convertir un texto, ya lo tengamos en formato texto o en otro
programa.
Solo es necesario crear en un bloc de notas lo siguiente, es decir, la
estructura básica para un documento html.
<HTML><HEAD><TITLE>Pruebas</TITLE></HEAD><BODY>
Aquí pegaremos el texto desde otro documento u aplicación.
</BODY></HTML>
Pegaremos el texto y luego insertaremos el código de inicio de párrafo
<P>, o saltos de línea <BR>, o incluso Líneas horizontales <HR> para
separar partes del texto.
No obstante si no disponemos de mucho tiempo podremos utilizar el
código de *sin formato* <PRE>..</PRE>
Pegaremos el texto entre estos CÓDIGOS y no hará falta que retoquemos
el texto ya que se verá tal cual se ve en un fichero txt.
Tenemos el siguiente texto en un documento y queremos pasarlo a html
para verlo como página web:
---- Texto que tenemos en otra aplicación o documento --
El Grupo-Casínada se compone de diversos web's:
a) Web Magazine Casínada,
ubicado en http://usuarios.iponet.es/casínada,
b) solotxt, que potencia el uso del txt,
ubicado en http://solotxt.freeservers.com,
c) DDT, Diccionario del Desarro Tardío,
ubicado en http://usuarios.iponet.es/ddt.
Así mismo dispones de unas listas de correo en el que todo el
mundo que lo desee puede participar, cuya información se
halla en el web de *solotxt*.
-- fin del texto---- ---
1. Colocamos la codificación básica en el fichero.
<HTML><HEAD><TITLE>Pruebas</TITLE></HEAD><BODY>
Aquí pegaremos el texto desde otro documento u aplicación.
</BODY></HTML>
2. Entre
<BODY>..</BODY> colocaremos <PRE>..</PRE>
3. Marcaremos el texto y lo pegaremos entre los códigos <PRE>..</PRE>
4. Este sería el resultado
<HTML><HEAD><TITLE>Pruebas</TITLE></HEAD><BODY>
<PRE>
El Grupo-Casínada se compone de diversos web's:
a) Web Magazine Casínada,
ubicado en http://usuarios.iponet.es/casínada
b) solotxt, que potencia el uso del txt,
ubicado en http://solotxt.freeservers.com
c) DDT, Diccionario del Desarro Tardío,
ubicado en http://usuarios.iponet.es/ddt
Así mismo dispones de unas listas de correo en el que todo el
mundo que lo desee puede participar, cuya información se
halla en el web de *solotxt*.
</PRE>
</BODY></HTML>
Con esto quiero demostraros que cualquier texto se pueda pasar a html
sin ningun problema, el único detalle es que al final de cada linea
hemos de haber pulsado intro, pues de lo contrario nos saldria en una
línea larguísima todo el texto.
Los pasos son:
1. Creo la estructura básica.
2. Coloco los comandos <PRE>..</PRE>
3. Dentro de lo anterior pego el texto
4. Grabo como .htm
---- ---- ----
From: profesor@solotxt.freeservers.com (Grupo Casí-Nada)
Color de fondo y texto
El color de fondo blanco es molesto para la vista de ahi que muchos
opten por utilizar un fondo negro y el texto en blanco.
Para colocar un color de fondo la sintaxis es:
<BODY BGCOLOR="#rrggbb">
...
</BODY>
rrggbb indica una combinación de los colores: red (rojo), green
(verde) y blue (azul) en formato hexadecimal.
El color negro es 000000
El blanco es FFFFFF
Para el color del texto usamos:
<FONT
COLOR="#rrggbb">
Ejemplo:
<HTML><HEAD><TITLE>Pruebas</TITLE></HEAD>
<BODY
BGCOLOR="#000000">
<FONT
COLOR="#FFFFFF">
<H1>DDT</H1>
<H1>Diccionario del Desarrollo Tardío</H1>
<HR>
<H2>Web:
http://usuarios.iponet.es/ddt</H2>
</FONT>
</BODY></HTML>
Si quisiéramos el texto en rojo bastaria cambiar en el ejemplo
anterior FFFFFF (blanco) por la palabra 'red' o su equivalente en
hexadecimal.
---- ---- ----
From: profesor@solotxt.freeservers.com (Grupo Casí-Nada)
El tamaño, la fuente (FONT SIZE) lo podemos aumentar para cualquier
palabra o párrafo.
El tamaño que se usa por defecto es 3 y podemos aumentarlo de forma
similar a ir haciendo clic en un botón, solo que nosotros lo hacemos
manualmente con el teclado, es decir, poniendo el número a mano.
<FONT SIZE=5>Esto saldrá en tamaño 5</FONT>
<FONT SIZE=6>y esto con un nivel más</FONT>
<FONT SIZE=2>y esto un menos del tamaño por defecto</FONT>
Otra forma de cambiar el tamaño es añadiendo el signos más '+' o menos
'-' que los irá aumentando o disminuyendo en los niveles que le
indiquemos con un número.
Otro ejemplo:
<HTML><HEAD><TITLE>Practica de tamaño del texto</TITLE></HEAD>
<BODY>
El tamaño por defecto es 3 <BR>
lo podemos aumentar en la siguiente línea <BR>
<FONT SIZE=+2>como se ve Aquí a tamaño 3+2=5</FONT><BR>
</FONT>
</BODY>
</HTML>
Incluso si lo deseamos podemos aumentar todo el texto colocando
despues del código <BODY> lo siguiente:
<BASEFONT SIZE=6>
====
Ya el próximo dia veremos el tema de los link, de como crear anclas,
es decir, links dentro del mismo documento, así como el funcionamiento
de los hypervinculos entre diversas páginas.
No me vendria mal que me enviarais algun mensaje, que sea breve por
favor, de que tal os va, si lo veis demasiado complicado y saber si
vais entendiendo lo que os voy comentando.
Los mensajes enviarlos a profesor@solotxt.freeservers.com
También comentaros la existencia de una lista paralela a esa
'csn-aula' en la que podeis participar. La información de como acceder
a ella esta en http://solotxt.freeservers.com/listas.htm
Chao.
El profe :)
---- ---- ----
From: profesor@solotxt.freeservers.com (Grupo Casí-Nada)
###
*** From: "A. Maestro"
Date: Sat, 03 Jul 1999 17:52:15 +0200
<<Yo dije que era: <!- comentario -> y realmente esta alumna se dio
cuenta, pues son dos guiones y no uno.
Pues yo hice el ejercicio tal como decías en principio y en el
explorador no aparece el comentario. ¿Será que se puede codificar de
las dos maneras?
[Profesor]
Si, efectivamente el comando es <!- comentario ->.
Debe funcionar así, aunque también funciona como:
<!-- comentario -->
###
*** From: bbv-diez
Subject: Alinear a la izquierda o derecha
Ya sé como centrar un párrafo <CENTER>
He probado con el mísmo método para linear a la izquierda o derecha
<LEFT> <RIGHT> y no se pudo, quisiera sabes como se hace o derrepente
nos lo van a enseñar más adelante.
Para averiguar he entrado a Front Page y me dice lo siguiente:
<p align="center">centrado</p>
<p align="left">derecha</p>
<p align="right">izquierda</p>
[Profesor]
Efectivamente tienes toda la razón como muy bien comentas esa sería la
forma de alinear un párrafo.
###
Subject: IMAGENES DE FONDO
*** From: "Julio C. Campos y Esthela M.Chalart"
Date: Sun, 04 Jul 1999 19:51:00 -0300
En vuestro E-Mail 13 enseñan el código <BODY BACKGROUND="dibujo.gif">
para colocar una imágen de fondo de la página. Probé a insertar la
imágen donde dice "dibujo.gif" y no pude hacerlo, probé a colocar en
ese lugar la ruta de un archivo gif y tampoco logré resultado.
[Profesor]
Un detalle es que el fichero 'dibujo.gif' ha de estar en el mismo
directorio donde está el fichero que lo llama. En caso de no estarlo
ha de indicarse la ruta completa.
Ejemplo completo, podeis pegar y copiar en el bloc de notas, grabar
como htm y coger un dibujo y llamarle dibujo.gif.
---- ---- ---- ---- ---- ---- ---- ---- ---- ---- -
<HTML>
<HEAD>
<TITLE>Página con dibujo de fondo</TITLE>
</HEAD>
<BODY
BACKGROUND="dibujo.gif">
<H1>EJEMPLO DE DIBUJO DE FONDO EN MOSAICO</H1>
</BODY>
</HTML>
---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
La próxima clase se enviará el jueves próximo.
---- ---- ---
---- ---- ----
Los hypervinculos nos permiten saltar a otra parte del mismo documento
o a otro documento (página web).
Para ello utilizamos las anclas (anchors).
las anchas pueden ser de dos tipos.
1. Las que hacen referencia a un nombre
(se utilizan cuando queremos llamar a otra parte del mismo
document).
2. Las que hacen referencia a otra página.
(por ejemplo, otro web o direción).
Generalmente se utilizan para llamar a otras páginas o documentos. Por
ejemplo: estoy leyendo la página 1 y quiero ir al indice, o a la
página 3.
Otro ejemplo, tengo una página que es un índice, y quiero saltar a un
capitulo que está en otra página.
Cuando coloquemos un ancla tenemos que especificar cual es el destino
de la misma, recordad:
origen (lugar donde hacemos clic)
destino (página donde nos llevará).
La sintaxis es la siguiente:
<A HREF="http://usuarios.iponet.es/ddt">Diccionario del Desarrollo
Tardío</A>
Observar que se inicia con <A HREF="direccion"> y termina con </A>, es
decir con el cierre del ancla.
Otro ejemplo.
Si en nuestra página web queremos hacer referencia a otra de tal forma
que el que la lee solo ha de pulsar sobre el texto la estructura seria
la siguiente.
<A HREF="http://solotxt.freeservers.com">Pulsa Aquí para ir a la
página de SoloTxt</A>
El texto 'Pulsa Aquí ... SoloTxt' aparece en azul y subrayado, para
indicar que hay un link, al situar el puntero del ratón sobre dicha
línea y hacer un clic nos llevará a la página que se indica en <A
HREF="pagina">
Importante recordar que la dirección de la página va entre comilllas
("...").
De esta forma podemos crearnos una página de direcciones favoritos de
la siguiente forma:
+
<HTML><HEAD><TITLE>Mis web's favoritos</TITLE></HEAD>
<BODY>
<H2>Mis Web's favoritosz</H2>
<HR>
<UL>
<LI><A HREF="http://usuarios.iponet.es/casínada">Revista
CasíNada</A>
<LI><A HREF="http://usuarios.iponet.es/ddt">DDT</A>
</UL>
</BODY></HTML>
+
A este tipo de anclas las podemos llamar *de referencia*, es decir,
que hacen referencia a un sitio, página web.
ANCLAS A UNA MISMA PÁGINA DENTRO DEL MISMO DIRECTORIO
=====================================================
No siempre haremos anclas de referencia a documentos que no esten en
nuestros web, si tenemos creadas varias páginas llamaremos a estas.
Es importante saber que no es necesario escribir la direccion completa
de una página si esta dentro del mismo directorio en el que esta la
pagína que la llama.
Por ejemplo:
Yo tengo la página 'index.htm' y la página 'curso.htm' en el mismo
directorio.
En la página index.htm hago referencia para que se pueda ir a otras
páginas que tengo en el mismo directorio.
Entonces si quiero que al pulsar en el link os lleve a la pagina
'curso.htm' no necesito escribir en el ancla la dirección completa, es
decir,
http://solotxt.freeservers.com/curso.htm
me basta con poner
curso.htm
En sintaxis quedaria así el fichero 'index.htm'
<HMTL><HEAD><TITLE>Página
de inicio</TITLE></HEAD>
<BODY>
<A HREF="curso.htm">Pulsa Aquí para ir a la página del curso</A>
</BODY></HTML>
Como veis no he escrito la ruta completa, si la hubiera puesto también
hubiera funcionado pero es mas cómodo poner solamente el nombre de la
pagina, *siempre y cuando este en el mismo directorio*.
De esta forma podemos generar un indice que nos lleve a las diversas
páginas del mismo, es decir, se trabaja como un libro normal, abrimos
la primera página, indice del libro, y luego hacemos clic en cada uno
de los capítulos, temas, que nos lleva al capítulo o página que
hayamos indicado.
Recordad: link, vinculo, a página en el mismo directorio solo
colocamos el nombre de la pagina, no la ruta completa.
Y un último ejemplo: queremos tener link a diversos periódicos. La
sintaxis sería:
<HTML><HEAD><TITLE>Mis periódicos favoritos</TITLE></HEAD>
<BODY>
<P>
De vez en cuando leo algunos diarios a través de la red, tales como <A
HREF="http://www.elpais.es">El País</A> y <A
HREF="http://www.clarin.com">Clarín de Argentina.</A>
<HR>
</BODY></HTML>
Resumiendo:
-> Si la página está fuera, en otro web.
<A HREF="direccion de la pagina">Texto que se ve</A>
y si la página esta en el mismo directorio
-> Si la página esta en el mismo directorio.
<A HREF="fichero.htm">Texto que se ve</A>
---- ---- ----
Hemos visto en el apartado anterior como hacer referencia a otras
páginas web que no estan en nuestro espacio, tales como llamadas a
periodicos, etc...
La estructura era:
<A HREF="http://wwww.nombre.es">Texto que se ve</a>
Ahora veremos como hacer llamadas a partes del documento que se esta
leyendo, esto podría ser similar a notas a pie de página, es decir,
estamos leyendo un texto y queremos más información sobre esa
referencia, la cual está mas abajo, o al final del documento.
La idea sería la siguiente. Estamos leyendo un texto que dice:
"Existen diversas listas de correo (1) en las que puedes participar."
Queremos que la hacer un clic sobre '(1)' nos lleve al final de la
hoja, página web, para saber más información sobre las listas y
despues de leerla volver a seguir leyendo donde estabamos.
Para ello crearemos un ancla nominal que hace referencia a un nombre.
El ancla la situamos al final y luego haremos una referencia a ella
desde el texto que aparece al comienzo de la pagina.
Referencia ---nos lleva---> ancla.
Quedaria así:
"Existen diversas listas de correo <A HREF="nota-01">(1)</a> en las
que puedes participar."
<A NAME="#nota-01">1. </A> Las listas de correo se utilizan para
compartir ideas entre sus miembros.
Es importante ver que el ancla nominal, la que hace referencia al
nombre lleva el cuadradillo '#' (alt-gr + 3).
En el caso del ejemplo anterior todas las notas deben llevar un ancla.
<A NAME="#nota-01">1.</A>
<A NAME="#nota-02">1.</A>
<A NAME="#nota-03">1.</A>
NAME en ingles significa nombre, es decir, hacemos referencia a un
nombre, palabra-clave. (A NAME="#palabra">texto que se ve</A>
Una vez colocadas las anclas, nominales, estás pueden ser llamadas
desde cualquier parte del documento haciendo referencia a las mismas
en la forma:
<A HREF="nota-01">(Véase nota 1)</A>
<A HREF="nota-01">(Véase nota 1)</A>
<A HREF="nota-01">(Véase nota 1)</A>
De esta forma podemos leer una página utilizando el hypertexto,
saltando de un sitito a otro.
Pero Aquí no queda la cosa, podemos hacer referencias a otros
documentos como vimos en el apartado anterior, pero incluso podemos
hacer referencia a una parte de un documento, por ejemplo, a la
párrafo que habla sobre 'compartir ideas' que se haya en otro
documento.
O podemos hacer una referencia, caso de tener un diccionario, a la
página que contiene las palabras que empiezan por A y concretamente a
la palabra 'AMISTAD'.
Ejemplo:
Tenemos la página 'indice.htm' y luego una página por cada una de las
letras: a.htm b.htm c.htm.... z.htm
En el indice hacemos una referencia a cada una de las letras de la
siguiente forma:
---- ---- [ Fichero indice.htm ]---- ---
<HTML><HEAD><TITLE>Indice</TITLE></HEAD>
<BODY>
<H2>INDICE</H2>
<UL>
<LI><A
HREF="a.htm">A</A>
<LI><A
HREF="b.htm">B</A>
....
<LI><A
HREF="z.hmt">Z</A>
</UL>
</BODY></HTML>
---- ----[
Fichero a.htm ]---- ---- ----
<HTML><HEAD><TITLE>Indice</TITLE></HEAD>
<BODY>
<UL>
<LI><A NAME="#amistad">Amistad</A>. Es...
<LI><A NAME="#antonimos">Antónimos</A>Palabras que significan lo
contarario de la otra.
</UL>
</BODY></HTML>
Pues bien tenemos dos ficheros 'indice.htm' y 'a.htm'
en el fichero 'indice.htm' tenemos vinculos externos, anclas de
referencia a otras páginas, que están situados en el mismo directorio.
En el fichero 'a.htm' hemos colocado algunas anclas nominales que hace
referencia a un nombre, palabra clave, amistad la hemos codificado con
el ancla <A NAME="#amistad">..</A>
Entonces desde cualquier otro documento, incluso desde cualquier otro
web podemos hacer que al hacer clic sobre el link nos lleve a la
página 'a.htm' y concretamente al lugar donde habla sobre la amistad.
Sintaxis para llamar a la página 'a.htm' y a la entrada del
diccionario 'Amistad'.
<HTML><HEAD><TITLE>Ejemplo de vinculos a pag y nombre</TITLE></HEAD>
<BODY>
Ultimamente estuve mirando algunas palabras que desconocía y se me
ocurrio mirar el significado de la palabra amistad en la página del
Diccionario del Desarrollo Tardio. Sabía lo que era pero no su
significado con más exactitud. ¿Quieres verla?, pues bien <A
HREF="http://usuarios.iponet.es/ddt/a.htm#amistad">haz clic Aquí y yo
te llevare a esa página y a esa posición.</A>
</BODY></HTML>
Observar que esto funciona igual que un vinculo a una pagína externa,
solo que hemos añadido '#amistad' para que nos lleve a esa parte del
documento.
Lógicamente si en la página 'a.htm' que está en
http://usuarios.iponet.es/ddt/ no se ha creado el ancla (<A
NAME="#nombre">..</A> no funcionara.
Realmente no se utiliza mucho en la red pero tiene grandes
posibilidades ya que podemos escribir un texto y poder saltar de un
lado a otro, haciendo referencias a partes de una pagina, es como si
leyendo un libro, hacemos referencia a otro libro, y dentro de este a
la página 125, y dentro de la página 125 al párrafo que habla sobre la
amistad que es el párrafo 15.
Para el caso de un diccionario viene muy bien, así como para cualquier
otra idea que os surja.
Lo verdaderamente util del hypertexto es que podemos crear autenticos
libros y no utilizaremos ningun software comercial para leerlos.
::::::::::::::::::::::
mail-025.Hypervinculos a email
Habréis observado que en muchas páginas web al hacer clic en el email
o cualquier texto nos abre nuestro programa de correo y nos escribe en
el To (A) la dirección de la persona a la que hemos de enviar un
mensaje.
La sintaxis es muy sencilla:
<HTML><HEAD><TITLE>Ejemplo
de correo</TITLE></HEAD>
<BODY>
Os ruego me envies vuestras sugerencias a<A
HREF=mailto:"profesor@solotxt.freeservers.com">profesor@solotxt.freeservrs.com</A>.
Gracias.
</BODY>
</HTML>
Si deseamos que el programa de correo aparezcan dos direcciones,
bastará con poner una coma ',' entre las direcciones email.
Pulsa <A
HREF="mailto:profesor@solotxt.freeservers.com,webmaster@solotxt.freeservers.com">aqui</A>
para contactar con nosotros.
:::::::::::::::::::::::
Mail-028. El color.
1. El color del texto.
2. El color de los enlaces.
3. Color de los enlaces visitados.
4. Color cuando el enlace se active, es decir, cuando hagamos clic
sobre él.
La sintaxis es la siguiente:
<HTML>
<HEAD>
<TITLE>Uso
de colores</TITLE>
</HEAD>
<BODY>
<BODY
BGCOLOR="#000000" TEXT="#F0F0F0"
LINK="@FFFF00"
VLINK="@22AA22"
ALINK="#0077FF">
El texto aparecerá en color gris claro sobre un fondo negro y los <A
HREF="enlace.htm">enlaces</A> en color amarillo. Cuando hayamos hecho
clic sobre el enlace pasará a un verde oscuro.
</BODY>
</HTML>
----------------------
mail-029.Imagenes
En las páginas web que creamos podemos colocar imagenes, por ejemplo,
una foto nuestra o una foto del lugar en el qué vivimos.
De esta forma cualquier persona a través de la red puede ver
visualmente el entorno en que vivimos, nuestras playas, parajes, etc.
Podemos crear incluso un album fotográfico para que pueda ser visto
por otros.
El formato más utilizado es el GIF (Graphics Interchange Format,
Formato de Intercambio de Gráficos).
Si las imagenes las tenemos en otro formato debeis de utilizar
cualquier software que combierta las imagenes al formato GIF.
El tamaño de los archivos .GIF debe rondar los 15/20 kb. Si colocamos
archivos que ocupan un mayor tamaño las personas que visiten nuestra
página se irán de la página pues la red, de momento es lenta, y hay
que evitar el recargar las páginas con imágenes.
Veámos ahora un ejemplo de como poder colocar nuestra foto o un
paisaje en nuestra página web.
Para ello debemos de disponer de los ficheros en formato .gif,
supongamos que tenemos los ficheros: mifoto.gif y paisaje01.gif,
paisaje02.gif,
etc.
<HTML><HEAD><TITLE>Ejemplo
con imágenes</TITLE></HEAD>
<BODY>
<H2>EL LUGAR DONDE VIVO</H2>
Esta es una foto de los montes que hay
alrededor de mi casa.
<IMG SRC="paisaje01.gif">
<HR>
Aquí una vista de las playas.
<IMG
SRC="paisaje02.gif">
<HR>
Y por ultimo una foto mía reciente.
<IMG
SRC="mifoto.gif">
</BODY>
</HTML>
Existe personas que son ciegas y no pueden ver dichas imagenes para
ello es muy util colocar un texto alternativo (ALT, alternative,
alternativo).
También es muy util para aquellos que no puede ver imagenes desde su
navegador o para los que han desactivado en su navegador la opcion de
cargar imagenes para poder cargar las páginas más rapidas.
Para ello simplemente hemos de añadir:
ALT=texto breve de la imagen.
La sintaxis sería la siguiente:
<IMG SRC="mifoto.gif">
quedaria como:
<IMG SRC="mifoto.gif" ALT "Foto del profesor">
ALINEACION DE IMAGENES
Hecho lo anterior, y una vez hemos visto que podemos incluir imágenes
en nuestra página web el paso siguiente es colocar la misma alineada a
la izquierda, en el centro de la línea, o a la derecha.
Para ello recordaremos los comandos en ingles que hacen estas
operaciones:
ALIGN (alineacion)
TOP (arriba, en al parte más alta)
MIDDLE (en la mitad, en el centro).
BOTTOM (abajo, en la parte inferior).
El atributo ALIGN ira seguido por uno de los siguientes parámetros TOP
(arriba), MIDDLE (mitad) o BOTTON (abajo).
La sintaxtis seria:
<IMG ALIGN=TOP SRC="mifoto.gif">
Coloca mi foto alineada a la parte superior.
Si utilizamos ALIGN=TOP (imagen alineada a la parte superior) solo la
primera línea de texto aparecerá a la derecha de la imagen y la
segunda y sucesivas por debajo de la misma.
**** Primera línea de texto
FOTO*
*****
Segundas Líneas y sucesivas
Para ello tendréis que realizar diversas pruebas simplemente variando
los parámetros TOP, MIDDLE y BOTTOM.
Si la foto no está en nuestro servidor donde tenemos hospedada la
página, supongamos que quereis mostrar una imagen que esta en
http://usuarios.iponet.es/ddt llamada foto.gif
La sintaxis seria:
<IMG SRC="http://usuarios.iponet.es/ddt/foto.gif">
De esta forma podemos vincular diversas imagenes de diferentes sitios
webs. Podriamos crear un album de fotos sin tener ninguna en nuestro
espacio ya que llamamos a las imagenes de otros sitios.
Recordar que los atributos ALIGN=TOP y ALIGN=MIDDLE es conveniente
utilizarlos solo cuando la primera línea de texto no sea muy extensa.
Lo ideal, rápido y sencillo es colocar la imagen en el centro seguido
de un salto de línea (HR) y un texto explicativo de la misma.
La sintaxis sería:
<CENTER>
<IMG SRC="mifoto.gif">
<BR>
Esta es mi foto
</CENTER>
<HR>
--------------------
mail-030.Imagenes vinculadas
Hemos visto en el comentario anterior cómo podemos colocar imágenes en
nuestra página web.
Anteriormente también vimos como realizar vinculos a email.
<A HREF="mailto:profesor@solotxt.freeservers.com">Clic Aquí para
enviarme un mensaje</A>
O vimos como realizar vinculos externos a otras direcciones.
<A HREF="http://www.clarin.com">Clic Aquí para ver Clarin</A>
Los vinculos externos son aquellos que hacen referencia a otras
páginas que no están dentro de nuestro espacio, recordar que si la
página esta en nuestro espacio seria:
<A HREF="mas-informacion.htm">Clic Aquí para mas informacion sobre
mi</A>.
Observad que si la página esta en el mismo directorio no es necesario
poner toda la ruta del fichero, basta con poner el nombre del fichero
.htm que se encuentra en el mismo directorio.
Bueno, lo que queremos hacer ahora es colocar una fotografia, imagen
de tal forma que al hacer clic sobre ella nos lleve a otra página web
o a la misma foto más ampliada.
Muchos usuarios utilizan el sistema de colocar una foto con un pequeño
tamaño y en el caso de interesarles verla con un tamaño mayor entonces
crean un hypervinculo a la misma en tamaño más grande.
La sintaxis para llamar a otra imagen desde una imagen seria:
Haz clic en la imagen para verla más grande.
<A HREF="foto-grande.gif"><IMG SRC=foto-pequeña.gif></A>
En el ejemplo anterior no aparece texto entre las marcas <A
HREF="..>..</A>, tan solo aparecerá una imagen, foto-pequeña.gif.
Otros ejemplos: queremos que cuando un usuario haga un clic sobre
nuestra foto nos pueda enviar un mensaje de correo electrónico, o que
cuando hagan un clic sobre una imagen cuyo dibujo consiste en un sobre
haga lo mismo.
El dibujo del sobre estaria en el fichero sobre.gif.
La sintaxis seria:
Haz un clic en el sobre para enviarme un mensaje.
<A HREF="mailto:profesor@solotxt.freeservers.com"><IMG
SRC="sobre.gif"></A>
Y veriamos que al situar la flecha del ratón sobre el sobre, este
cambiará a una mano y al hacer un clic a la persona que está visitando
nuestra página se le lanzara su programa de correo electrónico
apareciendole ya escrita nuestra dirección de correo.
Para hacer estas pruebas no es necesario subir las páginas a nuestro
espacio web, podemos crearlas, como venimos haciendo con el bloc de
notas y luego visualizar la página en nuestro navegador y probarlo.
------------
mail-031.Tablas
En nuestra página web podemos crear tablas de una forma sencilla.
Utilizaremos el código pareado <TABLE>..</TABLE>. Códigos pareados son
los que van por parejas, el primero indica en este caso el comienzo de
la tabla y el ultimo </TABLE> indica el final de la misma.
Observad que en los CÓDIGOS pareados el nombre utilizado es el mismo,
el cual va entre los signos menor que '<' y mayor que '>', y se le
antepone al código final la barra inclinada '/'.
Una tabla esta formada por columnas (que van hacia abajo) y filas (que
aparecen horizontalmente).
x x x
x x x
Lo anterior son 3 columnas y dos filas
x x
x x
x x
Lo anterior son 2 columnas y dos filas
x x
Lo anterior son 2 columns y una fila.
Una tabla esta formada por celdas <TD> y cada celda es la intersección
de una columna (vertical) y una fila (horizontal).
Para crear una tabla utilizaremos los siguientes comandos:
<TABLE> para indicar el inicio de la tabla
<TR> para indicar el inicio de la fila
<TD> para indicar el inicio de una celda
y para indicar los finales de
la tabla </TABLE>
la fila </TR>
la celda </TD>
Ejemplo:
Deseamos crear una tabla similar a la siguiente:
Nombre Edad
Manuel 37
Miguel 23
La estructura en html sería la siguiente:
<TABLE>
<!- Primera fila de la tabla ->
<TR>
<TD>Nombre <TD>Edad</TD>
</TR>
<!- Segunda fila de la tabla ->
<TR>
<TD>Manuel<TD>37</TD>
</TR>
</TABLE>
En la tabla anterior no aparecen los bordes de las filas.
Para ello utilizaremos el parámetro BORDER, borde.
Para ello bastarácon cambiar
<TABLE>
por <TABLE BORDER>
apareciendo ahora la tabla con los bordes de las celdas.
ENCABEZADOS.
Llamamos encabezados a los titulos de las columnas (verticales) en los
cuales aparecen el título de cada una de las columnas.
En el ejemplo anterior son encabezados:
- de la columna 1: nombre
- de la columna 2: edad
Estos encabezados se pueden resaltar, apareciendo en negrita, es
decir, con doble intensidad en el texto.
La tabla anterior con encabezados quedaría de la siguiente forma:
<TABLE BORDER>
<!- Primera fila de la tabla ->
<TR>
<TH>Nombre <TH>Edad</TH>
</TR>
<!- Segunda fila de la tabla ->
<TR>
<TD>Manuel<TD>37</TD>
</TR>
</TABLE>
Observar que tan solo hemos cambiado los CÓDIGOS <TD> (inicio de
celda) por <TH> (incio de encabezado).
Aunque utilizamos <TH> para el encabezado, lo podemos utilizar tambíen
en cualquier fila para resaltar la misma.
Hemos visto que podemos ver los bordes de las celdas si colocamos
<TABLE BORDER> o si no queremos que aparezcan utilizaremos solo
<TABLE>
<TABLE
BORDER>...</TABLE> con bordes
<TABLE>...</TABLE> sin bordes
ANCHO BORDE TABLA
El ancho de las lienas de las celdas lo podemos aumentar utilizando
BORDER=2, donde pondra un borde de tamaño 2.
Ejemplo:
<TABLE
BORDER=2>
<TR><TH>Nombre<TH>Edad</TR>
<TR><TD>Manuel<TD>37</TR>
</TABLE>
mostrar un borde de tamaño 2. Así pues podemos aumentar el tamaño del
border
utilizando:
<TABLE
BORDER=2>
<TABLE
BORDER=3>
<TABLE
BORDER=4>
etc..
ALINEACION DENTRO DE LAS CELDAS
Dentro de cada celda el texto puede estar alienado a la
izquierda LEFT
centro CENTER
derecha RIGHT
Edad
37
alineado a la izquierda <TD ALIGN=LEFT>
Edad
37
centrado <TD ALIGN=CENTER>
Edad
37
derecha, <TD ALIGN=RIGHT>
--> ALINEAR VERTICALMENTE.
Utilizaremos el coamndo VALIGN
hemos visto que ALIGN es igual a alineacion
y la V que la preceda signfica vertical.
Por ello para alinear una celda utilizamos
<TD ALIGN=CENTER>
y para alinear verticalmente utilizaremos
<TR
VALIGN=CENTER>
Ejemplo:
<TABLE BORDER>
<TR VALIGN=CENTER>
<TR><TH>Nombre<TH>Edad</TR>
<TR><TD>Manuel<BR>Perez<TD>37</TR>
</TABLE>
Observad como la edad, 37, aparece centrada, pues en la segunda fila
donde aparece el nombre va seguido del apellido por un salto de línea
<BR>.
Con el comando <TR VALIGN=CENTER> el navegador pone el texto de la
celda centrado verticalmente.
Sería similar a:
Nombre Edad
------- --------
Manuel
37 <-- centrado verticalmente
Perez
------- -------
Aunque he comentado que para indicar el inicio de una celda hay que
poner <TD>..</TD><TD>..</TD> funciona tambien sin poner el código de
final de celda
Pues
<TD>..<TD>...<TD>
Indica que empieza una celda, otra y otra y si empieza una celda
lógicamente termina la anterior.
COLORES
Podemos poner colores a los fondos de las celdas y al texto que va
dentro de ellas.
Un ejemplo de fondo de colores en las celdas lo podeis ver editando el
código fuente de la Tabla de colores que está en el web.
El fichero tabla de colores.htm lo construí utilizando los CÓDIGOS de
las tablas.
---------------
En todo documento html ha de colocarse la versión del mismo para que
así el navegador lo lea de una forma u otra. Os aconsejo pues que
pongais como primera línea de documento html lo siguiente:
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD><TITLE>...</TITLE></HEAD>
<BODY>..</BODY>
</HTML>
Este requisito no es esencial pero es recomendable para
que los navegadores sepan a que atenerse sobre la versión de html.
-------------
Al intentar realizar los ejemplos que nos indicas en el mail
24-Hipervínculos Internos he observado que el resultado final no es el
esperado.
Tras documentarme un poco he comprobado que existe un cambio de
posición del
carácter "#".
Según nos indicas la sintaxis sería la siguiente:
<A HREF='nota-01'>(1)</A>
<A NAME='#nota-01'>(1)</A>
Según creo, al menos si he obtenido el resultado que se esperaba,
debería
ser:
<A HREF='#nota-01'>(1)</A>
<A NAME='nota-01'>(1)</A>
[Profesor]
Efectivamente Antonio tienes toda la razón y agradezco tus
comentarios.
-------------
Los frames son marcos, ventanas.
|------ ----|
| | |
|------ ----|
El ejemplo anterior anterior contiene dos marcos (frames) uno a la
izquierda y otro a la derecha, es decir, dos ventanas, son similares a
las tablas, pues contiene dos columnas y una fila.
La ventana de un marco (frame) es que nos permite dividir el area de
trabajo, podemos colocar en la ventana (marco, frame) de la izquierda
las preguntas más usuales y en al ventana de la derecha el resultado a
la pregunta que previamente hayamos marcado en la parte izquierda.
Si realizamos un diseño web con texto puro, como estamos viendo en
este curso, podemos disponer de un manual en el que el indice de los
contenidos aparece a la izquierda y la información a al derecha.
Muy util si luego lo grabamos en un disquete, el espacio que ocupa
este tipo de imagenes es mínimo si no utilizamos imagenes y podemos
entregar cualquier tema en su simple disquete a nuestros alumnos.
Resumiendo.
Los marcos (frames) son ventanas donde al hacer un clic en la ventana
izquierda nos muestra un contenido en la ventana derecha.
LOS MARCOS. DEFINICION.
Para dividir la ventana de nuestro navegador en dos ventanas (marcos,
frames) hay que indicar si queremos dividir horizontalmente o
verticalmente.
La sintaxis seria:
+--+--+--+fichero 'frame.htm' +--+--+--+--+--+--
<HTML>
<HEAD>
<TITLE>Ejemplo</TITLE>
<FRAMESET COLS="20%,80%">
<FRAME SRC="indice.htm">
<FRAME SRC="informacion.htm" NAME="derecha">
</FRAMESET>
</HTML>
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--
Observar que Aquí no utilizamos los comandos <BODY>..</BODY>
Utilizamos el documento anterior para establecer los marcos.
Para definir los marcos hemos de activarlos previamente con los
comandos <FRAMESET>...</FRAMESET>
En el comando incial <FRAME COLS="20%,80"> le decimos al navegador que
vamos a dividir la ventana en dos columnas. La columna de la izquierda
ocupara un 20% del espacio y el resto, el 80% será para la columna de
la derecha.
Luego tenemos que decirle que páginas van a aparecer en cada una de
las ventanas.
En la ventana izquierda aparecerá la página 'indice.htm'
<FRAME SRC="indice.htm">
En la ventana de la derecha aprecerá la página 'informacion.htm'
<FRAME SRC="informacion.htm" NAME="derecha">
Utilizamos NAME="derecha" para posteriores referencias a la ventana
derecha.
Para comprobar el fichero anterior hemos de haber creado previamenteo
los ficheros 'indice.htm' e 'informacion.htm' pues de lo contrario
aparecerán los marcos pero no las páginas.
Crearemos los dos ficheros para que pueda funcionar el ejemplo:
-- fichero
indice.htm ---------
<HTML><HEAD><TITLE>Indice</TITLE></HEAD>
<BODY>
A<BR>
B<BR>
C<BR>
D<BR>
E<BR>
</BODY></HTML>
------- fin del fichero indice.htm
--- fichero informacion.htm -------
<HTML><HEAD><TITLE>Informacion</TITLE></HEAD>
<BODY>
<H2>En esta ventana aparecerá la información de la letra
que pulsemos en la ventana, frame izquierdo</H2>
</BODY></HTML>
---- fin del fichero informacion.htm ------------
Ahora debemos copiar y pegar los tres ficheros y guardalos como htm en
un mismo directorio y posteriormente abriremos el fichero frame.htm
frame.htm <<-- definicion de marcos
indice.htm <<-- llamado por frame.htm
informacion.htm <<-- llamado por frame.htm
Los ejemplos anteriores estan probados, deben funcionarios
perfectamente.
Si en lugar de haber divido las ventanas verticalmente las hubieramos
querido dividir horizontalmente simplemente hubieramos cambiado en el
fichero 'frame.htm'
la línea
<FRAMESET COLS="20%,80%">
por
<FRAMESET ROWS="20%,80%">
Recordad, COLS = columnas
ROWS = filas
Deberiais cambiarlo en el fichero 'frame.htm' para que veáis
claramente el ejemplo, y no hay nada mejor para entender algo que
hacerlo uno mismo.
DICCIONARIO.
Si el trabajo que estamos realizando es un diccionario para entrada de
datos podemos colocar en el marco de la izquierda (que sería el
fichero 'indice.htm' las letras del alfabeto) y en la ventana de la
derecha saldria la información de la letra pulsada).
Otra utilidad: podemos tener en el frame de la izquierda (ventana
izquierda que llama al fichero 'indice.htm') los nombres de nuestros
profesores y en la ventana de la derecha 'informacion.htm' iran
saliendo sus datos personales.
Solamente nos queda un pequeño detalle y es activar que al pulsar en
al ventana de la izquierda se muestre lo que hemos solicitado.
Para ello necesitamos crear en el fichero 'indice.htm' hypervinculos a
otras pagínas.
El fichero 'frame.htm' una vez creado ya no hace falta modificarlo
pues lo unico que hace es llamar a dos ficheros:
indice.htm (ventana izquierda) e
informacion.htm (ventana derecha).
Necesitamos entonces crear algunas páginas mas:
Fichero a.htm
+--+--+--+--+--+--+--+--+--+--+--+--+--+--
<HTML><HEAD><TITLE>Letra
A</TITLE></HEAD>
<BODY>
<H2>LETRA A. Contenido</H2>
</BODY></HTML>
+--+--+--+--+--+--+--+--+--+--+--+--+--+--
Fichero
b.htm
+--+--+--+--+--+--+--+--+--+--+--+--+--+--
<HTML><HEAD><TITLE>Letra
A</TITLE></HEAD>
<BODY>
<H2>LETRA C. Contenido</H2>
</BODY></HTML>
+--+--+--+--+--+--+--+--+--+--+--+--+--+--
Fichero
c.htm
+--+--+--+--+--+--+--+--+--+--+--+--+--+--
<HTML><HEAD><TITLE>Letra
A</TITLE></HEAD>
<BODY>
<H2>LETRA C. Contenido</H2>
</BODY></HTML>
+--+--+--+--+--+--+--+--+--+--+--+--+--+--
Debemos de guardar también estos ficheros en el mismo directorio donde
estan los otros ficheros, ahora tendremos
frame.htm
indice.htm
informacion.htm
a.htm
b.htm
c.hmt
A continuación crearemos los vinculos para que desde la pagina
'indice.htm' salte a 'a.htm', 'b.htm' o 'c.htm'
Abramos de nuevo el fichero 'indice.htm' que es la página que
aparecerá a la izquierda y dejemoslo para que quede así:
-- fichero
indice.htm ---------
<HTML><HEAD><TITLE>Indice</TITLE></HEAD>
<BODY>
<A
HREF="a.htm" TARGET="derecha">A<BR>
<A
HREF="b.htm" TARGET="derecha">B<BR>
<A
HREF="c.htm" TARGET="derecha">C<BR>
</BODY></HTML>
-------------------------------------
Volvamos a guardar el fichero indice.htm y
abrimos de nuevo 'frame.htm'
Ahora en la parte izquierda nos aparecerán las letras 'a', 'b' y 'c'
subrayadas ya que le hemos colocado un vinculo para que sale a un
lugar determinado.
Ahora os explico por qué he puesto TARGET="derecha" en el fichero
indice.htm y es para que el vinculo al que llamamos salga en la
ventana de la derecha y no en una nueva ventana o en la misma ventana
izquierda.
Espero os haya salido, he comprando antes el ejemplo, pues se el
quebradero de cabeza que supone el averiguar donde está el fallo a
veces.
Repito que la utilidad está en crear un diccionario o simplemente una
lista de tareas, las cuales aparecen a la izquierda y su contenido a
la derecha habiendo utilizado los marcos (frames).
La ventana de la izquierda la podemos utilizar como 'indice' del libro
donde aparecen los temas a tratar y la de la derecha el texto de cada
capitulo.