HTML editor

¿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.

b) Un navegador del WWW o lo que se denomina programa cliente que permite el acceso a páginas WWW de Internet.

Método de trabajo

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.

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.

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".

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

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

<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 cierran, 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 parrafo.<P>Y este es el segundo.<BR>

Fin de la pagina

</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.

Marcado tipográfico de frases

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

<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 las Islas Baleares</CENTER>

Universidad de las Islas Baleares

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 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™.

Listas
HTML permite realizar listados numerados, sin numerar y listas para definir.

Listas sin numerar
Para crear una lista sin numerar

1. Se empieza escribiendo un tag de apertura de lista <UL>

2. Se escribe el tag <LI> seguido por el término que se quiera numerar (no es necesario la etiqueta de cierre).

3. 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>

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 Informatica 1. Facultad de Informatica

<LI>Facultad de Derecho 2. Facultad de Derecho

<LI>Facultad de Ciencias</OL> 3. Facultad de Ciencias

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.

He aquí un 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 .

Enlaces y gráficos

Introducción
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 raiz en distintos subdirectorios y archivos.

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 las Islas Baleares" conduzca a la home page de la Universidad de las Islas Baleares, se deberá escribir en el texto HTML:

<A HREF="http://www.uib.es/">Pulse aquí para visitar la Universidad de las Islas Baleares</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.

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/foto.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 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.

Direcciones de manuales interesantes

-Universidad de Chile: Manual de HTML:

http://www.dic.uchile.cl/~manual

-Manual básico de la Escuela Técnica Superior de Ingenieros de Telecomunicaciones de la Universidad Politécnica de Madrid.

http://www.etsit.upm.es/~alvaro/manual/manual.html

Un ejemplo más largo

<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>

Este es el tercer párrafo, que demuestra links. He aqui un hypertext de la palabra <A HREF="http://www.uib.es/">Acerca de la Universidad de las Islas Baleares</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>

QUIERES COMPROBAR LO QUE HAS APRENDIDO?, pues haz tu propia página web ahora en mi editor de Html por javascript