LM04. Lenguajes de Visualizacion. HTML

Unidad de Trabajo 4
LENGUAJES DE VISUALIZACIÓN. HTML
Contenido
1 DOM ...........................................................................................................................................................................3
2 HTML .........................................................................................................................................................................3
2.1 Estructura de los documentos HTML ..........................................................................................................4
Comentarios ...............................................................................................................................................................5
2.2 Bloques de texto ................................................................................................................................................5
2.3 Marcadores lógicos ...........................................................................................................................................8
2.4 Tipos de letra .....................................................................................................................................................9
2.5 Enlaces ............................................................................................................................................................. 11
El atributo target..................................................................................................................................................... 13
2.6 Listas ................................................................................................................................................................ 13
2.7 Imágenes .......................................................................................................................................................... 14
2.8 Tablas ............................................................................................................................................................... 15
2.9 Formularios ..................................................................................................................................................... 17
Elementos del formulario ..................................................................................................................................... 18
Las etiquetas <fieldset> y <legend> .................................................................................................................. 20
2.10 Marcos o Frames ............................................................................................................................................ 22
Estructura de marcos con dos frames................................................................................................................. 22
Estructura de marcos con tres frames................................................................................................................. 24
Atributos de la etiqueta <frameset> ................................................................................................................... 26
Atributos de la etiqueta <frame> ........................................................................................................................ 26
Ejemplos de atributos de frames ......................................................................................................................... 27
El atributo <target> de los enlaces ..................................................................................................................... 28
IFrames .................................................................................................................................................................... 28
3 Promoción de una página web ............................................................................................................................. 28
3.1 Consejos para facilitar la labor a los motores de búsqueda ..................................................................... 30
Utilizar palabras clave dentro de la etiqueta <title> ......................................................................................... 30
Lenguajes de Marcas y Sistemas de Gestión de la Información 1

UT 4. Lenguajes de visualización. HTML
Utilizar la etiqueta <meta> ................................................................................................................................... 30
Incluir un resumen del contenido de la página en el comienzo del texto ..................................................... 32
Utilizar el atributo alt en las imágenes iniciales.................................................................................................. 32
3.2 Alta en algunos motores de búsqueda ........................................................................................................ 32
Bibliografía ........................................................................................................................................................................ 32

1 DOM
Los navegadores cuentan con una jerarquía interna de objetos a partir

de la que interpretan el contenido de un documento HTML. Dicha
jerarquía y la forma en que el navegador se refiere a los objetos (la
ventana, el título, los formularios, las cajas de texto…) se conoce
como modelo de objetos de documento (DOM – Document Object
Model).
Por desgracia cada navegador construye su propio DOM, siendo

especialmente notables las diferencias entre el DOM de Microsoft
Internet Explorer y el de los navegadores basados en Netscape
Navigator. De ese modo el posicionamiento de objetos en pantalla o
el comportamiento de determinadas secciones de la página web puede
diferir si el documento HTML se visualiza en Internet Explorer o en Mozilla Firefox.
2 HTML
Basado en el lenguaje SGML, el lenguaje HTML (Hypertext Markup Language – lenguaje de marcas de
hipertexto) se utiliza para crear documentos que muestren una estructura de hipertexto permitiendo, además,
crear documentos de tipo multimedia, es decir, que contengan información más allá de la simplemente
textual:
• Imágenes
• Vídeo
• Sonido
• Subprogramas activos (plug-ins, applets)
Los documentos HTML se conforman como documentos de texto plano (sin ningún tipo de formateo
especial), en los que todo el formato del texto se especifica mediante etiquetas que empiezan por el carácter <
seguido del nombre de la etiqueta y los atributos adicionales, y acaban con el carácter >:
<etiqueta>
Las etiquetas de final de marcado incorporan una barra tras el carácter <:
</etiqueta>
En HTML las etiquetas no son sensibles a mayúsculas o minúsculas (son case insensitive).

Ejemplos de etiquetas de HTML:
<title>Nombre del documento</title>

<p>Un ejemplo de uso de las etiquetas para marcado de texto</p>
<b>Negrita<i>Itálica</i>Negrita</b>
Los atributos de las etiquetas que especifican parámetros adicionales a la etiqueta se incluyen en la etiqueta de
inicio de la siguiente forma:
<etiqueta atributo atributo...>
La forma de dichos atributos será bien el nombre del atributo o bien el nombre del atributo seguido de = más
el valor que se le quiere asignar (generalmente entrecomillado), por ejemplo:
<a href="http://www.w3c.org">Enlace</a>
<img src="imagen.jpg" border="0" alt="Nombre">
Cabe destacar que HTML permite omitir en algunos casos la etiqueta de final si no debe envolver ningún
texto al que afecte, como es el caso de img. Otro punto destacable es que si el cliente WWW que utilicemos
(el navegador concreto que estemos usando) no entiende alguna etiqueta, la ignorará y hará lo mismo con
todo el texto afectado por ésta.
2.1 Estructura de los documentos HTML

Todos los documentos HTML siguen la misma estructura. Todo el documento debe ir contenido en una
etiqueta HTML, dividiéndose en dos partes: la cabecera, contenida en una etiqueta head y el cuerpo del
documento (donde está la información del documento), que está envuelto por una etiqueta body. La cabecera
contiene algunas definiciones sobre el documento (su título, marcas extra de formato, palabras clave, etc.). Un
primer ejemplo sería:
<html>
<head>
<title>Título del documento</title>
</head>
<body>
Texto del documento
</body>
</html>
Si abrimos un documento con este contenido en un navegador apreciaremos que lo que contienen las
etiquetas title no se visualiza en el documento, sino que el navegador las muestra en la barra de título de la
ventana.

Comentarios
En HTML podemos introducir comentarios en la página con las marcas <!-- y --!>. El navegador ignora el
contenido que se encuentre entre estas dos marcas y no lo muestra al usuario.
2.2 Bloques de texto

Disponemos de diversos tipos de bloques de texto en HTML:
o Párrafos
La etiqueta <p> permite separar párrafos. Habida cuenta de que HTML ignora los saltos de línea
introducidos en el fichero original, considerando todo el texto como continuo, las marcas <p> y </p>
son el mecanismo que nos permite indicar principio y final de párrafo.
<p> admite el atributo align, que indica la alineación del texto en el párrafo, pudiendo tomar los valores:
• left alineación a la izquierda, es el activo por defecto.
• right alineación a la derecha.
• center centrado.
La marca de final de párrafo, </p>, está definida en el estándar de HTML como opcional, pudiéndose
omitir. El navegador inferirá que una nueva aparición de <p> indica el final del párrafo anterior.
o Saltos de línea
La etiqueta <br> nos indica un salto de línea. Podemos usarla como marca inicial sin final. No modifica
los parámetros especificados para el párrafo en el que nos encontremos en ese momento.
o Reglas horizontales
HTML proporciona una etiqueta que nos permite incluir en nuestra página una regla horizontal (una raya
de extremo a extremo de la página) de anchura variable. Dicha etiqueta, <hr>, se utiliza para separar
bloques de texto. Es un elemento que sólo tiene etiqueta inicial, pero que dispone de diversos atributos
para cambiar su forma:
• noshade elimina el efecto de sombreado de la regla.
• width define la longitud de la línea respecto a la página.
• size define el grosor de la línea.
o Párrafos citados
Disponemos de un elemento en HTML, <blockquote>, que permite representar párrafos citados
literalmente de otro texto. Generalmente se representan indentados a derecha e izquierda y con un salto
de párrafo antes y después del párrafo citado. Deberíamos evitar el uso de <blockquote> para indentar
texto, usándolo sólo para citas literales, pues no todos los navegadores lo interpretan de igual modo.

o Divisiones del texto en bloques

