Scribd
Cargar
40 vistas

HTML Introduccion

Este documento explica los fundamentos del lenguaje HTML. Define conceptos como etiquetas, parámetros y cómo crear la estructura básica de una página web con elementos como cabecera, cuerpo, párrafos e imágenes.

Cargado por

Azucena Rodriguez
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
40 vistas

HTML Introduccion

Este documento explica los fundamentos del lenguaje HTML. Define conceptos como etiquetas, parámetros y cómo crear la estructura básica de una página web con elementos como cabecera, cuerpo, párrafos e imágenes.

Cargado por

Azucena Rodriguez
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 19

I Fundamentos del HTML 1. Q es el HTML?

La world wide web tiene una arquitectura cliente / servidor. Un programa cliente que se ejecuta en tu ordenador (el navegador o browser) solicita informacin de un programa servidor que se ejecuta en una mquina en cualquier otro lugar. El servidor enva la informacin solicitada de vuelta a travs de la red al programa navegador, el cual la interpreta para mostrarla en la pantalla. Para que el intercambio de informacin entre el cliente y el servidor se realice de acuerdo a unos parmetros que ambos puedan entender, se utilizan protocolos de comunicaciones. Internet se fundamenta en el protocolo TCP/IP, sobre el cual se construyen otros protocolos de aplicacin. En el caso de la world wide web, el protocolo utilizado es el HTTP (Hipertext Transfer Protocol).

Cuando el navegador recibe la informacin, la interpreta para mostrarla en la pantalla. Las pginas que se visualizan estn formadas, fundamentalmente, por textos e imgenes, con una estructura y un formato especficos. El HTML (Hipertext Markup Language) es lo que nos permite decirle al navegador cmo debe mostrar la informacin: formato de los textos, colores, orden de los prrafos, etc. A menudo observamos como una misma pgina puede visualizarse de manera diferente (colores, ancho de tablas, formato de textos, etc.) en funcin del navegador que se utilice: el HTML no es una forma de codificar la informacin, sino de especificar el formato que debe darse a la informacin. Por ejemplo, podemos transmitir la palabra "Hola!" que tenemos guardada en un fichero de texto. Pero, cmo decirle al navegador que la muestre de color rojo y centrada? El HTML es la respuesta.

2. El concepto de etiqueta (tag)


El HTML describe el aspecto visual que debe tener una pgina mediante la utilizacin de etiquetas (tags). Las etiquetas le indicarn al navegador la posicin relativa de los elementos de la pgina, su tamao, las tipografas y colores a utilizar, etc. Las etiquetas son como instrucciones que le indican al navegador como mostrar la informacin. Existen dos clases de etiquetas:

I.

Etiquetas vacas

Tiene el siguiente formato: <etiqueta> Se utilizan para introducir saltos de lnea, lneas horizontales, y otros elementos no asociados al formato de textos o imgenes. Por ejemplo: <BR> II. Etiquetas contenedoras

Tienen el siguiente formato: <etiqueta> ... </etiqueta> Estas etiquetas dan un formato al texto o porcin del documento que engloban. Este tipo de etiquetas tiene una marca inicial, y una marca final igual que la inicial, pero con el caracter "/". Todo lo que est contenido entre ambas marcas quedar sujeto al formato indicado por la etiqueta. Por ejemplo, podemos mostrar la palabra "Hola!" en cursiva de la siguiente forma: <i>Hola!</i> La mayora de estas etiquetas pueden, a su vez, contener otras etiquetas, de cualquiera de los dos tipos. Por ejemplo, para mostrar la palabra "Hola!" en cursiva y negrita: <i><b>Hola!</b></i>

3. El concepto de argumento
Las etiquetas pueden especificar, por ejemplo, que cierta palabra aparezca en negrita. Pero si queremos que cierta palabra aparezca de color rojo, necesitamos suministrar un parmetro: el color. La mayora de las etiquetas tienen parmetros para indicar mltiples aspectos del formato, como el color, el tamao, la posicin, etc. El formato de una etiqueta con parmetros es el siguiente: <etiqueta parametro1="valor1" parametro2="valor2" ... > ... </etiqueta> Por ejemplo, para mostrar la palabra "Hola!" en rojo, utilizamos la etiqueta font con el parametro color igual a red: <font color="red">Hola!</font>

