Curso Web Mastering & Design

Mdulo 1, unidad 2

Elementos de X(HTML)

La estructura de una pgina web a travs del lenguaje HTML

La finalidad de esta segunda unidad es entender como funciona el
lenguaje HTML, para poder dar los primeros pasos en la creacin de
una pgina web. En particular sern examinados los siguientes
puntos:
Entender el funcionamiento de las marcas HTML y examinar los
elementos iniciales fundamentales.
Entender como los distintos navegadores interpretan los
documentos (X)HTML.
Ver la estructura base de un documento (X)HTML y el
funcionamiento base de una hoja de estilo.

Disear la primera pgina Web

Fases principales:
1) Crear el contenido. Insertar el contenido textual para ver como
interacta el navegador.
2) Crear la estructura del documento. Estudiaremos los primeros
elementos de la utilizacin del lenguaje (X)HTML, que proveen la
estructura a la pgina.
3) Identificar los elementos de texto. En esta fase veremos los
primeros elementos utilizables para describir el contenido, mediante
el lenguaje (X)HTML.

4) Agregar imgenes. En esta fase, incorporaremos imgenes a una

pgina, veremos aquello que se refiere a los atributos y los elementos
vacos.
5) Cambiar el aspecto de la pgina con una hoja de estilo. En esta
fase veremos los primeros elementos del funcionamiento del file
CSS.
Analizando estos cinco pasos tendremos los primeros elementos para
disear una pgina web base.
Durante esta fase inicial, es importante observar siempre los
progresos y cambios a travs del navegador para ver detalladamente
cada cambio derivado de nuestras acciones en el documento de
origen.

Usar un editor de textos

En primer lugar se necesita comenzar con un editor de textos, un
programa ya presente en cada sistema operativo. Tomemos en
consideracin por ahora el programa Bloc de notas de Windows (en
mac se puede utilizar el Textedit).
Bloc de notas
Para abrir un nuevo documento con este programa es suficiente:
Iniciar el programa en el men Inicio (carpeta Accesorios)
Haciendo esto tendremos en la ventana un nuevo documento.
Comenzar a escribir el contenido del nuevo documento creado en
Bloc de notas.

Guardar el documento creado con extensin .html en una nueva

carpeta especfica que contendr todo el material necesario para la
web.
En el recuadro Tipo elegir: Todos los Archivos.
Controlar la visualizacin de lo que fue creado a travs del
navegador: iniciar el navegador a disposicin y elegir abrir file
en el men File.

Qu nos muestra el navegador?

El documento visualizado en esta primera fase no aparecer como
nosotros lo hemos creado. Esto porque el navegador ignora las
divisiones y otros elementos del formato presentes en el documento
de origen.

Crear el texto y guardarlo con una extensin .html no es suficiente

para hacer visualizar al navegador aquello que nosotros queremos,
debido a que an no hemos indicado la estructura del contenido de
nuestro documento.
Aqu entra en juego el HTML. Ahora veremos los primeros ejemplos
de etiquetado para proveer la estructura que nuestro navegador
podr reconocer.

Primeros elementos del HTML

Antes de iniciar y agregar nuestras etiquetas al documento,
observemos la estructura de un elemento HTML.

Un elemento HTML genrico est compuesto por un trmino, que,

por lo general, son abreviaciones de un nombre ms largo, entre
parntesis: <elemento> .
El nombre del elemento aparece entre la etiqueta de apertura (o start
tag) y la de cierre (o end tag) precedido por un slash (/).
Ej. start tag: <ej>
end tag: </ej>
Todos los elementos insertados convencionalmente se escriben con
letras minsculas.

Los documentos (X)HTML se dividen generalmente en dos

secciones:
El ttulo o cabeza (head). La cabecera contiene informacin sobre
el propio documento HTML, como por ejemplo su ttulo y el
idioma de la pgina. Los contenidos indicados en la cabecera no
son visibles para el usuario, con la excepcin de la etiqueta
<title>, que se utiliza para indicar el ttulo del documento y que
los navegadores lo visualizan en la parte superior izquierda de la
ventana del navegador.
El cuerpo (body) encierra todos los contenidos que se muestran al
usuario (prrafos de texto, imgenes, tablas).

Modificamos manualmente los elementos vistos hasta ahora en

