1. INSTITUCIÓN DE CAPACITACIÓN FUTURO
MATERIAL EDUCATIVO AÑO 2012
TECNOLOGÍA E INFORMÁTICA
JOHN FREDY ORTIZ
- Introducción al lenguaje HTML (que es el lenguaje HTML, que se necesita,
primera página, como se guarda)
¿Qué es el HTML?
El HTML ( HiperTextMarkupLanguage ) es el lenguaje utilizado para representar
documentos en la WWW (World Wide Web). Además de texto normal incluye también,
elementos multimedia (gráficos, vídeo, audio) y existen enlaces (links) que permiten saltar
a otras partes del documento o a otro sitio cualquiera de Internet.
Otra característica muy importante de este lenguaje es que es portable, es decir, se
pueden visualizar las páginas con cualquier sistema operativo y, por supuesto también
crearlas.
En la actualidad (noviembre 1999), Netscape y Microsoft siguen sin ponerse de acuerdo
en el estándar del lenguaje. Microsoft ha asumido las directrices del ww3, pero no así
Netscape, que implementa etiquetas propias, de modo que las páginas no se visualizan igual
en el Navigator y en el Explorer.
Las etiquetas constituyen la filosofía de este lenguaje. Por medio de ellas se pueden
controlar los elementos tipográficos del texto: tipo, color y tamaño de las fuentes, el estilo (
negrita, cursiva, etc ), así como también la inclusión de tablas, listas, formularios, la
inserción de fotos, sonidos, fondos, los enlaces mencionados anteriormente. etc.
Las etiquetas se pueden modificar por medio de sus atributos, éstos son del tipo
atributo="valor" y se colocan detrás del nombre de la etiqueta
El nombre de la etiqueta y sus atributos se colocan entre los símbolos < y > y
normalmente se usan dos, una de inicio y otra final, para conseguir el efecto deseado.
Por ejemplo si escribimos
<FONT COLOR="#ff0000" size="2">El texto se verá rojo y en tamaño un poco menor de
lo normal </font>
Se verá como El texto se verá rojo y en tamaño un poco menor de lo normal
El uso de estas etiquetas, y por ende el aprendizaje del HTML, no es difícil.
Precisamente el objetivo de esta pequeña guía es servir de introducción y referencia de las
características más usadas del HTML
¿Cómo empiezo a escribir HTML?

2. Para comenzar tan sólo necesitas un editor de texto para escribir las páginas y un
navegador para visualizarlas.
El editor no debe formatear el texto. Usa el Bloc de notas ( Notepad ) en Windows 95 o
98. Se carga muy rápido y además es el programa que se abrirá por defecto desde el
navegador.
Las etiquetas y sus atributos se pueden escribir en mayúsculas o minúsculas. El lenguaje
ignora, también, los espacios en blanco seguidos, donde sólo cuenta uno de ellos.
Una vez que hayas escrito una página, guárdala en un fichero con extensión .htm o .html.
Cuando hagas doble click sobre él se abrirá el navegador y te mostrará la página.
Para ver el contenido de los ficheros anteriores (los acabados en htm o html ) con el Bloc
de notas puedes crear un acceso directo al mismo en la carpeta "SendTo" del directorio
"Windows" y te aparecerá como opción en "Enviar a " cuando hagas click con el botón
dereho del ratón sobre el fichero.
Otro modo es abrir el fichero con el Explorer y luego, con el cursor colocado sobre el
texto (no sobre imágenes) pulsar el botón derecho y elegir "Ver código fuente". En el
Comunicator también se puede "Ver el origen" pero en un visor propio que no permite
modificar el texto
Ten cuidado con el nombre de los ficheros, pues los servidores donde se alojan las
páginas sí distinguen mayúsculas de minúsculas y no es lo mismo Inicio.htm que inicio.htm
¿Qué necesito para crear una página Web?
Lo primero que debes tener claro es qué contenidos va a tener tu página. Por ejemplo, si
vas a hacer una página sobre tu Instituto, ¿qué vas a poner?: las enseñanzas que se cursan,
los proyectos que estáis llevando a cabo, un poco de historia del pueblo o ciudad donde esté
enclavado el centro, las actividades extraescolares que realiza el centro, etc.
Una vez decidido esto ¿qué necesitas?. De entrada, el doble de tiempo que calcules para
realizarla. Además necesitarás:
Un navegador. Aunque hay más, parece que el Explorer y el Netscape son los mejores.
Un editor de Html (que bien puede ser el que viene con los navegadores) o bien
escribir todo el código a mano.
Hacer las fotos que vas a poner y escanearlas ( esto suele llevar bastante tiempo si no
se ha hecho antes) Puedes hacerlo en el CPR.
Un programa gráfico para retocar las imágenes, mira en la página de imágenes.
Espacio en un servidor que albergue la página. Si tienes cuenta en el PNTIC puedes
subir unos 250 KB, que son suficientes para una página sencilla
Un programa para subir la página al servidor, puede ser el WS_FTP que localizarás en
http://www.ipswitch.com
Dar de alta la página en algunos buscadores (Alta Vista, Olé, etc) y también en el
PNTIC si la página está relacionada con la educación. Si no haces esto, solamente podrán
visitar tu página quienes conozcan la dirección exacta.
Y sobretodo bastante tiempo para el mantenimiento de la página: comprobar los enlaces,
actualizar las fotos, el contenido, etc.

