Introducción Conceptos básicos Cualidades y limitaciones del hipertexto Estructura ordenada de las etiquetas Programas básicos Concepción, ordenamiento y diagramación del sitio Síntesis del módulo, símbolos y términos.

INTRODUCCIÓN

Cuando tienes conexión a Internet y abres el programa "navegador" comienzas a ver archivos que tienen diseño gráfico: letras de distintos tipos y tamaños, diversidad de colores, imágenes, efectos animados y hasta sonidos. Además, encuentras que el puntero de tu ratón se convierte en una "manita". Si ahí haces clic te llevará a otro archivo y de ese a otros más en un paseo interminable, como que viajaras en una balsa en medio del mar.

Esos brincos de un archivo a otros se les llama "navegar" por Internet. Cada archivo que abres se le llama "página web". Algunos se encuentran en la misma computadora de donde has iniciado tu viaje pero en esos brincos puedes ir a cualquier computadora en el otro extremo del mundo.

Con este módulo iniciamos el proceso para entender y poder realizar páginas web. Aunque existen muchos programas que elaboran páginas web automáticamente, es conveniente entender la estructura del lenguaje utilizado. Así podrás hacer reparaciones y cambios a tu gusto entrando a los códigos de las páginas y no estarás dependiendo de las posibilidades o limitaciones de los programas especializados.

Los contenidos de este curso introductorio están distribuidos en nueve módulos básicos y cuatro complementarios. Con los tres primeros estarás haciendo páginas web. En el cuarto módulo colocarás tu página en Internet y del quinto al noveno módulo aprenderás a mejorar tus páginas. Los módulos 10 al 13 son complementos para introducirte en lo que son funciones más avanzadas y requieren de otros cursos. Las hemos incluido para que vayas conociendo el potencial existente en las páginas web.

Estas páginas que estás leyendo están hechas como páginas web. En cualquier momento puedes revisar el "código fuente" (desde el menú del navegador) y verás cómo están hechas y lo que irás aprendiendo a lo largo de estos módulos.

Damos por hecho que ya sabes generalidades en el manejo de programas de Windows: cómo abrir un archivo, cómo guardarlo, cómo buscarlo en el Explorador, cómo crear nuevas carpetas. También damos por hecho de que estás trabajando en una máquina tipo PC con Windows 95 o superior instalado y que conoces el teclado y los nombres de las teclas. Si no es este tu caso avísanos para darte indicaciones adecuadas.

Bueno, dejemos tanta introducción y adelante. Cualquier duda, crítica, comentarios o necesidad de precisar algo puedes escribir a sidca@laneta.apc.org poniendo en el título del mensaje: Comentario sobre el modulo ... (el número del módulo que corresponda).

CONCEPTOS BÁSICOS

Los archivos que ves en Internet con formato gráfico cuando "navegas" a través de la llamada World Wide Web (WWW) -telaraña mundial- conocidos como "páginas web" están creados como texto simple sin formato.

Las órdenes para definir los formatos de presentación gráfica y las acciones se les llaman "etiquetas", que son indicaciones entre los corchetes angulares conocidos como "menor que" y "mayor que":

<  >

A este tipo de lenguaje se le llama HIPERTEXTO y es mundialmente conocido por sus siglas en inglés HTML: Hyper Text Markup Lenguage, que significa Lenguaje de Marcas en Hipertexto. Así encontrarás archivos que tienen la extensión .html o abreviado como .htm

Ese tipo de codificación se ha estandarizado en todo el mundo para usar un "lenguaje" común y requiere que en los servidores de Internet se coloquen los archivos para ser consultados con los programas que leen e interpretan esos códigos y conocemos como "Navegador" (Browser en inglés). Entre los más comunes están:

	Firefox	http://www.mozilla-europe.org/
	Netscape	http://www.netscape.com/
	Opera	http://www.opera.com/
	Internet Explorer	http://www.microsoft.com/

El proceso de transferencia de los archivos cuando el navegador los solicita a un servidor en Internet se llama Protocolo de transferencia de Hipertextos, que en inglés es Hypertext Transfer Protocol y abreviado es HTTP, más conocido en minúsculas al anteceder las direcciones con http://

Las direcciones en Internet se les conoce como "Localizador Universal de Recursos" que sus siglas en inglés son URL. Así puedes entender cuando te dan una dirección de página web indicando que la URL es http://www.laneta.apc.org/

Dentro de un documento escrito en HTML vas a encontrar el texto que ves en pantalla acompañado de muchas etiquetas que indican cómo se presentará, por ejemplo:

<B>este texto va con negritas</B>

Ahí puedes ver que la letra B, abreviación de Bold, indica verlo en negritas. La orden comienza con <B> y donde termina la orden se pone </B>, de modo que la diagonal está indicando que ahí finalizan las negritas.

