Historia y funcionamiento de Internet - EDITORES DE HTML

Los editores existentes en el mercado eran bastante simples y pocos funcionales; y no soportaban muchos tags especiales ni tampoco los frames. Por esta razón para un diseño complejo, era imprescindible recurrir a un editor de textos convencional y abrir los archivos HTML, modificar el código y obtener el resultado esperado. Por lo tanto era necesario conocer el lenguaje HTML, para conseguir un Web mínimamente profesional. Pero ahora existen editores complejos y WYSIWYG, por lo que ya no es imprescindible conocer el lenguaje HTML:

? FrontPage Express, incluido con Microsoft Internet Explorer 4.0.

? FrontPage 98, con las mismas características que el anterior.

? el editor de Netscape (Netscape Composer).



LINKS O ENLACES DE HYPERTEXTO

El link es uno de los elementos más importantes, es posible pasar de un Web a otro, alojados en servidores remotos, separados por miles de kilómetros. En general, los enlaces tienen la siguiente estructura:

<A HREF="xxx"> yyy </A> dónde xxx es el destino del enlace e yyy es el texto indicativo del enlace (con un color especial y

generalmente subrayado).

En el parámetro HREF del tag <A> para crear los enlaces se debe especificar el URL o dirección a la cual apunta el enlace. Estas direcciones pueden ser absolutas o relativas. En el caso de direcciones absolutas especificamos la dirección completa a la que apunta el enlace. Por ejemplo:

<A HREF= http://www.pcplus.es/pruebas/test/mi_página.html>Enlace</a>∞; Si nuestro enlace apunta a una página dentro del mismo servidor, debemos utilizar direcciones relativas, es decir sin hacer referencia a la dirección de Internet (en el ejemplo anterior sería http://www.pcplus.es/∞)

Por ejemplo <A HREF ="../test2/ejemplo.html">Enlace2</a> En el ejemplo anterior, las palabras "Enlace2" son un enlace a la página ejemplo.html situada en el directorio test2, al mismo nivel en el árbol de directorios que la página donde se encuentra el enlace. Para ascender niveles en una estructura de árbol de directorios se utilizan los dos puntos(exactamente igual como se hace en MS-DOS o Unix).



Tipos de enlaces

Podemos distinguir cuatro tipos de enlaces:

1. 1. 1. Enlaces dentro de la misma página
2. 2. 2. Enlaces con otra página nuestra
3. 3. 3. Enlaces con una página fuera de nuestro sistema
4. 4. 4. Enlaces con una dirección de email

1. Enlaces dentro de la misma página

En el caso de documentos (o páginas) muy extensos, nos puede interesar dar un salto desde una posición a otra determinada.

En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este caso el sitio dentro de la página a donde queremos saltar, se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecerán en la pantalla en color (en forma de hipertexto). Su estructura es, entonces:

<A HREF="#marca"> YYY </A>

Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="marca"> </A>

Por ejemplo, si quiero saltar desde aquí a la pantalla final, pongo la siguiente etiqueta:

<A HREF="#final"> Pulsa para ir al final</A>

Que resulta como: Pulsa para ir al final

Y en el final del documento esta otra etiqueta:

<A NAME="final"> </A>



2. Enlaces con otra página nuestra

Puede ser que tengamos una sola página. Pero lo más frecuente es que tengamos varias páginas, una inicial o principal y otras conectadas a ella, e incluso entre ellas mismas.

En este caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del fichero:

<A HREF="pag2.html"> Ejemplo </A>

Si queremos que vaya a un sitio concreto de otra página nuestra en vez de ir al principio de la página, adonde va por defecto, en ese sitio tenemos que colocar una marca, y completar el enlace con la referencia a esa marca.

Una observación importante: Suponemos que la página en la que escribimos esta etiqueta y la otra página a la que quiero saltar están en el mismo directorio. Porque pude ocurrir que e organizamos el sitio del Web con un directorio principal, y otros subdirectorios auxiliares. Si la página a la que quiero saltar está, por ej. en el subdirectorio subdir, entonces en la etiqueta tendría que haber puesto "subdir/pag2.html".

Y a la inversa, si quiemos saltar desde una página a otra que está en un directorio anterior, en la etiqueta tendría que ponerse "../pag2.html". Esos dos puntos hace que se dirija al directorio anterior. Obsérvese que se debe utilizar el símbolo / para indicar los subdirectorios, y no este otro \, que es propio únicamente de Windows.

Si nos queremos evitar todas estas complicaciones, podemos tener todo junto en un único directorio, pero esto tiene el inconveniente de que esté todo más desordenado, y sean más difíciles de hacer las futuras modificaciones.



3. Enlaces con una página fuera de nuestro sistema

Si queremos enlazar con una página que esté fuera de nuestro sistema (es decir, que esté en un servidor distinto al que soporta nuestra página), es necesario conocer su dirección completa, o URL (Uniform Resource Locator). El URL podría ser, además de la dirección de una página del Web, una dirección de ftp, gopher, etc.

