Manual HTML (Hyper Text Markup Language)

Presentacin del Manual.

El Manual HTML nos permitir descubrir el lenguaje utilizado para la creacin

de pginas web, el cual est organizado para ser revisado por sesiones:

Al llevar a la prctica una serie de prcticas sencillas que son la base para
creacin de pginas web.

Sesin 1 Revisin de Introduccin y recomendaciones.

Instrucciones: El alumno debe leer de forma individual la introduccin del

manual html en equipo de tres y marcar con amarillo las ideas principales.

INTRODUCCIN

El HTML, acrnimo ingls de Hypertext Markup Language (lenguaje de marcas

de hipertexto), es un lenguaje de programacin diseado para estructurar
textos y presentarlos en forma de hipertexto, que es el formato estndar de las
pginas web.

Para realizar tu pgina Web necesitas en principio un editor de textos para

escribir los archivos que la compondrn.

Simplemente usando el NOTEPAD de Windows puedes iniciar a programar tus

pginas, pero tambin ya existen otros editores de texto de pginas web como
NOTEPAD++ con un entorno grfico diferente que facilita la correccin de
errores.

De cualquier manera existen editores especficos para realizar pginas Web.

Dichos editores permiten por medio de mens e iconos incluir etiquetas de
HTML sin necesidad de teclearlas como dreamweaver.

Por ejemplo: En el lenguaje HTML para poner un texto en cursiva en una

pgina Web deberamos escribir la instruccin:

<i>Texto</i>

En un editor de HTML, simplemente marcaremos el texto con el ratn y

pulsaremos el icono de cursiva, el editor de encargara de poner
automticamente las etiquetas <i> y </i> .
Sin embargo, el aprender el Lenguaje HTML te permite tener el control
absoluto sobre tu cdigo y sabrs encontrar mucho ms fcilmente los errores
que, todos, cometemos de vez en cuando se inicia con el conocimiento del
Lenguaje de pginas Web.

Bsicamente, el HTML consta de una serie de rdenes o etiquetas, que indican

al navegador que estemos utilizando, la forma de representar los elementos
(texto, grficos, imgenes, etc.) que contenga el documento. En lenguaje HTML
las diferentes rdenes se les conocen con la palabra "etiqueta".

Concepto de HTML

Qu es HTML?

Diferencia entre editor de textos y editor de pginas web.

Importancia del por qu aprender HTML

Caractersticas y recomendaciones para el uso de HTML

Menciona los diferentes tipos de etiquetas

Recomendaciones:

Cuando escribas tu pgina Web todos los hipervnculos, nombres de grficos,

nombre de imgenes, nombre de archivos, nombre de sonidos, se escriben en
letra minscula ya que la mayora de los servidores Web distinguen entre
maysculas y minsculas.

Ejemplo:

Es decir, las etiquetas:

<imgsrc="dibujo.gif">
< img src="Dibujo.Gif">

Hacen referencia a archivos distintos, aunque en tu disco duro (si usas

Windows) harn referencia al mismo archivo, ya que Windows no distingue
entre maysculas y minsculas.

Procura escribir correctamente estos nombres.

Los archivos que contienen documentos HTML suelen tener la extensin .html o
.htm. por lo que al guardar un documento se debe anotar la extensin .html.

Ejemplo:

pagina1.html
En este manual se han fijado los siguientes criterios a la hora de escribir la
sintaxis de las etiquetas de HTML:

1) Las etiquetas se indican en letra minscula

2) Los parmetros de las etiquetas se indican en letra minscula

3) El resto de elementos se indican en letra normal.

Recuerda que:

Las etiquetas de HTML pueden ser de dos tipos:

Cerradas o abiertas.

Las etiquetas cerradas son aquellas que tienen una palabra clave que indica el
principio de la etiqueta y otra que indica el final. Entre la etiqueta inicial y la
final se pueden encontrar otras etiquetas.