nuestro documento base .html para luego guardarlo al final de las
operaciones y controlarlo, como hemos hecho previamente en la
ventana de nuestro navegador.
Encerrar todo el documento en un etiqueta de apertura <html>
start tag y una etiqueta de cierre </html> end tag.
Crear la cabecera del documento que contiene el ttulo de nuestra
pgina. Encerrar siempre el ttulo entre las etiquetas de apertura y
de cierre segn el siguiente modelo:
<head>

<title>el web design</title>

</head>
Crear el cuerpo del texto seleccionado, insertndolo siempre
entre una etiqueta de apertura <body> y una de cierre </body>.

Identificar los elementos de texto:

En realidad observando en la ventana del navegador nuestros
primeros resultados, no hemos obtenido demasiados cambios.
Es el momento de insertar algunos marcadores semnticos.

El objetivo del lenguaje (X)HTML es de entregar los significados y

la estructura a los contenidos, no de determinar su aspecto.
Por ejemplo, se necesita distinguir qu partes de texto sern ms
evidentes. Para hacer esto, es necesario encerrar las partes que se
quieren enfatizar con las etiquetas <h1> y </h1>. Obviamente
podemos crear ms niveles de importancia en la organizacin de
nfasis.
Por ejemplo, si queremos diferenciar el ttulo principal de la pgina
del ttulo de varios prrafos, podemos encerrar los ttulos de estos
ltimos en las etiquetas <h2> y </h3>.
Por ltimo, para dar nfasis a algunos elementos presentes en el
cuerpo del texto podemos utilizar las etiquetas <em> y </em> para
cerrar el texto establecido.

No importa como sern visualizados en el navegador. Para cambiar

su aspecto servirn las hojas de estilo.
Adems de agregar significados al contenido, el etiquetado entrega la
estructura al documento. Las modalidades con las cuales los
elementos estn organizados crean relaciones especficas entre los
elementos mismos.
Este tipo de estructura es la base donde podemos agregar las hojas de
estilo para crear el aspecto final y, eventualmente, introducir los datos
relativos al comportamiento de las pginas mediante el JavaScript.

Elementos a nivel de bloque y elementos en lnea

Observando los resultados obtenidos hasta ahora en la ventana del
navegador, vemos que los contenidos de la pgina web adems de ser
distintos, no aparecen todos en una nica secuencia.
Los elementos a nivel de bloque (block-level elements) sirven para
indicar que los ttulos y los elementos de los prrafos no aparezcan
todos en secuencia.
La principal diferencia entre los dos tipos de elementos es la forma en
la que ocupan el espacio disponible en la pgina. Los elementos de
bloque siempre empiezan en una nueva lnea y ocupan todo el
espacio disponible hasta el final, aunque sus contenidos no lleguen
hasta el final de la misma. Por su parte, los elementos en lnea slo
ocupan el espacio necesario para mostrar sus contenidos.

Los navegadores tratan a los elementos de bloque como si se

encontraran dentro de recuadros.
Cada elemento de nfasis <h> inicia una nueva lnea. En cambio,
observando el texto enfatizado por la etiqueta <em>, vemos que ste
no se encuentra en una nueva lnea sino en una secuencia dentro del
texto del que debe ser parte. Esto se debe a que el elemento de nfasis
<em> es un elemento en lnea que permanece dentro del cuerpo de
texto al que pertenece.
En el lenguaje de marca HTML la distincin entre los elementos de
bloque y los elementos en lnea es importante ya que la mayora de
elementos de bloque pueden contener en su interior elementos en
lnea y otros elementos de bloque. En cambio, los elementos en lnea
slo pueden contener texto u otros elementos.

Adems, los elementos a nivel de bloque y en lnea se tratan

diversamente en la aplicacin del file CSS.

Estilos predefinidos (Default styles)

En nuestra visualizacin en el navegador vemos tambin que aparece
una jerarqua visual entre la titulacin de primer nivel y aquella de
segundo nivel, que tiene dimensiones menores.
Cmo hace el navegador para determinar tal diferencia? Cmo
entiende como debe aparecer la etiqueta <h1>?
Usando una hoja de estilo.

Como ya se mencion, todos los navegadores tienen sus propias