3. - Estructura de una página web.
Toda página Web tiene una estructura que permite al programador saber de antemano qué tipo
de información necesita introducir. Esto ayuda a que la página que diseña sea claramente legible y
se pueda modificar más fácilmente. Si una página Web es complicada en su diseño, habrá muy
pocos que sepan dar el mantenimiento adecuado. Abajo se muestra la estructura lógica de una
página Web.
<HTML>
<HEAD>
<TITLE>Primerapágina</TITLE>
</HEAD>
<BODY>
...
...
...
</BODY>
</HTML>
Estas líneas son permanentes en una página Web. Siempre van a estar presentes no
importando qué tan corta o tan larga sea la página y el contenido.
La primera instrucción <HTML> indica al explorador de Internet que ahí comienza una
página Web. La siguiente instrucción <HEAD> indica el encabezado de la página, es decir
el área de la barra de título. <TITLE> indica el título de la página propiamente dicho.
<BODY> es una instrucción que indica al explorador de Internet que ahí empieza el área de
contenido de la página (es decir el cuerpo de la página).
En el lenguaje HTML, muchas instrucciones se cierran con el signo / (diagonal) para
indicar al programa que las propiedades aplicadas con esa instrucción se terminan ahí
donde se pone el signo diagonal. Si el signo de cierre (/) no se aplica convenientemente, el
programa seguirá aplicando las propiedades de la instrucción anterior a todas las líneas
inferiores, hasta que se encuentre otra instrucción que modifique las propiedades actuales.
Las etiquetas de texto TextTags especifican atributos que se pueden aplicar a un rango de
texto en un buffer de texto. Cada buffer de texto TextBuffer tiene una tabla de etiquetas de
texto TextTagTable que contiene las etiquetas de texto TextTags que se pueden aplicar

4. dentro del buffer TextBuffer. Las tablas de etiquetas de texto TextTagTable se pueden
usar en más de un buffer de texto para ofrecer estilos de texto consistentes.
13.6.1. Etiquetas de Texto
Las TextTags (Etiquetas de Texto) pueden tener nombre o ser anónimas. Una TextTag se
crea usando la función:
tag = gtk.TextTag(name=None)
Si el name (nombre) no se especifica o si es None la tag (etiqueta) será anónima. Las
TextTags también se pueden crear usando el método de TextBuffercreate_tag() que
también te permite especificar los atributos y añade la etiqueta a la tabla de etiquetas del
buffer (veáse la subsección TextBuffer).
Los atributos que pueden aparecer en una TextTag son:
Lectura /
name Nombre de la etiqueta de texto. None si es anónima.
Escritura
background Escritura Color de fondo como una cadena de texto
foreground Escritura Color de frente como una cadena de texto
background- Lectura /
Color de fondo como un GdkColor
gdk Escritura
foreground- Lectura /
Color de frente como un GdkColor
gdk Escritura
background- Lectura / Bitmap a usar como una máscara cuando se dibuje el texto de
stipple Escritura fondo
foreground- Lectura / Bitmap a usar como una máscara cuando se dibuje el texto de
stipple Escritura frente
Lectura / Descripción de la fuente como una cadena de texto, por ejemplo,
font
Escritura "Sans Italic 12"
Lectura /
font-desc Descripción de la feunte como un objeto PangoFontDescription
Escritura
Lectura / Nombre de la familia de la fuente, por ejemplo, Sans, Helvetica,
family
Escritura Times, Monospace
Lectura / Estilo de la fuente como un PangoStyle, por ejemplo,
style
Escritura pango.STYLE_ITALIC.
Lectura / Variante de la fuente como un PangoVariant, por ejemplo,
variant
Escritura pango.VARIANT_SMALL_CAPS.
Lectura / Peso de la fuente como un entero, mira los valores predefinidos
weight
Escritura en PangoWeight; por ejemplo, pango.WEIGHT_BOLD.
stretch Lectura / Estrechamiento de la fuente como un PangoStretch, por ejemplo,

5. Escritura pango.STRETCH_CONDENSED.
Lectura /
size Tamaño de fuente en unidades Pango.
Escritura
Lectura /
size-points Tamaño de fuente en puntos
Escritura
Tamaño de fuente como un factor de escala relativo al tamaño de
fuente predeterminado. Esta propiedad se adapta a los cambios
Lectura /
scale en el tema, etc, por tanto se recomienda su uso. Pango tiene
Escritura
algunos valores predefinidos tales como
pango.SCALE_X_LARGE.
pixels-above- Lectura /
Píxeles de espacio blanco por encima de los párrafos
lines Escritura
pixels-below- Lectura /
Píxeles de espacio blanco por debajo de los párrafos
lines Escritura
pixels-inside- Lectura /
Píxeles de espacio blanco entre las líneas de un párrafo
wrap Escritura
Lectura /
editable Si el texto puede modificarse por el usuario
Escritura
Lectura / Si las líneas no se ajustan, se ajustan en limites de palabra o se
wrap-mode
Escritura ajustan en limites de caracteres
Lectura /
justification Justificación izquierda, derecha o central
Escritura
Lectura / Dirección del Texto, por ejemplo, derecha a izquierda o
direction
Escritura izquierda a derecha
Lectura /
left-margin Ancho del márgen izquierdo en píxeles
Escritura
Lectura /
indent Cantidad de indentado para los párrafos, en píxeles
Escritura
Lectura /
strikethrough Si hay que tachar el texto
Escritura
Lectura /
right-margin Ancho del márgen derecho en píxeles
Escritura
Lectura /
underline Estilo de subrayado para este texto
Escritura
Lectura / Desplazamiento del texto por encima de la línea base (por
rise
Escritura debajo de la línea base si es negativo) en píxeles
background- Lectura / Si el color de fondo rellena la altura completa de la línea o sólo
full-height Escritura la altura de los caracteres marcados
Lectura / El idioma en el que está el texto, como un código ISO. Pango
language
Escritura puede usar esto como una ayuda para visualizar el texto. Si no

