Conceptos básicos

World Wide Web (WWW): Digamos, simplemente, que es un sistema de información, el sistema de
información propio de Internet. Sus características son:
• Información por hipertexto: Diversos elementos (texto o imágenes) de la información que se
nos muestra en la pantalla están vinculados con otras informaciones que pueden ser de otras
fuentes. Para mostrar en pantalla esta otra información bastará con hacer clic sobre ellos.
• Gráfico: En la pantalla aparece simultáneamente texto, imágenes e incluso sonidos.
• Global: Se puede acceder a él desde cualquier tipo de plataforma, usando cualquier navegador y
desde cualquier parte del mundo.
• Pública: Toda su información está distribuida en miles de ordenadores que ofrecen su espacio
para almacenarla. Toda esta información es pública y toda puede ser obtenida por el usuario.
• Dinámica: La información, aunque esta almacenada, puede ser actualizada por el que la publico
sin que el usuario deba actualizar su soporte técnico.
• Independiente: Dada la inmensa cantidad de fuentes, es independiente y libre.

Navegador: Es el programa que nos ofrece acceso a Internet. Debe ser capaz de comunicarse con un
servidor y comprender el lenguaje de todas las herramientas que manejan la información de Web.
Puede decirse que cada casa de software podría tener su navegador propio, aunque los mas populares
sean Netscape e Internet Explorer.
Servidor: Se encarga de proporcionar al navegador los documentos y medios que este solicita. Utiliza
un protocolo HTTP para atender las solicitudes de archivos por parte de un navegador.
HTTP: Es el protocolo de transferencia de hipertexto, o sea, el protocolo que los servidores de World
Wde Web utilizan para mandar documentos HTML a través de Internet.
URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la dirección que localiza
una información dentro de Internet.
HTML: De momento, le basta saber que estas siglas se corresponden con la definición "Lenguaje para
marcado de hipertexto". Más claro aún, se trata de un lenguaje para estructurar documentos a partir de
texto en World Wide Web. Este lenguaje se basa en tags (instrucciones que le dicen al texto como
deben mostrarse) y atributos (parámetros que dan valor al tag).

Organización de una Web

Para hacer una buena presentación Web lo ideal es crearnos un boceto inicial de la estructura. Si
hacemos esto, no solo estamos procurando una presentación agradable y facilitando la tarea de navegar
sino que también nos facilitamos el mantenimiento de futuras revisiones y modificaciones.
Objetivos: Lo primero que debemos hacer el fijarnos los objetivos que queremos alcanzar según la
información que vayamos a aportar. Para crear nuestra primera página, estos objetivos deberían no ser
muy pretenciosos o tener un sentido únicamente personal. Tener claros los objetivos nos ayudara a no
plasmar contenidos confusos o innecesarios.
Contenidos: Una vez tenemos los objetivos, hay que organizar el contenido por temas o secciones, que
se ajusten a nuestros objetivos, reuniendo las informaciones relacionadas bajo el mismo epígrafe. Es
conveniente que los temas sean razonablemente cortos y si fuera necesario divida en subtemas. Si por
el contrario tenemos temas muy cortos, lo correcto sería agruparlos bajo un encabezado de tema algo
más general.

Primer paso: Una presentación Web consiste de una o más páginas Web que contienen texto y gráficos
y que están vinculadas entre si creando un cuerpo de información. La página principal o página base es
desde donde se comienza a visitar la presentación y su URL será la que figure como dirección de la
presentación. Esta página base debe ofrecer un panorama general del contenido de la presentación.

Organización: Ha llegado la hora de estructurar la información recopilada en un conjunto de páginas

Web. Podemos crearnos una estructura propia pero lo más lógico es guiarnos por una estructura clásica.

Secuenciación: Consiste en decidir que contenido va en cada página, elaborar la trama de vínculos
para navegar entre ellas e incluso, hacernos una idea de que tipo de gráficos vamos a poner y que
ubicación van a tener. Para ello puede utilizarse un "Tablero de Secuencia", un esquema gráfico que
nos ayudará a recordar en todo momento donde encaja cada página en el global de la presentación.

Revisión de objetivos: Finalmente y antes de ponernos a crear nuestra presentación Web, debemos
prestar atención a que lo que tenemos plasmado en el "Tablero de Secuencia" cubre los objetivos que
nos habíamos propuesto. Si es así, ya podemos comenzar a manejarnos con HTML.

