Prof.

Ariel Bouquet

Web Estática

.
Índice:

Página 3…………………………………Introducción al diseño Web.

Página 6…………………………………¿Qué es el Diseño Grafico?

Página 9…………………………………Introducción a HTML

Página 11………………………………..Estructura Básica HTML

Página 12………………………………..Definición de texto y párrafo

Página 13………………………………..Listas

Página 16………………………………..Caracteres especiales

Página 17………………………………..Enlaces/Hipervínculos

Página 21………………………………..Inserción de imágenes

Página 23………………………………..Frames/Marcos

Página 25………………………………..Fondos con Imágenes

Página 26………………………………..Dimensionar Imágenes

Página 27………………………………..Tablas

Página 32………………………………..Ejercicios

1
 Introducción al Diseño Web

Historia del Diseño Grafico

El ser humano ha tenido siempre la necesidad de comunicarse con sus semejantes, hasta tal punto
que podemos afirmar que si el hombre es el ser más avanzado de la naturaleza, es debido en gran
parte a la facilidad que ha tenido para hacer partícipe a los demás de sus ideas de una forma u otra.

Las primeras formas comunicativas fueron mediante elementos visuales. Antes de que desarrollaran
capacidades de expresión mediante el lenguaje hablado, los hombres utilizaron su cuerpo para
comunicar a los demás estados de ánimo, deseos e inquietudes a través de ademanes, expresiones y
signos, que con el tiempo adquirieron la condición de "lenguaje", al convertirse en modelos de
comunicación.

Aunque posteriormente el lenguaje hablado pasara a ser el medio de intercambio de información

más directo, el lenguaje visual siguió teniendo un importante peso en las relaciones comunicativas,
sobre todo a partir del uso de diversos materiales y soportes como medios del plasmar mensajes
visuales, como lo demuestran multitud de dibujos en piedra y pinturas rupestres que han llegado a
nuestros días, en las cuales se representan elementos naturales, actividades cotidianas y diferentes
signos artificiales con significado propio.

(Pintura Rupestre)
Cueva de Altamira España

(Pintura Rupestre)
San Luís Argentina

La representación de ideas mediante grafos

experimentó su mayor avance con la aparición de los
lenguajes escritos, que
permitieron expresar cadenas estructuradas de
pensamientos mediante un conjunto de elementos
gráficos de significado
propio dispuestos según una estructura definida,
capaces de transmitir mensajes entendibles por la
comunidad.
Estos lenguajes escritos estaban basados, bien en la
representación de elementos tomados de la
naturaleza, a los que se les
asignaba una interpretación particular, bien en un
conjunto artificial de símbolos inventados: los
alfabetos. Cada uno de
estos signos aislado tenía a veces un significado
incierto, pero unido a otros, permitían representar gráficamente el lenguaje
hablado por cada pueblo o cultura.

2
Posteriormente, Johann Gutenberg inventó la imprenta, artefacto capaz de reproducir en grandes
cantidades y de forma
cómoda un original, lo que hizo posible que los documentos impresos y el mensaje que contenían
fueran accesibles a un
gran número de personas.

Primer libro impreso

Pronto empezaron a aparecer imprentas en las que se reproducían todo tipo de obras, cada vez más
elaboradas. Se
empezaron a usar nuevos materiales como soporte, nuevas tintas y nuevos tipos de letras,
originando la aparición de unos
profesionales especializados en su manejo, los tipógrafos y los cajitas, tal vez los primeros
diseñadores gráficos como tal, ya
que se encargaban de componer y maquetar los diferentes elementos que iban a formar una obra de
forma que resultara
lógica, clara, armoniosa y bella.
Otro gran impulsor del desarrollo del diseño gráfico fue la Revolución Industrial. Surgieron las
fábricas y la economía de
mercado, un gran número de personas se desplazó a las ciudades a trabajar, aumentaron las tiendas
y los comercios y
empezó la competitividad entre empresas por hacerse con una parte del mercado. Con ello apareció
y se desarrolló una
nueva técnica comercial, la publicidad, encargada de hacer llegar a los consumidores mensajes
específicos que les convencieran de que un producto dado era mejor que otros análogos.

Cartel Publicitario

El desarrollo de la publicidad trajo consigo un desarrollo paralelo del diseño gráfico y de los
soportes de comunicación.
Había que convencer al público de las ventajas de un producto o marca, y para ello nada mejor que
mensajes concisos,
cargados de componentes psicológicos, con diseños cada vez más elaborados, que se hacían llegar
al mayor número posible

3
de personas. El cómo se transmitía la información llegó incluso a superar en importancia a la misma
información
transmitida.
No se trataba ya de presentar mensajes visuales bellos, sino efectivos, que vendieran, y para ello no
se dudo en realizar
grandes inversiones, haciendo posible un gran avance en las técnicas de diseño y la aparición de
profesionales dedicados
exclusivamente a desarrollarlas y ponerlas en práctica: los diseñadores gráficos.
En el siglo XX, hicieron su aparición los ordenadores, máquinas en un principio destinadas a un
grupo reducido de técnicos
y especialistas, pero que poco a poco fueron ganando popularidad y que con la aparición del
ordenador personal se
extendieron a todos los ambientes y grupos sociales.
La PC es útil porque permite el uso de programas informáticos capaces de realizar multitud de
tareas. Pero estos
programas tienen una estructura interna muy compleja, que la mayoría de las veces va más allá de
los conocimientos que
poseen los usuarios de los mismos.
Esto dio lugar a la introducción de unos elementos intermedios, denominados "Interfaces de
Usuario", cuya misión era
aislar al usuario de las consideraciones técnicas y procesos internos de los programas,
permitiéndoles realizar tareas con ellos
por medio de un "lenguaje" intermedio, más fácil de entender por el usuario.

Interfase Grafica de Usuario.

La labor de diseñar estas IGU correspondió inicialmente a los mismos programadores que
desarrollaban las aplicaciones,
pero pronto se vio que su concepto de interfase de usuario no se correspondía con la que
necesitaban los usuarios finales.
Hacía falta pues profesionales del diseño que se encargaran de concebir las interfaces, pero los
diseñadores gráficos clásicos
no estaban acostumbrados a construir obras con capacidades de interacción y navegabilidad, por lo
que hubieron de
reciclarse, aprendiendo conceptos y funcionalidades nuevas.
Con la entrada en escena de Internet y las páginas Web se hizo aún más patente el desfase de los
diseñadores gráficos con el
nuevo medio. Hacía falta ahora diseñar y construir interfases de usuario muy especiales,
condicionadas a pequeños tamaños
de fichero y a un medio concreto de presentación, los navegadores Web, que imponían serias
limitaciones al diseño, que
necesitaban sistemas de navegación entre páginas simples y entendibles.

Interfase Web.

4
Si a esto sumamos la necesidad de los creadores de interfaces Web de conocer a fondo diferentes
lenguajes de marcas y de
programación (HTML, JavaScript, DHTML), es evidente que era necesaria la aparición de un nuevo
profesional, el
diseñador Web, híbrido entre el diseñador gráfico clásico y el programador de aplicaciones para
Internet.

Actividad 1:
A) A mano alzada y en papel realizar una propaganda o re inventar una propaganda de un producto inventado o ya establecido.
B) Utilizando Gimp u otra aplicación diseñar la misma propaganda en forma digital.
C) De acuerdo a tu experiencia con al actividad, que diferencias encontraste en: Tiempo de trabajo, facilidad de trabajo, que
conocimiento tuviste que utilizar entre un trabajo y otro, de que manera se pueden difundir las actividades.

Diseño gráfico