El elemento <div> permite dividir el texto en bloques, insertando entre ellos un salto de línea simple (al
igual que <br>). No obstante, a diferencia de éste, admite los mismos atributos que <p>, es decir,
podemos definir la alineación del texto para cada bloque <div>. Las alineaciones soportadas por <div>,
mediante el parámetro <align>, son las siguientes:
• left alineación a la izquierda, es el activo por defecto.
• right alineación a la derecha.
• center centrado del texto.
o Texto preformateado
El texto insertado entre las etiquetas <pre> y </pre> será visualizado por el navegador respetando el
formato de saltos de línea y espacios con el que se ha introducido. El navegador, por norma general,
mostrará dicho texto con un tipo de letra de espaciado fijo similar al de las máquinas de escribir.
Podemos ver algunas de estas etiquetas en el siguiente ejemplo:
<html>
<head>
</head>
<body>
<p align="left">
En un lugar de la Mancha, de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía un hidalgo de los de lanza en
astillero, adarga antigua, rocín flaco y galgo corredor. Una
olla de algo más vaca que carnero, salpicón las más noches,
duelos y quebrantos los sábados, lantejas los viernes, algún
palomino de añadidura los domingos, consumían las tres
partes de su hacienda.
</p>
<div align="right">
</div>
<div align="center">

</div>
<pre>
En un lugar de la Mancha,
de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía un hidalgo
de los de lanza en astillero, adarga
antigua, rocín flaco y galgo corredor.
Una olla de algo más vaca que carnero,
</pre>
<address>
Miguel de Cervantes<br>
Calle Shakespeare, 23<br>
09876, Madrid<br>
</address>
<center>
<p>
no ha mucho tiempo que vivía un hidalgo de los de lanza
en astillero,
</p>
</center>
</body>
</html>
El resultado de la visualización de este código HTML es el siguiente:

2.3 Marcadores lógicos

HTML presenta además un grupo de etiquetas que permiten dar formato al texto no en función de cómo
queremos que se represente, sino en función de la semántica de ese bloque de texto, permitiendo así al
navegador representar el texto en pantalla de la forma más conveniente. Son:
• <cite> cita literal de texto o documento.
• <address> dirección.
• <samp> ejemplo de código o resultado.
• <code> código de programa.
• <kbd> datos que deben teclearse.
• <var> definición de variable.
• <dfn> definición de texto o palabra (soporte no muy extendido entre los navegadores).
Dichas etiquetas serán formateadas de forma diferente según el navegador y la configuración que tengamos.
Como ejemplo podemos ver el aspecto que presentan en el navegador Google Chrome:
El código que ha producido este resultado es el siguiente:

<html>
<head>
</head>
<body>
<p><cite>The C Programming Language</cite>,
Ritchie, Dennis; Kernighan, Ritchie. AT&T Bell Labs.
<p> Nuestra dirección es:
<address>
10, Downing Street.
Londres.
</address>
<p>
Los ficheros que acaban con la extensión
<samp>jpg</samp> corresponden a imágenes.
<p>
<code>printf("Hello World\n");</code>
<p>Una vez entrado teclear <kbd>startx</kbd> para arrancar...
<p>Definiremos la variable <var>neigh</var> para guardar...
<p>Un <dfn>Distributed-CSP</dfn> es un problema, del ...

<p><cite>© 2003, Carles Mateu</cite>

</body>
</html>
2.4 Tipos de letra

HTML proporciona etiquetas que nos permiten modificar el tipo de letra, los colores, etc., de nuestros textos.
Además, HTML proporciona unos marcadores especiales, llamados entidades de carácter, que permiten
introducir caracteres especiales, como el símbolo de copyright, acentos y otros, para aquellos casos en los que
nuestro teclado o nuestro editor de texto no lo soportan, para cuando el juego de caracteres no lo soporta,
etc.
o Cabeceras
Disponemos de un elemento <hx> que podemos utilizar para definir qué partes de nuestro texto deben
ser consideradas como encabezados (de sección, capítulo, etc.). La etiqueta asigna un mayor tamaño de
texto a los caracteres (en función de x). Además, utiliza un tipo de letra en negrita para la cabecera e
incluye un salto de párrafo después de esta cabecera.
El tamaño de la cabecera (nivel o índice de importancia) puede variar entre 1 y 6; es decir, existen 6
posibles etiquetas: h1, h2, h3, h4, h5 y h6.
o Tipo de letra
HTML proporciona una etiqueta para gestionar la tipografía. Esta etiqueta, <font>, ha sido declarada
obsoleta en HTML 4.01, por lo que debemos evitar su uso y tratar de usar en su lugar hojas de estilo
(CSS).
Debemos utilizar esta etiqueta con mucha precaución. Al especificar tipografías debemos tener en cuenta
que quizás el cliente no tenga dicha tipografía instalada, con lo que la visión que obtendrá de la página no
corresponderá a la deseada.
Los atributos soportados por <font> y que nos permiten definir las características del tipo de letra son:
• size tamaño de los caracteres, con valores de 1 a 7 o valores relativos (-7 a +7).
• color color de los caracteres.
• face tipografía a usar. Podemos especificar más de una, separadas por comas.
El atributo size define el tamaño de letra en función del tamaño definido por defecto para el documento,
que definiremos con basefont. basefont tiene un solo parámetro, size, que nos permite definir el tamaño
base del documento.
o Estilos de letra
HTML nos proporciona un conjunto de etiquetas que permiten definir diferentes estilos de letras para el
texto contenido entre las marcas. Las etiquetas disponibles son:
•b negrita
•i itálica
•u subrayado
• strike tachado
• sup superíndice
• sub subíndice
• blink parpadeo
• tt teletipo
• big grande
• small pequeño
Además de estos tipos físicos de letra, disponemos también de algunos tipos lógicos de letra, que los
navegadores pueden preferir representar de otra forma:
• em enfatizado
• strong destacado

• code código de programa

• cite cita
• kbd entrada por teclado
• samp ejemplos
• var variables de programa
Algunos de estos estilos lógicos suponen asimismo un estilo de párrafo. Éstos ya se han estudiado
anteriormente. HTML permite mezclar diferentes estilos, como negrita y cursiva (itálica), etc. En ese caso
se anidarían las etiquetas de HTML correspondientes:
<b><i>Negrilla y cursiva</i></b>
Podemos ver el aspecto de los tipos de letras y colores en la siguiente página:
El código HTML que ha producido este resultado es el siguiente:

<html>
<head>
</head>
<body>
<h1>Cabecera H1</h1>
<b>Tamaño de letra</b> <br>
<font size="1">1</font> <font size="2">2</font>


<font size="1">1</font>
<p>
<b>Colores</b>
<font color="#800000">C</font>
<font color="#000080">O</font>
<font color="#000080">L</font>
<font color="#008000">O</font>
<font color="#00FFFF">R</font>
<font color="#FF0000">E</font>
<font color="#C0C0C0">S</font> .
<font color="#800080">D</font>
<font color="#008080">E</font> .
<font color="#FF0000">L</font>
<font color="#808080">E</font>
<font color="#FF00FF">T</font>
<font color="#00FF00">R</font>
<font color="#808000">A</font>
<font color="#FFFF00">S </font>
<p>
<b>Negrilla</b> <br>
<i>Cursiva</i> <br>
<u>Subrayado</u><br>
<strike>Tachado</strike><br>
A<sup>Superíndice</sup> <br>
B<sub>Subíndice</sub><br>
<blink>Parpadeo</blink> <br>
<tt>Máquina de escribir(Teletipo)</tt><br>
<big>Texto grande</big> <br>
<small>Texto pequeño</small>
</body>
</html>
o Entidades de carácter
HTML proporciona una serie de códigos especiales, llamados entidades de carácter, que permiten
introducir caracteres poco usuales o dependientes de la lengua local, como acentos, diéresis, símbolos
especiales, etc. Además, podemos introducir cualquier carácter de la tabla de caracteres de ISO-Latin1 con
una entidad de carácter especial.
Código Resultado
á, Á, é,... á, á, é, é,...
Á,... Á,…
Ü, ü Ü, ü
Ñ, ñ Ñ, ñ
¿ ¿
¡ ¡
º º
ª ª
™ o Símbolo de TradeMark
© Símbolo de Copyright
® Símbolo de Registrado
Espacio en blanco
< <
> >
& &
" "
2.5 Enlaces
Una de las características más destacadas y de mayor influencia en el éxito de la web ha sido su carácter de
hipertexto, es decir, la posibilidad de que podamos enlazar documentos que pueden residir en diferentes
servidores de forma intuitiva y transparente. Cabe destacar que los enlaces no sólo llevan a páginas web, sino
también a imágenes, audio, vídeo, etc.
Para realizar los enlaces disponemos de una etiqueta <a> que, con su conjunto de atributos name, href y
target, nos permite un total control a la hora de crear enlaces en los documentos.