Una vez conocida la dirección (o URL), lo colocamos en lugar de lo que hemos llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la página de Netscape (cuyo URL es: http://home.netscape.com/)∞, la etiqueta sería:

<A HREF="http://home.netscape.com/">∞; Página inicial de Netscape </A> Es muy importante copiar estas direcciones correctamente (respetando las mayúsculas y minúsculas, pues los servidores

UNIX sí las distinguen).



4. Enlaces con una dirección de email

En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la dirección de email. La estructura de la etiqueta es:

<A HREF="mailto: dirección de email"> Texto del enlace </A>

Un ejemplo

Comentarios a <A HREF="mailto: info@oninet.es">Soporte Técnico</A>

Ejemplo práctico

<HTML> <HEAD> <TITLE> Mi pagina del Web - 3 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mis paginas favoritas </H1> </CENTER> <HR> Estas son mis paginas favoritas: <P><A HREF="http://home.netscape.com">∞; Netscape </A> <BR> <A HREF="http://www.microsoft.com">∞; Microsoft </A> <BR> <A HREF="http://www.yahoo.com">∞; Yahoo! </A> </BODY> </HTML>



IMÁGENES

Podemos incorporar imágenes, la estructura de la etiqueta es:

<IMG SRC="imagen.gif">

Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga).

Al programa navegador se le indica el nombre y la localización de un fichero que contiene una imagen.

Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT

<IMG SRC="imagen.gif" ALT="descripción"> Con el comando ALT se introduce una descripción (una palabra o una frase breve) indicativa de la imagen. Este comando, que en principio se puede omitir, es en beneficio de los que accedan a nuestra página con un programa navegador en forma de texto solamente. Ya que no son capaces de ver la imagen, por lo menos pueden hacerse una idea sobre ella. Pero no es sólo por esto. Hay casos, en los que se utiliza una imagen como enlace a otra página. Si se omitiera este comando, los que utilizan dichos navegadores no podrían de ninguna manera acceder a esas páginas.

Con respecto a la localización del fichero de esa imagen, si no se indica nada especial, como en el caso que se ha expuesto, quiere decir que el fichero imagen.gif está en el mismo directorio que el documento HTML que estamos escribiendo. Si no es así, se siguen los mismos criterios que los indicados para los enlaces.

Al igual que una página con la que queremos enlazar puede estar fuera de nuestro sistema, (en cuyo caso había que indicar su URL o dirección completa), podemos cargar una imagen que no esté en nuestro sistema siguiendo el mismo método, es decir, indicar en la etiqueta el URL completo de la imagen. Aunque esto no es muy aconsejable, pues alargaría innecesariamente el tiempo de carga de nuestra página.

En lo que se refiere a las direcciones absolutas y relativas se pueden aplicar en el caso de las imágenes. Un buen consejo al diseñar la Web es crear un directorio para las imágenes. De este modo siempre deberemos apuntar bien al directorio de imágenes para que aparezcan las imágenes correctamente en la página Web.

Los formatos más utilizados son del tipo:



Formato GIF

? Apropiado para logotipos y además arte gráfica, para imágenes con colores sólidos y continuos(especialmente para imágenes con bordes definidos, u texto o un dibujo). Este es el único soportado por cualquier navegador existente.

? Además comprime la información de la imagen sin pérdida de información.

? Este formato soporta un máximo de 256 colores.

? Un GIF puede ser transparente; la transparencia permite crear imágenes que comparten el mismo color de fondo de la página, simulando una apariencia no rectangular.



Formato JPEG

? Apropiado para imágenes complejas o para fotografías, ya que es bueno para trabajar con imágenes con múltiples patrones y contrastes.

? JPEG comprime y destruye parte de la información de la imagen.

? Soporta hasta 16,6 millones de colores.

? Un JPEG no puede ser transparente.

Teniendo en cuenta todo esto, no es bueno convertir un GIF a JPEG o viceversa. Se pierde gran parte de la calidad de imagen, además puede ocupar más espacio(en KB) que en el formato anterior.

Estos formatos gráficos cuentan con ciertas variaciones que permiten agilizar la visualización de

sus contenidos hasta hacer simples animaciones. Ellos son:

? Los GIF intercalados que cargan las imágenes acrecentando el nivel de detalle: comienzan por verse borrosas y van tomando formando hasta que se completan; esto sirve para la espera por los gráficos de la página no sea ardua.

? Los JFEG progresivos, funcionan de manera similar a los GIF intercalados: primero muestran una imagen de baja resolución que luego se va completando con una alta resolución; esta clase de formato JPEG es bastante nueva, por lo que no todos los navegadores la soportan.

? Los GIF animados conocidos también como GIF89a; este formato permite crear simples animaciones que dan un impacto especial y atraen la atención de los visitantes. Los GIFs animados están soportados por la gran mayoría de los navegadores, además debemos tener en cuenta que ocupan un mayor número de byte. .

Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes, pues una imagen grande supone un fichero grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente riesgo de que quien esté intentando cargar nuestra página se canse de esperar, y desista de ello. Además las imágenes incrustadas en páginas Web son en partes responsables de los cuellos de botellas existentes en laWWW.