6. entiendes este parámetro, probablemente no lo necesitas.
Lectura /
tabs Tabulaciones personalizadas para el texto
Escritura
Lectura /
invisible Si el texto está oculto. No implementado en GTK 2.0
Escritura
Se pueden establecer los atributos con este método:
tag.set_property(name, value)
Donde name es una cadena de texto que contiene el nombre de la propiedad y value es el
valor que se le va a poner.
De la misma forma, el valor de un atributo se puede recuperar con el método:
value = tag.get_property(name)
Ya que la etiqueta no tiene un valor para cada atributo hay una serie de propiedades
booleanas que indican si el atributo ha sido establecido:
background-set Lectura / Escritura
foreground-set Lectura / Escritura
background-stipple-set Lectura / Escritura
foreground-stipple-set Lectura / Escritura
family-set Lectura / Escritura
style-set Lectura / Escritura
variant-set Lectura / Escritura
weight-set Lectura / Escritura
stretch-set Lectura / Escritura
size-set Lectura / Escritura
scale-set Lectura / Escritura
pixels-above-lines-set Lectura / Escritura
pixels-below-lines-set Lectura / Escritura
pixels-inside-wrap-set Lectura / Escritura
editable-set Lectura / Escritura
wrap-mode-set Lectura / Escritura
justification-set Lectura / Escritura
direction-set Lectura / Escritura
left-margin-set Lectura / Escritura

7. indent-set Lectura / Escritura
strikethrough-set Lectura / Escritura
right-margin-set Lectura / Escritura
underline-set Lectura / Escritura
rise-set Lectura / Escritura
background-full-height-set Lectura / Escritura
language-set Lectura / Escritura
tabs-set Lectura / Escritura
invisible-set Lectura / Escritura
Por tanto, para obtener el atributo de una etiqueta, primero tienes que comprobar si el
atributo ha sido establecido en la etiqueta. Por ejemplo, para obtener un valor correcto de
justificación tienes que hacer algo así como:
iftag.get_property("justification-set"):
justification = tag.get_property("justification")
La prioridad predeterminada de una etiqueta es el orden en el que se añade a la
TextTagTable. Las etiquetas con prioridad más alta tienen preferencia si hay múltiples
etiquetas para establecer el mismo atributo para un rango de texto. La prioridad se puede
obtener y fijar con los métodos:
priority = tag.get_priority()
tag.set_priority(priority)
La prioridad de una etiqueta debe estar entre 0 y uno menos del tamaño de la
TextTagTable.
Tablas de Etiquetas de Texto
Una TextTagTable (Tabla de Etiquetas de Texto) se crea al crear un TextBuffer .
También se puede crear una TextTagTable con la función:
table = TextTagTable()
Se puede añadir una TextTag (Etiqueta de Texto) a una TextTagTable usando el método:
table.add(tag)
La etiqueta tag no puede estar ya en la tabla y no puede tener el mismo nombre que otra
etiqueta en la tabla.
Es posible buscar una etiqueta en una tabla con el método:

8. tag = table.lookup(name)
Este método devuelve la etiqueta tag en la tabla que tenga el nombre name o None si no hay
ninguna etiqueta con ese nombre.
Se puede borrar una TextTag de una TextTagTable con el método:
table.remove(tag)
El tamaño de la TextTagTable se puede consultar con el método:
size = table.get_size()
- Etiqueta body (fondo de página, ubicación de archivos)
Todo lo que necesitamos que se vea en nuestra pagina web deberemos escribirlo dentro de
la etiqueta body. Eso es lo que llamamos el “cuerpo” del documento. Es la parte visible. La
etiqueta body también podemos personalizarla para darle el aspecto que nosotros deseemos.
Esta personalización la conseguimos a través de una serie de parámetros que a continuación
le presentaremos.
Color de fondo: bgcolor. El primer parámetro que debe conocer es el del color de fondo,
el “bgcolor”. A través de este parámetro podremos definir el color de fondo que
necesitamos que tenga nuestra pagina. Si necesitamos que nuestra pagina quede con un
fondo rojo debemos escribir el color en ingles en este caso “red” o con el código de color
así:
<body bgcolor="#ff0000"></body>
oasi
<bodybgcolor="red"></body>

9. Imagen de fondo: background. En otras ocasiones no se necesita que la pagina tenga un
color solo de fondo, sino que tenga una imagen. En este caso debería indicarlo con la
etiqueta “background”. La etiqueta quedaría de la siguiente manera:
<bodybackground="URL"></body>
Donde dice “URL” deberemos escribir la dirección de la imagen que necesitemos que sea
nuestro fondo. Una cosa muy importante que debe saber es que si la imagen no es
suficientemente grande para rellenar toda la pagina la imagen se repetiría tanto a lo ancho
como a lo largo hasta llenar todo el espacio.