Podemos definir el diseño gráfico como el proceso de programar, proyectar, coordinar, seleccionar y
organizar una serie de
elementos para producir objetos visuales destinados a comunicar mensajes específicos a grupos
determinados.
La función principal del diseño gráfico será entonces transmitir una información determinada por
medio de composiciones
gráficas, que se hacen llegar al público destinatario a través de diferentes soportes, como folletos,
carteles, trípticos, etc.
El diseño gráfico busca transmitir las ideas esenciales del mensaje de forma clara y directa, usando
para ello diferentes elementos gráficos que den forma al mensaje y lo hagan fácilmente entendible
por los destinatarios del mismo.
El diseño gráfico no significa crear un dibujo, una imagen, una ilustración, una fotografía. Es algo
más que la suma de todos
esos elementos, aunque para poder conseguir poder comunicar visualmente un mensaje de forma
efectiva el diseñador debe
conocer a fondo los diferentes recursos gráficos a su disposición y tener la imaginación, la
experiencia, el buen gusto y el
sentido común necesarios para combinarlos de forma adecuada.
El resultado final de un diseño gráfico se denomina grafismo, y es una unidad por sí misma, aunque
esté compuesto por
multitud de elementos diferentes. Podemos establecer una analogía entre un grafismo y un plato de
cocina. Ambos están

5
compuestos por diferentes elementos individuales que, unidos correctamente y con sabiduría,
componen una obra final
única y definida que va más allá de la suma de las partes que la forman.

Formas, Colores y gráficos.

Toda obra de comunicación visual nace de la necesidad de transmitir un mensaje específico. Un

diseñador gráfico no es un
creador de formas, sino un creador de comunicaciones, un profesional que mediante un método
específico (diseño)
construye mensajes (comunicación) con medios visuales (grafismos). No es el creador del mensaje,
sino su intérprete.
El principal componente de toda composición gráfica es pues el mensaje a interpretar, la
información que se desea hacer
llegar al destinatario a través del grafismo. Esta información se debe representar por medio de
diferentes elementos gráficos,
que pueden ser muchos y variados, aunque los más comunes son:

• Elementos gráficos simples: puntos y líneas de todo tipo (libres, rectas, quebradas curvas, etc.)
• Elementos geométricos, con contorno o sin él: polígonos, círculos, elipses, óvalos, etc.
• Tipos: letras de diferentes formas y estructura, utilizadas para presentar mensajes textuales.
• Gráficos varios: logotipos, iconos, etc.
• Ilustraciones
• Fotografías
• Cualquier otro elemento visual apto para comunicar un mensaje.

Un diseño limpio

6
Estos elementos básicos se combinan unos con otros en un grafismo, y de esta combinación surge un resultado final en el
que tienen mucha importancia una serie de conceptos propios del diseño gráfico, entre los que destacan:
• Las agrupaciones: conjuntos de elementos relacionados mediante proximidad, semejanza, continuidad o simetrías.
• La forma: forma de cada elemento gráfico aislado y de las agrupaciones de elementos.
• Los contornos: partes límites de los elementos, que permiten distinguirlos de los demás y del fondo, pudiendo
estar definidos mediante border, cambios de color o cambios de saturación.
• La ubicación: lugar que ocupa cada elemento gráfico o agrupación de ellos en el espacio del grafismo.
• El tamaño: tamaño relativo de cada elemento gráfico respecto los que le rodean. Escalas.
• El color: color de cada elemento individual, colores de cada agrupación de elementos, conjunto total de colores
usado en un grafismo, disposición relativa de los elementos con color y armonía entre colores.
• El contraste: intensidad de visualización de cada elemento con relación a los que le rodean y al grafismo completo.
• El equilibrio: cada grafismo conlleva un sistema de referencia espacial que consigue un nivel de equilibrio mayor o
menor.
• La simetría: disposición espacial regular y equilibrada de los elementos que forman la composición gráfica.
Los diferentes elementos de un grafismo son percibidos por el destinatario de acuerdo con la influencia que ejercen cada
uno estos conceptos a nivel individual, grupal y total. Pero la unión de todos ellos, la obra gráfica, es una entidad
comunicativa individual y completa, cargada de complejos elementos humanos asociados con el lenguaje, la experiencia, la
edad, el aprendizaje, la educación y la memoria.

Diseño gráfico en la Web

El diseño gráfico de una página Web es tan solo una parte del diseño de la misma, ya que, además, hay que considerar un
conjunto más o menos extenso de condicionantes que van a limitar la libre creatividad del diseñador.
En primer lugar, las páginas Web se deben descargar de un servidor Web remoto por medio de Internet, por lo que el ancho
de banda de las conexiones de los usuarios va a ser un factor clave en la velocidad de visualización. La mayoría de los
usuarios que se conectan a Internet. Los elementos gráficos, ya tengan formato de mapa de bits o vectorial, suelen traducirse en
ficheros de bastante peso, dependiendo del tamaño de la imagen y del formato en que se guarde. Esto origina que las páginas
que contienen en su diseño muchas imágenes, o pocas pero de gran tamaño, tarden mucho tiempo en ser descargadas desde el
servidor web y presentadas en la ventana del ordenador del usuario, que no suele ser muy paciente.
Estudios realizados demuestran que el tiempo máximo de aguante de una persona que espera la descarga de una página
suele ser de unos 10 segundos, pasados los cuales prefiere abandonar nuestro sitio Web y buscar otro más rápido. Por lo
tanto, el número de elementos gráficos que podemos introducir en una página Web queda bastante limitado, teniendo que
buscar alternativas mediante el uso imaginativo de fuentes y colores.
Otro aspecto a tener en cuenta es que las páginas Web son visualizadas en unas aplicaciones específicas, los navegadores
Web, que imponen grandes limitaciones al diseño de las mismas. La ventana de un navegador es eminentemente rectangular,
con unas medidas concretas (dadas por la resolución empleada por el usuario en su monitor) y con unas capacidades de
interpretación de colores que varían mucho según el ordenador usado, el sistema operativo, el monitor y la tarjeta gráfica.
Estos factores imponen fuertes limitaciones al diseñador Web, que debe buscar siempre que sus páginas puedan ser
visualizadas correctamente por el mayor número de usuarios.

Diseño de un formulario Web

7
Para intentar solventar estas diferencias, el diseñador Web debe trabajar a la vez con varios
navegadores, diseñando sus
páginas de tal forma que la interpretación de ellas sea similar en todos, lo que impone nuevas
limitaciones al diseño.
Por otra parte, una página Web no es un diseño gráfico estático, sino que contiene diferentes
elementos que tienen la
capacidad de interaccionar con el usuario, como menús de navegación, enlaces, formularios, etc.
Además, una página aislada
no existe, sino que forma parte de un conjunto de páginas inter-relacionadas entre sí (el sitio Web),
que deben presentarse al
usuario con el mismo “estilo”, aunque su funcionalidad sea muy diferente.
A esto hay que sumar que las páginas diseñadas deben luego construirse en un lenguaje específico,
el HTML, que por sí
mismo es muy limitado, lo que hace que el diseñador Web tenga que estar siempre pensando si la
interfase que está
diseñando gráficamente va a poder ser luego construida.
Por último, una página Web suele ocultar, en la mayoría de los casos, una serie de procesos
complejos que se ejecutan sin que
el usuario sea consciente de ellos (ejecución de códigos de lenguajes de programación tanto en
cliente como en servidor,
acceso a bases de datos en servidores remotos, etc.), procesos que añaden tiempo a la presentación
de las páginas y que
muchas veces suelen afectar de forma importante al diseño de estas, ya que el diseñador no sabe de
antemano qué
contenidos concretos van a tener.

Resumiendo: el diseño Web va más allá del diseño gráfico, al influir en él multitud de factores que
limitan las posibilidades del diseño, pero también otros que añaden interactividad y funcionalidades
a una página Web que no tiene un cartel, folleto o revista.

8
Actividad 2:

Investigar distintos software, que permiten el desarrollo y manipulación de imágenes digitales. Realizar el
siguiente cuadro.

Software Libre / Licencia Características

Recordando algunos conceptos:

Guía de investigación

1) ¿Cómo se realiza la formación de colores en monitores de última generación?

