USANDO HTML

¿Qué es HTML?

HTML es la abreviatura de HyperText Markup Language, y es el lenguaje que

todos los programas navegadores usan para presentar información en la World
Wide Web (WWW).

Este es un lenguaje muy sencillo que se basa en el uso de etiquetas, consistentes

en un texto ASCII encerrado dentro de un par de paréntesis angulares(<..>). El
texto incluido dentro de los paréntesis nos dará una explicación de la utilidad de la
etiqueta. Así por ejemplo la etiqueta <TABLE> nos permitirá definir una tabla.

Las etiquetas podrán incluir una serie de atributos o parámetros, en su mayoría

opcionales, que nos permitirán definir diferentes posibilidades o características
de la misma. Estos atributos quedarán definidos por su nombre (que será
explicativo de su utilidad) y el valor que toman separados por un signo de igual.
En el caso de que el valor que tome el atributo tenga más de una palabra deberá
expresarse entre comillas, en caso contrario no será necesario. Así por ejemplo la
etiqueta <TABLE border=2> nos permitirá definir una tabla con borde de tamaño
2.
Como ya se ha dicho, este lenguaje estructura documentos. La mayoría de los
documentos tienen estructuras comunes (títulos, parrafos, listas...) que van a ser
definidas por este lenguaje mediante tags. Cualquier cosa que no sea una tag es parte del
documento mismo.

Este lenguaje no describe la apariencia del diseño de un documento sino que ofrece a
cada plataforma que le de formato según su capacidad y la de su navegador (tamaño de
la pantalla, fuentes que tiene instaladas...). Por ello y para no fustrarnos, no debemos
diseñar los documentos basándonos en como lucen en nuestro navegador sino que
debemos centrarnos en proporcionar un contenido claro y bien estructurado que resulte
fácil de leer y entender.

No se desespere por lo que acaba de leer. HTML tiene dos ventajas que lo hacen
prácticamente imprescindibles a la hora de diseñar una presentación web: Su
compatibilidad y su facilidad de aprendizaje debido al reducido número de tags que usa.

Básicamente, los documentos escritos en HTML constan del texto mismo del documento
y las tags que pueden llevar atributos. Esto llevado a la práctica, vendría a ser:

<tag> texto afectado </tag>

La tag del principio activa la orden y la última (que será la del principio precedida del signo
/) la desactiva. No todas las tags tienen principio y final pero esto lo veremos más adelante.

Entre otras cosas, el manejo de estas etiquetas nos permitirá:

• Definir la estructura lógica del documento HTML.

• Aplicar distintos estilos al texto (negrita, cursiva, ...).

• La inclusión de hiperenlaces, que nos permitirán acceder a otros

documentos relacionados con el actual.
 • La inclusión de imágenes y ficheros multimedia (gráficos, vídeo,
audio)

¿Qué vamos a necesitar para crear un documento HTML?

• Un procesador de textos para escribir y editar el código HTML. Este podrá

ser cualquiera que no formatee el texto, ya que el leguaje HTML está
basado en el código ASCCI. Si usamos un procesador como el Word,
tendremos que guardar el documento como "sólo texto ".

• Tambien podrá usar para escribir sus webs en un Editor Especializado para
Web como son: Php Designer 2005, Nvu, los cuales son sencillos de
manejar, livianos y que se adjuntan para ser instalados de acuerdo a la
Guia de Instalaion".

• Un navegador Web como el Explorer, Netscape, Mozilla, etc., el cual

se encargará del interpretar el código HTML de nuestro documento y
mostrárnoslo en todo su esplendor.

La secuencia de trabajo para crear nuestro documento es:

1. Con el procesador de texto crearemos el documento HTML y lo
guardaremos con el nombre que deseemos, a excepción de la extensión,
que deberá ser necesariamente .htm ó .html.

2. Para visualizar nuestro documento HTML abriremos el documento

con el programa navegador.

REGLAS DE FORMATO

Todos los navegadores usan unas reglas básicas para poder mostrar una página
web con un buen formato:

• El espacio en blanco es ignorado. Ya que un documento HTML puede

estar en cualquier tipo de fuente y además la ventana del navegador
puede ser de cualquier tamaño.

• Las etiquetas pueden ser escritas en mayúsculas o en minúsculas.

En todo caso se aconseja su escritura en mayúsculas para poder
distinguirlas del texto normal.

• Existe normalmente una etiqueta de inicio y otra de fin.