10. Color de texto: text. Una ves tenemos el fondo definido, tendremos que predefinir ahora el
color del texto de nuestra web. Indicar al navegador de que color necesitamos que sea
nuestro texto. Esto lo definiremos con el parámetro “text”. Como ejemplo vamos a poner
que queremos que nuestro texto sea negro, con lo que escribiremos lo siguiente:
<bodytext="#000000"></body>
Margenes: leftmargin, topmargin, rightmargin y bottommargin. Ya sabemos de que
color sera nuestro fondo y nuestro texto, pero también podemos predefinir los margenes de
nuestra pagina web para que nos quede mucho mejor. Porque no queremos que nuestro
texto se quede muy pegado a los margenes.
Para especificar los margenes utilizaremos el parámetro “margin”, con su correspondiente
indicación delante. Asi encontraremos “leftmargin” para el margen izquierdo, “topmargin”
para el margen de arriba, “rightmargin” para el margen de la derecha y “bottommargin”
para el margen de abajo. Si queremos que nuestros margenes sean de 10 pixeles por todas
parte escribimos lo siguiente:
<body leftmargin="10px" topmargin="10px" rightmargin="10px"
bottommargin="10px"></body>
Color de links: link, alink y vlink. En body también podemos definir el color de los
vínculos de nuestra pagina, definir el color con el que se mostraran los links. Aqui debemos
diferenciar tres tipos de instrucciones: Debemos definir el color del link(con la etiqueta
“link”), el color del link activo (con la etiqueta “alink”), y el color del link visitado (con la
etiqueta “vlink”).
<body link=""#ff0000 alink="#ff0000" vlink="#0000ff"></body>

11. - Etiquetas para listas (lista ordenada, con viñetas, de definición)
Junto con los párrafos y los encabezados, las listas son uno de los elementos HTML más
comúnmente usados en las páginas web. Tras este capítulo sabremos, no sólo crear listas,
sino crear varios estilos de estas, una para cada ocasión. Y no tardaremos en ponerlas en
práctica ya que al final del capítulo crearemos la segunda página de la cual podemos ver un
anticipo en la figura 4.1.
Figura 4.1. En esta figura podemos apreciar la presentación de la segunda práctica del
curso que realizaremos al final del capítulo.
Una lista, o listado, es una enumeración de dos o más elementos y suelen disponerse de tal
forma que se facilite la distinción entre ellos.
El lenguaje HTML define los siguientes tipos de listas:
Numerada u ordenada.
No ordenada.
Listas de glosario o de definición.

12. Menús.
Usadas con párrafos cortos.
Listas de directorio.
Pronto sabremos como crear cada una de ellas y cuando es conveniente usar una u otras, y
comprobaremos, una vez más, la gran sencillez del lenguaje HTML una vez nos hemos
habituado a él.
1.1. Etiquetas necesarias para crear listas
La forma de crear listas difiere ligeramente de los elementos HTML vistos hasta ahora, ya
que consta de dos pasos. Primero hay que definir el tipo de lista y después deben insertarse
cada uno de los elementos de lista.
Al crear una lista deberemos indicar su inicio y su fin. Para empezar la lista usaremos la
instrucción de inicio de la etiqueta de esa lista. Existe una etiqueta para cada tipo distinto de
lista, por ejemplo, para crear una lista no ordenada será necesario usar la etiqueta UL (su
instrucción de inicio será <UL>). Una vez hemos abierto la lista deberemos insertar, como
hemos dicho antes, cada uno de los elementos de lista. Para ello usaremos una nueva
etiqueta (o dos en algún caso) que dependerá del tipo de lista. En el caso de la lista no
ordenada los elementos se introducen con la etiqueta de una única instrucción LI, por
ejemplo:
Yo practico:
<UL>
<LI>Fútbol
<LI>Baloncesto
<LI>Tenis
<LI>etc.
</UL>
En la figura 4.2 podemos ver como muestra Internet Explorer este código
Figura 4.2. Como aperitivo mostramos una lista no numerada en la que ya se pueden
apreciar las características fundamentales que tienen en HTML.

13. El último paso, que ya hemos anticipado en este ejemplo, será cerrar la lista, para lo cual
usaremos la instrucción de fin de UL: </UL>.
Y a todo esto, ¿dónde está la diferencia?. Pues bien, la diferencia es la etiqueta LI (En otras
listas se usará también LI o alguna etiqueta similar, como luego veremos). La etiqueta UL
no tiene ningún significado por sí sola, necesita a LI. Y por otro lado LI no puede ser usada
como una etiqueta independiente sino que debe ir dentro de UL. Por esta razón en
ocasiones se suele llamar a LI subetiqueta.
Algunos navegadores permiten el uso de <LI>fuera de ninguna lista como si se tratara
de una etiqueta independiente. Estos navegadores mostrarán el elemento de lista como
si fuese perteneciese a una lista no numerada pero sin sangrado. Sin embargo esta
forma de usar <LI>no está admitida por el estándar y por tanto no es recomendable si
queremos que todos los navegadores entiendan nuestras intenciones.
Antes de comenzar haremos un comentario más. La etiqueta <LI> tiene instrucción de fin
(</LI>) que delimita el final del elemento de lista actual, pero es opcional usarla o no. Si
no se hace se considera que el elemento termina cuando empieza el siguiente o cuando
termina la lista. De hecho algunos navegadores al interpretar el código HTML ignoran
completamente esta instrucción y sólo entienden que el elemento de lista ha terminado
cuando se empieza otro o se acaba la lista.
Vista la teoría nos adentramos en los distintos tipos de listas en las que veremos varios
ejemplos prácticos.
1.2. Listas no ordenadas
Probablemente el tipo de listas más usados en las páginas web son las listas no ordenadas.
Como hemos adelantado antes a modo de ejemplo, este tipo de lista queda delimitada por la
etiqueta <UL>...</UL> (UL proviene de UnorderedList, que significa lista no ordenada).

