HTML Referencia

IESTP Flix de la Rosa Reategui y Gaviria
Computacin e Informtica I Mdulo / Gestin y Administracin Web

Tutorial de HTML
Internet ha crecido hasta convertirse en lo que es hoy gracias, en gran medida, al HTML.
Este lenguaje de etiquetas es la base sobre la que se construyen las pginas que se
intercambian el servidor web y el navegador del usuario.
En sus orgenes supuso una revolucin, en tanto que permita la inclusin de imgenes
en los documentos y permita dar cierto formato al texto. Ahora sus posibilidades se han
ampliado todava ms, con la llegada de los CGIs, los lenguajes de scripting, las hojas de
estilos, el lenguaje Java y el DHTML. Conocerlo es un buen comienzo.
Indice
Captulo 1: Introduccin al HTML
1. Qu es el HTML?
2. El concepto de etiqueta (tag)
3. El concepto de argumento
4. Mi primera pgina
Captulo 2: Insercin de textos

1. Creacin de prrafos
2. Dando formato al texto
Captulo 3: Insercin de imgenes

1. Formatos de imgenes
2. Insercin de una imagen de fondo
3. Insercin de imgenes en el documento
Captulo 4: Creacin de enlaces

1. Concepto de enlace o hipervnculo
2. Enlaces externos e internos
3. Las rutas o paths
4. Creando enlaces de texto
5. Creando enlaces de imgenes
6. El target u objetivo del enlace
Captulo 5: Creacin de tablas

1. Introduccin
2. Estructura de una tabla
3. Especificando las dimensiones
4. Posicionamiento del texto
5. Bordes y colores
6. Conclusin
Captulo 1: Introduccin al HTML
1] Prof. Enrique Pinedo Macedo {} warrior.lepm@gmail.com

1. Qu es el HTML?
4. Mi primera pgina
1. Qu es el HTML?
La world wide web tiene una arquitectura cliente / servidor. Un programa cliente que se
ejecuta en tu ordenador (el navegador o browser) solicita informacin de un programa
servidor que se ejecuta en una mquina en cualquier otro lugar. El servidor enva la
informacin solicitada de vuelta a travs de la red al programa navegador, el cual la
interpreta para mostrarla en la pantalla.
Para que el intercambio de informacin entre el cliente y el servidor se realice de
acuerdo a unos parmetros que ambos puedan entender, se utilizan protocolos de
comunicaciones. Internet se fundamenta en el protocolo TCP/IP, sobre el cual se
construyen otros protocolos de aplicacin. En el caso de la world wide web, el protocolo
utilizado es el HTTP (Hipertext Transfer Protocol).
Cuando el navegador recibe la informacin, la interpreta para mostrarla en la pantalla.
Las pginas que se visualizan estn formadas, fundamentalmente, por textos e
imgenes, con una estructura y un formato especficos. El HTML (Hipertext Markup
Language) es lo que nos permite decirle al navegador cmo debe mostrar la informacin:
formato de los textos, colores, orden de los prrafos, etc.
A menudo observamos como una misma pgina puede visualizarse de manera diferente
(colores, ancho de tablas, formato de textos, etc.) en funcin del navegador que se
utilice: el HTML no es una forma de codificar la informacin, sino de especificar el
formato que debe darse a la informacin. Por ejemplo, podemos transmitir la palabra
"Hola!" que tenemos guardada en un fichero de texto. Pero, cmo decirle al navegador
que la muestre de color rojo y centrada? El HTML es la respuesta.

El HTML describe el aspecto visual que debe tener una pgina mediante la utilizacin de
etiquetas (tags). Las etiquetas le indicarn al navegador la posicin relativa de los
elementos de la pgina, su tamao, las tipografas y colores a utilizar, etc.
Las etiquetas son como instrucciones que le indican al navegador como mostrar la
informacin. Existen dos clases de etiquetas:
I. Etiquetas vacas
Tiene el siguiente formato:
<etiqueta>
Se utilizan para introducir saltos de lnea, lneas horizontales, y otros elementos no
asociados al formato de textos o imgenes.
I. Etiquetas contenedoras
Tienen el siguiente formato:
<etiqueta> ... </etiqueta>

Estas etiquetas dan un formato al texto o porcin del documento que engloban. Este tipo
de etiquetas tiene una marca inicial, y una marca final igual que la inicial, pero con el
carcter "/". Todo lo que est contenido entre ambas marcas quedar sujeto al formato
indicado por la etiqueta. Por ejemplo, podemos mostrar la palabra "Hola!" en cursiva de
la siguiente forma:
<i>Hola!</i>
La mayora de estas etiquetas pueden, a su vez, contener otras etiquetas, de cualquiera

de los dos tipos. Por ejemplo, para mostrar la palabra "Hola!" en cursiva y negrita:
<i><b>Hola!</b></i>
Las etiquetas pueden especificar, por ejemplo, que cierta palabra aparezca en negrita.
Pero si queremos que cierta palabra aparezca de color rojo, necesitamos suministrar un
parmetro: el color. La mayora de las etiquetas tienen parmetros para indicar mltiples
aspectos del formato, como el color, el tamao, la posicin, etc.
El formato de una etiqueta con parmetros es el siguiente:
<etiqueta parametro1="valor1" parametro2="valor2" ... > ... </etiqueta>
Por ejemplo, para mostrar la palabra "Hola!" en rojo, utilizamos la etiqueta font con el
parmetro color igual a red:
<font color="red">Hola!</font>
4. Mi primera pgina
Toda pgina HTML debe comenzar por la etiqueta <html> y terminar con </html>. Todo
lo que figure entre estas etiquetas ser interpretado por el navegador como un
documento HTML. Lo que quede fuera de ellas ser, en la mayora de los casos,
ignorado.
El documento HTML se divide siempre en dos partes: cabecera y cuerpo.
4.1. Cabecera
La cabecera figura entre las etiquetas <head> y </head>. En ella se especifica el
ttulo, el autor, y otras caractersticas del documento que no se muestran
fsicamente en la pgina y que sirven para facilitar su indexacin (son lo que se
conoce como meta tags). En la cabecera tambin deben incluirse los scripts que
necesite el documento (JavaScript, JScript, etc.) y las definiciones de estilos (si se
utilizan hojas de estilos).
4.2. Cuerpo
El cuerpo es la parte del documento que se circunscribe entre las etiquetas
<body> y </body>. En esta parte se incluye la pgina propiamente dicha.