Las etiquetas abiertas constan de una sola palabra clave. Para diferenciar las
etiquetas del resto del texto del documento se encierran entre los smbolos < y
>. Las etiquetas cerradas incluyen el carcter / antes de la palabra clave para
indicar el final de la misma. Una etiqueta puede contener "parmetros".

Ejemplos:

Etiqueta cerrada

<center> Mi pgina Web </center>

Etiqueta abierta

<hr>

Etiqueta con parmetros

<body bgcolor="#FFFFFF">. </body>

Sesin 2:
Instrucciones: Lee de forma individual el tema Estructura bsica de un
documento de pgina web escrito en HTML.

Estructura bsica de un documento de pgina web escrito en HTML.

Un documento escrito en HTML contendr bsicamente las siguientes

etiquetas:

<html> Indica el inicio del documento.

<head> Inicio de la cabecera.

<title> Inicio del ttulo del documento.

</title> Final del ttulo del documento.

</head> Final de la cabecera del documento.

<body> Inicio del cuerpo del documento.

</body> Final del cuerpo del documento.

</html> Final del documento.

La etiqueta <head></head> delimita la cabecera del documento.

Dentro de la cabecera es importante definir el ttulo de la pgina por medio de

la etiqueta <title></title>. Este ttulo ser el que aparezca en la barra de
nuestro navegador de pginas Web.

Ejemplo :

<title>Pgina del Manual Sencillo de HTML</title>

Dentro de la cabecera de nuestro documento podemos incluir otras etiquetas

adicionales.

La etiqueta <meta> indica al navegador de Internet las palabras clave y

contenido de nuestra pgina Web.

Ejemplos :
<meta name="Pagina de Jose" content="Mi pagina personal, Musica y
Peliculas">

<meta name="keywords" content="Jose, musica, peliculas, links, espaa">

Esta informacin es til para los buscadores, la primera lnea ofrece a los
buscadores una descripcin sobre la pgina. En cambio la segunda lnea indica
las palabras clave de la pgina.

Otro uso de la etiqueta <meta> es la de indicar documentos con "refresco

automtico". Si se indica una URL se sustituir el documento por el indicado
una vez transcurridos el nmero de segundos especificados. Si no se incluye
ninguna URL se volver a cargar en el navegador el documento en uso
transcurridos los segundos indicados. Esto es til para pginas que cambian de
contenido con mucha frecuencia o para redireccionar a la persona que visita
nuestra pgina Web a una nueva direccin donde se encuentra una versin
actualizada de nuestra pgina Web.

Ejemplo :

<meta http-equiv="refresh" content="15;URL=http://www.microsoft.com">

Transcurridos 15 segundos se acceder a la pgina Web de Microsoft.

La etiqueta <base> indica la localizacin de los archivos, grficos, sonidos, etc.

a los que se hace referencia en nuestra pgina Web. Si no se incluye esta
etiqueta el navegador entiende que dichos elementos se encuentran en el
mismo lugar donde se encuentra nuestra pgina Web.

Creacin del cuerpo de la pgina

La etiqueta <body></body> indica el inicio y final de nuestra pgina Web.

Ser entre el inicio y el final de esta etiqueta donde pongamos los elementos
de nuestra pgina, textos, grficos, enlaces, sonidos, imgenes, tablas,
hipervnculos.

Esta etiqueta tiene una serie de parmetros opcionales que nos permiten
indicar la "apariencia" global del documento:
background="nombre del archivo grfico"

Indica el nombre de un archivo grfico que servir como "fondo" de nuestra

pgina. Si la imagen no rellena todo el fondo del documento, esta ser
reproducida tantas veces como sea necesario.

bgcolor="cdigo de color"
Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el
parmetro background.

text="cdigo de color"
Indica un color para el texto que incluyamos en nuestro documento. Por
defecto es negro.

link="cdigo de color"
Indica el color de los textos que dan acceso a un Hiperenlace. Por defecto es
azul.

vlink="cdigo de color"

Indica el color de los textos que dan acceso a un Hiperenlace que ya hemos
visitado con nuestro navegador. Por defecto es prpura.

El cdigo de color es un nmero compuesto por tres pares de cifras