La estructura
La estructura de un conjunto de páginas web es muy importante, ya que una buena estructura permitirá
al lector visualizar todos los contenidos de una manera fácil y clara, mientras que un conjunto de
páginas web con una mala estructura producirá en el lector una sensación de estar perdido, no
encontrará rápidamente lo que busca y terminará por abandonar nuestro sitio.
Planifique la estructura antes de empezar: Antes de crear un conjunto de páginas web uno ha de tener
una idea clara de cómo va a ser la estructura de dichas páginas, es conveniente hacer algún esquema
sencillo, para la mayoría de los casos una hoja de papel y un lapicero bastará, pero si el emplazamiento
va a albergar un gran número de páginas es recomendable usar algún tipo de programa que permita
manejar estructuras de tipo grafo.
La estructura depende del contenido: No es lo mismo crear una estructura de navegación para un
sitio que desea publicar información al estilo de un libro cuya estructura estará formada por capítulos,
este tipo de información se adapta bastante bien a una estructura lineal como jerárquica. Mientras que
un sitio donde se expone un tutorial o un tour es más apropiada una estructura de tipo lineal.
Tipos de Estructuras
Jerárquica: La estructura jerárquica, es la típica estructura de árbol, en el que la raíz es la hoja de
bienvenida, esta hoja se puede también sustituir por la hoja de contenido, en la que se exponen las
diferentes secciones que contendrá nuestro sitio. La selección de una sección nos conduce asimismo a
una lista de subtemas que pueden o no dividirse.
Este tipo de organización permite al lector conocer en qué lugar de la estructura se encuentra, además
de saber que, con forme se adentra en la estructura obtiene información más específica y que la
información más general se encuentra en los niveles superiores.
Lineal: La estructura lineal es la más simple de todas, la manera de recorrerla es la misma que si
estuviésemos leyendo un libro, de manera que estando en una página, podemos ir a la siguiente página
o a la anterior.
Esta estructura es muy útil cuando queremos que el lector siga un camino fijo y guiado, además
impedimos que se distraiga con enlaces a otras páginas. Por otra parte podemos causar a lector la
sensación de estar encerrado si el camino es muy largo o poco interesante.
Este tipo de estructura sería válido para tutoriales de aprendizaje o tours de visita guiada.
Lineal con jerarquía: Este tipo de estructura es una mezcla de la dos anteriores, los temas y subtemas
están organizados de una forma jerárquica, pero uno puede leer todo el contenido de una forma lineal si
se desea.
Esto permite tener el contenido organizado jerárquicamente y simultáneamente poder acceder a toda la
información de una manera lineal como si estuviésemos leyendo un libro. Esta guía sigue básicamente
este tipo de estructura.
Red: La estructura de red es una organización en la que aparentemente no hay ningún orden
establecido, las páginas pueden apuntarse unas a otras sin ningún orden aparente.
Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al
lector de en dónde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no llegar
a ver lo que le queremos mostrar. Por eso es muy recomendable asociar la estructura de las páginas con
alguna estructura conocida, como por ejemplo la de una ciudad.

Navegación
Unos de los apartados más importantes en el diseño de páginas Web son los elementos de navegación.
Ya que son los que nos permiten movernos a través de las diferentes páginas que hemos construido.
Duplique los elementos de navegación si es necesario: Si sus páginas tienen normalmente un tamaño
superior al de una pantalla y media, considere la opción de duplicar los elementos de navegación al
principio y al final de las páginas.
Añada un enlace al principio de la página: Si la página es suficientemente larga proporcione al final
de la página un enlace el principio de la misma.
No cree páginas que sean un callejón sin salida: Al menos cada página Web ha de tener un enlace
por el cual se pueda continuar la navegación.
Diseñe una estructura clara: Asegúrese de que proporciona un camino cómodo para visitar todas las
páginas Web de su sitio. Si no tiene en cuenta esto perderá la mayoría de los lectores tras las primeras
páginas.
Proporcione índices: Si le es posible facilite un índice con el contenido del sitio. Procure que el índice
sea fácilmente accesible, puede hacer un "frame" o puede ponerlo al principio o al final de la página.
Si usa una paleta de navegación gráfica, proporcione enlaces de texto: Si usa una paleta de
navegación gráfica, el lector no puede moverse por las demás páginas hasta que el gráfico no esté
cargado, pero si pone enlaces de texto el lector puede moverse antes y no tener que esperar.

Tamaño de las páginas

Las personas no hacen scroll: Si quiere captar la atención del navegante, no haga la página más
grande de una pantalla. Muchas de las personas que navegan por Internet no consultan la parte inferior
de las páginas porque no saben que hay más información en la parte de abajo.
Haga las páginas de una pantalla y media: En general es una buena costumbre no hacer páginas de
tamaño mayor a una pantalla y media. De esta manera evitará muchos problemas y facilitará la lectura
de las páginas. Las páginas de tamaño una pantalla y media son cómodas de leer y no saturan al lector
con demasiada información.
Páginas largas para grandes documentos: Si necesita poner gran cantidad de texto escrito que ha de
leerse completo, es recomendable hacer una única página larga. Es menos molesto hacer scroll a lo
largo de una ventana que seguir un enlace a la siguiente parte del documento.

