Documento 41210
Anuncio
Un hypertexto es básicamente, un documento que contiene texto, imágenes, sonido, animaciones, etc., junto con enlaces (links) a otros documentos. −−Qué es Hypermedia ?−− Los hypertextos se organizan en InterNet en un sistema conocido como WWW (World Wide Web), que provee de un medio rápido de consulta y búsqueda de la información. −−Qué es WWW ?−− Para acceder a WWW, basta con un computador, una conección a InterNet, y algún programa que sirva para conectarse a los distintos servidores WWW, como NetScape, NCSA−Mosaic, MS Internet Explorer, Lynx, etc. −−Como localizar informacion ?−− El acceso se realiza utilizando un protocolo llamado HTTP y un lenuaje llamado HTML. −−Como funciona el WWW ?−− Siga estas instrucciones atentamente; ellas le permitirán crear un documento HTML en su computador; este archivo no será visible para otros usuarios de Internet. Le recomiendo que cree un directorio en su computador para almacenar las páginas web que vaya haciendo al aprender; y que practique un tiempo antes de poner páginas en Internet. Para publicarlo en Internet, contáctese con su ISP (la empresa que le da la conexión a Internet, en caso de que se conecte por teléfono) o con su administrador de sistemas en casos de usuarios UNIX. Otra alternativa de publicación puedeser dirigirse a XOOM o Geocities. Creando su página Web • Abra Notepad (en Windows), SimpleText (en Mac), o Joe (en Unix) • Digite lo siguiente: <HTML> <TITLE>Esto es una prueba</TITLE> <P>Si esto aparece esta bien.</> <!−− Si esto aparece esta mal −−> </HTML> • Grabe este archivo con el nombre: prueba.htm • Abra su browser favorito; este puede reclamar por la falta de una conexión a Internet; ignore estos avisos. No necesita conectarse a Internet para ver las páginas en su computador. Puede trabajar Off−line • Elija "Open File" en la barra de menú • Seleccione el archivo prueba.htm que acaba de crear; debería aparecer algo así: Si esto aparece, esta bien Usted ha creado su primer documento HTML! Problemas que pueden haber ocurrido Si aparece la línea "si esto aparece, esta mal", es probable que su computador si permita extensiones de cuatro letras, y usted haya usado solamente tres, o que su browser no esté configurado correctamente. 1 Si aparece 'Unable to access document' 'Not found in this server', etc. Revise los permisos del directorio y del archivo que usted creo. Este documento asume que usted sabe como publicar en WWW. Lenguaje HTML El lenguaje HTML es el usuado actualmente para escribir textos hypermediales en el Web. El siguiente texto, está diseñado como una primera aproximación al lenguaje HTML. [ver descripción de los comandos HTML] Tres normas fundamentales 1. HTML es simplemente texto Lo primero es saber que un documento HTML es un archivo de texto simple, luego, se puede editar con cualquier editor de texto. 2. No importan los tabs, ni los saltos de línea Los intérpretes HTML no toman en cuenta las tabulaciones, los saltos de línea ni los espacios en blanco extra. Esto tiene ventajas y desventajas. La principal ventaja es que permite obtener resultados uniformes y de buena presentación de manera bastante fácil. La principal desventaja es que un documento HTML, por lo menos se debe usar los comandos <P>...</P> o <BR> para evitar que quede todo el texto en una sola línea. 3. Existen tres caracteres especiales • < Menor que, se usa para indicar el comienzo de un comando HTML. • > Mayor que, se usa para indicar el término de un comando HTML. • & Ampersand, se usa para escribir caracteres especiales (símbolos matemáticos, comerciales, así como el signo menor que y el mayor que entre otros) en un documento. Comandos básicos de HTML Lo primero es conocer los comandos que debe contener todo documento HTML de más de una línea de largo. El comando párrafo El comando <P> ... </P> se usa como un delimitador de párrafo en HTML. Inserta automáticamente un quiebre de línea al final del párrafo, y produce un espaciamiento conveniente entre los diferentes párrafos de un documento. Adicionalmente permite alinear el texto al centro, a la izquierda o a la derecha. [.'; return true;"descripción completa] El comando quiebre de línea El comando <BR> permite hacer un quiebre (salto) de línea. Adicionalmente se permite realizar saltos más largos o más cortos, dejar atrás las imágenes, etcétera. [.'; return true;"descripción completa] 2 Los comandos de encabezamiento Los textos en HTML poseen seis niveles de encabezados. El nivel de encabezado 1 se usa para las divisiones mayores del texto; es, por lo tanto, el que hace que el texto sea más grande. El nivel de encabezado 6 se usa para las divisiones más chicas del texto; luego, es el que muestra el texto más pequeño. Todos los comandos de encabezado se escriben de a pares, e insertan un quiebre de línea al final del texto que delimitan. <H1>Nivel de encabezado 1</H1> <H2>Nivel de encabezado 2</H2> <H3>Nivel de encabezado 3</H3> <H4>Nivel de encabezado 4</H4> <H5>Nivel de encabezado 5</H5> <H6>Nivel de encabezado 6</H6> Apariencia del texto Hay varios comandos para hacer distinta la manera en que aparece el texto. Se trata de delimitadores, que indican donde comienza y donde termina el texto que se verá diferente. Estos comandos se pueden mezclar entre sí. Algunos de ellos son: <B>Negrita (Bold)</B> <I>Cursiva (Italic)</I> <BLINK>Parpadeante (Blink)</BLINK> <TT>Tamano fijo (TypeWriter)</TT> <EM>énfasis (Emphasis)</EM> <STRONG>Gran énfasis (Strong)</STRONG> <U>Subrayado (Underline)</U> Estructura del hypertexto Existen dos partes fundamentales de un documento HTML. Encabezado Se inicia mediante el comando <HEAD> y se termina con </HEAD>. Por lo general se incluye aquí el título del documento, mediante el comando <TITLE> ... </TITLE>. Cuerpo Se inicia mediante el comando <BODY> y se termina con el comando . Este comando acepta numerosos modificadores. [.'; return true;"descripción completa]. Dentro del cuerpo del documento se incluye cualquier carácter imprimible. Además, es importante incluir el comando <ADDRESS> ... </ADDRESS> al final del cuerpo del documento 3 (pero dentro de el). Dentro del ADDRESS se escribe el nombre del autor del documento, la organización a la que pertence, su dirección de correo electrónico, y otra información que se considere relevante (por ejemplo, la última fecha de actualización del documento). Un primer ejemplo usando estos comandos básicos <HEAD> <TITLE>Tejedores del Web − Ejemplo numero uno</TITLE> </HEAD> <BODY> <H2>Ejemplo numero uno</H2> <H2>Primera parte</H2> <P>Aprendimos a usar el comando párrafo.</P> O a cortar una línea usando BR.<BR> <H2>Segunda parte</H2> <P>Aprendimos a marcar palabras <B>importantes</B>, otras <B><I>mas importantes</I></B>, y otras <STRONG>tremendamente importantes</STRONG></P> <H3>Nota</H3> <P>Tambien aprendimos a hacer <BLINK>parpadear</BLINK> el texto.</P> <ADDRESS> [email protected]<BR> Santiago de Chile, 1 Enero 2010<BR> </ADDRESS> </BODY> ejemplo1.htm ejemplo1.htm En este ejemplo, se observan los temas tratados en esta sección. [ver este ejemplo] 4 Más comandos en HTML El comando HTML El comando <HTML> ... </HTML> se usa para delimitar el documento en hypertexto completo. Es útil incluirlo para evitar conflictos con futuras revisiones del lenguaje HTML. Este comando permite además indicar al cliente la versión de HTML que estamos usando, entre otras cosas. [.'; return true;"descripción completa] Listas Revisaremos dos tipos de lista que se pueden incluir en un hypertexto. Ambos tipos permiten varios niveles de enlace, es decir, podemos tener una lista dentro de otra lista. Listas no numeradas También llamadas listas no ordenadas, se declaran usando el comando <UL> ... </UL>. Cada item de la lista se marca con un <LI>. El resultado final es que el item se separa del borde izquierdo y aparece marcado con un símbolo (un punto, un cuadrado, etc.. depende del nivel de enlace). [.'; return true;"descripción completa] Listas numeradas También llamadas listas ordenadas, se declaran usando el comando <OL> ... </OL>. Cada item de la lista se marca con un <LI>. El resultado final es que el item se separa del borde izquierdo y aparece marcado con un número. Este comando permite especificar el tipo de numeración que se dará (números arábigos, números romanos, letras, etc.) [.'; return true;"descripción completa] Una lista no numerada se ve así: • Primer item • Segundo item • Primer subitem • Segundo subitem • Tercer item Lo que en HTML se escribe: <UL> <LI>Primer item <LI>Segundo item <UL> <LI>Primer subitem <LI>Segundo subitem </UL> 5 <LI>Tercer item </UL> La misma lista numerada se ve así: • Primer item • Segundo item • Primer subitem • Segundo subitem • Tercer item Lo que en HTML se escribe: <OL> <LI>Primer item <LI>Segundo item <UL> <LI>Primer subitem <LI>Segundo subitem </UL> <LI>Tercer item </OL> Listas descriptivas Una lista descriptiva es muy útil al momento de hacer glosarios, índices, referencias a otros documentos, o describir, en general, cualquier cosa. Una lista descriptiva se declara usando el comando <DL> ... </DL>. Cada ítem de la lista consta de un título, marcado mediante <DT> ... </DT>, y una descripción para dicho título, que se indica mediante el comando <DD>. Una lista descriptiva se ve así: Primer nombre a describir Descripción del primer nombre Segundo nombre a describir Descripción del segundo nombre 6 Lo que en HTML se escribe: <DL> <DT>Primer nombre a describir</DT> <DD>Descripción del primer nombre <DT>Segundo nombre a describir</DT> <DD>Descripción del segundo nombre </DL> Existen otros tipos de lista: listas de directorio [.'; return true;"descripción completa] y menús [.'; return true;"descripción completa] Texto preformateado El uso de texto preformateado permite crear un espacio para que el cliente pueda interpretar los tabs, quiebres de línea y espacios en blanco incluidos en el documento. Además, en el texto preformateado no se interpretan los caracteres especiales HTML : <, > y &. Para incluir texto preformateado, se usa el comando <PRE> ... </PRE>. El tipo de letra usado por el texto preformateado es el mismo que el de <TT> ... </TT>. El texto preformateado se ve así: Se pueden insertar espacios en blanco, saltos de linea y tabulaciones. Centrando texto Para centrar una parte del documento, se delimita lo que se desea centrar mediante el comando <CENTER> ... </CENTER>. El texto centrado se ve así. Lineas horizontales Una línea horizontal es un separador muy usado en HTML. En un cliente gráfico, aparece como una delgada línea horizontal. En un cliente de texto, aparece como una línea hecha con −. Se inserta con el comando <HR>. Este comando acepta varios modificadores [.'; return true;"descripción completa]. Un ejemplo de la segunda parte <HTML> <HEAD> 7 <TITLE>Tejedores del Web − Ejemplo numero dos</TITLE> </HEAD> <BODY> <H2>Listas</H2> <H3>No numeradas</H3> <OL> <LI>Aprendimos a usar listas no numeradas <LI>Para clasificar la información </OL> <H3>Numeradas</H3> <UL> <LI>También podemos hacer que HTML <LI>Cuente por nosotros </UL> <HR> <H2>Descripciones</H2> <DL> <DT>Descripcion</DT> <DD>Es nombrar las propiedades de algo <DT>Lista descriptiva</DT> <DD>Es nombrar las propiedades de varios objetos </DL> <CENTER>También sabemos centrar el texto.</CENTER> <TT> <PRE> y escribir preformateado </PRE> </TT> 8 <HR> <ADDRESS> [email protected]<BR> Santiago de Chile, 1 Enero 2010<BR> </ADDRESS> </BODY> </HTML> ejemplo2.htm ejemplo2.htm En este ejemplo, se observan los temas tratados en esta sección. [ver este ejemplo] Cómo crear una tabla ? Una tabla es una manera muy compacta y clara de mostrar la información. Una tabla en HTML se entiende como un conjunto de filas (fila=horizontal), apiladas una sobre otra. Cada fila contiene a su vez un conjunto de celdas, puestas una al lado de la otra. Una tabla se declara usando el comando <TABLE> ... </TABLE>. Dentro de la tabla, se usa <TR> ... </TR>para indicar una fila y dentro de una fila, <TD> ... </TD> para delimitar el contenido de una celda. El elemento de cierre de fila y de celda es optativo. Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras cosas, unir celdas, especificar la alineación del contenido de la celda, y mucho más [.'; return true;"descripción completa]. Para entender mejor el comando <TABLE> ... </TABLE>, está disponible una muy amplia gama de ejemplos. Ejemplo de tabla Aquí se muestra una tabla muy simple: <TABLE> <TR><TD>Celda A1</TD><TD>Celda B1</TD><TD>Celda C1</TD></TR> <TR><TD>Celda A2</TD><TD>Celda B2</TD><TD>Celda C2</TD></TR> <TR><TD>Celda A3</TD><TD>Celda B3</TD><TD>Celda C3</TD></TR> </TABLE> ejemplo3.htm 9 ejemplo3.htm En este ejemplo, se observan los temas tratados en esta sección. [ver este ejemplo] Como hacer referencias en un hypertexto ? La capacidad de hacer referencias en un hypertexto, es sin duda su capacidad más atrayente y práctica para poder entregar de mejor manera la información. Clasificaremos las referencias o links en tres tipos: • Referencia a otra zona dentro del mismo documento. • Referencias a otros documentos. • Referencias a otra zona en otro documento. Referencias dentro de un mismo documento Es posible hacer referencias que lleven al usuario de una parte del documento a otra dentro del mismo documento con solo hacer click. Llamaremos a estas referencias referencias localesEstas referencias constan de dos objetos: La referencia Corresponde a la zona en la cual el usuario hará click, para viajar a otra parte del documento. Esta zona aparece subrayada en el documento. Una referencia local se crea delimitando la zona con el comando <A href="#nombre"> ... </A>, en que nombre es la etiqueta que se está referenciando. El nombre referenciado Corresponde a la zona del documento a la cual el usuario llegará al hacer click en la referencia correspondiente. Esta zona no cambia sus atributos en el documento. Un nombre local se crea delimitando la zona con el comando <A NAME="nombre"> ... </A>, en que nombre es la etiqueta que asignamos a esta zona. Ejemplo de referencias locales <HEAD> <TITLE>Ejemplo 4 − Referencias locales</TITLE> </HEAD> <BODY> <H2>Referencias locales</H2> <H3><A NAME="indice">Indice</A></H3> <UL> <LI><A HREF="#uno">Sección uno</A> 10 <LI><A HREF="#dos">Sección dos</A> <LI><A HREF="#tres">Sección tres</A> </UL> <H3><A NAME="uno">Sección uno</A></H3> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="dos">Sección dos</A></H3> <H3><A NAME="tres">Sección tres</A></H3> <ADDRESS> [email protected]<BR> Santiago, 1 Enero 2001 </ADDRESS> </BODY> ejemplo4.htm ejemplo4.htm Como vemos, las referencias locales son muy útiles para crear índices al comienzo del documento. [ver este ejemplo] Referencias a otros documentos Para referenciar a otro documento, es necesario conocer la ubicación exacta del documento que se referenciará. Una ubicación, puede ser referenciada en forma relativa o absoluta Ubicación relativa Se indica especificando la posición del documento en la estructura de subdirectorios a partir de la ubicación del documento actual. Sólo se puede usar para documentos ubicados en el mismo computador. Una referencia relativa a otro documento se hace usando el comando <A href="ubicación"> ... </A> Ubicación absoluta Se indica especificando el URL (uniform resurce locator) de la página que se está referenciando. Los URL son una manera universal de especificar una dirección. La fórma más básica de referenciar un hypertexto es usar el comando <A href="http://computador/directorio/archivo"> ... . El computador indica la máquina donde se encuentra el documento. El directorio y archivo indican su posición dentro de ese computador. Los URL tienen muchas formas distintas para referenciar distintos objetos [ver descripción completa de los URL].> Un ejemplo con referencias a otros documentos 11 <HEAD> <TITLE>Ejemplo 5 − Referencias a otros documentos</TITLE> </HEAD> <BODY> <H1>Referencias a otros documentos</H1> <H2>Referencias relativas</H2> <P>Se puede referenciar, por ejemplo, a un archivo localizado en el mismo directorio, como por ejemplo, al <A href="ejemplo1.htm">ejemplo número 1</A>. También a un archivo localizado en otro directorio, por ejemplo, el texto acerca de los <A HREF="../def/url.htm">URLs</a></P> <H2>Referencias absolutas</H2> <H3>Algunos servicios WWW en Chile</H3> <P>En Chile está disponible el servicio <A HREF="http://www.nexus.cl/">Nexus</A> que permite acceso a muchas bases de datos del país. También está el servidor WWW de la <A HREF="http://www.uchile.cl/">Universidad de Chile</A> y el servidor de <A HREF="http://www.chip.cl/">ChipNews</A> para leer noticias de actualidad por InterNet</P> <H3>Algunos servicios en el extranjero</H3> <P>Para informarse de la actualidad mundial, se puede acceder al servicio <A HREF="http://www.cnn.com/">CNN</A>. Para los amantes de la música se encuentra el servidor oficial de la <A HREF="http://mtv.com/">MTV</A> y para localizar distintos tipos de información está <A HREF="http://www.yahoo.com/">Yahoo!</A>. <ADDRESS> 12 [email protected]<BR> Santiago, 1 de Enero de 2001 </ADDRESS> </BODY> ejemplo5.htm ejemplo5.htm Este ejemplo ilustra referencias a otros documentos. [ver este ejemplo]. Referencias a un lugar de otro documento Para este tipo de referencias se utiliza una mezcla de las dos formas anteriores. Se indica el URL del documento a referenciar, luego un signo # y luego el nombre de la zona a referenciar. Un ejemplo de referencia a un lugar en otro documento <HEAD> <TITLE>Ejemplo 6 − Referencia a otro documento</TITLE> </HEAD> <BODY> <H1>Referencia a un lugar en otro documento</H1> <H2>Referencias especiales</H2> <P>Los comandos de referencia tienen muchas más aplicaciones. Para eso, hay información detallada en <A HREF="../elements/quickref/link.htm#A">la descripción completa</A>.</P> <ADDRESS> [email protected]<BR> Santiago, 1 de Enero 2001. </ADDRESS> </BODY> ejemplo6.htm ejemplo6.htm 13 En este ejemplo se muestra la forma de hacer referencias a una zona de otro documento. [ver este ejemplo]. Incluyendo otros elementos en el hypertexto Para hacer más atractivo y fácil de entender un hypertexto, es posible incluir imágenes, sonido y animaciones. Las imágenes aparecen directamente en el hypertexto (en los casos en que el cliente provee de una interfaz gráfica); en cambio, los sonidos y las animaciones deben ser activados por el usuario mediante un click. Imagenes Para incluir una imágen en un hypertexto, se usa el comando <IMG SRC="imagen">. La imagen puede ser referenciada en forma absoluta o relativa, de la misma forma en que se referenciaba a los documentos hypertexto en la sección anterior. El comando <IMG> acepta numerosos modificadores, por ejemplo, se puede especificar la alineación de la imagen (a izquierda, derecha, o centro), el tamaño, agregarle un borde, etc. [.'; return true;"descripción completa]. Audio Los archivos de audio son, por lo general, bastante grandes en cuanto al espacio en disco que ocupan; por esto mismo, son también bastante lentos de transferir a través del WWW. Es por esto que los archivos de audio no se cargan de manera automática, sino que requieren son transferidos sólo cuando el usuario lo solicita. Para incluir un sonido, se delimita la sección con un comando que apunte al URL del archivo de audio. Animaciones Para incluir una animación, se procede de la misma manera anterior, apuntando al URL de la animación. Caracteres especiales Para incluir caracteres especiales, se usa el comando &código;. El código corresponde al código interno del caracter especial. De los caracteres especiales, los más usados para las personas de habla hispana son los necesarios para escribir acentos y hacer la letra Ñ. Los códigos de estos caracteres son: &aacute; &eacute; &iacute; &oacute; &uacute; &ntilde; &Ntilde; á é í ó ú ñ Ñ Existe una amplia gama de caracteres especiales, símbolos matemáticos, caracteres extendidos, [ver lista completa]. En el presente documento, se provee de algunos comentarios y reflexiones acerca del uso de herramientas automatizadas para la generación de páginas Web: editores y conversores. 14 Editores Seguramente usted ha visto o conoce programas que pueden asistir a una persona en la creación de páginas Web, y quizás se ha preguntado: ¿ uso un editor o aprendo HTML ? La respuesta que yo le daría es la misma que si usted me preguntara si es mejor saber aritmética o ocupar una calculadora: ambas cosas no se contraponen entre sí. Un editor HTML es una gran ayuda al diseñador Web: • brinda la posibilidad de disponer y ver la página mientras se crea, y de observar inmediatamente cómo apareceran distribuídos los colores y los elementos dentro del documento. • es una ayuda para recordar los comandos y sus atributos. sin embargo; puede resultar inadecuado por lo siguiente: • Poca flexibilidad • El set de comandos que incorpora puede ser limitado, en caso de que sea un editor producido por alguna empresa que haga browsers, o puede estar obsoleto. • El HTML que generan está fuertemente orientado al formato físico, más que a la estructura, con lo cual se pierde universalidad en el documento. Yo no uso editores HTML porque se pierde mucha flexibilidad y el código que generan en general es difícil de editar o mantener. Lo que uso es un editor de texto (vi) en el cual se pueden definir macros o "atajos de teclado" para ahorrar tipeo. Sin embargo, no todos tienen los mismos gustos: lo que yo recomiendo es comenzar por lo básico, procurando aprender HTML bien, creando documentos con editores de texto plano. Después si se desea se puede ocupar una combinación editor de texto plano más editor HTML para crear documentos, a fin de explotar al máximo las capacidades de ambos sistemas. Los editores HTML se clasifican en dos tipos: Wysywyg "what you see is what you get" en ellos se puede ir viendo en pantalla inmediatamente lo que se va creando. son muy útiles para apreciar los colores y la disposición en pantalla de los elementos. No Wywywyg Ellos usualmente invocan una aplicación externa (un browser) para mostrar lo que se va creando. Son muy útiles para recordar los comandos HTML y sus atributos. Mixtos Presentan la pantalla dividida en dos segmentos, uno con el código HTML y otro con el resultado final. Conversores Las herramientas de conversión permiten transformar un documento escrito en otro formato a un documento HTML. 15 El código HTML que generan es casi imposible de leer, debido a que hay muchas distinciones que existen en lenguajes de formateo de texto que no existen en HTML, y deben ser simuladas, con algún grado de truculencia. ¿ Cuándo usarlos ? cuando no hay otra alternativa, porque es inviable o ya se hizo un gran trabajo previo en otro sistema. ¿ Cómo usarlos ? la idea básica es simplificar al máximo el documento (eliminar las sangrías, uniformar los tamaños de letra, etc.) para luego pasar el conversor, generando un documento HTML. Finalmente conviene revisar la salida usando un editor de texto, revisando que el código obtenido sea sintácticamente correcto, y dejando el documento lo suficientemente ordenado y legible como para que sea fácil de modificar al momento de realizar futuras actualizaciones. 16