4. Mi primera pgina
Toda pgina HTML debe comenzar por la etiqueta <html> y terminar con </html>. Todo lo que figure entre estas etiquetas ser interpretado por el navegador como un documento HTML. Lo que quede fuera de ellas ser, en la mayora de los casos, ignorado. El documento HTML se divide siempre en dos partes: cabecera y cuerpo.

4.1. Cabecera
La cabecera figura entre las etiquetas <head> y </head>. En ella se especifica el ttulo, el autor, y otras caractersticas del documento que no se muestran fsicamente en la pgina y que sirven para facilitar su indexacin (son lo que se conoce como meta tags). En la cabecera tambin deben incluirse los scripts que necesite el documento (JavaScript, JScript, etc.) y las definiciones de estilos (si se utilizan hojas de estilos).

4.2. Cuerpo
El cuerpo es la parte del documento que se coloca entre las etiquetas <body> y </body>. En esta parte se incluye la pgina propiamente dicha. Teniendo esto en cuenta podemos construir ya nuestra primera pgina HTML con los elementos mnimos necesarios para que sea interpretada correctamente por un navegador: <html> <head> <title>Mi primera pagina HTML</title> </head> <body> Mi primera pgina HTML </body> </html>

II Insercin de textos
1. Creacin de prrafos
Toda pgina HTML est compuesta, principalmente, por prrafos de texto combinados con otros elementos, como pueden ser imgenes, tablas o formularios. La insercin de prrafos se realiza mediante la utilizacin de la etiqueta <p> y su correspondiente cierre, </p>.

La separacin entre los prrafos queda prefijada al utilizar las etiquetas anteriores, aunque depender del navegador con el que se muestre la pgina. Sin embargo s podemos modificar la justificacin del texto mediante el parmetro align, que puede tomar los valores left (alineacin izquierda), center (alineacin centrada) y right (alineacin derecha). Si se desea dejar poco espacio entre prrafos se pueden insertar saltos de lnea mediante la etiqueta <br>. A diferencia del tag <p> ... </p>, esta etiqueta no tiene cierre. Vamos a ver un ejemplo de lo descrito anteriormente: <html><head> <title>Ejemplo de creacin de prrafos</title> </head> <body> <p align="right">Prrafo alineado a la derecha.</p> <p align="center">Prrafo centrado.</p> <p >Prrafo alineado a la izquierda...<br>y pegado e esta otra lnea.</p> </body></html> El resultado del cdigo anterior es el siguiente:

2. Dando formato al texto


Para controlar las tipografas, colores y tamaos de los textos de tu pgina puedes utilizar la etiqueta <font> ... </font>. Este tag est siendo reemplazado por la utilizacin de hojas de estilos (CSS), pero para usuarios poco avanzados es mejor comenzar utilizando la etiqueta <font>, ms fcil de entender y de implementar. Para elegir el tipo de letra: que desea utilizar en un prrafo, basta con incluirlo entre <font face="tipo-letra"> ... </font>. Por ejemplo, si queremos escribir Hola! con letra Century Gothic utilizamos el siguiente cdigo: <p><font face="Century Gothic">Hola!</font></p>

Lo que resulta en:

Hola!
Si queremos cambiar el color emplearemos <font color="color"> ... </font>, donde color es un nmero que indica el color. Este nmero est codificado en hexadecimal, y utiliza 256 bits para cada uno de los colores primarios (rojo, verde y azul). En hexadecimal con dos caracteres (de 0 a 9 y de la A a la F) se representan valores de 256 bits. As, el color blanco se expresa como #FFFFFF y el negro como #000000. Como se aprecia, este sistema es poco intuitivo, por lo que se pueden usar las nomenclaturas estndar de los colores en ingls (red, para el rojo, black para el negro, etc.), pero este sistema es menos flexible y ms dependiente del navegador. Veamos un ejemplo: <p><font color="red">Hola!</font></p> Que resulta en:

Hola!
Finalmente, si lo que queremos es modificar el tamao, le etiqueta a usar es <font size="tamao"> ... </font>, donde tamao es un nmero que puede indicar el tamao absoluto (con rango de 1 a 7) o el relativo. Por ejemplo, si se utiliza size="2" e texto se mostrar en tamao 2. Si se utiliza size="+2", se le indica al navegador que muestre el texto 2 veces ms grande que el tamao por defecto definido. El siguiente ejemplo <p><font size="5">Hola!</font></p> muestra el texto con el siguiente tamao:

Hola!
Por supuesto, existe la posibilidad de combinar los 3 modificadores anteriores en un mismo tag <font>, para especificar el tamao, color y tipo de letra de una sola vez. En este ejemplo <p><font face="Courier" color="red" size="4">Hola!</font></p> indicamos que el texto debe escribirse con tipografa courier, color rojo y tamao 4, lo que resulta en:

Hola!

III Insercin de imgenes


1. Formatos de imgenes
Aunque algunos navegadores soportan otros formatos de imgenes, fundamentalmente se utilizan los 2 que originalmente soportaron Netscape y Mosaic (uno de los primeros navegadores):

1.1. GIF (Graphics Interchange Format)


El formato GIF (Graphics Interchange Format, Formato de Intercambio de Grficos) es un formato propietario de CompuServe Inc. cuya especificacin data de 1987. Este formato se caracteriza por limitar la profundidad del color a 256 colores y por poseer un sistema de compresin rudimentario (basado en el algoritmo LZW) que es efectivo nicamente cuando los colores de la imagen son planos (sin existencia de mltiples transiciones de color). De esta forma, es el formato ideal para iconos, diagramas y grficas. Otra de sus caractersticas es la posibilidad de crear imgenes GIF entrelazadas. Esto quiere decir que la informacin de la imagen se almacena por filas no consecutivas, permitiendo una visualizacin progresiva de la imagen completa pero con poca resolucin. Segn se va descargando la totalidad de la misma, va aumentando la resolucin, hasta que se tiene la imagen final. Pero lo que ms juego ha dado del formato GIF es la posibilidad de crear pequeas animaciones (GIFs animados). Se basa en el almacenamiento en un mismo fichero de imagen de varios fotogramas. El formato incluye la definicin de los tiempos entre cada fotograma. A pesar de ser la forma ms sencilla de crear animaciones, no es la ms ptima en cuanto a tamao y calidad, por lo que queda limitado a iconos y pequeos efectos visuales.

1.2. JPEG (Joint Photographic Experts Group)


El estndar JPG (Joint Photographic Experts Group) surge con la necesidad de crear un formato de almacenamiento de imgenes con calidad similar a la de una fotografa y con un alto grado de compresin (para reducir el tamao de los archivos). De esta forma, este formato soporta 16 millones de colores y es ideal para imgenes con multitud de colores, como fotografas. El formato permite seleccionar el grado de compresin de la imagen, lo que es ideal para lograr tamaos de archivo ptimos. El algoritmo de compresin que utiliza es con prdidas, lo que implica que a mayor grado de compresin, menor es la calidad de la imagen. Sin embargo, y debido a las caractersticas del ojo humano, determinadas prdidas de calidad no son apreciables, por lo que se pueden conseguir compresiones del 50% sin que se aprecie prdida de calidad.

2. Insercin de una imagen de fondo


Para insertar una imagen de fondo basta con aadir un parmetro a la etiqueta <body>. Por ejemplo: <body background="fondo.jpg"> Con este ejemplo indicamos que el fondo de nuestra pgina sea la imagen fondo.jpg. Esta imagen debe existir en la misma carpeta que contenga la pgina HTML. Si queremos ordenar los archivos en diferentes carpetas, podemos indicar dnde se encuentra nuestar imagen. Veamoslo con otro ejemplo: <body background="imagenes/fondo.jpg"> En este caso, la imagen est dentro de la carpeta imagenes. Tambin es posible enlazar con una imagen que est en otro servidor, espicificando su URL (ver apartado 3 para una explicacin del concepto de URL).

3. Insercin de imgenes en el documento


Para insertar una imagen en el documento se utiliza la etiqueta <img>. Para especificar la imagen a visualizar se utiliza el parmetro src: <img src="logo.gif"> La imagen aparecer en el lugar donde se encuentre la etiqueta. Mediante el uso de otros parmetros podemos especificar la alineacin del texto alrededor de la imagen, el tamao de la misma y otras caractersticas. Vamos a ver los ms utilizados: align: permite especificar la alineacin de la imagen y del texto alrededor de la imagen. Puede tomar los valores left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom. Ejemplos: <img src="logo.gif" centro... align="middle">Texto alineado en el

Texto alineado en el centro...

<img src="logo.gif" align="bottom">Texto alineado abajo...

Texto alineado abajo...

title: este parmetro permite especificar un texto alternativo, que se muestra cuando el puntero del ratn pasa por encima de la imagen. Ejemplo: <img src="logo.gif" title="Tutorial de HTML">