hexadecimales que indican la proporcin de los colores "primarios", rojo, verde
y azul. El cdigo de color se antecede del smbolo #.

Ejemplos:

#000000 - Negro
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul
#FFFFFF - Blanco
El primer par de cifras indican la proporcin de color Rojo, el segundo par de
cifras la proporcin de color Verde y las dos ltimas la proporcin de color Azul.
Cada par de cifras hexadecimales nos permiten un rango de 0 a 255.
Combinando las proporciones de cada color primario obtendremos diferentes
colores.

Espacios y saltos de lnea

En HTML slo se reconoce un espacio entre palabra y palabra, el resto de los

espacios sern ignorados por el navegador.

As mismo, tampoco se respetan las tabulaciones, retornos de carro. Para ello

existen una serie de etiquetas que indican estos cdigos. La etiqueta
<pre></pre> obliga al navegador a visualizar el texto tal y como ha sido
escrito, respetando tabulaciones, espacios, retornos de carro.

Para indicar un salto de lnea se utiliza la etiqueta <br>

Para un cambio de prrafo (deja una lnea en blanco en medio) se utiliza la

etiqueta <p>.

La etiqueta <p> puede usarse tambin como etiqueta "cerrada" <p></p>

indicando de esta manera los atributos de un prrafo en concreto. Cuando se
usa de esta manera tiene el parmetro align que indica al navegador la forma
de "justificar" el prrafo. Los valores posibles de este parmetro son left, right y
center , estando an en estudio el valor justify (muchos navegadores lo
aceptan).

CABECERAS

En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaos

de letra) por medio de las etiquetas <h1><h2><h3><h4><h5> y <h6>, todas con
su respectiva etiqueta de cierre.

El texto que escribamos entre el inicio y el fin de la etiqueta ser el afectado

por las cabeceras.

La cabecera <h1> ser la que muestre el texto en mayor tamao y la cabecera

Ejemplo:

<h1>Texto de Prueba</h1>

Prctica 1:

<html>
<head>
<title>curso diseo CABECERAS</title>

</head>
<body>
<H1>CABECERA 1</H1>

<H2>CABECERA 2</H2>

<H3>CABECERA 3</H3>

<H4>CABECERA 4</H4>

<H5>CABECERA 5</H5>

<H6>CABECERA 6</H6>

</body>
</html>
Se vera como:

http://sitiocop24.galeon.com/

Texto de prueba

Los textos marcados como "cabeceras" provocan automticamente un retorno

de carro sin necesidad de incluir la etiqueta <br>.
Atributos del texto:

Para indicar atributos del texto (negrilla, subrayado, etc.) tenemos varias
etiquetas. Algunas de ellas no son reconocidas por determinados navegadores
de Internet, es por ello que segn el navegador que este sea utilizado se ver
el resultado correctamente o no.

Atributo Etiqueta Ejemplo

Negrita <b></b> <b> Texto de prueba </b>

Cursiva <i></i> <i> Texto de prueba </i>

Teletype <tt></tt> <tt> Texto de prueba </tt>

Subraya
<u></u> <u> Texto de prueba </u>
do

Tachado <s></s> <s> Texto de prueba </s>

Parpade <blink></bli <blnk> Texto de prueba

o nk> </blink>

Superin <sup></sup <sup> Texto de prueba

dice > </sup>

Subindic <sub></sub <sub> Texto de prueba

e > </sub>

Centrad <center></c <center> Texto de prueba

o enter> </center>

Por otro lado la etiqueta <font></font> nos permite variar el tamao, el color,
y el tipo de letra de un texto determinado. Utiliza para ello los parmetros size ,
bgcolor y face .

size="valor"

Da al texto un tamao en puntos determinado. size = + / - valor Da al texto un

tamao tantas veces superior (+) o inferior (-) como indique el valor.

color="cdigo de color"

Escribe el texto en el color cuyo codigo se especifica.

face="nombre de font"

Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe

en el ordenador que "lee" la pgina se usara el Font predeterminado del
navegador.

Ejemplo

