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 ellenguaje HTML, para poder dar los primeros pasos en la creacin deuna pgina web. En particular sern examinados los siguientespuntos:

Entender el funcionamiento de las marcas HTML y examinar loselementos iniciales fundamentales.

Entender como los distintos navegadores interpretan losdocumentos (X)HTML.

Ver la estructura base de un documento (X)HTML y elfuncionamiento base de una hoja de estilo.

Disear la primera pgina Web

Fases principales:

1) Crear el contenido. Insertar el contenido textual para ver comointeracta el navegador.

2) Crear la estructura del documento. Estudiaremos los primeroselementos de la utilizacin del lenguaje (X)HTML, que proveen laestructura a la pgina. 3) Identificar los elementos de texto. En esta fase veremos losprimeros elementos utilizables para describir el contenido, medianteel lenguaje (X)HTML.

4) Agregar imgenes. En esta fase, incorporaremos imgenes a unapgina, veremos aquello que se refiere a los atributos y los elementosvacos. 5) Cambiar el aspecto de la pgina con una hoja de estilo. En estafase veremos los primeros elementos del funcionamiento del fileCSS.

Analizando estos cinco pasos tendremos los primeros elementos paradisear una pgina web base. Durante esta fase inicial, es importante observar siempre losprogresos y cambios a travs del navegador para ver detalladamentecada cambio derivado de nuestras acciones en el documento deorigen.

Usar un editor de textos