alt: el argumento de este parmetro se muestra mientras se est cargando la imagen, y en caso de que no pueda cargarse permanece visible (de modo que el usuario pueda saber a qu hace referencia esa imagen). En los navegadores que no soportan imagenes (por ejemplo, Lynx) aparece el texto especificado en este parmetro en lugar de la imagen. width / height: permiten especificar el tamao de la imagen (ancho y alto). Si no se incluyen, la imagen se muestra a su tamao real. Aunque se desee mostrar la imagen a tamao real, es conveniente incluir estos parmetros para permitir que el navegador construya la pgina antes de haber finalizado la carga de todas las imgenes, mostrando por lo menos el texto del documento. Ejemplo: <img src="logo.gif" width="150" height="100">

border: cuando una imagen es un enlace, por defecto, el navegador la incluye en un marco o borde. Si no se desea que aparezca este borde, debe especificarse border="0". Tambin puede tomar una valor distinto de 0, en cuyo caso representa el tamao (grosor) del borde.

IV Las listas
HTML permite realizar listados numerados, sin numerar y listas para definir. 1.Listas sin numerar Para crear una lista sin numerar 1. Se empieza escribiendo un tag de apertura de lista <UL> 2. Se escribe el tag <LI> seguido por el trmino que se quiera numerar (no es necesario la etiqueta de cierre). 3. Se termina con el tag de cierre de la lista </UL> He aqu una lista de dos trminos: <UL> <LI>Facultades <LI>Institutos </UL> 2. Listas numeradas: una lista numerada (tambin llamada lista ordenada, de ah la denominacin de la marca) es idntica a una lista sin numerar, excepto que se usa <OL> en lugar de <UL>. Delante de los trminos se pone la marca <LI>, que es la misma que se utiliza en las otras listas. El siguiente cdigo HTML: <OL><LI>Facultad de Derecho <LI>Facultad de Medicina <LI>Facultad de Ciencias</OL> EJERCICIO 1 DEL LABORATORIO da el siguiente formato: 1. Facultad de Derecho 2. Facultad de Medicina 3. Facultad de Ciencias

Las listas de definiciones


Una lista de definicin consiste en trminos alternativos (abreviados como DT) y una definicin (abreviada como DD). Normalmente los browsers del web dan la definicin en una nueva lnea.

He aqu un ejemplo de una lista de definicin: <DL> <DT> <B>HTML</B>: <DD>HyperText Markup Language -- HTML es un SGML DTD. En trminos prcticos, es una coleccin de estilos (indicados por tags (marcas) de markup) que definen los componentes variados de un documento World Wide Web. </DL> El resultado es: HTML: HyperText Markup Language -- HTML es un SGML DTD. En trminos prcticos, es una coleccin de estilos (indicados por tags (marcas) de markup) que definen los componentes variados de un documento World Wide Web. EJERCICIO CODIFICA ESTE EJEMPLO CON 2 ELEMENTOS MAS Tanto la marca <DT> como la marca <DD> pueden contener mltiples prrafos (basta con separarlos con las marcas indicativas de prrafo <P> ), listas, o cualquier otra informacin en la definicin. Comentarios.- Para incluir un comentario en un documento HTML, es decir, una aclaracin que no aparece en la presentacin final del documento, se encierra el texto que formar el comentario entre los smbolos <!-- comentario -->.

V Creacin de tablas
1. Introduccin
Quiz uno de los elementos de presentacin de datos ms comunes en las pginas web sea la tabla, que nos ayuda a organizar la informacin cmodamente en filas y columnas, mejorando notablemente el aspecto visual de la misma. Sin embargo, la utilidad de las tablas HTML va mucho ms all de la simple presentacin ordenada de la informacin. El lenguaje HTML tiene enormes carencias en lo que a maquetacin de los elementos de una pgina se refiere (posicionamiento de imgenes, mrgenes,

alineacin del texto...). Los diseadores han suplido tradicionalmente estas deficiencias utilizando tablas de forma profusa. Hoy en da es comn la presencia de varias tablas en una pgina web, incluso tablas dentro de celdas de otras tablas.

2. Estructura de una tabla