Editores y convertidores
Antes de comenzar al trabajar sobre un editor, le recomendaría que visionase el código
fuente de nuestra página principal. Todos los navegadores dan la opción de editarla
(Menú ver / Código fuente). Si visita otras páginas y visualiza su código fuente
encontrará similitudes en la forma en que están organizadas las páginas y en las tags
utilizadas.

¿Dónde hay que editar el código fuente? Pues, si usted es usuario de Windows le bastaría
con el Bloc de Notas y si utiliza Macintosh con el Simple Text. Si utiliza procesadores de
texto más potentes debe guardar sus documentos como "solo texto" ya que HTML
ignora todos los espacios en blanco. Una vez guardado convierta la extensión de texto
por la extensión html o htm (en los sistemas DOS).

Los convertidores se utilizan para tomar los archivos de un procesador de textos y

convertirlos a HTML. Pero debido a la propia limitación de este lenguaje, por muy
elegante que hagamos un documento en nuestro procesador, un convertidor no obrará
milagros y quizá acabe por crear cosas ilegibles en HTML. Además, la mayoría de los
convertidores no convierten imágenes y no automatizan los vínculos hacia los
documentos en Web debiendo corregir esto de manera manual.

A través de Internet o de revistas especializadas, usted podrá hacerse con editores y

convertidores gratuitos o de muy reducidos costes. Quizá más adelante, cuando este
acostumbrado a trabajar con HTML, puedan resultarle interesantes pero eso se lo dejo a
su futura elección. De momento, hágame caso, si quiere aprender HTML use solo un
procesador de texto simple

La etiqueta de fin contendrá el mismo texto que la de inicio añadiéndole al

principio una barra inclinada /. La etiqueta afectará por tanto a todo lo que esté
incluido entre las etiquetas de inicio y fin. No obstante, existen algunas que no
necesitan cierre, ya que en estas etiquetas se presupone su final, como por
ejemplo; <P> párrafo, <BR> salto de línea ó <IMG> inclusión de una imagen.

Veamos la siguiente tabla

Instruccion HTML Resultado

<B>Texto en negrita</B> Texto en negrita
<HI>Texto en cursiva</I> Texto en cursiva
<B><I>Texto en negrita y cursiva</B></I> Texto en negrita y cursiva

ESTRUCTURA DE UN DOCUMENTO HTML

La estructura básica de un documento HTML es la siguiente:

<HTML> Indica el inicio del documento

<HEAD> Indica el inicio de la cabecera

<TITLE> Inicio del título del documento

</TITLE> Final del título del documento

</HEAD> Final de la cabecera

<BODY> Inicio del cuerpo del documento
Instrucciones HTML
</BODY> Final del cuerpo del documento
</HTML> Final del documento

Ninguno de estos elementos es obligatorio, pudiendo crear documentos

HTML sin incluir estas etiquetas de identificación. No obstante es altamente
recomendable la construcción de páginas HTML siguiendo esta estructura, para
una buena estructuración y legibilidad del código.

Una vez que conocemos la estructura básica de un documento HTML, vamos a

crear una página HTML muy sencillita.
a. Lo primero será abrir el procesador de textos que hayamos elegido y copiar el
siguiente código

<HTML>
<HEAD>
<TITLE> Mi primera página HTML </TITLE>
</HEAD>
<BODY>
Escribiendo mi primera pagina en HTML <B>HTML</B>
</BODY>
</HTML>
b. Una vez tecleado el código, guardamos el documento como Pagina1.htm, y
procedemos a abrirlo con el navegador correspondiente. El resultado será:

Escribiendo mi primera página HTML

Cabecera

Cabecera del documento HTML <HEAD>

......
</HEAD>

En la cabecera de un documento HTML incluiremos las definiciones generales que

afecten a todo el documento, como por ejemplo el título de la página que
aparecerá en la parte superior de la ventana del navegador.

Las etiquetas <HEAD> y </HEAD> son las que van a delimitar la cabecera de
nuestro documento. Todas la etiquetas de la cabecera son opcionales, aunque se
recomienda incluir en todos nuestros documentos la etiqueta <TITLE>
correspondiente al título del documento.

Título del documento

<TITLE>..............</TITLE>

El título de nuestro documento viene especificado por las etiquetas: <TITLE> y

</TITLE> y, como ya hemos mencionado, este título es el que aparecerá en
la ventana de nuestro programa navegador. Lo normal y recomendable es que el
título guarde relación con l contenido de nuestro documento.

Cuerpo

Cuerpo del documento HTML: <BODY>

......
</BODY>

En el cuerpo de un documento HTML es donde incluiremos las distintas