14. Dentro de estas etiquetas insertaremos cada elemento con la etiqueta <LI>. Veamos un
ejemplo ligeramente más completo que el anterior:
Mi ordenador tiene las siguientes características:
<UL>
<LI>Procesador Pentium 166
<LI>CD-ROM 8x
<LI>Tarjeta de sonido 16 bits
<LI>Tarjeta de vídeo con 2 Mb
</UL>
En la figura 4.3 podemos ver como muestra esta lista el navegador Explorer. Vemos que
está ligeramente sangrada hacia la derecha y con un símbolo gráfico para distinguir cada
elemento de lista, este símbolo recibe el nombre de viñeta.
Figura 4.3. Los elementos de las listas no numeradas van precedidos de una viñeta. En
Explorer esta viñeta es habitualmente un punto grande.
En la figura 4.4 vemos como a falta de viñetas gráficas Lynx diferencia cada elemento con
un asterisco (*).
Figura 4.4. Lista no ordenada en Lynx. Cada uno de los elementos de lista comienza
con un asterisco simulando a los símbolos gráfico que usan Netscape o Explorer.

15. 1.3. Listas ordenadas
Este tipo de listas numera los elementos de lista en el orden en el que se han introducido en
el código HTML. La numeración se realiza con números empezando por el 1.
Las últimas extensiones de HTML permiten elegir entre distintos tipos de numeración
para las listas ordenadas. Estas extensiones serán cubiertas en un capítulo posterior.
Este tipo de listas queda delimitado por la etiqueta <OL>...</OL>(OL: OrderedList, Lista
ordenada), y cada elemento se inserta, al igual que en el caso de listas no ordenadas, con la
etiqueta <LI>.
En la figura 4.5 vemos un ejemplo de uso de listas ordenadas
Figura 4.5. En las listas ordenadas cada uno de los elementos de lista aparecen
numerados y sangrados hacia la derecha.
que se corresponde con el siguiente código:

16. Un buen equipo adaptado a las nuevas tecnologías consta de:
<OL>
<LI>CPU rápida
<LI>Impresora a color de buena definición.
<LI>Altavoces y cámara de vídeo.
<LI>Módem de velocidad 28K o superior.
</OL>
El navegador automáticamente numera los elementos de lista. Si en algún momento
queremos insertar un nuevo elemento entre los existentes usando, de nuevo, <LI>, se realiza
automáticamente una renumeración de los elementos de la lista. Tal y como podemos ver
en la figura 4.6.
Figura 4.6. Cuando insertamos un nuevo elemento de lista en una lista ordenada los
elementos siguientes son automáticamente renumerados.
que se corresponde con este código:
Un buen equipo adaptado a las nuevas tecnologías consta de:
<OL>
<LI>CPU rápida
<LI>Impresora a color de buena definición.
<LI>Altavoces y cámara de vídeo.
<LI>Escaner color
<LI>Módem de velocidad 28K o superior.
</OL>
En el navegador Lynx las listas numeradas se muestran como vemos en la figura 4.7.

17. Figura 4.7. En el caso de las listas numeradas la diferencia entre la visualización con
Lynx y con Explorer es menor.
1.4. Listas de glosario
Este tipo de listas es usado, como su nombre indica, para crear glosarios, es decir listas de
definiciones o de descripciones. El principio y final de este tipo de listas se delimitan con la
etiqueta <DL>...</DL > (DL: DefinitionList, Lista de definición). La inserción de elemento
es ligeramente distinta a la del resto de listas ya que no se usa la etiqueta <<LI>>. Esto es
así porque en este caso cada uno de los elementos de lista está compuesta de dos partes:
La palabra que queremos definir: para insertar la palabra usaremos la etiqueta <DT>
que proviene de DefinitionTerm (Término de definición). Esta nueva etiqueta
funciona de forma muy similar a <LI> y la instrucción de fin (</DT>) es igualmente
optativa.
La definición o descripción de esa palabra: una vez indicada la palabra es hora de
poner su definición. Para ello usamos otra nueva etiqueta: <DD> cuyas siglas
significan DefinitionDescriptión (parte de la definición que contiene la descripción).
La definición suele ser un párrafo y será mostrado por los navegadores sangrado
con respecto al texto anterior.
En la figura 4.8 podemos ver un ejemplo de listas de glosario vistas con Internet Explorer.
Figura 4.8. Las listas de glosario constan de dos partes la palabra de definición y la
propia de definición que es mostrada como un nuevo párrafo con sangrado.

18. En la figura 4.9 se muestra la misma vista con el navegador Lynx.
- Tablas
El modelo de tablas de HTML permite a los autores organizar datos -- textos, texto
preformateado, imágenes, vínculos, formularios, campos de formularios, otras tablas, etc. --
en filas y en columnas de celdas.
Cada tabla puede tener un título asociado (ver el elemento CAPTION) que proporciona una
descripción corta del propósito de
la tabla. Se puede proporcionar también una descripción más larga (por medio del atributo
summary) para el provecho de las personas que utilicen agentes de usuario basados en
Braille o en voz.
Las filas de una tabla pueden agruparse en secciones de encabezado, pie y cuerpo, (por
medio de los elementos THEAD, TFOOT y TBODY, respectivamente). Los grupos de filas
conllevan información estructural adicional y los agentes de usuario los pueden representar
de modo que se enfatice esta estructura. Los agentes de usuario pueden sacar partido de la
división entre encabezado, cuerpo y pie para permitir el desplazamiento de las secciones de