<font size="+2" color="#FF0000" face="Arial" > Texto

de prueba </font>

Prctica 2

<html>
<head>
<title>diseo Web aspecto</title>
</head>
<body>
<p> <b>ESTO ESTA EN NEGRITA </B></p>
<P> <I>ESTO ESTA EN CURSIVA </I></p>
<P> <U>ESTO ESTA SUBRAYADO </U></p>
<P> <BIG>ESTO ESTA GRANDE </BIG></p>
<P> <SMALL>ESTO ESTA PEQUEO </SMALL></p>
<P>AQUI UTILIZAMOS SUPER <SUP> INDICE </SUP></p>
<P>AQUI UTILIZAMOS SUB <SUB> INDICE </SUB></p>
</body>
</html>

Prctica 3

<html>
<head>
<title>diseo Web COLORES</title>
</head>
<body>
<P><FONT FACE= "VERDANA" COLOR= "BLUE" SIZE=1> ESTO
ESTA EN VERDANA AZUL Y TAMAO DE 1 </FONT></P>
<P><FONT FACE= "ARIAL" SIZE=3> ESTO ESTA EN ARIAL
</FONT></P>
<P><FONT SIZE=+3> ESTO ESTA TRES VECES MS GRANDE
QUE LA LNEA ANTERIOR </FONT></P>
</body>
</html>

Practica 4

<html>
<head>
<title>diseo Web COLORES</title>
</head>
<body BGCOLOR= #8E6B23>
<FONT COLOR= BLACK> ESTO ESTA EN NEGRO</FONT COLOR=
BLACK>
<FONT COLOR= "#FFFF00">ESTO ESTA EN AMARILLO</FONT
COLOR= "#FFFF00">
<FONT COLOR= "#9F5F9F">ESTO ESTA EN VIOLETA </FONT
COLOR= "#9F5F9F">
<FONT COLOR= BRONZE>ESTO ESTA EN BRONCE</FONT
COLOR= BRONZE>
<FONT COLOR= CORAL> ESTO ESTA EN CORAL</FONT COLOR=
CORAL>
</body BGCOLOR>
</html>

Practica 5

<html>
<head>
<title>diseo Web COLORES</title>
</head>
<body>
<HR WIDTH=80%>
<HR>
<HR WIDTH=600 SIZE=3 ALIGN=RIGHT COLOR="BLUE">
</body>
</html>
Existen otras etiquetas que realizan las mismas operaciones que las antes
vistas en los atributos del texto.

Ejemplo

<font size="+2" color="#FF0000" face="Arial"> Texto

de prueba </font>

Para incluir comentarios en la pgina Web se utiliza la etiqueta <!-- -->.

Ejemplo :

<!-- Esto es un comentario sobre mi pagina Web -->

Los comentarios no sern mostrados por el navegador y son tiles para realizar
anotaciones en el documento HTML que nos indiquen lo que estamos haciendo
en una determinada parte del documento.

Listas

Existen tres tipos de listas, numeradas, sin numerar y de definicin.

Las listas numeradas representarn los elementos de la lista numerando cada

uno de ellos segn el lugar que ocupan en la lista. Para este tipo de lista se
utiliza la etiqueta <ol></ol> . Cada uno de los elementos de la lista ir
precedido de la etiqueta <li>

La etiqueta <ol> puede llevar los siguientes parmetros :

start="num"

Indica que nmero ser el primero de la lista. Si no se indica se entiende que

empezar por el nmero 1.
type="tipo"

Indica el tipo de numeracin utilizada. Si no se indica se entiende que ser una

lista ordenada numricamente.

Los tipos posibles son :

1 = Numricamente. (1,2,3,4,... etc.)

a = Letras minsculas. (a,b,c,d,... etc.)
A = Letras maysculas. (A,B,C,D,... etc.)
i = Numeros romanos en minsculas. (i.ii,iii,iv,v,... etc.)
I = Nmeros romanos en maysculas. (I,II,III,IV,V,... etc.)

Resultad
Ejemplo
o