hojas de estilo preestablecidas que describen las normas estndares de
los elementos (X)HTML.
Tales normas preestablecidas son similares en todos los navegadores,
aunque pueden haber algunas diferencias determinadas por el propio
tipo de navegador utilizado.
Agregar las imgenes
Agregar imgenes a nuestra pgina web nos ofrece la oportunidad de
introducir dos nuevos conceptos base de la marca: elementos vacos y
atributos.

Elementos vacos
Hasta ahora hemos considerado la marca en relacin con los
elementos de texto de las pginas web. Sin embargo, algunos
elementos no tienen texto ya que se usan para proporcionar una
simple directiva.
Tales elementos son definidos vacos. El elemento imagen <img>
entra en esta categora. Este ltimo indica al navegador de tomar un
determinado file grfico del servidor y de insertarlo en un punto
preciso de una secuencia de texto.
Otros elementos vacos incluyen los saltos de lnea < br>, las lneas
horizontales < hr>
y otros elementos que proporcionan
informaciones en un documento pero no tocan el contenido
visualizado.

La sintaxis para los elementos vacos es ligeramente diferente entre el

HTML y el XHTML.
En HTML, los elementos vacos no usan la etiqueta de cierre sino
que se indican solo por una etiqueta, como por ejemplo <br>
agregado en el texto donde se quiere hacer aparecer un salto de lnea.
En XHTML todos los elementos, incluidos aquellos vacos, deben
siempre ser cerrados mediante la etiqueta especfica. En particular
los elementos vacos son cerrados o terminados agregando un slash
precedido por un espacio antes de la parntesis de cierre <br />.

Atributos
Usar solo la etiqueta <img>, no resulta muy til ya que no hay forma
de saber cul imagen se debe utilizar.
A este punto, se deben utilizar los atributos. Los atributos son
instrucciones que explican o modifican un elemento. Para el elemento
imagen se requiere la utilizacin del atributo src (abreviacin de
source) que entrega la posicin de la imagen a travs del URL.
La sintaxis clave para la utilizacin de los atributos es la siguiente:
<elemento nombre del atributo="valor">contenido</elemento>
Y en particular para los elementos vacos como las imgenes:
<elemento nombre del atributo="valor" />

Qu se debe saber de los atributos?

Los atributos se ponen luego del nombre del elemento solamente
con una etiqueta de apertura.
A cada elemento se pueden asociar diversos atributos, separados
con los espacios en la etiqueta de apertura. Su orden no es
importante.
Los atributos tienen valores que siguen los signos de igualdad.
El valor de un atributo puede ser representado por un nmero, una
palabra, una cadena de texto o el URL.
Generalmente es necesario insertar el valor entre comillas.
Si bien las comillas no son requeridas para todos los valores
presentes en HTML, en XHTML son siempre necesarias.

 Algunos atributos, como src y alt, son necesarios para la insercin

de elementos img. El atributo src proporciona el nombre del file
de imagen que se quiere insertar. mientras alt entrega el texto que
debe ser visualizado junto con la imagen si esta no est
disponible.
Ej. <img src="automvil.gif" alt="Ferrari F430" />
Los nombres de los atributos disponibles estn ya definidos
especficamente en el lenguaje (X)HTML. No se pueden crear
nuevos atributos.

Cambiar el aspecto con una hoja de estilo

Para mejorar el aspecto y determinar el modo que nuestra pgina se
presenta en la web debemos utilizar las hojas de estilo CSS
(Cascading Style Sheets).
Veamos brevemente que quiere decir agregar una capa (layer) a
nuestra pgina.
Una regla de estilo se encuentra en la cabecera (head) del documento
y utiliza el atributo necesario para comunicar al navegador el tipo de
informacin presente en el mismo elemento (text/css es la nica
opcin por el momento).
La regla de estilo se agrega al documento entre estos dos elementos:
<style type="text/css"> elemento de estilo </style>

Ms tarde veremos qu agregar dentro, es decir, el estilo especfico

para determinar las caractersticas precisas de la parte de texto a las
cuales fue aplicado el estilo.
La primera pgina Web est lista
Con solo esta breve introduccin es posible crear una pgina web:
hemos visto como escribir un primer documento (X)HTML y el
principio base para insertar una hoja de estilo.
Este breve anlisis nos ha permitido tambin tomar en consideracin
otros elementos fundamentales en la realizacin de una pgina web
como los atributos, los elementos vacos, los elementos a nivel de
bloque y los elementos en lnea, todos fundamentales para la creacin
de una pgina web.

