CAPÍTULO 16:
Construcción de
una página para la Web
179
El lenguaje de la Web: HTML
Una vez definidos los contenidos, y la forma en que éstos se
presentarán -tanto estética como funcionalmente- a los ocasionales
visitantes de la página web, es necesario codificar esta información de
modo tal que pueda ser interpretada por un visualizador Web, como el
Internet Explorer 6 de Microsoft, por ejemplo.
Como se señaló oportunamente en el Capítulo 2, dedicado al
funcionamiento de la Web, HTML (HyperText Markup Language, o
Lenguaje de Marcado para Hipertexto) es el lenguaje con el cual están
escritos los documentos para la Web.
HTML no es más que un gran conjunto de "tags" o etiquetas, las
cuales se enmarcan dentro de una signo < (menor) y un signo >
(mayor), como por ejemplo:
<ETIQUETA1>
En general, salvo algunas excepciones, las etiquetas de HTML se
incluyen de a pares, la primera para abrir, y la segunda para cerrar. Para
diferenciar su acción, a la segunda se la antecede por una barra
diagonal ( / ), como se indica a continuación:
<ETIQUETA1>
</ETIQUETA1>
La estructura básica de un documento HTML (que no tenga marcos o
frames, como se verá más adelante), puede sintetizarse de la siguiente
forma:
Etiqueta de apertura
Etiqueta de cierre
Textos, gráficos, enlaces, etc.
<title>Título de la página</title>
<head>
</head>
<body>
</body>
<html>
</html>
Donde:
<html> y </html> indican que el documento está escrito en HTML.
<head> y </head> definen el encabezamiento del documento, que
básicamente incluye el titulo de la página (el cual se coloca entre las
etiquetas <title> y </title>); y eventualmente alguna otra etiqueta, como
las “meta name”, que indican una breve descripción del contenido de la
página y/o palabras clave de la misma que ayudan a las máquinas
buscadoras de información en Internet (ver aclaración al respecto en
Cap. 18).
<body> y </body> es el lugar donde se introduce el contenido
propiamente dicho de la página Web.
La siguiente lista, a modo de ejemplo, señala algunas de las
etiquetas más comunes de HTML:
181
Negrita
Bastardilla
Centrado
Cabeceras de títulos
(con n desde 1 a 6)
Lista con “bullets”
Lista con números
Retorno de carro
Salto de párrafo
Línea de separación
Enlace de textos
<b> ... </b>
<i> ... </i>
<center> ... </center>
<Hn> ...</Hn>
<ul> ... </ul>
<ol> ... </ol>
<br>
<p>
<hr>
<a href=“URL”> TEXTO </a>
<img src=“nombre.gif”> <p>
Asimismo, y dado que los caracteres superiores a 127 del código
ASCII son específicos para cada lenguaje, se debe utilizar una
secuencia de símbolos para definir los caracteres acentuados propios
de nuestro idioma y la letra ñ, como así también para caracteres
especiales como los de apertura de exclamación e interrogación. A
continuación se indican estas secuencias para cada uno de los
caracteres:
Enlace de gráficos
á á
é é
í
í
ó ó
ú ú
ñ ñ
¿ ¿
¡
¡
De modo tal que, para escribir la frase:
Para más información dirigirse a ...
deberíamos colocar la siguiente secuencia:
Para más información dirigirse a ...
Ahora bien, ¿cómo y dónde se adosan estas etiquetas al contenido
específico de una página web? En su versión más "rudimentaria", se
puede trabajar con un editor de textos cualquiera, por ejemplo el Bloc
de Notas de Windows, donde se irá incorporando el contenido del
documento acompañado de las etiquetas correspondientes, para luego
observar los resultados desde el visualizador.
La metodología sería la siguiente:
1) Abrir el Bloc de Notas de Windows.
2) Escribir los pares de etiquetas de la estructura básica (html, head,
3) Escribir el título de la página dentro del par <title> </title>.
4) Escribir el contenido propiamente dicho dentro del par <body>
title, body).
</body>.
5) Adosarle las etiquetas de formateo al contenido.
6) Grabarlo con extensión .htm.
182
Para visualizar el aspecto final de esta página desde el Internet
Explorer 6, se debe abrir el documento recientemente grabado mediante
la opción Archivo/Abrir, e ir al directorio correspondiente en el cual se
almacenó el documento, tras lo cual se podrá observar lo siguiente:
Fig. 16.1: Conformación
de una página web
desde el Bloc de Notas
de Windows 98.
Fig. 16.2: Vista desde el
Internet Explorer 6 de la
página web creada con
el Bloc de Notas de
Windows 98.
De esta forma, una muy elemental página web (de apenas dos líneas
de contenido) de un hipotético colegio, tendría el siguiente aspecto
desde el Bloc de Notas:
Este trabajo "dual" puede repetirse una y otra vez hasta alcanzar el
objetivo deseado. Sin embargo, debe tenerse en cuenta que cada vez
que se realice una modificación en el Bloc de Notas, deberá tenerse la
precaución de guardar el mismo, y en el visualizador Web deberá
pulsarse el botón de Actualizar, para que las modificaciones tengan
efecto.
Los editores HTML
Como ha podido apreciarse a priori con este simple ejemplo, la
codificación de páginas Web en formato HTML puede resultar una tarea
laboriosa y tediosa -aunque no extremadamente difícil- para el ocasional
usuario que desee llevar adelante la construcción de una página en la
Web. Imaginemos la página en cuestión en un estado avanzado, y su
correspondiente "esqueleto" en etiquetas HTML introducidas "a mano".
Seguramente nos demandaría largas jornadas de trabajo en algo que,
más que inteligencia y habilidad, requiere paciencia y minuciosidad.
A efectos de salvar este inconveniente comenzaron a aparecer los
llamados "Editores HTML", cuya función principal es la de ayudar al
183
diseñador de una página web en el aspecto de la introducción de las
etiquetas.
Los primeros y más simples editores (actualmente hay más de un
centenar, la mayoría de los cuales se comercializa bajo la modalidad
shareware), poseían una barra de herramientas entre las cuales se
encontraban los iconos de las etiquetas más usuales.
Dos ejemplos de este tipo de programas, HTML Assistant y
WebEdit, muestran la forma similar de trabajo: un gran sector dedicado
a la introducción del contenido y sus respectivas etiquetas, y una zona
superior con la barra de herramientas. Como bien puede suponerse, se
trata de un Bloc de Notas mejorado a tal fin, pero que en definitiva no
permiten ir viendo cómo va quedando la página en cuestión.
Para salvar este inconveniente surgieron los "Editores HTML
(pronúnciese "guaisiguai")
WYSIWYG". Este extraño acrónimo
proviene de las primeras letras de la frase "What You See Is What You
Get", lo cual significa "Lo que ve es lo que obtiene", y es una conocida
filosofía de diseño para los programas de procesamiento de texto y de
autoedición fundamentalmente, donde la acción de los comandos de
formateo sobre el texto que se ven en la pantalla del monitor, producen
el mismo efecto, o apariencia final, con la cual se imprimirá el
documento.
En el caso específico de las páginas web, este tipo de editores
permiten ir formateando el contenido, de tal forma que lo que allí se
vaya creando sea prácticamente lo que luego se observe desde el
visualizador. Y decimos "prácticamente" y no "exactamente", porque
existen algunas pequeñas diferencias, inclusive vistas con distintos
visualizadores, que hacen que el documento creado sobre el Editor
HTML sea muy parecido, pero no igual, al observado desde el
visualizador.
tarea de conocer
las etiquetas HTML y de
Como puede suponerse, este
tipo de editores hacen más
"transparente" al usuario la creación de páginas web, evitándole la
ardua
introducirlas
adecuadamente, lo cual muchas veces lleva a errores. De todas formas,
algunos conocimientos básicos de HTML nunca están de más, sobre
todo a la hora de introducir manualmente alguna línea de comando no
prevista por el Editor (como por ejemplo la correspondiente a un
"Contador de visitantes", la cual se verá más adelante), o para analizar
cómo se resolvió una página web que nos haya resultado interesante.
Dentro de la gama de editores de estas características se encuentran
Dreamweaver (Macromedia), quizás el más sofisticado y empleado por
los profesionales del sector, GoLive (Adobe) y FrontPage 2000, de
Microsoft. FrontPage Express, también de Microsoft, se incluye en
forma gratuita en la suite Internet Explorer, y si bien es una versión
simplificada de FrontPage 2000, es una herramienta muy útil y sencilla
para quienes deseen dar los primeros pasos en la construcción de
páginas web.
Construyendo una página web con FrontPage 2000
En realidad, el programa que usaremos en el ejemplo es sólo el
Editor de páginas web, ya que FrontPage 2000, también incluye una
muy potente herramienta para administradores de sitios Web,
denominada "Explorador de FrontPage". Sin embargo, a los efectos
del alcance de es
Crear cuenta
Comentarios de: CAPÍTULO 16: Construcción de una página para la Web (0)
No hay comentarios