2) ¿Cómo se calcula la resolución y por que es necesario conocer la resolución del monitor antes de
desarrollar un proyecto?
3) ¿Qué es la profundidad de imagen digital?
4) ¿Cómo calibrar un monitor de última generación?

Introducción a HTML.

Características del lenguaje HTML

Pero empecemos ya con lo que nos interesa. ¿Cómo se hace una página Web? Cuando los diseñadores del WWW
se hicieron esta pregunta decidieron que se debían cumplir, entre otras, las siguientes características:

• El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí.
• El Web tenía que ser hipertexto y debía ser fácil navegar por él.
• Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo...) y con todo
tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...).
• Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.

Estas características son las que marcaron el diseño de todos los elementos del WWW incluida la programación de
páginas Web. Como respuesta a todos estos requisitos se creo el lenguaje HTML (HiperText Markup Language),
cuyas siglas significan "lenguaje hipertexto de marcas".
Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página Web con diferentes
tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc.

Qué se necesita para crear una página Web

Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún
programa especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas con
cualquier ordenador y sistema operativo. El código HTML, como hemos adelantado en el párrafo anterior, no es
más que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todos
los sistemas operativos.

9
 Un editor como el bloc de notas es necesario para crear una pagina Web. Una vez hemos escrito el código
deberemos guardar el archivo (con formato de texto) con la extensión .html Editores Html libres

 CoffeCup.
 Bare Bones Software.
 MacroMates.
 Kompozer.
 Aptana.
 Notepad++
 BlueGriffon.
 Sublime Text
 Bluefish

ATENCIÓN: El World Wide Web es un sistema que diferencia las mayúsculas de las minúsculas. Es un error
común llamar a un archivo index.html y luego referirse a él como Index.html. Aunque en nuestra PC
puede funcionar al publicarlo seguramente no lo hará. Por esta razón es una norma general usar siempre
minúsculas para los nombres de los archivos html.

Las bases de HTML

Una vez repasadas unas nociones básicas de HTML y de la programación de páginas Web en general
entraremos de lleno en la programación con este lenguaje. Pronto nos daremos cuenta de la sencillez de
este lenguaje lo que le convierte en un lenguaje muy fácil de aprender y que nos permitirá crear páginas
con mayor facilidad aún.
Las órdenes de este lenguaje estarán formadas por unos comandos llamados etiquetas que pueden tener o
bien la siguiente estructura:
<NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>

Como vemos, la estructura está formada: una que marca el inicio de la etiqueta y otra que marca el final,
con texto entre ambas.

Por ejemplo, para indicarle al navegador que queremos que pinte una línea horizontal debemos escribir:
<hr>

Así de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los símbolos menor que (<) y
mayor que (>), todas las instrucciones de HTML deben ir encerradas entre estos dos símbolos.
10
Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas órdenes tienen en ocasiones
parámetros.
Por ejemplo la etiqueta <hr> dibuja una línea horizontal en la pantalla. Esta línea tiene un grosor
predeterminado y un ancho variable en función del tamaño de la ventana del navegador.

Sin embargo hay muchas formas de pintar una línea y sería deseable poder elegir detalles tales como la
anchura y el grosor que va a tener dicha línea. Para especificar este tipo de detalles se crearon los atributos
de las etiquetas.
Este nuevo elemento se introduce en una etiqueta de la siguiente manera:

<etiqueta atributo="valor">

Es decir, en primer lugar ponemos el nombre de la etiqueta, después el nombre del atributo seguido por un
signo igual y posteriormente el valor que queramos darle a ese atributo encerrado entre comillas una
etiqueta puede tener tantos atributos como se deseen y en ocasiones son necesarios para que la etiqueta
tenga algún significado.
En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que significa tamaño en inglés,
que permite controlar el grosor de la línea que será dibujada en pantalla.

Ejemplo: Realizar este ejemplo en la PC.

<HR SIZE = 1>

<HR SIZE = 2>
<HR SIZE = 3>
<HR SIZE = 5>
<HR SIZE = 10>

Estructura Básica de un documento HTML:

En primer lugar deberemos especificar que el archivo de texto que estamos escribiendo es un documento
HTML,
para ello usamos las instrucciones de inicio y fin de la etiqueta <html> al principio y al final de la
página respectivamente:

<html>
Código de la página
</html>

El código de la página esta formado a su vez por dos grandes bloques, la cabecera y el cuerpo.
La cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas
instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera:

<html>
<head>
Elementos de la cabecera
</head>
... Resto de código de la página...
</html>

En la cabecera de la página se introduce toda aquella información que afectará a toda la página. En un
principio esta información se limitará al título. Este título se indicará con la etiqueta title usando la
siguiente sintaxis:
11
<html>
<head>
<title>Mi primera página WEB</title>
</head>
</html>

El resultado de ver esta página con nuestro navegador es el que se observa en la figura 2.2. Como vemos,
el área de la pantalla donde suele estar la página está todavía vacía, pero si nos fijamos en la cabecera de
la ventana del navegador vemos que el título ha pasado de ser "Mi primera página WEB.

Además cuando un usuario vea nuestra página y decida incluirla en su lista de Webs preferidas con la
opción agregar a favoritos del menú Favoritos del navegador, añadirá el nombre que le hemos
dado a nuestra página en dicho menú. Aunque el nombre con el que se almacena un Favorito puede ser
cambiado por el usuario, si hemos puesto un buen título, lo suficientemente descriptivo a cada una de
nuestras páginas le evitaremos esa molestia.

Aplicar el siguiente código en el editor:

<html>
<head>
<title>Mi primer pagina WEB</title>
</head>
<body>
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les
guste.
</body>
</html>

Definición de textos/párrafos:
La etiqueta <P> se utiliza para separar en párrafos u oraciones. En esta etiqueta el cierre es opcional.
El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>,
<H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El
tamaño mayor es el correspondiente al número 1. Puedes experimentar en el ejemplo que
sigue, cambiando el número para comprobar el efecto que se logra.
Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER> (no la
soportan todos los navegadores, aunque sí la mayoría de ellos). Nos centra todo lo que
esté dentro de ella, ya sea texto, imágenes, etc.
También podemos aplicar los separadores (horizontal rules), que se consiguen con la etiqueta
<HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan
ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo, como se
puede observar a continuación:

Ejemplo práctico.

En el procesador de texto copiamos lo siguiente:

<HTML>
<HEAD>
<TITLE> Diseño de paginas web </TITLE>
</HEAD>

12
<BODY>
<H1> <CENTER> Pagina Inicial </CENTER> </H1>
<HR>
Esta es mi primera pagina, aunque todavia es muy sencilla. Como
el lenguaje HTML no es dificil, pronto estare; en condiciones de
hacer cosas mas interesantes.
<P> Este es el segundo parrafo. </P>
</BODY>
</HTML>

Comandos que dan formato al texto:

(BR, PRE, B, I, TT, BLOCKQUOTE, SUB, SUP, UL, LI, OL, DL, DD, DT, <!--, -->)
Como hemos visto en el ejemplo del capítulo anterior, cuando queremos poner un texto
sin ninguna característica especial, lo ponemos directamente. Únicamente, la separación
entre párrafos (dejando una línea en blanco) la conseguimos con la etiqueta <P> </P>.
Si queremos separar los párrafos, o cualquier otra cosa, pero sin dejar una línea en
blanco, usamos una etiqueta parecida <BR/> (break, o romper) al final de la línea. No
tiene etiqueta de cierre.
Si queremos obtener múltiples líneas en blanco basta con repetir la etiqueta <BR/>.
Así por ejemplo, si queremos obtener cuatro líneas en blanco, pondríamos:
<BR/>
<BR/>
<BR/>
<BR/>
Con lo que se obtienen las líneas en blanco.
Al escribir el texto, si ponemos más de un espacio en blanco entre dos palabras
observamos que el navegador sólo reconoce uno de ellos. Si queremos forzarle a que lo
haga, debemos poner el código "&nbsp;" (non-breaking space).