Tambin hemos adquirido los principios base de la marca (X)HTML

manual. Para esta se necesita una gran precisin ya que un pequeo
error, como la omisin de un slash, puede impedir la correcta
comunicacin de los datos al navegador y por lo tanto una
visualizacin final errada de la pgina creada.

Elementos para el marcado de texto

Una vez que hemos analizado los principios de la marca veamos
cuales son las principales etiquetas que nos permiten distinguir el
texto segn nuestras exigencias.
En los siguientes pasos sern presentados los principales elementos
para describir en manera precisa el contenido de nuestra pgina.

Elementos a nivel de bloque

Las siguientes marcas, adems de aquellas de base (html, head, title y
body) que hemos ya visto, son fundamentales para dar distintos
niveles de importancia a nuestro texto:
p prrafos
h1, h2, h3, h4, h5 ttulos
blockquote referencias numerosas
pre texto preformateado
adress direccin y elementos de contacto
li, ul, ol, dl, dt, dd listas

Prrafos
<p><p/>
Los prrafos pueden contener texto, imgenes y otros elementos en
lnea pero no pueden contener otros elementos de bloque.
Ttulos
<h1></h1>
Existen hasta ahora seis elementos (X)HTML (desde h1 hasta h6)
para diferenciar los ttulos presentes en una pgina web y establecer
una jerarqua entre ellos.

Referencias numerosas

<blockquote></blockquote>
Si la pgina web presenta referencias numerosas, como por ejemplo
una citacin larga tomada de otra fuente, que va a ocupar ms de
cuatro lneas del documento se debe reconducir con las etiquetas
indicadas.
Textos preformateados
<pre></pre>
Hasta ahora hemos visto como los navegadores ignoran los espacios
en blanco y los envos presentes en el documento de origen. Sin
embargo, en algunos casos la insercin de espacios en blanco es
importante para dar un mayor significado y relevancia al texto. Para
este propsito tenemos el elemento de texto pre-formateado que sirve

para reflejar en la visualizacin final algunas partes de texto

exactamente como las hemos formateado en origen.
El texto pre-formateado se visualiza de manera estndar con un tipo
de letra (font) especial en el que todos los caracteres son de la misma
amplitud, por ej. Courier.
Direcciones
<address></address>
El elemento direccin sirve para entregar las informaciones de
contacto para el autor o los autores del documento, indicando
nombres de personas, sitios web, etc.. Este elemento generalmente se
pone al inicio o al final del documento o tambin para contener una
amplia parte de este. El elemento direccin no se utiliza para todos

los tipos de direcciones. Por ejemplo, no se emplea para identificar

las direcciones de correo electrnico.

Listas
<li></li>
En ocasiones, es posible agrupar determinadas palabras o frases en un
conjunto de elementos que tienen ms significado de forma conjunta.
Por lo tanto, es posible insertar en nuestra estructura las listas.
Es posible elegir distintos tipos de listas segn las necesidades:
Listas desordenadas: es un conjunto de elementos relacionados entre
s pero para los que no se indica un orden o secuencia determinados.
Listas ordenadas: agrupan los objetos en una secuencia precisa.
Lista de definicin: agrupan trminos y definiciones especficas.

Todos los elementos relativos a las listas son elementos a nivel de

bloque. Por lo tanto, inician siempre en una nueva lnea.

Listas
Listas no ordenadas
<ul></ul>
La etiqueta <ul> encierra todos los elementos de la lista y la etiqueta
<li> cada uno de sus elementos. El navegador por defecto muestra los
elementos de la lista tabulados y con una pequea vieta formada por
un crculo negro. El aspecto con el que se muestran los elementos de
las listas se puede modificar mediante las hojas de estilos CSS.

La etiqueta de apertura se coloca antes del primer objeto de la lista

mientras la de cierre inmediatamente despus del ltimo.

Listas ordenadas
<ol></ol>
Las listas ordenadas sirven para recoger los objetos segn un orden
en particular. Este tipo de lista se utiliza, por ejemplo, para agrupar
las distintas fases de un proceso que deben ser reproducidas y
realizadas en un orden especfico.
Con respecto a la marca, las listas funcionan como la lista sin orden.
En lugar de las vietas, en la visualizacin del navegador, los objetos
de esta lista van acompaados automticamente por un nmero.