Casi todas las órdenes comienzan y finalizan con el mismo nombre y se diferencian porque el cierre incluye la diagonal, aunque hay algunas órdenes que no requieren ser cerradas pues el inicio de una nueva orden implica que la anterior termina.

Más adelante irás conociendo todos las etiquetas con las que se indica cómo debe ser la letra, de qué tamaño, su color y tipo, en qué posición, dónde habrá imágenes, las ligas hacia otras páginas, etc.

CUALIDADES Y LIMITACIONES DEL HIPERTEXTO

Las principales cualidades son cuatro:

1. Cada archivo es relativamente pequeño a pesar de contener gran variedad de posibilidades de presentación gráfica porque está hecho como texto simple. Esto ayuda a que se abra rápidamente.
   
2. El formato de hipertexto ha ido creciendo en el mundo como lenguaje estándar de manera que puede leerse desde distintos entornos, principalmente entre sistemas Macintosh y PC.
   
3. La posibilidad de brincar de un lugar a otro a través de las ligas. Esto es posible dentro del mismo documento, de uno a otro en el mismo servidor y saltar a otras páginas ubicadas en cualquier servidor del mundo.
   
4. La posibilidad de aprovechar documentos e imágenes puestos en cualquier sitio de Internet, sin necesidad de duplicar información que ya existe.

Las principales limitaciones van muy vinculadas a sus cualidades:

1. El formato de presentación puede cambiar de una máquina a otra debido al tipo de pantalla, letras instaladas y navegador utilizado. Por ello al hacer páginas debes probar su visualización en distintas máquinas pues no siempre se verá como en tu propia máquina.
2. Cuando una "página web" depende mucho de ligas o enlaces a otros sitios, se debe estar cuidando la existencia de tales ligas que podrían ser eliminadas o cambiadas por quien las administra. Los recursos compartidos son una ventaja pero también un riesgo en tanto no hay una administración "central" que cuide que las ligas no se "rompan".

ESTRUCTURA ORDENADA DE LAS ETIQUETAS

Las etiquetas generales de una página web son:
<HTML> </HTML>  Apertura y cierre del hipertexto.
<HEAD> </HEAD>  Apertura y cierre de cabecera.
<BODY> </BODY>  Apertura y cierre del cuerpo del documento.

Todas las etiquetas que se van abriendo deben de cerrarse en el orden inverso a su apertura, de modo que las etiquetas generales de un documento deben quedar así:

<HTML>	Inicio de hipertexto
<HEAD>	Inicio de encabezado
</HEAD>	Fin de encabezado
<BODY>	Inicio del cuerpo del documento
</BODY>	Fin del cuerpo del documento
</HTML>	Fin del hipertexto

Así, todo el documento quedará envuelto entre HTML con su apertura y su cierre. Adentro contiene dos grandes bloques:

• HEAD, que contiene información para encabezado y características que se aplicarán a todo el documento, lo que verás a partir del tercer módulo.
• BODY, que contiene todo lo que se visualiza en la pantalla, por eso se llama el "cuerpo" del documento. Esto lo verás a partir del segundo módulo.

Aunque los navegadores más modernos son capaces de interpretar errores leves y ausencias de algunas etiquetas, es conveniente cuidar el orden en el que se abren y cierran para no confundir al navegador. Entre una etiqueta de APERTURA y una etiqueta de CIERRE irá el texto que asume la orden indicada en las etiquetas.

Entre las etiquetas hay de dos tipos:

• simples
• compuestas

Las etiquetas SIMPLES son las que contienen una orden que no requiere más información, por ejemplo:

¿QUE HACE?	¿QUE SE ESCRIBE?	¿COMO SE VERA?
poner en negritas	<B>contenido</B>	contenido
poner en cursivas	<I>contenido</I>	contenido
márgenes laterales	<BLOCKQUOTE>contenido</BLOCKQUOTE>	contenido

Las etiquetas compuestas contienen información adicional llamados "parámetros" o "atributos" que detalla lo que se debe hacer, por ejemplo:

¿QUE HACE?	¿QUE SE ESCRIBE?	¿COMO SE VERA?
Cuerpo de la hoja con fondo negro	<BODY BGCOLOR="#000000"></BODY> Explicación: La etiqueta es BODY y el atributo es BGCOLOR="#000000", que es el número para el negro.
Letra Arial tamaño 6 ( muy grande)	<FONT FACE="Arial" SIZE="6">contenido</FONT> Explicación: La etiqueta es FONT y tiene dos atributos: FACE="Arial" y SIZE="6"	contenido
Párrafo alineado a la derecha	<P align="RIGHT">contenido</P> Explicación: La etiqueta es P y el atributo es align="RIGHT"	contenido

---

Hagamos un ejercicio de calentamiento para ver resultados y probar los programas en tu máquina.