Teniendo esto en cuenta podemos construir ya nuestra primera pgina HTML con
los elementos mnimos necesarios para que sea interpretada correctamente por
un navegador:
<html>
<head>
<title>Mi primera pgina HTML</title>
</head>
<body>
Mi primera pgina HTML
</body>
</html>
Como se observa en el ejemplo, podemos insertar saltos de lnea en cualquier

parte del documento.
Captulo 2: Insercin de textos

Toda pgina HTML est compuesta, principalmente, por prrafos de texto combinados
con otros elementos, como pueden ser imgenes, tablas o formularios. La insercin de
prrafos ser realiza mediante la utilizacin de la tiqueta <p> y su correspondiente
cierre, </p>.
La separacin entre los prrafos queda prefijada al utilizar las etiquetas anteriores,
aunque depender del navegador con el que se muestre la pgina. Sin embargo s
podemos modificar la justificacin del texto mediante el parmetro align, que puede
tomar los valores left (alineacin izquierda), center (alineacin centrada) y right
(alineacin derecha).
Si se desea dejar poco espacion entre prrafos se pueden insertar saltos de lnea
mediante la etiqueta <br>. A diferencia del tag <p> ... </p>, esta etiqueta no tiene
cierre.
Vamos a ver un ejemplo de lo descrito anteriormente:
<html><head>
<title>Ejemplo de creacin de prrafos</title>
</head><body>
<p align="right">Prrafo alineado a la derecha.</p>
<p align="center">Prrafo centrado.</p>
<p align="left">Prrafo alineado a la izquierda...<br>y pegado e esta otra lnea.</p>
</body>
</html>
El resultado del cdigo anterior es el siguiente:

Prrafo alineado a la derecha.
Prrafo centrado.

Prrafo alineado a la izquierda...
y pegado a esta lnea.

Para controlar las tipografas, colores y tamaos de los textos de tu pgina puedes
utilizar la etiqueta <font> ... </font>. Este tag est siendo reemplazado por la
utilizacin de hojas de estilos (CSS), pero para usuarios poco avanzados es mejor
comenzar utilizando la etiqueta <font>, ms fcil de entender y de implementar.
Para elegir el tipo de letra que desea utilizar en un prrafo, basta con incluirlo entre
<font face="tipo-letra"> ... </font>. Por ejemplo, si queremos escribir Hola! con
letra Century Gothic utilizamos el siguiente cdigo:
<p><font face="Century Gothic">Hola!</font></p>
Lo que resulta en:

Hola!
Si queremos cambiar el color, emplearemos <font color="color"> ... </font>, donde
color es un nmero que indica el color. Este nmero est codificado en hexadecimal, y
utiliza 256 bits para cada uno de los colores primarios (rojo, verde y azul). En
hexadecimal con dos caracteres (de 0 a 9 y de la A a la F) se representan valores de 256
bits. As, el color blanco se expresa como #FFFFFF y el negro como #000000. Como se
aprecia, este sistema es poco intuitivo, por lo que se pueden usar las nomenclaturas
estndar de los colores en ingls (red, para el rojo, black para el negro, etc.), pero este
sistema es menos flexible y ms dependiente del navegador.
Veamos un ejemplo:
<p><font color="red">Hola!</font></p>
Que resulta en:

Hola!
Finalmente, si lo que queremos es modificar el tamao, le etiqueta a usar es <font
size="tamao"> ... </font>, donde tamao es un nmero que puede indicar el
tamao absoluto (con rango de 1 a 7) o el relativo. Por ejemplo, si se utiliza size="2" e
texto se mostrar en tamao 2. Si se utiliza size="+2", se le indica al navegador que
muestre el texto 2 veces ms grande que el tamao por defecto definido.
El siguiente ejemplo
<p><font size="5">Hola!</font></p>
Por supuesto, existe la posibilidad de combinar los 3 modificadores anteriores en un

mismo tag <font>, para especificar el tamao, color y tipo de letra de una sola vez. En
este ejemplo
<p><font face="Courier" color="red" size="4">Hola!</font></p>
Indicamos que el texto debe escribirse con tipografa courier, color rojo y tamao 4.

Captulo 3: Insercin de imgenes

Buena parte de la potencia del HTML se basa en la posibilidad de insertar imgenes en
los documentos. Nuestras pginas adquieren de este modo un aspecto visual atractivo, y
se convierten en una potente herramienta visual para transmitir y comunicar ideas.
Aunque algunos navegadores soportan otros formatos de imgenes, fundamentalmente
se utilizan los 2 que originalmente soportaron Netscape y Mosaic (uno de los primeros
navegadores):
1.1 GIF (Graphics Interchange Format)