<ol>
Plantel
<li> Plantel
No. 1
No.1 </li>
<li> Plantel No. Plantel
8 </li> No. 8
<li> Plantel 3
</li> Plantel 3
<li> Plantel
Plantel
19</li>
19
</ol>

<ol type="A">
Cobaq
<li> Cobaq 19
19
<li>
<li> Cobaq 8 Cobaq 8
<li>
<li> Cobaq 15 Cobaq
<li> 15
<li> Cobaq 9
Cpobaq
<li>
9
</ol>
Las listas sin numerar representan los elementos de la lista con una marca que
antecede a cada uno de ellos.

Se utiliza la etiqueta <ul></ul> para delimitar la lista, y <li> para indicar cada
uno de los elementos.

La etiqueta <ul> puede contener el parmetro type que indica la forma de la

marca que antecede a cada elemento de la lista. Los valores de type pueden
ser disk, circle o square, con lo que la marca puede ser un disco, un circulo o
un cuadrado.

Prctica 6

<html>
<head>
<title>LISTAS</title>
</head>
<body>
<OL TYPE= I>
<LI> ELEMENTO 1
<LI> ELEMENTO 2
<LI> ELEMENTO 3
</OL>
<P>
<OL TYPE= 1 START=2>
<LI> ELEMENTO 1
<LI> ELEMENTO 2
<LI> ELEMENTO 3
</OL>
<OL TYPE= a>
<LI> ELEMENTO 1
<LI> ELEMENTO 2
<LI> ELEMENTO 3
</OL>
</body>
</html>

Las listas de definicin muestran los elementos tipo Diccionario, o sea, trmino
y definicin. Se utiliza para ellas la etiqueta <dl></dl> . El elemento marcado
como trmino se antecede de la etiqueta <dt> , el marcado como definicin se
antecede de la etiqueta <dd> .

Ejemplo Resultado

<dl> URL
<dt> URL</dt>
<dd> Abreviatura de Uniform Resource Abreviatura de Uniform
Locator </dd> Resource Locator
<dt> LAN </dt>
<dd> Abreviatura de Local Area LAN
Networth </dd> Abreviatura de Local Area Networth
<dt>WAN </dt>
<dd> Abreviatura de Red de rea IRC
amplia </dd>
</dl> Abreviatura de Red de rea amplia

Existen otros dos tipos de listas menos comunes. Las listas de Men o
Directorio se comportan igual que las listas sin numerar.

La lista de Men utiliza la etiqueta <menu></menu> y los elementos se

anteceden de <li>

El resultado es una lista sin numerar mas "compacta" es decir, con menos
espacio interlineal entre los elementos.

La lista de Directorio utiliza la etiqueta <dir></dir> y los elementos se

anteceden de <li> .

Los elementos tienen un lmite de 20 caracteres.

IMAGENES
Para incluir una imagen en nuestra pgina Web utilizaremos la etiqueta <img>.

Hay tres formatos de imgenes que todos los navegadores modernos

reconocen. Son las imgenes GIF , JPG y PNG .

Cualquier otro tipo de archivo grfico o de imagen (BMP, PCX, CDR, etc.) no
ser mostrado por el navegador, a no ser que disponga de un programa
externo que permita su visualizacin.

La etiqueta <img> tiene varios parmetros:

src="imagen" Indica el nombre del archivo grfico a mostrar.

alt="Texto" Mostrara el texto indicado en el caso de que el navegador utilizado

para ver la pgina no sea capaz de visualizar la imagen.

align="top / middle / bottom" Indica como se alinear el texto que siga a la

imagen.

top alinea el texto con la parte superior de la imagen middle con la parte
central, y bottom con la parte inferior.

border="tamao" Indica el tamao del "borde" de la imagen. A toda imagen se

le asigna un borde que ser visible cuando la imagen forme parte de un
Hyperenlace.

height="tamao" Indica el alto de la imagen en puntos o en porcentaje. Se usa

para variar el tamao de la imagen original.

width="tamao" Indica el ancho de la imagen en puntos o en porcentaje. Se usa