En primer lugar se necesita comenzar con un editor de textos, unprograma ya presente en cada sistema operativo. Tomemos enconsideracin por ahora el programa Bloc de notas de Windows (enmac 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 enBloc de notas.

Guardar el documento creado con extensin .html en una nuevacarpeta especfica que contendr todo el material necesario para laweb.

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 fileen el men File.

Qu nos muestra el navegador?

El documento visualizado en esta primera fase no aparecer comonosotros lo hemos creado. Esto porque el navegador ignora lasdivisiones y otros elementos del formato presentes en el documentode origen.

Crear el texto y guardarlo con una extensin .html no es suficientepara hacer visualizar al navegador aquello que nosotros queremos,debido a que an no hemos indicado la estructura del contenido denuestro documento. Aqu entra en juego el HTML. Ahora veremos los primeros ejemplosde etiquetado para proveer la estructura que nuestro navegadorpodr 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, entreparntesis: . El nombre del elemento aparece entre la etiqueta de apertura (o starttag) y la de cierre (o end tag) precedido por un slash (/). Ej. start tag: end tag: Todos los elementos insertados convencionalmente se escriben conletras minsculas.

Los documentos (X)HTML se dividen generalmente en dossecciones:

El ttulo o cabeza (head). La cabecera contiene informacin sobreel propio documento HTML, como por ejemplo su ttulo y elidioma de la pgina. Los contenidos indicados en la cabecera noson visibles para el usuario, con la excepcin de la etiqueta, que se utiliza para indicar el ttulo del documento y quelos navegadores lo visualizan en la parte superior izquierda de laventana del navegador.

El cuerpo (body) encierra todos los contenidos que se muestran alusuario (prrafos de texto, imgenes, tablas).

Modificamos manualmente los elementos vistos hasta ahora ennuestro documento base .html para luego guardarlo al final de lasoperaciones y controlarlo, como hemos hecho previamente en laventana de nuestro navegador.

Encerrar todo el documento en un etiqueta de apertura start tag y una etiqueta de cierre end tag.

Crear la cabecera del documento que contiene el ttulo de nuestrapgina. Encerrar siempre el ttulo entre las etiquetas de apertura yde cierre segn el siguiente modelo:

el web design

Crear el cuerpo del texto seleccionado, insertndolo siempreentre una etiqueta de apertura y una de cierre .

Identificar los elementos de texto:

En realidad observando en la ventana del navegador nuestrosprimeros 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 yla estructura a los contenidos, no de determinar su aspecto. Por ejemplo, se necesita distinguir qu partes de texto sern msevidentes. Para hacer esto, es necesario encerrar las partes que sequieren enfatizar con las etiquetas y . Obviamentepodemos crear ms niveles de importancia en la organizacin denfasis. Por ejemplo, si queremos diferenciar el ttulo principal de la pginadel ttulo de varios prrafos, podemos encerrar los ttulos de estosltimos en las etiquetas y . Por ltimo, para dar nfasis a algunos elementos presentes en elcuerpo del texto podemos utilizar las etiquetas y paracerrar el texto establecido.

No importa como sern visualizados en el navegador. Para cambiarsu aspecto servirn las hojas de estilo. Adems de agregar significados al contenido, el etiquetado entrega laestructura al documento. Las modalidades con las cuales loselementos estn organizados crean relaciones especficas entre los elementos mismos. Este tipo de estructura es la base donde podemos agregar las hojas deestilo para crear el aspecto final y, eventualmente, introducir los datosrelativos 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 delnavegador, vemos que los contenidos de la pgina web adems de serdistintos, no aparecen todos en una nica secuencia. Los elementos a nivel de bloque (block-level elements) sirven paraindicar que los ttulos y los elementos de los prrafos no aparezcantodos en secuencia. La principal diferencia entre los dos tipos de elementos es la forma enla que ocupan el espacio disponible en la pgina. Los elementos debloque siempre empiezan en una nueva lnea y ocupan todo elespacio disponible hasta el final, aunque sus contenidos no lleguenhasta el final de la misma. Por su parte, los elementos en lnea sloocupan el espacio necesario para mostrar sus contenidos.

Los navegadores tratan a los elementos de bloque como si seencontraran dentro de recuadros. Cada elemento de nfasis inicia una nueva lnea. En cambio,observando el texto enfatizado por la etiqueta , vemos que steno se encuentra en una nueva lnea sino en una secuencia dentro deltexto del que debe ser parte. Esto se debe a que el elemento de nfasis es un elemento en lnea que permanece dentro del cuerpo detexto al que pertenece. En el lenguaje de marca HTML la distincin entre los elementos debloque y los elementos en lnea es importante ya que la mayora deelementos de bloque pueden contener en su interior elementos enlnea y otros elementos de bloque. En cambio, los elementos en lneaslo pueden contener texto u otros elementos.

Adems, los elementos a nivel de bloque y en lnea se tratandiversamente en la aplicacin del file CSS.

Estilos predefinidos (Default styles)

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

Como ya se mencion, todos los navegadores tienen sus propiashojas de estilo preestablecidas que describen las normas estndares delos elementos (X)HTML. Tales normas preestablecidas son similares en todos los navegadores,aunque pueden haber algunas diferencias determinadas por el propiotipo de navegador utilizado.

Agregar las imgenes

Agregar imgenes a nuestra pgina web nos ofrece la oportunidad deintroducir dos nuevos conceptos base de la marca: elementos vacos yatributos.

Elementos vacos

Hasta ahora hemos considerado la marca en relacin con loselementos de texto de las pginas web. Sin embargo, algunoselementos no tienen texto ya que se usan para proporcionar unasimple directiva. Tales elementos son definidos vacos. El elemento imagen entra en esta categora. Este ltimo indica al navegador de tomar undeterminado file grfico del servidor y de insertarlo en un puntopreciso de una secuencia de texto. Otros elementos vacos incluyen los saltos de lnea < br>, las lneashorizontales < hr> y otros elementos que proporcionaninformaciones en un documento pero no tocan el contenidovisualizado.

La sintaxis para los elementos vacos es ligeramente diferente entre elHTML y el XHTML. En HTML, los elementos vacos no usan la etiqueta de cierre sinoque se indican solo por una etiqueta, como por ejemplo agregado en el texto donde se quiere hacer aparecer un salto de lnea. En XHTML todos los elementos, incluidos aquellos vacos, debensiempre ser cerrados mediante la etiqueta especfica. En particularlos elementos vacos son cerrados o terminados agregando un slashprecedido por un espacio antes de la parntesis de cierre .

Atributos

Usar solo la etiqueta , no resulta muy til ya que no hay formade saber cul imagen se debe utilizar. A este punto, se deben utilizar los atributos. Los atributos soninstrucciones que explican o modifican un elemento. Para el elementoimagen se requiere la utilizacin del atributo src (abreviacin desource) que entrega la posicin de la imagen a travs del URL. La sintaxis clave para la utilizacin de los atributos es la siguiente:contenido Y en particular para los elementos vacos como las imgenes:

Qu se debe saber de los atributos?

Los atributos se ponen luego del nombre del elemento solamentecon una etiqueta de apertura.

A cada elemento se pueden asociar diversos atributos, separadoscon los espacios en la etiqueta de apertura. Su orden no esimportante.

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 insercinde elementos img. El atributo src proporciona el nombre del filede imagen que se quiere insertar. mientras alt entrega el texto quedebe ser visualizado junto con la imagen si esta no estdisponible.

Ej. 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 sepresenta en la web debemos utilizar las hojas de estilo CSS(Cascading Style Sheets). Veamos brevemente que quiere decir agregar una capa (layer) anuestra pgina. Una regla de estilo se encuentra en la cabecera (head) del documentoy utiliza el atributo necesario para comunicar al navegador el tipo deinformacin presente en el mismo elemento (text/css es la nicaopcin por el momento). La regla de estilo se agrega al documento entre estos dos elementos: elemento de estilo

Ms tarde veremos qu agregar dentro, es decir, el estilo especficopara determinar las caractersticas precisas de la parte de texto a lascuales 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 elprincipio base para insertar una hoja de estilo. Este breve anlisis nos ha permitido tambin tomar en consideracinotros elementos fundamentales en la realizacin de una pgina webcomo los atributos, los elementos vacos, los elementos a nivel debloque y los elementos en lnea, todos fundamentales para la creacinde una pgina web.

Tambin hemos adquirido los principios base de la marca (X)HTMLmanual. Para esta se necesita una gran precisin ya que un pequeoerror, como la omisin de un slash, puede impedir la correctacomunicacin de los datos al navegador y por lo tanto unavisualizacin final errada de la pgina creada.

Elementos para el marcado de texto

Una vez que hemos analizado los principios de la marca veamoscuales son las principales etiquetas que nos permiten distinguir eltexto segn nuestras exigencias. En los siguientes pasos sern presentados los principales elementospara 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 ybody) que hemos ya visto, son fundamentales para dar distintosniveles 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 Los prrafos pueden contener texto, imgenes y otros elementos enlnea pero no pueden contener otros elementos de bloque.