El formato GIF (Graphics Interchange Format, Formato de Intercambio de Grficos)
es un formato propietario de CompuServe Inc. cuya especificacin data de 1987.
Este formato se caracteriza por limitar la profundidad del color a 256 colores y por
poseer un sistema de compresin rudimentario (basado en el algoritmo LZW) que
es efectivo nicamente cuando los colores de la imagen son planos (sin existencia
de mltiples transiciones de color). De esta forma, es el formato ideal para iconos,
diagramas y grficas.
Otra de sus caractersticas es la posibilidad de crear imgenes GIF entrelazadas.
Esto quiere decir que la informacin de la imagen se almacena por filas no
consecutivas, permitiendo una visualizacin progresiva de la imagen completa
pero con poca resolucin. Segn se va descargando la totalidad de la misma, va
aumentando la resolucin, hasta que se tiene la imagen final.
Pero lo que ms juego ha dado del formato GIF es la posibilidad de crear pequeas
animaciones (GIFs animados). Se basa en el almacenamiento en un mismo fichero
de imagen de varios fotogramas. El formato incluye la definicin de los tiempos
entre cada fotograma. A pesar de ser la forma ms sencilla de crear animaciones,
no es la ms ptima en cuanto a tamao y calidad, por lo que queda limitado a
iconos y pequeos efectos visuales.
1.2 JPEG (Joint Photographic Experts Group)

El estndar JPG (Joint Photographic Experts Group) surge con la necesidad de crear
un formato de almacenamiento de imgenes con calidad similar a la de una
fotografa y con un alto grado de compresin (para reducir el tamao de los
archivos). De esta forma, este formato soporta 16 millones de colores y es ideal
para imgenes con multitud de colores, como fotografas.
El formato permite seleccinar el grado de compresin de la imagen, lo que es
ideal para lograr tamaos de archivo ptimos. El algoritmo de compresin que
utiliza es con prdidas, lo que implica que a mayor grado de compresin, menor es
la calidad de la imagen. Sin embargo, y debido a las caractersticas del ojo
humano, determinadas prdidas de calidad no son apreciables, por lo que se
pueden conseguir compresiones del 50% sin que se aprecie prdida de calidad.


Para insertar una imagen de fondo basta con aadir un parmetro a la etiqueta <body>.
Por ejemplo:
<body background="fondo.jpg">
Con este ejemplo indicamos que el fondo de nuestra pgina sea la imagen fondo.jpg.
Esta imagen debe existir en la misma carpeta que contenga la pgina HTML. Si
queremos ordenar los archivos en diferentes carpetas, podemos indicar dnde se
encuentra nuestar imagen. Veamoslo con otro ejemplo:
<body background="imagenes/fondo.jpg">
En este caso, la imagen est dentro de la carpeta imagenes. Tambin es posible enlazar
con una imagen que est en otro servidor, espicificando su URL (ver apartado 3 para una
explicacin del concepto de URL).

Para insertar una imagen en el documento se utiliza la etiqueta <img>. Para especificar
la imagen a visualizar se utiliza el parmetro src:
<img src="logo.gif">
La imagen aparecer en el lugar donde se encuentre la etiqueta. Mediante el uso de

otros parmetros podemos especificar la alineacin del texto alrededor de la imagen, el
tamao de la misma y otras caractersticas. Vamos a ver los ms utilizados:
align: permite especificar la alineacin de la imagen y del texto alrededor de la imagen.
Puede tomar los valores left, right, top, texttop, middle, absmiddle, baseline,
bottom, absbottom. Ejemplos:
<img src="logo.gif" align="middle">Texto alineado en el centro...
Texto alineado en el centro...

<img src="logo.gif" align="bottom">Texto alineado abajo...
Texto alineado abajo...
alt: este parmetro permite especificar un texto alternativo, que se muestra cuando el
puntero del ratn pasa por encima de la imagen. Tambin es el texto que aparece antes

de que se complete la carga de la imagen, y en lugar de la misma en los navegadores
que no soportan grficos. Ejemplo:
<img src="logo.gif" alt="Tutorial de HTML">
width / height: permiten especificar el tamao de la imagen (ancho y alto). Si no se

incluyen, la imagen se muestra a su tamao real. Aunque se desee mostrar la imagen a
tamao real, es conveniente incluir estos parmetros para permitir que el navegador
construya la pgina antes de haber finalizado la carga de todas las imgenes, mostrando
por lo menos el texto del documento. Ejemplo:
<img src="logo.gif" width="150" height="100">
border: cuando una imagen es un enlace, por defecto, el navegador la incluye en una
marco o borde (ver imagen de la izquierda). Si no se desea que aparezca este borde,
debe especificarse border="0" (imagen de la derecha). Tambin puede tomar un valor
distinto de 0, en cuyo caso representa el tamao (grosor) del borde.
Captulo 4: Creacin de enlaces

4. Creando enlaces de texto

Una de las mayores virtudes del lenguaje HTML, y la que le da su nombre, es la
posibilidad de crear enlaces o hipervnculos que relacionan diferentes pginas entre s.
HTML son las siglas de HiperText Mark-up Language, que podra traducirse como
lenguaje de etiquetas hipertexto.
Los enlaces, vnculos o hipervnculos (tambin conocidos como links, su denominacin
inglesa) son simplemente caminos hacia otras pginas de la world wide web. Su
funcionamiento es muy simple: el texto que queramos permita ir a otra pgina se marca
de forma especial (ya veremos cmo). A partir de entonces, en la pgina aparecer

resaltado (originalmente, mediante color azul y subrayado), y cuando el ratn se mueva
sobre dicho texto, cambiara el puntero para indicar que ah tenemos un enlace. Al pulsar
sobre l, instruimos al navegador para abrir la pgina a la que hace referencia.
El resultado es la vinculacin de nuestra pgina y la pgina a la que hace referencia el
enlace. De esta forma, se va creando entre las pginas de diferentes sitios una maraa
de hiperenlaces, que da nombre a la world wide web (tela de araa mundial).

