HTML - Facultad de Ciencias Exactas y Naturales y Agrimensura

Optativa II
Material Complementario de Lectura
Computación Gráfica
Conceptos Teóricos de HTML
1. ¿Qué es HTML?
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es
decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros
documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...).
Este lenguaje es el que se utiliza para presentar información en el World Wide Web.
La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de
texto normal, enumeraciones, definiciones, citas, etc.), así como los diferentes efectos que se quieren dar
(cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se
realice por un programa especializado (como Mosaic o Netscape).
Siglas básicas:
WWW: World Wide Web (Web).
SGML: Standard Generalized Markup Language: es un lenguaje estándar para describir lenguajes de
marcas.
DTD: Document Type Definition: es un lenguaje markup específico, escrito utilizando SGML.
HTML: HyperText Markup Language: HTML es un SGML DTD. En términos prácticos, es una
colección de estilos (indicados por tags, marcas de markup) que definen los componentes variados de un
documento World Wide Web.
Creación de documentos HTML.- Para comenzar sólo es necesario:
a) Un procesador de texto: los documentos HTML están en formato de texto sencillo (también conocido
como ASCII). El procesador de texto se utiliza para escribir el documento en lenguaje HTML, que será
posteriormente interpretado por el programa navegador correspondiente, siempre que el documento esté
guardado en formato: "sólo texto".
El texto escrito tiene dos partes bien diferenciadas, el contenido de la información y el conjunto de
etiquetas del lenguaje HTML, que permiten determinar el estilo y el tipo de letra que tendrá la
presentación del documento final y que pueda ser leído por un programa cliente.
Para escribir un párrafo sin estilo específico (por defecto) no es necesario poner etiqueta alguna. Lo único
que hay que tener en cuenta es que al presentar el documento se hace caso omiso de los espacios,
tabulaciones y retornos de carro que se encuentren en el texto fuente. Por esta razón se utilizan una serie
de etiquetas que sustituyen a estos elementos.
El texto escrito no sufrirá ninguna modificación, exceptuando los acentos, la letra "ñ" y un conjunto de
caracteres especiales a los que, más adelante, se dedica un apartado.
2. Método de trabajo
En esta lección hablaremos sobre la segunda cosa imprescindible para crear documentos html.
b)Un navegador del WWW o lo que se denomina programa cliente que permite el acceso a páginas
WWW de Internet. El programa cliente permite ver una página antes de introducirla en un servidor. De
este modo, se pueden comprobar las modificaciones de las distintas páginas que se diseñan.
Con el procesador de textos se crea un fichero con un nombre al que necesariamente hay que añadirle la
extensión html. Por ejemplo: prueba.html. Si se añade algo nuevo se deben guardar los cambios antes de
visualizar el nuevo documento en el navegador.
El documento se abre con el comando Open File del menú File del programa cliente. Los cambios son
reflejados en la pantalla. Si se trabaja con el programa cliente y el procesador de textos al mismo tiempo,
activando simplemente la opción Reload se pueden comprobar los cambios efectuados.
Mgter. Raquel Petris
Facultad de Ciencias Exactas Naturales y Agrimensura
1
Optativa II
Material Complementario de Lectura
Existen ciertos programas que nos ayudan a automatizar este proceso (editores de lenguaje HTML), pero
es muy conveniente comenzar a hacerlo de manera manual para comprender bien la estructura del
lenguaje HTML.
Las etiquetas del lenguaje HTML.- El lenguaje HTML usa etiquetas o directivas (tags) para indicarle al
programa cliente de Web como mostrar el texto.
Las etiquetas están formadas por determinados caracteres metidos entre los signos <>, y con la barra </>
cuando se trata de la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <title> para abrir y </title>
para cerrar.
3. Estructura de un documento html
Un documento HTML comienza con la etiqueta <html> , y termina con </html>.
Dentro del documento hay dos zonas bien diferenciadas: el encabezamiento, delimitado por <HEAD>
y</HEAD>, que sirve para definir diversos valores válidos en todo el documento.
Y el cuerpo, delimitado por <BODY> y </BODY>, donde reside la información del documento.
<HTML>
Encabezado <HEAD>
<TITLE>Título del documento</TITLE>
</HEAD>
<BODY>
Cuerpo
Texto del documento
</BODY>
</HTML>
El elemento <TITLE> permite especificar el título de un documento HTML. Este título no forma parte
del documento en sí: no aparece, por ejemplo, al principio del documento sino que sirve como título de la
ventana del programa que la muestra.
Existen muchos otros elementos que se engloban dentro del encabezamiento pero para la estructura básica
del lenguaje html en su nivel básico no son necesarios.
El cuerpo de un documento HTML contiene el texto que, con la presentación y los efectos que se decidan,
se presentará ante el usuario. Dentro del cuerpo son aplicables todos los efectos que se van a mencionar
en el resto de esta guía. Dichos efectos se especifican exclusivamente a través de "directivas".
4. Estilos y efectos básicos
Todas las etiquetas que siguen a continuación se introducen a partir del tag <BODY>, es decir, dentro del
cuerpo del documento.
Títulos:
Mediante los títulos, en sus diferentes niveles de importancia, se puede definir el esqueleto del
documento, su estructura básica. HTML tiene seis niveles de cabeceras numeradas del uno al seis.
<H1>Mucha importancia</H1> Mucha importancia
<H2>Menos importancia</H2> Menos importancia
<H3>Mucha menos importancia</H3> Mucha menos importancia
5. Definición de bloques
Hay que tener en cuenta, como ya se ha dicho antes, que al presentar el documento se hace caso omiso de
los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente. Por esta razón se
utilizan una serie de etiquetas que sustituyen a estos elementos:
<P> y <BR>
Cuando se quiera forzar un final de línea es necesario utilizar dos directivas especiales:
<P> para marcar un fin de párrafo
Mgter. Raquel Petris
2
Facultad de Ciencias Exactas Naturales y Agrimensura
Optativa II
Material Complementario de Lectura
<BR> para un único retorno de carro
La diferencia entre ambas es que la separación de líneas que provoca <P> es algo mayor que la de <BR>,
para que los párrafos se distingan bien entre sí. Las dos directivas mencionadas se sitúan en el punto en
que se quiere poner la separación.
Ninguna de las dos directivas se cierra, sólo constan de una marca inicial. Por ejemplo:
<HTML>
<HEAD>
<TITLE>El ejemplo HTML mas sencillo</TITLE>
</HEAD>
<BODY>
<H1>Esta es una cabecera de nivel uno</H1>
Bienvenido al mundo HTML.
Este es el primer párrafo.<P>Y este es el segundo.<BR>
Fin de la página
</BODY>
</HTML>
Se trata del mínimo documento de HTML.
<PRE>
El texto preformateado (etiqueta <pre>) se aplica cuando se quiere que en la presentación final del
documento se respeten los espacios y retornos de carro que hayamos puesto en el texto fuente. Además,
se utilizará un tipo de letra de espaciado fijo, parecido al de una máquina de escribir, más pequeño que el
del texto normal. Este estilo de texto puede ser adecuado, por ejemplo, para una tabla numérica sencilla.
<BLOCKQUOTE>
Indica que un texto es una cita de otra fuente. Se suele representar con tabulaciones a izquierda y derecha
y en cursiva.
<HR>
La directiva <HR> sitúa en el documento una línea horizontal de separación. Este elemento utiliza una
serie de tamaños que se indican mediante la opción <HR SIZE=1>, <HR SIZE=2>, <HR SIZE=3> etc.
Existen seis tamaños de HR.
6. Marcado tipográfico de frases
Veamos cómo se marcan topográficamente las frases:
6.1. Negrita y cursiva
Se pueden dar también los atributos más tradicionales, negrita y cursiva:
<B>Esto en negrita</B> y <I>esto en cursiva</I>, Esto en negrita y esto en cursiva
6.2.<TT>
Se puede utilizar un tipo de letra similar al de una máquina de escribir:
<TT>Máquina de escribir</TT>
Máquina de escribir
<CENTER>
Para centrar texto (o, en general, cualquier cosa: un gráfico, por ejemplo) se usa la directiva
<CENTER>:
<CENTER>Universidad de Navarra</CENTER>
Caracteres especiales.- En el desarrollo del método de trabajo se hace referencia a las existencia de una
serie de caracteres especiales del lenguaje HTML. Esos caracteres se refieren a las vocales acentuadas y a
la letra "ñ". Existen también ciertas limitaciones relativas al uso de algunos símbolos que significan algo
en HTML, como el de menor que (<) o el signo inglés de and (llamado ampersand: &).
Se tratará primero el caso más sencillo. Existe una razón evidente que impide que se pueda escribir
ciertos símbolos directamente en un texto HTML, como por ejemplo el <, dichos símbolos tienen un
Mgter. Raquel Petris
Facultad de Ciencias Exactas Naturales y Agrimensura
3
Optativa II
Material Complementario de Lectura
significado en HTML, y es necesario diferenciar claramente cuándo poseen ese significado y cuando se
quiere que aparezcan literalmente en el documento final. Por ejemplo, < indica el comienzo de una
directiva y por ello, para que aparezca en el texto como tal hay que escribir algo que no dé lugar a
confusión, en este caso < los símbolos afectados por esta limitación y la forma de escribirlos, se
detallan a continuación:
* < (Menor que): <
* > (Mayor que): >
* & (símbolo de and, o ampersand): &
* " (comillas dobles): "
* " (interrogación de apertura): ¿ Sólo aceptan este símbolo los navegadores a partir de la versión
3.0.
Es decir, que para escribir <"> en el texto HTML original se debe poner <">
El otro caso especial se da cuando en un texto HTML se quiere escribir una eñe. Existen dos formas de
hacerlo. La primera, que es a la que obliga el estándar de HTML, consiste en utilizar entidades como las
que antes se presentaron para escribir ciertos símbolos. Las entidades comienzan siempre con el símbolo
&, y terminan con un punto y coma (;). Entre medias va un identificador del carácter que se quiere que
escribir. Las entidades necesarias en nuestro idioma son:
* á: á
* ü: ü
* é: é
*Ü: Ü
* í: í
*ñ: ñ
* ó: ó
*¿: ¿
* ú: ú
* ¡: ¡
Las vocales acentuadas se identifican añadiendo el sufijo "acute" a la vocal sin acentuar (puesto que se
trata de un acento agudo). Para la u con diéresis y la eñe se usan uml tras una u y tilde detrás una ene,
respectivamente. Para utilizar la opción Dª, se utiliza la opción: Dr.
7. Las listas
HTML permite realizar listados numerados, sin numerar y listas para definir.
7.1. Listas sin numerar
Para crear una lista sin numerar
a. Se empieza escribiendo un tag de apertura de lista <UL>
b. Se escribe el tag <LI> seguido por el término que se quiera numerar (no es necesario la etiqueta
de cierre).
c. Se termina con el tag de cierre de la lista </UL>
He aquí una lista de dos términos:
<UL>
El resultado es:
<LI>Facultades
Facultades
<LI>Institutos
Institutos
</UL>
7.2. Listas numeradas: una lista numerada (también llamada lista ordenada, de ahí la denominación de la
marca) es idéntica a una lista sin numerar, excepto que se usa<OL> en lugar de <UL>. Delante de los
términos se pone la marca<LI>, que es la misma que se utiliza en las otras listas.
El siguiente código HTML: da el siguiente formato:
<OL><LI>Facultad de Derecho
a. Facultad de Derecho
<LI>Facultad de Medicina
Mgter. Raquel Petris
Facultad de Ciencias Exactas Naturales y Agrimensura
4
Optativa II
Material Complementario de Lectura
a. Facultad de Medicina
<LI>Facultad de Ciencias</OL>
c. Facultad de Ciencias
8. Las listas de definiciones
Una lista de definición consiste en términos alternativos (abreviados como DT) y una definición
(abreviada como DD). Normalmente los browsers del web dan la definición en una nueva línea.
Ejemplo de una lista de definición:
<DL>
<DT> <B>HTML</B>:
<DD>HyperText Markup Language -- HTML es un SGML DTD. En términos prácticos, es una
colección de estilos (indicados por tags (marcas) de markup) que definen los componentes variados de un
documento World Wide Web.
</DL>
El resultado es:
HTML: HyperText Markup Language -- HTML es un SGML DTD. En términos prácticos, es una
colección de estilos (indicados por tags (marcas) de markup) que definen los componentes variados de un
documento World Wide Web.
Tanto la marca <DT> como la marca <DD> pueden contener múltiples párrafos (basta con separarlos con
las marcas indicativas de párrafo <P> ), listas, o cualquier otra información en la definición.
Comentarios.- Para incluir un comentario en un documento HTML, es decir, una aclaración que no
aparece en la presentación final del documento, se encierra el texto que formará el comentario entre los
símbolos <!-- comentario -->.
9. Enlaces y gráficos
Además de los muchos estilos y capacidades de presentación que ofrece HTML para estructurar el
documento en sí, existen varias directivas que permiten definir relaciones entre diferentes documentos y
estructurar todo un conjunto de documentos para crear una unidad lógica. La facilidad para definir este
tipo de enlaces es una de las razones de la potencia y versatilidad de HTML.
Los enlaces en HTML se expresan insertando entre la directiva <A> el objeto (que puede ser un
fragmento de texto o un gráfico) que vaya a servir como anclaje para el enlace. Por ejemplo, si se marca
con <A> un gráfico, cuando en el documento final se pulse con el ratón sobre dicho gráfico se saltará al
objeto referenciado en el enlace: otro documento, un vídeo musical, o cualquier imagen.
¿Qué es un URL? .- Para especificar de manera uniforme el objeto al que apunta el enlace, se utiliza una
forma estandarizada que se denomina URL (Uniform Resource Locator, es decir, Localizador Uniforme
de Recursos ). Un URL está formado de la siguiente manera: esquema://maquina/ruta.
El esquema es un nombre que identifica el tipo de servicio que va a proporcionarse en el destino del
enlace. La razón de esta aparente complicación es que el WWW pretende unificar el acceso a servicios de
información que previamente eran incompatibles entre sí, como ftp, gopher o telnet.
El esquema más utilizado es http, correspondiente al propio WWW (es decir, cualquier referencia a un
documento HTML debería comenzar con http://). Otros esquemas muy frecuentes son ftp, telnet, gopher o
wais.
La máquina y la ruta sirven para localizar el objeto al que apunta el enlace. La máquina es la
identificación del servidor en el cual está situado el objeto al que apunta el enlace.
La ruta es el nombre del archivo que contiene el documento en concreto, incluyendo el nombre del
subdirectorio en el que se encuentra.
La estructuración habitual de la información en un servidor de WWW suele empezar, con una página de
bienvenida (home page) que podría compararse con la portada de un periódico o revista.
El resto de la información que se puede encontrar en un servidor de WWW se distribuye a partir de ese
directorio raíz en distintos subdirectorios y archivos.
Mgter. Raquel Petris
Facultad de Ciencias Exactas Naturales y Agrimensura
5
Optativa II
Material Complementario de Lectura
10. Los enlaces
Para definir un enlace es necesario marcar con la directiva <A> el objeto del cual va a partir dicho enlace.
Dicha directiva debe incluir el parámetro HREF="URL" para especificar el destino del enlace. Es decir,
que antes del objeto elegido se debe abrir con <A HREF="URL">, y después cerrar con </A>. Por
ejemplo, si se quiere que el texto "pulse aquí para visitar la Universidad de Navarra" conduzca a la home
page de la Universidad de Navarra, se deberá escribir en el texto HTML:
<A HREF="http://www.unav.es/">Pulse aquí para visitar la Universidad de Navarra</A>
En la pantalla aparecerá un texto subrayado de color azul- es el estándar- que indica la existencia de un
link o de hipertexto que lleva a la dirección que se indica.
Enlaces dentro de la misma página.- A veces, en el caso de documentos muy extensos puede interesar dar
un salto desde una posición a otra determinada. Para esto, lo que antes se ha llamado el destino del enlace
es el sitio dentro de la página al que se quiere llegar.
Se sustituye por #marca (la palabra marca puede ser cualquier palabra). Las palabras que vayan entre las
etiquetas <A HREF="#marca"> Palabras</A> aparecerán en la pantalla en color (en forma de
hipertexto). Su estructura sería:
<A HREF="#marca"> Vea el ejemplo del enlace en una página </A>
Y en el sitio exacto a donde se quiere saltar, se debe poner la siguiente etiqueta:
<A NAME="marca">Enlace dentro de una página </A>
Por ejemplo, si se quiere saltar desde el principio del documento al final del documento se coloca la
siguiente etiqueta:
<A HREF="#final"> Pulsa para ir al final</A>
Que resulta como: Pulsa para ir al final (se puede comprobar cómo salta a la pantalla final).
Y en el final del documento se pone esta otra etiqueta:
<A NAME="final"> </A>
Ese enlace en lugar de llevar a otro documento lleva a la parte final del mismo documento.
El mismo efecto se consigue con la herramienta "Top". Utilizando el tag: <A HREF="#top"> se
consigue que se vuelva al principio de la página.
11. Los gráficos
Para incluir un gráfico en un documento HTML se utiliza la directiva <IMG>. En dicha directiva debe
incluirse un parámetro SRC="URL", con el cual se indica dónde está el fichero con el gráfico concreto
que se quiere para el documento. Esto pone a disposición una gran flexibilidad, ya que se puede
complementar el contenido del documento tanto con gráficos que se encuentren disponibles en el servidor
de WWW, como con una foto situada en un servidor de la NASA o del Ministerio de Cultura, por
ejemplo, sin que el lector final tenga por qué apreciar ninguna diferencia.
Existe alguna limitación respecto a los formatos gráficos que los programas lectores de HTML puede
interpretar sin problemas. El formato más utilizado es el GIF, que cualquier programa con capacidades
gráficas debería poder mostrar directamente (Mosaic y Netscape pueden hacerlo).
Hay un parámetro optativo de la directiva <IMG> que sirve para proponer un texto alternativo a un
gráfico. Este texto aparecerá cuando se esté usando para leer el HTML un programa sin capacidades
gráficas (por ejemplo Lynx, que sólo trabaja con texto). Se trata de alt="texto". Conviene utilizarlo
cuando los gráficos sirven como origen a hiperenlaces, porque si no los programas sin capacidades
gráficas no podrán mostrar los enlaces establecidos.
Para colocar en este punto del documento una imagen que está en el mismo subdirectorio que este
manual, en el fichero fotografia.gif, se escribe:
<IMG SRC="URL/fotografia.gif" ><P>
Los documentos de información gráfica deben optimizarse para la visualización, es decir, hay que
minimizar la tabla de colores con el fin de disminuir el tamaño que ocupan las imágenes.
Tags adicionales.- Lo anterior es suficiente para producir documentos HTML básicos. Para crear
documentos mas complejos, el HTML tiene tags para varios tipos de listas, secciones previamente
Mgter. Raquel Petris
Facultad de Ciencias Exactas Naturales y Agrimensura
6
Optativa II
Material Complementario de Lectura
creadas, citas extensas, tablas, mapas, formularios y otras utilidades. Esto entraría dentro de un nivel más
elevado en el aprendizaje del lenguaje HTML.
Otro ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo mas largo </TITLE>
</HEAD>
<BODY>
<H1>Un ejemplo mas largo </H1>
Este es un documento HTML sencillo. Este es el primer párrafo. <P>
Este es el segundo párrafo, con efectos especiales. Esta es una palabra en <I>cursiva</I>. Esta es
una palabra en <B>negrita</B>.
He aquí una imagen GIF:<P>
<IMG SRC="http://www.unav.es/iconos/cabeza.gif">. <P>
Este es el tercer párrafo, que demuestra links. He aqui un hypertext de la palabra <A
HREF="http://www.unav.es/un/infounav.html">Acerca de la Universidad de Navarra</A> a un
documento llamado:"infounav.html". <P>
<H2>Una cabecera de segundo nivel </H2>
He aquí una sección de texto que se debe mostrar como una fuente de ancho fijo:<P>
<PRE>Con diez cañones por banda,
viento en popa a toda vela no corta el mar sino vuela un velero bergantín</PRE>
<HR>
Fin del documento
</BODY>
</HTML>
12. Ejemplo
Veamos un ejemplo más largo realizado con lenguaje html.
<HTML>
<HEAD>
<TITLE>Ejemplo práctico </TITLE>
</HEAD>
<BODY>
<H1>Un ejemplo mas largo </H1>
Este es un documento HTML sencillo. Este es el primer párrafo. <P>
Este es el segundo párrafo, con efectos especiales. Esta es una palabra en <I>cursiva</I>. Esta es
una palabra en <B>negrita</B>.
He aquí una imagen GIF:<P>
<IMG SRC="http://www.unav.es/iconos/cabeza.gif">. <P>
Este es el tercer párrafo, que demuestra links. He aqui un hypertext de la palabra <A
HREF="http://www.unav.es/un/infounav.html">Acerca de la Universidad de Navarra</A> a un
documento llamado:"infounav.html". <P>
<H2>Una cabecera de segundo nivel </H2>
He aquí una sección de texto que se debe mostrar como una fuente de ancho fijo:<P>
<PRE>Con diez cañones por banda, viento en popa a toda vela no corta el mar sino vuela un
velero bergantín</PRE>
<HR>
</BODY> Fin del documento
</HTML> Final del formulario
Mgter. Raquel Petris
Facultad de Ciencias Exactas Naturales y Agrimensura
7