En HTML, las tablas se construyen especificando filas y celdas. El conjunto de celdas de una fila ir encerrado en las etiquetas de fila, y el conjunto de filas de la tabla, en las etiquetas de tabla. El comienzo y fin de una tabla se define mediante el tag <table> ... </table>. Para especificar cada fila de la tabla se utilizan las etiquetas <tr> ... </tr>. Finalmente, para especificar cada celda de una fila habr que usar las etiquetas <td> ... </td>. Teniendo en cuenta estas simples reglas, vamos a mostrar a continuacin algunos ejemplos: <table> <tr> <td>Fila 1, celda 1</td> <td>Fila 1, celda 2</td> </tr> <tr> <td>Fila 2, celda 1</td> <td>Fila 2, celda 2</td> </tr> </table> El ejemplo anterior crea la siguiente tabla de 2 filas y 2 columnas:

Fila 1, celda 1 Fila 1, celda 2 Fila 2, celda 1 Fila 2, celda 2

3. Dimensionando la tabla
Las etiquetas que definen la tabla admiten diferentes parmetros para lograr el correcto dimensionamiento de las celdas y de los bordes que forman la tabla. Tambin es posible especificar la separacin que debe existir entre el texto y el borde de la tabla. Los parmetros que rigen estas caractersticas son los siguientes:

Parmetro width

Etiqueta <table> <td>

Significado Anchura total de la tabla o anchura de la celda. Puede especificarse en % o en pixels. Altura de la celda. Puede especificarse en % o en pixels. Separacin entre celdas. Separacin entre el texto y el borde de la celda.

height

<td>

cellspacing cellpadding

<table> <table>

El parmetro height se especifica para el tag <td> que define una celda, pero afectar siempre a toda la fila. Por otra parte, podramos especificar anchuras de celdas incoherentes (dando diferente anchura a celdas de una misma columna, o haciendo que la suma de las anchuras no coincida). Todos estos errores suelen ser asumidos por los navegadores sin problemas, pero hay que tener cuidado, ya que la forma en la que visualizan una tabla errnea diferir entre navegadores de distintos fabricantes. Jugando con los parmetros anteriores podemos ya modificar la tabla del ejemplo anterior para obtener diferentes presentaciones. Vemoslo con algunos ejemplos: Aumentamos la anchura (por defecto, la anchura de cada celda se adapta al texto de la misma), y la separacin entre celdas:

<table width="60%" cellspacing="5" cellpadding="0"> <tr> <td>Fila 1, celda 1</td> <td>Fila 1, celda 2</td> </tr> <tr> <td>Fila 2, celda 1</td> <td>Fila 2, celda 2</td> </tr> </table>

Fila 1, celda 1 Fila 2, celda 1

Fila 1, celda 2 Fila 2, celda 2

Anchura y altura de la primera columna diferentes de la de la segunda, y mayor espacio entre el texto y el borde de la tabla: <table width="80%" cellspacing="0" cellpadding="5">

<tr> <td width="80%" height="70">Fila 1, celda 1</td> <td width="20%" height="70">Fila 1, celda 2</td> </tr> <tr> <td width="80%">Fila 2, celda 1</td> <td width="20%">Fila 2, celda 2</td> </tr> </table>

Fila 1, celda 1 Fila 2, celda 1

Fila 1, celda 2 Fila 2, celda 2

4. Posicionamiento del texto


Como se observa en los ejemplos anteriores, nos falta todava ejercer control sobre la posicin que ocupa el texto dentro de cada celda. Para estos menesteres existen una serie de parmetros detallamos a continuacin, y que se aplican al tag <td>:
Parmetro align Significado Alineacin horizontal. Puede tomar los valores left (izquierda), center (centro) y right (derecha). Alineacin vertical. Puede tomar los valores top (superior), middle (central), botton (inferior) y baseline (lnea de base).

que

valign

Jugando con estos parmetros podemos modificar el ejemplo anterior para que el texto de la primera celda est en la parte inferior de la misma, y alineado a la derecha: <table width="80%" cellspacing="0" cellpadding="5"> <tr> <td width="80%" height="70" align="right" valign="bottom"> Fila 1, celda 1</td>

<td width="20%" height="70">Fila 1, celda 2</td> </tr> <tr> <td width="80%">Fila 2, celda 1</td> <td width="20%">Fila 2, celda 2</td> </tr> </table>

Fila 1, celda 1 Fila 2, celda 1

Fila 1, celda 2 Fila 2, celda 2