Ttulos Existen hasta ahora seis elementos (X)HTML (desde h1 hasta h6)para diferenciar los ttulos presentes en una pgina web y estableceruna jerarqua entre ellos.

Referencias numerosas

Si la pgina web presenta referencias numerosas, como por ejemplouna citacin larga tomada de otra fuente, que va a ocupar ms decuatro lneas del documento se debe reconducir con las etiquetasindicadas.

Textos preformateados Hasta ahora hemos visto como los navegadores ignoran los espaciosen blanco y los envos presentes en el documento de origen. Sinembargo, en algunos casos la insercin de espacios en blanco esimportante para dar un mayor significado y relevancia al texto. Paraeste propsito tenemos el elemento de texto pre-formateado que sirve

para reflejar en la visualizacin final algunas partes de textoexactamente como las hemos formateado en origen. El texto pre-formateado se visualiza de manera estndar con un tipode letra (font) especial en el que todos los caracteres son de la mismaamplitud, por ej. Courier.

Direcciones El elemento direccin sirve para entregar las informaciones decontacto para el autor o los autores del documento, indicandonombres de personas, sitios web, etc.. Este elemento generalmente sepone al inicio o al final del documento o tambin para contener unaamplia parte de este. El elemento direccin no se utiliza para todos

los tipos de direcciones. Por ejemplo, no se emplea para identificarlas direcciones de correo electrnico.

Listas En ocasiones, es posible agrupar determinadas palabras o frases en unconjunto 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 entres 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 debloque. Por lo tanto, inician siempre en una nueva lnea.

Listas

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

La etiqueta de apertura se coloca antes del primer objeto de la listamientras la de cierre inmediatamente despus del ltimo.