Para destacar alguna parte del texto se pueden usar:

• <B> y </B> para poner algo en negrita (bold).

• <I> y </I> para poner algo en cursiva (italic).

Otra etiqueta interesante es <PRE> y </PRE>. El texto que se encuentre entre ella estará preformateado,
es decir que aparecerá como si hubiera sido escrito con una máquina de escribir, con una fuente de
espaciado fijo (tipo Courier). Además se respetarán los espacios en blanco y retornos del carro, tal como
estaban en nuestro documento HTML (lo cual no ocurre normalmente, como hemos visto anteriormente).
Es muy apropiada para confeccionar tablas y otros documentos similares.
Con la etiqueta <TT> y </TT> conseguimos también que el texto tenga un tamaño menor y la apariencia
de los caracteres de una máquina de escribir (typewriter). La diferencia con la anterior es que no
preformatea el texto, sino que únicamente cambia su apariencia.
La etiqueta <BLOCKQUOTE> y </BLOCKQUOTE> se utiliza para destacar una cita textual dentro
del texto general.

En las fórmulas matemáticas puede interesar poder escribir índices y subíndices, que
se consiguen con las etiquetas <SUP> </SUP> y <SUB> </SUB> respectivamente. Así, por ejemplo:

m2 se consigue de la siguiente manera: m<SUP>2</SUP>

vx se consigue con: v<SUB>x</SUB>

A menudo nos interesará presentar las cosas en forma de listas. Podemos escoger entre tres tipos distintos:
13
1. Listas desordenadas (no numeradas)
2. Listas ordenadas (numeradas)
3. Listas de definición.
Las listas desordenadas (unordered lists) sirven para presentar cosas que, por no tener un orden
determinado, no necesitan ir precedidas por un número. Su estructura es la siguiente:

<UL>
<LI> ALICANTE
<LI> CASTELL&Oacute;N
<LI> VALENCIA
<LI> Etc.
</UL>

Es decir, toda la lista está dentro de la etiqueta <UL> y </UL>, y luego cada cosa va
precedida de la etiqueta <LI> (list item).

El resultado de lo anterior es el siguiente:

 ALICANTE
 CASTELLÓN
 VALENCIA
 Etc.

Se puede anidar una lista dentro de otra. Por ejemplo:

<UL>
<LI> Mamiferos acuaticos
<LI> Peces
<UL>
<LI> Sardina
<LI> Bacalao
</UL>
<LI> Aves
</UL>

Que daría el siguiente resultado:

• Mamíferos
• Peces
o Sardina
o Bacalao
• Aves

Las listas ordenadas (ordered lists) sirven para presentar cosas en un orden determinado. Su estructura es
muy similar a la anterior. La diferencia estriba en que en el resultado aparecerá automáticamente un
número correlativo para cada cosa.

<OL>
<LI>Primera evaluaci&oacute;n
<LI>Segunda evaluaci&oacute;n
<LI>Tercera evaluaci&oacute;n
<LI>Etc.
</OL>
14
El resultado es:

1. Primera evaluación
2. Segunda evaluación
3. Tercera evaluación
4. Etc.

En este ejemplo se aplican los códigos para introducir los acentos que veremos mas adelante.

Al igual que las listas desordenadas, también se pueden anidar las listas ordenadas.
El tercer tipo lo forman las listas de definición. Como su nombre indica, son
apropiadas para glosarios (o definiciones de términos). Toda la lista debe ir englobada
entre las etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto, cada
renglón de la lista tiene dos partes: 1) el nombre de la cosa a definir , que se consigue con

la etiqueta <DT> (definition term) y 2) la definición de dicha cosa, que se consigue con la
etiqueta <DD> (definition definition).

<DL>
<DT> ¿Qu&eacute; es la electricidad?
<DD> Es el paso ordenado de electrones a trav&eacute;s de un conductor.
<DT> ¿Cu&aacute;l es la unidad de medida en el SI?
<DD> La unidad de medida en el SI es el metro.
</DL>

Su resultado es:

¿Qué es la electricidad?
Es el paso ordenado de electrones a través de un conductor.
¿Cuál es la unidad de medida en el SI?
La unidad de medida en el SI es el metro.
Comentarios no visibles en la pantalla
A veces es muy útil escribir comentarios en el documento HTML sobre el código que escribimos, que
nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en
pantalla.

Esto se consigue encerrando dichos comentarios entre estos dos símbolos: <!-- y -->
Ejemplo:

<!-- Esto es un comentario que no se verá en pantalla -->

Ejemplo práctico

<HTML>
<HEAD>
<TITLE> Ejemplo de formato de texto </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Departamentos del Centro </H1>
</CENTER>
15
<HR>
Sin un orden particular, los<B> departamentos </B> son los
siguientes:
<UL>
<LI> Tecnología
<LI> Lenguas
<UL>
<LI> Lengua Española
<LI> Lengua Italiana
<LI> Lengua Inglesa
<LI> Lengua Francesa
</UL>
<LI> Matemáticas
</UL>
La clase que más me gusta es <I> (en orden de preferencia): </I>
<OL>
<LI> Matemáticas
<LI> Lengua Española
<LI> Tecnología
</OL>
</BODY>
</HTML>

Actividad 3

1) Realiza una página que contenga una lista con los equipos divididos por continente.
2) Introduce un comentario no representado en pantalla.
3) En la misma pagina realizar un comentario de cual equipo seria el campeón y por que.

Los caracteres especiales.

(Acentos, eñes, espacios, etc.)

Existen algunas limitaciones para escribir el texto. Una de ellas es debido a que las etiquetas se forman
como un comando escrito entre los símbolos "<" y ">". Por tanto, si se quisieran escribir estos caracteres
como parte normal del texto, daría esto lugar a una ambigüedad, ya que el programa navegador podría
interpretarlos como el comienzo o final de una etiqueta, en vez de un carácter más del texto.
Para resolver este problema, existen unos códigos para poder escribir estos caracteres y otros relacionados
con las etiquetas.

 &lt; para < (less than, menor que)

 &gt; para > (greater than, mayor que)
 &amp; para & (ampersand)
 &quot; para " (double quotation)

Como se ve, estos códigos empiezan siempre con el signo & y acaban siempre con ; De una manera
similar, existen códigos para escribir letras específicas de distintos idiomas. Hay muchos de ellos, pero,
lógicamente, los que más nos interesan son los propios del castellano (las vocales acentuadas, la ñ y los
signos ¿ y ¡ )
Los códigos de las vocales acentuadas se forman comenzando con &, seguido de la vocal en cuestión,
seguido de la palabra acute (aguda) y terminando con el signo ;

&aacute; para la á &Aacute; para la Á

&eacute; para la é &Eacute; para la É
16
&iacute; para la í &Iacute; para la Í
&oacute; para la ó &Oacute; para la Ó
&uacute; para la ú &Uacute; para la Ú

El resto de los códigos son:

&ntilde; para la ñ &Ntilde; para la Ñ

&uuml; para la ü &Uuml; para la Ü
&#191; para ¿ &#161; para ¡
&nbsp; para el espacio

Actividad 4

1) Transcribir el siguiente texto a una pagina Web respetando los caracteres especiales.
2) Colocar el último párrafo en negrita y cursiva.

Hipervínculos / Enlaces hipertexto.

La característica que más ha influido en el espectacular éxito del Web (o tela de araña) ha sido, aparte la
de su carácter multimedia, la posibilidad de unir los distintos documentos repartidos por todo el mundo
por medio de enlaces hipertexto.

Estructuras de enlace:

En general, los enlaces tienen la siguiente estructura:

<A HREF="xxx"> yyy </A>

donde xxx es el destino del enlace (Obsérvese las comillas).

yyy es el texto indicativo en la pantalla del enlace (con un color especial y generalmente
subrayado)

Tipos de enlaces.