Enlaces
Los enlaces permiten enriquecer el contenido de la información con datos suplementarios, pero se ha de
tener precaución ya que pueden hacer confusa la lectura de una página.
Escriba como si no hubiese enlaces en el texto: Es preferible:
José Martinez ha desarrollado un nuevo método de generación de primos.
a
En nuevo método de generación de primos está aquí.

Elija palabras significativas o frases para los enlaces: El texto enlazado debe definir el contenido de
la información a la que refiere. De ser posible de manera que no sea necesario leer todo el párrafo para
comprender el significado del enlace.
Elija la longitud apropiada del enlace: Si bien como hemos dicho antes el enlace ha de ser
suficientemente significativo, un enlace demasiado largo también es perjudicial ya que dificulta la
lectura del texto.
Asegúrese de que el lector conoce la información a la que va acceder antes de saltar: Si el lector
salta a un enlace que no resulta ser lo que esperaba, se va a encontrar confundido y frustrado al no
conseguir la información que desea.
Los enlaces modifican el énfasis de la frase: Hay que tener en cuenta que al hacer un enlace sobre
una parte del texto esta se realza y puede distraer al lector del significado principal del párrafo.
José Martinez con su nuevo método ha generado el primo más grande en una Sun Sparc.
En esta frase queda remarcado Sun Sparc cuando lo más importante de la frase es el nuevo método.
Resalte el texto diferente: Cuando realice enlaces consecutivos similares, resalte la información que
diferencie unos enlaces de otros.
Libros sobre Economía.
Libros sobre Medicina.
Libros sobre Historia.
Libros sobre Educación.

Libros sobre Economía.

Libros sobre Medicina.
Libros sobre Historia.
Libros sobre Educación.

Incluso se puede mejorar si

quita el texto redundante.

Libros sobre:

• Economía.
• Medicina.
• Historia.
• Educación.

No cambie el color de los enlaces: Aunque esté permitido, ahorrará tiempo y evitará confusión al
lector si no cambia los colores por defecto de los enlaces, puesto que el lector está acostumbrado a ellos
y lo asocia con los sitios que ya ha visitado y los que todavía no.
Compruebe el funcionamiento de todos los enlaces: Resulta bastante desagradable intentar saltar a
un enlace y comprobar que dicho enlace no funciona o que la página a la que se referencia ya no existe,
por eso hay que comprobar el funcionamiento de todos los enlaces que hay en nuestras páginas. Existen
programas que realizan esta tarea automáticamente.
Existen dos tipos de enlaces, los enlaces internos y los enlaces externos. Los enlaces internos son
aquellos que referencian páginas que son nuestras, es decir que poseemos el control de esas páginas. Y
los enlaces externos referencian páginas de otras personas sobre las que no tenemos ningún tipo de
control.
Se han de comprobar el funcionamiento de los enlaces internos cada vez que modifiquemos nuestras
páginas y se han de comprobar los enlaces externos de una forma periódica.
El lenguaje HTML
Este lenguaje estructura documentos. La mayoría de los documentos tienen estructuras comunes
(títulos, párrafos, listas...) que van a ser definidas por este lenguaje mediante tags. Cualquier cosa que
no sea una tag es parte del documento mismo.
Este lenguaje no describe la apariencia del diseño de un documento sino que ofrece a cada plataforma
que le de formato según su capacidad y la de su navegador (tamaño de la pantalla, fuentes que tiene
instaladas...). Por ello y para no frustrarnos, no debemos diseñar los documentos basándonos en como
lucen en nuestro navegador sino que debemos centrarnos en proporcionar un contenido claro y bien
estructurado que resulte fácil de leer y entender.
No se desespere por lo que acaba de leer. HTML tiene dos ventajas que lo hacen prácticamente
imprescindibles a la hora de diseñar una presentación web: Su compatibilidad y su facilidad de
aprendizaje debido al reducido número de tags que usa.
Básicamente, los documentos escritos en HTML constan del texto mismo del documento y las tags que
pueden llevar atributos. Esto llevado a la práctica, vendría a ser:
<tag> texto afectado </tag>

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