Disponemos de cuatro tipos de enlaces principales:

• Enlaces dentro de la misma página.
• Enlaces a otras páginas de nuestro sistema.
• Enlaces a páginas de otros sistemas.
• Enlaces a documentos consultados a través de otros protocolos (correo electrónico, etc.).
Para crear un enlace utilizaremos la etiqueta <a> con el atributo href. Como valor de dicho atributo
pasaremos el destino del enlace:
<a href="destino">Texto o imagen</a>
El contenido de la etiqueta se considerará como especial. Será visualizado de forma diferente por el
navegador (generalmente subrayado). Al pulsar sobre él saltaremos al destino indicado por el valor del
atributo href, que suele ser una URL (Uniform Resource Locator – localizador uniforme de recurso, típicamente
una dirección web). Dicha URL nos indica un servicio que deseamos obtener o un recurso al que deseamos
acceder.
El formato de las URLs es el siguiente:

servicio://usuario:password@servidor:puerto/rutarecurso
Existen diversos servicios que podemos indicar en la URL y que serán aceptados por la mayoría de
navegadores:
• http Indica el servicio de transferencia de páginas web y es el usado habitualmente.
• https Servicio HTTP seguro y cifrado.
• ftp Protocolo de transferencia de archivos FTP. Si no indicamos usuario y contraseña, se
intentará la transferencia anónima. En caso de que ésta no fuese aceptada, se nos pediría
usuario y contraseña.
• mailto Indica que se debe enviar un correo electrónico a la dirección especificada.
• news Acceso al servicio de News USENET.
Algunos ejemplos de URL son:

http://www.uoc.edu
https://www.personales.co/usuarios/carles/indice.html
ftp://usuario:secreto@ftp.cesca.es/pub/linux
mailto:destino@correo.electroni.co
news://noticias.uoc.edu/es.comp.os.linux
Una de las posibilidades que nos ofrece HTML consiste en saltar a destinos concretos dentro de una página.
Para ello debemos definir en la página los destinos con nombre (anchors o anclas). Para realizar dicha
definición disponemos del atributo name de la etiqueta <a>:
<a name="ancla">
Una vez definidas las anclas dentro de nuestros documentos, podemos navegar e ir directamente a ellas. Para
navegar a estas anclas usaremos una extensión de la URL.
<a href="http://www.uoc.edu/manual.html#ancla">Enlace</a>
Si el enlace estuviera dentro de la misma página, podríamos abreviar la dirección con:

<a href="#ancla">Enlace</a>

El atributo target
Puede tomar cinco valores distintos:
• _blank Abre el documento vinculado en una ventana nueva del navegador.

• _parent Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el
conjunto de marcos padre.
• _self Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana
que el vínculo.
• _top Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que
los marcos de la ventana desaparecerán al abrir el vínculo en ella.
• marco Ver apartado "El atributo target de los enlaces" del punto 2.10.
2.6 Listas
HTML nos permite definir listas y enumeraciones de tres tipos principales:
o Listas no ordenadas
Para introducir listas no ordenadas disponemos del par de etiquetas <ul></ul>, que delimita la lista, y
del par <li></li>, que delimita cada uno de los elementos de la lista. Disponemos además de un atributo
type que nos indica el marcador a utilizar para señalar los diferentes elementos: disc, circle, square.
o Listas ordenadas (numeradas)

El funcionamiento de las listas ordenadas es muy similar al de las listas no ordenadas. Para éstas
disponemos del par de etiquetas <ol></ol>, que delimitan la lista, y del par <li></li> que nos indica
cada uno de los elementos de la misma. Disponemos, además, de un atributo type que nos indica el
marcador a utilizar para enumerar los diferentes elementos:
• type="1" Números (la elegida por defecto)

• type="A" Letras mayúsculas
• type="a" Letras minúsculas
• type="I" Numeración romana en mayúsculas
• type="i" Numeración romana en minúsculas
Disponemos también de un atributo start que nos indica en qué punto debe comenzar la numeración de
la línea. El atributo type también puede usarse en los elementos individuales.
o Listas de definiciones
Una lista de definiciones es una lista no numerada que nos permite dar una descripción o definición de
cada elemento. Las listas descriptivas están formadas con las etiquetas: <dl> y </dl> para definir la lista,
<dt> para indicar el término que hay que definir y <dd> para indicar la definición. <dl> dispone de un
atributo, compact, que indica al navegador que muestre la lista de la forma más compacta posible,
incluyendo el término y su definición en la misma línea.
Podemos ver diferentes ejemplos de listas de HTML:


<html>
<head>
</head>
<body>
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ul>
<p>
<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li type="A">Tercer elemento</li>
</ol>
<p>
<dl compact>
<dt>ASCII <dd>
Juego de caracteres de 7 bits.
Sólo permite 127 caracteres.
<dt>EPS <dd>
Formato Postscript encapsulado.
<dt>PNG <dd>
Portable Network Graphics,
formato gráfico de alta eficiencia.
</dl>
</body>
</html>
2.7 Imágenes
Para poder incluir imágenes y gráficos en nuestras páginas disponemos de una única etiqueta: <img>. <img>
dispone de diversos atributos que nos permiten especificar qué fichero de imagen queremos usar, sus
medidas, etc. El atributo que nos permite especificar qué imagen debemos mostrar es src. Con dicha etiqueta
podemos especificar una URL de fichero de imagen que será el que el navegador solicitará al servidor para
mostrárnoslo.
Las imágenes que referenciemos con el atributo src pueden estar en cualquier directorio del servidor, en
otros servidores, etc. El valor que pasemos a src debe ser una URL. Disponemos, además, de un atributo alt
que nos permite asignar un texto alternativo a la imagen para ser mostrado en caso de que el navegador no
pudiera cargar la imagen.
Disponemos asimismo de un par de atributos que nos permiten especificar las medidas de la imagen: width y
height (anchura y altura). En caso de no especificarlos, el navegador mostrará la imagen con el tamaño que
tenga el archivo. En caso de especificarlos, el navegador redimensionará la imagen adecuadamente. Usar los

parámetros de medida de imagen permite al navegador calcular el espacio que ocupará la imagen y mostrar el
resto de la página mientras se descarga ésta.
Un uso habitual de las imágenes es como botones para enlaces, en cuyo caso el navegador generalmente le
añadirá un borde para diferenciarlo del resto. Podemos evitar este efecto añadiendo un atributo adicional,
border, que nos permite especificar el grosor de este borde o eliminarlo poniéndolo a cero.
El código HTML que ha producido la pantalla es el siguiente:

<html>
<head><title>Título del documento</title></head>
<body>
<img src="logo.jpg"> <p>
<img src="nologo.jpg" alt="IMAGEN NO EXISTENTE"><p>
</body>
</html>
2.8 Tablas
En HTML hay un grupo de etiquetas que nos permite introducir texto en forma de tablas:
• table marca el inicio y final de la tabla
• tr marca el inicio y final de una fila
• th marca el inicio y final de una celda de cabecera
• td marca el inicio y final de una celda
• caption permite insertar títulos en las tablas
Una tabla simple queda conformada por el siguiente código:

<table>
<tr>
<th>Cabecera 1</th>
...
<th>Cabecera n</th>
</tr>
<tr>
<td>Celda 1.1</td>
...
<td>Celda n</td>
</tr>
...
<tr>
<td>Celda 1.1</td>
...
<td>Celda n</td>
</tr>
<caption>Título</caption>
</table>

Como podemos ver, la tabla queda envuelta dentro de una etiqueta <table>. Para cada fila de la tabla
debemos envolver esta fila entre las etiquetas <tr> y </tr> (table row – fila de tabla). En cada fila tenemos dos
opciones para mostrar las celdas: podemos envolverlas entre etiquetas <th></th> (table header – cabecera de
tabla) o entre etiquetas <td></td> (table data – datos de tabla). La diferencia entre ellas es que la primera
selecciona un tipo de letra negrita y centra la columna.
La etiqueta <table> tiene algunos atributos para especificar el formato que queremos darle a la tabla:
• border Tamaño de los bordes de la celda
• cellspacing Tamaño en puntos del espacio entre celdas
• cellpadding Tamaño en puntos entre el contenido de una celda y los bordes
• width Ancho de la tabla. Puede estar tanto en puntos como con relación al porcentaje de la anchura
total disponible. Por ejemplo, "100%" indica toda la ventana del navegador
• align Alineación de la tabla respecto a la página, a la izquierda (left), a la derecha (right) o al
centro (center)
• bgcolor Color de fondo de la tabla
La etiqueta <tr> nos permite introducir las diferentes filas que componen una tabla. Atributos:
• align Alineación del contenido de las celdas de la fila horizontalmente a la izquierda (left), a la
derecha (right) o al centro (center)
• valign Alineación vertical del contenido de las celdas arriba (top), abajo (bottom) o centrado
(middle)
• bgcolor Color de fondo de la fila
Las etiquetas <td> y <th> nos permiten introducir las celdas que formarán la fila en la que se encuentran.
Pueden presentar los siguientes atributos:
• align Alineación del contenido de la celda horizontalmente a la izquierda (left), a la derecha
(right) o al centro (center)
• valign Alineación vertical del contenido de la celda arriba (top), abajo (bottom) o centrado (middle)
• bgcolor Color de fondo de la celda
• width Ancho de la celda, en puntos o porcentualmente. En este último caso hay que tener en
cuenta que se refiere al ancho de la tabla, no de la ventana
• nowrap Impide que en el interior de las celdas se divida la línea por espacios
• colspan Especifica cuántas celdas, incluyendo esta, se unirán hacia la derecha para formar una sola. Si
colspan es cero, todas las celdas se unirán a la derecha.
• rowspan Especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta.
La etiqueta <caption> nos permite añadir una leyenda o título centrado sobre o debajo de una tabla.
Disponemos de un solo atributo: align, que nos indica dónde se situará el caption respecto a la tabla, siendo
los posibles valores top, que la sitúa sobre la tabla, y bottom, que la sitúa debajo de ella.


<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">1,1 y 1,2</td>
<td>1,3</td>
</tr>
<tr>
<td rowspan="2">2,1 y 3,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td>3,2</td>
<td>3,3</td>
</tr>
<caption align="bottom">Tabla Simple</caption>
</table>
<hr>
<table border="0" cellspacing="0" bgcolor="#0000FF">
<tr>
<td>
<table border="0" cellspacing="1" cellpadding="2"
width="400" bgcolor="#FFFFFF">
<tr>
<th><img src="logo.jpg"></th>
<th>Abril</th>
<th>Mayo</th>
<th>Junio</th>
<th>Julio</th>
</tr>
<tr>
<td bgcolor="#A0A0A0">Vehículos</td>
<td>22</td>
<td>23</td>
<td bgcolor="#FFa0a0">3</td>
<td>29</td>
</tr>
<tr>
<td bgcolor="#A0A0A0">
Visitantes</td>
<td>1234</td>
<td>1537</td>
<td bgcolor="#FFa0a0">7</td>
<td>1930</td>
</tr>
<tr>
<td bgcolor="#A0A0A0">
Ingresos</td>
<td>11000</td>
<td>13000</td>
<td bgcolor="#FF4040">-500</td>
<td bgcolor="#a0a0FF">60930</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
2.9 Formularios
Los formularios son elementos de HTML que permiten recoger información del usuario. Disponemos de una
gran variedad de elementos de formulario que nos permiten interactuar de forma rica y eficiente. De todas
maneras, cabe destacar que los formularios no procesan la información introducida por los usuarios, sino que
debemos procesarla nosotros por otros medios (CGI, JSP, Servlets, etc.). Un ejemplo de cómo crear un
formulario es el siguiente:
<form action="url proceso" method="POST">

...
Elementos
..
</form>
La etiqueta <form> nos proporciona algunos atributos:

• action Nos permite especificar a qué URL se enviarán los datos que el usuario haya introducido en
el formulario. Podemos indicar una dirección de correo electrónico, de la forma
mailto:direccion@correo.electron o podemos especificar una URL de HTTP (el método más
usado para enviar los datos a los programas de tipo CGI): http://www.uoc.edu/proceso.cgi
• method El método especifica de qué forma se envían los datos. Hay dos opciones: GET y POST. La
primera incluye los parámetros en la dirección URL de destino (se suele utilizar para enviar
parámetros volátiles, como los de una búsqueda); la segunda incluye la información en el
cuerpo de un mensaje (información a almacenar, contraseñas, contenido de e-mails, etc.).
• enctype Especifica el tipo de codificación usada. Generalmente sólo se usa en caso de enviar el
resultado del formulario por correo para cambiar la codificación a text/plain.
• name Asigna un nombre al formulario, necesario pasa usarlo posteriormente desde Javascript.
Elementos del formulario
HTML proporciona una gran variedad de elementos de entrada para los formularios. Estos elementos
permiten desde introducir texto hasta enviar ficheros.
• <input> Quizás el más conocido y usado de los elementos de los formularios. Actúa como un campo
de entrada, disponiendo de diversos tipos de elementos <input> en función del valor del
atributo type:
– type="text" TextBox. Permite la introducción de texto
– type="password" Password TextBox. Permite la entrada de texto mostrando en lugar
de éste caracteres como "*", usado generalmente para entrada de
contraseñas
– type="radio" Radio Button (también llamado Option Button). Permite escoger
entre múltiples opciones, pero sólo una entre las que comparten el
mismo nombre
– type="checkbox" CheckBox. Permite escoger opciones múltiples
– type="hidden" Hidden TextBox. Campo de texto no visible para el usuario,
utilizado por el programador para conservar valores
– type="submit" Submit Button. Acepta los datos introducidos en el formulario y
ejecuta la acción especificada
– type="reset" Reset Button. Inicializa a blanco el contenido del formulario
El elemento <input> dispone, además, de otros atributos opcionales:

– name Da nombre al campo, siendo obligada su existencia para después poder
procesarlo desde otros programas.
– value Otorga un valor inicial al campo.
– size Tamaño, en el caso de los campos text y password.
– maxlength Longitud máxima aceptada de la entrada del usuario (solo en campos text y
password).
– checked En caso de radio y checkbox indica si la opción está marcada o no por
defecto.
• <select> Nos permite seleccionar una o varias de las opciones presentadas en una lista:
<select name="destino">
<option> África
<option> Antártida
<option> América
<option> Asia
<option> Europa
<option> Oceanía
</select>

Los atributos que ofrece el elemento <select> son:

– size Tamaño en pantalla del elemento <select>. Si es uno, sólo nos mostrará una
opción y el elemento <select> actuará como una lista desplegable
(ComboBox). Si es mayor que uno, veremos una lista de selección (ListBox)
– multiple Si lo indicamos, podremos elegir más de una opción. Exige que size sea
mayor que uno.
El elemento <option> dispone de dos atributos:

– value Valor que se asignará a la variable al seleccionar esta opción
– selected Opción seleccionada por defecto
• <textarea> El elemento <textarea> nos permite recoger del usuario elementos de texto de múltiples
líneas. El formato es el siguiente:
<textarea name="comentarios" cols="30" rows="6">
Introduzca comentarios sobre la página
</textarea>
Cabe destacar que el contenido encerrado entre <textarea> y </textarea> será considerado
el valor inicial del campo. Atributos:
– rows Filas que ocupará la caja de texto
– cols: Columnas que ocupará la caja de texto
Podemos ver a continuación un ejemplo de este formulario básico construido con los elementos presentados
anteriormente:

<html>
<head>
</head>
<body>
<h1>Prueba de formulario</h1>
<form method="GET">
Nombre: <input type="TEXT" name="NOMBRE" size="10"><br>
Apellidos: <input type="TEXT" name="APELLIDOS"
size="30"><br>
Clave: <input type="PASSWORD" name="PASS" size="8"><br>
<hr>
Sexo: <br>
<input type="RADIO" name="SEXO">Hombre
<input type="RADIO" name="SEXO">Mujer
<br>
Aficiones: <br>
<input type="CHECKBOX" name="DEPORTES">Deportes
<input type="CHECKBOX" name="MUSICA">Música
<input type="CHECKBOX" name="LECTURA">Lectura
<br>
Procedencia: <br>
<select name="PROCEDENCIA">
<option> África
<option> Antártida
<option> América
<option> Asia
<option> Europa
<option> Oceanía
</select>
<hr>
Dónde le gustaría viajar: <br>
<select name="destino" multiple size="4">
<option> África
<option> Antártida
<option> América
<option> Asia
<option> Europa
<option> Oceanía
</select>
<br>
Opine:
<br>
<textarea cols="25" rows="10" name="OPINA">
¡Escriba aquí su opinión!
</textarea>
<hr>
<input type="SUBMIT" value="Aceptar">
<input type="RESET" value="Inicializar">
</form>
</body>
</html>
Las etiquetas <fieldset> y <legend>
La etiqueta <fieldset> agrupa todos los controles de formulario a los que encierra. El navegador muestra por
defecto un borde resaltado para cada agrupación. La etiqueta <legend> se incluye dentro de cada etiqueta
<fieldset> y establece el título que muestra el navegador para cada agrupación de elementos.
Por otra parte, todos los controles de formulario salvo los botones presentan una carencia muy importante:
no disponen de la opción de establecer el título o texto que se muestra junto al control. En el
código HTML del ejemplo anterior, el nombre de cada campo se incluye en forma de texto normal, sin
ninguna relación con el campo al que hace referencia.
Afortunadamente, el lenguaje HTML incluye una etiqueta denominada <label> y que se utiliza para
establecer el título de cada campo del formulario. El único atributo que suele utilizarse con la
etiqueta <label> es for, que indica el identificador (atributo id) del campo de formulario para el que esta
etiqueta hace de título.
Sin la etiqueta <label> el nombre de los campos se incluye mediante un texto normal:

Nombre <br>
<input type="text" name="nombre" value="">
Apellidos <br>
<input type="text" name="apellidos" value="">
DNI <br>
<input type="text" name="dni" value="" size="10" maxlength="9">
Utilizando la etiqueta <label>, cada campo de formulario puede disponer de su propio título:
<label for="nombre">Nombre</label> <br>
<input type="text" id="nombre" name="nombre" value="">
<label for="apellidos">Apellidos</label> <br>

<input type="text" id="apellidos" name="apellidos" value="">
<label for="dni">DNI</label> <br>

<input type="text" id="dni" name="dni" value="" size="10" maxlength="9">
La principal ventaja de utilizar <label> es que el código HTML está mejor estructurado y se mejora su
accesibilidad. Además, al pinchar sobre el texto del <label>, el puntero del ratón se posiciona
automáticamente para poder escribir sobre el campo de formulario asociado. Este comportamiento es
especialmente útil para los campos de tipo radiobutton y checkbox.
Gracias a <fieldset> y <legend> podemos maquetar la información como en el siguiente ejemplo:
He aquí el código asociado:

<form action="maneja_formulario.php" method="post">
<fieldset>
<legend>Datos personales</legend>
Nombre <br>
<input type="text" name="nombre" value="">
<br>
Apellidos <br>
<input type="text" name="apellidos" value="">
<br>
DNI <br>
<input type="text" name="dni" value="" size="10" maxlength="9">
</fieldset>
<fieldset>
<legend>Datos de conexión</legend>
Nombre de usuario<br>
<input type="text" name="nombre" value="" maxlength="10">
<br>
Contraseña<br>
<input type="password" name="password" value="" maxlength="10">

<br>
Repite la contraseña<br>
<input type="password" name="password2" value="" maxlength="10">
</fieldset>
</form>
2.10 Marcos o Frames

Los Frames son una característica del lenguaje HTML que permite dividir la pantalla en diferentes zonas o
ventanas que pueden actuar con independencia, como si se tratara de páginas diferentes, pues incluso cada
una de ellas puede tener sus propias barras deslizadoras.
Una de sus características más importantes es que pulsando un enlace situado en un frame, se puede cargar en
otro frame una página determinada. Esto se utiliza frecuentemente para tener un frame estrecho en la parte
lateral (o superior) con un índice del contenido en forma de diferentes enlaces que, al ser pulsados, cargan en
la ventana principal o main frame las distintas páginas. De esta manera se facilita la navegación entre las
páginas, pues aunque se vaya pasando de unas a otras siempre estará a la vista el índice del conjunto.
Los marcos o frames permiten distribuir mejor los datos de las páginas, ya que permiten mantener fijas
algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar.
Además de mejorar la funcionalidad, pueden mejorar también la apariencia.
Estructura de marcos con dos frames
Vamos a empezar definiendo una estructura de dos frames: Una columna izquierda, más estrecha, y una
columna derecha, más ancha, como frame principal. De entrada tenemos que generar cuatro documentos
(cuatro archivos .htm o .html):
• El primero definirá la estructura de los marcos.
• El segundo se cargará, en este caso, en el marco izquierdo.
• El tercero se cargará en el marco derecho por defecto.
• El cuarto se cargará en el marco derecho cuando se haga click sobre un enlace en el marco izquierdo.
index.html
menu.htm saludo.htm enlace.htm
Por otro lado tenemos que decidir cuánto espacio vamos a asignar a cada marco: decidimos que el marco
izquierdo ocupará el 25% del espacio y el marco derecho, el resto (75%).
Veamos la sintaxis del primer archivo, que define la estructura de los marcos:

<html>
<head>
<title>Estructura de marcos</title>
</head>
<frameset cols="25%,*">
<frame src="menu.htm">
<frame src="saludo.htm" name="principal">
</frameset>
</html>
Lo guardamos con el nombre index.html porque va a ser el que se abra al principio. En vez de la etiqueta
<body> hemos empleado la etiqueta <frameset> (estructura de marcos). El atributo cols define las
columnas y el espacio reservado a cada una. Si, en vez de columnas hubiéramos querido establecer dos filas,
habríamos empleado el atributo rows. A continuación indicamos que la primera columna va a ocupar el 25%
del espacio, y la segunda el resto (definido por el asterisco). Hubiéramos podido, perfectamente, escribir el
tanto por ciento que queda, es decir, el 75%: <frameset cols="25%, 75%">. Se ha introducido el ancho como
porcentaje del total, pero también se podría haber indicado una cifra absoluta, que representaría el número de
píxeles a ocupar.
Ya se ha definido el número de frames, su distribución y su tamaño, pero falta por definir el contenido de
cada frame. Esto se hace con las etiquetas <frame> y el atributo src (source – fuente), que indica qué archivo
se va a cargar en ese espacio. Nuestro primer frame cargará el archivo menu.htm. En el segundo marco se
cargará el archivo saludo.htm.
Obsérvese que en la etiqueta del segundo frame se ha incluido el atributo name="principal", pero no así en el
primero. El motivo es que se necesita dar un nombre al segundo frame pues, como veremos a continuación,
en el documento del primer frame va a haber unos enlaces que van a ir dirigidos hacia él. En este caso sólo
tenemos dos frames, pero podría haber más, siendo necesario distinguir unos de otros mediante la asignación
de un nombre.
A continuación creamos el archivo menu.htm, que se cargará en el marco de la izquierda:
<html>
<head>
<title>Marco de la izquierda</title>
</head>
<body bgcolor="#dfdfdf">
Esto se cargará en la izquierda
<br><br>
<a href="enlace.htm" target="principal">enlace</a>
</body>
</html>
Creamos el archivo saludo.htm, a cargar en el marco de la derecha:
<html>
<head>
<title> saludo </title>
</head>
<body bgcolor="#000000" text="#0000ff">
<center>
<font size="+3">
<strong>
<p>esta es la version
<br><font color="#ff0000">con frames</font>

<br>de mi pagina
</strong>
</font>
</center>
</body>
</html>
Finalmente crearemos el documento a enlazar (enlace.htm):
<html>
<head>
<title>Documento a cargar en marco principal</title>
</head>
<body bgcolor="#ffcccc">
<center>
<h2>Has pulsado el enlace correctamente</h2>
</center>
</body>
</html>
Los navegadores que no soportan los frames, al desconocer las etiquetas <frameset> y <frame> no pueden
cargar páginas con marcos. Para estos casos están previstas las etiquetas <noframes> y </noframes>. Se
añaden al final del documento de definición de los frames, y se sitúa entre ambas lo que verán los usuarios
que accedan con un navegador que no soporte frames. Puede incluso ser el código HTML de una página
completa (lo que va entre las etiquetas <body> y </body>)
En nuestro caso, vamos a poner un mensaje advirtiendo de esta circunstancia, y dirigiendo al usuario, con un
enlace normal, hacia la página sinmarcos.htm.
<noframes>
Estás utilizando un navegador que no soporta frames.
<p>Pulsa para visitar mi <a href="sinmarcos.htm">página</a>.
</noframes>
Lo incluimos dentro del documento de definición de los frames, que hemos visto antes, y que queda de esta
manera:
<html>
<head>
<title>Estructura de marcos</title>
</head>
</frameset>
<noframes>
<body>
Estas utilizando un navegador que no soporta frames.
<p>Pulsa <a href="sinmarcos.htm">aquí</a>
para visualizar la página sin marcos.
</body>
</noframes>
</html>
Estructura de marcos con tres frames
Supongamos que queremos construir una página con tres marcos diferentes: un marco horizontal superior
que ocupe todo el espacio a lo ancho (puede albergar el título del sitio, un logotipo...) y el resto del espacio
dividido en dos marcos verticales (el de la izquierda con un menú de enlaces y el de la derecha –más grande–
donde se cargarán los enlaces pulsados en la izquierda).

index.html
titulo.htm
menu.htm saludo.htm enlace.htm
La sintaxis del documento principal (index.html) va a consistir en dos framesets anidados, el primero que
definirá las dos filas (la superior y el resto del espacio) y el segundo que dividirá ese resto del espacio entre las
dos columnas:
<html>
<head>
<title>Fila superior y dos columnas</title>
</head>
<frameset rows="15%,*">
<frame src="titulo.htm">
</frameset>
</frameset>
</html>
Este es el código del documento titulo.htm que se cargará en el marco superior:
<html>
<head>
<title>Marco superior</title>
</head>
<body bgcolor="#0066cc">
<font color="#ffffff">
<center>
<h1>mi sitio web</h1>
</center>
</font>
</body>
</html>
Ahora vemos el código del documento menu.htm, que se cargará en la columna izquierda:
<html>
<head>
<title>Marco de la izquierda con enlace</title>
</head>
<body bgcolor="#dfdfdf">
<a href="enlace.htm" target="principal">Enlace</a>
</body>
</html>
El documento saludo.htm que se carga inicialmente en el marco principal:
<html>
<head>
<title>Marco de la derecha</title>
</head>
<body bgcolor="#ff9999">
<center>
<h1>Bienvenido a mi página web</h1>
</center>
</body>
</html>
Finalmente, el documento enlace.htm que se cargará en el marco principal al ser pulsado el enlace:
<html>

<head>
<title>Documento a cargar en principal</title>
</head>
<body bgcolor="#ffcccc">
<center>
<h2>Has pulsado el enlace correctamente</h2>
</center>
</body>
</html>
Atributos de la etiqueta <frameset>
Atributo Significado Posibles valores

cols tamaño de cada una de las tamaño de cada columna en píxeles o en
columnas en que se divide el porcentaje (acompañado del símbolo "%"),
documento separados por comas.
rows tamaño de cada una de las tamaño de cada fila en píxeles o en porcentaje
columnas en que se divide el (acompañado del símbolo "%"), separados
documento por comas.
frameborder indica si aparece o no el borde yes | no
de los marcos
framespacing separación entre los marcos separación en píxeles
border grosor del borde tamaño del borde en píxeles o en porcentaje
(acompañado del símbolo "%")
bordercolor color del borde número hexadecimal representando un color
Si se decide utilizar asteriscos como valores para los atributos cols y rows, cuando existan varias columnas o
filas con este valor su tamaño se repartirá de forma equitativa en el espacio de ventana disponible.
Atributos de la etiqueta <frame>
Atributo Significado Posibles valores

frameborder indica si aparece o no el borde del marco yes o 1 | no o 0
name nombre del marco nombre alfanumérico
noresize si aparece, el usuario no podrá
redimensionar el tamaño de este marco
marginwidth anchura del margen con respecto a los anchura en píxeles o en
bordes del marco porcentaje (acompañado del
símbolo "%")
marginheight altura del margen con respecto a los bordes altura en píxeles o en porcentaje
del marco (acompañado del símbolo "%")
scrolling se mostrará o no la barra de desplazamiento yes | no | auto
cuando la página del marco no se pueda

visualizar completamente en él
src documento que se cargará en el marco ruta y nombre del documento
Ejemplos de atributos de frames
Se han diseñado tres franjas horizontales que ocupan, respectivamente, el 20%, el 60% y el 20%. En el primer
marco se cargará el archivo superior.html. Hemos definido que no queremos borde (frameborder="no") entre
este marco y el contiguo, que no dejamos al visitante que redimensione el tamaño de los marcos (noresize) y
que no queremos que haya barra de scroll (scrolling="no"). En el segundo marco se cargará el documento
avanzado1.html. El marco recibe por nombre principal y tampoco tiene borde. No forzamos la existencia de
scroll: ocurrirá automáticamente si así lo requiere el documento. Por último, en la tercera banda horizontal se
cargará el archivo inferior.html. Este marco recibe por nombre inf sin borde de separación y sin barra de
scroll.
<html>
<head>
<title>Atributos de marcos</title>
</head>
<frameset rows="20%,60%,20%">
<frame src="superior.html" name="sup"
frameborder="no" noresize scrolling="no">
<frame src="avanzado1.html" name="principal"
frameborder="no">
<frame src="inferior.html" name="inf"
frameborder="no" scrolling="no">
</frameset>
</html>
Estructura de marcos con dos frames
<frameset rows="*" cols="150,*" framespacing="3" frameborder="yes" border="3"

bordercolor="#FF9900">
<frame src="izquierdo.htm" name="marcoizquierdo" frameborder="no"
scrolling="no" noresize id="marcoizquierdo">
<frame src="derecho.htm" name="marcoderecho" frameborder="no"
scrolling="auto" id="marcoderecho">
</frameset>
<noframes></noframes>
Estructura de marcos con tres frames
<frameset rows="90,*" framespacing="3" frameborder="yes" border="3"