para variar el tamao de la imagen original.

hspace="margen" Indica el numero de espacios horizontales, en puntos, que

separarn la imagen del texto que la siga y la anteceda.

vspace="margen" Indica el nmero de puntos verticales que separaran la

imagen del texto que le siga y la anteceda.

ismap / usemap Indica que la imagen es un MAPA. Veremos estos parmetros

ms adelante en este manual.

Veamos varios ejemplos "jugando" con los tamaos de la imagen, as como

comprobando la alineacin de los textos.
Ejemplo:

<img src=gatito.gif> Gatito

Enlaces o Hipervinculos

La caracterstica principal de una pgina Web es que podemos incluir

Hiperenlaces. Un Hiperenlace es un elemento de la pgina que hace que el
navegador acceda a otro recurso, otra pgina Web, un archivo, etc.

Para incluir un Hyperenlace se utiliza la etiqueta <a></a> .

El texto o imagen que se encuentre dentro de los lmites de esta etiqueta ser
sensible, esto quiere decir que si pulsamos con el ratn sobre l, se realzar la
funcin de hiperenlace indicada por la etiqueta <a></a> .

Si el Hiperenlace est indicado por un texto, este aparecer subrayado y en

distinto color, si se trata de una imagen, esta aparecer con un borde
rodendola. Esta etiqueta tiene el parmetro href que indica el lugar a donde
nos llevar el Hiperenlace si lo pulsamos.

Ejemplo

<a href="http://www.cobaq.edu.mx.com/" > Pulse para ir a la pgina

de Cobaq </a>

Se vera como

Pulse para ir a la pgina de Cobaq

Si situamos el ratn encima de la frase y pulsamos, el navegador acceder a la

pgina Web indicada por el parmetro href , es decir, acceder a la pgina
situada en http://www.cobaq.edu.mx./

Lo mismo podramos hacer con un grfico.

Ejemplo Se vera como

Para buscar en Internet : Para buscar en Internet :

<a
href="http://www.yahoo.com/"
>
<img src="yahoo.gif" ></a>
Pulsando sobre la imagen se accedera a la pagina situada en
http://www.yahoo.com/.

Un Hiperenlace tambin puede llevarnos a una zona de nuestra pgina. Para

ello debemos marcar en nuestra pgina las diferentes secciones en las que se
divide. Lo haremos con el parmetro name .

Ejemplo:

<a name="seccion1"
></a>
Esta instruccin marca el inicio de una seccin dentro de nuestra pgina. La
seccin se llamar seccion1.

Para hacer un enlace a esta seccin dentro de nuestra pgina lo haramos de

la siguiente forma:

<a href="#seccion1">Primera
Parte</a>

Un Hiperenlace puede hacerse a cualquier tipo de archivo. Con las etiquetas

anteriores hemos visto como hacer enlaces a pginas Web o secciones dentro
de una pgina web, pero podramos hacer un Hiperenlace a un grupo de
noticias, o a otro servicio de Internet.

Ejemplo:

<a href="news://news.actualidad.es/">Noticias de
actualidad </a>

Asimismo podemos hacer que el Hiperenlace de como resultado el envo de un

correo electrnico a una direccin de correo determinada.

Ejemplo:

<a href="mailto:usuario@email.dom"> Envame tus

sugerencias </a>

Tambin podemos realizar un Hiperenlace a un archivo cualquiera. En este caso

el navegador intentar "ejecutar" el archivo, y si no puede hacerlo nos
preguntar si deseamos grabarlo en nuestra computadora. Esta es una forma
sencilla de permitir a los visitantes de nuestra pgina copiar archivos a su
computadora.

Tablas

Las tablas nos permiten representar cualquier elemento de nuestra pgina

(texto, listas, imgenes, etc.) en diferentes filas y columnas separadas entre s.
Es una herramienta muy til para "ordenar" contenidos de distintas partes de
nuestra pgina.

La tabla se define mediante la etiqueta <table></table>. Los parmetros

opcionales de esta etiqueta son:

border="num". Indica el ancho del borde de la tabla en puntos.

cellspacing="num" Indica el espacio en puntos que separa las celdas que estn
dentro de la tabla.

cellpadding="num" Indica el espacio en puntos que separa el borde de cada

celda y el contenido de esta.

width="num" % Indica la anchura de la tabla en puntos o en porcentaje en

funcin del ancho de la ventana del navegador. Si no se indica este parmetro,
el ancho se adecuar al tamao de los contenidos de las celdas.

height="num" % Indica la altura de la tabla en puntos o en porcentaje en

funcin del alto de la ventana del navegador. Si no se indica este parmetro, la
altura se adecuar a la altura de los contenidos de las celdas.

bgcolor="codigo de color" Especifica el color de fondo de toda la Tabla.

Para definir las celdas que componen la tabla se utilizan las etiquetas <td> y
<th> . <td> indica una celda normal, y <th> indica una celda de "cabecera",
es decir, el contenido ser resaltado en negrita y en un tamao ligeramente
superior al normal. Los parmetros opcionales de ambas etiquetas son:

align="left / center / right / justify" Indica como se debe alinear el contenido de

la celda, a la izquierda (left), a la derecha (right), centrado (center) o justificado
(justify).

valign="top / middle / bottom" Indica la alineacin vertical del contenido de la

celda, en la parte superior (top), en la inferior (bottom), o en el centro (middle).

rowspan="num" Indica el nmero de filas que ocupar la celda. Por defecto

ocupa una sola fila.

colspan="num" Indica el nmero de columnas que ocupar la celda. Por

defecto ocupa una sola columna.

width="num" % Indica la anchura de la columna en puntos o en porcentaje

en funcin del ancho de la ventana del navegador. Si no se indica este
parmetro, el ancho se adecuar al tamao de los contenidos. Este parmetro
solo funciona en los navegadores modernos.

bgcolor="codigo de color" Especifica el color de fondo del elemento de la Tabla.

Para indicar que acaba una fila de celdas se utiliza la etiqueta <tr> . A
continuacin mostraremos un ejemplo de una tabla que contiene solo texto.
Como se indic anteriormente el contenido de las celtas puede ser cualquier
elemento de HTML, un texto, una imagen, un Hiperenlace, una Lista, etc.

Las etiquetas <td> y <th> son cerradas segn el estandar de HTML, es decir
que un elemento de tabla <td> deberia cerrarse con un </td> , sin embargo
los navegadores asumen que un elemento de la tabla, queda automticamente
"cerrado" cuando se "abre" el siguiente.
Prctica 7

<html>
<head>
<title>tablas</title>
</head>
<body>
<table border= 2 cellspacing= 1 cellpalding= 1 width= 70%
height= 80% align=center Bgcolor= WHITE bordercolor=
green>
<TR>
<TD BGCOLOR= MAGENTA> CELDA 1,1 </TD>
<TD BGCOLOR= YELLOW> CELDA 1,2 </TD>
</TR>
<TR>
<TD ALIGN=CENTER><IMG SRC=ESCUDOCL.GIF> </TD>
<TD BGCOLOR= BROWN><FONT COLOR= WHITE>Se detallan a
continuacin una seleccin de rutas o excursiones para realizar
a pie, en bici o a caballo, de dificultad intermedia y que pueden
realizarse por cualquier aficionado al senderismo y al contacto
con la naturaleza. Se trata de una seleccin de resmenes de
rutas por toda la comarca que estn siendo elaboradas por el
Colectivo de Ecologa Ibrica y que ya han visto la luz en forma
de Libro-Gua.</FONT>
</TD>
</TR>
</TABLE>
</body>
</html>

Marquee:

La etiqueta <marquee></marquee> crea una marquesina con un texto en su

interior que se desplaza. Funciona nicamente con Ms-Explorer. Sus
parmetros son los siguientes:
align="top / middle / bottom" Indica si el texto del interior de la marquesina se
alinea en la zona alta (top), en la baja (bottom) o en el centro (middle) de la
misma.