Algo bueno relacionado con el HTML es incluir en el tag <IMG> los parámetros WIDTH y HEIGHT, es decir el alto y el ancho de la imagen. Por defecto, HTML toma las dimensiones reales de la imagen. Pero si incluimos estos valores la página HTML se presentará mucho más rápido en pantalla(el texto) mientras se acaban de transmitir las imágenes.



Posición de las imágenes

Para elegir la posición de la imagen con respecto al texto hay distintas posibilidades. La más sencilla es colocarla entre dos párrafos, con un titular a un lado. Los navegadores más actuales (como el Netscape Navigator y el Microsoft Internet Explorer) permiten que el texto pueda rodear a la imagen.

De momento nos vamos a limitar a escoger la posición del titular con respecto a la imagen (sí es que queremos ponerle un titular, claro está). Se puede poner arriba, en medio o abajo del lado de la imagen. Para ello se añade el comando ALIGN a la etiqueta, de la siguiente manera:

<IMG SRC="isla.gif" ALIGN=TOP> Titular alineado arriba

<Imagen: isla>Titular alineado arriba

<IMG SRC="isla.gif" ALIGN=MIDDLE> Titular alineado en medio

<Imagen: isla>Titular alineado en medio

<IMG SRC="isla.gif" ALIGN=BOTTOM> Titular alineado abajo

<Imagen: isla>Titular alineado abajo



Imágenes utilizadas como enlace

Podemos utilizar una imagen como enlace a otra página. Para estos casos se utilizan

generalmente imágenes pequeñas (iconos), aunque se puede usar cualquier tipo de imagen.

La estructura general de un enlace es:

<A HREF="xxx"> yyy </A>

donde xxx era el destino del enlace e yyy el texto del enlace . En este caso sustituimos xxx por el nombre del fichero de la página a la que queremos acceder. Y en lugar de yyy ponemos la etiqueta completa de la imagen

<A HREF="pag2.html"><IMG SRC="hombre.gif"></A>

También podemos utilizar una imagen para enlazar con otra imagen. En este caso sustituimos xxx (el destino del enlace) con el nombre del fichero de la imagen a la que queremos acceder e yyy

<A HREF="isla.gif"><IMG SRC="casa.gif"></A>

Por último, otra posibilidad es la de utilizar un texto para enlazar con una imagen. En este caso sustituimos xxx (el destino del enlace) con el nombre del fichero de la imagen a la que queremos acceder e yyy (lo que aparece en pantalla como el enlace) por el texto.

<A HREF="isla.gif"> un paraíso tropical </A>

Un tipo de imágenes del que se hace abundante uso y que sirven para mejorar la presentación de la página son los iconos, botones, barras separadoras, etc. A pesar de su tamaño o forma, son imágenes como cualquier otra.

Editores de imágenes

|| Producto || Descripción || Plataforma || Descripción en Internet || Categoría ||
|| Animagic GIF || Animación GIF || Windows 95 || Http://www.rtlsoft. com/animagif || Shareware ||
|| GIF Construction || Animación GIF || Windows || Http://www.mindw || Shareware ||
|| Set || (todas) || orkshop.com ||
|| Graphic || Editor de || Windows || Http://www.mindw || Shareware ||
|| Workshop 1.1 || imágenes || (todas) || orkshop.com ||
|| Paint Shop Pro || Editor de || Windows 95 || Http://www.jasc.c || Shareware ||
|| 4.0 || imágenes || om ||
|| MS Image || Editor de || Windows 95 || http://www.micros∞ || Shareware ||
|| Composer 1.0 || imágenes || oft.com ||

FRAMES O MARCOS

Con los frames se puede dividir una página HTML en varias y navegar dentro de cada frame. Por ejemplo es muy común utilizar un frame para situar en él un menú o iconos de navegación dentro del

Web que permanece siempre en pantalla, mientras que las páginas van apareciendo en el segundo frame.

Podemos dividir las páginas HTML con los frames horizontalmte(líneas) o verticalmente(columnas). También se admiten frames anidados.

LOS FORMULARIOS

HTML permite crear un formulario(con listas de selección, menús desplegables, campos de texto, botones, etc.) para que el usuario pueda introducir cualquier tipo de información y la comunicación sea bidireccional, dejando de ser un mero espectador. La información introducida en el formulario es tratada en el servidor por un programa(CGI) y puede responder con una nueva página presentada en el navegador. La programación CGI es bastante más compleja que el HTML.

Sin embargo, sin necesidad de utilizar programas CGI podemos recibir información de los visitantes de nuestra Web vía correo electrónico. La cabecera de todo formulario en HTML es el tag<FORM>. Uno de sus parámetros es ACTION.

EJ: ACTION=MAIL-TO: email, donde "email" es nuestra dirección de correo electrónico, de esta manera recibiremos el contenido de los campos del formulario directamente en el buzón de correo.