Lo primero que debemos entender, antes de lanzarnos a la creacin de enlaces, es el
funcionamiento de la world wide web. Nuestras pginas residen en un ordenador
(llamado tpicamente host). Este ordenador est conectado a la red permanentemente, y
pone a disposicin de todas las pginas web que alberga. Simplificando un poco,
podemos decir que nuestras pginas podrn enlazar con pginas de otros hosts (lo que
sera un enlace externo) o con pginas de nuestro propio host (enlace interno).
Realmente, nuestro host puede contener pginas de diferentes sites (no slo las
nuestras, sino tambin las de otras personas o empresas). Si enlazamos con ellas
tambin creamos enlaces externos.
La diferencia fundamental est en la necesidad de indicar, para un enlace externo, el

nombre del host que contiene la pgina a la que estamos enlazando. Para los enlaces
internos, no ser necesario. El navegador sabe que si un enlace no lo indica es interno, lo
que quiere decir que la pgina enlazada est en el mismo host que la pgina que
contiene el enlace. Puede parecer complicado, pero realmente no lo es.

El concepto de ruta o path tambin suele confundir al principio. Cuando creamos un sitio
web pequeo, con un centenar de pginas, quiz no nos preocupe demasiado el orden, y
no nos importe que todas ellas se encuentren en el mismo fichero. Los ficheros son como
los cajones de los espacios de almacenamiento de los hots.
Cranme, meterlo todo en un mismo cajn no es buena idea. Sobre todo si nuestro site
crece, y tenemos miles de pginas. Mantener un site en estas condiciones es ardua
tarea.

El orden siempre ayuda, lo que nos induce a crear mltiples ficheros o cajones para
almacenar las pginas. Dentro de un fichero o carpeta, podemos crear subcarpetas para
clasificar mejor, y as sucesivamente. El resultado final es que para localizar una pgina
debemos indicar la ruta o path hacia ella. Esta ruta no es ms que la sucesin de los
nombres de los ficheros hasta llegar al que, finalmente, contiene la pgina.
Por ejemplo, si la pgina ejemplo1.html est en la carpeta ejemplos, la cual a su vez
est en la carpeta tutoriales, su ruta sera:
/tutoriales/ejemplos/ejemplo1.html
El concepto de ruta relativa y ruta absoluta aaden ms complejidad al asunto. La

ruta se dice absoluta si parte de la raz de nuestra zona de almacenamiento (es decir,
parte de la carpeta que contiene a cualquier otra, y que normalmente se designa
simplemente por el carcter /). El ejemplo anterior es una ruta absoluta. Se caracteriza
por comenzar con dicho carcter /.
Si la ruta parte de otra carpeta, entonces es relativa. Por ejemplo, desde la pgina
ejemplo1.html podemos referenciar a una pgina contenida en la carpeta tutoriales, y
de nombre tutorial1.html, de este modo:
../tutorial1.html
Y desde tutorial1.html, podemos referenciar la pgina ejemplo1.html as:

ejemplos/ejemplo1.html
Como se observa, estos ejemplos no comienzan con el carcter /, lo que indica que son
rutas relativas. Relativas a qu? A la carpeta que almacena la pgina que contiene el
enlace. La cadena .. (dos puntos seguidos) tiene un significado especial: referencia
siempre a la carpeta padre.
4. Creando enlaces de textos

Si comprendemos los conceptos anteriores, no tendremos ninguna dificultad para crear
enlaces. La etiqueta HTML destinada a tal efecto es <a href...> ... </a>. La viene de
anchor (en ingls, ancla).
Por ejemplo, si queremos que el siguiente texto "Enlace" tenga un enlace a la pgina
ndice de este tutorial, de nombre html.html, escribiremos:
<a href="html.html">Enlace</a>
Y el resultado ser:
Enlace
Como se ve, la sintxis es muy sencilla. El enlace anterior es relativo, porque no incluye
el nombre del host. Si queremos crear un enlace absoluto a esta misma pgina,
tendremos que escribir:
<a href="https://www.google.com/tutoriales/html/html.html">Enlace</a>

La codificacin de este ejemplo est partida en 2 por cuestiones de espacio (deber
estar en una sola lnea). Como se ve, ahora aparece el host (www.google.com) y la ruta
(/tutoriales/html/html.html).

Para que una imagen se convierta en un enlace, basta con incluir la definicin de la
imagen dentro de las etiquetas <a href...> y </a>.
Por ejemplo:
<a href="html.html"><img src="../../images/tutoriales2.gif"></a>
En este ejemplo, el enlace est en la imagen imagen.gif. Y el resultado:
Como se ve, la imagen est especificada con una ruta relativa.
Captulo 5: Creacin de tablas

1. Introduccin
3. Especificando las dimensiones
5. Bordes y colores
6. Conclusin
1. Introduccin
Quiz uno de los elementos de presentacin de datos ms comunes es las pginas web
sea la tabla, que nos ayuda a organizar la informacin cmodamente en filas y columnas,
mejorando notablemente el aspecto visual de la misma.
Sin embargo, la utilidad de las tablas HTML va mucho ms all de la simple presentacin
ordenada de la informacin. El lenguaje HTML tiene enormes carencias en lo que a
maquetacin de los elementos de una pgina se refiere (posicionamiento de imgenes,
mrgenes, alineacin del texto...). Los diseadores han suplido tradicionalmente estas
deficiencias utilizando tablas de forma profusa.