19. cuerpo independientemente de las secciones de cabecera y pie. Cuando se imprimen tablas
largas, se puede repetir en cada página la información de cabecera y pie que contienen los
datos de la tabla.
Los autores también pueden agrupar columnas para proporcionar información estructural
adicional de la que pueden sacar partido los agentes de usuario. Además de esto, los autores
pueden declarar propiedades de columnas al comienzo de la definición de la tabla (por
medio de los elementos COLGROUP y COL) de tal modo que se permita a los agentes de
usuario representar la tabla incrementalmente en lugar de tener que esperar a que lleguen
todos los datos de la tabla antes de empezar a representarla.
Las celdas de la tabla puede contener o bien información de "encabezado" (ver el elemento
TH) o de "datos" (ver el elemento TD). Las celdas pueden ocupar varias filas y columnas.
El modelo de tablas de HTML 4 permite a los autores dar un rótulo a cada celda de modo
que los agentes de usuario no visuales puedan comunicar más fácilmente información de
encabezado de la celda al usuario. Estos mecanismos no sólo ayudan considerablemente a
los usuarios con discapacidades visuales, sino que además permiten manejar tablas a
navegadores multi-modo sin cables con posibilidades de representación limitadas (p.ej.,
teléfonos con soporte web).
No deberían usarse tablas con la única finalidad de organizar la presentación de los
contenidos de un documento (es decir, de crear el "layout"), ya que esto puede ocasionar
problemas cuando se represente en un medio no visual. Además, al incluir gráficos, estas
tablas pueden forzar a los usuarios a hacer desplazar horizontalmente la pantalla para ver
una tabla diseñada en un sistema con una pantalla más grande. Para minimizar estos
problemas, los autores deberían usar hojas de estilo en lugar de tablas para organizar la
presentación.
- Imágenes
Sin duda uno de los aspectos más vistosos y atractivos de las páginas web es el grafismo. La
introducción en nuestro texto de imágenes puede ayudarnos a explicar más fácilmente nuestra
información y darle un aire mucho más estético. El abuso no obstante puede conducirnos a una
sobrecarga que se traduce en una distracción para el navegante, quien tendrá más dificultad en
encontrar la información necesaria.
El uso de imágenes también tiene que ser realizado con cuidado porque aumentan el tiempo
de carga de la página, lo que puede ser de un efecto nefasto si nuestro visitante no tiene una

20. buena conexión o si es un poco impaciente. Por ello es recomendable siempre optimizar las
imágenes para Internet, haciendo que su tamaño en bytes sea lo mínimo posible, para
facilitar la descarga, pero sin que ello comprometa mucho su calidad.
En este capitulo no explicaremos como crear ni tratar las imágenes, únicamente diremos
que para ello se utilizan aplicaciones como Paint Shop Pro, Photoshop o Gimp. Tampoco
explicaremos las particularidades de cada tipo de archivo: GIF, JPG o PNG y la forma de
optimizar nuestras imágenes. Un capitulo posterior al respecto será dedicado a este
menester: Formatos gráficos para páginas web.
Las imágenes son almacenadas en forma de archivos, principalmente GIF (para dibujos) o
JPG (para fotos). Estos archivos los podemos obtener desde diversas vías, como por
ejemplo nuestra cámara digital, aunque también pueden ser creados por nosotros mismos
con algún editor gráfico o pueden ser descargados gratuitamente en sitios web
especializados.
Así pues, en estos primeros capítulos nos limitaremos a explicar como insertar y alinear
debidamente en nuestra página una imagen ya creada.
La etiqueta que utilizaremos para insertar una imagen es <img> (image). Esta etiqueta no
posee su cierre correspondiente y en ella hemos de especificar obligatoriamente el paradero
de nuestro archivo gráfico mediante el atributo src (source).
La sintaxis queda entonces de la siguiente forma:
<imgsrc="camino hacia el archivo">
Para expresar el camino, lo haremos de la misma forma que vimos para los enlaces. Las
reglas siguen siendo las mismas, lo único que cambia es que, en lugar de una página
destino, el destino es un archivo gráfico.
Aparte de este atributo, indispensable obviamente para la visualización de la imagen, la
etiqueta <img> nos propone otra serie de atributos de mayor o menor utilidad, que listamos
a continuación:
Atributo alt
Dentro de las comillas de este atributo colocaremos una brevísima descripción de la imagen. Esta
etiqueta no es indispensable pero presenta varias utilidades.
Primeramente, durante el proceso de carga de la página, cuando la imagen no ha sido
todavía cargada, el navegador mostrara esta descripción, con lo que el navegante se puede
hacer una idea de lo que va en ese lugar.
Esto no es tan trivial si tenemos en cuenta que algunos usuarios navegan por la red con una
opción del navegador que desactiva el muestreo de imágenes, con lo que tales personas