Editores y convertidores
Antes de comenzar al trabajar sobre un editor, le recomendaría que visionase el código fuente de
nuestra página principal. Todos los navegadores dan la opción de editarla (Menú ver / Código fuente).
Si visita otras páginas y visualiza su código fuente encontrará similitudes en la forma en que están
organizadas las páginas y en las tags utilizadas.
¿Dónde hay que editar el código fuente? Pues, si usted es usuario de Windows le bastaría con el Bloc
de Notas y si utiliza Macintosh con el Simple Text. Si utiliza procesadores de texto más potentes debe
guardar sus documentos como "solo texto" ya que HTML ignora todos los espacios en blanco. Una vez
guardado convierta la extensión de texto por la extensión html o htm (en los sistemas DOS).
Los convertidores se utilizan para tomar los archivos de un procesador de textos y convertirlos a
HTML. Pero debido a la propia limitación de este lenguaje, por muy elegante que hagamos un
documento en nuestro procesador, un convertidor no obrará milagros y quizá acabe por crear cosas
ilegibles en HTML. Además, la mayoría de los convertidores no convierten imágenes y no automatizan
los vínculos hacia los documentos en Web debiendo corregir esto de manera manual.
A través de Internet o de revistas especializadas, usted podrá hacerse con editores y convertidores
gratuitos o de muy reducidos costes. Quizá más adelante, cuando este acostumbrado a trabajar con
HTML, puedan resultarle interesantes pero eso se lo dejo a su futura elección. De momento, hágame
caso, si quiere aprender HTML use solo un procesador de texto simple.
Documento HTML
Estructura básica de un documento HTML: Cabecera y cuerpo del documento
Tres son las tags que describen la estructura general de un documento y dan una información sencilla
sobre él. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos
HTML.
• <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.
• <HEAD>: Especifica el prólogo del resto del archivo. Son pocas las tags que van dentro de ella,
destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e
identificará el contenido de la página. Solo puede haber un título por documento,
preferiblemente corto aunque significativo, y no caben otras tags dentro de él. En head no hay
que colocar nada del texto del documento.
• <BODY>: Encierra el resto del documento, el contenido.

<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Hola mundo
</BODY>
</HTML>

<H1> <P> <BR>

Tres son la tags que describen la estructura general de un documento y dan una información sencilla
sobre él. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos
HTML.
• <H1>, <H2>, <H3>...: Titulares. Sirven para dividir el texto en secciones. Se pueden definir
seis niveles de titulares, el texto que deseamos que sea un titular se pone entre las tags <H1>
Titular </H1>. Se definen mediante las tags <H1>.....</H1> hasta <H6>.....</H6>
• <P>: Párrafos. En principio, sin entrar en detalles de alineación u otras características, digamos
que se definen por las tags <P>.....<P>. Esta tag, en un principio, se diseñó para saltar de
párrafo por lo que puede ir sola "<P>" al final de un texto indicando que a continuación se
quiere una línea en blanco aunque le recomendamos que se acostumbre a utilizarla abriéndola y
cerrándola.
• <BR>: Saltos de línea. Esta tag sirve para realizar un salto de linea, puede poner tantas como
desee y realizará un salto de línea por cada una de ellas.
• <!-- -->: Comentarios. Son directivas que nunca se mostrarán a través del navegador y que le
servirán para recordatorios en futuras revisiones del documento.
Bien, recuperemos nuestro ejemplo y agreguemos nuestros nuevos conocimientos.
<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>
<H1>Mi primera página</H1>

<!-- Aqui va un comentario que no es

interpretado por el navegador -->

<P>Hola mundo, esta es un página con titular,

que tiene también un párrafo y unos cuantos
saltos de línea.</P>

Uno<br>
Dos<br>
Tres<br>
</BODY>
</HTML>

Creación de enlaces
<A>
Lo característico del lenguaje HTML es el poder generar vínculos de hipertexto para enlazar con ellos
todos sus documentos en web.
Para generar un enlace a otro documento necesitamos el nombre de un archivo (o su dirección URL) y
el texto que servirá de punto de activación del otro documento. Este segundo elemento será el que
veamos en pantalla y que se servirá del primero para saltar de documento.
Los enlaces se generan mediante la tag <A>.....</A> y, a diferencia de los vistos anteriormente, llevará
siempre dentro de la tag un atributo ya sea <A HREF=""> o <A NAME="">.
• <A HREF="URL">.....</A>: Es el más habitual de los atributos y sirve para saltar entre
diferentes URLs. De momento veremos:
• Saltar en una presentación del archivo 1 al archivo 2: En el archivo 1 incluiremos la
directiva <A HREF="archivo2.html">Siguiente página</a>
• Saltar de nuestra presentación a otra presentación web llamada www.bienvenidos.es:
<A HREF="http://www.bienvenidos.es">Visita esta página</A>

• <A NAME="parte1">Primera parte</A>: Utilizamos el atributo name para dar nombre a una
sección de nuestro documento. Posteriormente, cuando en nuestro documento queramos incluir
un vínculo a dicha sección escribiremos: <A HREF="#parte1">Ir a la primera parte</A>
<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>
<A NAME="arriba"><H1>Página de enlaces</H1></A>
<A HREF="#abajo">Ir abajo</A><br>

<A HREF="ej4.html">Ir a ejemplo 4</A><br><br>

<A HREF="http://www.webestilo.com/">Ir a WebEstilo</A><br>

<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br>.<br>.<br>.<br>.<br>.<br>