bordercolor="#FF9900">
<frame src="superior.htm" name="marcosuperior" frameborder="yes"
scrolling="NO" noresize>
<frameset cols="150,*" framespacing="3" frameborder="yes"
border="3" bordercolor="#FF9900">
<frame src="izquierdo.htm" name="marcoizquierdo"
scrolling="NO" noresize>
<frame src="derecho.htm" name="marcoderecho">
</frameset>
</frameset>
Esta última página está dividida en dos marcos horizontales (rows="90,*"), estando el inferior de ellos
dividido en dos marcos verticales (cols="150,*").

El atributo <target> de los enlaces
Además de los valores _blank, _parent, _self, y _top, el atributo target de un link (<a>) también permite
utilizar los nombres de los distintos marcos de la página. Por ejemplo, si tuviéramos un marco con el nombre
marcoderecho podríamos insertar el enlace:
<a href="http://www.google.com" target="marcoderecho">Google en

el marco derecho</a>
<a href="prueba1.htm" target="inf"> Se carga en el
<font color="#ff0000">inferior</font></a>
<a href="prueba2.htm" target="_blank"> Se carga en
<font color="#ff0000">ventana nueva</font></a>
<a href="prueba3.htm" target="_top"> Se carga en
<font color="#ff0000">todo el espacio</font></a>
<a href="prueba5.htm" target="_self"> Se carga en
<font color="#ff0000">el mismo espacio</font></a>
IFrames
Nos permiten crear un marco interno dentro de un documento HTML. Su uso habitual es mostrar publicidad
o webs de colaboración. Es un marco especial que permite incrustar una página dentro de otra, de la misma
forma que insertamos un gráfico o una tabla. La sintaxis se consigue con el par de etiquetas
<iframe></iframe> (frame in line – marco en línea)y sus atributos src, width y length. Podemos asignarle un
name para referirnos a él y cargar otros documentos en ese espacio.
Supongamos que queremos cargar en este iframe la página marcos.htm; el código quedaría así:
<iframe src="marcos.htm" name="incrustado" width="400" height="400"

scrolling="auto">
Texto alternativo para navegadores que no aceptan iframes
</iframe>
También podemos usar este tipo de marcos para cargar documentos ajenos a nuestro sitio. En ese caso hay
que escribir la URL entera en el atributo src. Vamos a ver, como ejemplo, la carga de la página web del
Instituto Clara del Rey.:
<iframe src="http://ies.claradelrey.madrid.educa.madrid.org"
name="incrustado2" width="500" height="600" >
</iframe>
Podemos cargar en estos marcos los documentos que deseemos empleando el nombre asignado:
<a href="http://www.google.com" target="incrustado">Click aquí

para cargar Google</a>
3 Promoción de una página web
No basta con colocar nuestra página en la red. Por muy interesante que sea su contenido, y por bien diseñada
que esté, para que los demás puedan acceder a ella deben tener conocimiento de su existencia. Es labor
nuestra la de promocionar la página, es decir, darla a conocer por todos los medios posibles.

Para comenzar, es conveniente incluir la dirección (o URL) de la página en la firma de nuestro email, y mejor
aún si además se incluye su título, o una frase que indique el contenido de la página. De esta manera se incita
a visitarla al que esté interesado en ese tema.
Pero el paso más eficaz es dar de alta nuestra página en sitios web especializados en almacenar y organizar
direcciones. Estos sitios sirven como bases de datos donde acude la gente en búsqueda de información sobre
dónde encontrar las páginas web deseadas. Además, dar de alta una página en los buscadores es gratuito.
En líneas generales, y de forma relativa a la promoción, se pueden distinguir dos tipos de sitios:
o Los que están organizados como directorios, es decir, que catalogan las páginas por su contenido en
categorías y sub-categorías. Para darse de alta en ellos, es necesario situarse primero en la categoría
apropiada al contenido de nuestra página. Estos sitios sólo contienen las páginas de quienes se hayan
dado de alta en ellos de manera voluntaria. Estos directorios no indexan sus páginas ni las leen; a lo sumo
son revisadas por humanos que deciden si nuestra página web es válida para el directorio o no,
incluyéndola gratuitamente en algunos casos o solicitando del usuario una contraprestación económica
por la inclusión de su web, un intercambio de links o cualquier otro tipo de compensación que
consideren.
o Otros sitios, los llamados motores de búsqueda (search engines) actúan de una forma completamente
distinta. Utilizan unos programas (llamados comúnmente robots –robots– o arañas –spiders) que tienen la
misión de rastrear continuamente Internet en búsqueda de páginas nuevas o renovadas. Para ello, van
navegando de URL en URL a través de los enlaces que encuentran en las páginas, con la intención de
catalogar el número máximo de ellas.
Si uno de estos robots visita nuestra página, grabará el texto completo de cada una de las páginas (la
principal y las sub-páginas). De esta manera, todas las palabras de todas las páginas de nuestro sitio se
incorporarán a su base de datos. Cuando luego alguien haga una consulta en estos motores de búsqueda
introduciendo una palabra que coincida con alguna de ellas, presentará nuestra página web como un
resultado de la búsqueda.
Aparte de esto, también se dedicará a visitar todos los enlaces que vaya encontrando por las distintas
páginas. De esta manera catalogan páginas que no han sido dadas de alta de manera voluntaria. Sin
embargo, es conveniente que registremos nosotros mismos nuestra página en estos motores de búsqueda
para acelerar el proceso y no tener que esperar a que la encuentren. Además, una vez que los robots han
localizado una página la visitarán periódicamente para renovar la información grabada.
Un ejemplo de spider es Google. La popularidad de una página web (PageRank para Google) es uno de los
factores determinantes en el posicionamiento de una página web en los buscadores principales (MSN,

Google, Altavista, Lycos...), por lo que es aconsejable dar de alta nuestra página web en buscadores de
todo tipo.
3.1 Consejos para facilitar la labor a los motores de búsqueda

Hay ciertas cosas que podemos hacer para conseguir que nuestra página sea catalogada de la manera más
adecuada en estos motores de búsqueda:
Utilizar palabras clave dentro de la etiqueta <title>
Haciendo que sea lo más descriptivo posible, porque cuando un motor de búsqueda presenta una página
concreta como resultado de una búsqueda, lo hará reproduciendo las palabras que ha encontrado dentro de la
etiqueta <title> de esa página.
Utilizar la etiqueta <meta>
Son unas etiquetas que se colocan en la cabecera de la página. Sirven para suministrar una información
detallada de su contenido, con lo que se obtiene un control mayor de cómo será catalogada la página. No
todos los motores de búsqueda hacen uso de estas etiquetas, pero si las incluimos las haremos mucho más
accesibles a los motores de búsqueda que sí las utilizan.
La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible indicar un tipo
de información y su valor, pero es posible insertar varias etiquetas <meta> en un mismo documento. A
través de esta etiqueta pueden especificarse los atributos name y content. El atributo name indica el tipo de
información y el atributo content indica el valor de dicha información.
Para indicar el tipo de información podemos utilizar cualquier palabra que deseemos, como puede ser
"Autor", "Palabras clave", "Descripción", etc., pero debido a que la mayoría de buscadores están en inglés, es
preferible que el tipo de información se especifique en inglés.
Los tipos de información más utilizados son los siguientes:
Tipo Significado
author Autor de la página
classification Palabras para clasificar la página en los buscadores
description Descripción del contenido de la página
generator Programa utilizado para crear la página
keywords Palabras clave
Veamos por ejemplo las utilizadas para un manual HTML:

<head>
...
<meta name="author" content="Pepe Perez">
<meta name="description"
content="HTML Manual para la creación de páginas web">
<meta name="keywords"
content="HTML tutorial www web Spanish html manual">
</head>
La etiqueta <meta> también se utiliza para indicarle al navegador alguna información o alguna acción que
debe realizar. En el siguiente ejemplo se utiliza el atributo http-equiv, en lugar del atributo name. Imaginemos
que por algún motivo queremos que nuestra página se actualice automáticamente cada 10 segundos. En ese
caso, deberíamos utilizar la acción refresh (actualizar):
<head>
<meta http-equiv="Refresh" content="10">
</head>
Ahora imaginemos que hemos cambiado la dirección en la que se encuentra nuestra página web, y queremos
que cuando algún usuario visite la página en la dirección antigua, a los 5 segundos el navegador lo redirija
automáticamente a la dirección nueva. En ese caso podríamos insertar el siguiente código en la página que se
encuentra en la dirección antigua:
<head>
...
<meta http-equiv="Refresh" content="5";
URL="http://www.mipagina.com/index.htm">
</head>
De este modo, el navegador realizaría la función de actualizar la página, pero cargando la que se encontrará en
la nueva dirección. Nunca debería emplearse un tiempo de cero segundos, porque puede afectar a la
funcionalidad de algunos navegadores.
Otra opción es forzar la expiración inmediata de la página en la caché del navegador, lo que provoca que la
página sea solicitada de nuevo al servidor cada vez que se carga, en lugar de cargar la copia que ya existe en la
máquina del cliente. Se escribe así:
<head>
<meta http-equiv="Expires"
content="Tue, 20 Aug 1996 14:25:27 GMT">
</head>
Si se pone una fecha ya pasada, como la que hay en el ejemplo, el navegador elimina inmediatamente de la
caché la página recibida, y si no es pasada lo hará en el momento indicado por la misma. También se le puede
dar valor cero a la fecha de expiración. Otra opción es impedir directamente que el navegador guarde en
caché la página. Esto es especialmente útil cuando se trabaja con formularios que consultan datos dinámicos:
<head>
<meta http-equiv="Expires" content="no-cache">
</head>

La utilización de estas etiquetas <meta> es especialmente conveniente para las páginas que hacen uso de
frames (ya que la página inicial es la de definición de los frames, que no tiene ninguna indicación del contenido
de las otras páginas). También es muy conveniente para los que utilizan Javascript en el comienzo de sus
páginas, ya que el código empleado puede tener cientos de palabras, y los robots están programados para dar
mayor énfasis a las palabras que encuentran al principio que a las situadas al final.
Incluir un resumen del contenido de la página en el comienzo del texto
Hay motores de búsqueda que utilizan las primeras 25 palabras del texto de una página a modo de
presentación de su contenido. Conviene, por tanto, hacer un breve resumen al inicio de la página, lo que por
otra parte es siempre una práctica muy aconsejable.
Utilizar el atributo alt en las imágenes iniciales
Como vimos, dentro de la etiqueta de las imágenes se puede añadir el atributo alt, que sirve para asignar un
texto a la imagen. Hay motores de búsqueda que toman en cuenta el texto que encuentran de esta manera en
las imágenes (sobre todo las iniciales) para hacer una descripción del sitio o para suministrar las palabras
clave.
3.2 Alta en algunos motores de búsqueda

En principio, hay que darse de alta en cada uno de ellos individualmente.
Para incluir una URL en Google: http://www.google.com.uy/addurl/?continue=/addurl
Para incluir una URL en Bing: http://www.bing.com/toolbox/submit-site-url
Bibliografía
Desarrollo de aplicaciones web – Carles Mateu (UOC.edu)
Introducción a XHTML – Javier Eguíluz Pérez (librosweb.es)
Dynamic HTML. The Definitive Reference – Danny Goodman (O’Reilly)
http://es.wikipedia.org

LM04. Lenguajes de Visualizacion. HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

LM04. Lenguajes de Visualizacion. HTML

Uploaded by

Copyright:

Available Formats

Unidad de Trabajo 4

LENGUAJES DE VISUALIZACIÓN. HTML

2.1 Estructura de los documentos HTML ..........................................................................................................4

2.2 Bloques de texto ................................................................................................................................................5

2.3 Marcadores lógicos ...........................................................................................................................................8

2.4 Tipos de letra .....................................................................................................................................................9

2.5 Enlaces ............................................................................................................................................................. 11

2.6 Listas ................................................................................................................................................................ 13

2.7 Imágenes .......................................................................................................................................................... 14

2.8 Tablas ............................................................................................................................................................... 15

2.9 Formularios ..................................................................................................................................................... 17

Elementos del formulario ..................................................................................................................................... 18

Las etiquetas <fieldset> y <legend> .................................................................................................................. 20

2.10 Marcos o Frames ............................................................................................................................................ 22

Estructura de marcos con dos frames................................................................................................................. 22

Estructura de marcos con tres frames................................................................................................................. 24

Atributos de la etiqueta <frameset> ................................................................................................................... 26

Atributos de la etiqueta <frame> ........................................................................................................................ 26

Ejemplos de atributos de frames ......................................................................................................................... 27

El atributo <target> de los enlaces ..................................................................................................................... 28

3 Promoción de una página web ............................................................................................................................. 28

3.1 Consejos para facilitar la labor a los motores de búsqueda ..................................................................... 30

Utilizar palabras clave dentro de la etiqueta <title> ......................................................................................... 30

Lenguajes de Marcas y Sistemas de Gestión de la Información 1

Utilizar la etiqueta <meta> ................................................................................................................................... 30

Incluir un resumen del contenido de la página en el comienzo del texto ..................................................... 32

Utilizar el atributo alt en las imágenes iniciales.................................................................................................. 32

3.2 Alta en algunos motores de búsqueda ........................................................................................................ 32

Lenguajes de Marcas y Sistemas de Gestión de la Información 2

Los navegadores cuentan con una jerarquía interna de objetos a partir

Por desgracia cada navegador construye su propio DOM, siendo

Lenguajes de Marcas y Sistemas de Gestión de la Información 3

Ejemplos de etiquetas de HTML:

<title>Nombre del documento</title>

<etiqueta atributo atributo...>

2.1 Estructura de los documentos HTML

Lenguajes de Marcas y Sistemas de Gestión de la Información 4

2.2 Bloques de texto

Lenguajes de Marcas y Sistemas de Gestión de la Información 5

o Divisiones del texto en bloques

Podemos ver algunas de estas etiquetas en el siguiente ejemplo:

Lenguajes de Marcas y Sistemas de Gestión de la Información 6

El resultado de la visualización de este código HTML es el siguiente:

Lenguajes de Marcas y Sistemas de Gestión de la Información 7

2.3 Marcadores lógicos

El código que ha producido este resultado es el siguiente:

Lenguajes de Marcas y Sistemas de Gestión de la Información 8

<p><cite>&#169; 2003, Carles Mateu</cite>

2.4 Tipos de letra

Lenguajes de Marcas y Sistemas de Gestión de la Información 9

• code código de programa

Podemos ver el aspecto de los tipos de letras y colores en la siguiente página:

El código HTML que ha producido este resultado es el siguiente:

Lenguajes de Marcas y Sistemas de Gestión de la Información 10

<font size="7">7</font> <font size="6">6</font>

Lenguajes de Marcas y Sistemas de Gestión de la Información 11

Disponemos de cuatro tipos de enlaces principales:

El formato de las URLs es el siguiente:

Algunos ejemplos de URL son:

Si el enlace estuviera dentro de la misma página, podríamos abreviar la dirección con:

Lenguajes de Marcas y Sistemas de Gestión de la Información 12

Puede tomar cinco valores distintos:

• _blank Abre el documento vinculado en una ventana nueva del navegador.

o Listas ordenadas (numeradas)

<p><cite>© 2003, Carles Mateu</cite>

<frameset rows="" cols="150," framespacing="3" frameborder="yes" border="3"