21. podrán siempre saber de qué se trata el gráfico y eventualmente cambiar a modo con
imágenes para visualizarla.
Además, determinadas aplicaciones para discapacitados o teléfonos vocales que no
muestran imágenes ofrecen la posibilidad de leerlas por lo que nunca esta de más pensar en
estos colectivos.
En general podemos considerar como aconsejable el uso de este atributo salvo para
imágenes de poca importancia y absolutamente indispensable si la imagen en cuestión sirve
de enlace.
Atributos height y width
Definen la altura y anchura respectivamente de la imagen en píxeles.
Todos los archivos gráficos poseen unas dimensiones de ancho y alto. Estas dimensiones
pueden obtenerse a partir del propio diseñador grafico o bien haciendo clic con el botón
derecho sobre la imagen vista por el navegador para luego elegir propiedades sobre el menú
que se despliega.
El hecho de explicitar en nuestro código las dimensiones de nuestras imágenes ayuda al
navegador a confeccionar la página de la forma que nosotros deseamos antes incluso de que
las imágenes hayan sido descargadas.
Así, si las dimensiones de las imágenes han sido proporcionadas, durante el proceso de
carga, el navegador reservara el espacio correspondiente a cada imagen creando una
maquetación correcta. El usuario podrá comenzar a leer tranquilamente el texto sin que este
se mueva de un lado a otro cada vez que una imagen se cargue.
Además de esta utilidad, el alterar los valores de estos dos atributos, es una forma
inmediata de redimensionar nuestra imagen. Este tipo de utilidad no es aconsejable dado
que, si lo que pretendemos es aumentar el tamaño, la perdida de calidad de la imagen será
muy sensible. Inversamente, si deseamos disminuir su tamaño, estaremos usando un
archivo más grande de lo necesario para la imagen que estamos mostrando con lo que
aumentamos el tiempo de descarga de nuestro documento innecesariamente.
Es importante hacer hincapié en este punto ya que muchos debutantes tienen esa mala
costumbre de crear gráficos pequeños redimensionando la imagen por medio de estos
atributos a partir de archivos de tamaño descomunal. Hay que pensar que el tamaño de una
imagen con unas dimensiones de la mitad no se reduce a la mitad, sino que resulta ser
aproximadamente 4 veces inferior.
Atributo border
Definen el tamaño en píxeles del cuadro que rodea la imagen.

22. De esta forma podemos recuadrar nuestra imagen si lo deseamos. Es particularmente útil
cuando deseamos eliminar el borde que aparece cuando la imagen sirve de enlace. En dicho
caso tendremos que especificar border="0".
Atributos vspace y hspace
Sirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los otros
elementos que la rodean, como texto, otras imágenes, etc.
Atributo lowsrc
Con este atributo podemos indicar un archivo de la imagen de baja resolución. Cuando el
navegador detecta que la imagen tiene este atributo primero descarga y muestra la imagen de
baja resolución (que ocupa muy poco y que se transfiere muy rápido). Posteriormente descarga y
muestra la imagen de resolución adecuada (señalada con el atributo src, que se supone que
ocupará más y será más lenta de transferir).
Este atributo está en desuso, aunque supone una ventaja considerable para que la descarga
inicial de la web se realice más rápido y que un visitante pueda ver una muestra de la
imagen mientras se descarga la imagen real.
Truco: Utilizar imagenes como enlaces
Ni que decir tiene que una imagen, lo mismo que un texto, puede servir de enlace. Vista la
estructura de los enlaces podemos muy fácilmente adivinar el tipo de código necesario:
<a href="archivo.html"><imgsrc="imagen.gif"></a>
Ejemplo práctico
Resultará obvio para los lectores hacer ahora una página que contenga una imagen varias veces
repetida pero con distintos atributos.
Una de las veces que salga debe mostrarse con su tamaño originar y con un borde de 3
pixeles.
En otra ocasión la imagen aparecerá sin borde, con su misma altura y con una anchura
superior a la original
También mostraremos la imagen sin borde, con su misma anchura y con una altura
superior a la original
Por último, mostraremos la imagen con una altura y anchura mayores que las originales,
pero proporcionalmente igual que antes.

23. - Vínculos o enlaces (dentro de la página, a otra página, a páginas remotas)
Los vínculos son una parte vital del HTML y todo el concepto de World Wide Web.
Internet es considerada una red debido a cómo los vínculos conectan piezas separados de
documentos, basándose en la idea de una simple referencia potenciada por la interactividad.
Como resultado, un simple click te lleva del documento referente al mencionado en el
vínculo.
Un vínculo en un documento HTML puede ser básicamente considerado como una
referencia a otro recurso. Esta referencia establece una relación implícita entre el
documento referente y el recurso vinculado. Los vínculos pueden ser clasificados como
visuales (ubicados en el contenido del documento) u ocultos (definiendo información
relacional generalizada).
El tag HTML
El elemento HTML a puede ser usado para insertar vínculos dentro del contenido de un
documento. Esto puede ayudar a los autores a recomendar otros recursos relacionados al
documento actual que los usuarios pueden, generalmente, accesar con un simple click en el
contenido vinculado. El contenido vinculado es simplemente el contenido del elemento
HTML a (es decir, la pieza de código HTML que está ubicada entre el tag de apertura y el
de cierre). Nota que los vínculos son usualmente representados de manera diferente por los
navegadores para ayudar a los usuarios a reconocerlos.
Existen muchas formas de construir un vínculo, pero básicamente un vínculo debe contener
al menos un contenido y la dirección del recurso (definida con el atributo "href"). En el
ejemplo siguiente definiremos un vínculo básico:
Código
El <a href="http://www.htmlquick.com/es/reference/tags/a.html">tag HTML a</a> explicado
Vista
En el ejemplo anterior creamos un simple vínculo usando texto como contenido, pero
puedes vincular prácticamente cualquier cosa usando el elemento HTML a. En el siguiente
ejemplo haremos un vínculo con una porción de documento que incluye una imágen y
texto.
Código
<a href="http://tecnoincaf.webnode.es">
<imgsrc=" http://files.tecnoincaf.webnode.es/200000044-b0a85b1a23/200000571.png" alt="Logo
de INCAF" width="468" height="60" /><br />
tag HTML a
</a>