<A NAME="abajo"><br></A>
<A HREF="#arriba">Ir arriba</A>

</BODY>
</HTML>

URL: Localizador Universal de Recursos

Los URL son las direcciones de las informaciones que buscamos en Internet. Los URL constan de tres
partes:
• Protocolo: Es el programa que utilizará el navegador para obtener el archivo elegido. Les suena
HTTP, FTP, Gopher...
• Nombre del host: Se trata del sistema donde se encuentra almacenada la información que
buscamos.
• Ruta del fichero: Se trata de la ubicación del archivo dentro del host.
http://www.bienvenidos.es/publico/saludos.html

Entre los principales tipos de URL destacan:

• HTTP: Son los más populares ya que son los utilizados por los servidores de WWW para
mandar documentos a través de Internet.
• FTP: Se utilizan para apuntar hacia los archivos que estén en servidores que usan el protocolo
FTP (File Transfer Protocol). Este protocolo es normalmente utilizado para enviar y recibir
ficheros. Es el protocolo que se usa para enviar nuestras páginas al servidor de internet. Como
ya se puede imaginar en estos servidores se almacenan los archivos que forman parte de nuestra
presentación web.
• File: Apuntan hacia archivos contenidos en el mismo disco que se encuentra el navegador. No
resulta muy interesante poner estos URL en nuestras presentaciones puesto que otra persona que
desde otro sistema apunte hacia este URL, generalmente fallará en su intento y no podrá tener
acceso a él.
• Mailto: Se usa para mandar correos electrónicos. Cuando seleccionamos este tipo de URL se
 abre la aplicación de correo electrónico de nuestro ordenador para enviar un correo a la
dirección hacia la que apunta el URL. La forma estandar es: mailto:[email protected]
• News: Son URL de grupos de noticias, en estos servidores se almacenan mensajes el los que se
discuten sobre direfentes temas.
<HTML>
<HEAD>
<TITLE>Ejemplo 5</TITLE>
</HEAD>
<BODY>

<H1>Diferentes tipos de URLs</H1>

Enlace a <A HREF="http://www.webestilo.com">WebEstilo</A>.

<br>
Enlace al servidor de FTP
de <A HREF="ftp://ftp.mozilla.org/pub/mozilla/">Mozilla</A>.
<br>
Enlace a <A HREF="file:///C:">la unidad C
de su ordenador</A>.
<br>
Enlace a <a href="mailto:[email protected]">
mailto:[email protected]</a>.
<br>
Enlace a las <A HREF="news://msnews.microsoft.com">News de Microsoft</A>.
<br>

</BODY>
</HTML>

Listas
<UL> <OL> <LI>
Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco
tipos diferentes de listas, cada uno con tags distintas aunque con alguna en común:
• Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol> y cada elemento de la
lista estará encabezado por la tag <li> que puede o no llevar la tag de cierre </li>. Es
conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga
en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera
y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones.
• Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la
lista, también estará encabezado por la tag <li>. El resultado es que el navegador inserta viñetas
(marcadores) delante de cada elemento.
• Listas de menú y de directorio: Están en desuso puesto que su resultado suele ser,
prácticamente, idéntico al de las listas con viñetas.
• Menú: Englobadas por las tags <menu>.....</menu> y cada elemento encabezado por la
 tag <li>.
• Directorio: Englobadas por las tags <dir>.....</dir> y cada elemento encabezado por la
tag <li>.

• Listas de glosario: Cada elemento de la lista está compuesto por un término y una definición y
cada una de estas partes tiene su propia tag. Estas listas se engloban con las tags <dl>.....</dl>.
Para el término se usa la tag <dt> y para la definición la tag <dd>. Generalmente el navegador
colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la
tag de apertura el atributo compact: <dl compact>.
• Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria
sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde
estructurar bien las tags: Las tags de la lista principal englobarán todo el conjunto de las listas y
las tags de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le
empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML.

<HTML>
<HEAD>
<TITLE>Ejemplo 6</TITLE>
</HEAD>
<BODY>

<H1>Listas</H1>
Una lista ordenada
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
<br><br>
Una lista sin ordenar
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
<br><br>
Una lista de glosario
<dl>
<dt>T&eacute;mino 1</dt>
<dd>Definici&oacute;n 1</dd>
<dt>T&eacute;mino 2</dt>
<dd>Definici&oacute;n 2</dd>
</dl>
<br><br>

Listas anidadas
<ul>
<li>Uno
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</BODY>
</HTML>