instrucciones del lenguaje junto con el contenido en sí de nuestra página Web:
textos, imágenes, enlaces a otras páginas, etc..
Las etiquetas <BODY> y </BODY> son las que van a delimitar el cuerpo de
nuestro documento. Esta posee una serie de argumentos que nos van a permitir
variar las características del documento en su conjunto, como por ejemplo el color
del texto o del color de fondo de nuestra página web.

OTRO EJEMPLO
<html>

<head>
<title>Cocina Para Todos</title>
</head>

<body>
<p><b>Bienvenido,</b></p>
<p>Estás en la página <b>Comida para Todos</b>.</p>
<p>Aquí aprenderás recetas fáciles y deliciosas.</p>
</body>

</html>

Ahora guarda ese archivo con extensión .html o .htm en tu disco duro. Para ello
accedemos al menú Archivo y seleccionamos la opción Guardar como. En la
ventana elegimos el directorio donde deseamos guardarlo y colocaremos su
nombre, por ejemplo mi_pagina.html

Consejo: Utiliza nombres en tus archivos que tengan algunas normas básicas para ahorrarte
disgustos y lios.

Nuestro consejo es que no utilices acentos ni espacios ni otros caracteres raros. También te
ayudará escribir siempre las letras en minúsculas.

Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlos
descriptivos para que te aclaren lo que hay dentro. Algún caracter como el guión "-" o el guión
bajo "_" te puede ayudar a separar las palabras. Por ejemplo quienes_somos.html

Con el documento HTML creado, podemos ver el resultado obtenido a partir de un

navegador. Es conveniente, llegado a este punto, hacer hincapié en el hecho de
que no todos los navegadores son idénticos. Desgraciadamente, los resultados de
nuestro código pueden cambiar de uno a otro por lo que resulta aconsejable
visualizar la página en varios. Generalmente se usan Internet Explorer y Netscape
como referencias ya que son los más extendidos.

A decir verdad, en el momento que estas líneas son escritas, Internet Explorer
acapara la inmensa mayoría de usuarios (90% más o menos) y Netscape esta
relegado a un segundo plano. Esto no quiere decir que lo debemos dejar
totalmente de lado ya que el 10% de visitas que puede proporcionarnos puede
resultar muy importante para nosotros. Por otra parte, parece que se ha hecho
publica la intención de Netscape de desviar un poco su temática de negocios hacia
otros derroteros y abandonar esta llamada "lucha de navegadores" en la cual
estaba recibiendo la peor parte.
Pues bien, volviendo al tema, una vez creado el archivo .html o .htm, podemos
visualizar el resultado de nuestra labor abriendo dicha página con un navegador.
Para hacerlo, la forma resulta diferente dependiendo del navegador.

Si estamos empleando el Explorer, hemos de ir al barra de menú, elegir Archivo y

seleccionar Abrir. Una ventana se abrirá. Pulsamos sobre el botón Examinar y
accederemos a una ventana a partir de la cual podremos movernos por el interior
de nuestro disco duro hasta dar con el archivo que deseamos abrir.

La cosa no resulta más difícil para Netscape. En este caso, nos dirigimos también a
la barra de menú principal y elegimos File y a continuación Open File. La misma
ventana de búsqueda nos permitirá escudriñar el contenido de nuestro PC hasta
dar con el archivo buscado.

Nota: También puedes abrir el archivo si accedes al directorio donde lo guardaste. En él

podrás encontrar tu archivo HTML y verás que tiene como icono el logotipo de Netscape o el de
Internet Explorer. Para abrirlo simplemente hacemos un doble click sobre él.

Una vez abierto el archivo podréis ver vuestra primera página web. Algo sencillita
pero por algo se empieza. Ya veréis como en poco tiempo seremos capaces de
mejorar sensiblemente.

Fijaos en la parte superior izquierda de la ventana del navegador. Podréis

comprobar la presencia del texto delimitado por la etiqueta <title>. Esta es una de
las funciones de esta etiqueta, cuyo principal cometido es el de servir de
referencia en los motores de búsqueda como Altavista o Yahoo.

Por otro lado, los elementos que colocamos entre la etiqueta <body> y </body>
se pueden ver en el espacio reservado para el cuerpo de la página.

Si ahora hacéis click con el botón derecho sobre la página y elegís Ver código
fuente (o View page source) veréis como en una ventana accesoria aparece el
código de nuestra página. Este recurso es de extremada importancia ya que nos
permite ver el tipo de técnicas empleadas por otros para la confección de sus
p á g i n a s .
Con todo esto asimilado ya estamos en condiciones de adentrarnos un poco más
en la descripción de algunas de las etiquetas más empleadas del HTML.