Hoy en da es comn la presencia de varias tablas en una pgina web, incluso tablas
dentro de celdas de otras tablas. Si an no sabes cmo crear una tabla, este es el
momento de aprender los fundamentos.

En HTML, las tablas se construyen especificando filas y celdas. El conjunto de celdas de
una fila ir encerrado en las etiquetas de fila, y el conjunto de filas de la tabla, en las
etiquetas de tabla.
El comienzo y fin de una tabla se define mediante el tag <table> ... </table>. Para
especificar cada fila de la tabla se utilizan las etiquetas <tr> ... </tr>. Finalmente, para
especificar cada celda de una fila habr que usar las etiquetas <td> ... </td>.
Teniendo en cuenta estas simples reglas, vamos a mostrar a continuacin algunos
ejemplos:
<table>
<tr>
<td>Fila 1, celda 1</td>

</tr>
<tr>
</tr>
</table>
El ejemplo anterior crea la siguiente tabla de 2 filas y 2 columnas:
Fila 1, celda 1 Fila 1, celda 2
3. Dimensionando la tabla
Las etiquetas que definen la tabla admiten diferentes parmetros para lograr el correcto
dimensionamiento de las celdas y de los bordes que forman la tabla. Tambin es posible
especificar la separacin que debe existir entre el texto y el borde de la tabla.
Los parmetros que rigen estas caractersticas son los siguientes:
Parmetro Etiqueta Significado
width <table> Anchura total de la tabla o anchura de la celda. Puede

<td> especificarse en % o en pixels.
height <td> Altura de la celda. Puede especificarse en % o en pixels.

cellspacing <table> Separacin entre celdas.
cellpadding <table> Separacin entre el texto y el borde de la celda.
El parmetro height se especifica para el tag <td> que define una celda, pero afectar
siempre a toda la fila. Por otra parte, podramos especificar anchuras de celdas
incoherentes (dando diferente anchura a celdas de una misma columna, o haciendo que
la suma de las anchuras no coincida). Todos estos errores suelen ser asumidos por los
navegadores sin problemas, pero hay que tener cuidado, ya que la forma en la que
visualizan una tabla errnea diferir entre navegadores de distintos fabricantes.
Jugando con los parmetros anteriores podemos ya modificar la tabla del ejemplo
anterior para obtener diferentes presentaciones. Vemoslo con algunos ejemplos:
Aumentamos la anchura (por defecto, la anchura de cada celda se adapta al texto
de la misma), y la separacin entre celdas:
<table width="60%" cellspacing="5" cellpadding="0">
<tr>
</tr>
<tr>
</tr>
</table>


Anchura y altura de la primera columna diferentes de la de la segunda, y mayor

espacio entre el texto y el borde de la tabla:
<tr>
<td width="80%" height="70">Fila 1, celda 1</td>
</tr>
<tr>
<td width="80%">Fila 2, celda 1</td>
</tr>
</table>
Fila 1, celda
Fila 1, celda 1
2
Fila 2, celda
Fila 2, celda 1
2


Como se observa en los ejemplos anteriores, nos falta todava ejercer control sobre la
posicin que ocupa el texto dentro de cada celda.
Para estos menesteres existen una serie de parmetros que detallamos a continuacin, y
que se aplican al tag <td>:
Parmetro Significado
align Alineacin horizontal. Puede tomar los valores left (izquierda), center
(centro) y right (derecha).
valign Alineacin vertical. Puede tomar los valores top (superior), middle
(central), botton (inferior) y baseline (lnea de base).
Jugando con estos parmetros podemos modificar el ejemplo anterior para que el texto
de la primera celda est en la parte inferior de la misma, y alineado a la derecha:
<tr>
<td width="80%" height="70" align="right" valign="bottom">Fila 1, celda 1</td>
</tr>
<tr>
</tr>
</table>
Fila 1, celda
Fila 1, celda 1 2
Fila 2, celda
Fila 2, celda 1
2
5. Bordes y colores
Para terminar esta introduccin al mundo de la creacin de tablas en HTML, slo nos falta
indicar cmo podemos mejorar el aspecto de nuestras tablas.
Lo primero que querremos hacer es jugar con la anchura del borde. Para ello se ha
definido el parmetro border de la etiqueta <table>, que define la anchura de todos los
bordes de la tabla en pixels. Si se especifica con valor 0, el borde no se visualiza.
El color del borde lo controla el parmetro bordercolor, que se aplica al tag <td>. Este
parmetro toma valores hexadecimales o nombres de colores predefinidos, segn el
alfabeto ingls. La forma en que se indica un color con cdigo hexadecimal es la misma
que se utiliza para otros elementos de una pgina (por ejemplo, para el color de fondo).

Finalmente, tambin podemos modificar el color de fondo de cada celda de forma
independiente, aplicando el parmetro bgcolor al tag <td>. Los colores se especifican
de igual forma.
Con todo esto, podemos mejorar el aspecto del ejemplo anterior de la siguiente forma:
<table width="80%" cellspacing="0" cellpadding="5" border="4">
<tr>
<td width="80%" height="70" align="right" valign="bottom">Fila 1, celda 1</td>
</tr>
<tr>
<td width="80%" bgcolor="#FFCCCC">Fila 2, celda 1</td>
<td width="20%" bordercolor="red">Fila 2, celda 2</td>
</tr>
</table>
Fila 1, celda 2
Fila 1, celda 1
6. Conclusin
Las tablas son el corazn de muchas pginas web. Bien empleadas pueden mejorar
notablemente el diseo de nuestra pgina, y facilitar la navegabilidad.
La presencia de muchas tablas posee, sin embargo, algunos inconvenientes:

Mayor complejidad en el cdigo (sobre todo si tenemos muchas tablas anidadas)
lo que dificulta el mantenimiento de la pgina
Ralentizacin de la renderizacin de la pgina en algunos navegadores (esto
afecta en mayor medida al Navegador).
Por estos motivos, aunque es bueno usar tablas, conviene no abusar de ellas.
Marcos
Un marco (o frame) es una ventana independiente dentro de la ventana general del
navegador. Cada marco tendr sus bordes y sus propias barras de desplazamiento. As
cada pgina se dividir en la prctica en varias pginas independientes.

Para crearlos necesitaremos un documento HTML especfico, que llamaremos documento
de definicin de marcos. En l especificaremos el tamao y posicin de cada marco y el
documento HTML que contendr. Vamos a ver un ejemplo de este tipo de documento:
<HTML>
<HEAD>
<TITLE>Mi primera pgina con marcos</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAME NAME="principal" SRC="introduccion.html">
<NOFRAMES>
<P>Lo siento, pero slo podrs ver esta pgina si tu navegador tiene la capacidad
de visualizar
marcos.</P>
</NOFRAMES>
</FRAMESET>
</HTML>
Vamos a explicar detalladamente este ejemplo antes de investigar algo ms a fondo

cada una de las etiquetas. Vemos que la cabecera de la pgina es similar a un
documento normal, pero el habitual BODY es sustituido por un FRAMESET. En cada
FRAMESET se divide la ventana actual (sea la general o un marco) en varias ventanas
definidas o por el parmetro COLS o por ROWS. En ste, separado por comas, se define
el nmero de marcos y el tamao de cada uno.
Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los marcos
ponindoles un nombre y especificando qu fichero HTML le corresponde mediante la
etiqueta <FRAME>. Por ltimo, especificamos lo que ver el usuario en el supuesto (cada
vez ms raro) de que su navegador no soporte frames dentro de la etiqueta
<NOFRAMES>. Ahora veremos todos estos elementos en mayor detalle.
1. Etiqueta <FRAMESET>

Segn el estndar, esta etiqueta slo debera contener el nmero y tamao de cada
marco, pero las extensiones de Netscape y Explorer al estndar obligan a estudiar un par
de parmetros ms.
En general, los navegadores dibujan un borde de separacin entre los marcos. Si deseas
eliminarlo puedes hacerlo de dos maneras: en las etiquetas <FRAME> de cada una de
los marcos contiguos al borde a eliminar o incluyendo el parmetro FRAMEBORDER=0 en
el <FRAMESET>.
Cuando eliminas ese borde, podrs ver cmo el navegador deja an un hueco entre
marcos. Este se elimina aadiendo los parmetros FRAMESPACING=0 BORDER=0.
Vamos a examinar por ltimo los parmetros COLS y ROWS. Deberemos asignarles una
lista de tamaos separada por comas. Se admiten los siguientes formatos de tamao:
Con porcentajes: Al igual que con las tablas, podemos definir el tamao de un
marco como un porcentaje del espacio total disponible.
Absolutos: Si ponemos un nmero a secas, el marco correspondiente tendr el
tamao especificado en pixels.
Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos indicando
que queremos todo el espacio sobrante para ese marco. Podemos poner este
smbolo en varios marcos, que se repartirn el espacio equitativamente como
buenos hermanos. Si queremos que uno tenga ms deberemos ponerle al
asterisco un nmero delante. As, un marco con un espacio de 3* ser tres veces
ms grande que su compaero, que tiene un asterisco slo, el pobre.
Por ejemplo, el siguiente cdigo es una muestra de cmo combinar los tres mtodos:
<FRAMESET COLS="10%,*,200,2*">
Supongamos que el ancho total de la ventana son 640 pixels. El primer marco ocupar el
10%, es decir, 64 pixels. El tercero necesita 200, luego nos quedan 476 para los otros
dos. Como el cuarto debe tener el doble de espacio que el segundo, tenemos
aproximadamente 158 pixels para este ltimo y 316 para el cuarto marco.
Hay que tener cuidado cuando usamos valores absolutos en la definicin de marcos;
debemos asegurarnos de tener al menos un marco con un tamao relativo si queremos
estar seguros del aspecto final de la pgina.
Por ltimo, indicar que las etiquetas <FRAMESET> se pueden anidar. Esto se hace
poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal
que as:
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAMESET ROWS="*,80">
<FRAME NAME="principal" SRC="introduccion.html">
<FRAME NAME="ejemplos" SRC="ejemplo.html">
</FRAMESET>
</FRAMESET>
El resultado del anidamiento lo podris contemplar aqu.

2. Etiqueta <FRAME>
Esta etiqueta define tan slo las caractersticas de un marco determinado, no de un
conjunto de ellos. Estos son los parmetros que admite:
Parmetro Utilidad
NAME Asigna un nombre a un marco para que despus podamos referirnos a l.
SRC Indica la direccin del documento HTML que ocupar el marco.

Decide si se colocan o no barras de desplazamiento al marco para que
SCROLLING podamos movernos por su contenido. Su valor es por defecto AUTO, que deja
al navegador la decisin. Las otras opciones que tenemos son YES y NO.
NORESIZE Si lo especificamos el usuario no podr cambiar de tamao el marco.
Al igual que su homnimo en la etiqueta <FRAMESET>, si lo igualamos a cero

FRAMEBORDER se eliminar el borde con todos los marcos contiguos que tengan tambin
este valor a cero.
Permite cambiar los mrgenes horizontales dentro de un marco. Se
MARGINWIDTH
representa en pixels
MARGINHEIGHT Igual al anterior pero con mrgenes verticales.