Si deseamos que nuestra lista inicie con un nmero preciso, distinto

al 1, debemos utilizar el atributo start (ej. start="15") dentro del
elemento ol segn el siguiente ejemplo: <ol start="17">elementos
de la lista de marca con li</ol>
Listas de definicin
<dl></dl>
Estas listas se utilizan para agrupar trminos con su definicin. Toda
la lista se etiqueta con las etiquetas reportadas anteriormente.
El contenido de esta lista va etiquetado segn el nmero de trminos
contenidos y segn su definicin, respectivamente con las etiquetas
<dt></dt> y <dd>...</dd>

Ejemplo:
<dt>ornitorrinco</dt>
<dd>el ornitorrinco es un mamfero semi-acutico que vive en la
parte oriental de Australia</dd>
El elemento dl puede contener solamente los elementos dt y dd.
No es posible insertar elementos a nivel de bloque (como ttulos o
prrafos) en los trminos etiquetados como dt, pero las definiciones
marcadas con dd pueden contener cualquier tipo de contenido.

Agregar interrupciones de lnea

<br> HTML
<br /> XHTML
Todos los elementos vistos hasta ahora inician automticamente con
nuevas lneas. Sin embargo, a veces es necesario agregar una
interrupcin de lnea para empezar otra en un punto preciso de
nuestro texto. El elemento br es un elemento vaco ya que no tiene
ningn contenido.
Ej.
<p>
Es como estar <br />en otoo <br /><br />sobre los rboles <br />las
hojas
</p>

Elementos de texto en lnea

Muchos de los elementos de texto (X)HTML son elementos en lnea.
Este tipo de elementos pueden ser subdivididos en dos categoras
principales:
Elementos semnticos
Elementos de presentacin
Los elementos semnticos evidencian el significado del texto
(siglas, aspectos destacados de algunas partes, etc.) mientras los
elementos de presentacin entregan una descripcin del estilo de
texto (nfasis, tipo de letra, etc.)

En el web design actual los elementos HTML de presentacin se

utilizan raramente, ya que las informaciones sobre el estilo de una
pgina web se consideraran separadamente de las marcas y se
encuentran en las hojas CSS

Elementos en lnea semnticos

Estos elementos describen el significado del texto contenido en las
marcas. El modo en el cual estos aparecen depende de la hoja de
estilo aplicada.
En el lenguaje (X)HTML existe slo una docena de estos elementos.
La totalidad de estos se reporta a continuacin:

abbr abreviacin
acronym sigla
cite citacin
code porciones de cdigo; visualizado con un carcter monoespacio
del texto cancelado; visualizado tachado
dfn para indicar una definicin o bien la primera aparicin de un
trmino
em texto evidenciado
ins para indicar de forma clara el texto que ha sido aadido a un
determinado texto y el texto que ha sido eliminado <del>; visualizado
subrayado
kbd texto digitado con el teclado
q breve citacin en lnea

samp porcin de texto destinados como output de programas

strong texto visualizado en negrita
var referencias variables
Elementos de presentacin en lnea
Estos elementos entregan las instrucciones para componer el texto
contenido entre las especficas etiquetas.
La lista a continuacin reporta los elementos ms utilizados de esta
categora:
big aumenta levemente las dimensiones del texto incluido
small disminuye las dimensiones del texto incluido
center alinea centralmente el texto incluido

font especifica la dimensin, el color y el tipo de letra

sub pone como subndice el texto incluido
sup pone como pice el texto incluido
Elementos genricos (div y span)
Se trata de elementos genricos que pueden ser personalizados para
describir un contenido especfico segn las exigencias:
div un elemento genrico a nivel de bloque
span un elemento genrico en lnea
Estos elementos se utilizan como instrumentos primarios en la
realizacin de pginas web ya que permiten describir con precisin

los contenidos que ofrecen una multitud de enganches para agregar

reglas de estilo.
El elemento div
<div></div>
Este elemento se utiliza para identificar una divisin de nivel al
interno del texto.
Podemos utilizar un elemento div como contenedor de un grupo de
elementos lgicamente relacionados.
Encerrando con las etiquetas especficas del elemento div algunos
trminos, establecemos entre ellos una relacin conceptual.