5. Bordes y colores
Para terminar esta introduccin al mundo de la creacin de tablas en HTML, slo nos falta indicar cmo podemos mejorar el aspecto de nuestras tablas. Lo primero que querremos hacer es jugar con la anchura del borde. Para ello se ha definido el parmetro border de la etiqueta <table>, que define la anchura de todos los bordes de la tabla en pixels. Si se especifica con valor 0, el borde no se visualiza. El color del borde lo controla el parmetro bordercolor, que se aplica al tag <td>. Este parmetro toma valores hexadecimales o nombres de colores predefinidos, segn el alfabeto ingls. La forma en que se indica un color con cdigo hexadecimal es la misma que se utiliza para otros elementos de una pgina (por ejemplo, para el color de fondo). Finalmente, tambin podemos modificar el color de fondo de cada celda de forma independiente, aplicando el parmetro bgcolor al tag <td>. Los colores se especifican de igual forma. Con todo esto, podemos mejorar el aspecto del ejemplo anterior de la siguiente forma: <table width="80%" cellspacing="0" cellpadding="5" border="4"> <tr> <td width="80%" height="70" align="right" valign="bottom"> Fila 1, celda 1</td>

<td width="20%" height="70">Fila 1, celda 2</td> </tr> <tr> <td width="80%" <td width="20%" </tr> </table>

bgcolor="#FFCCCC">Fila bordercolor="red">Fila

2, 2,

celda celda

1</td> 2</td>

Fila 1, celda 1 Fila 2, celda 1


TAREA, INVESTIGAR COLSPAN PROPUESTOS EN CLASE Y ROWSPAN,

Fila 1, celda 2 Fila 2, celda 2


Y REALIZAR EJERCICIOS

6. Conclusin
Las tablas son el corazn de muchas pginas web. Bien empleadas pueden mejorar notablemente el diseo de nuestra pgina, y facilitar la navegabilidad. La presencia de inconvenientes:

muchas

tablas

posee,

sin

embargo,

algunos

Mayor complejidad en el cdigo (sobre todo si tenemos muchas tablas anidadas) lo que dificulta el mantenimiento de la pgina Ralentizacin de la renderizacin de la pgina en algunos navegadores (sobre todo, navegadores antiguos, como los Navigator de Netscape). Por estos motivos, aunque es bueno usar tablas, conviene no abusar de ellas.

VI Creacin de enlaces
1. Concepto de enlace o hipervnculo
Una de las mayores virtudes del lenguaje HTML, y la que le da su nombre, es la posibilidad de crear enlaces o hipervnculos que relacionan diferentes pginas entre s. HTML son las siglas de HiperText Mark-up Language, que podra traducirse como lenguaje de etiquetas hipertexto. Los enlaces, vnculos o hipervnculos (tambin conocidos como links, su denominacin inglesa) son simplemente caminos hacia otras

pginas de la world wide web. Su funcionamiento es muy simple: el texto que queramos permita ir a otra pgina se marca de forma especial (ya veremos cmo). A partir de entonces, en la pgina parecer resaltado (originalmente, mediante color azul y subrayado), y cuando el ratn se mueva sobre dicho texto, cambiar el puntero para indicar que ah tenemos un enlace. Al pulsar sobre l, instruimos al navegador para abrir la pgina a la que hace referencia. El resultado es la vinculacin de nuestra pgina y la pgina a la que hace referencia el enlace. De esta forma, se va creando entre las pginas de diferentes sitios una maraa de hiperenlaces, que da nombre a la world wide web (tela de araa mundial).

2. Enlaces externos e internos


Lo primero que debemos entender, antes de lanzarnos a la creacin de enlaces, es el funcionamiento de la world wide web. Nuestras pginas residen en un ordenador (llamado tpicamente host). Este ordenador est conectado a la red permanentemente, y pone a disposicin de todos las pginas web que alberga. Simplificando un poco, podemos decir que nuestras pginas podrn enlazar con pginas de otros hosts (lo que sera un enlace externo) o con pginas de nuestro propio host (enlace interno). Realmente, nuestro host puede contener pginas de diferentes sites (no slo las nuestras, sino tambin las de otras personas o empresas). Si enlazamos con ellas tambin creamos enlaces externos.

La diferencia fundamental est en la necesidad de indicar, para un enlace externo, el nombre del host que contiene la pgina a la que estamos enlazando. Para los enlaces internos, no ser necesario. El navegador sabe que si un enlace no lo indica es interno, lo que quiere decir que la pgina enalzada est en el mismo host que la pgina que contiene el enlace. Puede parecer complicado, pero realmente no lo es.