Estilos de caracter
<B> <U> <I>
Estos estilo son tags que afectan a palabras o carácteres dentro de otras entidades de HTML
modificando el aspecto de ese texto para que sea diferente del texto que lo rodea. Existen dos tipos de
estilos:
• Estilos lógicos: Indican como se va a emplear el texto que realzamos, no el como se va a
formatear.
• <em>.....</em>: Indica que los carácteres estarán enfatizados de alguna manera,
generalmente en cursiva aunque dependerá del navegador.
• <strong>.....</strong>: Los carácteres tendrán mayor énfasis, generalmente en negrita.
• <code>.....</code>: Muestra como una fuente monoespaciada, generalmente Courier.
• <samp>.....</samp>: Muy similar a code.
• <kdb>.....</kdb>: Texto que el usuario debe escribir.
• <var>.....</var>:Nombre de una variable que deba ser reemplazada por su valor real.
Generalmente en cursiva o subrayada.
• <dfn>.....</dfn>:Se usa para resaltar una palabra que se va a definir.
• <cite>.....</cite>: Se usa para citas cortas.

• Estilos físicos: Modifican la presentación real del texto.

• <b>.....</b>: Pone el texto en negrita.
• <i>.....</i>: Pone el texto en cursiva.
• <tt>.....</tt>: Pone el texto en fuente monoespaciada.
• <u>.....</u>: Subraya el texto afectado.
<HTML>
<HEAD>
<TITLE>Ejemplo 7</TITLE>
</HEAD>
<BODY>

<H1>Estilos de caracter</H1>
Un ejemplo de texto de <EM>realzado</EM>.<br>
Un ejemplo de texto de <STRONG>realzado</STRONG>.<br>
Un ejemplo de texto de <CODE>realzado</CODE>.<br>
Un ejemplo de texto de <SAMP>realzado</SAMP>.<br>
Un ejemplo de texto de <KDB>realzado</KDB>.<br>
Un ejemplo de texto de <VAR>realzado</VAR>.<br>
Un ejemplo de texto de <DFN>realzado</DFN>.<br>
Un ejemplo de texto de <CITE>realzado</CITE>.<br>
<br>
Un ejemplo de texto de <B>realzado</B>.<br>
Un ejemplo de texto de <I>realzado</I>.<br>
Un ejemplo de texto de <U>realzado</U>.<br>
Un ejemplo de texto de <TT>realzado</TT>.<br>

</BODY>
</HTML>

Saltos y lineas
<HR> <BR>
• Líneas divisorias: Se crean con la tag <hr> que no tiene tag de cierre ni lleva texto asociado. Se
puede especificar el ancho de la línea con el siguiente atributo
<hr width="80%">.
• Saltos de línea: La tag <br> inserta un salto de línea donde se coloque. Puede colocar tantas
como desee y se insertará un salto de línea por cada una de ellas.
<HTML>
<HEAD>
<TITLE>Ejemplo 9</TITLE>
</HEAD>
<BODY>

<H1>Saltos y lineas</H1>

<HR>
<HR width="80%">
<HR width="60%">
<HR width="40%">
<HR width="20%">

----
<br><br><br>
----
</BODY>
</HTML>
Carácteres especiales
Es posible que en un momento dado deseemos insertar un carácter que no sea ASCII en nuestro
documento HTML. Muy probablemente, si lo creamos nosotros con las combinaciones de teclas
habituales no llegue a poder ser leído por otra plataforma una vez publicado en Internet. Para solventar
este conflicto, HTML ofrece la posibilidad de insertar unas entidades de carácter que podrán ser
interpretados por todas las plataformas. Estas entidades pueden ser:
• Nombradas: Se suelen construir con el signo &, la abreviatura del carácter y acabado con el
signo punto y coma. El símbolo de registrado se construiría: &reg;
• Numeradas: Se construyen con los signos &#, el número correspondiente a la posición del
carácter en el conjunto ISO-Latin-1 (ISO-8859-1). El mismo símbolo de registrado, sería ahora:
&#174;
• Existen unas entidades reservadas, exclusivamente, para carácteres usados en tags pero que
nosotros no los pretendemos usar dentro de ninguna de ellas. Estos son:
• signo <, entidad &lt;
• signo >, entidad &gt;
• signo &, entidad &amp;
• signo ", entidad &quot;

Tablas
<TABLE> <TR> <TD>
Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes
filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que
puede representarse rápida y fácilmente.
El contenido de una tabla lo debemos desarrollar entre las tags <table>.....</table>.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las
columnas se calcularán automáticamente según las celdas que hay en cada fila.
Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <th> y <td> con sus
correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags
<th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse
en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes.

<HTML>
<HEAD>
<TITLE>Ejemplo 10</TITLE>
</HEAD>
<BODY>

<H1>Tablas b&aacute;sicas</H1>

