CUADERNO DE TRABAJO - Weebly...El presente documento es el cuaderno de trabajo del participante,...
86
1 CUADERNO DE TRABAJO Diseñadora: M. en A. N. ANA MARÍA TORRES JIMENO
Transcript of CUADERNO DE TRABAJO - Weebly...El presente documento es el cuaderno de trabajo del participante,...
1
CUADERNO DE TRABAJO
Diseñadora:
M. en A. N. ANA MARÍA TORRES JIMENO
2
INDICE
Objetivo general del curso 3
Objetivos específicos del curso 3
Introducción 4
1. Tema 1. Primeros pasos en HTML 5
Tema 2. Enriqueciendo el documento 13
Tema 3. Imágenes 24
Tema 4. Interconexión de páginas: hiperenlaces 38
Tema 5. Tablas 47
Anexo I. Códigos de colores 83
Anexo II. Carta de colores 84
Glosario 85
Referencias Bibliográficas y Cibergráficas 86
3
OBJETIVO GENERAL DEL CURSO
Al final del curso el participante será capaz de crear páginas web aplicando los principios de programación estructurada en el
lenguaje HTML.
OBJETIVOS ESPECÍFICOS DEL CURSO
El participante identificará la estructura de un documento HTML. Aplicará los recursos de HTML para enriquecer un documento.
Insertará y manipulará imágenes en un documento HTML.
Creará documentos referenciados a utilizando hiperenlaces.
Creará y manipulará tablas dentro de un documento HTML.
4
INTRODUCCIÓN
HTML (HyperText Markup Language - Lenguaje de Marca de Hipertextos) es el lenguaje
estándar utilizado en Internet para representar la información intercambiada por sus
usuarios en forma de documentos de hipertexto. Esto quiere decir que cualquier cliente web
(Internet Explorer, Google Chrome, Mozilla, Firefox, etc.) que utilice las normas estándar de
visualización de documentos web podrá leer e interpretar perfectamente este lenguaje. La
mayoría de las páginas web están escritas en este lenguaje.
La primera descripción de HTML disponible públicamente fue un documento llamado HTML
Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en
1991. Describe 22 elementos comprendiendo el diseño inicial y relativamente simple de
HTML. Trece de estos elementos todavía existen en HTML 4 y 5.
HTML es un lenguaje compuesto de etiquetas que indican al navegador de Internet cómo se
debe mostrar la página, por ejemplo: cuándo debe centrar los párrafos, utilizar negritas o
qué fuentes de texto debe utilizar, etc.
El presente documento es el cuaderno de trabajo del participante, constituido por información teórica de los temas del curso, actividades de aprendizaje, recursos para la autoevaluación, ejemplos y las referencias bibliográficas que sirvieron de base para el desarrollo teórico del curso y la inclusión de los ejercicios. Su objetivo es servir como un material didáctico que apoya a los integrantes de este curso de capacitación para abordar los temas que permitirán alcanzar los objetivos de aprendizaje propuestos. Su finalidad principal es: apoyar para que el alumno aprenda los contenidos. Tiene una intención claramente didáctica.
5
Tema 1. Primeros pasos en HTML
Estructura de un documento HTML HTML es un lenguaje basado en el uso de marcas o etiquetas. Estas etiquetas comienzan
por el símbolo de menor (“<”) y terminan con el símbolo de mayor (“>”). Por ejemplo, son
etiquetas:
<HTML> <BODY> <HEAD>
La palabra que se encierra entre esos dos símbolos indica qué acción debe realizar el navegador o qué tipo de información aparece a continuación. Además, para delimitar el ámbito en el que ha de aplicarse una etiqueta, se debe indicar hasta donde actúa. Para ello se utiliza la misma etiqueta pero con el símbolo / justo delante
de la palabra. Así, por ejemplo, las siguientes etiquetas indican fin de una acción:
</HTML> </BODY> </HEAD>
Así pues, cada etiqueta de principio de acción < … > tiene una “correspondencia” con una
etiqueta de fin de acción </ … >.
Las etiquetas NO son sensitivas, es decir, pueden escribirse en mayúsculas, minúsculas o combinadas, ya que siempre mantienen su valor: <HTML> <Html> <html>
Nota
6
Esquema de una página Todas las páginas web comienzan siempre con la etiqueta <HTML> y terminan con la
etiqueta </HTML>.
El texto que está entre <HTML> y </HTML> es la página web, lo que esté fuera de lo
delimitado por esas marcas, no se considera texto de la página. Las páginas web se dividen en dos partes bien diferenciadas: la cabecera y el cuerpo.
La cabecera de la página se emplea para proporcionar información acerca del
documento (título, autor, fecha de creación, etc.).
La cabecera debe ser delimitada con las etiquetas <HEAD> al principio y </HEAD> al
final. Entre esas dos marcas se encuentran las líneas que pertenecen a la cabecera de la página.
El cuerpo contiene el texto de la página, es decir, la información que se va a
presentar al usuario.
Para el cuerpo se deberá poner <BODY> al principio y </BODY> al final. Entre esas
dos marcas se encontrarán las líneas que pertenecen al cuerpo de la página.
Esquema de una página
<HTML>
<HEAD>
Aquí va la cabecera de la página
</HEAD>
<BODY>
Aquí va el cuerpo de la página
</BODY>
</HTML>
7
Cabecera de la página La información que se coloca en la cabecera de la página es optativa, e incluso, puede no aparecer ninguna. No obstante, es muy recomendable que ponga un título a la página. El título aparecerá en la parte superior del explorador o navegador, en la barra superior y servirá para identificar el contenido de la página. Para indicar el título de la página también se utiliza una etiqueta, en este caso se emplea
<TITLE> y </(TITLE>:
<TITLE> Título de la página </TITLE>
Observe cómo las etiquetas delimitan donde empieza (<TITLE>) y donde terminan
(</TITLE>) las palabras pertenecientes al título.
Con esto se puede ir añadiendo más líneas a la estructura básica de una página, que ahora queda del siguiente modo:
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
Aquí va el cuerpo de la página
</BODY>
</HTML>
8
Cuerpo de la página Como se mencionó anteriormente, el cuerpo contiene el texto de la página que se va a
presentar al usuario. Las marcas de principio y fin del cuerpo son <BODY> y </BODY>
respectivamente y entre esas dos etiquetas se constituirá la página.
Comentarios
Tanto en la cabecera como en el cuerpo de la página se puede hacer uso de comentarios
que faciliten la comprensión de lo que se está haciendo en la página o que presente alguna
información interesante sobre ella.
Los comentarios se construyen también utilizando etiquetas, aunque en este caso no hay
una etiqueta de inicio y otra de fin. En este caso, el comentario se introduce dentro de la
propia etiqueta, para ello, se deberá poner primero los caracteres <! que indican que lo que
viene a continuación es texto de comentarios, seguido de las líneas que se desean poner
como comentario (precedidas todas ellas por – ) y por último poner el carácter –>, del
siguiente modo:
<! – texto comentario –>
No es necesario que los comentarios se pongan dentro de la cabecera o dentro
del cuerpo de la página. Se pueden situar en cualquier parte del documento,
incluso antes de <HTML> o entre <HEAD> y <BODY>.
<HTML>
<HEAD>
<!- esto de aqui es la cabecera de la
página ->
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
<!- esto de aqui es el cuerpo del mensaje ->
...
...
</BODY>
</HTML>
Nota
9
Primer documento HTML Las páginas web son ficheros de texto y para crearlas basta usar cualquier editor de texto capaz de grabar los archivos con formato de texto.
El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser Gedit en Linux, el Bloc de Notas de Windows, o cualquier otro editor que admita texto sin formato como: Microsoft Wordpad, TextPad, Syn, Vim, Notepad++, Crimson Editor, entre otros.
Existen además, otros editores para la realización de sitios Web con características WYSIWYG (What You See Is What You Get, o en español: “lo que ves es lo que obtienes”). Estos editores permiten ver el resultado de lo que se está editando en tiempo real, a medida que se va desarrollando el documento. Ahora bien, esto no significa una manera distinta de realizar sitios web, sino que una forma un tanto más simple ya que estos programas, además de tener la opción de trabajar con la vista preliminar, tiene su propia sección HTML la cual va generando todo el código a medida que se va trabajando.
Algunos ejemplos de editores WYSIWYG son KompoZer, Microsoft FrontPage, o Macromedia Dreamweaver.
Creación del documento:
El primer paso es escribir la estructura básica de una página HTML. Para ello, abra el Bloc de Notas de Windows y escriba:
<HTML>
<!- esta es mi primer página de HTML ->
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
10
Ya sabe que las etiquetas <HTML> y </HTML> indican el principio y el fin de la página
HTML. La primera parte de la página que se tiene que construir es la cabecera. Por ahora sólo se pondrá en ella el título de la página. Para ello, debe situarse a continuación de
<TITLE> y escribir:
Mi primer página
A continuación de la cabecera se encuentra <BODY>, que, como ya se sabe, es donde se
coloca la información que se desea mostrar. Para empezar escriba entre estas dos etiquetas el texto:
Hola mundo !
Con estos cambios, el código HTML de la página debería quedar asi:
Una vez que haya introducido el texto en el bloc de notas y haya comprobado que todo está bien escrito, deberá guardar el documento con la extensión HTM o HTML (son exactamente lo mismo una que otra).
Ahora diríjase a Mi PC, localice el archivo que acaba de guardar. Observe cómo el archivo
aparece con un icono distinto, mostrando el que corresponde al navegador instalado.
Haga doble clic sobre ese archivo. Automáticamente se abrirá el navegador que tenga instalado y podrá ver en su pantalla su primer página HTML.
<HTML>
<!- esta es mi primer página de HTML ->
<HEAD>
<TITLE> Mi primer página</TITLE>
</HEAD>
<BODY>
Hola mundo !
</BODY>
</HTML>
11
Saltos de línea HTML considera continuo al texto contenido en la parte BODY, es decir, que pone todas las
líneas de texto unas a continuación de otras. Para indicar que se desea hacer un salto de línea hay que utilizar una etiqueta (<BR>), la
cual se trata de una etiqueta especial, ya que al ordenar una acción puntual (no actúa sobre un conjunto de palabras, sino actúa en un punto de la página), no tiene una etiqueta de fin. Cada vez que el navegador encuentre la etiqueta <BR> en el texto del documento, hace un
salto de línea, es decir, hace un “punto y aparte”.
<HTML>
<!- esta es mi primer página de HTML -
>
<HEAD>
<TITLE> Mi primer página</TITLE>
</HEAD>
<BODY>
Hola mundo ! <BR>
Esta página contiene la estructura
básica <BR>
De un documento HTML <BR>
Y muestra saltos de línea
</BODY>
</HTML>
12
Espacio entre palabras Cuando inserte espacios en blanco entre palabras, debe tener en cuenta que el navegador considera sólo un único espacio entre ellas. Es decir, que si entre dos palabras se insertan diez espacios en blanco, el navegador solo mostrará un único espacio e ignora los otros nueve. Para indicar al navegador que desea utilizar más de un espacio, se emplea el código:
De este modo, si desea incluir dos espacios adicionales entre una palabra y otra, deberá indicarlo del siguiente modo:
Primera palabra Segunda palabra
y el navegador reemplazará cada por un espacio de separación.
Ver código fuente
Si se visualiza una página web y nos interesa conocer cómo está construida, podemos ver su código interno. Esto es muy útil ya que se puede aprender mucho estudiando las páginas web de otras personas. Para mostrar el código fuente de la página web que esta visualizando en el navegador debe seleccionar la opción Ver Código Fuente del menú Ver, en el caso de Internet Explorer.
En Google Crome, debe dar clic con el botón derecho del ratón y en el menú emergente seleccionar la opción Ver Código Fuente de Página.
Si utiliza Mozilla Navigator, deberá seleccionar la opción Origen de la página del menú ver.
En cualquiera de estos casos se desplegará una ventana con el código HTML de la página que esta visualizando.
13
Tema 2. Enriqueciendo el documento
Párrafos o bloques Cuando se construye una página web con HTML, se debe agrupar el texto en párrafos o bloques. Así, cada vez que comience un nuevo párrafo el navegador insertará una línea en blanco para separar unos bloques de otros. Para ello se utiliza la etiqueta <P> para indicar
comienzo de párrafo y </P> para indicar fin de párrafo.
Este salto que produce <P> es igual que el de <BR> solo que la separación entre líneas es
mucho mayor. Se podría decir que equivale a un <BR> y medio.
Por lo tanto, el texto del cuerpo se encuentra dividido en bloques o párrafos mediante el uso de las etiquetas <P> y </P>.
Estas etiquetas tienen, además, otras opciones que permiten indicar cómo será mostrada
esa página. Con <P> puede establecer, por ejemplo, que el párrafo aparezca centrado,
alineado a la izquierda o a la derecha. Para ello se utiliza del siguiente modo:
<P ALIGN=alineación>
Donde alineación es uno de los siguientes valores:
CENTER: Todas las líneas del párrafo aparecen centradas en la pantalla.
LEFT: Todas las líneas del párrafo se alinean a la izquierda. Si no se pone nada
en <P> se considera por defecto esta alineación.
RIGHT: Todas las líneas del párrafo aparecen alineadas a la derecha.
<HTML>
<HEAD>
<TITLE> Página con alineaciones</TITLE>
</HEAD>
<BODY>
<P> ¡ Hola mundo ! </P>
<P ALIGN=CENTER> Este párrafo está
centrado </P>
<P ALIGN=LEFT> Este párrafo está
alineado a la izquierda </P>
<P ALIGN=RIGHT > Este párrafo está
alineado a la derecha </P>
</BODY>
</HTML>
14
Estilo del texto HTML nos ofrece las opciones básicas de cualquier editor de texto, por tanto, también permite poner textos en negritas, cursivas o subrayados. Para ello es necesario poner
etiquetas del siguiente modo:
- Para resaltar un texto en negrita se utilizan las etiquetas <B> y </B>,
- Ejemplo: Parte de este texto está <B> en negrita </B>
- Para poner un texto en cursiva o itálica se utilizan las etiquetas <I> e </I>, - Ejemplo:
Parte de este texto está <I> en cursiva </I>
- Para poner un texto subrayado se utilizan las etiquetas <U> e </U>, - Ejemplo:
Parte de este texto está <U> subrayado </U>
- También se pueden utilizar varias de estas etiquetas de forma conjunta. En este caso,
deberá ir cerrando las etiquetas en orden inverso a como las fue abriendo. Así si, por
ejemplo, empieza con <U> <B> <I>, deberá cerrarlas en este orden </I> </B> </U>.
Por ejemplo, si desea poner unas palabras de una frase subrayado y negrita deberá escribir:
Parte de este texto está
<U><B> subrayado y negrita </B></U>
15
Tamaño del texto HTML también nos permite mostrar el texto con el tamaño que se desee. Para ello se utilizan
las etiquetas <FONT SIZE = t> .. </FONT>, siendo t el tamaño del texto. El número
que se pone después de SIZE (es decir, t) debe estar comprendido entre 1 (el tamaño más
pequeño) y 7 (el mayor tamaño posible). El valor por defecto es 3. Así, por ejemplo, si desea imprimir el texto ¡Hola Mundo¡ con un tamaño más grande
deberá escribir:
<FONT SIZE=7>¡Hola Mundo!</FONT>
16
Títulos o encabezados
Cuando escribimos una página en HTML, seguramente en más de una ocasión, se tendrá que mostrar texto que está organizado en párrafos y en los que además hay encabezados o títulos en cada uno de ellos.
En estos casos, cuando se desea definir un título se pueden utilizar las etiquetas <FONT
SIZE = n> .. </FONT>, para dar mayor tamaño a los encabezados y distinguirlos así
del texto de los párrafos. En el caso de que se utilicen subtítulos o subapartados, se empleará un tamaño intermedio entre el título y el párrafo siguiente. Por ejemplo:
Página con títulos
<HTML>
<HEAD>
<TITLE> Títulos y encabezados </TITLE>
</HEAD>
<BODY>
<P>
<FONT SIZE=7>Tema 2. <B>Enriqueciendo
el documento</FONT></B>
</P>
</P><FONT
SIZE=6>Introducción;n</FONT></P>
</P><FONT SIZE=3>
En el capítulo 2 has aprendido a
diseñar páginas HTML muy sencillas.
también aprendiste que HTML se basa
en el ...
</FONT></P>
</BODY>
</HTML>
17
Existe un modo más sencillo de utilizar títulos: mediante las etiquetas de encabezados. Estas etiquetas se emplean para dividir los documentos en secciones o, concretamente, para definir los títulos de esas secciones.
Las etiquetas de encabezado son:
<H#>Titulo</H#>
donde #puede ser un número cualquiera entre 1 y 6, siendo el 1 el título de mayor tamaño y
el 6 el de menor, aunque lo habitual es usar encabezados del 1 al 3.
De este modo, cuando desee que en su página aparezca un título deberá escribir <H1>. Así,
cuando la página sea cargada el texto que aparezca entre las etiquetas <H1> y </H1> será
mostrado en un tipo de letra más grande.
Ejemplo: Página con encabezados
<HTML>
<HEAD>
<TITLE> Encabezados </TITLE>
</HEAD>
<BODY>
<H1>Tema 2. <B>Enriqueciendo el documento</H1>
<H2>Introducción</H2>
</P>
En el capítulo 2 has aprendido a diseñar páginas
HTML muy sencillas.
también aprendiste que HTML se basa en el ...
</P>
</BODY>
</HTML>
18
Tipos de letra HTML permite también modificar el tipo de letra, es decir, la forma en la que los caracteres van a ser mostrados en la pantalla. La etiqueta FONT, además de seleccionar el tamaño del texto, permite especificar el nombre
de la fuente de caracteres que se van a utilizar. Para especificar el nombre de la fuente que se desea utilizar, se emplea el atributo FACE,
del siguiente modo:
<FONT FACE= “Nombre de la fuente”>
Por ejemplo, si deseamos que nuestro texto aparezca con el tipo de letra Arial, se deberá escribir:
<FONT FACE= “Arial”> texto
</FONT>
Podemos combinar los atributos FACE y SIZE. Si por ejemplo, deseamos mostrar un texto
con fuente Courier New y tamaño grande, se deberá escribir:
<FONT FACE= “Courier New” SIZE = 5>
texto
</FONT>
19
Dando color al documento o Color de fuente
Además de cambiar el tamaño de la fuente, la etiqueta <FONT> nos permite especificar el
color con el que serán mostradas las letras, del siguiente modo:
<FONT COLOR=color> texto </FONT>
Donde color es el nombre del color (en inglés) que queremos aplicar. Por ejemplo:
<FONT COLOR=red> rojo </FONT>
<FONT COLOR=blue> azúl </FONT>
<FONT COLOR=green> verde </FONT>
La siguiente tabla muestra un listado con los principales colores. Además en el Anexo I se
incluye una tabla aún más completa.
COLOR NOMBRE
Blanco nieve Snow Blanco White Negro Black
Gris oscuro DarkGrey Gris Gray
Gris claro LightGray Azul marino NavyBlue
Azul Blue Turquesa Turquoise
Cyan Cyan Verde claro LightGreen
Verde Green Amarillo Yellow
Oro Gold Beige Beige
Naranja Orange Rojo Red Rosa pink
20
Aunque en HTML están definidos los nombres de muchos colores, puede que necesite especificar un color concreto. En ese caso deberá indicarlo del siguiente modo:
<FONT COLOR=”#******”> texto </FONT>
En donde están los asteriscos debe ir un código que indica el color que desea utilizar. Ese código se llama RGB, ya que con él se indica la cantidad de rojo (R, red), la cantidad de
verde (G, green) y la cantidad de azul (B, blue) que posee mediante un número de 6 cifras, pues con la adición de estos tres colores se puede constituir cualquier otro color. De esta manera, las 2 primeras cifras se refieren a la cantidad de rojo, las 2 siguientes a la cantidad de verde y las 2 últimas a la cantidad de azul. La forma de representar la cantidad se hace en valores hexadecimales, en los que la A equivale a 10, B a 11, C a 12, D a 13, E a 14 y F a 15. De este modo, en hexadecimal el número más pequeño es 00, al que le siguen 01, 02,… 09, 0A, 0B,… hasta terminar en FF que es el número mayor. Así por ejemplo, si quisiera poner un texto en color azul construido a medida, debería escribir:
<FONT COLOR=”#0000FF”>Este texto está en azul</FONT>
Es decir, 00 de rojo, 00 de verde y FF (lo máximo) de azul.
o Color de fondo de página y color del texto en toda la página
A la etiqueta BODY se le pueden añadir parámetros que permiten definir el color que tendrá
el fondo de la página o el color que tendrá por defecto el texto. Estos parámetros son los siguientes:
<BODY BGCOLOR = color>. Cambia el color de fondo de una página. Si no se
indica nada en BODY, el color de una página es blanco.
<BODY TEXT = color>.Cambia el color del texto de toda la página, excepto en los
casos en los que se utilice <FONT COLOR…>.
21
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplos de colores </TITLE>
</HEAD>
<BODY BGCOLOR = black TEXT =red>
<H1>BIENVENIDOS</H1>
<P><FONT COLOR=red SIZE = 4>
Bienvenidos a mi página web </FONT></P>
<FONT FACE= "Courier New" SIZE = 2>
En el capítulo 2 has aprendido a diseñar páginas HTML
muy sencillas.
también aprendiste que HTML se basa en el ...
</FONT></P>
</BODY>
</HTML>
22
Sangrados y alineaciones
Otra característica que nos ofrece HTML, es la posibilidad de introducir sangrados en la página.
Para sangrar un texto se utilizan las etiquetas:
<BLOCKQUOTE>
Párrafos que se quieren sangrar
</BLOCKQUOTE>
Esta etiqueta tiene la particularidad de que sus efectos son aditivos, es decir, que si dentro
del ámbito de <BLOCKQUOTE> añadimos otra vez esta etiqueta delimitando a un párrafo
interno, este párrafo aparecerá sangrado aún más adentro.
Ejemplos:
<HTML>
<HEAD>
<TITLE> Ejemplos de sangrados </TITLE>
</HEAD>
<BODY>
Esto es un texto normal SIN blockquote. El
párrafo ocupa todo el ancho del navegador.
<BLOCKQUOTE>
Esto es un texto normal CON blockquote. El
párrafo no ocupa todo el ancho del navegador.
Sino que está limitado.
<BLOCKQUOTE>
Este texto está aún más sangrado que el anterior.
<BLOCKQUOTE>
Este texto tiene el mismo sangrado que el inicial.
</BODY>
</HTML>
23
Otros efectos de texto
ETIQUETA EFECTO <BLINK>…</BLINK> Hace que el texto parpadee <SUB>…</SUB> Permite insertar subíndices <SUP>…</SUP> Permite insertar superíndices
Inserción de líneas de separación Otra forma visual de separar los párrafos es mediante el uso de líneas de separación, las cuales
van de extremo a extremo del navegador. Para mostrar una línea de separación en su página se utiliza la etiqueta <HR> y no tiene etiqueta
de terminación.
Atributos:
ALIGN: Indica la alineación en la que será mostrada la línea en la pantalla del
navegador. (CENTER, LEFT, RIGHT).
SIZE = #:Indica la altura en puntos (pixeles) que tendrá la línea. Por ejemplo:
<HR SIZE = 4> Muestra una línea de 4 pixeles de alto
WIDHT = #: Indica la anchura de la línea, pudiéndola identificar en píxeles o en tanto
por ciento del ancho de la página (en este caso será necesario añadir el símbolo %). Por ejemplo:
<HR WIDHT = 120> Muestra una línea que tiene 120 píxeles de ancho
<HR WIDHT = 60%> Muestra una línea que ocupa el 60% del ancho de la pantalla
24
Tema 3. Imágenes
Hoy en día es imprescindible dar un toque de color y vida a nuestras páginas por medio de alguna imagen, como unos botones de diseño, el logotipo de nuestra empresa o pequeñas marcas indicativas. Sin embargo, hay que tener presente que la inclusión de imágenes en una página supone incrementar el coste de transferencia de la misma por la red.
Inserción de imágenes con IMG Existen varias formas de insertar imágenes dentro de una página. Sin embargo, el método
más utilizado por los diseñadores de páginas es por medio de la etiqueta <IMG> mediante
la siguiente estructura básica:
<IMG SRC=URL>
o bien,
<IMG SRC=URI>
Donde URL y URI hacen referencia a la dirección completa o bien a la trayectoria y nombre
del archivo gráfico a insertar dentro de la página. HTML permite la inserción de imágenes en múltiples formatos. Sin embargo, en la práctica se recomienda el uso de los formatos BMP, GIF, JPG/JPEG o PNG únicamente, escogiendo siempre aquel que tenga una mejor relación calidad de imagen/ tamaño del archivo.
Nota
El URL representa la dirección completa (Host, puerto, trayectoria y
Nombre) de un determinado recurso en Internet.
El URI representa únicamente la trayectoria completa y el nombre del mismo
recurso, pero en este caso dentro de la máquina local donde se encuentra
nuestra página.
25
Ejemplo:
En este ejemplo, deberá escribir el código HTML dentro de un archivo con extensión HTM o HTML, situado en un determinado directorio, por ejemplo New Folder. A su vez, deberá introducir dentro de ese mismo directorio el archivo gráfico a insertar en la página, por ejemplo: Logo_HTML.JPG.
También podrá situar el archivo Logo_HTML.JPG dentro de un subdirectorio situado en
cualquier otro lugar de la misma máquina. En este caso, dentro de la etiqueta IMG deberá
asignar a la etiqueta SRC la trayectoria completa URI.
<HTML>
<!- Esta es mi primer página HTML con imágenes ->
<HEAD>
<TITLE> Primer página con una imágen </TITLE>
</HEAD>
<BODY>
<IMG SRC="Logo_HTML.JPG">
</BODY>
</HTML>
26
<IMG SRC="Logo_HTML.JPG">
<IMG SRC="Imágenes/Logo_HTML.JPG">
Nota Aunque ya sabe que es posible especificar cualquier URL que referencie un
formato gráfico soportado por HTML al campo SRC, no se recomienda realizar
referencias remotas ya que esto alargaría innecesariamente el tiempo de carga
de nuestras páginas.
El estándar de direcciones URI define a éstas de forma sensible a las
mayúsculas, por lo que, cuando cree sus páginas deberá tener en cuenta las
mayúsculas y minúsculas en todas las referencias que realice a otros archivos.
27
Referencias de texto dentro de la imagen El atributo ALT permite introducir en las páginas descripciones de las imágenes siempre que
éstas no puedan ser visualizadas. Esto es muy útil porque en ocasiones no es posible visualizar las imágenes de todas las páginas, ya sea porque el navegador utilizado funciona solamente en modo texto o porque se tenga desconectada la opción de visualización de imágenes (generalmente se hace esto cuando la velocidad de transferencia de información de nuestra conexión es muy baja). Su sintaxis es la siguiente:
<IMG SRC=”archivo de imagen” ALT= “descripción de la imagen”>
Ejemplo:
<HTML>
<!- Esta es mi primer página HTML con imágenes ->
<HEAD>
<TITLE> Primer página con una imágen </TITLE>
</HEAD>
<BODY>
<IMG SRC="Logo_HTML.JPG" ALT="LOGOTIPO DEL CURSO">
</BODY>
</HTML>
28
Tooltips. Etiquetas que
aparecen junto al cursor
cuando se posicionan
sobre las imágenes
creadas.
29
Posiciones de la imagen dentro de la línea de texto actual En HTML todos los elementos visuales son tratados como si fuesen caracteres de texto convencionales. Así, para los navegadores no hay diferencias entre un caracter de texto y una imagen en cuanto su ubicación dentro de la página, siendo posible intercalar letras e imágenes en cualquier momento. La forma más sencilla de desplazar una imagen dentro de la página es utilizando las etiquetas
<P> y </P> y los caracteres de espaciado . Ejemplo:
<HTML>
<!- Esta es mi primer página HTML con imágenes ->
<HEAD>
<TITLE> Primer página con una imágen </TITLE>
</HEAD>
<BODY>
<P>
<IMG SRC="Logo_HTML.JPG" ALT="LOGOTIPO DEL CURSO">
</P>
</BODY>
</HTML>
30
Si bien esta solución es válida, existen otros métodos más eficientes que pueden ser utilizados, ya sea en forma aislada o como complemento de la técnica anterior. Entre ellos está el uso del
atributo ALIGN.
Este atributo le permitirá posicionar la imagen de forma relativa a la línea de texto actual, en la parte superior de la misma, en la parte inferior, en medio, a la derecha o bien a la izquierda.
Parámetros del atributo ALIGN:
ALIGN=TOP: Permite asociar la imagen de tal forma que su parte superior quede alineada
con la parte superior de la línea de texto.
ALIGN=MIDDLE: Permite situar la imagen y el texto de tal forma que el centro de ambas
permanezca a la misma altura dentro de la línea.
ALIGN BOTTOM: Permite situar la base de la imagen y del texto a la misma altura. De esta
forma, las imágenes más grandes quedarán por encima de los caracteres a los que acompaña.
En caso de que no se seleccione ningún valor de ALIGN, es éste el que se toma por
defecto.
ALIGN LEFT: Sitúa la imagen tratada a la izquierda de la página, desplazando el resto del
texto a la derecha o bajando una línea si es necesario, cuando exista más texto a la izquierda de la misma.
ALIGN RIGHT: Sitúa la imagen justo en el margen derecho de la página,
independientemente del texto que rodee a la misma. Si existe texto a la derecha de la imagen, éste se desplazará a la izquierda de la misma.
31
Apariencia final de la imagen: bordes y tamaño Existen una serie de atributos asociados a la etiqueta IMG que permiten definir tanto el tamaño
de la imagen asociada como el grosor del borde, la existencia de éste o la separación existente entre varias imágenes contiguas:
HEIGHT: Indica el alto de la imagen en píxeles. Por lo general éste deberá ser un valor
igual o superior al alto real de la imagen. También puede indicarse un valor porcentual con respecto al alto de la página mostrada. En este caso el valor numérico deberá ir seguido del caracter %.
WIDTH: indica el ancho de la imagen en píxeles. Por lo general éste deberá ser un
valor igual o superior al ancho real de la imagen. También puede indicarse un valor porcentual con respecto al ancho de la página mostrada. En este caso el valor numérico deberá ir seguido del caracter %.
HSPACE: indica la separación horizontal en píxeles, a la izquierda y a la derecha de la
imagen con respecto a los elementos que la rodean. Por defecto su valor es un número entero muy pequeño o igual a cero, dependiendo del navegador que se utilice.
VSPACE: indica la separación vertical en píxeles, por encima o por debajo de la
imagen con respecto a los elementos que la rodean. Por defecto su valor es un número entero muy pequeño o igual a cero, dependiendo del navegador que se utilice.
Redimensionado: HEIGHT Y WIDTH Como ya se mencionó anteriormente, los atributos HEIGHT y WIDTH permiten indicar al
navegador tanto el tamaño de la imagen como redimensionarla. Gracias a ellos nuestro navegador puede reservar espacio para las imágenes antes que éstas sean cargadas, acelerando así el proceso de formateado de la página final. Si no se utilizan estos atributos, la página no podría ser formateada correctamente hasta que no se hubiera realizado la carga de todas las imágenes. Ahora bien, la utilidad más importante de estos atributos es la de permitir redimensionar las imágenes cargadas por medio del ajuste de los parámetros asociados a los mismos. Ejemplo:
<HTML> <!- Primer página HTML con imágenes -> <HEAD> <TITLE> Mi primer página HTML con una imagen </TITLE> </HEAD> <BODY> <IMG SRC="Logo_HTML.JPG" WIDTH="100" HEIGHT="100"> </BODY> </HTML>
32
Tamaño del borde: BORDER
Indica el ancho del borde a aplicar a la imagen en número de píxeles. Un valor de cero, utilizado por defecto por la mayoría de los navegadores del mercado, indicará que no debe mostrar ningún borde en la imagen. Ejemplo:
<HTML>
<!- Comparativa de bordes en imágenes ->
<HEAD>
<TITLE> Comparativa de bordes </TITLE>
</HEAD>
<BODY>
<IMG SRC="Img_2.JPG">
Valor por defecto
<P>
<IMG SRC="Img_2.JPG" BORDER="0">
Valor BORDER=0
</P>
<P>
<IMG SRC="Img_2.JPG" BORDER="1">
Valor BORDER=1
</P>
<P>
<IMG SRC="Img_2.JPG" BORDER="4">
Valor BORDER=4
</P>
</BODY>
</HTML>
33
Separación entre elementos gráficos: HSPACE y VSPACE Por lo general cuando concatene varios elementos gráficos en una página HTML, éstos aparecerán unidos formando una especie de mosaico. Lo primero que debe aprender es a unir estos elementos de forma correcta.
Observe el siguiente ejemplo gráfico en donde las imágenes fire_1.jpg, fire_2.jpg y
fire_3.jpg corresponden a los tres fragmentos de una imagen mayor:
<HTML> <!- Mosaico de imágenes -> <HEAD> <TITLE> Mosaico </TITLE> </HEAD> <BODY> <IMG SRC="Fire_1.JPG"> <IMG SRC="Fire_2.JPG"> <IMG SRC="Fire_3.JPG"> </BODY> </HTML>
34
Tal y como está estructurado el código, los tres fragmentos de la imagen mayor se muestran uno tras otro separado por un pequeño espacio:
Si se desea introducir un retorno de carro, se deberá hacer uso de las etiquetas <P> y </P>,
o de <BR>. Por otra parte, si se quiere que las imágenes de la misma línea aparezcan
concatenadas, se deberá hacer lo siguiente:
<HTML> <!- Mosaico de imagenes 2 -> <HEAD> <TITLE> Mosaico </TITLE> </HEAD> <BODY> <P STAYLE="margin: 0"> <IMG SRC="Fire_1.JPG"><IMG SRC="Fire_2.JPG"> </P> <P STAYLE="margin: 0"> <IMG SRC="Fire_3.JPG"> </P> </BODY> </HTML>
35
En este caso, se le ha asignado el atributo STYLE de la etiqueta <P> el valor “margin: 0”
que permite que la separación entre los distintos párrafos de la página sea de cero píxeles. De no haber incluido este valor, en la mayor parte de los navegadores se observaría una pequeña separación entre las filas de imágenes.
Obtendrá un efecto idéntico al anterior si en lugar de utilizar las etiquetas <P> y </P> con el
atributo STYLE, utiliza las etiquetas <PRE> y </PRE>.
<HTML> <!- Mosaico de imágenes 2 -> <HEAD> <TITLE> Mosaico </TITLE> </HEAD> <BODY> <PRE> <IMG SRC="Fire_1.JPG"><IMG SRC="Fire_2.JPG"><IMG SRC="Fire_3.JPG"> </PRE> </BODY> </HTML>
36
En determinadas ocasiones se puede desear que este mosaico tenga pequeños espacios de tamaño controlado entre cada una de las piezas gráficas que lo forman. Para ello se utilizan
los atributos HSPACE y VSPACE, que permiten asignar la separación exacta en píxeles de dos
imágenes cualquiera. Ejemplo:
<HTML> <!- Mosaico de imágenes 3 -> <HEAD> <TITLE> Mosaico </TITLE> </HEAD> <BODY> <PRE> <IMG SRC="Fire_1.JPG"><IMG SRC="Fire_2.JPG" VSPACE= "3" HSPACE="3"> <IMG SRC="Fire_3.JPG"> </PRE> </BODY> </HTML>
37
Creación de fondos con imágenes Para crear un fondo de página a partir de una imagen se utiliza el atributo BACKGROUND en
lugar del atributo BGCOLOR, asociándole al mismo una URI o URL que referencie un
archivo gráfico BMP, JPG/JPEG, GIF o PNG. Ejemplo:
Al seleccionar una imagen de fondo, es recomendable también incluir un color de fondo parecido a la imagen elegida; esto tiene la ventaja adicional de que, incluso aunque no se deshabilitara la carga automática de imágenes, al cargar la página, lo primero que se verá es ese fondo de color uniforme, posteriormente reemplazado por el de la imagen. Para ello se utiliza la etiqueta BODY de la siguiente forma:
<BODY BACKGROUND="cielo.jpg" BGCOLOR=”#CCFFFFFF>
<HTML>
<!- Prueba de fondo ->
<HEAD>
<TITLE> Fondo </TITLE>
</HEAD>
<BODY BACKGROUND="cielo.jpg">
<H1>Este es el título de la página</H1>
</BODY>
</HTML>
38
Tema 4. Interconexión de páginas: hiperenlaces
¿Qué es un hiperenlace?
La World Wide Web basa su funcionamiento en los documentos de hipertexto, que son aquellos documentos que contienen, además de distintos objetos (imágenes, sonidos, vídeos,…), referencias a otros documentos (hiperenlaces). Un hiperenlace o hipervínculo es una conexión directa entre un determinado punto particular de un documento y otro punto, ya sea del mismo documento o de otro distinto, o incluso de cualquier otro recurso de Internet que no necesariamente sea un documento. A estos puntos de conexión se les denomina anclas o puntos de vínculo. Al ancla del documento inicial se le suele denominar vínculo (link) y al ancla del documento destino se le suele denominar objetivo (target).
Creación de hiperenlaces
Los hiperenlaces en HTML están definidos básicamente por el uso de la etiqueta <A> junto
con determinados parámetros adicionales.
Los enlaces realizados con la etiqueta <A> se pueden agrupar en varios tipos o grupos, en
función de la localización del objetivo o target del mismo:
Enlaces al principio de otro documento HTML
Enlaces a una determinada posición dentro del mismo documento
Enlaces a una determinada posición de otro documento HTML
Enlaces al principio de otro documento HTML Este es el método más simple y sencillo. Permite conectar una página con cualquier otro documento de la red mediante un hiperenlace. Basa su funcionamiento en el uso de la etiqueta <A>, con la siguiente estructura básica:
<A HREF=URL>Descripción_vínculo</A>
o bien,
<A HREF=URI>Descripción_vínculo</A>
Donde:
39
URL y URI hacen referencia a la dirección completa o bien a la trayectoria y nombre del
documento a vincular mediante el hiperenlace, y
Descripción_vínculo es un texto descriptivo que permitirá al usuario de la página
localizar el vínculo de forma física y determinar su contenido. Ejemplo:
<HTML>
<!- Primer página con Hiperenlaces ->
<!- Autor: JTM@ ->
<HEAD>
<TITLE> PRIMER PÁGINA CON HIPERENLACES </TITLE>
</HEAD>
<BODY>
<H1>Enlaces a portales de Internet </H1>
<HR>
<P><A href="http://www.google.com">Google</A></P>
<P><A href="http://www.yahoo.com.mx">Yahoo</A></P>
<HR>
</BODY>
</HTML>
40
Enlaces a una determinada posición dentro del mismo documento En ocasiones, puede ser interesante acceder a una parte u otra del documento sobre el que esté trabajando a través de hiperenlaces. Esto es especialmente útil cuando se trabaja con documentos HTML excesivamente largos. Para acceder a un determinado punto de un documento deberá, en primer lugar, crear una marca de acceso dentro del mismo. Para ello se debe utilizar la etiqueta <A> con el siguiente
formato:
<A NAME=”Nombre_Referencia”></A>
Donde:
Nombre_Referencia será una cadena de caracteres que se utilizará como identificador de
la marca creada. Posteriormente, en otro lugar del mismo documento, deberá crear un elemento vinculado a la marca citada anteriormente de la siguiente forma:
<A HREF=”#Nombre_Referencia”>Descripción_Vínculo</A>
Si se da cuenta, en esta ocasión, a diferencia de lo que ocurría con los hipervínculos a otro
documento, el URL o el URI han sido sustituidos por el nombre de la marca creada,
Nombre_Referencia, precedido del carácter (#).
Ejemplo:
<HTML>
<!- Hiperenlaces dentro del mismo documento->
<!- Autor: JTM@ ->
<HEAD>
<TITLE> HIPERENLACES DENTRO DEL MISMO DOCUMENTO</TITLE>
</HEAD>
<BODY>
<H1>Indice</H1>
<HR>
<P><A href="#Primera">Primera Parte</A></P>
<P><A href="#Segunda">Segunda Parte</A></P>
<P><A href="#Tercera">Tercera Parte</A></P>
<P><A href="#Cuarta">Cuarta Parte</A></P>
<HR>
.
.
.
41
.
.
.
<A NAME="Primera"></A>
<H1>Primera Parte</H1>
<P>Este es el contenido de la primera parte</P>
<HR>
<A NAME="Segunda"></A>
<H1>Segunda Parte</H1>
<P>Este es el contenido de la segunda parte</P>
<HR>
<A NAME="Tercera"></A>
<H1>Tercera Parte</H1>
<P>Este es el contenido de la tercera parte</P>
<HR>
<A NAME="Cuarta"></A>
<H1>Cuarta Parte</H1>
<P>Este es el contenido de la cuarta parte</P>
<HR>
</BODY>
</HTML>
42
Enlaces a una determinada posición dentro de otro documento HTML En ocasiones nos podría interesar crear un enlace a una zona concreta de otra página HTML distinta. Para ello, se deben combinar las dos técnicas vistas anteriormente. En primer lugar, será necesario que el documento destino u objetivo contenga marcas creadas
con la etiqueta <A> y el atributo NAME.
Por su parte, el documento origen deberá contener el atributo HREF de la marca <A> con un
formato híbrido entre URL/URI y una marca de documento.
Ejemplo: Utilizando el documento anterior, lo separamos en dos documentos distintos, uno con el índice del documento y otro con el cuerpo.
<HTML>
<!- Página con marcas internas ->
<!- Autor: JTM@ ->
<HEAD>
<TITLE> CUERPO DEL DOCUMENTO</TITLE>
</HEAD>
<BODY>
<A NAME="Primera"></A>
<H1>Primera parte</H1>
<P>Este es el contenido de la tercera parte</P>
<HR>
<A NAME="Segunda"></A>
<H1>Segunda Parte</H1>
<P>Este es el contenido de la segunda parte</P>
<HR>
<A NAME="Tercera"></A>
<H1>Tercera Parte</H1>
<P>Este es el contenido de la tercera parte</P>
<HR>
<A NAME="Cuarta"></A>
<H1>Cuarta Parte</H1>
<P>Este es el contenido de la cuarta parte</P>
</BODY>
</HTML>
43
<HTML>
<!- Página con hiperenlaces a marcas de otros documentos
HTML->
<!- Autor: JTM@ ->
<HEAD>
<TITLE> INDICE DEL DOCUMENTO</TITLE>
</HEAD>
<BODY>
<H1>Indice</H1>
<HR>
<P><A href="Hiperenlaces.html#Primera">Primera
Parte</A></P>
<P><A href="Hiperenlaces.html#Segunda">Segunda
Parte</A></P>
<P><A href="Hiperenlaces.html#Tercera">Tercera
Parte</A></P>
<P><A href="Hiperenlaces.html#Cuarta">Cuarta
Parte</A></P>
</BODY>
</HTML>
44
Referencias a otros documentos y recursos El atributo HREF de la etiqueta <A>, además de permitirnos crear enlaces a otras páginas
HTML, también nos permite crear enlaces a otros programas como: cliente de correo electrónico, cliente de noticias, a un servicio FTP, etc. Ejemplo:
<HTML>
<!- Página con hiperenlaces ->
<!- Autor: JTM@ ->
<HEAD>
<TITLE> PAGINA CON HIPERENLACES </TITLE>
</HEAD>
<BODY>
<H1>Enlace a la página de descarga de Firefox </H1>
<HR>
<A href="http://www.mozilla.com/es-ES/firefox/">
<IMG SRC="mozilla.jpg">
Pagina de descarga de Mozilla</A>
<HR>
Fdo:<address>
<A href="mailto:[email protected]">Ana María Torres</A>
</address>
</BODY>
</HTML><P><A href="Hiperenlaces.html#Cuarta">Cuarta
Parte</A></P>
</BODY>
</HTML>
45
También es posible crear enlaces a documentos diferentes a HTML. En estos casos, si el cliente web no reconoce el tipo de documento, permitirá guardar éste en los directorios locales a fin de que posteriormente pueda ser usada esta información, o bien cargar/ejecutar directamente la aplicación desde Internet. Ejemplo:
<HTML>
<!-- Página con hiperenlaces a documentos no HTML-->
<HEAD>
<TITLE>Página Indice</TITLE>
</HEAD>
<BODY>
<h1>Documentos y Programas de Apoyo</h1>
<P>En esta página podrás encontrar todo lo
referente a software shareware de primera calidad.
Para bajarlo a tu equipo solo deberás hacer clic
sobre la opcián que desees.</P>
<P><a href="..\Documentos_Apoyo\Carta de Colores.pdf">Carta
de Colores
</a></P>
<P><a href="..\Documentos_Apoyo\codigos de
colores.pdf">Códigos de Colores
</a></P>
<P><a href="..\Documentos_Apoyo\Tabla de códigos
ASCII.pdf">Tabla de Códigos
ASCII</a></P>
<P><a href="..\Editores\npp.5.8.7.Installer.exe"> Note
Pad</a></P>
<P><a href="..\Editores\cedt-241-setup.exe"> Crimson
Editor</a></P>
<P><a href="..\Editores\syn\syn.exe"> Syn Editor</a></P>
<P><a href="..\Participantes\Programas\Firefox Setup
3.6.15.exe"> Mozilla
Firefox </a></P>
</BODY>
</HTML>
46
Los documentos, archivos y programas a los que se hacen referencia en los
vínculos creados con la etiqueta <A> deben estar físicamente localizados en
las trayectorias indicadas por el URI o por el URL asociado al atributo HREF.
Nota
47
Tema 5. Tablas
¿Qué es una tabla? Las tablas son uno de los elementos más interesantes de HTML, ya que nos permiten presentar la información de un modo mucho más ordenado. Una tabla consiste en un tablero rectangular que está dividido en cuadrículas, denominadas celdas, las cuales se agrupan en filas y columnas. Dentro de una celda se puede escribir un texto o mostrar una imagen, por lo que, en una tabla se puede mostrar información en varias columnas, hacer listas de equivalencias, etc.
Definición básica de tablas en HTML
Para definir una tabla se utilizan las etiquetas <TABLE> y </TABLE>. Estas dos etiquetas
delimitan el principio y el fin de la tabla, y todo lo que se escriba entre ellas pertenecerá a ella.
Una vez fijado su ámbito, en su interior, deberá utilizar las etiquetas <TR> y </TR> para
delimitar sus filas. Estas dos etiquetas equivalen a <P> y </P> en los párrafos, de modo que,
hasta que no se use <TR> no pasará a la siguiente fila de la tabla.
Dentro de cada fila deberá delimitar el principio y el final de cada celda con las etiquetas <TD>
y </TD>. Lo que se escriba entre esas dos etiquetas es lo que se va a mostrar dentro de la
celda. Cuando se escriba <TD> pasará a la siguiente celda de la tabla, es decir, la que está
inmediatamente a la derecha de la que acaba de crear. El esquema básico de una tabla es el siguiente:
<TABLE>
<TR>
<TD>Celda1 de la primera fila</TD>
<TD>Celda2 de la segunda fila</TD>
...
</TR>
<TR>
<TD>Celda1 de la segunda fila</TD>
...
</TR>
...
</TABLE>
48
Para indicar que se tracen las líneas de contorno de las celdas de una tabla, se debe utilizar la
etiqueta <BORDER>. Esta etiqueta se pone adentro de <TABLE>.
El uso de </TD> y </TR> es opcional, ya que el navegador considera una nueva celda
cuando encuentra la etiqueta <TD>.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplos de sangrados </TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TD>Celda1 de la primera fila</TD>
<TD>Celda2 de la segunda fila</TD>
</TR>
<TR>
<TD>Celda1 de la segunda fila</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> Ejemplos de sangrados </TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TD>Celda1 de la primera fila
<TD>Celda2 de la segunda fila
<TR>
<TD>Celda1 de la segunda fila
</TABLE>
</BODY>
</HTML>
49
Tipos de bordes La etiqueta <BORDER> nos permite, además, indicar el grosor que va a tener la línea que
delimite a la tabla (no la de las celdas). Para ello, deberá poner la siguiente estructura:
<TABLE BORDER = n>
Donde n es un número que indica el grosor de borde que desea.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplos de sangrados </TITLE>
</HEAD>
<BODY>
<TABLE BORDER = 10>
<TR>
<TD>Celda1 de la primera fila
<TD>Celda2 de la segunda fila
<TR>
<TD>Celda1 de la segunda fila
</TABLE>
</BODY>
</HTML>
50
Encabezados de la tabla Los encabezados de una tabla son aquellas celdas situadas en la primera fila o en la primera columna. Así, por ejemplo, si está haciendo un horario, los días de la semana los escribiría en la primera fila, y constituirían el encabezado de la tabla. Para poner encabezados en las tablas se utiliza la etiqueta <TD> y marcar el texto en negrita
<B>, o mejor aún, utilizar las etiquetas <TH> y </TH>, que se utilizan para delimitar las
celdas que constituyen la cabecera. El funcionamiento de <TH> es exactamente al de <TD>. De hecho, todo lo que se especifique
para una etiqueta, también es válido para la otra. La única diferencia entre ambas es que
<TH> muestra el texto más resaltado y centrado.
Si en la etiqueta <TABLE> no escribe la palabra BORDER, el
Navegador considerará que ha elegido BORDER = 0. Si únicamente
se escribe BORDER, y no indica ningún valor, el navegador considerará
BORDER = 1.
Nota
51
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplos de encabezados de una tabla </TITLE>
</HEAD>
<BODY>
<P>Visitantes de la página</P>
<TABLE BORDER>
<TR>
<TH>1997
<TH>1998
<TH>1999
<TH>2000
<TR>
<TD>10,000
<TD>20,000
<TD>40,000
<TD>90,000
</TABLE>
</BODY>
</HTML>
52
Títulos de tabla Además de los encabezados, en las tablas se puede introducir un título, es decir, un pequeño texto que describa el contenido de la tabla. En el ejemplo anterior, se utilizó el texto Visitante de la página justo encima de la tabla, para dar una breve explicación de su contenido. Esta
forma de poner un título en una tabla es válida, aunque existe una forma mucho mejor: poner inmediatamente después de <TABLE> la etiqueta <CAPTION>…</CAPTION>, del siguiente
modo: <TABLE>
<CAPTION> Párrafo descriptivo de la tabla </CAPTION> <TR> <TD>
…
</TABLE>
La ventaja de <CAPTION> con respecto a <P> es que adapta el ancho de la línea de texto al
ancho de la tabla, es decir, el título comienza a la altura del borde izquierdo de la tabla y termina a la altura del borde derecho. Dentro de <CAPTION> se pueden utilizar las etiquetas
de estilo de texto, como <I>, <B>, <U>, etc.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplos de encabezados de una tabla </TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION>
<B><I>Visitas realizadas a la página web en los últimos 4
años <I><B>
</CAPTION>
<TR>
<TH>1997
<TH>1998
<TH>1999
<TH>2000
<TR>
<TD>10,000
<TD>20,000
<TD>40,000
<TD>90,000
</TABLE>
</BODY>
</HTML>
53
Aplicar formato a las tablas Las celdas de las tablas tienen muchas más posibilidades de visualización. Se puede cambiar su ancho, su color, la distancia entre unas y otras, etc. Además, al igual que en los párrafos
(<P>), en ellas también se puede aplicar alineaciones (como centrado, izquierda o justificado).
o Ancho y alto de las tablas
El alto que va a tener la tabla se puede establecer con la etiqueta:
<TABLE HEIGHT = n>
HEIGHT indica la altura total de la tabla en pixeles, para ello deberá poner después del
igual (=) la cantidad de píxeles que desea que tenga de alto, por ejemplo:
<TABLE HEIGHT = 280>.
También se puede indicar el tamaño de la tabla en porcentaje de pantalla. Así, por
ejemplo, si escribe HEIGHT=80%, la tabla ocupará el 80% del alto de la ventana del
navegador. De igual modo, para establecer el ancho utilizaremos:
<TABLE WIDTH = n>
Donde WIDTH indica la anchura total de la tabla en píxeles. Su funcionamiento es igual
que el de HEIGHT: deberá poner después del igual la cantidad de píxeles que desea que
tenga de ancho.
54
Por ejemplo: <TABLE WIDTH = 280>
También aquí se puede indicar el tamaño de la tabla en porcentaje de pantalla. Así por
ejemplo, si escribe WIDTH=80% la tabla ocupará el 80% del ancho de la ventana del
navegador. Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplos de ancho y alto de una tabla </TITLE>
</HEAD>
<BODY>
<TABLE BORDER HEIGHT=75% WIDTH=90%>
<CAPTION>
<B><I>Visitas realizadas a la página web en los últimos 4
años <I><B>
</CAPTION>
<TR>
<TH>1997
<TH>1998
<TH>1999
<TH>2000
<TR>
<TD>10,000
<TD>20,000
<TD>40,000
<TD>90,000
</TABLE>
</BODY>
</HTML></HTML>
Cuando se establece el alto y ancho de una tabla en porcentaje, si se
hace más grande o más pequeña la ventana del navegador, la tabla
se adapta a las nuevas dimensiones de la ventana. Esto no ocurrirá si
las medidas se establecen en píxeles.
Nota
55
o Ancho y alto de las celdas
Las etiquetas HEIGHT y WIDTH se pueden aplicar también sobre las celdas, del siguiente
modo: <TD HEIGHT = n WIDTH = n>
También aquí se puede establecer el ancho o alto en píxeles o en porcentaje, pero esta vez relativo al tamaño de la tabla. Así, por ejemplo, si especificamos que el ancho de una celda es del 50 %, querrá decir que esa celda ocupará la mitad del espacio asignado a la tabla. En el siguiente ejemplo, se creará una tabla centrada que ocupará el 60 % de la ventana con una fila y tres columnas. El ancho de las columnas se adaptará al contenido de las celdas.
56
<HTML>
<HEAD>
<TITLE> Ejemplos de alto y ancho de las celdas </TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE WIDTH=60% BORDER=1>
<TR>
<TD>celda 1
<TD>cel. 2
<TD>3
<TD>4
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
57
Para construir una tabla con el aspecto equilibrado, es decir, que todas las columnas de la tabla tengan el mismo ancho, se deberá hacer lo siguiente:
<HTML>
<HEAD>
<TITLE> Ejemplos de alto y ancho de las celdas </TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE WIDTH=60% BORDER=1>
<TR>
<TD WIDTH=25%>celda 1
<TD WIDTH=25%>cel. 2
<TD WIDTH=25%>3
<TD WIDTH=25%>4
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
58
En el siguiente ejemplo se pretende construir una tabla cuya primera fila tenga una celda pequeña seguida de la grande y en la segunda fila ocurra lo contrario, la primera sea grande y la segunda pequeña.
<HTML>
<HEAD>
<TITLE> Ejemplos de alto y ancho de las celdas </TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE WIDTH=60% BORDER=1>
<TR>
<TD WIDTH=25%>ancho 25
<TD WIDTH=75%>ancho 75
</TR>
<TR>
<TD WIDTH=80%>celda ancho 80
<TD WIDTH=20%>ancho 20 </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
HTML no permite especificar diferentes tamaños para celdas pertenecientes a una misma columna y, lo que hace, es tomar el mayor tamaño definido. Lo mismo ocurre con la altura dentro de una misma fila.
Nota
59
o Espacio entre celdas
En la etiqueta <TABLE> se puede establecer también el espacio que debe haber entre una
celda y otra, esto se hace mediante el atributo CELLSPACING. Así, si por ejemplo se desea
que entre celda y celda haya un espacio de 10 píxeles, pondremos: <TABLE CELLSPACING = 10>
También se puede establecer el espacio que hay entre el borde de la celda y el texto
contenido en su interior con el atributo CELLPADDING, que tiene el mismo funcionamiento
que el anterior: <TABLE CELLPADDING = 5>
En el siguiente ejemplo, la primer tabla mostrará las celdas separadas entre sí por 5 puntos de distancia y, en la segunda tabla, las celdas estarán juntas, pero el texto que tienen en su interior distará 5 puntos de los bordes. Lo habitual es combinar ambos para construir así tablas mejor distribuidas.
60
<HTML>
<HEAD>
<TITLE> Ejemplos de espacio entre celdas </TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE WIDTH=40% BORDER=1 CELLSPACING = 5>
<TR>
<TD>1
<TD>2
<TR>
<TD>3
<TD>4
</TABLE>
<BR>
<TABLE WIDTH=40% BORDER=3 CELLPADDING = 5>
<TR>
<TD>1
<TD>2
<TR>
<TD>3
<TD>4
</CENTER>
</BODY>
</HTML>
61
o Alineación de las tablas En muchas ocasiones, puede ser interesante especificar qué posición ocupará la tabla dentro de la ventana del navegador. Así, podemos hacer que la tabla aparezca centrada, pegada a la derecha o alineada a la izquierda. Hay varias formas de realizar la alineación de la tabla:
Incluyendo la tabla dentro de un párrafo, es decir, definir la tabla entre un
<P ALIGN = “alineación”> y un </P>. De esta manera, si se quisiera que una
tabla apareciera alineada a la derecha, podría escribir:
Hay otro pequeño truco para conseguir que la tabla esté centrada y que ya se ha
empleado en los ejemplos anteriores: definir la tabla entre un <CENTER> y un
</CENTER> así, si se quisiera que una tabla se mostrara centrada se escribiría:
<P ALIGN = right>
<TABLE WIDTH=40% BORDER=1 CELLSPACING = 5>
<TR>
<TD>1
<TD>2
<TR>
<TD>3
<TD>4
</TABLE>
</P>
<CENTER>
<TABLE WIDTH=40% BORDER=1 CELLSPACING = 5>
<TR>
<TD>1
<TD>2
<TR>
<TD>3
<TD>4
</TABLE>
</CENTER>
62
Otra forma más sencilla para alinear una tabla es utilizar el atributo ALIGN en la
etiqueta TABLE, del siguiente modo:
<TABLE ALIGN = “alineación”>
Donde alineación es uno de los siguientes valores:
- CENTER. La tabla se muestra centrada
- LEFT La tabla se muestra alineada a la izquierda. (Alineación por defecto si no se pone
nada en <TABLE>)
- RIGHT. La tabla se muestra alineada a la derecha.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplos de alineación de tablas </TITLE>
</HEAD>
<BODY>
<BR>
<TABLE WIDTH=40% BORDER=1 ALIGN = LEFT>
<TR>
<TD>1
<TD>2
</TR>
</TABLE>
<BR>
<BR>
<TABLE WIDTH=40% BORDER=1 ALIGN = CENTER>
<BR>
<TR>
<TD>3
<TD>4
</TR>
</TABLE>
<BR>
<BR>
<TABLE WIDTH=40% BORDER=1 ALIGN = RIGHT>
<TR>
<TD>5
<TD>6
</TR>
</BODY>
</HTML>
63
o Alineación en las celdas
Las etiquetas <TD> y <TH> funcionan de un modo muy similar a la etiqueta <P>, ya que
también permiten que el texto que está en su interior aparezca centrado, a la izquierda, a la derecha o justificado. Al igual que ocurría con <P>, para conseguir ese efecto de alineación se
utiliza la etiqueta:
<TD ALIGN = “alineación”>
Donde alineación es uno de los siguientes valores:
CENTER: El texto de la celda aparece centrado.
LEFT: El texto aparece pegado a la izquierda. Si no se pone nada en <TD>, se
considera por defecto esta alineación.
RIGHT: El texto aparece alineado a la derecha..
JUSTIFY: El texto aparece alineado a la derecha y a la izquierda.
64
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplos de alineación en las celdas </TITLE>
</HEAD>
<BODY>
<TABLE BORDER WIDTH=80% ALIGN = CENTER>
<CAPTION>Ventas realizadas por MotorShop</CAPTION>
<TR>
<TH ALIGN = "LEFT"> Vehículos
<TH ALIGN = "CENTER"> 2009
<TH ALIGN = "CENTER"> 2010
<TR>
<TD ALIGN = "LEFT"> Coches
<TD ALIGN = "RIGHT"> 125,000
<TD ALIGN = "RIGHT"> 32,200
<TR>
<TD ALIGN = "LEFT"> Motos
<TD ALIGN = "RIGHT"> 75,000
<TD ALIGN = "RIGHT"> 2,200
</TABLE>
</BODY>
</HTML>
65
En las tablas, además de alinear en horizontal, también se puede hacer que el texto aparezca pegado a la parte superior de la celda, a la parte inferior o centrado en altura. Para ello se utiliza VALIGN del siguiente modo:
<TD VALIGN = “alineación”>
Donde alineación es uno de los siguientes valores:
TOP: El texto de la celda aparece pegado a la parte superior de la celda.
MIDDLE: El texto aparece en el centro de la celda. Si no se pone nada en <P>, se
considera por defecto esta alineación vertical.
BOTTOM: El texto de la celda aparece pegado a la parte inferior de la celda.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplos de alineación en celdas </TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER WIDTH=70% HEIGHT=70%>
<TR>
<TD WIDTH=33% HEIGHT=33% ALIGN="LEFT" VALIGN="TOP"> arriba izquierda</TD>
<TD WIDTH=33% HEIGHT=33% ALIGN="CENTER" VALIGN="TOP"> arriba centro</TD>
<TD WIDTH=33% HEIGHT=33% ALIGN="RIGHT" VALIGN="TOP"> arriba derecha</TD>
<TR>
<TD WIDTH =33% HEIGHT=33% ALIGN="LEFT" VALIGN="MIDDLE">centro izquierda</TD>
<TD WIDTH =33% HEIGHT=33% ALIGN="CENTER" VALIGN="MIDDLE">centro centro</TD>
<TD WIDTH =33% HEIGHT=33% ALIGN=" RIGHT" VALIGN="MIDDLE">centro derecha</TD>
<TR>
<TD WIDTH =33% HEIGHT=33% ALIGN="LEFT" VALIGN="BOTTOM">abajo izquierda </TD>
<TD WIDTH =33% HEIGHT=33% ALIGN="CENTER" VALIGN="BOTTOM">abajo centro</TD>
<TD WIDTH =33% HEIGHT=33% ALIGN="RIGHT" VALIGN="BOTTOM">abajo derecha </TD>
</TABLE>
</CENTER>
</BODY>
</HTML>
66
Operaciones con celdas
Entre <TD> y </TD> se puede poner cualquier elemento: texto, párrafos, enlaces, imágenes e
incluso otra tabla. o Imágenes dentro de las celdas
Para poner una imagen dentro de una celda, se utiliza la etiqueta <IMG SRC = “archivo”> entre
<TD> y </TD>.
67
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplos de imágenes dentro de celdas </TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER>
<CAPTION> Mascotas </CAPTION>
<TR>
<TD ALIGN="center" VALIGN="middle"> Gatito
<TD> <IMG SRC="Imagenes/gatito.bmp">
<TR>
<TD ALIGN="center" VALIGN="middle"> Lagartijo
<TD> <IMG SRC="Imagenes/lagarto.gif">
<TR>
<TD ALIGN="center" VALIGN="middle"> Sr. Cara de Papa
<TD> <IMG SRC="Imagenes/MrPotato.gif">
</TABLE>
</CENTER>
</TABLE>
</BODY>
</HTML>
68
o Tablas dentro de celdas
Entre <TD> y </TD> también se pueden insertar tablas. Esta técnica se utiliza cuando se
desea dividir una celda en varios apartados. Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplo de tablas dentro de celdas </TITLE>
</HEAD>
<BODY>
<TABLE BORDER WIDTH=80%>
<TR>
<TD> Países Europeos
<TD>
<TABLE BORDER WIDTH=100%>
<TR>
<TD WIDTH=50%> España <TD> Madrid
<TR>
<TD> Francia <TD> Paris
<TR>
<TD> Reino Unido <TD> Londres
</TABLE>
<TR>
<TD> Países Americanos
<TD>
<TABLE BORDER WIDTH=100%>
<TR>
<TD WIDTH=50%> México <TD> México
<TR>
<TD> EEUU <TD> Washington
<TR>
<TD> Canadá <TD> Toronto
</TABLE>
</TABLE></BODY>
</HTML>
69
o Fusión de celdas
Cuando se desea generar celdas que abarquen otras celdas (como en el caso anterior, la celda “Países Europeos” y la celda “Países Americanos”, que engloban a tres celdas), puede utilizar las
siguientes etiquetas que pertenecen a <TD> y </TD>:
ROWSPAN = n
Que indica que esa celda se extiende en n filas
COLSPAN = n
Que indica que esa celda se extiende en n columnas.
Así, por ejemplo, si escribe <TD COLSPAN = 2>, quiere decir que la celda actual se extiende a lo
ancho de dos celdas. Algo parecido ocurre con ROWSPAN, si escribe <TD ROWSPAN = 3>, la celda
ocupará el alto de tres celdas normales. De esta manera, el ejemplo anterior se podría editar de la siguiente manera:
70
<HTML>
<HEAD>
<TITLE> Ejemplo de fusión de celdas </TITLE>
</HEAD>
<BODY>
<TABLE BORDER WIDTH=80%>
<TR>
<TD ROWSPAN=3> Países Europeos
<TD > España <TD> Madrid
<TR>
<TD> Francia <TD> Paris
<TR>
<TD> Reino Unido <TD> Londres
<TR>
<TD ROWSPAN=3> Países Americanos
<TD > México <TD> México
<TR>
<TD> EEUU <TD> Washington
<TR>
<TD> Canadá <TD> Toronto
</TABLE>
</BODY>
</HTML>
71
Si visualiza ahora la tabla anterior, se puede observar que la primera celda ocupa tres filas y no sobrepasa la altura total de las tres celdas que tiene a la derecha. También se puede apreciar que la tabla queda mucho mejor ahora, ya que no hay tantas líneas como en el caso anterior. Además de que el código ha quedado mucho más corto. A continuación se muestra otro ejemplo de una tabla con diferentes formatos de fusión de celdas:
<HTML>
<HEAD>
<TITLE> Ejemplo de fusión de celdas </TITLE>
</HEAD>
<BODY>
<TABLE BORDER WIDTH=80% HEIGHT=80%>
<TR>
<TD WIDTH = 20%> Celda 1x1
<TD COLSPAN=2> Celda 2x1
<TD WIDTH = 20%> Celda 1x1
<TD WIDTH = 20%> Celda 1x1
<TR>
<TD ROWSPAN=2 COLSPAN=2> Celda 2x2
<TD COLSPAN=2> Celda 2x1
<TD ROWSPAN=3> Celda 1X3
<TR>
<TD WIDTH = 20%> Celda 1x1
<TD ROWSPAN=2 COLSPAN=1 ALIGN=CENTER> Celda 1x2
<TR>
<TD> Celda 1x1
<TD VALIGN=BOTTOM COLSPAN=2> Celda 2x1
</TABLE>
</BODY>
</HTML>
72
Mejorando el aspecto de la tabla
Se puede mejorar aún más el aspecto de una tabla añadiendo color e imágenes, como se verá a continuación. o Dar color al borde
Es posible definir el color que van a tener las líneas de la tabla. Para ello, se utiliza el parámetro BORDERCOLOR del siguiente modo:
<TABLE BORDERCOLOR = color>
De este modo, si quisiéramos que una tabla mostrara las líneas de color verde, debería especificarse del siguiente modo: <TABLE BORDERCOLOR = green>
o bien <TABLE BORDERCOLOR = “#00FF00”>
73
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplo de color en borde </TITLE>
</HEAD>
<BODY>
<TABLE BORDER = 2 BORDERCOLOR="#00FF00" WIDTH=80%
HEIGHT=80%>
<TR>
<TD WIDTH = 20%> Celda 1x1
<TD COLSPAN=2> Celda 2x1
<TD WIDTH = 20%> Celda 1x1
<TD WIDTH = 20%> Celda 1x1
<TR>
<TD ROWSPAN=2 COLSPAN=2> Celda 2x2
<TD COLSPAN=2> Celda 2x1
<TD ROWSPAN=3> Celda 1X3
<TR>
<TD WIDTH = 20%> Celda 1x1
<TD ROWSPAN=2 COLSPAN=1 ALIGN=CENTER> Celda 1x2
<TR>
<TD> Celda 1x1
<TD VALIGN=BOTTOM COLSPAN=2> Celda 2x1
</TABLE>
</BODY>
</HTML>
74
No obstante, existen otros dos parámetros, que anulan al anterior, y que permiten definir el color de las líneas de la tabla:
BORDERCOLORLIGHT: Especifica el color de las líneas que aparecen iluminadas en la
tabla (el borde superior y el izquierdo) BORDERCOLORDARK: el color de las líneas que aparecen sombreadas en la tabla (el
borde inferior y el derecho). Con estos dos parámetros se puede dar un efecto 3D a las tablas muy interesante. Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplo de color en borde </TITLE>
</HEAD>
<BODY>
<TABLE BORDER = 3 WIDTH=100% BORDERCOLORLIGHT="#C0C0C0"
BORDERCOLORDARK="000000" CELLPADING="2">
<TR>
<TD ALIGN = CENTER><B>BORDE EN 3D</B></TD>
</TABLE>
</BODY>
</HTML>
75
o Colores en las celdas
Tanto <TD> como <TH>, aceptan el parámetro:
BGCOLOR = color
Al igual que ocurría con la etiqueta FONT, después de BGCOLOR debe ir un código que indica
el color que va a utilizar. Así, por ejemplo, si se quisiera poner una celda de color azul, escribiría:
<TD BGCOLOR = “blue”> Esta celda es azul </TD>
o bien: <TD BGCOLOR = “#66CCFF”> Esta celda es azul </TD>
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplo de color en celda </TITLE>
</HEAD>
<BODY>
<TABLE BORDER = 3 WIDTH=400 HEIGHT=100>
<TR>
<TD>
<TD ALIGN = CENTER>rojo
<TD ALIGN = CENTER>verde
<TD ALIGN = CENTER>azul
<TR>
<TD ALIGN = CENTER>rojo
<TD BGCOLOR="#FF0000" ALIGN=CENTER>rojo y rojo
<TD BGCOLOR="#F0F000" ALIGN=CENTER>rojo y verde
<TD BGCOLOR="#F000F0" ALIGN=CENTER>rojo y azul
<TR>
<TD ALIGN = CENTER>verde
<TD BGCOLOR="#F0F000" ALIGN=CENTER>verde y rojo
<TD BGCOLOR="#00FF00" ALIGN=CENTER>verde y verde
<TD BGCOLOR="#00F0F0" ALIGN=CENTER>verde y azul
<TR>
<TD ALIGN = CENTER>azul
<TD BGCOLOR="#F000F0" ALIGN=CENTER>azul y rojo
<TD BGCOLOR="#00F0F0" ALIGN=CENTER>azul y verde
<TD BGCOLOR="#0000FF" ALIGN=CENTER>azul y azul
</TABLE>
</BODY>
</HTML>
76
o Color de fondo en la tabla
También la etiqueta <TABLE> acepta el parámetro BGCOLOR, del mismo modo que ocurre
con <TD> y <TH>. Si se quisiera crear una tabla de fondo verde, se escribiría:
<TABLE BGCOLOR = “color”>
o bien: <TABLE BGCOLOR = “#66CCFF”>
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplo de color de fondo en la tabla </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=2 BGCOLOR="#FFCCCC" WIDTH=80%>
<TR>
<TD ROWSPAN=3> Países Europeos
<TD > España <TD> Madrid
<TR>
<TD> Francia <TD> Paris
<TR>
<TD> Reino Unido <TD> Londres
<TR>
</TABLE>
</BODY>
</HTML>
77
o Imagen de fondo en la tabla Además de establecer un color de fondo en una tabla, HTML nos permite también poner una imagen de fondo. El resultado es: el navegador muestra la imagen y sobre ella se muestra la tabla. En el caso de que la imagen no abarque completamente el ancho y alto de la tabla, el navegador la repetirá a modo de mosaico, hasta completar toda el área ocupada por la tabla. Para poner una imagen de fondo a una tabla se utiliza la etiqueta: <TABLE BACKGROUND = “archivo de imagen”>
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplo de imagen de fondo en la tabla </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=2 WIDTH=80% BACKGROUND="Imagenes/Tapiz4.jpg" >
<TR>
<TD ROWSPAN=3> Países Europeos
<TD > España <TD> Madrid
<TR>
<TD> Francia <TD> Paris
<TR>
<TD> Reino Unido <TD> Londres
<TR>
</TABLE>
</BODY>
</HTML>
78
o Imagen de fondo en una celda
También las celdas admiten imágenes de fondo. El resultado es similar a insertar una imagen en una celda, aunque hay una diferencia: si la imagen está insertada como fondo el texto que tenga la celda se mostrará encima de la imagen. Al igual que ocurría con <TABLE>, para establecer el fondo de una celda se utiliza también el
parámetro BACKGROUND:
<TD BACKGROUND = “archivo de imagen”>
Este parámetro se puede utilizar también en <TH>. Igualmente se puede aplicar con <TR>. en
este último caso, la imagen aparecería como fondo de toda esa fila de la tabla.
79
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplo de imagen de fondo en una celda </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=2 WIDTH=80%>
<TR>
<TD ROWSPAN=3 BACKGROUND="Imagenes/Tapiz2.jpg" > Países
Europeos
<TD > España <TD> Madrid
<TR>
<TD> Francia <TD> Paris
<TR>
<TD> Reino Unido <TD> Londres
<TR>
</TABLE>
</BODY>
</HTML>
80
o Organización de páginas
Las tablas no se utilizan únicamente para mostrar información dentro de una página, sino que también se emplean para dar una estructura más sólida a las páginas. Si ha observado la estructura de un Portal, se habrá percatado de que todos ellos tienen una distribución muy parecida. En su mayoría todos ellos poseen:
Una zona superior, llamada “cabecera”, con el nombre del portal y, en algunas ocasiones, publicidad (banners).
Una zona lateral izquierda, en la que se encuentran menús con opciones.
Una zona central, con información.
En ocasiones, una zona derecha, con resúmenes, noticias destacadas o más accesos.
Y una zona inferior, llamada “pie”, con la firma del portal, información de copyright, etc.
Esta estructura se puede conseguir mediante tablas. Como se mencionó anteriormente, en el interior de una celda se puede colocar cualquier elemento, incluso otra tabla. De este modo, la estructura de una página de portal se podría construir del siguiente modo: Ejemplo: <HTML>
<HEAD>
<TITLE> Ejemplo de organización de páginas </TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=100% BORDER=0>
<TR>
<TD COLSPAN=3 BGCOLOR="#0000F0" >
<!- Aqui va la cabecera del portal ->
<CENTER>
<FONT SIZE=8 COLOR=WHITE> BIENVENIDOS A MI PORTAL
</CENTER>
<TR>
<TD VALIGN=TOP ALIGN=LEFT WIDTH=100>
<!- Aqui va la parte derecha con los menús ->
<TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0
BORDER=1>
<CAPTION> MENÚ </CAPTION>
<TR>
<TD BGCOLOR="#F0F0F0">
.
.
81
.
. <TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0 BORDER=0> <TR><TD><A HREF="opcion1.htm"> Opcion 1 </A> <TR><TD><A HREF="opcion2.htm"> Opcion 2 </A> <TR><TD><A HREF="opcion3.htm"> Opcion 3 </A> <TR><TD><A HREF="opcion4.htm"> Opcion 4 </A> </TABLE> </TABLE> <TD VALIGN=TOP ALIGN=LEFT WIDTH=400> <!- Aqui va la parte central con la información -> En este portal se incluye mucha información interesante para organizar la distibución de un portal de Internet. <TD VALIGN=TOP ALIGN=LEFT> <!- Aqui va la parte izquierda -> <TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0 BORDER=1> <TR> <TD> <CENTER> <FONT SIZE=2 COLOR=RED> ¿Quiere realizar una búsqueda en Internet? <BR> <BR>VISITE <H4> <A HREF="www.google.com">GOOGLE</A> </FONT> <BR> </CENTER> </TABLE> <TR> <TD COLSPAN=3 BGCOLOR="GREEN"> <!- Aqui va el pie del portal -> <CENTER> <ADDRESS> Este portal ha sido construído por JTM@ <BR> con HTML </ADDRESS> </CENTER> </TABLE> </BODY> </HTML>
82
83
Anexo I. CÓDIGOS DE COLORES
16 Colores Estándar (4 bits)
BLACK NAVY BLUE TEAL AQUA
SILVER GRAY YELLOW GREEN OLIVE LIME
RED MAROON WHITE FUCHSIA PURPLE
256 Colores RGB (8 bits)
RED
FF0000
FF3300 CC3300 FF9999 FFCCCC 990033
MAROON
990000 FF3333 CC3333 FFCC99 CC0066 993300 FF0033 CC0033 FF9966 FF6699 660000 000000 CC0000 663333 990066 330000
LIME
66FF00
33FF33 66FF66
OLIVE
66FF00
99FF99 CCFFCC
GREEN
00FF00 00CC00 009900 006600 003300 00CC00 009900 006600 003300 009900 006600 66FF00 009900
AQUA
00FFFF
00FFFF 3333FF
TEAL
006666
6666FF 9999FF
BLUE
0000FF 33FFFF 66FFFF 99FFFF CCFFFF
CCCCFF 0000CC 000099 000099 CCCCFF 000066 000033 000099
00CCCC 009999 006666 003333
YELLOW FFFF33 FFFF66 FFFF99 FFFFCC CCCC00 999900 666600 333300
FUCHSIA FF33FF FF66FF FF99FF FFCCFF CC00CC 990099 660066 330033
TEAL 7D337D 7D667D 7D997D 7DCC7D E100E1 CC00CC AF00AF 990099
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
84
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
663300 663333 663366 663399 6633CC 6633FF
660000 660033 660066 660099 6600CC 6600FF
333300 333333 333366 333399 3333CC 3333FF
003300 003333 003366 003399 0033CC 0033FF
330000 330033 330066 330099 3300CC 3300FF
000000 000033 000066 000099 0000CC 0000FF
Ver archivo PDF en CD
Anexo II. CARTA DE COLORES
Nota
85
GLOSARIO
HTML. HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web.
WWW. (World Wide Web) Telaraña mundial, interconexión de redes de computadoras a nivel mundial, soportando principalmente la red de Internet.
URL. Un localizador uniforme de recursos, más comúnmente denominado URL (sigla en inglés de uniform resource locator), es una secuencia de caracteres, de acuerdo a un formato modélico y estándar, que se usa para nombrar recursos en Internet para su localización o identificación, como por ejemplo documentos textuales, imágenes, vídeos, presentaciones digitales, etc.
URI. Uniform Resource Identifier, una cadena corta de caracteres que identifica inequívocamente un recurso.
Host. El término Host es usado en informática para referirse a los computadores conectados a la red, que proveen o utilizan servicios de ella. De forma general un host es todo equipo informático que se encuentra interconectado con uno o más equipos.
Puerto. Es una forma genérica de denominar a una interfaz a través de la cual los diferentes tipos de datos se pueden enviar y recibir. Dicha interfaz puede ser de tipo físico, o puede ser a nivel de software (por ejemplo, los puertos que permiten la transmisión de datos entre diferentes ordenadores), en cuyo caso se usa frecuentemente el término puerto lógico.
HTTP. Hypertext Transfer Protocol (en español protocolo de transferencia de hipertexto) es el protocolo usado en cada transacción de la World Wide Web. HTTP define la sintaxis y la semántica que utilizan los elementos de software de la arquitectura web (clientes, servidores) para comunicarse.
HIPERTEXTO. Es el nombre que recibe el texto que en la pantalla de un dispositivo electrónico conduce a otro texto relacionado. La forma más habitual de hipertexto en informática es la de hipervínculos o referencias cruzadas automáticas que van a otros documentos
HIPERENLACE. Un hipervinculo (también llamado enlace, vínculo, o hiperenlace) es un elemento de un documento electrónico que hace referencia a otro recurso, por ejemplo, otro documento o un punto específico del mismo o de otro documento.
CLIENTE WEB o navegador de Internet (Internet Explorer, Google Chrome, Mozilla, Firefox, etc.)
FTP. File Transfer Protocol - Protocolo de Transferencia de Archivos, es un protocolo de red para la transferencia de archivos entre sistemas conectados a una red.
Portal. Un portal de Internet es un sitio web cuya característica fundamental es la de servir de Puerta de entrada (única) para ofrecer al usuario, de forma fácil e integrada, el acceso a una serie de recursos y de servicios relacionados a un mismo tema. Incluye: enlaces, buscadores, foros, documentos, aplicaciones, compra electrónica, etc. Principalmente un portal en Internet está dirigido a resolver necesidades de información específica de un tema en particular.
86
REFERENCIAS BIBLIOGRAFICAS/CIBERGRÁFICAS
1. Manual Imprescindible de HTML 4.1 Germán Galeano Gil, José Carlos Sánchez Alonso, Pablo Díaz Márquez
Ed. Anaya Multimedia
2. Acceso Rápido Diseñar su propia página web Lilian Hobs
Ed. Marcombo 3. http://www.virtualnauta.com/es/html/home.php 4. http://www.virtualnauta.com/es/html/html-ejemplos.php 5. http://html-color-codes.info/codigos-de-colores-hexadecimales/
6. http://es.wikipedia.org