Abre el Bloc de notas , que probablemente está en "Inicio, Programas, Accesorios". Si no está ahí, abre "Inicio, Ejecutar" y solicitas: notepad.

Ya en el Bloc de notas escribe las siguientes líneas:

<HTML> <HEAD> </HEAD> <BODY BGCOLOR="#996600" TEXT="#FFFFFF"> <P ALIGN="CENTER"> <FONT SIZE="5"> Usos y Costumbres </FONT> </P> </BODY> </HTML>

Observa que inicia y termina con HTML La parte de HEAD (encabezado) por el momento la dejamos de lado. La veremos más adelante. En BODY (Cuerpo) definimos dos atributos:         Color de fondo en café es BGCOLOR="#996600"         El texto será blanco que es TEXT="#FFFFFF" Adentro del cuerpo tenemos:         Párrafo centrado con con ALIGN="CENTER"         Y el tamaño de la letra a 5 puntos Fíjate que los cierres se van poniendo en el orden inverso: cierre de FONT, cierre de Párrafo, cierre de BODY y cierre del archivo HTML.

Dos detalles técnicos caben mencionar:

• Dentro de las etiquetas puedes usar mayúsculas o minúsculas, no importa; pero es útil conservar uniformidad para que luego puedas entender mejor lo que haz hecho. Por ello aquí verás las etiquetas en mayúsculas.
• Los cambios de línea no afectan en la página. Se podría poner todo en una sola línea corrida. Dar retornos simplemente sirve para facilitar la visualización ordenada de las etiquetas. Para indicar un cambio de línea se usa la etiqueta <BR> que veremos en el Módulo 2.

Ahora guarda el archivo sin cerrar el Bloc de notas. Puedes crear una carpeta especial para tus ejercicios llamándola PAGINAS y dentro de ella dale nombre al archivo como prueba1.htm

Abre el Explorador de Windows y ubica el archivo que acabas de crear. Haz doble clic sobre el icono y deberá abrirse automáticamente el navegador de tu máquina y te mostrará el resultado del ejercicio.

Detrás tienes el Bloc de notas. Regresa ahí y cambia el FONT SIZE poniendo 6 en lugar de cinco. Guarda el archivo y te pasas al navegador. Oprime el botón de "Actualizar" y verás ahora la letra en tamaño número seis.

Realiza la misma operación y ahora cambia el FONT SIZE por 7 en lugar del seis. Guardas y Actualizas en el navegador.

Deberás ver algo así:

Usos y Costumbres

¡Muy bien! Haz iniciado tu página.
Puedes cambiar el texto por un título que te guste.
Poco a poco la irás aumentando y mejorando a tu propio gusto.

---

PROGRAMAS BÁSICOS

Como haz visto en el ejercicio anterior, cualquier procesador que haga texto simple te permitirá realizar páginas web. No necesitas programas especiales, aunque ellos también te pueden ayudar y facilitar algunas tareas. Desde los procesadores de textos en sus versiones posteriores a 1996 permiten guardar como HTML, hasta programas especializados como el "NVU" en el Software Libre. En los programas comerciales existen el "FrontPage", "HomeSite", "DreamWeaver" u otros que van apareciendo y que te permiten hacer páginas en modo gráfico sin necesidad de entender el significado de las etiquetas.

Como esos programas disponen de sus propios manuales bastante buenos, en este curso los veremos en el último módulo de manera general. Así que daremos más importancia a comprender y manejar las etiquetas básicas. Si trabajas en Windows te proponemos el uso del programa TextPad, que es un procesador de textos sencillo y con muchas cualidades, entre ellas el facilitar la inserción de las etiquetas en la elaboración de páginas web. En Linux puedes utilizar Blue Fish o NEdit. En Macintosh está el BBEdit.

Oprime aquí para conocer sobre TextPad y descargarlo

CONCEPCIÓN, ORDENAMIENTO Y DIAGRAMACIÓN DEL SITIO

Aunque este curso está orientado a la elaboración técnica de las páginas web, hay que dejar claro desde este primer módulo que hay aspectos más determinantes que el diseño o la presentación de la página web: la idea, objetivos, contenidos y orden que tendrá el sitio web.

Cualquier diseño de página que te guste la puedes copiar a tu computadora y luego insertar tus propios contenidos entre las etiquetas de esa página, reemplazando y así tendrás una página ya hecha.

De tu idea de página ubica bien qué pretendes lograr con ella:

• para quién está dirigida,
• qué efecto quieres causar,
• qué es lo más importante.

Estos serán los objetivos específicos que debes tener presente en la elaboración, uso y mantenimiento de tu sitio web para que mantenga coherencia y no se vuelva un "mural" con mil cosas revueltas.

Los textos en un sitio de Internet se manejan distintos a como se colocarían en una revista o folleto. En Internet la gente no dura mucho leyendo a menos que estén muy interesados con tu página.