24. Vista
Nota el cierre " />" utilizado en tags vacíos para lograr la compatibilidad con XHTML.
Cuando utilizamos texto como contenido de un vínculo (de ahora en adelante nos
referiremos a este texto como, "texto ancla" o "anchor text") exista una cosa a tomar en
cuenta: el texto debe describir brevemente (como el elemento HTML title) el contenido del
recurso vinculado. Esto es algo librado a la consideración de cada autor, pero la utilización
de textos ancla descriptivos pueden proveer valiosa información a los usuarios y motores de
búsqueda (muy importante en la promoción de un sitio).
Otra cosa a considerar es que al vincular a un directorio (no a un archivo, por ejemplo,
http://www.htmlquick.com) debes agregar siempre una barra al final de la URL (por
ejemplo, http://www.htmlquick.com/). Aún cuando la mayoría de los navegadores o
servidores resuelven automáticamente este problema, es una buena práctica que sumará a
un correcto código.
El atributo target
El atributo target permite a los autores decidir dónde se cargará el recurso vinculado
mediante el elemento HTML a (por ejemplo, puede ser cargado en una nueva ventana del
navegador, en un "marco" específico si existe un "frameset", o simplemente en la misma
ventana). Esto puede resultar útil algunas veces pero también hace al código incompatible
con el estándar estricto de XHTML. si realmente quieres utilizarlo tendrás que optar por un
"Transitional DTD" (en el tag HTML !DOCTYPE).
En este ejemplo, mostramos el código para dos vínculos: el primero es abierto en una nueva
ventana y el segundo en un marco llamado "principal".
Código
<a href="http://www.url.com" target="_blank">URL</a>
<a href="http://www.url.com" target="principal">URL</a>
.- Marcos o frames
Amados u odiados, útiles o inútiles, excelentes o pésimos, los marcos son instrumentos que forman
ya parte habitual del web y que los navegadores gestionan hoy día a la perfección. Los detractores

25. de los marcos afirman la inutilidad de subdividir ulteriormente las páginas web, las cuales, en última
instancia, pueden resultar poco legibles. Otros, como yo, consideran que los marcos pueden llegar
a ser muy útiles ya que se evita cargar las mismas imágenes y se mantienen ordenados el
contenido y la estructura del sitio. Naturalmente, abusar de los marcos puede producir como
resultado pésimas impostaciones gráficas, obteniendo un efecto contrario al previsto.
Un punto en contra de los marcos es, ciertamente, su incompatibilidad con los programas de
navegación gráfica destinados a invidentes, los cuales se bloquean impidiendo la lectura de las
páginas.
Una buena solución es crear una versión con marco y una versión sin marco (como esta misma
guía ha hecho).
¿Cómo se crean los marcos?
Antes de nada, repasemos rápidamente las marcas HTML de gestión de marcos.
N2.0 Documento <FRAMESET></FRAMESET> (en lugar de
Marco <BODY>)
N2.0 altura en filas <FRAMESET (píxeló %)
ROWS=,,,></FRAMESET>
N2.0 altura en filas <FRAMESET (* = tamaño
ROWS=*></FRAMESET> relativo)
N2.0 anchura en <FRAMESET (píxeló %)
columnas COLS=,,,></FRAMESET>
N2.0 anchura en <FRAMESET (* = tamaño
columnas COLS=*></FRAMESET> relativo)
N3.0b anchura del <FRAMESET BORDER=?>
borde
N3.0b borde <FRAMESET
FRAMEBORDER="yes|no">
N3.0b color del borde <FRAMESET
BORDERCOLOR="#$$$$$$">
N2.0 Definición del <FRAME> (contenido de
marco cada uno de
los recuadros)
N2.0 documento que <FRAME SRC="URL">
se debe mostrar
N2.0 denominazione <FRAME
del frame NAME="***"|_blank|_self|
_parent|_top>
N2.0 anchura de los <FRAME MARGINWIDTH=?> (margen
márgenes izquierdo y
derecho)
N2.0 altura de los <FRAME MARGINHEIGHT=?> (margen
márgenes superior e
inferior)
N2.0 barra de <FRAME
desplazamiento SCROLLING="YES|NO|AUTO">
o no
N2.0 no <FRAME NORESIZE>
redimensionable
N3.0b borde <FRAME
FRAMEBORDER="yes|no">

26. N3.0b color del borde <FRAME
BORDERCOLOR="#$$$$$$">
N2.0 contenido en <NOFRAMES></NOFRAMES> (para
ausencia de navegadores
marco antiguos)
- Formularios
Los formularios son una característica del estándar HTML Que permite a los autores recolectar
información provista por los visitantes. Estos formularios pueden resultar útiles para reunir
información personal, de contacto, preferencias, opiniones, o de cualquier otro tipo que el autor
necesite.
Un formulario puede insertarse en un documento HTML a través del elemento HTML form que
actuará como contenedor para todos los elementos de entrada. Toda la información recolectada
por un formulario puede ser enviada a un agente procesador (un archivo conteniendo un script
hecho especialmente para procesar esta información) que usualmente va especificado en el
atributos "action". Lo que el agente procesador haga con la información y cómo la maneje es un
tema que no será tratado en este sitio ya que no pertenece al estándar HTML. Para manejar la
información de un formulario debes usar un script del lado servidor.
También puedes especificar cómo la información será enviada en el valor del atributo "method":
"post" (los datos del formulario son adjuntados al cuerpo del mismo) ó "get" (los datos del
formulario son adjuntados a la URL). Se supone que el agente procesador sabe cuál es el método
de envío del formulario.