Listas ordenadas Las listas ordenadas sirven para recoger los objetos segn un ordenen particular. Este tipo de lista se utiliza, por ejemplo, para agruparlas distintas fases de un proceso que deben ser reproducidas yrealizadas 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 objetosde esta lista van acompaados automticamente por un nmero.

Si deseamos que nuestra lista inicie con un nmero preciso, distintoal 1, debemos utilizar el atributo start (ej. start="15") dentro delelemento ol segn el siguiente ejemplo: elementosde la lista de marca con li

Listas de definicin Estas listas se utilizan para agrupar trminos con su definicin. Todala lista se etiqueta con las etiquetas reportadas anteriormente. El contenido de esta lista va etiquetado segn el nmero de trminoscontenidos y segn su definicin, respectivamente con las etiquetas y ...

Ejemplo: ornitorrinco el ornitorrinco es un mamfero semi-acutico que vive en laparte oriental de Australia

El elemento dl puede contener solamente los elementos dt y dd. No es posible insertar elementos a nivel de bloque (como ttulos oprrafos) en los trminos etiquetados como dt, pero las definicionesmarcadas con dd pueden contener cualquier tipo de contenido.

Agregar interrupciones de lnea

HTML XHTML Todos los elementos vistos hasta ahora inician automticamente connuevas lneas. Sin embargo, a veces es necesario agregar unainterrupcin de lnea para empezar otra en un punto preciso denuestro texto. El elemento br es un elemento vaco ya que no tieneningn contenido. Ej. Es como estar en otoo sobre los rboles lashojas

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 categorasprincipales:

Elementos semnticos Elementos de presentacin

Los elementos semnticos evidencian el significado del texto(siglas, aspectos destacados de algunas partes, etc.) mientras loselementos de presentacin entregan una descripcin del estilo detexto (nfasis, tipo de letra, etc.)

En el web design actual los elementos HTML de presentacin seutilizan raramente, ya que las informaciones sobre el estilo de unapgina web se consideraran separadamente de las marcas y seencuentran en las hojas CSS

Elementos en lnea semnticos

Estos elementos describen el significado del texto contenido en lasmarcas. El modo en el cual estos aparecen depende de la hoja deestilo 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 mono-espacio del texto cancelado; visualizado tachado dfn para indicar una definicin o bien la primera aparicin de untrmino em texto evidenciado ins para indicar de forma clara el texto que ha sido aadido a undeterminado texto y el texto que ha sido eliminado ; visualizadosubrayado kbd texto digitado con el teclado q breve citacin en lnea

samp porcin de texto destinados como output de programasstrong texto visualizado en negrita var referencias variables

Elementos de presentacin en lnea

Estos elementos entregan las instrucciones para componer el textocontenido entre las especficas etiquetas. La lista a continuacin reporta los elementos ms utilizados de estacategora:

big aumenta levemente las dimensiones del texto incluidosmall disminuye las dimensiones del texto incluidocenter 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 paradescribir un contenido especfico segn las exigencias:

div un elemento genrico a nivel de bloquespan un elemento genrico en lnea

Estos elementos se utilizan como instrumentos primarios en larealizacin de pginas web ya que permiten describir con precisin

los contenidos que ofrecen una multitud de enganches para agregarreglas de estilo.

El elemento div Este elemento se utiliza para identificar una divisin de nivel alinterno del texto. Podemos utilizar un elemento div como contenedor de un grupo deelementos lgicamente relacionados. Encerrando con las etiquetas especficas del elemento div algunostrminos, establecemos entre ellos una relacin conceptual.

El elemento span El elemento span ofrece las mismas ventajas del div pero se utilizacomo elemento en lnea y no introduce interrupciones de regln. Yaque los elementos span son elementos en lnea, estos pueden contenersolo texto u otros elementos en lnea.

Elementos de identificacin

Cada elemento de identificacin, como por ejemplo los msutilizados id y class, tienen funciones especficas y se utilizan amenudo como atributos para calificar los elementos genricos.

