Prefacio L1 L2 L3 L4 L5 L6 L7 L8 Apéndices

2.2 Ligaduras con Páginas Web 

En ciertas ocasiones resulta conveniente crear varios documentos ligados entre sí en lugar de crear un solo largo documento con ligaduras internas.

Fragmentemos el documento ilustrado en el epígrafe 2.1 en tres páginas web, llamadas Índice, Lenguaje y Tags respectivamente.

El código fuente del primer documento sería

<HTML>
<HEAD>
<TITLE>Indice</TITLE>
</HEAD>

<BODY>

<H2>Indice</H2>
<UL TYPE=CIRCLE>              
<LI>Lenguaje HTML
<LI>Tags
</UL>

</BODY>

</HTML>

la correspondiente página web mostraría solamente el índice con los dos elementos: Lenguaje HTML y Tags.

El código fuente del segundo documento sería

<HTML>
<HEAD>
<TITLE>Lenguaje HTML</TITLE>
</HEAD>

<BODY>

<H2>Lenguaje HTML</H2>


<P>HTML (HyperText Markup Language) es un lenguaje muy sencillo     
que permite describir hipertexto, es decir, texto presentado de
forma estructurada y agradable, con enlaces (hyperlinks) que
conducen a otros documentos o fuentes de información relacionadas,
y con inserciones multimedia (gráficos, sonido...) La descripción
se basa en especificar en el texto la estructura lógica del contenido
(títulos, párrafos de texto normal, enumeraciones, definiciones,
citas, etc) así como los diferentes efectos que se quieren dar
(especificar los lugares del documento donde se debe poner cursiva,
negrita, o un gráfico determinado) y dejar que luego la presentación
final de dicho hipertexto se realice por un programa especializado
(como Internet Explorer, o Netscape).</P>

</BODY>

</HTML>

 

La correspondiente página web mostraría solamente el encabezamiento encerrado entre los tags <H2> y </H2> y el párrafo encerrado entre los tags <P> y </P>.

El código fuente del tercer documento sería

<HTML>
<HEAD>
<TITLE>Tags</TITLE>
</HEAD>

<BODY>

<H2>Tags</H2>
<P>La mayoría de los efectos se especifican de la misma forma:
rodeando el texto que se quiere marcar entre dos etiquetas o 
directivas (tags, en inglés), que definen el efecto o unidad lógica
que se desea. Las etiquetas están formadas por determinados códigos
metidos entre los signos < y >, y con la barra / cuando se trata de 
la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <efecto>
para abrir y </efecto> para cerrar. Ciertas directivas sólo se ponen 
una vez en el lugar del texto donde queramos que aparezca el efecto
concreto. Esto es lo que ocurre, por ejemplo, cuando queremos poner un       
gráfico, caso en el que se usa algo parecido a <poner_gráfico_aquí>
(más adelante ya veremos la directiva concreta que se utiliza)</P>

</BODY>

</HTML>

La correspondiente página web mostraría solamente el encabezamiento encerrado entre los tags <H2> y </H2> y el párrafo encerrado entre los tags <P> y </P>.

El resultado sería que el contenido de la página web única ilustrada en 2.1 queda repartido entre tres diferentes páginas web: Índice, Lenguaje y Tags.

Modificando el código fuente del documento Índice como se muestra abajo se crean ligaduras con los documentos Lenguaje y Tags.

<HTML>
<HEAD>
<TITLE>Indice</TITLE>
</HEAD>

<BODY>

<H2>Indice</H2>
<UL TYPE=CIRCLE>
<A HREF="Lenguaje.html"><LI>Lenguaje HTML</A>  
<A HREF="Tags.html"><LI>Tags</A>
</UL>

</BODY>

</HTML>

La salida correspondiente sería:

Si el usuario hace clic en la ligadura Lenguaje HTML el navegador abriría la página Lenguaje

Si estando en la página Índice el usuario hace clic en la ligadura Tags se abriría la página Tags.

En este ejemplo hemos considerado que todos los documentos están salvados en el mismo folder.

De esta manera se establece ligaduras externas de la página Índice con las páginas Lenguaje y Tags.

Para facilitar la navegación del usuario es frecuente que se inserte en las páginas web relacionadas entre sí una  barra de navegación como las que aparecen en el extremo superior de esta página (para navegar entre lecciones) y su extremo inferior (para navegar entre los epígrafes de una lección). La idea es que el usuario pueda desde una página acceder a cualquier otra del mismo sitio web.

Modificando el código fuente del documento Lenguaje como se muestra abajo se insertan ligaduras con Índice y Tags.

<HTML>
<HEAD>
<TITLE>Lenguaje HTML</TITLE>
</HEAD>

<BODY>

<H2>Lenguaje HTML</H2>

<P>HTML (HyperText Markup Language) es un lenguaje muy sencillo     
que permite describir hipertexto, es decir, texto presentado de
forma estructurada y agradable, con enlaces (hyperlinks) que
conducen a otros documentos o fuentes de información relacionadas,
y con inserciones multimedia (gráficos, sonido...) La descripción
se basa en especificar en el texto la estructura lógica del contenido
(títulos, párrafos de texto normal, enumeraciones, definiciones,
citas, etc) así como los diferentes efectos que se quieren dar
(especificar los lugares del documento donde se debe poner cursiva,
negrita, o un gráfico determinado) y dejar que luego la presentación
final de dicho hipertexto se realice por un programa especializado
(como Internet Explorer, o Netscape).</P>

<A HREF="Indice.html">Indice</A>
<A HREF="Tags.html">Tags</A>


</BODY>

</HTML>

Modificando el código fuente del documento Tag como se muestra abajo se insertan ligaduras con Índice y Lenguaje.

<HTML>
<HEAD>
<TITLE>Tags</TITLE>
</HEAD>

<BODY>

<H2>Tags</H2>
<P>La mayoría de los efectos se especifican de la misma forma:
rodeando el texto que se quiere marcar entre dos etiquetas o 
directivas (tags, en inglés), que definen el efecto o unidad lógica
que se desea. Las etiquetas están formadas por determinados códigos
metidos entre los signos < y >, y con la barra / cuando se trata de 
la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <efecto>
para abrir y </efecto> para cerrar. Ciertas directivas sólo se ponen 
una vez en el lugar del texto donde queramos que aparezca el efecto
concreto. Esto es lo que ocurre, por ejemplo, cuando queremos poner un    
gráfico, caso en el que se usa algo parecido a <poner_gráfico_aquí>
(más adelante ya veremos la directiva concreta que se utiliza)</P>

<A HREF="Indice.html">Indice</A>
<A HREF="Lenguaje.html">Lenguaje</A>

</BODY>

</HTML>

 

| Lección 2 | 2.1 | 2.2 | 2.3 |