1. Enlaces dentro de la misma página.

2. Enlaces con otra página nuestra.
3. Enlaces con una página fuera de nuestro sistema.
4. Enlaces con una dirección de e-mail.

2) Enlaces dentro de la misma página:

En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este caso el sitio dentro
de la página a donde queremos saltar, se sustituye por #marca (la palabra marca puede ser cualquier
palabra que queramos). Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecerán en la
pantalla en color (en forma de hipertexto). Su estructura es, entonces:

<A HREF=”#marca”> YYY </A>

Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:

17
<A name=”marca”> </A>

Por ejemplo, si quiero saltar desde aquí a la pantalla final, pongo la siguiente etiqueta:

<A HREF=”#siguiente”> Pulsa para ir al p&aacute;rafo siguiente</A>

Que resulta como: Pulsa para ir al párrafo siguiente (Puedes comprobar cómo salta a la pantalla final)

Y en el párrafo siguiente del documento he puesto esta otra etiqueta:

<A NAME=”siguiente”> </A>

2) Enlaces con otra pagina del sitio Web:

Puede ser que tengamos una sola página. Pero lo más frecuente es que tengamos varias páginas, una
inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas. Supongamos que queremos
enlazar con la página creada en el ejemplo del capítulo anterior, que la hemos llamado pagina2.html.
En este caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre
del fichero:
<A HREF="pagina2.html"> Ejemplo del cap&iacute;tulo 8</A>

Que resulta como: Ejemplo del capítulo 8 (Puedes comprobar cómo carga esa página)

Si queremos que vaya a un sitio concreto de otra página nuestra en vez de ir al principio de la página,
adonde va por defecto, en ese sitio tenemos que colocar una marca (véase la sección anterior), y
completar el enlace con la referencia a esa marca.
Lo veremos con el siguiente ejemplo: Quiero poner un enlace desde aquí al capítulo 7, pero a un sitio
concreto, donde he puesto la marca

<A NAME="alinear"></A>.

Entonces la etiqueta tiene que ser:

<A HREF="pagina2.html#alinear"> Cap&iacute;tulo 8 </A>

Que resulta:

Capítulo 8

(Obsérvese cómo al pulsar el enlace salta al capítulo 8, pero no al comienzo, sino adonde
yo quiero que lo haga)

Nota:

Una observación importante: Estoy suponiendo que la página en la que estoy escribiendo esta etiqueta y la
otra página a la que quiero saltar están en el mismo directorio. Porque pudiera ocurrir que he organizado
mi sitio del Web con un directorio principal, y otros subdirectorios auxiliares. Si la página a la que quiero
saltar está, p. ej. En el subdirectorio subdir, entonces en la etiqueta tendría que haber puesto
"subdir/pagina2.html".

Y a la inversa, si quiero saltar desde una página a otra que está en un directorio anterior, en la etiqueta
tendría que haber puesto "../pagina2.html". Esos dos puntos hacen que se dirija al directorio anterior.
18
Obsérvese que se debe utilizar el símbolo / para indicar los subdirectorios, y no este otro \, que es propio
únicamente de Windows.
Si nos queremos evitar todas estas complicaciones, podemos tener todo junto en un único directorio, pero
esto tiene el inconveniente de que esté todo más desordenado, y sean más difíciles de hacer las futuras
modificaciones.

Enlaces fuera del proyecto:

Si queremos enlazar con una página que esté fuera de nuestro sistema (es decir, que esté en un servidor
distinto al que soporta nuestra página), es necesario conocer su dirección completa, o URL (Uniform
Resource Locator). El URL podría ser, además de la dirección de una página de la Web, una dirección de
ftp, gopher, etc.
Una vez conocida la dirección (o URL), lo colocamos en vez de lo que hemos llamado anteriormente xxx
(el destino del enlace). Si queremos enlazar con la página de PortalESO (cuyo URL es:
http://www.portaleso.com/), la etiqueta sería:

<A HREF="http://www.portaleso.com/"> P&aacute;gina inicial de PortalESO </A>

Que daría como resultado:

Página inicial de PortalESO

Es muy importante copiar estas direcciones correctamente (respetando las mayúsculas

y minúsculas, pues los servidores UNIX sí las distinguen).

Enlaces con e-mail:

En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la
dirección de e-mail. La estructura de la etiqueta es:

<A HREF="mailto: dirección de email"> Texto del enlace </A>

Un ejemplo de esto está al final de la página principal de este manual. Podría haber puesto:

Comentarios a <A HREF="mailto: mailto:portaleso@ono.com Informaci&oacute;n de PortalESO</

A>

Que resultaría:

Comentarios a Información de PortalESO

Pero hay algunos navegadores que no reconocen este tipo de enlace, y lo verían de esta manera:

Comentarios a Información de PortalESO

y no tendrían ningún medio de conocer la dirección de e-mail. Por lo tanto, es más seguro poner algo así
como:
Comentarios a Informaci&oacute;n de PortalESO en

Es decir, es conveniente, por la razón dicha anteriormente, poner también en el texto

del enlace la dirección de e-mail.

19
Actividad 5

1) En el procesador de texto copiamos el siguiente código:

<HTML>
<HEAD>
<TITLE> Curso para realizar la web de centro - 3</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Mis p&aacute;ginas favoritas </H1>
</CENTER>
<HR>
Estas son mis p&aacute;ginas favoritas:
<P><A HREF="http://www.portaleso.com">PortalESO (Portal Educativo)</A>
<BR> <A HREF="http:/www.microsoft.com"> Microsoft </A>
<BR> <A HREF="http://www.google.com"> Google</A>
</BODY>
</HTML>

Guardamos la pagina con el nombre enlaces.html

2) Crear una página con distintas especialidades de una clínica y que cada una de ellas sea un enlace.
Guardar el documento con el nombre clinica.html.

Inserción de imágenes.

La estructura de la etiqueta es:

<IMG SRC="portalesocom.gif">

Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen
llamada portalesocom.gif (o el nombre que tenga).
Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT

<IMG SRC="portalesocom.gif" ALT="PortalESO">

Con el comando ALT se introduce una descripción (una palabra o una frase breve) indicativa de la
imagen. Este comando, que en principio se puede omitir, es en beneficio de los que accedan a nuestra
página con un programa navegador en forma de texto sólo. Ya que no son capaces de ver la imagen, por lo
menos pueden hacerse una idea sobre ella. Pero no es sólo por esto. Hay casos, como veremos más
adelante, en los que se utiliza una imagen como enlace a otra página. Si se omitiera este comando, los que
utilizan dichos navegadores no podrían de ninguna manera acceder a esas páginas. Con respecto a la
localización del fichero de esa imagen, se puede decir aquí lo mismo que en el capítulo anterior referente
a los enlaces. Si no se indica nada especial, como en el caso que se ha expuesto, quiere decir que el fichero
portalesocom.gif está en el mismo directorio que el documento HTML que estamos escribiendo. Si no es
así, se siguen los mismos criterios que los indicados para los enlaces.
Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes, pues una imagen grande
supone un fichero grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente riesgo
de que quien esté intentando cargar nuestra página se canse de esperar, y desista de ello.
Para elegir la posición de la imagen con respecto al texto hay distintas posibilidades. La más sencilla es
colocarla entre dos párrafos, con un titular a un lado. De momento nos vamos a limitar a escoger la

20
posición del titular con respecto a la imagen (si es que queremos ponerle un titular, claro está). Se puede
poner arriba, en medio o abajo del lado de la imagen. Para ello se añade el comando ALIGN a la etiqueta,
de la siguiente manera:

<IMG SRC="isla.gif" ALIGN=”TOP”> Titular alineado arriba

<IMG SRC="isla.gif" ALIGN=”MIDDLE”> Titular alineado en medio
<IMG SRC="isla.gif" ALIGN=”BOTTOM”> Titular alineado abajo

Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra
página. Para estos casos se utilizan generalmente imágenes pequeñas (iconos), aunque
se puede usar cualquier tipo de imagen.