El elemento span
<span></span>
El elemento span ofrece las mismas ventajas del div pero se utiliza
como elemento en lnea y no introduce interrupciones de regln. Ya
que los elementos span son elementos en lnea, estos pueden contener
solo texto u otros elementos en lnea.
Elementos de identificacin
Cada elemento de identificacin, como por ejemplo los ms
utilizados id y class, tienen funciones especficas y se utilizan a
menudo como atributos para calificar los elementos genricos.

El elemento id
<id></id>
El identificador id se utiliza para establecer un identificador nico a
cada elemento dentro de una pgina HTML. El valor del id debe, por
lo tanto, ser usado una sola vez en el documento. Este elemento es
til para asignar un nombre a un dato particular en el contenido de
nuestra pgina.
El id se utiliza tambin para identificar las distintas secciones de una
pgina como el siguiente ejemplo:
<div id="main">
(elementos principales del contenido)
</div>
O:

<div id="links">
(lista de enlaces)
</div>
El elemento class
El atributo class se utiliza para agrupar elementos similares entre
ellos.
Al contrario del atributo id, distintos elementos pueden compartir un
solo nombre de clase.
Haciendo algunos elementos parte de una misma clase, se puede
aplicar estilo a todos los elementos etiquetados con una sola regla de
estilo.

Los mismos elementos pueden tambin tener un atributo class y un

id. Adems, es posible agruparlos al mismo tiempo en ms de una
clase.

Agregar enlaces (links)

En esta seccin examinaremos los modos para insertar en nuestra
pgina web los enlaces (links) a otras pginas de nuestro sitio o de
otros sitios web.
Quien navega en la red conoce sin duda aquellas partes de texto
subrayadas que indican donde clickear.
Un elemento especfico permite crear este tipo de enlace: ancla (a).

El elemento ancla
<a></a>
La parte de texto encerrada por estas marcas se convierte en un
enlace de hipertexto.
El atributo href (hypertext reference)
Sirve para comunicar al navegador el documento que se quiere
conectar. Este atributo proporciona el URL de la pgina a conectar,
que debe siempre aparecer entre comillas.
Hay dos modos para especificar el URL:
URL absoluto (Absolute URL)

Proporciona el URL completo del documento, incluido el protocolo