<TABLE BORDER="1">
<TR>
<TH>Cabereca 1</TH>
<TH>Cabereca 2</TH>
<TH>Cabereca 3</TH>
</TR>
<TR>
<TD>Dato 1</TD>
<TD>Dato 2</TD>
<TD>Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 5</TD>
<TD>Dato 6</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Accesorios
Título
Cuando queramos titular una tabla, podemos escribirlo como texto normal o usando las tags
<caption>.....</caption>. Las tags de título van dentro de las tags de la tabla y son opcionales, el título
no es obligatorio. La tag de apertura puede llevar consigo el atributo align que indicará si el título va
encima o debajo de la tabla. align="top" indicaría encima de la tabla y align="bottom" indicaría en la
parte de abajo.

Alineación de celdas
Una vez colocadas las celdas, hay que alinear los datos dentro de cada celda. Así, dentro de cada tag de
celda podemos encontrar:
• El atributo align= define horizontalmente los datos al margen izquierdo (left), al derecho (right)
o centrado (center).
• El atributo valign= define verticalmente los datos en la parte superior (top), en la parte inferior
(bottom) o centrado (middle).

Celdas extendidas
Para crear una celda que abarque varias filas o columnas, debemos colocar en las tags <th> o <td> los
atributos:
• rowspan= más un valor para indicar el número de filas que se quiere abarcar.
• colspan= más un valor para indicar el número de columnas que se quiere abarcar.
Si opta por poner celdas extendidas en su presentación web, la cosa se complica bastante. Nuestra
recomendación: Coja lápiz y papel y dibuje la tabla con todas las filas y columnas que se quieren
formar porque así tendrá mucho más claro los valores que debe asignar a los atributos rowspan y
colspan y las tags a las que hay que asignarlos.

Espaciado

Podemos modificar el aspecto de la tabla cambiando el ancho de los bordes, el espaciado entre celdas y
el ancho de las mismas.
• width= Acompaña a <table> y especifica el ancho de la tabla, tanto en número de pixeles como
en porcentaje respecto al ancho de la pantalla. También puede acompañar a las tags <th> o <td>
para especificar el ancho de las columnas.
• Border= Anteriormente, ya hemos hablado de este atributo. Ahora le diremos que puede darle
un valor que indicará el ancho del borde en pixeles. Border="0" indicaría la ausencia de borde.
• Cellspacing= Suele acompañar a la tag <table>. Indica el número de pixeles que separan cada
celda. El valor predeterminado suele ser 2.
• Cellpadding= También acompaña a la tag <table>. Indica el espacio en pixeles entre el borde de
la celda y su contenido. El valor predeterminado suele ser 1.

<HTML>
<HEAD>
<TITLE>Ejemplo 11</TITLE>
</HEAD>
<BODY>
<H1>Tablas avanzadas</H1>
<TABLE WIDTH="50%" BORDER="1" CELLSPACING="3" CELLPADDING="2">
<TR>
<TD COLSPAN="2" ALIGN="right">Dato 1</TD>
<TD>Un texto cualquiera</TD>
<TD ROWSPAN="2">Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 4</TD>
<TD ALIGN="center">Dato 5</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Imágenes
<IMG>
El uso de imágenes es uno de los factores que ha popularizado tanto World Wide Web. Incluir imágenes
en una presentación web es muy sencillo, solo debe de tener en cuenta que las imágenes tienen que
tener los formatos GIF, JPEG o PNG. Las imágenes en línea, se especifican a partir de la tag <img>
que no tiene una tag correspondiente de cierre pero que puede acompañarse de los siguientes atributos:
• src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la
URL que se va a representar.
• Align= Permite controlar la alineación de una imagen con respecto a una línea de texto
adyacente o a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos left,
right, top, middle y bottom.
• Alt= Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto.
Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras
se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima.
• WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a
representar la imagen, significa el ancho de la imagen que vamos a representar.
• HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa
el alto de la imagen.
• BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un bebé">

<HTML>
<HEAD>
<TITLE>Ejemplo 12</TITLE>
</HEAD>
<BODY>

<H1>Im&aacute;genes</H1>

<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un beb&eacute;"

ALIGN="RIGHT">
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=3 ALT="Un beb&eacute;"
ALIGN="LEFT">
Un texto cualquiera.
</BODY>
</HTML>
Formularios <FORM>
La Web se ha convertido en una poderosa arma para las empresas que se dedican a realizar encuestas y,
los formularios han sido una de las herramientas que han ayudado a este auge.
Los formularios nos van a permitir, desde dentro de una presentación web, solicitar información al
visitante. Estos formularios estarán compuestos por tantos campos como informaciones queramos
obtener. Una vez introducidos los valores en estos campos serán enviados a una URL donde se
procesará toda esta información.
Un formulario sigue siendo lenguaje html y por lo tanto necesita de unas tags que lo especifiquen. La
declaración de formulario queda recogida por las tags <form>.....</form> y dentro de ellas se recogerán
todas las variables de entrada.

A la tag de apertura <form> le acompañarán estos atributos:

• action="" Entre comillas se indica el programa que va a tratar las variables enviadas con el
formulario, un guión CGI o la URL mailto.
• Method="" Indica el método de transferencia de las variables. Post, si se envía a través del
STDIO. Get, si se envía a través de la URL.

<HTML>
<HEAD>
<TITLE>Ejemplo 14</TITLE>
</HEAD>
<BODY>
<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST">
<INPUT TYPE="text" NAME="nombre"><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>
</BODY>
</HTML>

Campos de entrada
<INPUT>
La tag <input> define la introducción de variables. Junto a esta tag encontraremos los siguientes
atributos:
• type="" Indicará el tipo de variable a introducir.
• text Indica que el campo a introducir será un texto. Sus atributos:
• maxlenght="" Seguido de un valor que limitará el número máximo de carácteres
a introducir en ese campo.
• size="" Seguido de un valor que limitará el numero de carácteres a mostrar en
 pantalla.
• value="" Indica que no hay valor inicial del campo.
• Password Indica que el campo a introducir será una palabra de paso. Mostrará asteriscos
en lugar de letras escritas. Sus atributos serán los mismos que para text.
• Checkbox El campo se elegirá marcando de entre varias opciones una casilla cuadrada.
• value="" Entre comillas se indicará el valor de la casilla.
• checked La casilla aparecerá marcada por defecto.
• Radio El campo se elegirá marcando de entre varias opciones una casilla circular.
• value="" Entre comillas se indicará el valor de la casilla.
• Image El campo contendrá el valor en coordenadas del punto de la imagen que haya
pinchado. Atributo obligatorio:
• src="" Entre comillas escribiremos el nombre del archivo de imagen.
• hidden El visitante no puede modificar su valor ya que no está visible. Se manda siempre
junto al atributo value= seguido de su valor entre comillas.
• Name="" Indicará el nombre que se asigna a un determinado campo.
<HTML>
<HEAD>
<TITLE>Ejemplo 15</TITLE>
</HEAD>
<BODY>
<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST">
Texto: <INPUT TYPE="text" NAME="nombre"><BR>
Password: <INPUT TYPE="password" NAME="contra"><BR>
Sexo:<INPUT TYPE="radio" NAME="boton1" VALUE="1"> Hombre
<INPUT TYPE="radio" NAME="boton1" VALUE="2">Mujer<BR>
Vehiculo:<INPUT TYPE="checkbox" NAME="Moto" VALUE="Si">Moto
<INPUT TYPE="checkbox" NAME="Coche" VALUE="" CHECKED>Coche
<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>
</BODY>
</HTML>

Campos de selección
<SELECT>
Las tags <select>.....</select> encierran los valores que podremos elegir a partir de una lista. Los
atributos que acompañan a la tag de apertura son:
• name="" Indicará el nombre del campo de selección.
• Size="" Indicará el número de opciones visibles. Si le asignamos 1, la selección se presentará
como un menú desplegable. Si le asignamos un valor mayor se presentará como una lista con
barra de desplazamiento.
• multiple Indica si se pueden realizar multiples selecciones.
Las diferentes opciones de la lista se indicarán mediante la tag <option> que puede acompañarse del
atributo selected para indicar cual es la opción que aparecerá por defecto. Si no lo especificamos,
siempre será la primera de la lista.
<HTML>
<HEAD>
<TITLE>Ejemplo 16</TITLE>
</HEAD>
<BODY>

<H1>Formularios</H1>

<FORM ACTION="mailto:unaprueba" METHOD="POST">

<SELECT NAME="Colores" MULTIPLE>
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>
<BR><BR>
<SELECT NAME="Colores" SIZE="1">
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>
<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>

</BODY>
</HTML>

Areas de texto
<TEXTAREA>
Con las tags <textarea>;.....</textarea> definimos un texto de múltiples líneas para que el visitante
pueda incluir un comentario junto a sus datos.
Junto a la tag de apertura pueden aparecer los siguientes atributos:
• name="" Nombre del campo.
• Cols="" Numero de columnas de texto visible.
• Rows="" Numero de filas de texto visible.
<HTML>
<HEAD>
<TITLE>Ejemplo 16</TITLE>
</HEAD>
<BODY>
<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST">
<TEXTAREA COLS=20 ROWS=10 NAME="Texto">
</TEXTAREA>
<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>
</BODY>
</HTML>

Botones
Se definen mediante la tag <input> a la que le acompañan los atributos:
• type="" Seguido de submit para enviar los datos del formulario y seguido de reset para borrar
los datos que se han introducido.
• Value="" Indica el texto que incorporaran los botones. Normalmente, enviar y borrar.
<HTML>
<HEAD>
<TITLE>Ejemplo 16</TITLE>
</HEAD>
<BODY>
<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST">
<TEXTAREA COLS=20 ROWS=10 NAME="Texto">
</TEXTAREA>
<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>

</BODY>
</HTML>