Posible problema: Al utilizar el Block de Notas en Windows en ocasiones, aunque le digamos

que es un archivo .html, el documento se guarda como si fuera un texto y no una página web.
Lo que está pasando es que el Block de Notas tiene predeterminado guardar sus archivos con
extensión .txt y en realidad lo que está guardando en el disco duro es mi_pagina.html.txt

Para conseguir tener el control de las extensiones en el block de notas y en Windows en

general podemos acceder a MI-PC y en el menú de Ver seleccionáis "Opciones de carpeta". En
la ventana que sale pulsamos en la solapa "Ver" y nos permite deseleccionar una caja de
selección que pone algo como "Ocultar extensiones para los tipos de archivos conocidos". (Así
se hace en Win98, puede variar un poco en otras versiones de Windows.)

Con ello conseguiremos que se vea siempre la extensión del archivo con el que estamos
trabajando y que el Block de Notas nos haga caso cuando le indicamos que grabe el archivo
con otra extensión que no sea .txt

Cómo colocar párrafos y saltos de línea en páginas web. También vemos

los encabezados como párrafos que sirven de titulo.
Formatear un texto pasa por tareas tan evidentes como definir los párrafos,
justificarlos, introducir viñetas, numeraciones o bien poner en negrita, itálica...

Hemos visto que para definir los párrafos nos servimos de la etiqueta <p> que
introduce un salto y deja una línea en blanco antes de continuar con el resto del
d o c u m e n t o .

Podemos también usar la etiqueta <br>, de la cual no existe su cierre

correspondiente (</br>), para realizar un simple retorno de carro con lo que no
dejamos una línea en blanco sino que solo cambiamos de línea.

Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como <img> para
las imágenes, las veremos más adelante. Esto ocurre porque un salto de línea o una imagen no
empiezan y acaban más adelante sino que sólo tienen presencia en un lugar puntual.

Podéis comprobar que cambiar de línea en nuestro documento HTML sin introducir
alguna de estas u otras etiquetas no implica en absoluto un cambio de línea en la
página visualizada. En realidad el navegador introducirá el texto y no cambiara de
línea a no ser que esta llegue a su fin o bien lo especifiquemos con la etiqueta
c o r r e s p o n d i e n t e .

Los párrafos delimitados por etiquetas <p> pueden ser fácilmente justificados a la
izquierda, centro o derecha especificando dicha justificación en el interior de la
etiqueta por medio de un atributo align. Un atributo no es más que un parámetro
incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la
etiqueta de una forma más personal. Veremos a lo largo de este manual cantidad
de atributos muy útiles para todo tipo de etiquetas.

Así, si deseásemos introducir un texto alineado a la izquierda escribiríamos:

<p align="left">Texto alineado a la izquierda</p>

El resultado seria:

Texto alineado a la izquierda

Para una justificación al centro:

<p align="center">Texto alineado al centro</p>

que daría:
Texto alineado al centro

Para justificar a la derecha:

<p align="right">Texto alineado a la derecha</p>

cuyo efecto seria:

Texto alineado a la derecha

Como veis, en cada caso el atributo align toma determinados valores que son
escritos entre comillas. En algunas ocasiones necesitamos especificar algunos
atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio
navegador toma un valor definido por defecto. Para el caso de align, el valor por
defecto es left.