El elemento id El identificador id se utiliza para establecer un identificador nico acada elemento dentro de una pgina HTML. El valor del id debe, porlo tanto, ser usado una sola vez en el documento. Este elemento estil para asignar un nombre a un dato particular en el contenido denuestra pgina. El id se utiliza tambin para identificar las distintas secciones de unapgina como el siguiente ejemplo:

(elementos principales del contenido) O:

(lista de enlaces)

El elemento class El atributo class se utiliza para agrupar elementos similares entreellos. Al contrario del atributo id, distintos elementos pueden compartir unsolo nombre de clase. Haciendo algunos elementos parte de una misma clase, se puedeaplicar estilo a todos los elementos etiquetados con una sola regla deestilo.

Los mismos elementos pueden tambin tener un atributo class y unid. Adems, es posible agruparlos al mismo tiempo en ms de unaclase.

Agregar enlaces (links)

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

El elemento ancla La parte de texto encerrada por estas marcas se convierte en unenlace de hipertexto.

El atributo href (hypertext reference)

Sirve para comunicar al navegador el documento que se quiereconectar. 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 msinformacin para obtener el recurso enlazado. Este tipo de URL seutiliza 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. Nonecesita el protocolo ni el nombre del dominio sino solamente la ruta. Este tipo de URL puede ser utilizado cuando se crea un link para otrodocumento presente en el propio sitio, en el mismo servidor. Una URL relativa es una versin abreviada de una URL absoluta. Suobjetivo es eliminar todas las partes de la URL absoluta que sepueden adivinar a partir de la informacin de contexto de la pgina

web. En otras palabras, las URL relativas aprovechan la inteligenciade los navegadores para crear URL incompletas que los navegadorespueden 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 necesariocrear un link externo, que conduzca a una pgina fuera del propiositio 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 vistohasta ahora.

Crear un enlace dentro del proprio sitio

Las pginas dentro de un mismo sitio obviamente siempre estnconectadas entre si. Por lo tanto, este tipo de link es sin dudaimportante. En este caso se necesita utilizar un URL relativo, sin la insercin delprotocolo ni del dominio. Sin el protocolo, el navegador buscar la pgina en el mismo servidormientras 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 seencuentra en el mismo directorio del servidor, la URL relativa puede

prescindir de todas las partes de la URL absoluta salvo el nombre delrecurso enlazado. Cuando el navegador encuentra una URL relativa que slo consisteen el nombre de un recurso, supone que el protocolo, servidor ydirectorio del recurso enlazado son los mismos que los del origen delenlace.

Crear enlaces a un directorio inferior

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

Por lo tanto, nuestra ancla (a) comunicar al navegador de buscar enel mismo directorio otro directorio inferior, al cual, a travs delatributo href, hemos indicado el nombre y, dentro de este, un fileespecfico.

Crear enlaces a un directorio superior

La URL relativa debe indicar de alguna manera que es necesariosubir un nivel en la jerarqua de directorios para llegar hasta elrecurso. En este punto, luego de haber creado un link directo a un directorioinferior es necesario indicar una ruta de retorno con un link especial.

En este caso la ruta que se necesita indicar es precedida por un doblepunto y el slash (../). De este modo el navegador buscar el fileespecfico en un directorio de nivel superior.

Ej. [volver a la home] En el caso que se deba subir dos directorios en vez de uno, elelemento (../) 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 losotros directorios. Hasta ahora las rutas que hemos considerado hacan referencia a undocumento con el link.

Otra forma de escribir una ruta es aquel de iniciar desde el directorioprincipal y hacer a continuacin un listado con los distintos sub-directorios hasta el file al cual se quiere establecer el enlace. Para unenlace de este tipo no sirve indicar el nombre del directorio principalsino basta con sustituirlo convencionalmente con un slash (/)

Las imgenes

Los datos que hemos visto hasta ahora valen tambin para establecerenlaces 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 mismoservidor, el atributo src ser asociado a un URL relativo. Ej.