Los textos deben llamar la atención y explicarse bien en pocas palabras. Así debes ir definiendo las posibles secciones del sitio haciendo una distribución que vaya dando oportunidad de profundizar por más información, pero que cada una sea suficiente y completa para que quien visita tus páginas pueda retirarse en cualquier momento con ideas completas.

En términos de tamaños, cada página dentro del sitio no deberá ser demasiado larga que resulte interminable y cansada (bajar y bajar y no se llega al final). Pero tampoco tan corta que apenas diga tres cositas y hay que pasar a otra página pues resultará aburrido pasar de una a otra sin motivarse con contenidos. Aunque te encante tu logotipo, evita ponerlo gigante con un índice que no dice nada y te obliga a pasar a otras páginas.

Te puede servir de referencia que una página contenga el equivalente de una o dos cuartillas hasta 8 o 10 cuartillas. En tamaño de archivo es recomendable que no sobrepase los 50 Kb.

También debes considerar las imágenes que vas a poner. Si son simple adorno deben ser muy pequeñas. Si son demasiado grandes pero muy importantes de incluir, entonces es mejor crear una versión pequeña para ponerla junto al texto, con una liga para quien desee ver la imagen grande.

Dependiendo de tus objetivos, a quién va dirigida la página y con qué condiciones de navegación cuenta (velocidad de conexión, computadora y navegador), podrás definir qué tanto adorno, movimiento y efectos especiales podrás ponerle a la página. Considera que de nada sirve una página muy bonita en presentación pero que se dificultará verla a tus visitantes prioritarios o que resulte muy pobre en contenidos.

---

SINTESIS:
En este módulo hemos visto:

• Los archivos HTML son documentos de texto simple con órdenes para su visualización gráfica. Se escriben en cualquier procesador de palabras y se leen en Navegadores.
  
• Se han visto algunos términos básicos definidos por sus siglas: html, htm, http, url
  
• Las órdenes en HTML se escriben dentro de corchetes angulares. La apertura se ecribe <orden> y el cierre se escribe </orden>.
• Las principales cualidades del hipertexto son: es pequeño, es compatible con la mayoría de sistemas, se enlaza con otros documentos, se aprovecha información ya existente.
• En limitaciones hemos mencionado: la visualización puede cambiar entre navegadores, los enlaces se pueden perder si desaparecen las páginas administradas por otr@s.
• Todas las etiquetas deben cerrarse en el orden inverso al que se abrieron.
• Los archivos HTML contienen dos grandes partes: la cabecera (HEAD) y el cuerpo (BODY). Lo que vemos en la pantalla del navegador es lo que aparece en BODY.
• Hay etiquetas simples con una orden sencilla y etiquetas compuestas que incluyen parámetros para la orden.
• Existen muchos programas especializados para elaborar archivos HTML pero la base es texto simple por lo que cualquier procesador de textos es útil. En este curso daremos indicaciones usando el TextPad.
• Más importante que la elaboración técnica es la concepción y diseño general de las páginas. Definir y guiarse por objetivos. Distribuir la información de manera que cada parte brinde ideas completas y suficientes.

SIMBOLOS DE USO FRECUENTE:

Corchetes angulares desde el teclado	< Apertura se escribe con ALT + 60 del teclado numérico > Cierre se escribe con ALT + 62 del teclado numérico
Signo de número #	Se escribe con ALT Gr y el 3 También con ALT + 35 del teclado numérico

TERMINOS DEL INGLES usados frecuentemente:

Término utilizado	Significado		Término utilizado	Significado
BODY	Cuerpo, se refiere al contenido del documento que se verá en pantalla.		HEAD	Cabeza. Se refiere al encabezamiento que contiene indicaciones que no se visualizan con excepción del título.
LEFT	Izquierda. Ubica o alinea a la izquierda.		RIGHT	Derecha. Ubica o alinea a la derecha.
WIDTH	Ancho. Para definir el ancho que tendrá un objeto.		HEIGHT	Altura. Para definir la altura de un objeto.
SIZE	Tamaño. Puede ser de letras u objetos.		FONT	Fuente. Se refiere al tipo de letra.
FACE	Cara. Se usa para indicar el nombre que se da a cada letra. Por ejemplo: Courier, Times, Arial, Comic Sans		TEXT	Texto. Se usa en los atributos de Body para definir el color general del texto en la página.

En el Módulo 02 conocerás los atributos para Body, los códigos para el color, saltos de líneas y párrafos, las alineaciones, atributos para las fuentes, construcción de listas, códigos para signos del español y líneas de separación horizontal.

Recuerda que cualquier duda, comentario, crítica o sugerencia serán bienvenidas. Escribe a sidca@laneta.apc.org indicando a qué módulo se refieren tus comentarios.

---

                

---

©Programa LaNeta, Carlos Eugenio; marzo 2007