Índice
2.2. Vistas ... 6
2.3. Trabajar con textos, enlaces, imágenes, tablas, formularios, marcos y comportamientos. ... 8
2.4. JavaScript: Introducción. Características. Utilización. ... 47
2.5. Fundamentos ... 50
2.6. Eventos... 59
2.7. Objetos ... 62
2.8. Estilos: CSS ... 64
Unidad 02
Editor WYSIWYG de Páginas Web – JavaScript y CSS
Objetivo
Mostraremos de una forma fácil y didáctica como sacar provecho a los editores WYSIWYG con unos pocos clics y nos pondremos en la senda para poder penetrar mejor en sus secretos.
El objetivo de este curso es mostrar las principales funcionalidades de los editores web, de manera que cuando acabemos la unidad cualquiera sea capaz de comprender un programa y este capacitado para afrontar la creación de una página Web.
En esta unidad se desarrollaran los siguientes conceptos:
Características de algunos Editores HTML del mercado
Texto en HTML: formato, fuente, colores. Trabajar con textos, enlaces, imágenes, tablas, formularios, marcos y comportamientos.
Listas
Propiedades básicas de las páginas Web
Pantalla inicial. Vistas.
Introducción. Características. Utilización. Definición. Fundamentos. Eventos. Objetos.
Introducción. Sintaxis Básica. Utilización. Ejemplos. Clases. Estilos en Dreamweaver.
Hacer más atractivas tus páginas ingresándole gráficos.
La relación entre las imágenes y las páginas Web.
Formatos de imágenes y sus propiedades.
Utilizar inteligentemente las imágenes.
Las imágenes, sus atributos y HTML.
Imágenes como fondo de página.
Introducción: Editores HTML
Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.
Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página.
Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromedia Dreamweaver.
Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, Araneae, Netscape Composer y Dev-PHP, algunos de los cuales tienen la ventaja de ser gratuitos.
2.1. Pantalla Inicial
Al arrancar Dreamweaver aparece una pantalla inicial como la siguiente, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento.
Las barras
La barra de título
La barra de título contiene el nombre del programa (Marcromedia Dreamweaver 8) y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.
La barra de menús
La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver.
Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles.
La barra de herramientas estándar
La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Abrir , Guardar , etc.
La barra de herramientas de documento
La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estándar. Estas operaciones son las de cambio de vista del documento, vista previa, etc.
La barra de estado
La barra de estado nos indica en cada momento en qué etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta
<body>).
También nos es posible alternar entre los modos de selección, mano (para arrastrar la página), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%).
Los paneles e inspectores
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado.
A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes.
El inspector de Propiedades
El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc.
Pulsando sobre el botón se despliega para mostrar más opciones. Este botón se
La barra de herramientas Insertar o panel de objetos
La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú Insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc.
En Dev-PHP la vista inicial tiene un formato similar al siguiente:
2.2. Vistas
En Dreamweaver la ventana de documento muestra el documento actual. Puede elegir entre una de las vistas siguientes:
La vista Diseño es un entorno de diseño para el diseño visual de la página, la edición visual y el desarrollo rápido de aplicaciones. En esta vista, Dreamweaver muestra una representación visual del documento completamente editable, similar a la que aparecería en un navegador.
La vista Código es un entorno de codificación manual para escribir y editar código HTML, JavaScript, código de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de código.
Es posible ver el mismo documento en las dos vistas, Código y Diseño, en una sola ventana de documento.
Cuando la ventana de documento tiene una barra de título, ésta muestra el título de la página y, entre paréntesis, el nombre y la ruta del archivo. Si se han realizado cambios que aún no se han guardado, después del nombre del archivo Dreamweaver incluye un asterisco.
En Dev-PHP podemos alternar entre las vistas Editor: nos muestra el código
Vista Previa Interna: Donde aparecerá la apariencia que va tomando nuestra página.
2.3. Trabajar con textos, enlaces, imágenes, tablas, formularios, marcos y comportamientos.
Objetos de una página
El lenguaje HTML permite incluir una gran variedad de objetos dentro de las páginas, como por ejemplo texto, imágenes, tablas, etc.
Cada objeto puede poseer diferentes atributos, algunos específicos, otros comunes a varios objetos. Ejemplo: la ‘justificación’ en la página (centrado, derecha e izquierda) es común a casi todos los objetos. En el caso del texto, los atributos específicos son el formato, la tipografía y el tamaño (del texto). En una imagen los atributos son las dimensiones. En ambos casos pueden existir enlaces.
Para poder acceder y definir estos diferentes atributos, los editores HTML recurren a
‘Ventanas de Propiedades’ o ‘Inspector de Propiedades’ que presentan los atributos del objeto seleccionado en el momento para que los especifiques. A lo largo de esta unidad iremos introduciendo cada uno de los principales objetos que podes utilizar, empezando por: el texto.
Texto
Al momento de crear y visualizar la página, lo estas haciendo en tu computadora, pero finalmente será visualizada por diferentes usuarios, accediendo a diferentes velocidades de acceso a Internet, al servidor Web que aloje finalmente tu sitio. Las imágenes son recursos que ocupan un importante espacio en disco, espacio que deberá ser transmitido cada vez que un visitante solicite la página. Seguramente has visitado algún sitio con grandes imágenes que no terminan de cargarse nunca, y te has visto obligado a abandonarlo. Por lo tanto, debes tener esto siempre en cuenta al momento de decidir cómo transmitir tu mensaje. Por otra parte, el texto es simplemente un conjunto de caracteres que ocupan mucho menos espacio y agilizan la carga de las páginas en los navegadores de los visitantes. Hay que llegar a un balance entre cantidad de texto y cantidad de imágenes.
Dentro de los atributos del texto tenemos los siguientes:
Formato
Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos, introducir viñetas, numeraciones o bien resaltar cierto texto en negrita, cursiva...
‘con formato’ (Preformatted). Pero luego se dispone de otros elementos de formato de texto, como ser: listas numeradas y de viñetas, entre otros.
El lenguaje HTML toma como base el tamaño del texto del párrafo, que puede ser definido por el usuario en la configuración de preferencias de su navegador. De ahí en más, los otros formatos son ‘relativos’ a ese tamaño.
La característica de ‘relatividad’ del tamaño del texto supone que un título de nivel 1 debe resaltar más que uno de nivel 2, y así sucesivamente. Hay que destacar el carácter de 'suposición' ya que no obliga a que esto suceda en todos los casos. Diseñar una página Web es diferente que diseñar otros documentos, como por ejemplo un documento de texto con Microsoft Word, ya que un documento Word siempre se va a visualizar e imprimir igual en cualquier computadota, en cambio, en el caso de las páginas Web, su visualización e impresión van a depender del navegador utilizado y de su configuración actual.
Encabezados
Los ‘encabezados’ o ‘títulos’ se definen por ‘niveles’ de importancia o jerarquía. El nivel ‘1’
es el más importante y se visualizará con el tamaño más grande, el nivel ‘2’ es el siguiente y así sucesivamente hasta el nivel ‘6’. Las etiquetas HTML son <H1> y su correspondiente etiqueta de cierre </H1> para el nivel 1, <H2> y </H2> y así sucesivamente.
En Dreamweaver podes asignar estos formatos desde el menú ‘Texto >Formato de Párrafo’ o desde el ‘inspector de propiedades’.
Párrafos
Hemos visto que para definir los párrafos nos servimos de la etiqueta <p> que introduce un salto y deja una línea en blanco antes de continuar con el resto del documento. Si se modifica el ancho de la pantalla del navegador, el texto dentro del párrafo se reacomoda. Los navegadores de Internet (Mozilla Firefox, IE) van presentando los distintos elementos (Texto, imágenes, etc.) de izquierda a derecha, cuando se topa con el margen derecho de la ventana, los acomodan en una nueva línea, y así sucesivamente. Por lo que si queremos expresar
explícitamente el comienzo de una nueva línea con determinado texto, debemos insertarlo en un nuevo párrafo.
En Dreamweaver, desde la vista diseño, cuando empezás a escribir, lo haces en un párrafo determinado hasta que pulses la tecla ENTER, que lo que hace es insertar un nuevo párrafo en el documento.
Podemos también, desde la vista código, usar la etiqueta <br>, de la cual ‘no existe’ su cierre correspondiente (</br>), que define una ‘nueva línea’ o ‘salto de línea’, con lo que no dejas una línea en blanco sino que solo cambiamos de línea dentro del mismo párrafo ‘siempre’
y no solo cuando el navegador lo determina.
Por definición, si se escriben en código HTML más de un espacio, estos se ignoran y se coloca sólo uno. Lo mismo sucede con los múltiples 'retornos de carro' (Pulsaciones de la tecla Enter). Para ingresar más espacios hay que utilizar un mecanismo especial que se verá cuando veamos ‘Caracteres Especiales’.
Ojo!!!, no confundas ‘escribir código HTML’ con ‘editar páginas Web’. Lo primero es escribir directamente el código, lo segundo es utilizar un aplicativo como el Dev-Php o Dreamweaver para diseñar la página, pero sin escribir una sola línea de código HTML.
Preformateado
A veces es preferible que el texto aparezca en la ventana del navegador tal y como se ha escrito. Ya comentamos que los navegadores acomodan los párrafos para que entren en la ventana e ignoran tanto los ‘espacios en blanco’ como también los ‘retornos de carro’ (Enter) sobrantes. Pero HTML permite utilizar un formato especial llamado ‘Preformateado’ que obliga al navegador a mostrar el texto tal cual lo encuentra en el archivo fuente de la página, o sea, el archivo .html.
Para aplicarlo se debe encerrar el texto deseado entre las etiquetas <PRE> y </PRE>. O en Dreamweaver seleccionando el texto y aplicarle el formato ‘Texto con Formato Predeterminado’
desde el menú Texto>Formato de Párrafo.
Ejemplos con y sin formato. Se mostrarán fragmentos de código HTML y su correspondiente visualización en el navegador. Primero con un párrafo común y luego con uno preformateado.
Como podes observar, por definición de HTML, los espacios en blanco y retornos de carro adicionales en los párrafos normales son ignorados. Si deseas agregar retornos de carro, deberías insertar ‘saltos de línea’ (<BR>) y si querés insertar espacios adicionales entre palabras, un caracter especial de espaciado ( ), que se verá a continuación, para lograr lo mismo.
Tipografía o fuente Tipo
Al texto incluido en una página, al igual que los documentos Word, se le puede asignar una tipografía (Font).
Los documentos Web no incorporan las tipografías utilizadas en la creación de los mismos (como el caso de los documentos creados con Adobe Acrobat). Lo que el diseñador hace es
‘sugerir’ una tipografía, y el navegador intentará usarla. Si no la encuentra, usará la definida por defecto en su configuración (Ej.: En Internet Explorer: Times New Roman).
En algunos editores HTML (Dreamweaver) es posible seleccionar una lista de posibles fuentes, separadas por comas. En este caso el navegador comprobará que dispone del primer tipo enumerado y si no es así, pasará al segundo y así sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto.
Además de esta primera situación (si el usuario tiene o no la tipografía) nos encontramos con el hecho de que existen diferentes (o al menos, diferentes nombres de) tipografías para los diferentes ‘Sistemas Operativos’. Ejemplo: Arial (PC Compatible), Helvetica (Macintosh), sans-serif (que es la denominación genérica de este tipo de letra).
Hay que prestar atención a que podemos utilizar tipografías muy atractivas que tengamos en nuestra computadora, pero con posibilidades remotas de existir en la computadora del usuario final al cual esta destinado realmente el diseño de la página. No hay que olvidar que este es un caso más de ‘sugerencia’ de diseño, el que realmente va a decidir cómo se visualizará finalmente la página va a ser el navegador de elección del usuario.
FrontPage toma la lista de fuentes instaladas en el sistema operativo (Windows), por lo tanto va a variar de PC a PC según los programas y paquetes de fuentes instalados. ‘Mucho cuidado’ con esto. Como decíamos con anterioridad, podes obtener textos con fuentes muy lindas y atractivas, pero el objetivo de las páginas Web es que puedan ser visualizadas por la
‘mayor cantidad posible de visitantes’. Y cuando pasa que la fuente no esta instalada en el sistema operativo (Windows, Mac OS, Linux, etc.) del visitante, la experiencia final del mismo puede resultar muy alejada de lo que vos hayas planeado.
Fuentes aconsejables: Arial, Times New Roman, Verdana, Courier New.
Volviendo a FrontPage Express. Para asignar una tipografía, simplemente debes primero seleccionar el texto y luego la tipografía desde la lista de fuentes disponibles.
Las etiquetas HTML para definición de tipografías son <FONT> y su correspondiente cierre
</FONT>, encerrando entre ellas el texto a aplicársele.
En este caso, la etiqueta posee atributos, como es el ‘tipo’ de fuente. Estos atributos se ingresan dentro de la etiqueta de inicio y se le asigna su valor entre comillas. Ejemplo de fuente Arial:
<FONT face="Arial">Texto a aplicar una tipografía</FONT>
En Dreamweaver desde el inspector de propiedades del texto podremos seleccionar fuente:
Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, Sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvetica.
Otros atributos son el tamaño por ejemplo, que veremos a continuación.
Tamaño
Los tamaños tipográficos son ‘relativos’ al tamaño definido para el formato de los párrafos.
Este tamaño es definido como '3'. No confundir con los tamaños ‘absolutos’ en píxeles, por ejemplo de Word, que utiliza tamaños como:
12 o 14 ‘píxeles’.
Si se selecciona un número mayor, por ejemplo 5 o 6, el texto resultará en un tamaño
tamaño relativo al que se está utilizando: aplicar '+2' en un texto titular nivel 3 resultará en un tamaño diferente que si se aplica en un párrafo.
En FrontPage Express podes hacer uso de los botones para agrandar y achicar la fuente que están a la derecha de la lista de fuentes:
El tamaño final, o sea el que visualice el navegante, puede variar. Por ejemplo, en Internet Explorer podes ir al menú ‘Ver > Tamaño de Fuente > Mayor’ y así agrandar el tamaño definido por la persona que desarrolló el sitio. Si es que este no utilizó ‘Cascading Styles Sheets (CSS)’ que sí utiliza ‘tamaños absolutos’, pero su estudio cae fuera de esta unidad.
Este atributo se representa dentro de la etiqueta <FONT> con la palabra ‘size’. Siguiendo el ejemplo anterior:
<FONT face="Arial" size=”4”>Texto a aplicar una tipografía</FONT>
No confundir los tamaños de fuente relativos (HTML) con los absolutos (Microsoft Word).
Dreamweaver: Tamaño:
Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, centímetros, etc...
Color
El color del texto puede ser definido mediante el atributo color de la fuente. El color que se puede seleccionar es un color plano, o sea, el mismo color para todo el texto a aplicársele.
Cada color es definido por un número que esta compuesto de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión o RGB (Red, Green and Blue), desde 0 (contribución nula) hasta 255 (máxima contribución).
Ejemplo: Sólo rojo = 255, 0, 0 (decimal) o #FF0000 (Hexadecimal).
No te preocupes por estos números, la mayoría de los editores facilitan una paleta de colores de la cual podes seleccionar el color que desees con un solo clic. Por ejemplo, podes utilizar la ‘Paleta de Colores’ de Dreamweaver y seleccionar el color deseado, al igual que en un procesador de textos.
Anteriormente el atributo ‘Color’, se representaba dentro de la etiqueta <FONT> con la palabra ‘color’ que recibe un valor hexadecimal, esto no significa que no se pueda realizar solo que no se recomienda. Siguiendo el ejemplo anterior:
<FONT face="Arial" size=”4” color=”#FF0000” >Texto a aplicar una tipografía</FONT>
El resultado sería:
Texto a aplicar una tipografía
O en Dev-PHP desde el menú Herramientas podes seleccionar insertar color y aparecerá la paleta de colores.
Estilos Especiales
HTML permite aplicar estilos especiales al texto. Estos estilos, al igual que la asignación de una tipografía, se pueden aplicar a cualquier selección de texto.
No es necesaria aplicarla a ‘todo’ el párrafo, como en el caso de los encabezados.
Se puede ver a continuación los estilos permitidos, en este caso con FrontPage Express (Menú: ‘Formato > Fuente’, pestaña ‘Estilos Especiales’).
Primero deberías seleccionar el texto al cual querés aplicarle el etilo.
Se puede ver una variedad de estilos y a su derecha la correspondiente etiqueta HTML a utilizar para encerrar el texto al cual se de desea aplicar el estilo en particular.
Los más utilizados son:
Negritas y cursiva: estos estilos ya los debes conocer de algún procesador de texto.
Ejemplo: En negrita. En Cursiva
Posición vertical: Este es el caso cuando deseas utilizar super o subíndice.
Ejemplos. Superíndice: x + x2. Subíndice: x0 +x1
Otros: los otros son simplemente distintos estilos semánticos para diferenciar ciertas partes del texto que estamos escribiendo, como por ejemplo segmentos de código, ejemplos, definiciones.
También se pueden utilizar otros efectos que se encuentran en la pestaña ‘Fuente’ del menú: ‘Formato > Fuente’. Estos son: Subrayado, tachado y máquina (simula la máquina de escribir).
Justificación
Al igual que en los editores de texto, en HTML se pueden justificar los párrafos a izquierda, centro y derecha. Para ello simplemente hay que situar el cursor en el párrafo deseado y seleccionar algunas de las justificaciones posibles.
Ejemplo de editor Dreamweaver
La justificación es representada por el atributo ALIGN, es una de las propiedades que se le puede asignar a muchos objetos que se utilizan dentro de las páginas Web. Como ser:
imágenes, tablas, líneas horizontales, etc. Y se aplica de la misma manera. Primero seleccionar el objeto a aplicarle la justificación y luego hacer clic en el icono correspondiente (izquierda, centro o derecha).
Existen atributos que son comunes a muchos objetos HTML. La justificación es uno de ellos.
Caracteres Especiales
Una página Web se ha de ver en países distintos, que usan conjuntos de caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres ‘raros’ (al menos para algunos países) se van a ver bien en todas las computadoras del mundo, independientemente de su juego de caracteres utilizado para visualizarlo.
Este conjunto son los ‘caracteres especiales’. Cuando queremos poner uno de estos caracteres en una página, debemos sustituirlo por su código HTML.
A este trabajo lo hace, en casi todos los casos, el editor HTML.
Por ejemplo, la ‘á’ (a minúscula acentuada) se escribe "á" de modo que la palabra
‘página’ se escribiría en código HTML de este modo: página
Seguramente que si escribís tu HTML y no sustituís los acentos por su correspondiente código, los vas a poder ver bien, ya que tu navegador está configurado para poder visualizar estos caracteres especiales sin ser necesario el código. Pero si alguien en otro país, digamos Francia, desea visualizarlo, va a tener problemas.
Como dijimos, estos caracteres especiales se representan en HTML mediante un código que resultará en un nombre o un número, denominado entidad. HTML incluye nombres de entidad para caracteres como el símbolo de copyright ©, el signo & y el símbolo de marca comercial registrada (®). Así también existen símbolos para representar monedas, como ser: £ (Libra),
¥ (Yen) y € (Euro).
Desgraciadamente, muchos navegadores (especialmente, los productos más desfasados y de marcas distintas que Mozilla Firefox e Internet Explorer) no muestran correctamente muchas de estos símbolos.
En Dreamweaver se puede ingresar caracteres especiales desde el menú: ‘Insertar >
HTML> Caracteres especiales’.
Ejemplos de códigos de caracteres especiales:
Marca registrada: TM (™)
CopyRight: ® (©)
El texto en HTML debe ser interpretado por navegadores de distintos lenguajes (ingles, francés, etc.). Las ‘particularidades’ de cada uno se representan con caracteres especiales (è, é, ë).
Listas
Según lo que quieras transmitir, podes asociar cierto formato al texto.
Cuando es necesario listar, y hasta aún enumerar, cierta información con texto, disponemos de las ‘Listas’ de HTML. Estas son exactamente iguales a las utilizadas en la mayoría de los 'Procesadores de Texto' (numeración y viñetas).
Las listas son utilizadas para citar, numerar y definir objetos.
Los diferentes tipos de listas son:
desordenadas, con un símbolo de viñeta a tu elección;
ordenadas, con un esquema propio de numeración;
lista de definición, listado de términos junto a su definición.
Dreamweaver podes hacer uso de estas listas desde la ‘Texto>listas’ o desde el inspector de propiedades:
Desordenadas
Si lo que deseas es simplemente hacer un listado en el que no importe el orden, podes hacer uso de las ‘listas desordenadas’ o conocidas como ‘listas de viñetas’. También podes definir el tipo de viñeta empleada para cada elemento (círculo relleno, círculo hueco o cuadrado).
En FrontPage Express haciendo un clic derecho sobre la lista, una vez creada, podes seleccionar la opción ‘Propiedades de Lista’ y elegir la viñeta que te guste. Desde esa misma ventana de propiedades de lista podes cambiar el tipo de lista a ordenada y seleccionar el formato de orden.
Ejemplo:
Países:
Argentina
Brasil
Uruguay
En HTML las listas son delimitadas por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos de la lista es citado por medio de una etiqueta <li> (sin cierre, aunque no hay inconveniente en colocarlo).
Por lo que el ejemplo anterior quedaría así:
<p>Paises:</p>
<ul>
<li>Argentina</li>
<li>Brasil </li>
<li>Uruguay</li>
</ul>
Ordenadas
A diferencia de las listas desordenadas, estas listas en vez de mostrar una viñeta pueden presentar información que indique un orden. Este puede ser por números ascendentes decimales o romanos (con letras mayúsculas o minúsculas), también se pueden presentar los elementos listados con letras ordenadas alfabéticamente (mayúsculas o minúsculas).
Figura 8 - Propiedades de Lista Ordenada
Ya se ha mostrado cómo se puede aplicar una lista en FrontPage Express.
Primero seleccionando el texto y luego, o bien seleccionando ‘lista numerada’ desde la ‘lista de estilos’ o haciendo clic sobre el icono de lista ordenada.
Ejemplo de lista ordenada con números romanos comenzando por el número I:
La etiqueta HTML cambia a <ol> por ‘ordered list’ (lista ordenada). Y se pueden observar los atributos ‘Type’ y ‘Start’. El primero para definir el tipo de ordenamiento (números decimales, romanos, letras, etc.) y el segundo para determinar por que número comenzar.
De definición
Esta lista simplemente es utilizada para presentar elementos junto con su definición. Es comúnmente aplicada para representar glosarios.
La etiqueta principal es <dl> y </dl> (definition list). La etiquetas del elemento y su definición son <dt> (definition term) y <dd> (definition definition) respectivamente.
Ejemplo de lista de definiciones:
Otras
También existen otros tipos de listas que no se usan a menudo pero que podes explorar:
Lista de Directorio
Lista de Menú Anidamientos
Nada nos impide utilizar todas estos tipos de listas de forma anidada. De esta forma, podemos conseguir listas mixtas como por ejemplo: listas ordenadas dentro de listas de viñetas. Ejemplo:
Marquesina
Existe un objeto HTML que permite agregarle dinamismo visual al texto permitiendo un desplazamiento horizontal del mismo. Este objeto es la ‘Marquesina’.
En FrontPage Express, para insertar una ‘Marquesina’ en la página Web, debes hacerclic en el lugar que desees incluirla y luego ir al menú: ‘Insertar > Marquesina’. El programa te presentará la ventana de propiedades de la marquesina.
Las principales propiedades son:
Texto: el texto que querés mostrar en movimiento.
Dirección: la dirección horizontal de movimiento.
La mejor manera de entender este objeto es ir probando los distintos valores de sus atributos (movimiento alternativo: rebota, etc.). No es bueno abusar de este recurso ya que a los visitantes los pone ‘nerviosos’ ver muchas cosas en movimiento que los distraigan de su lectura.
Ejemplo en HTML de una marquesina que rebota de izquierda a derecha:
<p><marquee behavior="alternate" width="100%" dir="ltr">Hola mundo!
</marquee></p>
No se puede mostrar el resultado de la visualización de esta marquesina en papel por ser este estático)
Propiedades de la Página Web
Las páginas Web pueden construirse con variedad de atributos que le pueden dar un aspecto muy personalizado. Los títulos de página, las imágenes y colores de fondo, y los colores del texto y de los enlaces son propiedades que les podes definir a tus páginas Web. El título de página identifica y da nombre al documento (no al archivo). Una imagen o un color de fondo definen la apariencia global del documento. Los colores del texto y los vínculos ayudan a los usuarios a distinguir entre el texto normal y los enlaces (Hyperlink), así como a reconocer qué enlaces han visitado y cuáles no.
Título
El título de una página Web ayuda a los visitantes del sitio a realizar un seguimiento de lo que ven mientras navegan, al tiempo que identifica la página en listas de historial y de favoritos de los navegadores que utilicen para visualizarla. Si no asignas un título a una página, ésta aparecerá en la ventana del navegador y en las listas de favoritos y de historial como ‘Untitled Document’ (documento sin título, u otra descripción similar). Asignar un nombre de archivo al documento (al guardarlo) no equivale a asignar un título a la página.
También importante si deseas que tu página aparezca en la lista de resultados de algún buscador como Yahoo o Google. Sería muy feo que alguien busque información que tu sitio pueda brindar y le aparezca como resultado ‘Sin Título’.
Ejemplos:
Título en Ventana del Navegador
Al agregar la página a ‘Favoritos’
En la lista ‘Historial’ de páginas visitadas.
Las páginas son almacenadas finalmente en archivos con un determinado nombre y extensión .htm o .html. Además poseen un título.
Imágenes y Color de Fondo
A una página también se le puede especificar tanto un color como una imagen de fondo. El color que se puede seleccionar es un color plano, o sea, el mismo color para toda la página.
Esta propiedad funciona exactamente igual que la atributo ‘color’ del texto. Debes seleccionar el color desde la ‘paleta de colores’ que te presente el editor de tu elección y luego este se encarga de traducir ese color a un número hexadecimal que se le asociará al atributo ‘color’ de
También se puede asignar de una imagen como fondo de la página. La imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo de la página. Más adelante, cuando lleguemos al tema ‘Imágenes’, veremos como se insertan imágenes y los tipos de imágenes que se pueden utilizar.
Cuando evalúes si utilizar un color o una imagen de fondo, tené en cuenta que muy pocos de los 100 sitios más visitados tienen imágenes. Los pocos que las utilizan presentan imágenes muy discretas, y ágiles para cargar, que no dificulten la lectura de su contenido. La mayoría de estas imágenes simulan ‘texturas’ (Ej.: papeles, telas, etc.). Lo que hay que priorizar es la
‘facilidad de lectura’, por eso que el fondo blanco es siempre el ganador.
No confundir título con nombre de archivo
En Dreamweaver podes acceder a las propiedades de la página para asignarle un título y un color o imagen de fondo haciendo un clic con el botón derecho de tu mouse sobre la página y seleccionando la opción ‘Propiedades de página. . .’ o mediante el menú: ‘Modificar >
Propiedades de página’.
El programa te presentará la siguiente pantalla:
Dentro de la categoría ‘Título/Codificación’, por ahora solo asignaremos un ‘título’ a la página. Pero como podes ir viendo en las distintas categorías, existen varias propiedades que podes utilizar para hacer tu página un poco más particular.
Para los colores e imágenes de fondo debes hacer clic en la categoría ‘Aspecto’.
En esta categoría podes configurarle a tu página una imagen de fondo haciendo clic en la cajita ‘Imagen de fondo’ y luego en el botón ‘Examinar’ para ir hasta la carpeta en donde esta almacenado el archivo de la imagen.
Es ‘muy aconsejable’ guardar la página antes que nada, ya que en esta se van a ingresar referencias a otros archivos (imágenes, enlaces, etc.) y es necesario que el editor HTML sepa dónde estará almacenada.
Continuando con las propiedades de fondo, podes también definir el color del fondo de la página desde la ‘Color de fondo’.
Color de texto
También podes definir el color que va a tomar ‘todo’ el texto que incluyas en la página de una sola vez y no cada vez que ingreses texto. Este color lo podes seleccionar, de la misma forma que el color de fondo, desde la ‘Color de texto’.
Otras
Podes también definir los colores de los enlaces (vínculo) según su estado:
Vínculo visitado: el visitante ya ha hecho clic (navegado) sobre el enlace alguna vez.
Color de vínculo: el visitante aún no ha hecho clic en el enlace.
Existen otras propiedades que se irán viendo más adelante en esta o en la próxima unidad.
Agregando Imágenes
Los sitios Web conformados por páginas con solamente texto altamente estructurados han
introducción en nuestro texto de imágenes puede ayudarnos a explicar más fácilmente el mensaje a transmitir y darle un aire mucho más estético. No obstante, el abuso puede conducirnos a una sobrecarga que se traduce en una distracción para el navegante, quien tendrá más dificultad en encontrar la información necesaria, y un mayor tiempo de carga de la página, lo que puede resultar en un efecto nefasto si nuestro visitante no tiene una buena conexión a Internet o si es un poco impaciente.
Según dice el dicho, en el área de diseño gráfico: ‘Una imagen vale más que mil palabras’.
Esto no debe tomarse al pie de la letra, se le podría agregar un comentario para aplicarlo al área de desarrollo de sitios Web:
‘También pesa mil veces más que el texto de las palabras.’, entendiendo por ‘pesa’ al tamaño en ‘bytes’ del archivo de la imagen que debe transmitirse al navegador de Internet para que el visitante pueda visualizarla.
Las imágenes se utilizan para mostrar: fotos, logos, botones, elementos de navegación (flechas, etc.) y un montón de otras cosas. También existe el caso de utilizar imágenes con cierto texto que debe ir si o si con cierta tipografía (imagen institucional). Recordá el potencial problema de utilizar fuentes muy raras que difícilmente estén instaladas en las computadoras de tus visitantes. En este caso, dicho texto sería una imagen.
Aquí nos enfocaremos en utilizar las imágenes en las páginas Web. La creación, captura, tratamiento, optimización, etc. de imágenes tanto como el trabajo artístico y las herramientas para hacerlo quedan fuera del alcance de esta unidad.
Tipos de imágenes (GIF, JPG y PNG)
En las páginas Web suelen utilizarse tres formatos de archivos gráficos:
GIF, JPEG y PNG. Actualmente, la mayoría de los navegadores sólo reconocen sin problemas los formatos de archivo GIF y JPEG. Microsoft Internet Explorer (4.0 y posterior) y Mozilla FireFox Navigator (4.04 y posterior) admiten parcialmente la visualización de imágenes PNG. A menos que los destinatarios del sitio utilicen navegadores que admitan el formato PNG, deberías utilizar imágenes GIF o JPEG para conseguir una mayor compatibilidad.
Los archivos ‘GIF’ (Formato de Intercambio Gráfico) utilizan un máximo de 256 colores. El formato GIF es el mejor para mostrar imágenes de tonos no continuos o imágenes con grandes áreas de colores planos, como barras de navegación, botones, iconos, logotipos y otras imágenes con colores y tonos uniformes. Puede crear GIF con ‘fondos transparentes’, GIF
‘entrelazados’ que se enfoquen lentamente a medida que se cargue una imagen en el navegador y GIF ‘animados’, que son varios GIF guardados en un solo archivo y se muestran en secuencia para brindar la ilusión de movimiento.
El formato de archivo ‘JPEG’ o ‘JPG’ (Grupo Conjunto de Expertos Fotográficos) es el mejor para imágenes fotográficas o de tonos continuos, ya que puede contener millones de colores.
Los archivos JPEG suelen ser más grandes (mayor tamaño en bytes) que los archivos GIF y PNG. Cuando aumenta la calidad de un archivo JPEG, también aumenta su tamaño y el tiempo que tarda en visualizarlo el visitante. A menudo es posible conseguir un equilibrio adecuado entre la calidad de la imagen y el tamaño de archivo comprimiendo el archivo JPEG.
El formato de archivo ‘PNG’ (Grupo de Redes Portátiles) es un sustituto del formato GIF sin patente que incluye soporte para imágenes con color indexado, escala de grises y color verdadero, además de soporte de canal alfa para transparencias. PNG es el formato de archivo
nativo de Macromedia Fireworks. Los archivos PNG conservan toda la información original de capas, vectores, colores y efectos (por ejemplo, de sombra), así como todos los elementos que se pueden editar plenamente.
Imágenes y la página
Las imágenes son almacenadas en forma de archivos, principalmente GIF (para dibujos) o JPG (para fotos). A estos archivos los podes crear vos con algún programa para gráficos o también los podes bajar de Internet.
Al insertar una imagen en una página Web mediante un editor HTML, éste genera automáticamente una ‘referencia’ al archivo gráfico en el código HTML de la página. La imagen en sí no es ingresada en el documento HTML, como en el caso del texto y otros objetos.
Cuando navegas una página que contiene imágenes, el navegador se encarga de presentarte todo como una unidad: ‘una página Web’. Pero en realidad esa página esta compuesta por diversos archivos: uno con el código HTML que define la estructura, referencias a imágenes y el contenido de texto de la página (entre otras cosas) y un archivo por cada imagen diferente que te presenta el navegador.
Si querés hacer la prueba, el navegador Microsoft Internet Explorer (desde la versión 4 en adelante) te permite almacenar páginas completas en tu disco duro. Ingresa en algún sitio que tenga imágenes (Ej.: www.yahoo.com.ar que tiene varias imágenes para el correo, noticias, etc.), anda al menú: ‘Archivo > Guardar como ...’ y te va a aparecer un cuadro de diálogo que te pregunta dónde guardar los archivos. Indícale donde quieras guardarlos, es mejor en una carpeta creada para esto (Ej.: C:\Mis documentos\Mis paginas\yahoo), y hace clic en el botón
‘Guardar’. El navegador va a comenzar a guardar diversos archivos. Cuando termine, fijate con el ‘Explorador de Windows’ la carpeta en donde indicaste que se almacene la página. Vas a encontrar otra carpeta, creada automáticamente por Internet Explorer, con el nombre de la página y le agrega la palabra ‘Archivos’ (siguiendo el ejemplo: ‘Yahoo! Argentina_archivos’) en donde vas a poder ver los distintos archivos de imágenes referenciados desde la página principal (puede que también encuentres otros archivos utilizados en la página que no sean imágenes).
Volviendo a la ‘referencia’ a la imagen desde la página, para asegurarse de que sea correcta, el archivo de imagen deberá estar almacenado en el sitio local, o sea, bajo la ‘carpeta raíz’ del sitio o en alguna subcarpeta de esta (Ej.: c:\missitios\miprimersitio\imagenes).
También existe la posibilidad de incluir imágenes que ya estén en la Web, en este caso vas a tener que utilizar como referencia su dirección URL (Ej.:
www.algunservidor.com/imagenes/logo.gif).
Una gran ventaja del GIF es su capacidad para definir un color como transparente.
Todas las imágenes son rectangulares, si deseas un contorno no rectangular, deberías utilizar GIF con el fondo que queda fuera del contorno como ‘transparente’.
Una imagen en sí, no es ingresada en el documento .html, sino que en él se incorpora una referencia al archivo gráfico.
Insertar imágenes
Te presentará un cuadro de diálogo en donde podrás insertar la referencia a la imagen desde un archivo o desde una ubicación en la Web (URL). En caso de que tengas la imagen en un archivo, que es la mayoría de las veces, simplemente hace clic en el ‘Buscar en’ y selecciónala desde el pequeño explorador de archivos que te presenta. El programa te va a mostrar directamente los archivos contenidos en la carpeta en donde fue almacenada la página a la que le estas insertando la imagen. Ojo, siempre guarda el documento antes de insertarle alguna imagen, ya que se toma como referencia la ubicación en donde fue almacenada. Una vez que encuentres el archivo de la imagen, hace clic en ‘Abrir’ y te aparecerá inmediatamente en la página.
La etiqueta que HTML utiliza para insertar una imagen es <img> (image).
Esta etiqueta no posee su cierre correspondiente y en ella se debe especificar
‘obligatoriamente’ el paradero de nuestro archivo grafico mediante el atributo ‘src’ (source o fuente).
La sintaxis queda entonces de la siguiente forma:
<img src="camino hacia el archivo">
Ya se verá con más detalle, cuando se vea el tema ‘Enlaces’, como expresar el ‘camino hacia el archivo’.
Si mi página esta almacenada por ejemplo en la carpeta ‘C:\missitios\primersitio’ y además creo otra carpeta llamada ‘imagenes’ bajo esta (para lograr una mayor organización). Luego inserto una imagen cuyo nombre de archivo es ‘logo1.gif’, la etiqueta resultante será:
<img src="imagenes/logo1.gif">
Aparte de este atributo, indispensable obviamente para la visualización de la imagen, la etiqueta <img> nos propone otra serie de atributos de mayor o menor utilidad que se verán a continuación.
Modificar tamaño
Al insertar una imagen, los editores HTML ingresan también un par de atributos asociados a la misma, su ancho y alto ‘original’ en píxeles. Si querés, podes modificar estos valores
‘originales’ mediante los atributos: ‘width’ (ancho) y ‘height’ (alto). También se pueden especificar los valores ‘relativos’ en porcentaje (de 0 a 100 %) que implica, en este caso, el porcentaje de la pantalla que debería cubrir (si insertas la imagen en una celda de una tabla, significará cuánto espacio de la celda debe cubrir, no de la página).
En FrontPage Express, al igual que en la mayoría de los editores HTML, simplemente podes seleccionar la imagen y el programa te mostrará un cuadradito negro en cada esquina de ella.
Utilizando el mouse, haciendo clic (sin soltar el botón) en cualquiera de ellos y podes mover el puntero del Mouse hasta lograr el tamaño deseado de la imagen. Si querés especificarle tamaños relativos, podes hacer un clic derecho sobre la imagen y seleccionar ‘Propiedades de imagen’, se te presentará un cuadro de diálogo con todas las propiedades de la imagen (de aquí en adelante la llamaremos ‘ventana de propiedades’), selecciona la pestaña ‘Apariencia’ y encontrarás el área ‘Tamaño’ en donde podes probar lo anteriormente presentado.
En general, no es aconsejable utilizar otros tamaños que no sean los originales. Si cambias el tamaño, trata de hacerlo en ‘proporción’ con el original.
En el caso de que agrandes la imagen, perderá calidad porque se ‘estirará’ la imagen original hasta alcanzar el tamaño especificado deformándose. Y en el caso de que la ‘achiques’, esto solo va a reducir el espacio que cubrirá en la página Web cuando se navegue, pero
‘SIEMPRE’ la imagen se transmite al navegador como archivo, especifiques el tamaño que especifiques, este archivo va a ‘pesar’ tantos bytes y esto no va a cambiar. Debe quedar claro que los atributos ‘alto’ y ‘ancho’ solo modifican la apariencia de la imagen en la página, no a la imagen en si. Por lo tanto, si tenés una imagen grande y querés mostrarla pequeña, es mejor que achiques el ‘original’ de la imagen con un programa de tratamiento de gráficos (Ej.: Corel PhotoPaint, PaintShop Pro, Adobe PhotoShop, etc.).
Te preguntaras: ¿Cuál es el problema de utilizar una gran imagen y mostrarla chiquita? La respuesta es: el navegante va a tener que esperar que se descargue el gran archivo de la imagen a su navegador antes de poder verla. ‘A tamaño de archivo más grande, más tarda en descargarse’.
No es obligatorio ingresar los atributos de tamaño. El hecho de explicitar en el código las dimensiones de tus imágenes ayuda al programa navegador a confeccionar la página de la forma que deseas antes incluso de que las imágenes hayan sido descargadas.
Así, si las dimensiones de las imágenes han sido proporcionadas, durante el proceso de carga, el navegador reservara el espacio correspondiente a cada imagen creando una
‘maqueta de página’ correcta. El usuario podrá comenzar a leer tranquilamente el texto sin que este se mueva de un lado a otro cada vez que una imagen se cargue.
Bordes
Con el atributo ‘border’ se define el tamaño en píxel del cuadro que rodea la imagen. De esta forma podes recuadrar tu imagen si lo deseas con el grosor que especifiques.
Ejemplo de imagen con borde de 2 píxeles:
Es particularmente útil cuando deseamos eliminar el borde que aparece cuando se le asigna a la imagen un enlace (ya llegaremos a esto). En dicho caso tendremos que especificar border="0" para eliminar esta característica antiestético (esta es una opinión personal, si deseas un borde es mejor hacerlo directamente en la imagen).
FrontPage Express: ventana de propiedades > Apariencia > Diseño > ‘Grosor del Borde’.
Texto alternativo
Podes asignarle a tu imagen una breve descripción mediante el atributo ‘alt’ (texto alternativo). No es indispensable pero presenta varias utilidades.
Primero, durante el proceso de carga de la página, cuando la imagen no ha sido todavía cargada, el navegador podrá al menos mostrar esta descripción, con lo que el navegante se puede hacer una idea de lo que va en ese lugar, hasta que haya finalizado de descargar la imagen y pueda mostrarla.
Esto no es tan trivial si tenemos en cuenta que algunos usuarios navegan por la red con una
En general podemos considerar como ‘aconsejable’ el uso de este atributo, salvo para imágenes de poca importancia, y absolutamente ‘indispensable’ si la imagen en cuestión sirve de enlace a otra página.
FrontPage Express: ventana de propiedades > General > ‘Representaciones alternativas’ >
‘Texto’.
Espaciado alrededor
Existen los atributos pare agregar espacio libre, en píxeles, arriba y abajo de la imagen:
‘Vspace’ y a la derecha e izquierda de la misma: ‘Hspace’. Este espacio la separará de otros elementos que la rodeen, como texto, otras imágenes, etc.
FrontPage Express: ventana de propiedades > apariencias > ‘Espacio Vertical’ y ‘Espacio Horizontal’.
LowSource
Con este atributo podemos indicar un archivo de la imagen de ‘baja resolución’, o sea, la misma imagen pero almacenada en otro archivo con menor calidad que ‘pese’
considerablemente menos en bytes. Cuando el navegador detecta que la imagen tiene este atributo primero descarga y muestra la imagen de baja resolución (que ocupa muy poco y que se descarga más rápido).
Posteriormente descarga y muestra la imagen de resolución adecuada (señalada con el atributo src, que se supone que ocupará más y será más lenta de transferir).
FrontPage Express: ventana de propiedades > General > Representaciones Alternativas >
‘Baja Resolución’.
Alineamiento
Cuando vimos el tema ‘textos’, presentamos el atributo ‘Align’ que nos permitía justificar el texto a derecha, izquierda o centro de nuestra página.
Dijimos que este atributo no era exclusivo del texto sino que podía ser aplicado a otro tipo de objetos (imágenes, tablas, etc.).
El caso es que en las imágenes funciona un poco diferente, no especifica ‘justificación’, sino
‘alineamiento’ con respecto a los objetos que la rodea.
Para ‘justificar’ la imagen, se puede utilizar en FrontPage Express lo botones de justificación:
Esto en realidad justifica el párrafo que contiene a la imagen, no a la imagen en sí (o sea, no el atributo ‘Align’ de la imagen).
Para especificar la ‘alineación’ de la imagen en FrontPage Express: ventana de propiedades de imagen > Apariencia > Diseño > ‘Alineación’, y las posibilidades son:
Sin Especificar (o por defecto, ‘default’): suele ser una alineación con la línea de base. El valor predeterminado puede variar en función del navegador del visitante del sitio.
Inferior (‘bottom’) y Línea de base (‘baseline’) : alinean la línea de base del texto (u otro elemento) con la parte inferior (o línea base) de la imagen.
Medio (‘middle’): alinea la línea de base del objeto con el punto medio de la imagen.
Superior (‘top’): alinea una imagen con la parte superior del elemento más alto (imagen o texto) de la línea actual.
Inferior absoluto (‘absbottom’): alinea en relación con la parte inferior absoluta (incluidos los trazos bajos, como en la letra g) del objeto seleccionado.
Medio absoluto (‘absmiddle’): alinea la imagen en relación con el punto medio absoluto de la línea actual.
Texto superior (‘texttop’): alinea la imagen con la parte superior del carácter más alto de la línea de texto.
Izquierda (‘left’): sitúa el objeto seleccionado en el margen izquierdo, ajustando a la derecha el texto que está a su alrededor. Si hay texto alineado a la izquierda delante del objeto, los objetos alineados a la izquierda suelen pasar a una nueva línea.
Derecha (‘right’): sitúa el objeto en el margen derecho, ajustando a la izquierda el texto que está a su alrededor. Si hay texto alineado a la derecha delante del objeto, los objetos alineados a la derecha suelen pasar a una nueva línea.
Las dos últimas opciones de alineación (Left y Right) permiten un párrafo de múltiples líneas, mientras los otros no.
Propiedades de páginas: imagen de fondo
Para agregarle a tus páginas una imagen de fondo, hay ciertas cosas de deberías considerar:
¿Es la imagen de fondo lo suficientemente discreta para no competir con el contenido de la página?
¿No presentará dificultad de lectura teniendo en cuenta el color del texto y de los enlaces?
¿No presentará dificultades de identificación de otras imágenes que quieras incluir?
Y una de las cosas más importantes, ¿cuándo tiempo le va a llevar al navegador cargar dicha imagen de fondo? ¿Es simplemente muy grande?
Si querés que cubra toda la página, ¿tendrá problemas en distintas resoluciones de distintos visitantes?
Cuando se asigna a una página una imagen de fondo, si esta no ocupa la totalidad de la ventana del navegador, forma un mosaico (se repite) para completarla, a no ser que se le especifique que sea ‘fija’. Por lo tanto no es necesario, según la intención, utilizar imágenes enormes para darle un fondo especial. Existen las imágenes que simulan ‘texturas’ que son realmente pequeñas, pero con la característica que al repetirse en el navegador, forma un efecto de continuidad simulando un fondo homogéneo. Veamos el ejemplo a continuación.
Es bueno especificar un color de fondo (parecido a la imagen). Esto te asegura que, hasta que el navegador descargue la imagen de fondo, el navegante podrá ver el texto sobre dicho color. Es importante si se han utilizado una imagen oscura y texto claro. La mayoría de los
Si estas trabajando en una página cuyo contenido es más grande que el que puede mostrar la ventana del navegador, deberás utilizar las barras de desplazamiento vertical (u horizontal), comúnmente llamadas ‘Scroll’. Al utilizarlas, tanto el contenido de la página como la imagen de fondo se desplazarán, a no ser que especifiques dicha imagen como ‘fija’ (Fixed). En este caso, solo el contenido se desplazará y el fondo quedará fijo. En FrontPage se llama ‘Marca de Agua’
(característica que solo funciona en Microsoft Internet Explorer)
Enlaces
No podríamos hablar de navegante si no disponemos del concepto de ‘navegación’ en la Web. Si estos archivos HTML no estuviesen debidamente ‘entrelazados’ o ‘conectados’ entre ellos y con el exterior de nuestro sitio por medio de enlaces de hipertexto (o hiperenlaces), la Web en sí no tendría razón de existir.
El atractivo más importante de la Web radica en la posibilidad que se le traslada a los navegantes de poder recorrer los contenidos puestos a su disposición en la secuencia que ellos decidan. Y esto se logra introduciendo referencias bajo la forma de enlaces que permitan un acceso a la información deseada de una manera fácil y rápida.
El objetivo de los ‘hiperenlaces’ (o ‘enlaces’ de aquí en adelante) es establecer conexiones desde sus documentos hasta otros documentos o tipos de archivo. Brindan la posibilidad de
‘navegación’ en la Web.
Se pueden crear enlaces hacia documentos, imágenes, archivos multimedia, correos electrónicos o software transferible.
Un enlace puede ser fácilmente detectado en una página. Basta con deslizar el puntero del ratón sobre las imágenes o el texto y ver como cambia de su forma original transformándose, en la mayoría de los casos, en una mano con un dedo apuntador. Adicionalmente, estos enlaces suelen ir, en el caso de los textos, coloreados y subrayados para que el visitante no tenga dificultad en reconocerlos. Si no cambiamos las propiedades generales de la página, estos enlaces de texto estarán subrayados y en color azul.
En el caso de las imágenes que sirvan de enlace, veremos que están delimitadas por un marco azul por defecto (que podíamos eliminar mediante el atributo de borde)
Estructura de navegación
Es realizar una planificación previa a la construcción de las páginas, que tengas en cuenta:
‘Árbol del sitio’ y ‘Esquema de Página’. Una vez que definas el árbol de tu sitio, estarás en condiciones de llevarlo a cabo agregando los enlaces a tus páginas.
Estos pasos previos sirven para que los visitantes no tengan que, y no deberían, navegar por decenas de páginas hasta encontrar lo que desean. Es extremadamente aconsejable diagramar la estructura general de nuestros sitios. Por lo que con una estructura y elementos de navegación asistiremos a realizar el objetivo final del sitio: comunicar de la mejor manera posible nuestro mensaje.
Ubicar al visitante
Uno de los problemas que trae aparejada la gran libertad de navegación que introducen los enlaces es que, la mayoría de las veces, el usuario desconoce dónde esta y cómo ha llegado hasta ahí, incluso dentro de un mismo sitio.
Uno empieza por la página principal, hace clic en un enlace, luego en otro y así sucesivamente va navegando y en un momento determinado, la página que esta visualizando no tiene relación alguna con el interés de su búsqueda.
¿Cómo vuelve a donde estaba? Puede utilizar las flechas de navegación del navegador (atrás y adelante) para volver por donde vino. Pero no es una buena solución dejarles esta responsabilidad tanto al navegador como al visitante.
Muchas veces es necesario presentar información de ubicación explícitamente.
Existen diversas posibilidades de presentar información de ubicación. Es aconsejable poner a disposición del visitante la ruta de categorías (o niveles) en las que se ha ido navegando el usuario desde un comienzo, por ejemplo:
‘Principal > Vehículos > 4 x 4 > Ford Explorer’. Como puedes ver, las categorías (o secciones) anteriores a Ford Explorer están subrayadas, lo que significa que pueden brindar enlaces (saltos) a las mismas. El usuario puede ir fácilmente a otras categorías, distintas de 4x4, haciendo un solo clic sobre el enlace en Vehículos. Esta característica agilizará la navegabilidad de tus páginas.
Hiperenlaces o Hipervínculos (HyperLinks)
Para agregar un enlace, el HTML ofrece la etiqueta <A> y su correspondiente etiqueta de cierre </A>. A la hora de su creación, resulta fundamental conocer el ‘camino o ruta’ entre el documento de origen del enlace, o sea, donde lo estamos agregando, y el documento de destino. A este atributo lo llamaremos ‘destino’ del enlace, y su correspondiente representación en HTML es mediante el atributo de enlace: ‘href’ (por referencia hipertexto).
Por lo tanto, la sintaxis general de un enlace sería:
<A href="destino">elemento con enlace</A>
‘Elemento con enlace’ puede ser generalmente un texto o una imagen, como se verá pronto. Esta será la parte de la página que se presentará como ‘activa’ permitiéndole al visitante hacer un clic sobre ella y así ‘navegar’ hacia la información contenida en el documento referenciado por ‘destino’.
¿Qué forma puede tomar destino? Destino podría ser otra página Web, un correo electrónico, otro sitio o un archivo (imagen, archivo comprimido, archivo de Word, Excel, etc.).
En función del destino, los enlaces pueden ser agrupados de la siguiente manera:
internos: los que se dirigen a otras partes dentro de la misma página Web.
locales: los que se dirigen a otras páginas dentro del mismo sitio Web.
remotos: los dirigidos hacia otros sitios Web o páginas particulares de estos.
con archivos: para ofrecerles la posibilidad a tus visitantes de ‘descargarse’ archivos desde tu sitio.
Internos
Cuando no es posible fragmentar lo suficiente la información (o contenido), como resultado nos quedan páginas Web de un tamaño superior al que puede visualizar un navegador en su ventana, viéndose este obligado a ofrecer al usuario barras de desplazamiento. Es aconsejable evitar estas situaciones, pero hay veces que son inevitables (Ej.: página de documento legal, páginas de detalles, etc.).
Para estos casos dispones de enlaces que pueden apuntar a un lugar específico ‘dentro’ de la ‘misma página’, ofreciendo al visitante la posibilidad de acceder rápidamente al principio o final de la página o bien a diferentes párrafos o secciones de la misma. Esta es la utilidad de los ‘enlaces internos’.
Esta solución en particular hace necesario la presencia de dos elementos: un enlace que apunte a un destino local (enlace interno) y la definición del destino local en sí (ancla o punto de fijación con nombre).
Lo primero que hay que definir son los destinos posibles dentro del documento (Ej.: Tope, abajo, título X, sección Y, etc.) y luego agregar los enlaces que presenten como destinos los anteriormente definidos.
Para ejemplificarte esta característica, imagínate un documento Word con 25 páginas y una tabla de contenidos al comienzo, que haciendo clic en cada uno de los títulos de los contenidos te lleve a la página específica, siempre dentro del mismo documento. Ese es esencialmente el concepto.
Ya se presentó la definición general en HTML de los enlaces, ahora falta la de los destinos locales o anclas.
<A name=”abajo”></A>
La particularidad de estos es que no contienen ningún elemento entre su etiqueta de apertura y su correspondiente etiqueta de cierre. Simplemente definen un destino local. El nombre (name) es necesario para distinguirlo de otros destinos locales que puedan llegar a definirse en la misma página.
Supongamos que tenemos una página con el detalle de un producto, como ser: nombre, descripción, precio, características técnicas, etc. Muy difícilmente todo esto entre en la ventana del navegador sin necesitar las barras de desplazamiento vertical. Por lo que podemos agregar, al comienzo de la página, una serie de enlaces ‘locales’ a cada uno de estos detalles (al estilo de índice). Lo que habría que hacer es crear primero los destinos locales o anclas
‘antes’ de cada uno de los títulos o secciones (nombre, descripción, precio, etc.) y luego los enlaces a cada uno de ellos.
Ahora solo falta saber cómo se conforman los ‘enlaces internos’ (a destinos locales). Estos toman la misma forma general que ya se presentó, y en el campo destino se antecede el destino local precedido por el símbolo ‘#’.
Ejemplo:
<A href=”#caract_tecnicas”>Ir a las características técnicas</A>
Es el símbolo ‘#’ quien especifica al navegador que el enlace apunta a una sección determinada del mismo documento que se esta visualizando.
A modo de conclusión, aunque útiles, estos enlaces no son los más aconsejables. Lo mejor es fragmentar la información en diversas páginas independientes que puedan ser visualizadas preferentemente en una sola ventana del navegador y luego asociarlas mediante enlaces locales. No son atractivas las páginas en las que los visitantes se ven obligados a desplazarse verticalmente una y otra vez. Además, al ser más reducidas las páginas, más ágiles de cargar y no sobrecargamos una sola página con información que quizá el visitante aún no desea.
Una aplicación tradicional de estos enlaces consiste en poner un pequeño índice al principio de tu documento donde introducís enlaces internos a las diferentes secciones. Paralelamente, al final de cada sección podes introducir un enlace que apunta al índice de manera que ofreces una guía al visitante en la búsqueda de la información útil para él.
Los enlaces internos cuentan con dos partes:
destino
ancla o punto de fijación Local
Al presentar el concepto de ‘sitio Web’, te contamos que definía un conjunto de páginas Web entrelazadas, asociadas a un tema u objetivo en común (Información institucional de una empresa, Club de Fans, etc.). Ahora llega el momento de definir el mecanismo de interconexión entre estas páginas.
Los enlaces locales siguen el mismo modelo general que se presentó anteriormente, pero especificando como ‘destino’ a un archivo de una página Web perteneciente al mismo sitio.
<A href="URL o camino al archivo">Texto del enlace</A>
En general, el destino del enlace representado en el campo ‘href’ se puede especificar de dos maneras. Con la ‘URL’ (Universal Resource Locator), que es la dirección en el formato
‘estándar’ de direcciones en la Web, del archivo HTML de la página Web destino (Ej.:
www.nombredelservidor.com.ar/carpeta/archivo.html). O bien, si este destino es ‘local’ (la página pertenece al mismo sitio), se puede abreviar y solamente especificar el camino desde la página en donde se esta definiendo el enlace hacia el archivo HTML destino. Ventaja: si cambia el nombre de dominio (Ej.: de www.nombredelservidor.com.ar a www.zzz.com.ar), no vas a tener que actualizar ‘todos’ los enlaces locales en ‘todas’ las páginas de tu sitio.
En los sitios pequeños este camino va a resultar muy simple. Lo único necesario sería incluir solamente el nombre del archivo destino. En este caso se supone que por el pequeño tamaño del sitio todas las páginas se encuentran almacenadas bajo la misma carpeta, que sería la carpeta raíz.
Cuando los sitios son más grandes, es conveniente ‘organizar’ los archivos (páginas, imágenes, otros) en subcarpetas según criterios como ser: por secciones, imágenes en otra carpeta, distintos personas trabajando sobre el mismo sitio, etc. Y, utilizando esta organización, se puede hacer uso de ‘subsitios’ (Ej.: www.misitio.com/ventas,
Este camino debe seguir las especificaciones de la conformación de las URLs, o sea, cada parte del camino (carpeta, subcarpeta o archivo) separada por una barra inclinada: ‘/’. Ojo, en los sistemas operativos Windows se utiliza la barra invertida: ‘\’, que no es lo mismo. Hay que tener esto siempre en mente.
Para los que no hayan tenido experiencia en armar los caminos (Paths) de archivos, aquí van algunas sugerencias:
1. Sitúate mentalmente en la carpeta en donde se encuentra almacenada la página a la que le estas agregando en enlace (página origen).
2. Si la página destino se encuentra en la misma carpeta, simplemente con el nombre del archivo es suficiente. Si se encuentra en alguna subcarpeta, hay que escribir el camino indicando cada subcarpeta por los que hay que ir ‘bajando’ en la estructura (jerarquía de carpetas) hasta llegar al archivo destino, siempre separándolos con la barra ‘/’. La ruta no comienza con ‘/’.
3. Si la página destino se encuentra almacenada una carpeta ‘superior’ a la carpeta de la página origen, hay que ir ‘subiendo’ por la estructura (jerarquía de carpetas) mediante la especificación de ‘carpeta superior’: ‘../’ Tantas veces como niveles se tenga que subir, hasta dar con la carpeta que contiene a la página destino. Y de ahí, si es necesario bajar por dicha estructura, ha de hacerse de la misma manera que como se indicó en el punto anterior (con la barra ‘/’).
Ejemplo de caminos hacia archivos (extraído de un sitio local administrado por Dreamweaver):
Los siguientes ejemplos presentan distintos enlaces desde la página ‘a.htm’, localizada en la carpeta ‘productos’, hacia diferentes archivos almacenados en diferentes lugares:
Hacia ‘b.htm’ (ambos archivos se encuentran en la misma carpeta ‘productos’), el atributo href será: “b.htm”.
Hacia ‘c.htm’ (en la subcarpeta llamada ofertas), el atributo href será: “ofertas/c.htm”.
(Cada barra diagonal (/) representa un nivel por debajo en la jerarquía de carpetas.)
Para establecer un enlace con ‘pagina_principal.html’ (en la carpeta padre, un nivel por encima de a.htm), el atributo href será: “../pagina_principal.html”.