bgcolor="codigo de color" Indica el color del fondo de la marquesina.

direction="left / right" Indica hacia qu lugar se desplaza el texto, hacia la

izquierda (left) o hacia la derecha (right)

height="num" o % Indica la altura de la marquesina en puntos o porcentaje en

funcin de la ventana del navegador.

width="num" o % Indica la anchura de la marquesina en puntos o porcentaje

en funcin de la ventana del navegador.

loop="num / infinite" Indica el nmero de veces que se desplazar el texto por

la marquesina. Si se indica infinite, se desplazar indefinidamente.

scrolldelay="num." Indica el nmero de milisegundos que tarda en reescribirse

el texto por la marquesina, a mayor nmero ms lentamente se desplazar el
texto.

Veamos un ejemplo de esta etiqueta :

<marquee bgcolor="#FFFFFF" width="50%" scrolldelay="0"> Bienvenido a mi

pgina personal en Internet.
</marquee>
Formualrio

Prctica 8

<html>
<head>
<title>FORMULARIOS</title>
</head>
<body>
<p align=left><font size=6>Cuestionario de
Personal</font></p> <FORM
ACTION="MAILTO:carmenortegaper@terra.es"
METHOD=POST ENCTYPE="text/plain">
<b>Nombre</b><br>
<INPUT TYPE=TEXT NAME=NOMBRE size=50><BR><br>
<b>Sexo:</b><br>
<INPUT TYPE=RADIO NAME=SEXO
VALUE=MASCULINO>Masculino<br>
<INPUT TYPE=RADIO NAME=SEXO
VALUE=FEMENINO>Femenino<br><br>
<b>Nmero de miembros de la familia</b><br>
<INPUT TYPE=TEXT NAME=numero de miembros de la
familia size=5><BR><br>
<b>Idiomas que conoce:</b><br>
<INPUT TYPE=checkbox NAME=idiomas
VALUE=frances>Francs<br>
<INPUT TYPE=checkbox NAME=idiomas
VALUE=ingles>Ingls<br><br>
<b>Otros:</b><br>
<textarea NAME=Otros ROWS=5
COLS=50></TEXTAREA><br><br>
<INPUT TYPE=SUBMIT VALUE="ENVIAR DATOS">
<INPUT TYPE=RESET VALUE="VOLVER A
COMENZAR"><br><br>
</body>
</html>

Sonidos:

Nuestra pgina Web puede tener un sonido que se active al entrar en la

pgina. Esta caracterstica de Ms Explorer utiliza la etiqueta <bgsound>
y tiene los siguientes parmetros :

src="archivo" Indica el nombre del fichero que contiene el sonido (.waw,

.mid).

loop="num / infinite" Indica el nmero de veces que se reproducir el

sonido. Si se indica infinite, el sonido se reproducir de forma continua
hasta que abandonemos la pgina.

Un ejemplo de esta etiqueta sera :

Para utilizar esta funcion en cualquier otro navegador la etiqueta es

<embed> . Esta etiqueta se utiliza realmente para "incrustar" un objeto
en nuestra pgina Web. Dicho objeto puede ser un archivo de sonido, un
video, un grafico BMP, etc... Tiene los siguientes parmetros :

src="archivo" Indica el nombre del fichero que contiene el sonido

(.wav, .mid) o el video (.avi).

autostart="true" Incluirlo si deseamos que la reproduccin se inicie

inmediatamente.

loop="true" Incluirlo si deseamos que la reproduccion no se detenga. (al

terminar, vuelve a comenzar automaticamente).
volume="numero" Volumen al que se reproducen los ficheros de sonido.

width="numero"

height="numero" Anchura y Altura de la representacin del objeto. (Si es

un sonido no es necesario este parmetro).

controls="smallconsole" Visualiza una serie de controles que nos

permiten iniciar la reproduccin del fichero, as como realizar una pausa
o detenerlo.

Un ejemplo de esta etiqueta sera :

<embed src="yesterday.mid" loop="true" autostart="true"

volume="50" width="50" height="15" controls="smallconsole">