3. Las rutas o paths


El concepto de ruta o path tambin suele confundir al principio. Cuando creamos un sitio web pequeo, con un centenar de pginas, quiz no nos preocupe demasiado el orden, y no nos importe que todas ellas se encuentren en el mismo fichero. Los ficheros son como los cajones de los espacios de almacenamiento de los hots. Colocar todo en un mismo cajn no es buena idea. Sobre todo si nuestro site crece, y tenemos miles de pginas. Mantener un site en estas condiciones es ardua tarea. El orden siempre ayuda, lo que nos induce a crear mltiples ficheros o cajones para almacenar las pginas. Dentro de un fichero o carpeta, podemos crear subcarpetas para clasificar mejor, y as sucesivamente. El resultado final es que para localizar una pgina debemos indicar la ruta o path hacia ella. Esta ruta no es ms que la sucesin de los nombres de los ficheros hasta llegar al que, finalmente, contiene la pgina. Por ejemplo, si la pgina ejemplo1.html est en la carpeta ejemplos, la cual a su vez est en la carpeta tutoriales, su ruta sera: /tutoriales/ejemplos/ejemplo1.html El concepto de ruta relativa y ruta absoluta aaden ms complejidad al asunto. La ruta se dice absoluta si parte de la raz de nuestra zona de almacenamiento (es decir, parte de la carpeta que contiene a cualquier otra, y que normalmente se designa simplemente por el carcter /). El ejemplo anterior es una ruta absoluta. Se caracteriza por comenzar con dicho carcter /. Si la ruta parte de otra carpeta, entonces es relativa. Por ejemplo, desde la pgina ejemplo1.html podemos referenciar a una pgina contenida en la carpeta tutoriales, y de nombre tutorial1.html, de este modo: ../tutorial1.html Y desde tutorial1.html, ejemplo1.html as: ejemplos/ejemplo1.html Como se observa, estos ejemplos no comienzan con el carcter /, lo que indica que son rutas relativas. Relativas a qu? A la carpeta que almacena la pgina que contiene el enlace. La cadena .. (dos puntos seguidos) tiene un significado especial: referencia siempre a la carpeta padre. podemos referenciar la pgina

4. Creando enlaces de textos


Si comprendemos los conceptos anteriores, no tendremos ninguna dificultad para crear enlaces. La etiqueta HTML destinada a tal efecto es <a href...> ... </a>. La viene de anchor (en ingls, ancla). Por ejemplo, si queremos que el siguiente texto "Enlace" tenga un enlace a la pgina ndice de este tutorial, de nombre html.html, escribiremos: <a href="html.html">Enlace</a> Y el resultado ser: Enlace Como se ve, la sintaxis es muy sencilla. El enlace anterior es relativo, porque no incluye el nombre del host. Si queremos crear un enlace absoluto a esta misma pgina, tendremos que escribir: <a href="http://www.elcodigo.net/tutoriales/html/html.html"> Enlace</a> La codificacin de este ejemplo est partida en 2 por cuestiones de espacio (deber estar en una sla lnea). Como se ve, ahora aparece el host (www.elcodigo.net) y la ruta (/tutoriales/html/html.html).

5. Creando enlaces de imgenes


Para que una imagen se convierta en un enlace, basta con incluir la definicin de la imagen dentro de las etiquetas <a href...> y </a>. Por ejemplo: <a href="html.html"><img src="../../images/tutoriales2.gif"></a> En este ejemplo, el enlace est en la imagen imagen.gif. Y el resultado:

Como se ve, la imagen est especificada con una ruta relativa.

6. El target u objetivo del enlace

La etiqueta <a href...> ... </a> posee un parmetro muy importante, el target u objetivo. Este parmetro permite indicar en qu ventana o marco queremos que se cargue la pgina a la que hace referencia el enlace. La forma de especificarlo es la siguiente: <a href="html.html" target="_blank">Enlace</a> En este ejemplo le hemos asignado el valor _blank, que indica que la pgina debe abrirse en una ventana nueva del navegador. Los posibles valores son:
Target _blank _self _parent _top Significado Nueva ventana Mismo marco (o ventana si no hay marcos) que el actual Ventana padre Ventana padre de todas las existentes

Nombre del marco o ventana Marco o ventana cuyo nombre coincida con el especificado

También podría gustarte