El URL reportado indica de buscar en el directorio corriente, eldirectorio images en el cual se encuentra la imagen especfica (por ejcomputer.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 elelemento base de la destinacin de nuestro enlace. Ej. Nota explicativa

Crear el enlace: Para crear el link al elemento establecido en el siguiente pasousaremos el atributo href para proporcionar la posicin del link. Paraindicar que el enlace conduce a una parte especfica del documentousaremos tambin la almohadilla o smbolo numeral (#) insertadoantes del nombre de la destinacin. Ej. Notaexplicativa

Crear un enlace para un punto especfico de otro documento Para realizar esto es necesario agregar al final del URL, absoluto orelativo, el nombre especfico de la parte hacia la cual dirigir nuestrolink. Por ejemplo, para crear un link a nuestra nota explicativa dentrode un artculo perteneciente a otro documento del mismo directorio,nuestra URL aparecer del siguiente modo:

Ver la nota explicativa

Indicar una nueva ventana del navegador

Es posible hacer que los enlaces realizados se abran en una nuevaventana del navegador. De este modo los visitantes de una pginaweb pueden ver el contenido del link y visualizar al mismo tiempolos contenidos de partida.

Si no se quiere controlar la dimensin especfica de la nueva ventanase puede utilizar siempre el lenguaje (X)HTML. De otro modo, si se

quiere abrir la nueva ventana con dimensiones precisas es necesarioutilizar 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 cualqueremos que el documento conectado se abra. El valor del target esestablecido como _blank o con un nombre de eleccin propia. Ej. CPU Group

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

En este caso es posible crear un link directo a una direccin de correoespecfico. Haciendo click en este link el navegador abrirautomticamente un nuevo mensaje de correo dirigido a la direccinpreestablecida mediante nuestro enlace. Ej. Contacta los docentes CPU

Distintas modalidades para agregar imgenes

Las imgenes aparecen en las pginas web en dos modos: comoimgenes en lnea con el texto, o como fondo de las pginas. Las imgenes de fondo pueden ser agregadas usando las hojas deestilo y por lo tanto sern tratadas en la unidad sucesiva.

Las imgenes en lnea pueden ser insertadas mediante la utilizacindel 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 unlink.

El elemento imagen (img)

(XHTML)

El elemento img comunica al navegador el punto donde se inserta laimagen, siempre en lnea con el texto. El elemento img es considerado tambin como un elemento dereemplazo ya que es sustituido por un file externo cuando la pginase visualiza. Este hecho lo diferencia de los elementos de texto yaanalizados que presentan su contenido en la fuente (X)HTML. Para determinar un alineamiento especfico de la imagen dentro deuna pgina usaremos siempre las hojas de estilo. Las imgenes insertadas sin agregar el file CSS sern siemprevisualizadas por el navegador con un alineamiento estndar, en lneacon el texto.

Proporcionar la posicin con el atributo src (source)

src="URL"

El atributo en cuestin se utiliza tambin para indicar la direccin delfile de imagen, generalmente usando un URL relativo. Si la imagen a insertar en el flujo de texto se encuentra en el mismodirectorio del documento (X)HTML, podemos indicar la imagen conel atributo src simplemente con su nombre. Ej. src="computer.gif" Adems, cada elemento img debera contener tambin un atributo altpara presentar una breve descripcin de la imagen en caso de queesta 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 unadescripcin 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 imageneswidth="200" height="100"

Estos atributos indican las dimensiones reales de nuestra imagen ennmeros 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 imgenesy contiene la informacin de la direccin de la misma rea.

Crear un mapa

Afortunadamente existen instrumentos para generar automticamentelos mapas. La mayor parte de los programas de grfica, como porejemplo Dreamweaver, Photoshop, Expression Web, tieneninstrumentos para generar automticamente los mapas, para no tenerque 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 clickeablepresente en la imagen.

Seleccionar el tipo de imagen mapa a crear. La nica opcindisponible 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 ejemploDreamweaver, insertan los mapas de manera automtica. En otroscasos es necesario guardar y exportar el cdigo del mapa paraluego copiarlo y pegarlo en el documento (X)HTML.

Controlar que el elemento img haga referencia al nombre correctodel mapa.

Guardar las modificaciones en el documento (X)HTML yvisualizarlo con el navegador.

FIN DE LA LECCIN