Según vimos en el capítulo anterior, la estructura general de un enlace es:

<A HREF="xxx"> yyy </A>

donde xxx era el destino del enlace e yyy el texto del enlace (o más generalmente hablando, lo que
aparece en la pantalla como el enlace; en el capítulo anterior era un texto, y en éste va a ser una imagen).
En este caso sustituimos xxx por el nombre del fichero de la página a la que queremos acceder. Y en lugar
de yyy ponemos la etiqueta completa de la imagen (que queda así englobada dentro de la etiqueta del
enlace)

Como ejemplo vamos a utilizar la imagen (Argentina.gif)

para acceder al ejemplo práctico (pagina2.html):

<A HREF="pagina2.html"><IMG SRC="Argentina.gif"></A>

Queda como resultado:

<A HREF="pagina2.html"><IMG SRC="portalesocom.gif" BORDER=”0”></A>

También podemos utilizar una imagen para enlazar con otra imagen. En este caso sustituimos xxx (el
destino del enlace) con el nombre del fichero de la imagen a la que queremos acceder e yyy (lo que
aparece en pantalla como el enlace) por la etiqueta completa de la imagen que queremos que aparezca en
la pantalla como el enlace de la otra.

Supongamos que queremos enlazar con la imagen isla.gif por medio de esta otra
imagen: (inicio.gif):

<A HREF="isla.gif"><IMG SRC="inicio.gif"></A>

Que da como resultado:

Por último, otra posibilidad es la de utilizar un texto para enlazar con una imagen. En este caso
sustituimos xxx (el destino del enlace) con el nombre del fichero de la imagen a la que queremos acceder e
yyy (lo que aparece en pantalla como el enlace) por el texto.

Supongamos que queremos enlazar con la imagen isla.gif por medio del texto "un paraíso tropical":

<A HREF="isla.gif"> un para&iacute;so tropical </A>

21
Que da como resultado: un paraíso tropical

Un tipo de imágenes del que se hace abundante uso y que sirven para mejorar la presentación de la página
son los iconos, botones, barras separadoras, etc. A pesar de su tamaño o forma, son imágenes como
cualquier otra.
Por ejemplo, vamos a capturar el botón que está a continuación. Colocamos el puntero del ratón justo en
el botón, y pulsamos la tecla derecha. Si nuestro navegador implementa esta característica, aparece un
menú en el que está la posibilidad de guardar esta imagen (boton.gif). Lo hacemos, en el mismo directorio
en el que va a estar nuestro documento. Para utilizarlo en el comienzo de una línea, escribiríamos en el
sitio correspondiente:

<IMG SRC="boton.gif> Esta l&iacue;nea esta precedida por un bot&oacute;n

dorado.

Que resulta: Esta línea esta precedida por un botón

Podemos hacer lo mismo con la barra separadora que está en todas las páginas de
este manual (barra.gif). La capturamos, la guardamos y escribimos:

<CENTER><IMG SRC="barra.gif>

<BR>Esta l&iacute;nea esta debajo de una barra separadora.

</CENTER>

Que resulta:

Actividad 6

1.- Busca gráficos, que identifiquen varias páginas Web y crea una página Web que enlace
hasta estas páginas. Por lo menos debe haber 5 páginas.

2.- Busca un gráfico que pueda servir para identificar tu grupo de musica. Crea un icono de 90x20 píxel
que se pueda utilizar como icono identificativo de tu grupo.
Junto con los iconos del resto de compañeros, crea una página donde aparezca un enlace a cada una de las
páginas de los otros grupos de música, donde el enlace se realice a través de los gráficos. El nombre de la
página será nombre_grupo.html y se encontrará en un directorio de nombre música.

Marcos y Frames:

Loas marcos o frames son divisiones dentro de una página. Son zonas diferentes independientes. La
división puede hacerse en forma de columnas, filas o una combinación de ambas. La página de cada
marco tendrá diferentes características. Desde un enlace en un marco se puede acceder a otro marco o
pagina. Por ejemplo en marco puede haber un menú con opciones que me lleven a una ampliación de
información que se encuentra en otro frame.

Composición y etiquetas:

Una página compuesta con frames se compone de un archivo principal, con la definición de los
frames o marcos que va a tener, y tantas páginas o archivos HTML como marcos vaya a tener.

22
 La página principal es una página en HTML, en la que la etiqueta<body> ... </body> es sustituida
por la etiqueta <frameset> ... </frameset>.

Dentro de la etiqueta frameset se insertan las etiquetas <frame src="ruta_de_la_página"/>.

Cada etiqueta frame debe coincidir con una partición de la página, y el atributo src tiene la ruta al
archivo html que irá en esa parte de la página. Los archivos html pueden ser tanto internos (del propio
sitio Web), como externos (de otros sitios Web).

Para hacer la partición de la página, la etiqueta frameset debe llevar el atributo cols (columnas)
o rows (filas), para partir la página en varias columnas o en varias filas. La etiqueta frameset solo admite
uno de estos dos atributos, por lo que debemos decidir cómo hacer la partición principal de la página, si en
filas o columnas.
Si queremos poner filas y columnas a la vez lo haremos anidando etiquetas frameset
El número de filas (o de columnas) y el espacio que van a ocupar, lo indicaremos en el valor del
atributo rows (o cols), indicando el espacio ocupado por cada una de ellas, separados por comas, ejemplo:
<frameset rows="20%,65%,15%">

Esta sería una página partida horizontalmente en tres partes, la primera con un 20% de la pantalla, la
segunda con un 65%, y la tercera con un 15%. Además de en tantos por ciento las medidas de los frames
pueden expresarse en píxeles, para ello sólo hay que escribir el número de píxeles (sin "px" detrás).
También podemos dejar una columna o fila sin definir el tamaño, para que ocupe todo el resto de la
pantalla que no ocupan las demás, en ese caso, en lugar de porcentaje o número escribimos un asterisco ( *
). Ejemplo:

<frameset cols="200,*,200">

Ejemplo de página con frames

Vamos a hacer un ejemplo clásico de página con cabecera, pie de página y diseño central a tres
columnas (menú izquierdo, contenido, y lateral derecho). En principio partiremos la página en horizontal
en tres partes (la cabecera, el cuerpo principal, y el pie de página).

El código HTML de la página principal será el siguiente:

<html>
<head>
<title>Diseño con frames 1</title>
</head>
<frameset rows="100,*,100">
<frame src="pagina1.html" />
<frame src="pagina2.html" />
<frame src="pagina3.html" />
</frameset>
</html>
Observa como en esta página no está la etiqueta body la cual ha sido sustituida por la
etiqueta frameset. El número de etiquetas frame dentro de la etiqueta frameset debe ser igual al número de
filas especificadas en el atributo rows
Cada etiqueta frame apunta hacia un archivo html mediante el atributo src este archivo es el que se
verá en el espacio que ocupa cada fila.

23
 Ahora tenemos que crear los archivos "pagina1.html", "pagina2.html" y "pagina3.html", y colocarlos
en la misma carpeta que el archivo principal. estos son sus códigos HTML:

página 1: Cabecera

<html>
<head>
<title>pagina1</title>
</head>
<body bgcolor="aqua">
Página 1: esta va a ser la cabecera.
</body>
</html>

página 2: Principal
<html>
<head>
<title>pagina2</title>
</head>
<body bgcolor="silver">
Página 2: esta va a ser el contenido.
</body>
</html>

página 3: Pie
<html>
<head>
<title>pagina3</title>
</head>
<body bgcolor="yellow">
Página 3: esta va a ser el pie de página.
</body>
</html>

Dentro de cada frame hemos dado un color de fondo diferente y hemos insertado un poco de texto para
distinguirlos. El título que demos a cada frame es indiferente, ya que en el navegador sólo se verá el título
de la página principal.

Fondos con una Imagen:

El fondo de una página puede ser también una imagen, ya sea en formato GIF o JPEG.
Esta imagen se repite por toda la página, de una manera análoga al tapiz de Windows. La estructura de la
etiqueta es:

<BODY BACKGROUND="imagen.gif">

o bien:

<BODY BACKGROUND="imagen.jpg">

No todos los navegadores soportan este formato

24
Se pueden añadir también a esta etiqueta todos los comandos para cambiar los colores del texto y de los
enlaces, vistos anteriormente. Esto es imprescindible a veces para conseguir que el texto sea legible, en
contraste con el fondo.

Alineación y dimensionado imágenes:

(Top, middle, buttom, align, clear, width, height)

La alineación de las imágenes fue, en su día, el primer golpe de efecto del programa Navigator de
Netscape. Permitió alinear una imagen a la izquierda o a la derecha de la página y hacer que el texto la
rodee completamente, consiguiéndose así una apariencia similar a la de una revista.

Es el caso de este párrafo con respecto a la imagen de la derecha. Obsérvese

cómo las líneas, cuando rebasan su parte inferior, continúan normalmente
hasta el margen derecho de la página. De manera análoga, se puede alinear la
imagen a la izquierda, comportándose el texto de una forma equivalente.
Esto se consigue con las extensiones de la etiqueta ALIGN, con los
comandos TOP, MIDDLE y BOTTOM.

Pero entonces sólo se hacía referencia al titular de la imagen, es decir, a un texto

explicativo, pero menor que una línea completa, pues en caso de rebasarla, el
texto saltaba a la parte inferior de la imagen, dejando un hueco en blanco, con lo
que su utilidad era muy limitada. Este inconveniente queda solventado con los
comandos de Netscape RIGHT (derecha) y LEFT (izquierda). La imagen de
arriba, "doom.gif", alineada a la derecha, se ha obtenido con la etiqueta:

<IMG SRC="doom.gif" ALIGN=”RIGHT”>

y la imagen de abajo, "doom2.gif", alineada a la izquierda, se ha obtenido con la etiqueta:

<IMG SRC="doom2.gif" ALIGN=”LEFT”>

Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta
debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes
extensiones de la etiqueta <BR>:

<BR CLEAR=”LEFT”> Busca el primer margen libre (clear) a la izquierda.

<BR CLEAR=”RIGHT”> Busca el primer margen libre a la derecha.
<BR CLEAR=”ALL”> Busca el primer margen libre a ambos lados.

Un ejemplo para aclarar esto:

<IMG SRC="isla.gif" ALIGN=”LEFT”> Este texto esta a un lado de la imagen.

<BR> Este tambi&eacute;n esta a un lado de la imagen, en la l&iacute;nea siguiente.
<BR CLEAR=”LEFT”> Este otro texto, en cambio, ha buscado el primer margen libre
a la izquierda.

Este texto esta a un lado de la imagen.

Este también esta a un lado de la imagen, en la línea siguiente.

25
Este otro texto, en cambio, ha buscado el primer margen libre a la izquierda.

Dimensionando la imagen:

Los programas navegadores cuando cargan un documento HTML y encuentran una etiqueta de una
imagen, interrumpen el proceso de carga y solicitan al servidor que le envíe dicha imagen, quedando a la
espera hasta que se complete el envío, repitiéndose este proceso con cada una de las imágenes.
Esto es especialmente molesto cuando, como ocurre frecuentemente, en la cabecera de la página se
encuentra una imagen grande, ya que durante un tiempo relativamente largo no se verá nada en la pantalla.
Para evitar este inconveniente existen unas extensiones de la etiqueta de la imagen
<IMG SRC="imagen.gif"> que sirven para indicar al navegador cuáles son sus dimensiones en pixeles.
En este caso, el navegador actúa de una forma más favorable, ya que entonces, como conoce las
dimensiones de las imágenes les reserva un espacio en la pantalla y va colocando el texto de forma
apropiada, sin ninguna interrupción, a la vez que va rellenando esos espacios reservados a las imágenes.

Estos comandos son WIDTH (ancho) y HEIGHT (alto).

Por ejemplo, para la imagen isla.gif situada más arriba:

<IMG SRC="isla.gif" WIDTH=”120” HEIGHT=”94”>

Es conveniente hacer esto con todas las imágenes, incluso con las más pequeñas (iconos, botones, etc),
para que no haya ninguna interrupción en el proceso de carga del documento.

Para hacer que esta imagen reducida sea el enlace con la imagen en su tamaño original, lo conseguimos
con:

<A HREF="nytimes.gif"> <IMG SRC="nytimes.gif" WIDTH=”150” HEIGHT=”75”> </A>

Es la de reducir en un programa gráfico esta imagen a 150x75, guardarla con otro nombre, y luego
hacer que la pequeña sea el enlace de la grande. Es más correcta esta otra solución porque no todos los
navegadores reconocen los comandos WIDTH y HEIGHT.

Actividad 7:

1) Realizar una pagina que contenga un fondo de color con una colección de fotografías (de un tema a
elección).

Tablas:

(Table, td, tr, th, caption, border, align, valign, width, heigth, colspan, rowspan,
bgcolor, gackground, cellspacing, cellpadding)

Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias para confeccionar las tablas.

1) La etiqueta general, que engloba a todas las demás es <TABLE> y </TABLE>. Es decir

<TABLE>
26
[Resto de las etiquetas]
</TABLE>

Con esto se presentarían los datos tabulados, pero faltaría la característica que hace más atractivas a las
tablas, y es que estos datos vayan dentro de unos cajetines formados por un borde. Para esto tenemos
que añadir el atributo BORDER a la etiqueta, es decir:

<TABLE BORDER>
[resto de las etiquetas]
</TABLE>

2. En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row) de la tabla,
que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es
decir, para una tabla con dos filas, sería:

<TR>
[etiquetas de las distintas celdas de la primera fila]
</TR>
<TR>
[etiquetas de las distintas celdas de la segunda fila]
</TR>

3. En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son <TD> y </TD>,
que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces
como celdas queremos que haya en esa fila.

Realizamos un ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de cada celda
vamos a poner un texto indicativo de la posición de dicha celda:

<TABLE BORDER>
<TR>
<TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD>
</TR>
</TABLE>

Filas con desigual en celdas:

En este ejemplo hemos puesto dos filas con igual número de celdas. ¿Qué pasa si
ese número es distinto? Pues el navegador forma el número de filas y columnas que haga
falta, dejando espacios en blanco en las filas que tengan menos celdas.

En el ejemplo anterior probamos lo siguiente: eliminamos la tercera celda de la segunda fila, es

decir si borramos <TD>fila2-celda3</TD>,

27
Titulo de la tabla:

Se puede añadir un titular (caption) a la tabla, es decir un texto situado encima de la tabla que indica cuál
es su contenido. Se consigue con la etiqueta <CAPTION> y </CAPTION>.
Si en el ejemplo anterior añadimos la siguiente línea:

<CAPTION> Ejemplo de filas desiguales </CAPTION>

Variando el espesor del borde:

El atributo BORDER (visto anteriormente) pone por defecto un borde de espesor igual a la unidad. Pero
se puede hacer que este borde sea tan grueso como queramos, poniendo:

<TABLE BORDER=”número deseado”>

Si en el ejemplo anterior ponemos:

<TABLE BORDER=”5”>

Celdas de cabeceras:

Además de las celdas que contienen datos normales, podemos poner, si nos conviene, celdas de cabecera
(header), que se distinguen por estar el texto de dichas celdas en negrita y centrado.
Esto se consigue con la etiqueta <TH> y </TH> (en vez de la normal <TD> y </TD>)
Vamos a añadir, en el ejemplo anterior, una fila de estas celdas de cabecera, antes de las otras dos que ya
existían:

<TR>
<TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH>
</TR>

Contenido de las celdas:

Hasta ahora, en todos los ejemplos se ha puesto un texto normal dentro de las distintas celdas. Pero se
puede poner en ellas cualquier otro elemento de los que van en un documento HTML, como imágenes,
enlaces, etc. No hay más que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una
imagen, un enlace, etc.

Ejemplo con una imagen:

<TABLE BORDER=”2”>
<TR><TD><IMG SRC="babe.gif"></TD></TR>
</TABLE>

Ejemplo con un enlace:

<TABLE BORDER=”2”>
<TR><TD><A HREF="index.html">P&aacute;gina principal </A></TD></TR>
</TABLE>

Posicionamiento del contenido:

28
Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar esto
añadiendo dentro de la etiqueta de la celda los siguientes atributos:

<TD ALIGN=”CENTER”> Al centro </TD>

<TD ALIGN=”RIGHT”> A la derecha </TD>
<TH ALIGN=”LEFT”> Cabecera a la izquierda </TH> (Recuérdese que por defecto
están centradas).

El alineamiento por defecto en el sentido vertical es en el medio. También se puede cambiar, añadiendo
dentro de la etiqueta de la celda los siguientes atributos:

<TD VALIGN=”TOP”> Arriba </TD>

<TD VALIGN=”BOTTOM”> Abajo </TD>

Variando las dimensiones de la tabla:

El navegador se encarga normalmente de dimensionar el tamaño total de la tabla de acuerdo con el

número de filas, de columnas, por el contenido de las celdas, espesor de los bordes, etc.

A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones totales mayores que las
que le corresponden, tanto en anchura como en longitud. Esto se consigue añadiendo dentro de la etiqueta
de la tabla los atributos WIDTH y HEIGHT igual a un porcentaje de la dimensión de la pantalla, o a una
cifra que equivale al número de píxeles.
Por ejemplo, si en el último ejemplo ponemos:

<TABLE WIDTH=”60%”>

O, si en ese mismo ejemplo, ponemos:

<TABLE HEIGHT=”200”>

Combinación de celdas:

A veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigue añadiendo
dentro de la etiqueta de la celda los atributos COLSPAN=número para extenderse sobre un número
determinado de columnas, o ROWSPAN=número para extenderse verticalmente sobre un número
determinado de filas.
Por ejemplo, en la primera tabla de este capítulo vamos a añadir una fila con una sola celda, que abarca a
dos columnas:

<TR> <TD COLSPAN=”2”> Celda sobre 2 columnas </TD> <TR>

O, en la misma tabla, vamos a añadir una celda en la primera fila. Pero que abarque también a la siguiente:

<TD ROWSPAN=”2”> Celda junto a 2 filas </TD>

Color de fondo de la tabla:

Podemos conseguir que las tablas tengan un color de fondo, siguiendo un procedimiento totalmente
análogo al empleado para que una página tenga un color de fondo uniforme. Para ello debemos utilizar el
atributo BGCOLOR="#XXYYZZ".

Se puede conseguir:
29
 1. Que la totalidad de la tabla tenga un color de fondo. Para ello, colocamos el atributo dentro de la
etiqueta TABLE. Por ejemplo, vamos a hacer que la tabla tenga un fondo verde (#00FF00):

<TABLE BORDER BGCOLOR="#00FF00">

<TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> </TR>
<TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR>
</TABLE>

2. Que sólamente una celda determinada tenga un color de fondo. Para ello, colocamos el atributo
dentro de la etiqueta de la celda correspondiente. Por ejemplo, vamos a hacer que sólo la celda 1
de la fila 1 tenga un color verde:

<TABLE BORDER>
<TR><TD BGCOLOR="#00FF00">fila1-celda1</TD><TD>fila1-
celda2</TD></TR>
<TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR>
</TABLE>

3. Que la generalidad de las celdas tenga un color, pero que alguna celda tenga uno particular. El
atributo del color general se coloca en la etiqueta TABLE, y el del color particular en la etiqueta
de la celda en cuestión (una combinación de los dos casos anteriores). por ejemplo, vamos a
hacer que la generalidad de la tabla sea de color rojo (#FF0000), pero que la celda 1 de la fila 1 sea
de color verde (#00FF00):

<TABLE BORDER BGCOLOR="#FF0000">

<TR><TD BGCOLOR="#00FF00">fila1-celda1</TD><TD>fila1-
celda2</TD></TR>
<TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR>
</TABLE>

Imágenes de fondo en una tabla:

Para ello debemos utilizar el atributo BACKGROUND="imagen.gif" o

BACKGROUND="imagen.jpg".
Si se utiliza dentro de la etiqueta <TABLE> la imagen en cuestión se multiplicará detrás de todas las
celdas.
Por ejemplo:

<TABLE BORDER BACKGROUND="nubes.jpg"> resulta:

Si, por el contrario, sólo se pone este atributo dentro de la etiqueta de una celda concreta (<TD> o
<TH>), entonces la imagen de fondo se verá sólo en esa celda, como por ejemplo:

30
Separación entre celdas de una tabla:

Por defecto, la separación entre las distintas celdas de una tabla es de dos píxeles. Pero se puede variar
esto con el atributo CELLSPACING, que se pone dentro de la etiqueta TABLE.

Por ejemplo, para obtener una separación de 20 píxeles entre celdas ponemos:

<TABLE BORDER CELLSPACING=”20”>

A primera vista parece como si esto fuera lo mismo que si hubiéramos aumentado el espesor de los
bordes. Pero para comprobar que no es así, hagamos que en el caso anterior, tenga además unos bordes de
5 de espesor:

Separación entre el borde y el contenido dentro de las celdas:

Por defecto, la separación entre el borde y el contenido dentro de las celdas es de un pixel. Se puede
cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE.
Por ejemplo, para obtener una separación de 20 pixels entre el contenido y los bordes, dentro de cada
celda:

<TABLE BORDER CELLPADDING=”20”>

Se puede combinar este atributo con CELLSPACING (visto en el apartado anterior). Por ejemplo, una
tabla con bordes de 5 de espesor, separación entre celdas de 15 y separación del contenido con respecto a
los bordes de las celdas de 20, lo obtendríamos con:

<TABLE BORDER=”5” CELLSPACING=”15” CELLPADDING=”20”>

Actividad:

1) Vamos a crear una tabla de dos filas, con una celda cada una. La primera, como cabecera, con el
texto "Un lugar ideal para mis vacaciones", y la segunda con la imagen isla.gif. Además vamos a
alargar a lo ancho la tabla al 75% de la pantalla.
2) Crear una tabla con el titulo de “Hardware para PC”. Debe tener dos filas con tres celdas, cada
celda de la primer fila, debe tener la foto de los discos duros, y en la otra fila las celdas debe
contener las especificaciones de los mismos

Ejercicios de práctica:

1) Crear una página con el nombre de enlaces habituales que utilizo: colocar los nombres en forma de
lista con hipervínculos a la diferente página. Al menos 5 enlaces.

2) Crear una página que tenga un índice sobre distintos periféricos, mínimos (5), y este me lleve con
un enlace al titulo de cada texto, el texto debe tener características del hardware.

3) Crear una página que este dividida en dos, (no frame), en el primer sector el logo del empresa, y en
el otro sector la historia de la misma. La división debe estar realizada por una línea o franja. La
página debe contener una imagen como fondo.

31
4) Crear una página con iconos de las materias del colegio, y cada icono debe tener un hipervínculo a
alguna página con tutoriales o manuales u otra pagina que te ayude con consultas sobre los temas
de las materias.

5) Realizar una página con 3 frames, contenga un Banner, Menú y una página activa. El menú debe
tener una lista o puntos enlazados a la página activa. La página activa debe contener imágenes y
textos relacionados al tema del menú que el usuario quiera investigar. Cada frames debe tener un
fondo distinto.

Nota: Los ejercicios comprenden ciertos requisitos que son obligatorios para la practica, esto no
significa, que no puedas utilizar tu imaginación y realizar algo que te guste, para mejorar la pagina.

32