15.3. Acceso a otros marcos
Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva
pgina a la que queremos acceder la veremos encerrada en ese mismo marco. Es posible
que deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que no sirve de
ndice y otro donde mostramos los contenidos sera deseable que los enlaces del marco
ndice se abrieran en el otro marco. Esto es posible hacerlo gracias al parmetro TARGET.
Este parmetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos
primeras sirve para indicar el marco en el que abriremos ese enlace en particular y el
ltimo modificaremos el marco en el que por defecto se nos muestran todos los enlaces.
Pero para que un parmetro funcione, es habitual que le asignemos un valor, y TARGET
no es una excepcin. Para indicarle el marco que deseamos le asignaremos el nombre
del mismo. As, en los ejemplos anteriores, si en el marco llamado indice tenemos un
enlace que queremos se abra en el marco principal pondremos:
<A HREF="pagina.html" TARGET="principal">
Tambin existen cuatro nombres reservados que podremos utilizar en el parmetro

TARGET:
_top
Elimina todos los marcos existentes y muestra la nueva pgina en la ventana original sin
marcos.
_blank
Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.
_self
Muestra la nueva pgina en el marco donde est declarado el enlace.
_parent
Muestra la nueva pgina en el <FRAMESET> que contiene al marco donde se declara el
enlace. En el ejemplo que pusimos de <FRAMESET> anidados, un enlace situado en el
marco ejemplo cuyo parmetro TARGET fuese igual a _parent eliminara la separacin
entre los marcos ejemplo y principal y mostrara en ese nuevo marco la nueva pgina.
Sonido
Aun cuando les pueda parecer increble a algunos hombres de poca fe, es posible
escuchar sonidos (o msica) desde el propio navegador. Los navegadores incorporan
desde hace tiempo la capacidad de reproducir sonido. El nico problema es que los
archivos suelen ser grandes y, siendo algo innecesario y superfluo, poca gente incluye
melodas en sus pginas.
Los formatos que se puede asegurar que los navegadores reproducirn son los archivos
WAV, MIDI y MP3.

1. Sonido activado por el usuario

La manera ms sencilla de incluir sonidos es dejando al usuario la decisin de
escucharlos o no. Para hacerlo incluiremos el sonido en el parmetro HREF de un enlace,
como si fuera una pgina HTML:
<A HREF="hola.wav">Si pulsas te saludo<A>
2. Sonido de fondo
Lo del sonido de fondo de una pgina se reproducir empleando el siguiente cdigo:
<body>
<embed src="musica.mp3"></embed>
</body>
El parmetro SRC indicar el archivo a reproducir. Esta etiqueta admite tambin otro
parmetro, LOOP, que indica el nmero de veces consecutivas que sonar el fichero. Si
se indica LOOP="infinite", el archivo se reproducir indefinidamente, mientras estemos
en la pgina. Emplear los parmetros width="0" height="0" para evitar que el
reproductor se visualice.
Los estndares del HTML

Ejemplo de ampliacin de una etiqueta. Separador <HR>, con las que se puede
modificar su apariencia y posicionamiento:
Ocupa el 75% de su anchura (width) normal.
<HR WIDTH=75%>
Tiene una anchura de 300 pixels.

<HR WIDTH=300>
Se puede alinear a la izquierda:

<HR WIDTH=50% ALIGN=LEFT>
O a la derecha:
<HR WIDTH=35% ALIGN=RIGHT>
Se puede variar su espesor:

<HR SIZE=20>
Tambin se puede hacer que sea una lnea slida, no embutida sobre el fondo:
<HR NOSHADE>
Texto en movimiento
Vamos a ver distintas soluciones para conseguir texto en movimiento: haciendo uso del
lenguaje HTML (las marquesinas).
Marquesinas (Marquees)
Una marquesina (en ingls, marquee) es una ventana en la que se desplaza un texto.
La etiqueta bsica es:
<MARQUEE> Texto que se desplaza </MARQUEE>
Como no hemos aadido ningn atributo dentro de la etiqueta, el comportamiento de la

marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la
altura de una lnea y el texto se desplaza lentamente de derecha a izquierda. Vamos a
ver los distintos atributos que modifican su apariencia y comportamiento:
WIDHT, HEIGHT
Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden ser igual a un
nmero de pixels, o a un porcentaje de la pantalla. Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60> Esta marquesina ocupa el 50% del ancho de la
pantalla y tiene una altura de 60 pixels </MARQUEE>
ALIGN
Modifica el alineamiento del texto que rodea a la marquesina, que puede ser TOP
(arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La palabra "Hola!" estar
alineada con la parte inferior de la marquesina</MARQUEE> Hola!
BEHAVIOR
Este atributo (que quiere decir en ingls comportamiento) sirve para definir de qu
manera se va a efectuar el desplazamiento del texto. Si es igual a SCROLL (el valor por
defecto), el texto aparece por un lado, se desplaza hasta el otro hasta desaparecer por
l, y vuelve a empezar (como los casos que hemos visto anteriormente). Si es igual a
SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y se para ah. Si
es igual a ALTERNATE se desplaza alternativamente hacia un lado y otro, siempre
dentro de los lmites de la marquesina. Ejemplo:
<MARQUEE BEHAVIOR=ALTERNATE>Este texto se mueve a un lado y otro, sin
desaparecer</MARQUEE>
BGCOLOR
Con este atributo se modifica el color de fondo de la marquesina, Ejemplo:

<MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa
</MARQUEE>
DIRECTION
Este atributo sirve para modificar la direccin hacia la que se dirige el texto. Por
defecto es LEFT (izquierda). Se puede hacer que el texto se dirija hacia la derecha
igualando este atributo a RIGHT. Ejemplo:
<MARQUEE DIRECTION=RIGHT> Este texto se dirige hacia la derecha </MARQUEE>
SCROLLAMOUNT
Define la cantidad de desplazamiento del texto en cada movimiento de avance,
expresado en pixels. Cuanto mayor es el nmero, ms rpido avanza. Ejemplo:
<MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE>
SCROLLDELAY
Define el tiempo entre cada movimiento de avance, expresado en milisegundos. Cuanto
mayor es el nmero ms lento avanza. Ejemplo:
<MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto </MARQUEE>
LOOP
Especifica el nmero de veces que aparecer el texto. Es indefinido por defecto.
HSPACE, VSPACE
Definen, respectivamente, la separacin en sentido horizontal o vertical del texto que
est fuera de la marquesina.
Fuentes dentro de las marquesinas

Si se desea que el texto que aparece dentro de una marquesina tenga una fuente
concreta, distinta de la que tiene por defecto el navegador, se debe poner la etiqueta
<FONT FACE> por fuera de la etiqueta de la marquesina. Ejemplo:
<FONT FACE="Impact">
<MARQUEE BGCOLOR="#FFFF00">Esto se ve con la fuente Impact</MARQUEE>
</FONT>
NOTA: Para que esto surta efecto, la fuente indicada debe estar instalada en el disco
duro del usuario. Vase all tambin cmo se pueden indicar otras fuentes alternativas.
Marquesina dentro de una Tabla:

<TABLE BORDER=1>
<TR><TD>
<MARQUEE> Marquesina dentro de una tabla </MARQUEE>
</TD></TR>
</TABLE>

HTML Referencia

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML Referencia

Cargado por

Copyright:

Formatos disponibles

IESTP Flix de la Rosa Reategui y Gaviria

Computacin e Informtica I Mdulo / Gestin y Administracin Web

Captulo 2: Insercin de textos

Captulo 3: Insercin de imgenes

Captulo 4: Creacin de enlaces

Captulo 5: Creacin de tablas

Captulo 1: Introduccin al HTML

1] Prof. Enrique Pinedo Macedo {} warrior.lepm@gmail.com

2. El concepto de etiqueta (tag)

2] Prof. Enrique Pinedo Macedo {} warrior.lepm@gmail.com

La mayora de estas etiquetas pueden, a su vez, contener otras etiquetas, de cualquiera

3] Prof. Enrique Pinedo Macedo {} warrior.lepm@gmail.com

Como se observa en el ejemplo, podemos insertar saltos de lnea en cualquier

Captulo 2: Insercin de textos

El resultado del cdigo anterior es el siguiente:

4] Prof. Enrique Pinedo Macedo {} warrior.lepm@gmail.com

2. Dando formato al texto

Lo que resulta en:

Que resulta en:

Por supuesto, existe la posibilidad de combinar los 3 modificadores anteriores en un

5] Prof. Enrique Pinedo Macedo {} warrior.lepm@gmail.com

Captulo 3: Insercin de imgenes

1.1 GIF (Graphics Interchange Format)

1.2 JPEG (Joint Photographic Experts Group)

6] Prof. Enrique Pinedo Macedo {} warrior.lepm@gmail.com

2. Insercin de una imagen de fondo

3. Insercin de imgenes en el documento

La imagen aparecer en el lugar donde se encuentre la etiqueta. Mediante el uso de

Texto alineado en el centro...

Texto alineado abajo...

7] Prof. Enrique Pinedo Macedo {} warrior.lepm@gmail.com

width / height: permiten especificar el tamao de la imagen (ancho y alto). Si no se

Captulo 4: Creacin de enlaces

1. Concepto de enlace o hipervnculo

8] Prof. Enrique Pinedo Macedo {} warrior.lepm@gmail.com

2. Enlaces externos e internos

La diferencia fundamental est en la necesidad de indicar, para un enlace externo, el

3. Las rutas o paths

9] Prof. Enrique Pinedo Macedo {} warrior.lepm@gmail.com

El concepto de ruta relativa y ruta absoluta aaden ms complejidad al asunto. La

Y desde tutorial1.html, podemos referenciar la pgina ejemplo1.html as:

4. Creando enlaces de textos

10] Prof. Enrique Pinedo Macedo {} warrior.lepm@gmail.com

5. Creando enlaces de imgenes

En este ejemplo, el enlace est en la imagen imagen.gif. Y el resultado:

Como se ve, la imagen est especificada con una ruta relativa.

Captulo 5: Creacin de tablas

11] Prof. Enrique Pinedo Macedo {} warrior.lepm@gmail.com

2. Estructura de una tabla

<td>Fila 1, celda 1</td>

<td>Fila 1, celda 2</td>

El ejemplo anterior crea la siguiente tabla de 2 filas y 2 columnas:

Fila 1, celda 1 Fila 1, celda 2

Fila 2, celda 1 Fila 2, celda 2

Parmetro Etiqueta Significado

width <table> Anchura total de la tabla o anchura de la celda. Puede

height <td> Altura de la celda. Puede especificarse en % o en pixels.

12] Prof. Enrique Pinedo Macedo {} warrior.lepm@gmail.com

cellspacing <table> Separacin entre celdas.

cellpadding <table> Separacin entre el texto y el borde de la celda.

Fila 1, celda 1 Fila 1, celda 2

Anchura y altura de la primera columna diferentes de la de la segunda, y mayor

13] Prof. Enrique Pinedo Macedo {} warrior.lepm@gmail.com

4. Posicionamiento del texto