(http://), el dominio y la ruta, por lo que no se necesita ms
informacin para obtener el recurso enlazado. Este tipo de URL se
utiliza para indicar un documento en la web, fuera de nuestro sitio.
URL relativo (Relative URL)
Describe la ruta al file conectado con el documento corriente. No
necesita el protocolo ni el nombre del dominio sino solamente la ruta.
Este tipo de URL puede ser utilizado cuando se crea un link para otro
documento presente en el propio sitio, en el mismo servidor.
Una URL relativa es una versin abreviada de una URL absoluta. Su
objetivo es eliminar todas las partes de la URL absoluta que se
pueden adivinar a partir de la informacin de contexto de la pgina

web. En otras palabras, las URL relativas aprovechan la inteligencia

de los navegadores para crear URL incompletas que los navegadores
pueden completar deduciendo la informacin que falta.
Crear un enlace a una pgina en red
Para crear un enlace con una especfica pgina en la red es necesario
crear un link externo, que conduzca a una pgina fuera del propio
sitio o servidor.
Los elementos a utilizar para crear este enlace son siempre la ancla
(a) y el atributo href que contiene el URL completo de la pgina que
necesitamos. Estas etiquetas se tratan exactamente como hemos visto
hasta ahora.

Crear un enlace dentro del proprio sitio

Las pginas dentro de un mismo sitio obviamente siempre estn
conectadas entre si. Por lo tanto, este tipo de link es sin duda
importante.
En este caso se necesita utilizar un URL relativo, sin la insercin del
protocolo ni del dominio.
Sin el protocolo, el navegador buscar la pgina en el mismo servidor
mientras la ruta le dir donde buscar exactamente el file.
Crear enlaces dentro de un mismo directorio
Si desde una pgina web se quiere enlazar un recurso que se
encuentra en el mismo directorio del servidor, la URL relativa puede

prescindir de todas las partes de la URL absoluta salvo el nombre del

recurso enlazado.
Cuando el navegador encuentra una URL relativa que slo consiste
en el nombre de un recurso, supone que el protocolo, servidor y
directorio del recurso enlazado son los mismos que los del origen del
enlace.

Crear enlaces a un directorio inferior

Si el file est en el mismo sitio pero en un directorio inferior es
necesario proporcionar al navegador el nombre de la ruta presente en
el URL.
Los diversos directorios se indican separados mediante los slash.

Por lo tanto, nuestra ancla (a) comunicar al navegador de buscar en

el mismo directorio otro directorio inferior, al cual, a travs del
atributo href, hemos indicado el nombre y, dentro de este, un file
especfico.
Crear enlaces a un directorio superior
La URL relativa debe indicar de alguna manera que es necesario
subir un nivel en la jerarqua de directorios para llegar hasta el
recurso.
En este punto, luego de haber creado un link directo a un directorio
inferior es necesario indicar una ruta de retorno con un link especial.

En este caso la ruta que se necesita indicar es precedida por un doble

punto y el slash (../). De este modo el navegador buscar el file
especfico en un directorio de nivel superior.
Ej. <p><a href="../index.html">[volver a la home]</a></p>
En el caso que se deba subir dos directorios en vez de uno, el
elemento (../) debe ser repetido por segunda vez.
Rutas relativas en la estructura de un sitio web
Todos los sitios tienen un directorio madre que contiene todos los
otros directorios.
Hasta ahora las rutas que hemos considerado hacan referencia a un
documento con el link.

Otra forma de escribir una ruta es aquel de iniciar desde el directorio

principal y hacer a continuacin un listado con los distintos subdirectorios hasta el file al cual se quiere establecer el enlace. Para un
enlace de este tipo no sirve indicar el nombre del directorio principal
sino basta con sustituirlo convencionalmente con un slash (/)
Las imgenes
Los datos que hemos visto hasta ahora valen tambin para establecer
enlaces a files grficos especficos.
El atributo src para las imgenes funciona como el atributo href.
Ya que es ms comn utilizar las imgenes provenientes del mismo
servidor, el atributo src ser asociado a un URL relativo.
Ej. <img src="images/computer.gif" alt="" />

El URL reportado indica de buscar en el directorio corriente, el

directorio images en el cual se encuentra la imagen especfica (por ej
computer.gif).
Crear un enlace para un punto especfico de una pgina.
Crear un enlace de este tipo requiere 2 pasos:
Identificar el destino:
Para crear un destino se usa el atributo id para proporcionar el
elemento base de la destinacin de nuestro enlace.
Ej. <h1 id="nota">Nota explicativa</h1>

Crear el enlace:
Para crear el link al elemento establecido en el siguiente paso
usaremos el atributo href para proporcionar la posicin del link. Para
indicar que el enlace conduce a una parte especfica del documento
usaremos tambin la almohadilla o smbolo numeral (#) insertado
antes del nombre de la destinacin. Ej. <a href="#nota">Nota
explicativa</a>
Crear un enlace para un punto especfico de otro documento
Para realizar esto es necesario agregar al final del URL, absoluto o
relativo, el nombre especfico de la parte hacia la cual dirigir nuestro
link. Por ejemplo, para crear un link a nuestra nota explicativa dentro
de un artculo perteneciente a otro documento del mismo directorio,
nuestra URL aparecer del siguiente modo:

<a href="artculo.html#nota">Ver la nota explicativa</a>

Indicar una nueva ventana del navegador

Es posible hacer que los enlaces realizados se abran en una nueva
ventana del navegador. De este modo los visitantes de una pgina
web pueden ver el contenido del link y visualizar al mismo tiempo
los contenidos de partida.

Si no se quiere controlar la dimensin especfica de la nueva ventana

se puede utilizar siempre el lenguaje (X)HTML. De otro modo, si se

quiere abrir la nueva ventana con dimensiones precisas es necesario

utilizar el lenguaje JavaScript.
Abrir una nueva ventana con el (X)HTML
En este caso usaremos el atributo target junto al elemento ancla(a)
para indicar al navegador el nombre de la ventana en la cual
queremos que el documento conectado se abra. El valor del target es
establecido como _blank o con un nombre de eleccin propia.
Ej. <a href="http://www.cpugroup.it" target="_blank">CPU Group</
a>

Crear un link a una casilla de correo (link mailto)

En este caso es posible crear un link directo a una direccin de correo
especfico. Haciendo click en este link el navegador abrir
automticamente un nuevo mensaje de correo dirigido a la direccin
preestablecida mediante nuestro enlace.
Ej. <a href="mailto:elearning@cpu.it">Contacta los docentes CPU</a>
Distintas modalidades para agregar imgenes
Las imgenes aparecen en las pginas web en dos modos: como
imgenes en lnea con el texto, o como fondo de las pginas.
Las imgenes de fondo pueden ser agregadas usando las hojas de
estilo y por lo tanto sern tratadas en la unidad sucesiva.

Las imgenes en lnea pueden ser insertadas mediante la utilizacin

del elemento img con distintas modalidades:

Como imgenes simples o estticas

Como link
Como mapas de imgenes (imagemap) a veces es necesario
hacer que una determinada parte de una imagen se conecte a un
link.

El elemento imagen (img)

<img>
<img /> (XHTML)

El elemento img comunica al navegador el punto donde se inserta la

imagen, siempre en lnea con el texto.
El elemento img es considerado tambin como un elemento de
reemplazo ya que es sustituido por un file externo cuando la pgina
se visualiza. Este hecho lo diferencia de los elementos de texto ya
analizados que presentan su contenido en la fuente (X)HTML.
Para determinar un alineamiento especfico de la imagen dentro de
una pgina usaremos siempre las hojas de estilo.
Las imgenes insertadas sin agregar el file CSS sern siempre
visualizadas por el navegador con un alineamiento estndar, en lnea
con el texto.

Proporcionar la posicin con el atributo src (source)

src="URL"
El atributo en cuestin se utiliza tambin para indicar la direccin del
file de imagen, generalmente usando un URL relativo.
Si la imagen a insertar en el flujo de texto se encuentra en el mismo
directorio del documento (X)HTML, podemos indicar la imagen con
el atributo src simplemente con su nombre.
Ej. src="computer.gif"
Adems, cada elemento img debera contener tambin un atributo alt
para presentar una breve descripcin de la imagen en caso de que
esta no pueda ser visualizada. Ej. alt="Un foto ma

En el caso en el cual el texto alternativo elegido sea demasiado largo,

el atributo alt no es adecuado. Para imgenes que necesitan una
descripcin ms larga y detallada se utiliza el atributo longdesc.
El valor de este atributo se indica por el URL de un documento
(X)HTML que contiene la descripcin necesaria.

Proporcionar dimensiones a las imagenes

width="200"
height="100"
Estos atributos indican las dimensiones reales de nuestra imagen en
nmeros de pixel.

Insertar mapas de imgenes (imagemaps)

Los mapas de imgenes estn compuestos por tres partes:
Un file grfico estndar (extensiones .gif, .jpg/.jpeg, o .png)
posicionado a travs del elemento img.
El atributo usemap insertado en el elemento img que establece
que mapa usar (cada mapa siempre tiene su nombre).
Un elemento map que funciona de contenedor para los elementos
rea.

Cada rea corresponde a una zona clickeable en el mapa de imgenes

y contiene la informacin de la direccin de la misma rea.

Crear un mapa
Afortunadamente existen instrumentos para generar automticamente
los mapas. La mayor parte de los programas de grfica, como por
ejemplo Dreamweaver, Photoshop, Expression Web, tienen
instrumentos para generar automticamente los mapas, para no tener
que crearlos manualmente. Veamos como:

Abrir la imagen con el programa seleccionado.

Definir el rea que ser clickeable, con los instrumentos apropiados
de seleccin.
Con la seleccin activa insertar un URL relativo al rea en una
casilla de texto.

Agregar ms formas y las respectivas URL para cada rea clickeable

presente en la imagen.
Seleccionar el tipo de imagen mapa a crear. La nica opcin
disponible es la tipo client-side.
Nominar el mapa en el campo del nombre apropiado.
Agregar el mapa en el documento (X)HTML.
Los instrumentos de web-authoring, como por ejemplo
Dreamweaver, insertan los mapas de manera automtica. En otros
casos es necesario guardar y exportar el cdigo del mapa para
luego copiarlo y pegarlo en el documento (X)HTML.
Controlar que el elemento img haga referencia al nombre correcto
del mapa.
Guardar las modificaciones en el documento (X)HTML y
visualizarlo con el navegador.

FIN DE LA LECCIN