Nota: Los atributos tienen sus valores indicados entre comillas ("), pero si no los indicamos
entre comillas también funcionará en la mayoría de los casos. Sin embargo, es aconsejable que
pongamos siempre las comillas para acostumbrarnos a utilizarlas, por dar homogeneidad a
nuestros códigos y para evitar errores futuros en sistemas más quisquillosos.

El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy

comunes, que veremos más adelante, entre las cuales se introducen texto o
imágenes, suelen hacer uso de este atributo de una forma habitual.

Imaginemos un texto relativamente largo donde todos los párrafos están alineados
a la izquierda (por ejemplo). Una forma de simplificar nuestro código y de evitar
introducir continuamente el atributo align sobre cada una de nuestras etiquetas es
utilizando la etiqueta <div>.

Esta etiqueta por si sola no sirve para nada. Tiene que estar acompañada del
atributo align y lo que nos permite es alinear cualquier elemento (párrafo o
imagen) de la manera que nosotros deseemos.

Así, el código:

<p align="left">Parrafo1</p>
<p align="left"> Parrafo3</p>
<p align="left"> Parrafo2</p>

es equivalente a:

<div align="left">
<p>Parrafo1</p>
<p>Parrafo2</p>
<p>Parrafo3</p>
</div>

Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un
mismo tipo de alineado.

Ejemplo práctico:
Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que
podéis resolver en vuestros ordenadores. Simplemente queremos construir una
página que tenga, por este orden:

2 Párrafos centrados
3 Párrafos alineados a la derecha
Un salto de línea triple
1 párrafo alineado a la izquierda

No vamos a escribir en esta ocasión el código fuente del ejercicio.

Encabezados

Existen otras etiquetas para definir párrafos especiales, formateados como títulos.
Son los encabezados o Header en inglés. Como decimos, son etiquetas que
formatean el texto como un titular, para lo cual asignan un tamaño mayor de letra
y colocan el texto en negrita.

Hay varios tipos de encabezados, que se diferencian en el tamaño de la letra que

utilizan. La etiqueta en concreto es la <h1>, para los encabezados más grandes,
<h2> para los de segundo nivel y así hasta <h6> que es el encabezado más
p e q u e ñ o .

Los encabezados implican también una separación en párrafos, así que todo lo que
escribamos dentro de <h1> y </h1> (o cualquier otro encabezado) se colocará en
un párrafo independiente.

Podemos ver cómo se presentan algunos encabezados a continuación.

<h1>Encabezado de nivel 1</h1>

Se verá de esta manera en la página:

Encabezado de nivel 1
Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos
un ejemplo de encabezado de nivel 2 alineado al centro.

<h2 align="center">Encabezado de nivel 2</h2>

Se verá de esta manera en la página:

Encabezado de nivel 2

Otro ejercicio interesante es construir una página web que contenga todos los
encabezados posibles. Se puede ver a continuación.

<html>

<head>
<title>Todos los encabezados</title>
</head>

<body>
<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>

</body>

</html>

Vemos como colocar negritas, itálicas, subrayados, subíndices

y supreíndices
Además de todo lo relativo a la organización de los párrafos, uno de los aspectos
primordiales del formateo de un texto es el de la propia letra. Resulta muy común
y práctico presentar texto resaltado en negrita, itálica y otros. Paralelamente el
uso de índices, subíndices resulta vital para la publicación de textos científicos.
Todo esto y mucho más es posible por medio del HTML a partir de multitud de
etiquetas entre las cuales vamos a destacar algunas.

N e g r i t a

Podemos escribir texto en negrita incluyéndolo dentro de las etiquetas <b> y

</b> (bold). Esta misma tarea es desempeñada por <strong> y </strong> siendo
ambas equivalentes. Nosotros nos inclinamos por la primeras por simple razon de
esfuerzo.

Escribiendo un código de este tipo:

<b>Texto en negrita</b>

Obtenemos este resultado:

Texto en negrita

I t á l i c a

También en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y
otra un poco más larga: <em> y </em>. En este manual, y en la mayoría de las
páginas que veréis por ahí, os encontraréis con la primera forma sin duda más
sencilla a escribir y a acordarse.

He aquí un ejemplo de texto en itálica:

<i>Texto en itálica</i>

Que da el siguiente efecto:

Texto en itálica

S u b r a y a d o

El HTML nos propone también para
(underlined). Sin embargo, el uso
precaución dado que los enlaces
contrario, subrayados con lo que
verdadero interés de nuestro texto.
el subrayado el par de etiquetas: <u> y </u>
de subrayados ha de ser aplicado con mucha
hipertexto van, a no ser que se indique lo
podemos confundir al lector y apartarlo del

Subíndices y supraíndices

Este tipo de formato resulta de extremada utilidad para textos científicos. Las
etiquetas empleadas son:

^y para los supraíndices

_y para los subíndices

Aquí tenéis un ejemplo:

La ¹³CC₃H₄ClNOS es un
heterociclo alergeno enriquecido

El resultado:

La 13CC3H4ClNOS es un heterociclo alergeno enriquecido

Anidar etiquetas

Todas estas etiquetas y por supuesto el resto de las vistas y que veremos más
adelante pueden ser anidadas unas dentro de otras de manera a conseguir
resultados diferentes. Así, podemos sin ningún problema crear texto en negrita e
itálica embebiendo una etiqueta dentro de la otra:

<b>Esto sólo está en negrita <i>y esto en negrita e itálica</i></b>

Esto nos daria:

Esto sólo está en negrita y esto en negrita e itálica