Guía de Hipertexto y HTML
José Ramón Ortiz
Introducción: El Contexto del Hipertexto
Real pero no actual, abstracto pero no ideal
Deleuze
El Espacio Virtual
La palabra virtual según el diccionario puede significar implícito, tácito, supuesto, sobreentendido, incluido, entendido, expreso, contenido, manifiesto, y estos son sólo algunos de sus sinónimos. De la misma forma podemos encontrar el significado de virtualidad como sinónimo de potencialidad, posibilidad, poder, capacidad.
En cuanto a la etimología de la palabra virtual nos remitimos al siguiente fragmento de Philippe Quéau: "La palabra virtual proviene del latín virtus, que significa fuerza, energía, impulso inicial. Las palabras vis, fuerza, y vir, varón, también están relacionadas. Así, la virtus no es una ilusión ni una fantasía, ni siquiera una simple eventualidad, relegada a los limbos de lo posible. Más bien, es real y activa. Fundamentalmente, la virtus actúa. Es a la vez la causa inicial en virtud de la cual el efecto existe y, por ello mismo, aquello por lo cual la causa sigue estando presente virtualmente en el efecto. Lo virtual, pues, no es ni irreal ni potencial: lo virtual está en el orden de lo real." (Queau, 1995: 27)
Como muchas de las creaciones humanas son a imitación de lo humano, son extensiones de las capacidades o facultades humanas, podemos decir que el espacio virtual es una aproximación al espacio mental humano. La virtualidad como expresión general de simulación de la realidad o complemento de ésta, ha estado siempre con nosotros, como lo vemos en el arte, donde por medio de las palabras o las imágenes se pueden transmitir situaciones no reales que nos inducen a los sentimientos más variados, como el amor, la alegría o la tristeza. Mas recientemente el teléfono, la radio, el cine y la televisión han explotado el fenómeno de la virtualidad, y por último, la computación a través del multimedia conjuga todos los medios electrónicos y tecnológicos para aplicar la virtualidad a los procesos más diversos.
La Realidad Virtual es uno de los ambientes que nos ofrece el paradigma telemático, que emerge como una nueva posibilidad de interacción en la comunicación mediada por computadora (CMC), donde los usuarios ya no son simples observadores externos de datos o imágenes en una pantalla de computadora, sino que pasan a ser participantes activos dentro de un mundo virtual de tres dimensiones.
La Realidad Virtual se diferencia de otras formas de presentación y manejo de la información en que las diferentes tecnologías se integran para dar al usuario una sensación de estar inmerso o presente en este mundo aparente que llamamos realidad virtual.
Desde el punto de vista de esta virtualidad informática se pueden destacar dos interpretaciones de realidad virtual de acuerdo a la interacción del usuario con el computador:
1) Las redes telemáticas como Inernet, donde la virtualidad se manifiesta a través del sentido de la vista que interactúa con la pantalla y el sentido del tacto en su interacción con el teclado, también podemos incluir el sentido del oído. Con estas posibilidades podemos participar en juegos colectivos de redes, MUDD, y construir nuevos mundos junto a otros participantes o podemos navegar por el mundo virtual de Internet, donde ya tenemos una variedad de ciudades virtuales. En este caso el mundo virtual es creación de nuestra mente e imaginación.
2) La Realidad Virtual, con mayúscula, donde se utilizan todos los recursos disponibles para apoyar nuestra imaginación y alimentar nuestra percepción a construir una realidad en la que nos sentimos inmersos. Ejemplos de este tipo de virtualidad son los simuladores de vuelo y hoy en día proliferan casas de entretenimiento basadas en juegos de Realidad Virtual.
Una de las aplicaiones de este espacio virtual a la educación lo representa el salón de clases virtual. Cuando hablamos de un salón de clases virtual, generalmente se asume que se trata de reproducir, utilizando la telemática, el salón de clases tradicional, dando como un hecho que el salón de clases tradicional es el modelo ideal del proceso de enseñanza y aprendizaje. Sin embargo este salón de clases puede estar encabezado por un profesor incompetente y varias hileras de pupitres soportando el aburrimiento de los estudiantes. En otras palabras: el medio ambiente en que se desarrolla la clase no influye en la calidad del profesor.
Cuando la educación a distancia se plantea la creación de un salón de clases virtual, el objetivo, no es duplicar el salón de clases tradicional, sino desarrollar los nuevos atributos de la tecnología telemática para mejorar el proceso de enseñanza y aprendizaje.
La Página Electrónica o Página Web (WWW)
Internet representa una de las muestras materiales del nuevo paradigma telemático, y de las posibilidades reales de explotación de un espacio virtual o ciberespacio. La página electrónica se ha convertido en la herramienta fundamental de Internet. En cierta forma aquí se fusiona de una forma creativa la tecnología computacional del hipertexto y el hipermedia, codificados en forma digital a la manera del multimedia del CD-ROM, y la transportación o transmisión de esta información digitalizada entre diferentes sitios.
La herramienta conocida como Wide World Web es el resultado, por un lado, de varios experimentos realizados en 1989 por el Centre de Recherche Nucleaire (CERN), en Ginebra, para probar tecnologías innovativas de redes para conectarse a Internet, lo cual dio un impulso para la estandarización de los protocolos de conexión TCP/IP. Y por otro lado, en ese mismo año, Tim Berenes-Lee propuso un sistema de hipertexto basado en una versión suya anterior llamada "Enquire", la cual desarrollo durante el siguiente año al escribir el primer programa para un servidor y cliente de lo que hoy se conoce como Wide World Web. El sistema se hizo accesible ese mismo año de 1990 y duró hasta 1993, cuando un nuevo standard Hypertext Markup Language (HTML) fue establecido por la International Standards Organization (ISO) y es el que actualmente se utiliza en Internet.
La Web y sus páginas electrónicas es una especie de libro de arena borgiano, un libro de páginas de arena sin principio ni fin, un super hipertexto de dimensiones potencialmente infinitas. Navegar en Internet es recorrer las páginas electrónicas de este libro de arena, escoger un recorrido es escoger una lectura particular de un infinito número de posibilidades.
El espacio virtual que nos ofrece Internet a través de la Web, puede ser utilizado para la construcción de salones de clase virtuales, donde en vez de ser el estudiante el que va al salón de clase, sea el salón de clase el que va al estudiante, materializando el ideal regulativo de la educación a distancia.
La Web es un fenómeno internacional, casi podríamos decir planetario, que genera un sentido de comunidad intelectual, un ciberespacio común en el que confluyen todos los recursos, y lo cual sugiere la emergencia de una organización holística del conocimiento.
El Hipertexto
La historia del hipertexto es mucho mas larga de lo que aparenta su reciente incorporación en el lenguaje de la telemática. Se acredita a un científico de la computación de nombre Vannevar Bush como el pionero en especular a través del medio impreso sobre la noción de hipertexto, aunque él no utilizó el término hipertexto. En un artículo titulado "As we may think", publicado en la revista The Atlantic City, en Julio de 1945, Bush nos dice:
Consideremos un futuro artefacto de uso individual, una especie de archivo privado mecanizado y biblioteca. Necesita un nombre, y para escoger uno al azar, lo llamaremos "memex". Un "memex" es un artefacto en el cual un individuo almacena todos sus libros, archivos, y comunicaciones, y al estar mecanizado permite ser consultado con gran velocidad y flexibilidad.
El término hipertexto fue acuñado por Ted Nelson, quien la utilizó por primera vez en 1965, en Literary Machines, como una forma de escritura no secuencial (non-sequential writing).
Hoy en día podemos materializar la idea originaria de Bush en la combinación de una computadora personal (PC) con un programa sofisticado de hipertexto. Y la forma en que describe el funcionamiento de su memex corresponde a la forma en que un lector se mueve a través del hipertexto o un cibernauta navega en el ciberespacio de Internet: "...se crea una senda de acuerdo a sus intereses a través de la enorme cantidad de información accesible..." Todo hipertexto presenta la posibilidad de innumerables lecturas o recorridos de acuerdo a la voluntad del usuario o lector. Esto define una de las principales características del hipertexto: la posibilidad de elección de la lectura por parte del lector.
En "Hipérttexto: La convergencia de la teoría crítica contemporánea y la tecnología", George P. Landow nos presenta un excelente trabajo sobre la convergencia entre el hipertexto y la noción de textualidad de la teoría crítica, sustentada por Barthes, Foucault y Derrida. En S/ Z, Roland Barthes describe el ideal de textualidad que coincide exactamente con lo que se conoce como hipertexto electrónico, un texto compuesto de bloques de palabras (o de imágenes) electrónicamente unidos en múltiples trayectos, cadenas o recorridos en una textrualidad abierta, eternamente inacabada y descrita con términos como nexo, nodo, red trama y trayecto......Como Barthes, Michel Foucault concibe el texto en forma de redes y nexos. En "Las palabras y las cosas", afirma las fronteras de un libro nunca están claramente definidas, ya que se encuentra atrapado en un sistema de referencias a otros libros, otros textos, otras frases: es un nodo dentro de una red....una red de referencias " (p. 13-14). Por su parte Derrida va más allá y enfatiza "la apertura textual, la intertextualidad y la improcedencia de la distinción entre lo interno y lo externo a un texto dado:. (p.19). La tesis qque nos sugiere el argumento de Landow es que el hipertexto puede ser utilizado para que el lector vislumbre el uso del texto con nuevas significaciones y perspectivas y particularmente como soporte para el pensamiento multimedia.
En general se puede definir el hipertexto, a la luz del paradigma telemático, como la presentación de información en la forma de una red de nodos interconectados, en la cual los lectores pueden navegar libremente de una forma no uni-lineal, es decir pueden elegir entre múltiples lecturas, recorridos o navegaciones.
HTML (HyperText Markup Language) o el Lenguaje de "Marcas de Hipertexto" es el formato de los documentos que viajan por las redes telemáticas de Internet, podemos decir que toda esta red de información constituye una enorme base de datos: la WWW (World Wide Web).
La WWW (World Wide Web) y el HTTP (HyperText Transfer Protocol) o Protocolo de Transferencia de Hipertexto, fueron diseñados para retener los aspectos positivos de una red telemática anárquica y al mismo tiempo proveer a los productores y a los consumidores de información una interface más amigable y eficiente para el conocimiento. Esto se logra por medio de la introdución de un protocolo que controlaba tanto la representación del conocimiento asi como la interface del usuario.
Quizás la mejor definición de hipertexto sigue siendo la primera definición de este término dada por Ted Nelson, como escritura no secuencial (nonsequential writing). La escritura ordinaria es secuencial por dos razones. Primero por el habla el cual es secuencial y segundo porque los libros se leen en forma secuencial. pero la estructura de las ideas no es secuencial.
En general el hipertexto consiste en ofrecer al lector opciones:
¿Qué desearía leer ahora?
¿A dónde desearía ir ahora?
Son las preguntas que el hipertexto repite una y otra vez.
El hipertexto constituye un formato abierto de acceso aleatorio desde el punto de vista del autor. Donde el lector puede comenzar por cualquier punto del hipertexto y seguir diferentes recorridos o lecturas a través de la textura de la información, de acuerdo a sus intereses o entendimiento.
Hipertexto y Literatura
En la historia de la literatura observamos en diferente grado y dimensión difrentes ejemplos de intentos de hipertexto. Un ejemplo fundamental lo constituye la obra Tristram Shandy de Laurence Stern. También me gustaría mencionar El Castillo de los Destinos Cruzados, donde Italo Calvino utiliza las evocativas cartas del Tarot para contarnos 12 historias que se entrecuzan y estructuran el argumento de la novela. cada carta del Tarot es utilizada en más de una historia y trasmiten diferentes significados de acuerdo a la historia a la cual pertenecen.
Cada historia nos lleva a otra historia, y al mismo tiempo que un huesped avanza en su historia, otro, desde el otro extremo, avanza en la dirección opuesta, porque laas historias contadas de izquierda a derecha o de abajo hacia arriba, pueden ser leidas de derecha a izquierda y de arriba hacia abajo, y viceverse, remarcando de esta forma que la misma carta, presentada en un orden diferente, frevuentemente cambia su significado.
Por último mencionaremos a Rayuela la obra magna de Julio Cortazar, donde el gran narrador latinoamericano experimenta con el hipertexto al proponer diferentes órdenamientos de los capítulos, resultando en diferentes lecturas de la obra. Leida en forma lineal, esta novela esta constituida por 155 capítulos, pero que según la carta de navegación que nos ofrece al comienzo de la novela como Tablero de Dirección, Julio Cortazar nos nos sugiere diferentes lecturas:
A su manera este libro es muchos libros, pero sobre todo es dos libros. El primero se deba leer en la forma corriente, y termina en d capitulo 56, al pie del cual hay tres vistosas estrellitas que equivalen a la palabra Fin. Por consiguiente, el lector prescindirá sin remordimientos de lo que sigue.
El segundo se deja leer empezando por el capítulo 73 y siguiendo luego en el orden que se indica al pie de cada capitulo.
La Lectura del Hipertexto
Todo texto requiere un lector y un contexto, Daniel Chandler observa que existen al menos tres clases de teorías acerca de como se produce el significado en la relación entre lector y texto:
1) Objetivistas: El significado se encuentra en el texto (el conocimiento se transmite)
2) Constructivistas: El significado surge de la interacción en el texto y el lector (el conocimiento se negocia),
3) Subjetivistas: El significado depende de la interpretación del lector (el conocimiento es re-creado)
La actividad de navegar o leer hipertextos (browsing) es considerada por Carmel (1992), como una actividad cognitiva. En general, navegar y buscar son actividades semejantes, con la diferencia de que la búsqueda está más orientada hacia objetivos y metas y la navegación es más ad hoc y de libre albedrio.
Según Carmel et al, podemos considerar tres categorías de navegación o lectura de hipertextos:
&emdash; Navegación de sondeo (scan browsing): El lector o usuario busca información interesante sin ningun objetivo predeterminado.
&emdash; Navegación de revisión (review browsing): Aquí el lector o usuario busca información con el objetivo de revisar e integrar un tópico particular.
&emdash; Navegación de búsqueda (search-oriented browsing): Este tipo de navegación o lectura requiere de un plan u objetivo para encontrar la información relevante a un tópico en particular.
En la navegación encontramos dos puntos de importancia, desde el punto de vista del lector o usuario:
1) el interés relativo atribuido al tópico en cuestión y
2) el nivel de familiaridad del usuario con el tópico.
Y para finalizar este contexto del hipertexto solo nos queda echarnos al agua virtual del ciberespacio y navegar.
Referencias
Quéau, Philippe. (1995). Lo virtual: Virtudes y vértigos. Barcelona: Paidós.
Carmel, Crawford y Chen (1992). Browsing in Hypertext: a Cognitive Study. IEEE Transactions on Systems, Man and Cybernetics, Vol. 22, Number 5. pags. 865-884.
Landow, George P. (1993). Hipérttexto: La convergencia de la teoría crítica contemporánea y la tecnología. Barcelona: Paidós.
Guía de HTML
Aceca de esta Guía
Esta Guía pretende dar las nociones básicas de cómo escribir HTML y cómo diseñar una Página Web o Página Electrónica.
Objetivos de la Guía
1) Identificar y utilizar diferentes formatos de HTML
2) Crear y modificar documentos HTML utilizando un procesador de palabras io un editor de textos.
3) Escribir diferentes tipos de información como gráficos, imágnes, tablas, etc. y crear enlaces de hipertexto con otros documenos de la Internet.
Esta Guía lo ayudara a:
1) Entender el uso básico de la etiquetas HTML
2) Diseñar una Página Web en la Internet.
3) Utilizar Hiperenlaces en los documentos HTML.
¿Qué es HTML?
HTML, HyperText Markup Language, Lenguaje de Marcas de Hipertexto es el formato que le dice a un navegador (web browser) como estructurar o desplegar la página. Los documentos en si son archivos de texto (ASCII) con etiquetas "tags" o códigos especiales que le permiten al navegador una interpretación universal de como desplegar la página en la pantalla.
Conocimientos Previos
Esta Guía supone un mínimo de conocimiento en el manejo de navegadores como Netscape y Explorer, cierto manejo de los menus y botones de enlace. También se requiere de un procesador de palabras tan sencillo como NotePad para Windows o . SimpleText para el Macintosh or NotePad, Lo importante es utilizar un procesador de palabras sencillo mientras usted aprende HTML, después podrá utilizar editores especializados de HTML. Si utiliza procesadores de palabras como Word o Word Perfect se deberán guardar los archivos como formato de texto ASCII.
Para cada Lección debe abrirse un Archivo de HTML para el Ejercicio correspondiente.
Todo el trabajo realizado por el usuario de esta Guía debe ser diseñado para correr en cualquier computador de escritorio, es decir no depende del acceso al servidor de la Web o de la capacidad de programación especializada del computador.
Lección 1: Página Básica
El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Funcionan de la siguiente manera:
<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.
Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Por claridad, utilizaremos en esta Guía sólamente las mayúsculas
Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML>:
<HTML> [Todo el documento] </HTML>
El documento en sí está dividido en dos zonas principales:
Encabezamiento: El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>
Cuerpo: El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>
En el encabezamiento se incluye información del documento que no se ve en la pantalla principal, aquí va generalmente el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido, pues será lo que se verá cuando se añada la página a un Bookmark, Libro de Marcas o Agenda de Direcciones.
Dentro del cuerpo se incluye todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.)
Algunas Etiquetas Fundamentales
Antes de crear nuestra primera Página Web, debemos hacer algunas consideraciones sobre el texto:
<P> (Párrafos)
Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que éste se acomoda a ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto en párrafos debemos usar la etiqueta <P>, (la cual carece de etiqueta de cierre </P>)
<HN> y </HN>, donde N= 1,2...,6 (Títulos)
El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1. Puedes experimentar en el ejemplo que sigue, cambiando el número para comprobar el efecto que se logra.
<CENTER> y </CENTER> (Centrar)
Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER> (no la soportan todos los
navegadores, aunque sí la mayoría de ellos). Nos centra todo lo que esté dentro de ella, ya sea
texto, imágenes, etc.
<HR> (Línea horizontal)
Este es un Separador Horizontal (horizontal rules), que se crea con la etiqueta <HR> (no existe la correspondiente de cierre). Con ella obtenemos una raya horizontal del ancho de la pantalla, y con la apariencia de estar embutida sobre el fondo, como se puede observar a continuación:
Ejemplo 1
En el procesador de palabras copiamos lo siguiente:
<HTML>
<HEAD>
<TITLE> Guía HTML 1</TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Ejemplo 1 HTML</CENTER> </H1>
<HR>
Esta es una Pagina Web para la práctica del lenguaje HTML
<P> Aqui va un segundo parrafo.
</BODY>
</HTML>
(Recuerde cómo cargar el documento en el navegador)
Las separaciones en el texto del Ejemplo 1 se han puesto para mayor claridad, pero no son necesarias. Podríamos haberlo colocado todo en una sola línea. Lo importante es el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. Véase en el ejemplo cómo lo está la etiqueta <CENTER> dentro de la etiqueta <H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se producirían errores.
Obsérvese además la falta de los acentos. Se hablará más adelante sobre el motivo de ello.
Guardamos el archivo en el procesador de palabras con el nombre de Ejem1.html y lo cargamos en el navegador. Este será el resultado:
Ejercicio 1
Repita el ejemplo anterior utilizando su Nombre para la creación de su Página Personal
Habrá un archivo distinto para cada ejercicio; conviene crear una carpeta específica e irlos guardando en ella, para poder repasar lo aprendido, aparte de que pueden ser necesarios para ejecutar otros ejercicios prácticos.
Lección 2. Formato del texto
Como hemos visto en el ejemplo de la Lección anterior, cuando queremos poner un texto sin ninguna caracterísca especial, lo ponemos directamente. Unicamente, la separación entre párrafos (dejando una línea en blanco) la conseguimos con la etiqueta <P>.
<BR>
Si queremos separar los párrafos, o cualquier otra cosa, pero sin dejar una línea en blanco, usamos una etiqueta parecida <BR> (break, o romper). Tampoco tiene etiqueta de cierre.
Si queremos obtener múltiples líneas en blanco no basta con repetir la etiqueta <P>, sino que hay que combinarla con la etiqueta <BR>. Así por ejemplo, si queremos obtener cuatro líneas en blanco, pondríamos:
<BR><P>
<BR><P>
<BR><P>
<BR><P>
Con lo que se obtiene:
Al escribir el texto, si ponemos más de un espacio en blanco entre dos palabras observamos que el navegador sólo reconoce uno de ellos. Si queremos forzarle a que lo haga, debemos poner el código " " (non-breaking space).
Para destacar alguna parte del texto se pueden usar:
<B> y </B> para poner algo en negrita (bold).
<I> y </I> para poner algo en cursiva (italic).
<PRE> y </PRE> (Preformateado)
Otra etiqueta interesante es <PRE> y </PRE>. El texto que se encuentre entre ella estará preformateado, es decir que aparecerá como si hubiera sido escrito con una máquina de escribir, con una fuente de espaciado fijo (tipo Courier). respetando los espacios en blanco y retornos del carro, tal como estaban en nuestro documento HTML (lo cual no ocurre normalmente, como hemos visto anteriormente). Es muy apropiada para confeccionar tablas y otros documentos similares.
<TT> y </TT> (Mecanografiado)
Con la etiqueta <TT> y </TT> conseguimos también que el texto tenga un tamaño menor y la apariencia de los caracteres de una máquina de escribir (typewriter). La diferencia con laanterior es que no preformatea el texto, sino que únicamente cambia su apariencia.
<BLOCKQUOTE> y </BLOCKQUOTE> (citas)
La etiqueta <BLOCKQUOTE> y </BLOCKQUOTE> se utiliza para destacar una cita textual dentro del texto general. Este párrafo está escrito entre ambas etiquetas.
Obsérvese los márgenes a ambos lados.
Listas
A menudo nos interesará presentar las cosas en forma de listas o enumeraciones. Se pueden crear tres tipos distintos de listas:
1.Listas no numeradas.
2.Listas numeradas.
3.Listas de definición.
<UL> y </UL> (Listas no numeradas)
Las listas no numeradas sirven para presentar un conjunto de cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Su estructura es la siguiente:
<UL>
<LI> Un nombre
<LI> Otro nombre
<LI> Otro nombre mas
<LI> Etc.
</UL>
Es decir, toda la lista está dentro de la etiqueta <UL> y </UL>, y luego cada cosa va precedida dela etiqueta <LI> (list item). El resultado de lo anterior es el siguiente:
Un nombre
Otro nombre
Otro nombre más
Etc.
Se puede anidar una lista dentro de otra. Por ejemplo:
<UL>
<LI>MODULO 1
<LI>MODULO 2
<UL>
<LI>UNIDAD 1
<LI>UNIDAD 2
</UL>
<LI>MODULO 3
</UL>
Que daría el siguiente resultado:
MODULO 1
MODULO 2
UNIDAD 1
UNIDAD 2
MODULO 3
<OL> y </OL> (Listas numeradas)
Las listas numeradas sirven para presentar un conjunto de cosas ordenadas. Su estructura es parecida a la anterior. La diferencia está en que en este tipo de listas aparecerá un número precedente correlativo en el orden correspondiente para cada cosa.
<OL>
<LI> Primer nombre
<LI> Segundo nombre
<LI> Tercer nombre
<LI> Etc.
</OL>
El resultado es:
1. Primer nombre
2. Segundo nombre
3. Tercer nombre
4. Etc.
Al igual que las listas desordenadas, también se pueden anidar las listas ordenadas.
<DT> y <DD> (Lista de definiciones)
El tercer tipo de listas lo forman las listas de definición. Como su nombre indica, son apropiadas para diccionarios, glosarios o definiciones de términos. Aquí cada renglón está formado por dos partes:
1) el nombre de lo que se quiere definir, que se consigue con la etiqueta <DT> (Definition Term), término de la definición.
2) la definición propiamente, que se consigue con la etiqueta <DD> (Definition Definition), deficición de la deficic
<DL>
<DT> Lo que se quiere definir
<DD> La definición propiamente
<DT> Otra cosa que se quiere definir
<DD> La definición de esta otra cosa
</DL>
Su resultado es:
Lo que se quiere definir
La definición propiamente
Otra cosa que se quiere definir
La definición de esta otra cosa
Ejemplo 2
En el procesador de palabras copiamos:
<HTML>
<HEAD>
<TITLE> Guía HTML 2 </TITLE>
</HEAD>
<BODY>
<CENTER><H1> Ejemplo 2 HTML </H1></CENTER>
<HR>
Sin un orden particular, la <B> Guia de HTML </B> contiene entre sus secciones las siguientes :
<UL>
<LI> Introducción
<LI> Página Básica
<UL>
<LI>Caracteres especiales
<LI> Hiperenlaces con otras páginas
</UL>
<LI> Tipos de hiperenlaces
</UL>
Los caracteres epeciales son <I> (en orden de presentación): </I>
<OL>
<LI> Hiperenlaces dentro de la misma página
<LI> Hiperenlaces con otra página nuestra
<LI> Hiperenlaces con una página fuera de nuestro sistema
<LI> Hiperenlaces con una dirección de email
</OL>
</BODY>
</HTML>
Guardamos el archivo de texto con el nombre Ejem2.html y lo cargamos en el navegador.
Ejercicio2
Repita el ejemplo 2 para su Página Personal utilizando partes de su Curriculum Vitae. Guarde el archivo de texto con el nombre Ejer2.html y cárguelo en el navegador.
Lección 3. Hiperenlaces con otras páginas
Una de las características más importantes de la Web ha sido, aparte la de su carácter multimedia, la interactividad, la posibilidad de unir los distintos documentos de Internet por medio de enlaces hipertexto o hiperenlaces.
Los hiperenlaces tienen la siguiente estructura general:
<A HREF="xxx"> yyy </A>
donde xxx es el destino del enlace (entre comillas). yyy es el texto que aparece en la pantalla del hiperenlace (con un color especial y generalmente subrayado)
Tipos de hiperenlaces
Existen cuatro tipos de hiperenlaces:
1.Hiperenlaces dentro de la misma página
2.Hiperenlaces con otra página nuestra
3.Hiperenlaces con una página fuera de nuestro sistema
4.Hiperenlaces con una dirección de email
1. Hipernlaces dentro de la misma página
Este tipo de enlace nos mueve dentro de la misma Página. Cuando los documentos (o páginas) son muy extensos, puede ser importante dar un salto desde una posición a otra determinada.
Sea XXX, el destino del enlace, 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>
Ejemplo 3.1
Por ejemplo, si quiero saltar desde aquí a la pantalla final, pongo la siguiente etiqueta:
<A HREF="#final"> Ir al final</A>
Que resulta como: Ir al final (Puedes comprobar cómo salta a la pantalla final)
Y en el final del documento se escribe esta otra etiqueta:
<A NAME="final"> </A>
2. Hiperenlaces 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.
Supongamos que queremos enlazar con la página creada en el ejemplo del capítulo anterior, que la hemos llamado Ejem2.html. En este caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del archivo:
Ejemplo3.2
<A HREF="Ejem2.html"> Ejemplo 2 </A>
Que resulta como: Ejemplo de la Lección 2 (Puedes comprobar cómo carga esa página)
Para ir a un sitio concreto de otra Página nuestra, ya que por defecto siempre va a ir al principio de la Página, entonces tenemos que colocar en ese sitio una marca, como lo hicimos en la sección anterior, y completar el hiperenlace con la referencia a esa marca.
Ejemplo 3.3
Queremos poner un hiperenlace desde aquí a la Lección 4, pero a un sitio concreto, el ejemplo 4, donde escribimos la marca:
<A NAME="alinear"></A>.
Entonces la etiqueta tiene que ser:
<A HREF="Ejem4.html#alinear"> Ejemplo 4 </A>
Que resulta: Ejemplo 4
(Obsérvese cómo al pulsar el enlace salta al capítulo 4, pero no al comienzo, sino al ejemplo 4)
Una observación importante: Suponemos que la página en la que estoy escribiendo esta etiqueta y la otra página a la que quiero saltar están en el mismo directorio. Porque pudiera ocurrir que he organizado mi sitio del Web con un directorio principal, y otros subdirectorios auxiliares. Si la página a la que quiero saltar está, p. ej. en el subdirectorio subdir, entonces en la etiqueta tendría que haber puesto "subdir/Ejem2.html".
Y a la inversa, si quiero saltar desde una página a otra que está en un directorio anterior, en la etiqueta tendría que haber puesto "../Ejem2.html". Esos dos puntos hace que se dirija al directorio anterior.
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. Por ejemplo mi Página Personal Telepolis tiene los siguientes archivos
Lo cual puede parecer bastante desordenado.
3. Hiperenlaces con una página fuera de nuestro sistema (servidor)
Si queremos hacer un hiperenlace con una página que está fuera de nuestro sistema (es decir, que está en un servidor distinto al que soporta nuestra página), especificar 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 especificada la dirección (o URL), lo escribimos en vez de lo que hemos llamado anteriormente xxx (el destino del enlace).
Ejemplo 3.4
Si queremos hacer un hiperenlace con la página de Telepolis (cuyo URL es: http://www.geocities.com/Athens/4081/), la etiqueta sería:
<A HREF="http://www.geocities.com/Athens/4081/"> Página inicial de Telepolis </A>
Que daría como resultado: Página inicial de Telepolis
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 e-mail o correo electrónico
En este caso, sustituimos xxx (el destino del hiperenlace) 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>
Ejemplo 3.5
Un ejemplo de esto está al final de la página principal de este manual. Podría haber puesto:
Comentarios a <A HREF="mailto: jrortiz@reacciun.ve">José Ramón Ortiz</A>
Que resultaría:
Comentarios a José Ramón Ortiz
Pero hay algunos navegadores que no reconocen este tipo de hiperenlace, y lo verían de esta manera:
Comentarios a José Ramón Ortiz
y no tendrían ningún medio de conocer la dirección de email. Por lo tanto, es más seguro poner algo así como:
Comentarios a José Ramón Ortiz en <A HREF="mailto: jrortiz@reacciun.ve"> jrortiz@reacciun.ve </A> Que resulta:
Comentarios a José Ramón Ortiz en jrortiz@reacciun.ve
Es decir, es conveniente, por la razón dicha anteriormente, poner también en el texto del enlace la dirección de e-mail.
Ejemplo 3.6
En el procesador de palabras copiamos:
<HTML>
<HEAD>
<TITLE> Guía HTML 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>
Ejercicio 3
Guarde la serie de ejemplos de la Lección 3 como un sólo archivo de texto Ejer3.html, y cárguelo en el navegador. .
Lección 4. Caracteres especiales
Existen algunas limitaciones para escribir el texto. Una de ellas es debido a que las etiquetas se forman como un comando escrito entre los símbolos "<" y ">". Por tanto, si se quisieran escribir estos caracteres como parte normal del texto, daría esto lugar a una ambigüedad, ya que el programa navegador podría interpretarlos como el comienzo o final de una etiqueta, en vez de uncarácter más del texto.
Para resolver este problema, existen unos códigos para poder escribir estos caracteres y otros relacionados con las etiquetas.
< para < (less than, menor que)
> para > (greater than, mayor que)
& para & (ampersand)
" para " (double quotation)
Como se ve, estos códigos empiezan siempre con el signo & y acaban siempre con ;
De una manera similar, existen códigos para escribir letras específicas de distintos idiomas. Hay muchos de ellos, pero, lógicamente, los que más nos interesan son los propios del castellano (las vocales acentuadas, la ñ y los signos ¿ y ¡ )
Los códigos de las vocales acentuadas se forman comenzando con &, seguido de la vocal en cuestión, seguido de la palabra acute (aguda) y terminando con el signo ;
á para la á
é para la é
í para la í
ó para la ó
ú para la ú
Á para la Á
É para la É
Í para la Í
Ó para la Ó
Ú para la Ú
El resto de los códigos son:
ñ para la ñ
Ñ para la Ñ
ü para la ü
Ü para la Ü
¿ para ¿
¡ para ¡
Todo esto, que como se ve es muy laborioso, puede parecer inútil ya que si escribimos nuestro texto sin hacer ningún caso de estas convenciones, escribiendo las letras acentuadas y demás signos directamente, es muy posible que el resultado lo veamos correctamente en nuestro navegador, pero nunca podremos estar seguros que les ocurra lo mismo a todos los que accedan a nuestras páginas con otros navegadores distintos.
En la práctica, el problema no es tan grave, pues los programas editores de HTML suelen tener la posibilidad de escribir los códigos automáticamente (como es el caso si utilizamos HotDog Pro o Claris )
Incluso si se escribe en un procesador de palabras de forma manual, se puede escribir el texto en una primera etapa de forma normal y luego aplicarle algún de los programas que hacen la conversión adecuada.
Ejemplo 4
Como ejemplo de esta Lección vamos a sustituir en el ejemplo práctico del capítulo anterior (Ejem3.html) las vocales acentuadas por sus correspondientes códigos.
Quedará de esta manera:
<HTML>
<HEAD>
<TITLE> Mi página del Web - 4 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Mi página del Web </H1>
</CENTER>
<HR>
Esta es mi página del Web. No es muy brillante, pero tiene todos los
elementos básicos. Espero que te guste. Poco a poco le iré
añadiendo más cosas interesantes.
<P> <A HREF="mipag2.html"> <IMG SRC="hombre.gif"> </A> Mis aficiones
<P> <A HREF="mipag3.html"> <IMG SRC="casa.gif"> </A> Mis páginas
favoritas
<CENTER>
<H3> Un lugar ideal para mis vacaciones </H3>
<IMG SRC="isla.gif" ALT="isla">
</CENTER>
</BODY>
</HTML>
Guardamos el archivo de texto con el nombre Ejem4.html y lo cargamos en el navegador.
Aquí culminamos esta guía introductoria al HTML pero si queremos más información consultar:
URL: http:// members.tripod.com/~Joserra/index-4.html