imprimir el lenguage html

Tema N°1 Diseño de páginas web (HTML)

Toda la internet está compuesta por páginas web, entonces para crear y diseñar una página web debemos aprender el lenguaje HTML.

Para ello Utilizaremos Las siguientes herramientas:

Un editor de texto, por ejemplo BLOCK DE NOTAS que esta instalada por defecto en Windows, existen otros editores como NOTE PAD, SUBLIME TEXT.

Un navegador de internet, por ejemplo el clásico INTERNET EXPLORER que también está instalada por defecto en Windows, existen otros navegadores como MOZILLA FIREFOX,GOOGLE CHROME, OPERA, etc.

1. ¿Qué es HTML?HTML es el acrónimo de HyperText Markup Language (Lenguaje de Marcado de Hipertexto) y es el lenguaje que se utiliza para crear las páginas web. Este Lenguaje utiliza códigos llamados etiquetas.

ETIQUETASHTML está compuesto por un conjunto de instrucciones o comandos conocidos con el nombre de etiquetas, las cuales tiene la función de mostrar dentro de un navegador de Internet todos aquellos elementos que conforman la página web, los cuales son textos, imagen, videos, animaciones, sonidos, etc.

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 orden y otra que indica el final. Entre la etiqueta inicial y la final se pueden encontrar otras etiquetas.

Las etiquetas cerradas están compuestas de la siguiente forma:

<NOMBRE_ETIQUETA>….Aquí va el contenido....</NOMBRE_ETIQUETA>Etiqueta de apertura Etiqueta de cierre

Las etiquetas cerradas incluyen el carácter / antes de la palabra clave para indicar el final de la misma. Ejemplo de etiquetas cerradas:

<CENTER> Una página ejemplo </CENTER>

Entre la etiqueta inicial y la final se pueden encontrar otras etiquetas.Las etiquetas abiertas constan de una sola palabra clave. Ejemplo de etiquetas abiertas:

<HR>

Una etiqueta puede contener en su interior "atributos". Estos atributos se indican a continuación de la palabra clave de la etiqueta. Ejemplo de etiqueta con atributos:

<BODY bgcolor="#FF00FF"> </BODY>

2. ESTRUCTURA DE UN DOCUMENTO HTML

Un documento de HTML es un archivo de texto (sin formato), como los que escribimos con el bloc de notas que utiliza una serie de etiquetas para indicar la estructura y el formato de la información que contiene.

Para que un navegador reconozca que un fichero contiene información HTML se le debe dar un nombre que termine con la extensión “.html” o “.htm”.

Consta de dos partes, la cabecera y el cuerpo del documento y su estructura general es la siguiente:

Toda la información va entre las etiquetas <HTML> de inicio y </HTML> de final. La cabecera se encuentra entre las etiquetas <HEAD> y </HEAD>, mientras que el cuerpo del documento va comprendido entre <BODY> y </BODY>.

- LA CABECERA

En el encabezado del documento se puede incluir muchas cosas, pero nosotros sólo vamos a ver el título de la página. Cuando hablamos de título de la página nos referimos al que aparece en la barra azul del explorador (barra de título). Es muy importante no confundir este título con los títulos que pongamos en los textos que escribamos en nuestra página.

Existen dos partes fundamentales la cabecera del documento que son:

<HEAD> </HEAD><TITLE> </TITLE>

- CUERPO DEL DOCUMENTO HTML

Toda la información que queremos que aparezca en la página la debemos incluir en el cuerpo del documento. Este comienza con la etiqueta <BODY> y termina con </BODY>.

La etiqueta <BODY> admite varios atributos entre los que destacan los siguientes:

background: para poner una imagen de fondo. bgcolor: para poner un color de fondo. text: para elegir el color del texto. link, vlink y alink: para elegir el

color de los enlaces, los enlaces visitados y los enlaces marcados.

Ejemplo 1: Crearemos una página Web

Primero: En el Bloc de notas escriba el siguiente código.

<HTML> <HEAD> <TITLE> Mi primera Web </TITLE> </HEAD> <BODY BGCOLOR=YELLOW> Aquí va el texto que queremos poner. </BODY></HTML>

Segundo: Crea una carpeta donde guardaras la página web.

Tercero: Retorna la block de notas y procede a guardar con el nombre Ejemplo1.html Cuarto: Procedemos a probar la página web, abriendo la misma con cualquier navegador de internet en este caso internet Explorer.

El resultado se muestra a continuación:

3. TEXTO EN HTMLPara insertar texto en un página web, HTML tiene varias etiquetas para cada tipo de texto ya sea títulos, párrafos, frases, etc.

TÍTULOS-ENCABEZADOS

Cuando hablamos de títulos en HTML nos referimos a los encabezados del documento y las secciones que contiene.

También podemos crear diferentes tamaños de encabezados, títulos o subtítulos por ejemplo para señalar los distintos encabezados tenemos las siguientes etiquetas:

<H1><H2><H3><H4><H5><H6>

Ejemplo: Este es el resultado:

Es muy importante cerrar las etiquetas de título. Guarde el ejemplo de encabezados o títulos con el nombre de Ejemplo2.html

PÁRRAFOSCuando llegamos al final de la línea de texto, éste saltará automáticamente a la línea siguiente, pero si queremos crear párrafos separados por una línea en blanco utilizaremos la etiqueta:

<P>…</P>

Por ejemplo, el documento:

Verifique el resultado guardando con el nombre de Ejemplo3.html y abriendo con un navegador de internet.

<HTML> <HEAD> <TITLE> Párrafos</TITLE> </HEAD> <BODY> <P>Esto es un párrafo dentro de una página Web.</P> <P> Esto es otro párrafo que está separado del anterior por una línea en blanco.</P> </BODY></HTML>

ALINEACION DE CONTENIDOS.-

Para alinear un párrafo o título hay que especificar el atributo ALIGN de la siguiente manera:

<H1 ALIGN=“Valores”>.....</H1>

<P ALIGN=“Valores”>……..</P>

Los posibles valores para el atributo ALIGN son:

LEFT / RIGHT / CENTER / JUSTIFY

También se puede utilizar la etiqueta <CENTER> para centrar un título, subtitulo, párrafo o cualquier contenido.

<center><h2>Este un subtitulo en el centro</h2></center><center><p>Este parrafo esta en el centro.</p></center>

Guarde el ejemplo de la derecha con el nombre de Ejemplo4.html

SALTO DE LINEA Y SEPARADOR HORIZONTALPara conseguir que las líneas de texto no sean continuas, utilizaremos la etiqueta <BR>.Como también podemos insertar un separador horizontal para separar entre títulos, subtítulos y párrafos <HR>.Las etiquetas <BR> Y<HR> se las considera etiquetas abiertas

Por ejemplo: Este sería el resultado

Guarde el

ejemplo de arriba con el nombre de Ejemplo5.html

4. FORMATO DE TEXTO

Se puede aplicar los siguientes formatos al texto:

<B> TEXTO EN NEGRITAS </B><I> TEXTO EN CURSIVAS </I><U> TEXTO SUBRAYADO </U><BIG> TEXTO GRANDE </BIG>

<SMALL> TEXTO PEQUEÑO </SMALL><SUP> TEXTO EN SUPERINDICE </SUP><SUB> TEXTO EN SUBINDICE </SUB>

Por ejemplo: Resultado:

<HTML> <HEAD> <TITLE> Párrafos</TITLE> </HEAD> <BODY> <P>Esto es un párrafo dentro de una página Web.</P> <P> Esto es otro párrafo que está separado del anterior por una línea en blanco.</P> </BODY></HTML>

<HTML> <HEAD> <TITLE> Parrafos</TITLE> </HEAD> <BODY > <h1 align="right">Este un titulo en lado derecho</h1> <center><h2>Este un subtitulo en el centro</h2></center> <center><p>Este parrafo esta en el centro.</p></center> <p align="LEFT">Este parrafo esta en la izquierda.</p> <p align="center">Este parrafo esta en el centro.</p> <p align="right">Este parrafo esta en el derecha.</p> <p align="justify">Este parrafo esta justificado.</p> </BODY></HTML>

<HTML> <HEAD> <TITLE>SALTOS DE LINEA-SEPARADOR</TITLE> </HEAD> <BODY >

<BR><BR> <h1>Curso HTML</h1>

<HR><BR><BR><BR>

<h2>Curso PHP</h2> <HR> <BR>

<BR><BR>

<p>Inscribete ya......! </p> </BODY></HTML>

Complete las etiquetas faltantes y Guarde el ejemplo de arriba con el nombre de Ejemplo6.html

TIPO DE FUENTE<FONT></FONT>

Esta etiqueta admite varios atributos: tamaño de fuente, tipo de fuente añadiremos a esta etiqueta el atributo size=”Número del tamaño de la letra”.

Los tamaños de letras van, de menor a mayor, del 1 al 7. Si dentro del cuerpo del documento escribimos lo siguiente:

<FONT SIZE=”5”>Tamaño 5</FONT>

El tamaño por defecto es el 3 y podemos cambiar el texto con respecto a este tamaño base utilizando -1 para un tamaño algo menor, +1 para un tamaño algo mayor que el 3 y +2 para un tamaño aún mayor.

<FONT>el tamaño base </FONT><FONT SIZE=”-1”>menor</FONT><FONT SIZE=”+1”>mayor</FONT>

<FONT SIZE=”+2”>grande 5</FONT>

Ejemplo: Resultado:

Complete las etiquetas faltantes y Guarde el ejemplo dearriba con el nombre de Ejemplo7.html

TIPOGRAFIA-ATRIBUTO FACE

Define el tipo de letra con el atributo FACE agregada a la etiqueta FONT. Por ejemplo:

<font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografía</font>

Verifique el resultado guardando con el nombre de Ejemplo8.html

5. LISTAS CON VIÑETAS

LISTAS-DESORDENADASPara poner una lista con viñetas se utilizarán las siguientes etiquetas:

<UL> <LI> <LI> <LI>

</UL>Ejemplo: Resultado:

Pruebe el ejemplo guardando con el nombre de Ejemplo9.html

LISTAS-ORDENADAS O ENUMERADASSon como las viñetas pero están numeradas. Se usa la etiqueta:

<OL>…

</OL>Ejemplo: Resultado:

Pruebe el ejemplo guardando con el nombre de Ejemplo10.htmlHay varios tipos de numeración para lo cual se utiliza el atributo TYPE:

Ejemplo: Resultado:


LISTAS ANIDADASSon viñetas de varios niveles que pueden combinar diferentes tipos de viñetas. Resultado: Ejemplo:


6. INSERCIÓN DE IMÁGENESPara insertar imágenes en una página web se usa la etiqueta.

<IMG>

Los atributos posibles para esta etiqueta son:SRCALTWIDTHHEIGHTBORDERALIGN

VSPACE, HSPACE

Para insertar una imagen en una página usamos la etiqueta img junto con el atributo src.

<img src=“poster.jpg” /><img src = “imágenes/poster.jpg” />

Ejemplo: Resultado:


REDUCIR AMPLIAR Y A LINEAR IMAGENESPara reducir y ampliar una imagen se utiliza los atributos width y height; para a linear se utiliza los atributos: ALIGN

Para alinear una imagen en el lado derecho dentro de una página web se usa el valor RIGHT en el atributo ALIGNEJEMPLO:

<IMG SRC=”imagen.jpg” ALIGN=”right”>

Y a la vez si tuviéramos texto, este rodea la imagen

………………………………………………………………………………………………………………………………………………………….

<HTML> <HEAD> <TITLE>CURSO HTML: IMAGENES</TITLE> </HEAD> <BODY >

<H1 align="center">Imagenes en la pagina web</H1>

<p>Insertar imagenes en una pagina web es sencillo</p>

<img src="imagenes/poster.jpg"><p>solo tenemos que usar la

etiqueta IMG</p> </BODY></HTML>

<HTML> <HEAD> <TITLE> Imágenes en HTML </TITLE> </HEAD> <BODY > <CENTER><H1>Título del Documento</H1><H2>(subtítulo)</H2></CENTER> <HR> <FONT size=5><P><IMG src=”cortado.jpg” align=right width=30%>Este párrafo rodea a la foto del cortado que se alinea a la derecha con respecto al texto. El tamaño de la imagen ha sido reducido a una anchura del 30% de la pantalla para que no sea excesivamente grande. <p>He aumentado el tamaño de la letra del documento para no tener que estar inventándome tonterías a la hora de escribir. Cuando el texto sobre pasa la imagen, vuelve a ocupar toda la pantalla del navegador. </FONT> </BODY></HTML>

De igual manera para alinear hacia la izquierda usamos el valor LEFT en el atributo ALIGN.EJEMPLO:

<IMG SRC=”imagen.jpg” ALIGN=”left”>

…………………………………………………………………………………………………………………………………………………………

TAMAÑO DE IMAGEN:

Para modificar el tamaño de la imagen que insertemos en la página web usamos el atributo WIDTH que es el ancho de la imagen y HEIGHT es el alto de la imagen, dando valores numéricos en unidad de medida llamada pixeles (px).EJEMPLO:

<IMG src="imagen.jpg" align="right" width=200px height=400px>

En este ejemplo modificamos el tamaño de la imagen, dando un ancho de 200 pixeles y una altura de 400 pixeles.

Esta es la forma estática, porque si reducimos el tamaño de la ventana del navegador la imagen se mantiene en su tamaño asignado. Pero existe la forma dinámica, es decir si reducimos la ventana del navegador, también la imagen se reduce, esto se realiza dando valor en porcentaje en el atributo WIDTH.

EJEMPLO: <IMG src=”cortado.jpg” align=”right” width=30%>

En este ejemplo la imagen tomara el tamaño de 30 % de La ventana del navegador.

…………………………………………………………………………………………………………………………………………………………

MARGENES DE LA IMAGEN:

<HTML>

<HEAD><TITLE> Imágenes en HTML </TITLE></HEAD>

<BODY >

<CENTER><H1>Título del Documento</H1><H2> (subtítulo)</H2></CENTER>

<HR>

<FONT size=5>

<P><IMG src=”cortado.jpg” align=right width=30%>Este párrafo rodea a la foto del cortado que se alinea a la derecha con respecto al texto. El tamaño de la imagen ha sido reducido a una anchura del 30% de la pantalla para que no sea excesivamente grande.

<p>He aumentado el tamaño de la letra del documento para no tener que estar inventándome tonterías a la hora de escribir. Cuando el texto sobre pasa la imagen, vuelve a ocupar toda la pantalla del navegador.

</FONT>

</BODY>

</HTML>

da el siguiente resultado:

10- CARÁCTERES ESPECIALES

Para terminar esta primera parte vamos a ocuparnos de cómo introducir algunos símbolos en HTML. Estos símbolos son caracteres especiales que se introducen por medio de un código. Los más utilizados son los siguientes:

Carácter Código Carácter Código Carácter Código Carácter Código< < > > & & # #“ " á á é é í íó ó ú ú Á Á ñ ñÑ Ñ ® ® @ © Espacio

SEGUNDA PARTE:

11- LISTAS

Las listas o listados nos sirven para enumerar opciones, crear índices o menús, presentar apartados de un documento, etc.

En HTML existen 4 tipos de listas: listas desordenadas, listas ordenadas, menús y listas de elementos cortos. Veremos las dos primeras:

Listas desordenadas: cada apartado de la lista incluye una marca (un punto grande, un cuadradito, etc.) y un margen. Las listas desordenadas se representan mediante la etiqueta <UL> ...... </UL>, que admite el atributo type. Este atributo indica la marca de párrafo que se utilizará y puede tomar los valores “circle”, “disc” o “square”.

Listas ordenadas: cada apartado de la lista incluye un elemento de orden (un número o una letra.) y un margen. Las listas desordenadas se representan mediante la etiqueta <OL> ...... </OL>, que admite el atributo type. Este atributo indica la numeración que se utilizará y puede tomar los valores “A”, “a”, “I”, “i”, “1”.

Para cualquier tipo de lista, cada uno de los apartados se indica con la etiqueta de tipo opcional <LI> ..... </LI>,

Ejemplo:

<HTML>

<HEAD><TITLE> Listas en HTML </TITLE></HEAD>

<BODY >

Temario del curso (ordenado): <OL type=”a”><LI>Tema 1</LI><LI>Tema 2</LI><LI>Tema 3</LI><LI>Tema 4</LI><LI>Tema 5</LI></OL>

Temario del curso (desordenado): <UL type=”square”><LI>Tema 1</LI><LI>Tema 2</LI><LI>Tema 3</LI><LI>Tema 4</LI><LI>Tema 5</LI></UL>

</BODY>

</HTML>

Las listas pueden aparecer anidadas, esto es, una dentro de otra. Realmente, la sublista se encuentra dentro de uno de los apartados de la primera lista. Veamos un ejemplo en que anidamos una lista desordenada dentro de una ordenada:

<HTML>

<HEAD><TITLE> Listas en HTML </TITLE></HEAD>

<BODY >

Temario del curso (ordenado): <OL type=”1”><LI>Tema 1</LI> <UL type=”circle”> <LI>apartado 1</LI> <LI>apartado 2</LI> <LI>apartado 3</LI> </UL><LI>Tema 2</LI><LI>Tema 3</LI><LI>Tema 4</LI><LI>Tema 5</LI></OL>

</BODY>

</HTML>

12- ENLACES

Los enlaces entre documentos son lo que hacen de HTML un lenguaje potente. Hasta el momento no hemos hecho nada que no pueda hacerse con un editor de texto ordinario. Pero los enlaces van a permitirnos conectar diferentes secciones de un mismo documento, documentos diferentes o, incluso ir de un documento a un apartado específico de otro. Además, los enlaces no tienen que ser sólo a documentos de texto, pueden relacionar también ficheros de imagen, sonido, vídeo.

La etiqueta para establecer cualquier enlace es la etiqueta pareada <A> ..... </A>. Los atributos que incluye y su uso depende mucho del tipo de enlace, así que lo iremos viendo poco a poco.

Comenzaremos por incluir en el documento un enlace a la dirección de correo electrónico. Un enlace al e-mail tiene la siguiente estructura:

<ADDRESS><A href=”mailto:dirección de correo”>Enlace</A></ADDRESS>

Por ejemplo:

<HTML>

<HEAD><TITLE> Enlace a e-mail </TITLE></HEAD>

<BODY >

Escribe un e-mail a: <ADDRESS><A href=”mailto:[email protected]”>Roberto Medrano</A></ADDRESS>

</BODY>

</HTML>

Los enlaces a una página o dirección de la World Wide Web son más sencillos. En este caso no utilizamos la etiqueta <ADDRESS> ..... </ADDRESS>, sino que escribimos la dirección en el valor del atributo href. Por ejemplo:

<HTML>

<HEAD><TITLE> Enlace a Web </TITLE></HEAD>

<BODY >Si quieres ir a Google haz click <A href=”http://www.google.com”>aquí</A>.</BODY>

</HTML>

El texto que escribimos entre la etiqueta <A> de inicio y la etiqueta </A> de final, es lo que aparece en nuestra página como elemento interactivo para pinchar y que nos lleve al enlace. Veremos más adelante que podemos utilizar también imágenes.

Los enlaces a una sección del documento implican el uso de, al menos, dos etiquetas de enlace. Necesitamos una etiqueta para dar nombre a la sección y otra para enlazar con la sección.

Por ejemplo, veamos este documento llamado “museos de cordoba.html”1:

1 Este documento es parte de un trabajo realizado por Ana María Campos Fernandez de 1º de E.S.O. del curso 2003-2004.

En el documento, a cada sección se le ha puesto un nombre, justo delante del título de la sección:

<a name="bellasartes"></a>EL MUSEO DE BELLAS ARTES

<P>Situado en la bellísima plaza del Potro, el Museo de ....

En la parte de arriba se escriben los enlaces a cada una de las secciones:

<a href="#bellasartes">Museo Bellas Artes</a><br><a href="#naranjasylimones">Museo Naranjas y Limones</a><br><a href="#alcazardelosreyescristianos">Museo Alcázar de los Reyes Cristianos</a><br><a href="#torrefortalezadelacalaorra">Museo Torre Fortaleza de la Calahorra</a><br><a href="#madinat">Museo de Maninat Al-zahra</a><br>

Vemos que el enlace tiene la misma estructura que un enlace a Web pero la “dirección” que escribimos en el atributo href es el nombre de la sección precedido del símbolo #, que indica que la dirección se refiere a un parte del documento en el que estamos trabajando.

Para crear un enlace a una sección de otro documento procedemos de forma similar. Imaginemos que desde el documento llamado “Inicio.html” queremos ir a la sección del Museo de Bellas Artes dentro del documento “museos de cordoba.html”. Los pasos que hemos de realizar son los siguientes:

Damos nombre a las secciones del documento “museos de cordoba.html”, si no lo tienen ya, tal y como vimos antes.

En el documento “Inicio.html” creamos un enlace similar a los que creábamos antes para hacer referencia a una sección dentro del documento. La diferencia es que, ahora, hemos de especificar el nombre del archivo (y la ruta si no se encuentra en el mismo directorio, aunque eso lo veremos más adelante) “museos de cordoba.html” delante del símbolo #. Es decir, en el documento “Inicio.html” escribimos algo así:

<HTML>

<HEAD><TITLE> Enlace a sección de otro documento</TITLE></HEAD>

<BODY >

Vamos a ver la sección de museos de Córdoba que trata del <A href=”museos de cordoba.html#bellasartes”>Museo de Bella Artes</A>.

</BODY>

</HTML>

El documento “Inicio.html” queda de la siguiente forma:

Al pinchar en el enlace obtenemos:

13- TABLAS

HTML nos permite crear tablas que nos van a servir no sólo para organizar el texto en filas y en columnas, si no que también nos va a permitir insertar imágenes y ordenarlas.

Una tabla se define mediante la etiqueta pareada <TABLE> ..... </TABLE>, en cuyo interior se describen las filas y las columnas de la misma.

Las filas se representan con la etiqueta opcional <TR> ..... </TR> y son los bloques básicos, es decir, que son lo primero que se especifica y las columnas se definen dentro de cada fila.

Las columnas se definen, dentro de cada fila, mediante la etiqueta opcional <TD> ..... </TD>. Existe también un tipo de columna especial, la de encabezado (le de los títulos de las columnas) que se puede especificar con la etiqueta opcional <TH> ..... </TH>, que produce un formato especial.

Además, se le puede poner un título o comentario de tabla mediante la etiqueta pareada <CAPTION> ..... </CAPTION>. Esta etiqueta sólo puede aparecer una vez dentro de cada tabla.

Ejemplo:

<HTML>

<HEAD><TITLE> Tablas en HTML </TITLE></HEAD>

<BODY >

Esta tabla muestra algunos gastos de una familia de 4 miembros:

<TABLE><CAPTION>Gastos Mensuales</CAPTION>

<TR> <TH>Mes</TH> <TH>Alimentación</TH> <TH>Luz/Gas/Agua</TH> <TH>Transporte</TH></TR><TR> <TD>Enero</TD> <TD>250</TD> <TD>120</TD> <TD>200</TD></TR><TR> <TD>Febrero</TD> <TD>230</TD> <TD>135</TD> <TD>190</TD></TR></TABLE>

</BODY>

</HTML>

En el ejemplo anterior, la tabla no tiene ningún borde que la diferencie del resto del documento. Esto será útil en algunos casos. No obstante, si queremos que aparezca el borde, debemos utilizar el atributo border dentro de la etiqueta <TABLE>. El valor que puede tomar este atributo es 0 (si no aparece) o valores de 1 a 7 según el grosor que queramos.

Por ejemplo, la tabla anterior con borde, sería igual pero la etiqueta <TABLE> quedaría:

<TABLE border=1>

lo que produce el resultado:

Existen otros atributos, tanto de la etiqueta <TABLE> como de las etiquetas de fila y de columna, que nos permiten modificar la apariencia de la tabla:

Etiqueta Atributo Función Valores<TABLE> border Fijar ancho del borde de la tabla de 0 a 7

cellpaddingFija la distancia (en píxeles) entre el borde de la celda y su contenido

cualquier valor positivo

cellspacingFija la anchura (en píxeles) de las líneas de división de la tabla

cualquier valor positivo

widthControla la anchura horizontal de la tabla, en píxeles o en porcentaje de pantalla

cualquier valor positivo (con % si indicamos porcentaje)

alignControla la alineación de la tabla con respecto a otros elementos de la página

left, right

<CAPTION> alignFija la posición del título con respecto de la tabla

top (arriba) o bottom (abajo)

<TR> alignAlineación horizontal del texto en la fila

left, center, right

valignAlineación vertical del texto en la fila

top, bottom, middle, baseline

<TD> y <TH> alignAlineación horizontal del texto en la columna

left, center, right

valignAlineación vertical del texto en la columna

top, bottom, middle, baseline

colspanIndica el número de columnas que ocupará esta celda

cualquier valor positivo mayor que 2 y menor que el número total de columnas

rowspanIndica el número de filas que ocupará esta celda

cualquier valor positivo mayor que 2 y menor que el número total de filas

nowrapObliga al explorador a no romper las líneas de texto que contenga la celda

widthDetermina el ancho de la celda, en píxeles o en porcentaje.

cualquier valor positivo (con % si indicamos porcentaje)

Además, las etiquetas <TABLE>, <TR> y <TD> admiten el atributo bgcolor, que permite cambiar el fondo de la tabla, columna, fila, etc., según la etiqueta sobre la que se aplique. Lo mismo ocurre con el atributo background si queremos poner una imagen de fondo en la tabla o en algunas de sus celdas.

Vamos a ver unos ejemplos:

1- En este primer ejemplo vamos a ver el color en las celdas y la alineación de tabla y de texto.

<HTML>


<BODY >

Esta tabla muestra algunos gastos de una familia de 4 miembros:<BR><BR>

<TABLE border=2 align=center><CAPTION>Gastos Mensuales</CAPTION><TR bgcolor=”#88aa88” align=center> <TH>Mes</TH> <TH>Alimentación</TH> <TH>Luz/Gas/Agua</TH> <TH>Transporte</TH></TR><TR bgcolor=cyan align=right> <TD align=left>Enero</TD> <TD bgcolor=red>250</TD> <TD>120</TD> <TD>200</TD></TR><TR bgcolor=cyan align=right> <TD align=left>Febrero</TD> <TD>230</TD> <TD>135</TD> <TD>190</TD></TR></TABLE>

</BODY>

</HTML>

2- En este ejemplo vamos a dejar la tabla alienada a la izquierda de un texto y le vamos a dejar espacio entre el borde de la celda y su contenido así como con respecto al texto de fuera.

<HTML>


<BODY >

<font size=4><p>Como la tabla esta alineada a la izquierda, el texto la pasará por la derecha.

<TABLE border=2 bgcolor=cyan align=left cellpdding=8 cellspacing=4><CAPTION align=bottom>Gastos Mensuales</CAPTION><TR bgcolor=”#88aa88” align=center> <TH>Mes</TH> <TH>Alimentación</TH> <TH>Luz/Gas/Agua</TH> <TH>Transporte</TH></TR><TR align=right> <TD align=left>Enero</TD> <TD>250</TD> <TD>120</TD> <TD>200</TD></TR><TR align=right> <TD align=left>Febrero</TD> <TD>230</TD> <TD>135</TD> <TD>190</TD></TR></TABLE>

<p>En cuanto escribamos detrás de la tabla.<P>Si nos fijamos, el cambio de tamaño del texto no ha afectado al texto dentro de la tablas, si no, sólamente, al texto de fuera.</font>

</BODY>

</HTML>

3- Por último, vamos a ver cómo cambiar el texto en una tabla y hacer que una columna (fila) ocupe el espacio de varias:

<HTML>


<BODY >

<TABLE border=2 bgcolor=cyan align=left cellpdding=8><CAPTION align=bottom>Gastos Mensuales</CAPTION><TR bgcolor=”#88aa88” align=center> <TH><font size=4 face="verdana">Mes</TH> <TH>Alimentación</TH> <TH>Luz/Gas/Agua</TH> <TH>Transporte</TH></TR><TR align=right> <TD align=left>Enero</TD> <TD>250</TD> <TD colspan=2>320</TD> </TR><TR align=right> <TD align=left>Febrero</TD> <TD>230</TD> <TD>135</TD> <TD>190</TD></TR></TABLE>

</BODY>

</HTML>

14- COMBINACIÓN DE ELEMENTOS

Hemos aprendido ya mucha cosas sobre HTML: estructura y formato del texto, enlaces, imágenes, listas, tablas, etc. Por el momento cada cosa la hemos visto por separado. Sin embargo, lo interesante de HTML es la combinación de todos los elementos para producir documentos más vistosos e interesantes.

Para combinar elementos es necesario insertar unas etiquetas dentro del campo de acción de otra, es decir, entre las etiquetas de inicio y final de la primera. Estudiaremos con más detenimiento este concepto de anidamiento de etiquetas.

En este apartado veremos sólo algunos ejemplos, pero que ilustrarán las posibilidades que existen y que podemos explotar con un poquito de imaginación.

1. Menú de enlaces.

En ocasiones, puede interesarnos tener un listado de opciones, es decir, un menú, que nos permita seleccionar el apartado de la página que queremos visitar o simplemente que nos presente un listado de enlaces a páginas de Internet. Esto se puede hacer creando una lista (ordenada o desordenada) en la que cada punto sea un enlace. Veamos un ejemplo:

<HTML>

<HEAD><TITLE> Menú de opciones </TITLE></HEAD>

<BODY >

Esta es una lista de buscadores en Internet:

<UL type=disc><LI><A href="http://www.google.com">Google</A></LI><LI><A href="http://www.yahoo.com">Yahoo</A></LI><LI><A href="http://www.altavista.com">Altavista</A></LI><LI><A href="http://www.lycos.es">Lycos</A></LI></UL>

</BODY>

</HTML>

2. Enlace con imagen.

En muchas páginas de Internet encontramos imágenes que hacen la función de enlace, bien a la misma foto pero más grande, bien a cualquier otra página. Veamos un ejemplo:

El documento que contiene el enlace sería:

<HTML>

<HEAD><TITLE> Enlace con foto </TITLE></HEAD>

<BODY >

Haz click sobre la imagen para verla en grande:<BR><BR>

<center><A href="fotogrande.html"><IMG src="doscafes.jpg" width=50></A></center>

</BODY>

</HTML>

Fijémonos que la foto aparece rodeada de un borde azul, lo cual indica que es un enlace. Cuando pinchamos sobre la foto, vamos al siguiente documento que contiene la imagen en grande:

El código de este documento es el que sigue:

<HTML>

<HEAD><TITLE> Enlace con foto </TITLE></HEAD>

<BODY >

<center><IMG src="doscafes.jpg" width=300></A></center>

</BODY>

</HTML>

Hemos fijado el tamaño de la imagen en píxeles para evitar que cambie de tamaño al hacer la ventana más grande. Podríamos haber hecho un enlace directo a la imagen, pero esto nos impediría controlar el tamaño y la alineación de la imagen. Es decir, si en el primer documento cambiamos la línea del enlace por:

<A href="doscafes.jpg"><IMG src="doscafes.jpg" width=50></A>

al pinchar en la foto enlace, nos lleva a lo siguiente:

3. Tablas de fotos.

En una página Web en la que queremos mostrar fotos, es habitual hacerlo en forma de tabla para conseguir una mejor organización y un aspecto más elegante. Existen muchos programas que realizan automáticamente la tarea con indicar simplemente el número de filas y columnas y el tamaño de la tabla (Dreamweber, Frontpage, PhotoBase, etc.) pero todos ellos esconden un código HTML como el que nosotros vamos a ver ahora:

Vamos a crear una tabla con cuatro fotos con el siguiente código:

<HTML>

<HEAD><TITLE> Tabla con fotos </TITLE></HEAD>

<BODY >

<H1 align=center>Álbum de Fotos<H1>

<HR>

<TABLE align=center border=1>

<TR> <TD><IMG src="doscafes.jpg" width=100></TD> <TD><IMG src="cafe.jpg" width=100></TD></TR><TR> <TD><IMG src="movil.jpg" width=100></TD> <TD><IMG src="orejas.jpg" width=100></TD></TR></TABLE>

</BODY>

</HTML>

Hemos fijado la anchura de las imágenes en píxeles, para evitar que cambien de tamaño al variar el tamaño de la ventana. Evidentemente, el problema es que si no todas las fotos tienen el mismo formato, en la tabla aparecen espacios en blanco para completar el espacio que queda en la celda al pertenecer a una fila en la que hay un imagen más alta. Para evitar esto tenemos dos soluciones:

Reordenar “manualmente” las imágenes, es decir, cambiar el código anterior de forma que las fotos con el mismo formato estén en la misma fila:

Podemos fijar también la altura de las imágenes, aunque esto nos deformará alguna o todas las fotos:

<IMG src="doscafes.jpg" width=100 height=80>

En el caso de que tengamos fotos cuyos formatos conocemos de antemano, lo mejot es planificar un poco y utilizar el primer método.

En el caso que se tenga que preparar una tabla para fotos que van a venir después, es mejor el segundo método, ya que, como veremos en el siguiente apartado, podemos utilizar la tabla para poner pequeñas fotos-enlace que nos lleven a la imagen más grande. En este caso no importa un poco de deformación.

En cualquier caso, si las fotos las va a hacer uno mismo, es bueno llevar en la cabeza que las vamos a poner en la Web y utilizar como máximo dos formatos, uno horizontal y otro vertical, a la hora de sacar las fotos. Esto nos simplifica mucho el trabajo después.

4. Tabla de fotos con enlace.

Veamos como podemos convertir la tabla anterior en una tabla de pequeñas fotos-enlace que nos lleven a una imagen mayor de la misma foto. Al pinchar, el navegador no irá a el fichero de imagen directamente, si no, tal como hicimos anteriormente, nos llevará a un fichero .html que contendrá la imagen correspondiente. Estos ficheros que contendrán las imágenes, llevarán el mismo nombre que la imagen que contienen salvo por la extensión .html en lugar de .jpg.

El código para esta tabla (dejamos que las fotos se deformen), será:

<HTML>

<HEAD><TITLE> Tabla con fotos </TITLE></HEAD>

<BODY >

<H1 align=center>Álbum de Fotos<H1>

<HR>

<TABLE align=center border=1><TR> <TD><A href="doscafes.html"><IMG src="doscafes.jpg" width=100 height=80></A> <TD><A href="cafe.html"><IMG src="cafe.jpg" width=100 height=80></A></TR><TR> <TD><A href="movil.html"><IMG src="movil.jpg" width=100 height=80></A> <TD><A href="orejas.html"><IMG src="orejas.jpg" width=100 height=80></A></TR></TABLE>

</BODY>

</HTML>

Vemos como aparecen los bordes azules indicando que estamos ante una imagen que es un enlace:

Vemos el código de uno de los archivos que contienen las imágenes (movil.html):

<HTML>

<BODY >

<center><IMG src="movil.jpg" width=300></A></center>

</BODY>

</HTML>

15- ALGUNAS INDICACIONES SOBRE RUTAS Y DIRECTORIOS

En ocasiones, al abrir una de nuestras páginas con el explorador, es posible que las imágenes que hemos insertado no se nos muestren y, en su lugar, aparece un cuadradito con una cruz como el de la figura:

También es posible que los enlaces no funcionen correctamente, es decir, que cuando los pinchemos no aparezca la página que queremos sino un mensaje de error.

Existen dos posibles razones para que esto ocurra: el nombre del archivo imagen o de destino del enlace por un lado; y la ruta de acceso al archivo por otro.

En cuanto a los nombres de los archivos, son muy comunes los siguientes errores:

No incluir la extensión del archivo. En Windows, todos los ficheros tienen una extensión (los de Word son .doc, los de bloc de notes .tex o .html, etc.). La extensión es como el apellido del archivo, nos indica a qué familia pertenece. Lo necesitamos para identificarlo ya que archivos de diferentes familias pueden tener el mismo nombre y diferenciarse solo en la extensión (apellido). Por ejemplo, si queremos poner un enlace a un archivo de nombre imágenes que hemos creado con bloc de notas y que hemos guardado como página Web (.html), no es suficiente con escribir:

<A href=”imágenes”>Mis imágenes</A>

Deberemos incluir la extensión (además de no dejarnos loas tildes):

<A href=”imágenes.html”>Mis imágenes</A>

Escribir incorrectamente la extensión (.html) del archivo al grabarlo. Cuando grabamos por primera vez un documento HTML con bloc de notas, nos aparece un cuadro de diálogo como el siguiente:

Es importante no dejar espacios entre el nombre del archivo, el punto y la extensión, sobre todo entre el punto y la extensión (html) ya que de lo contrario, el explorador ni siquiera reconocerá el documento como una página Web.

En cuanto a los archivos de imagen es corriente el hecho de confundir las extensiones (.jpg, .bmp, .gif) de los archivos. Para saber con seguridad la extensión de un archivo, si visualizamos los archivos con el explorador en modo mosaico, los archivos .jpg muestran un icono con un barquito en una puesta de sol, los archivos .bmp muestran un pincel y los archivos .gif muestran un cuadradito rojo, un circulito azul y un triangulito amarillo, tal y como en la siguiente figura:

Cuando bajamos una imagen de Internet podemos cometer el error de escribir nombre y extensión. Esto es un error, ya que la imagen ya tiene su propio formato y la extensión que le demos no será sino parte del nombre. Es decir, si queremos bajar una imagen de un paisaje que se llama pj000103.gif y al guardarla le ponemos escribimos el nombre paisaje.jpg, la imagen que habremos guardado, incluida la extensión se llamará paisaje.jpg.gif. Esto nos producirá errores al insertarla en algún documento HTML. Si queremos cambiar la extensión, hemos de cambiar el formato, pero eso no está dentro del objetivo de estas notas.

La segunda fuente de error más frecuente a la hora de incluir una imagen o un enlace, es la ruta de acceso al mismo. Hasta el momento, hemos trabajado suponiendo que todos los archivos que utilizamos (imágenes, archivos de texto, etc.) se encontraban localizados en la misma carpeta. ¿Qué ocurre si esto no es así? Lo normal es que, antes o después, nos aparezcan los citados errores con los enlaces y las imágenes.

Para asegurarnos que un enlace funciona o que una imagen aparece en nuestra página Web, hemos de especificar la ruta de acceso al archivo. La ruta de acceso no es más que la estructura de carpetas (directorios) que hemos de seguir para llegar hasta el archivo que queremos incluir, ya directamente (imagen) o mediante un enlace.

Para explicar de forma sencilla cómo funcionan las rutas vamos a suponer que estamos en la siguiente situación. Hemos creado una carpeta llamada “MisHTML” dentro de la carpeta “Mis Documentos”. Además, todas las imágenes con las que vamos a trabajar, están dentro de una carpeta que hemos creado dentro de “MisHTML” que hemos llamado “fotos”. Vamos a definir ahora que es una carpeta (o directorio) padre y una carpeta hijo (subdirectorio)

Una carpeta padre es la carpeta que contiene a aquella en la que estamos trabajando. Así pues, la carpeta “Mis Documentos” es padre de nuestra carpeta “MisHTML”, al igual que lo es de otras carpetas (“Mis Imágenes”, “Mis vídeos”, etc.). Del mismo modo, la carpeta “MisHTML” es una carpeta padre de la carpeta “fotos”.

Una carpeta hijo (o subdirectorio) es una carpeta que está incluida dentro de aquella con la que estamos trabajando. Así, “fotos” es carpeta hijo de “MisHTML” que, a su vez, es carpeta hijo de “Mis Documentos”.

Una nota obvia pero importante: una carpeta puede tener muchos hijos (subcarpetas) pero sólo puede tener un padre.

Bien, veamos ahora como hemos de utilizar las rutas para acceder a los documentos:

En el caso en que estemos creando una página Web en “MisHTML” y queramos incluir en ella una imagen que se puede llamar paisaje1.jpg que se encuentre dentro de la carpeta hijo “fotos”, cambiaremos el valor del atributo src incluyendo el camino que hemos de seguir hasta llegar a ese archivo imagen, es decir, en lugar de escribir <IMG src=”paisaje1.jpg”>, deberemos poner:

<IMG src=”fotos/paisaje1.jpg”>

Si dentro de la carpeta “fotos” hubiésemos creado una carpeta hija llamada “paisajes”, dentro de la cual se encontrara nuestra imagen, deberíamos escribir:

<IMG src=”fotos/paisajes/paisaje1.jpg”>

Es decir, escribimos el nombre de las carpetas (separados por la barra “/”) en las que hay que ir entrando para llegar hasta el archivo imagen.

Para los enlaces ocurre lo mismo. Imaginemos que creamos una carpeta hija dentro de “MisHTML” llamada “Gastronomía”. Creamos en ella una página Web llamada paella.html con la receta de la paella. Para establecer un enlace a este archivo desde otro que se encuentre en “MisHTML”, deberemos escribir la ruta:

<A href=”Gastronomía/paella.html”>La paella</A>

Si el archivo paella.html lo hemos creado dentro de una carpeta llamade “arroces” hija de la carpeta “Gastronomía”, para establecer el anterior enlace desde “MisHTML” deberemos escribir:

<A href=”Gastronomía/arroces/paella.html”>La paella</A>

Cuando queremos establecer un enlace a un archivo que se encuentra en el la carpeta padre debemos utilizar también la ruta adecuada. Por ejemplo, imaginemos que queremos insertar una imagen que se encuentra en “Mis Documentos” y que hemos llamado imagen1.jpg en un archivo que estamos creando en “MisHTML”. Hemos de indicar al explorador que debe buscar la imagen en le directorio (carpeta) padre del que nos encontramos. Esto se realiza mediante el símbolo “..”, es decir, escribiremos:

<IMG src=”../imagen1.jpg”>

Si, en lugar de encontrarse en “Mis Documentos”, el archivo imagen1.jpg se encuentra en un directorio hijo de “Mis Documentos” distinto a nuestro directorio de trabajo, hemos de indicárselo a continuación. Por ejemplo, si se encontrase dentro de “Mis Imágenes”, escribiríamos:

<IMG src=”../Mis Imágenes/imagen1.jpg”>

TERCERA PARTE:

HTML AVANZADO

16- MULTIMEDIA CON HTML

En la actualidad, existen herramientas para desarrollo multimedia de páginas Web (Flash, etc.) que consiguen resultados verdaderamente profesionales. Si bien los documentos HTML con características multimedia suelen implementarse con este tipo de herramientas, resulta interesante y, en cierto modo imprescindible, conocer cómo se realiza con HTML puro y duro.

Por multimedia entendemos aquellos sistemas de comunicaciones que usan varios medios combinados para la difusión de la información. Estos medios pueden ser: hipertexto, imágenes, sonido, música, vídeo, etc.

A continuación veremos los formatos de imagen, audio y vídeo utilizados más frecuentemente:

Tipo Formato Descripción

Imagen jpgFormato con compresión que permite buenas resoluciones.

gifUtiliza como máximo 256 colores, idóneo para dibujos y animaciones.

bmpImagen de mapa de bits, inconveniente de tamaño, pero óptimo para fotografía de alta definición.

Sonido midi

Formato de secuencia, dispone de canales para cada instrumento. Suelen crearse a partir de un sintetizador o un instrumento musical electrónico con salida MIDI

wav Nativo de los SO Windows

Real AudioUtilizado por programas como Real Player, radio y emisiones diversas a través de Internet.

au Nativo de sistemas tipo Unix.

mp3Muy popular y utilizado por programas como WimAmp; se suele utilizar para distribuir música por la Red.

Vídeo aviNativo de los SO Windows, también se conoce como Video for Windows.

mpegFormato estandarizado por la ISO y empleado en la distribuciópn de películas en CD, DVD, TV digital ...

Quick Times (MOV) También conocido como QT, desarrollado por

Apple para sus ordenadores Mac. Existen drivers para PC.

REPRODUCCIÓN DE SONIDO

En cuanto a la reproducción de sonidos en un navegador, podemos distinguir dos casos:

1. Fondos sonoros.2. Sonidos activados por el usuario.

Hasta ahora, habíamos visto cómo incluir color o imágenes en el fondo de pantalla. Vamos a ver ahora cómo podemos añadir un fondo musical a tus creaciones que haga la visita a tu página Web más agradable.

Consejo: No conviene abusar de este recurso. Una página con fondo sonoro puede resultar cargante, e incluso irritante, si no se pone un poco de cuidado. Los fondos sonoros son considerados horteras por una buena parte de los usuarios de la Red. Si vas a utilizar un fondo sonoro en una página Web, procura que no sea excesivamente largo, ni repetitivo, sino más bien, como un elemento de entrada, un logotipo sonoro.

El modo de implementar fondos depende del Navegador que estemos utilizando, aquí lo vamos a ver para el Internet Explorer.

Fondos sonoros en Internet Explorer

Internet Explorer utiliza la etiqueta <BGSOUND> para crear fondos sonoros, aunque, a partir de la versión 4.0 se reconoce también la etiqueta pareada <EMBED> ... </EMBED>, que se usa también en otros navegadores (Netscape) y tiende a convertirse en el estándar.

La sintaxis básica de la etiqueta <BGSOUND> es la siguiente:

<BGSOUND src=”nombredelfichero”>

Donde nombredelfichero es el nombre (incluida la extensión) y la ruta completos del fichero de sonido a escuchar. El formato del fichero normalmente será MIDI (.mid), MP3 (.mp3) o WAVEFORM (.wav).

Opcionalmente, la etiqueta <BGSOUND> admite el atributo loop que indica el número de veces que se desea repetir la pieza musical o el sonido. Puede tener un valor natural (entero positivo) o el valor infinite que repetirá el sonido mientras tengamos abierta la página Web. Fondo sonoro mixto

Existe la posibilidad de combinar los dos tipos de etiquetas de modo que se pueda escuchar el fondo sonoro tanto si se utiliza Netscape, como si se utiliza Internet Explorer. Para ello, se puede hacer de la etiqueta pareada <NOEMBED> ... </NOMEBED>. Por ejemplo:

<HTML>

<HEAD><TITLE> Ejemplo de fondo sonoro mixto </TITLE></HEAD>

<BODY><H1> Fondo sonoro para Internet Explorer </H1><EMBED src=”Blues.wav” height=60 width=135><NOEMBED><BGSOUND src=”Blues.wav” loop=infinite></NOEMBED></BODY>

</HTML>

Si este documento se visualiza con una versión anterior a la 4.0 de Internet Explorer, las etiquetas <EMBED>, <NOEMBED> y </NOEMBED> serán ignoradas y el fichero imagine.mp3 se podrá escuchar mediante el uso de <BGSOUND>. Para una versión posterior a la 4.0, la etiqueta <EMBED> será reconocida y todo aquello que se encuentre entre las etiquetas <NOEMBED> y </NOEMBED> se pasará por alto. Curiosamente, Internet Explorer 4.0 o superior mostrará una consola de sonido, como la de la figura.

Sonidos activados por el usuario

Para que el usuario pueda activar un sonido haciendo clic sobre un enlace, realizamos un enlace al archivo de sonido de la misma forma que hacíamos los enlaces a los archivos de imagen o de texto. Por ejemplo:

<HTML>

<HEAD><TITLE> Sonido activado por enlace </TITLE></HEAD>

<BODY><H1> Enlace a archivo de sonido </H1><A href=”Imagine.mp3”>Escuchar Imagine</A></BODY>

</HTML>

Al hacer clic sobre el enlace se comienza a reproducir el archivo:

MARQUESINAS2

Las marquesinas nos permiten presentar texto en movimiento. Una marquesina no es otra cosa que una zona de pantalla que contiene texto, y este texto se desplaza de un lado a otro.

Para definir marquesinas se utiliza la etiqueta pareada <MARQUEE> .... </MARQUEE>. La sintaxis básica de una marquesina es la siguiente:

<MARQUEE> Texto que se desplaza </MARQUEE>La etiqueta <MARQUEE> admite los siguientes atributos:

Atributo Descripción Valores

height, width

Indican el tamaño de la marquesina, especificando la altura y la anchura en número de píxeles o bien en porcentaje de pantalla

Valor numérico o porcentaje

alignIndica la alineación del texto que rodea a la marquesina.

top, bottom, middle

bgcolorModifica el color de fondo de la marquesina. El color debe especificarse mediante el código #RRGGBB

Cualquier valor del código

behaviorEspecifica el comportamiento del texto de la marquesina, es decir, de qué formase va a desplazar.

alternate, scroll, slide

directionSirve para especificar la dirección de desplazamiento del texto de la marquesina

left, right

loopIndica el número de veces que el texto se desplazará de un lado a otro. El valor predeterminado es infinito

Valor numérico, infinito

scrolldelayIndica el tiempo que el texto emplea en desplazarse en cada movimiento, expresado en milisegundos

Valor numérico entero

scrollmount

Indica el número de píxeles recorridos por el texto en cada movimiento. Un valor de 20 indicará que el texto de la marquesina se irá desplazando de 20 en 20 píxeles hasta llegar al otro extremo de la marquesina.

Valor numérico entero

2 Las Marquesinas funcionan únicamente con Internet Explorer. En Netscape, el texto aparece fijo.

VÍDEO EN INTERNET EXPLORER

La inclusión de vídeo en Internet Explorer puede hacerse de forma sencilla: basta con utilizar la etiqueta <IMG> que ya conocemos. Lo único que cambia son los atributos que acompañan a dicha etiqueta. En lugar del atributo src, el atributo obligatorio ahora será dynsrc. Por ejemplo:

<IMG dynsrc=”FichVideo”>

Además, tenemos otros atributos opcionales:

Loop Height, Width Controls: Muestra la consola de vídeo con los controles para parar, pausar, rebobinar, etc. Start: Puede adoptar dos valores: fileopen indica que el fichero de video comenzará a ejecutarse al cargarse

la página Web donde se halle. mouseover indica que el fichero de vídeo se ejecutará cuando el usuario sitúe el puntero del ratón sobre el cuadro de vídeo.

Por ejemplo:

<HTML>

<HEAD><TITLE> Vídeo en HTML </TITLE></HEAD>

<BODY><img dynsrc="PHTO0023.avi" start=mouseover width=240 height=200></BODY>

</HTML>

Cuando cargamos la página Web, obtenemos:

Al pasar el ratón sobre el cuadro de vídeo:

17- MARCOS

Los marcos permiten dividir una página Web en varias páginas, de forma que cada una puede mostrar una página HTML distinta.

Utilizaremos principalmente los marcos para ver el índice de un documento y desde él, mediante enlaces, cargar las diferentes secciones de ese índice en la parte principal de la ventana. Es decir, lo que realmente estamos haciendo es crear, no una página Web, sino un sitio Web. Un sitio Web es una colección de páginas que tratan sobre un tema común unidas entre sí mediante enlaces, un índice, etc. En la actualidad, casi todas las páginas que visitamos en Internet, son sitios Web más que páginas, ya que esta estructura de sitio Web permite presentar la información de una forma más ordenada que si ponemos todo en la misma página.

Para crear los marcos, hemos de cambiar completamente la estructura general del documento HTML. La etiqueta <BODY> ... </BODY> desaparece y es sustituida por la etiqueta <FRAMESET> ... </FRAMESET>.

La etiqueta <FRAMESET> admite dos atributos. El atributo rows especifica el número de marcos fila en los que se dividirá la página. El atributo cols especifica el número de marcos columna. Los valores que pueden tomar son número enteros, tantos por ciento y el valor “*”, que especifica que el marco sea tan grande como la ventana. Por ejemplo:

<HTML>

<HEAD><TITLE> Marcos en HTML </TITLE></HEAD>

<FRAMESET cols="25%,75%"><FRAME src="win.gif"> <FRAME src="linuxorg.gif"></FRAMESET>

</HTML>

Como vemos, hemos utilizado, dentro de la etiqueta <FRAMESET>, una nueva etiqueta denominada <FRAME>. Esta etiqueta nos permite especificar el contenido de cada uno de los marcos. Admite los siguientes atributos:

Atributo Descripción

srcNombre (y ruta si es necesario) del documento que se quiere colocar dentro del marco.

nameAsigna un nombre al marco de forma que pueda ser el destino de enlaces situados en otros marcos.

marginwidth Especifica el margen lateral en píxeles.marginheight Especifica el margen superior e inferior en píxeles.

scrollingSi un documento es más largo que el marco, aparecen unas barras de desplazamiento. Este atributo permite desactivar o automatizar su aparición.

noresize Evita que el tamaño de los marcos sea alterado

Los marcos pueden anidarse, es decir, podemos definir, por ejemplo, unos marcos fila dentro de un marco columna y viceversa. No obstante, debe tenerse mucho cuidado con esto ya que puede complicar mucho la estructura de la página y dificultar su lectura.

Ejemplo:

<HTML>

<HEAD><TITLE> Marcos en HTML </TITLE></HEAD>

<FRAMESET cols="50%,50%">

<FRAMESET rows="50%,50%"> <FRAME src="linuxorg.gif"> <FRAME src="linuxorg.gif"> </FRAMESET>

<FRAMESET rows="33%,33%,33%"> <FRAME src="win.gif"> <FRAME src="win.gif"> <FRAME src="win.gif"> </FRAMESET>

</FRAMESET>

</HTML>

En el código anterior, en primer lugar, hemos dividido la página en dos columnas, cada una de las cuales ocupa el 50% de la misma. A continuación, hemos dividido la primera de las columnas en dos marcos fila, en cada uno de los cuales hemos insertado el archivo de imagen linuxorg.gif. La segunda columna, por el contrario, la hemos dividido en 3 marcos fila, cada uno de los cuales ocupa el 33% de la página y muestra el archivo de imagen win.gif.

El resultado se muestra en la siguiente figura:

Vamos a ver ahora cómo podemos utilizar los marcos para crear una página en la que tengamos un índice con el cual podamos cargar diferentes secciones (diferentes páginas) en un marco principal. Es decir, vamos a crear menús que actualizan un marco distinto al que se pulsa. Veámoslo con un ejemplo:

En los ejemplos anteriores, los archivos que hemos cargado en los diferente marcos eran simplemente archivos de imagen que incluíamos dentro de la etiqueta <FRAME>, mediante el atributo src. Ahora vamos a crear una página con dos marcos en cada uno de los cuales se cargará una página Web: en la primera, que ocupará un 25% de la pantalla, aparecerá un menú con enlaces a los diferentes apartados; en la segunda página aparecerá una página principal y, al hacer clic sobre los enlaces del menú, las diferentes secciones se cargarán en este segundo marco.

Por supuesto, para que las páginas se carguen, hay que crearlas previamente. Lo primero que haremos es crear el archivo indice.html que contiene los enlaces a los diferentes apartados. Es el siguiente:

<html>

<body bgcolor="#888899" link="#886600" vlink="#90FF00"><br><br><br><br><b><font size=3 face="Chiller" color="#0077CC"><a href="portada.html" target="principal">PORTADA</a><br><br><a href="historia.html" target="principal">HISTORIA</a><br><br><a href="museos.html" target="principal">MUSEOS</a><br><br><a href="monumentos.html" target="principal">MONUMENTOS Y EDIFICIOS </a><br><br><a href="personajes.html" target="principal">PERSONAJES ILUSTRES</a><br><br><a href="gastronomia.html" target="principal">GASTRONOMIA</a><br><br><a href="fotos.html" target="principal">ÁLBUM DE FOTOS</a><br><br></font></b></body>

</html>

De aquí, todo nos es conocido salvo el atributo target que explicaremos un poco más adelante. Fijémonos que para cada sección hemos puesto un enlace a un archivo que contendrá la información referente a ese apartado. Todos estos archivos (portada.html, historia.html, museos.html, etc.) hemos de crearlos independientemente. Veamos, por ejemplo, el código del fichero portada.html que será el que nos sirva de página principal:

<html>

<body bgcolor="#888899" text="white">

<br><center><font face="Century Gothic" size=30>BIENVENIDOS A LA WEB DE VALENCIA</font><br><font face="Informal Roman" size=5>Por: Roberto Medrano Sanía</font><br><br><IMG SRC="../imagenes/hemisfericmuseo.jpg" width="60%" alt="ArtesyCiencias"></center><br><font face="Informal Roman" size=4>Bienvenidos! En esta página intentaremos explicar mediante fotos y textos cómo es y cómo se vive en nuestra ciudad: su historia, sus monumentos más importantes, personajes importantes que nacieron o vivieron en ella y mucho más.... Gracias por su visita!

</body>

</html>

Antes de pasar a la definición de los marcos veamos estas dos páginas por separado:

Ahora, una vez creados los archivos de todos los apartados, hemos de crear el fichero que define los marcos, que llamamos marcos.html:

<html>

<head><title>Valencia</title></head>

<FRAMESET COLS="25%,75%" border=0><FRAME SRC="indice.html" scrolling=no noresize><FRAME SRC="portada.html" NAME="principal" marginwidth=2 border=0 noresize></FRAMESET>

</html>

Si visualizamos el archivo marcos.html obtenemos lo siguiente:

Fijémonos en las novedades del código marcos.html:

Hemos utilizado el atributo border, que ya conocíamos de las tablas, asignándole el valor 0 para que nuestra página tenga aspecto de continuidad, es decir, que no se muestren las líneas de separación entre los marcos. Esto da un aspecto más profesional a nuestra página.

En la etiqueta <FRAME> que inserta el archivo del índice en el primer marco, hemos incluido los atributos scrolling=no y noresize, para evitar que aparezca la barra de desplazamiento cuando la ventana del navegador es demasiado pequeña para ver todo el índice (así obligamos al usuario a mantener un tamaño mínimo de ventana) e impedir que el tamaño del texto se haga más pequeño al disminuir la ventana.

En la etiqueta <FRAME> que inserta el archivo de la portada en el segundo marco, hemos incluido el atributo marginwidth=2 que deja 2 píxeles de margen entre el límite del marco y el texto, evitando así que este se pueda juntar con el del primer marco.

Además, en la etiqueta <FRAME> que inserta el archivo de la portada en el segundo marco, hemos incluido el atributo NAME=”principal”. Es decir, al segundo marco le hemos puesto un nombre que nos permite identificarlo. Esto es lo que permite realizar un enlace desde el archivo indice.html que se encuentra en el primer marco, de forma que podemos cargar cualquiera de los archivos de las secciones en este segundo marco. Esto lo hacíamos mediante el atributo target. Si recordamos uno de los enlaces del índice:

<a href="historia.html" target="principal">HISTORIA</a>

podemos observar que tenemos un enlace al apartado de Historia, que se cargará en el marco llamado principal (el segundo marco) cuando hagamos un clic sobre la palabra HISTORIA del primer marco.

Veamos la página que aparece al cliquear sobre HISTORIA. Como vemos, en el segundo marco, aparece el nuevo archivo mientras que el índice se mantiene en el primero, lo cual nos permite seguir navegando por nuestro sitio Web con comodidad. La palabra HISTORIA en color distinto nos indica el apartado en que nos encontramos:

18- IMÁGENES SENSIBLES (MAPAS DE IMÁGENES)

Las imágenes sensibles son imágenes que contienen zonas activas que actúan como enlaces, es decir, en función de la zona de la imagen en que se pinche, se activa un enlace a un documento u otro.

Para crear un mapa de imagen, necesitamos una imagen (en el ejemplo que vamos a utilizar es la imagen mapa_sensible.bmp) sobre la que definiremos un mapa mediante el uso de la etiqueta pareada <MAP> ... </MAP>. Esta etiqueta, contiene como único atributo name=”nombre”, donde “nombre” indica el nombre del mapa que estamos creando.

Cada una de las zonas activas de la imagen se definen entre las etiquetas <MAP> y </MAP> mediante el uso de la etiqueta sin parear <AREA>, cuyos atributos son:

Atributo Descripción

hrefEspecifica el archivo que se cargará al pulsar sobre esa zona activa.

alt Asigna un texto descriptivo relacionado con la zona

shapeEspecifica la forma que tendra la zona activa, puede ser circle, rect, o poly

coordsEspecifica las coordenadas de la zona. Su formato depende del valor de shape

Según el valor del atributo shape, las coordenadas del atributo coords, se especifican como podemos ver en la tabla siguiente:

shape coords

circlex, y, R; donde (x, y) son las coordenadas del centro del círculo y R su radio

rectx1, y1, x2, y2; (x1, y1) son las coordenadas del vértice superior izquierdo y (x2, y2) las coordenadas del vértice inferior derecho.

poly

X1, y1, x2, y2, .... , xn, yn; donde los pares de coordenadas (x, y) son las coordenadas de los vértices del polígono. Las coordenadas del último punto (xn, yn) deben ser las mismas que las del primero (x1, y1) para cerrar la figura.

Para aclarar todo esto, es mejor verlo con un ejemplo:

<HTML>

<HEAD><TITLE> Imágenes Sensibles en HTML </TITLE></HEAD>

<BODY>

<MAP NAME="mapa1"><AREA href="ing.html" ALT="square" SHAPE="rect" COORDS="30,39,128,96"><AREA href="esp.html" ALT="círculo" SHAPE="circle" COORDS="206,71,42"><AREA href="fra.html" ALT="triangle" SHAPE="poly" COORDS="138,126,192,203,74,202,138,126"></MAP>

<CENTER><H1> Ejemplo de Enlaces con Mapa Sensible </H1><IMG src="mapa_sensible.bmp" usemap="#mapa1" border=0></CENTER>

</BODY>

</HTML>

Entre las etiquetas <MAP> y </MAP> es dónde definimos las zonas activas y los archivos a que se cargarán al activar el enlace, creando el mapa que llamamos mapa1. Cuando insertamos la imagen, el uso del atributo usemap nos permite hacer actuar el mapa1 sobre la imagen que estamos insertando.

Veamos el resultado:

En el ejemplo que hemos puesto, la imagen elegida sobre la que actúa el mapa, mapa_sensible.bmp, es una imagen que hemos creado a partir de las imágenes de las banderas de las cuales disponíamos previamente (aunque hemos recortado la imagen de la bandera de España y de Francia).

Podríamos haber creado los enlaces de una forma más sencilla, insertando las banderas en una tabla como imágenes-enlace, ahorrándonos así la complicación del mapa sensible:

<HTML>

<HEAD><TITLE> Imágenes Sensibles en HTML </TITLE></HEAD>

<BODY>

<CENTER><H1> Ejemplo de Enlaces con Tabla </H1></CENTER>

<TABLE align=center><TR> <TD><A href="inga.html"><IMG src="bandera_Inglaterra.gif" width=100 ALT="square"></A> <TD><A href="espa.html"><IMG src="bandera_espana.jpg" width=100 ALT="square"></A><TR> <TD colspan=2 align=center><A href="fraa.html"><IMG src="francia2.gif"width=100 ALT="square"> </A></TABLE>

</BODY>

</HTML>

¿Qué sentido tiene entonces utilizar un mapa sensible? La respuesta es que con una mapa de imagen podemos crear todos los enlaces con una sola imagen, mientras que si lo realizamos con enlaces-imagen, necesitamos una imagen para cada enlace, con el consiguiente consumo de memoria. En segundo lugar, con un mapa de imagen, podemos utilizar cualquier zona de cualquier imagen como zona activa con la forma que queramos darle. Sólo necesitamos paciencia. Por último, en algunos casos, no es posible simular el mapa de imagen con una tabla de enlaces. Esto ocurre cuando las distintas zonas que queremos activar están contenidas en una imagen global y, además tienen formas geométricas complicadas. Podemos ilustrar todo esto mediante el siguiente ejemplo3:

<HTML><body bgcolor="#000000" text="#733A1A" leftmargin="8" topmargin="8" marginwidth="8" marginheight="8">

<FONT size=4 color=white face="verdana">Seleccione su idioma, select its language, choisissez sa langue.</FONT><br><br>

<center><MAP name="zona3paises"><AREA href="fra.html" alt="Francia" shape="polygon" coords="106,162,103,166,103,176,100,178,91,178,91,183,87,187,80,186,75,181,72,184,75,191,71,196,64,197,58,192,57,192,55,193,45,195,46,198,50,200,51,202,54,205,69,214,71,216,72,223,74,224,79,229,80,236,79,239,77,241,77,247,76,248,76,260,74,270,74,264,78,267,83,270,88,272,95,270,104,273,115,275,116,273,116,266,121,263,140,263,147,266,154,259,153,253,152,251,150,244,148,244,148,241,151,241,151,227,148,226,146,228,143,229,144,224,151,215,151,211,157,211,159,199,159,193,153,189,150,188,148,188,146,186,144,185,143,184,139,182,139,180,134,180,132,178,127,177,127,172,123,170,118,169,114,167,107,163"><AREA href="ing.html" alt="Inglaterra" shape="polygon" coords="61,44,55,44,50,46,42,46,40,60,32,64,29,69,35,73,31,77,36,81,31,89,37,87,40,89,36,96,38,97,43,94,46,96,43,104,47,108,56,109,59,114,62,116,63,130,58,130,46,130,52,136,52,143,40,151,44,53,49,152,55,156,58,156,62,164,65,154,63,159,58,162,50,159,48,165,38,175,43,175,48,172,51,172,54,173,57,168,64,166,69,169,76,166,87,166,99,159,94,156,104,146,103,139,96,135,92,137,89,165,91,130,87,123,88,120,66,89,64,88,59,87,59,84,68,75,73,60,56,60,53,61,54,58,51,56,51,53,55,53,62,45"><AREA href="esp.html" alt="España" shape="polygon" coords="73,264,65,264,63,264,56,264,55,265,49,265,47,264,41,261,24,260,27,260,16,262,15,265,49,265,47,267,8,268,10,176,10,280,15,279,16,282,24,281,28,280,30,281,30,285,32,284,33,287,26,294,28,300,26,302,27,305,27,306,26,308,21,308,26,315,23,322,27,326,21,333,23,336,27,335,31,336,37,346,39,346,43,343,47,342,55,340,68,339,76,332,80,331,81,326,86,320,85,309,88,305,97,292,106,288,117,281,117,274,112,276,107,276,104,274,101,274,99,271,95,270,93,272,87,271,85,270,74,264"><area shape="default" nohref></map>

3 Este ejemplo, salvo algunas modificaciones para adaptarlo al texto, fue realizado por Javier Ibañez Cruz, 3º de E.S.O. del curso 2003-2004.

<CENTER><IMG src="mapa.jpg" usemap="#zona3paises"></CENTER>

</BODY></HTML>

19- FORMULARIOS

En el lenguaje HTML se define un mecanismo que permite un intercambio de información directo entre el cliente y el servidor, son los conocidos formularios o FORMS. Mediante estos formularios, el usuario puede introducir información seleccionando elementos, activando botones, escogiendo elementos de menús o introduciendo texto en cuadros de diálogo.

Los formularios se crean mediante la etiquetas <FORM> ... </FORM>, siendo necesario introducir atributos especiales y otros códigos en el cuerpo del formulario. Los formularios se pueden dividir en dos tipos, según el método de procesamiento de la información recibida.

Formularios dirigidos a una persona: en este tipo de formularios, la información es devuelta encapsulada en un mensaje de correo electrónico que se envía a una dirección personal, normalmente la del creador de la página Web.

Formularios dirigidos a un servidor: estos formularios se caracterizan porque la información es retornada a un programa espacial, que se encuentra en el servidor de procedencia del documento HTML, y que procesa los datos del formulario. en este caso, el formulario ejecuta un programa o un script mediante el uso de CGI (Common Gateway Interface), el cual procesa el formulario y realiza la acción oportuna. Es el tipo de formulario que encontramos en las páginas de compra/venta electrónica.

Nosotros nos centraremos en el primer tipo de formularios, ya que para el segundo tipo, es necesaria la creación del programa CGI, lo cual está fuera del objetivo de este curso.

Los atributos de la etiqueta <FORM> son:

action: especifica la ruta de acceso al programa CGI que debe procesar los datos que se envían o, si se envían por correo electrónico, se puede indicar con mailto:dirección de correo.

method: especifica el método que se usa para enviar la información del formulario al programa CGI. Los métodos pueden ser GET y POST.

enctype: este último atributo suele tomar siempre el valor TEXT/PLAIN, que indica el tipo de información que se va a recibir. En la mayoría de los casos, un fichero de texto simple en formato ASCII.

Elementos de un formulario

Un formulario puede constar de uno o varios elementos, tal y como se muestra en la siguiente tabla:

Elemento Descripción

Cuadro de texto

Cuadro con espacio para una línea de texto donde se pueden escribir cadenas de texto, con o sin desplazamiento lateral y/o cifrado mediante asteriscos (*).

Área de textoEs muy similar a los cuadros de texto, pero para la inserción de múltiples líneas.

Lista de selecciónSe presentan diversas opciones en una lista permitiendo la selección de una o varias de ellas.

Casilla de verificación

Permite la confirmación, mediante clic con el ratón sobre ella. Si existe más de una en el formulario, permite la selección de más de una simultáneamente. No son mutuamente excluyentes.

Botón de radioSimilar a las casillas de verificación, pero sólo permite la selección de una de ellas entre todas las demás. Son mutuamente excluyentes.

Botón de envíoPulsando este botón se envían los datos del formulario al servidor o a la persona señalada.

Botón de borradoCon este botón se puede realizar la limpieza del formulario, borrando el contenido de cada elemento, para volver a introducir nuevos datos.

La etiqueta <INPUT> sirve para insertar cuadros de texto, casillas de verificación, botones de radio, botones de envío y de borrado, mientras que las áreas de texto se insertan mediante la etiqueta pareada <TEXTAREA> ... </TEXTAREA> y las listas de selección mediante <SELECT> ... </SELECT>.

La etiqueta <INPUT> puede llevar los siguientes atributos:

Atributo Descripcióntype Selecciona el tipo de campo de entrada. Es obligatorio.

nameDefine el nombre del identificador cuyo contenido será enviado. Es obligatorio.

value Inicializa el valor del campo.size Especifica el tamaño visible del texto.

maxlengthEspecifica el número máximo de caracteres en un campo de entrada de tipo texto.

checkedInicializa campos de entrada de tipo checkbox o radio buttons a su estado.

srcEspecifica el URL para la imagen a usar en el caso de un botón gráfico de envio de la información.

alignEspecifica el alineamiento , puede ser top, middle, bottom (por defecto), left o right.

text Valor por defecto. Muestra una línea de texto.

passwordIgual que text excepto que los caracteres introducidos son mostrados como *.

checkboxCasilla de verificación con dos estados (marcada o no). Es obligatorio el uso de VALUE para especificar el nombre de la variable y el valor que toma esta.

radio

Elementos que operan conjuntamente, sólo puede estar activado uno de ellos. es obligatorio del uso de VALUE. Se puede indicar que un valor es por defecto utilizando el atributo checked de la etiqueta INPUT.

submitDefine un botón que inicializa los datos al programa CGI. Debe existir siempre uno en cualquier formulario.

resetDefine un botón que envía los datos del formulario al valor por defecto.

fileDefine un método para poder escoger un fichero cuyo contenido será enviado como los datos proporcionados por el formulario.

hiddenNo son visibles y proporcionan un método de enviar información sobre el estado, etc., al programa del CGI.

image Permite definir un botón gráfico.

Vamos a ver como funcionan estos elementos más claramente utilizando el siguiente ejemplo:

<HEAD><TITLE> Formularios en HTML </TITLE></HEAD>

<BODY bgcolor="silver">

<CENTER><H1> FICHA DEL ALUMNO </H1></CENTER>

<FORM method="post" action="mailto:[email protected]" enctype="TEXT/PLAIN">

Nombre:<INPUT type="text" name="nombre" size="14" maxlength="25"><BR>Primer apellido:<INPUT type="text" name="apellido1" size="14" maxlength="25"><BR>Segundo apellido:<INPUT type="text" name="apellido2" size="14" maxlength="25"><BR><BR>

Curso:<BR>Primero<INPUT type="radio" name="curso" value="primero" CHECKED>Segundo<INPUT type="radio" name="curso" value="segundo">Tercero<INPUT type="radio" name="curso" value="tercero">Cuarto<INPUT type="radio" name="curso" value="cuerto"><BR><BR>

Asignatura preferida:<BR><INPUT type="checkbox" name="asignatura" value="informatica" CHECKED>Informática<INPUT type="checkbox" name="asignatura" value="tecno">Tecnología<INPUT type="checkbox" name="asignatura" value="mate">Matemáticas<INPUT type="checkbox" name="asignatura" value="caste">Castellano<BR><INPUT type="checkbox" name="asignatura" value="reli">Religión<INPUT type="checkbox" name="asignatura" value="edufis">E. Física<INPUT type="checkbox" name="asignatura" value="natu">Ciencias Naturales<INPUT type="checkbox" name="asignatura" value="valen">Valenciano<BR><INPUT type="checkbox" name="asignatura" value="ingles">Inglés<INPUT type="checkbox" name="asignatura" value="sociales">Ciencias Sociales<BR><BR>

<CENTER><INPUT type="submit" value="Enviar"><INPUT type="reset" value="Borrar"></CENTER>

</FORM>

</BODY>

</HTML>

El formulario que hemos creado es el siguiente:

Hemos utilizado casillas de verificación para la selección de la asignatura preferida. En general, si las opciones son muchas, es preferible utilizar en su lugar las listas de selección, que se definen mediante la etiqueta <SELECT> ... </SELECT>. Esto es importante, sobre todo, cuando podemos elegir varias opciones. La etiqueta <SELECT> tiene los siguientes atributos:

name. define el nombre del identificador cuyo contenido será enviado. Es obligatorio. size: define el número de elementos del menú desplegable que serán visibles al mismo tiempo. multiple: permite que se seleccionen más de un elemento del menú.

Cada uno de los elementos de la lista de selección son especificados por la etiqueta pareada <OPTION> ... </OPTION>, que posee dos atributos:

value: valor de la opción que se enviará si es seleccionado. selected: indica que es el valor seleccionado por defecto. Pueden existir varios si la opción multiple ha sido

seleccionada en el menú.

Veamos el mismo ejemplo de antes utilizando una lista de selección:

<HTML>

<HEAD><TITLE> Formularios en HTML </TITLE></HEAD>

<BODY bgcolor="silver">

<CENTER><H1> FICHA DEL ALUMNO</H1></CENTER>

<FORM method="post" action="mailto:[email protected]" enctype="TEXT/PLAIN">

Nombre:<INPUT type="text" name="nombre" size="14" maxlength="25"><BR>Primer apellido:<INPUT type="text" name="apellido1" size="14" maxlength="25"><BR>Segundo apellido:

<INPUT type="text" name="apellido2" size="14" maxlength="25"><BR><BR>Curso:<BR>Primero<INPUT type="radio" name="curso" value="primero" CHECKED>Segundo<INPUT type="radio" name="curso" value="segundo">Tercero<INPUT type="radio" name="curso" value="tercero">Cuarto<INPUT type="radio" name="curso" value="cuerto"><BR><BR>

Asignatura preferida:<BR><SELECT NAME="asignatura" SIZE="1"><OPTION value="informatica">Informática</OPTION><OPTION value="tecno">Tecnología</OPTION><OPTION value="mate">Matemáticas</OPTION><OPTION value="caste">Castellano</OPTION><OPTION value="reli">Religión</OPTION><OPTION value="edufis">E. Física</OPTION><OPTION value="natu">Ciencias Naturales</OPTION><OPTION value="valen">Valenciano</OPTION><OPTION value="ingles">Inglés</OPTION><OPTION value="sociales">Ciencias Sociales</OPTION></SELECT>

<BR><BR>

<CENTER><INPUT type="submit" value="Enviar"><INPUT type="reset" value="Borrar"></CENTER>

</FORM>

</BODY>

</HTML>

Si queremos permitir que se seleccionen varias opciones, hemos de utilizar el atributo multiple de la etiqueta <SELECT>, es decir, si en el código anterior cambiamos la línea que contiene esta etiqueta por

<SELECT NAME="asignatura" SIZE="6" MULTIPLE>

obtenemos una lista de selección múltiple como la siguiente:

En Internet Explorer, para seleccionar las diferentes opciones, hemos de mantener la tecla CONTROL presionada y pinchar en cada una de las opciones deseadas.

Por último vamos a ver las áreas de texto, que es similar a un cuadro de texto pero con la posibilidad de escribir más de una línea.

Las áreas de texto se definen utilizando la etiqueta pareada <TEXTAREA> ... </TEXTAREA>. Los atributos que usa esta etiqueta son distintos a los del resto de los elementos del formulario. Lo mejor es verlo con un ejemplo: añadimos el siguiente trozo de código al formulario anterior, después de la lista de selección:

Comentarios:<TEXTAREA name="comenta" rows="5" cols="30"></TEXTAREA><BR><BR>

Información recibida de un formulario

Todavía no sabemos cómo se muestra la información cuando el usuario pulsa el botón de envío y lo recibimos en nuestra cuenta de correo electrónico, como si se tratase de un mensaje más.

Presentación de formularios

Los formularios que hemos ido creando hasta ahora son más o menos complejos, pero carecen de una presentación “profesional”. La mejor forma de presentar al usuario un formulario de modo que tenga un aspecto más elaborado es mediante la utilización de tablas. Este aspecto lo trataremos más adelante, pero veamos ahora un ejemplo:

20- DHTML

Esta sección abandona lo que es propiamente el lenguaje HTML para ocuparse de una variante del mismo denominada DHTML (Dynamic Hypertext Markup Language). Existen textos completamente dedicados a esta variante del HTML así que no es posible entrar con detalle en las características del mismo en unas pocas páginas, de modo que sólo veremos los aspectos más generales para hacernos una idea de qué se trata y poder realizar algunas acciones con el mismo.

21- TRUCOS Y COMENTARIOS

El principal consejo que se puede dar a un creador de páginas Web es que pase muchas horas navegando por Internet. Hay miles de millones de páginas Web en las que los autores combinan y recombinan las etiquetas de HTML para crear diferentes estilos, efectos, aspectos, etc. Lo mejor que puede hacer alguien que pretenda convertirse en un diseñador experto es visitar las páginas más relacionadas con los temas que le interesen y consultar los códigos (cuando son públicos) para ir aprendiendo los diferentes trucos que darán un aspecto más profesional a sus creaciones.

Para ir abriendo boca, vamos a incluir a continuación una serie de trucos generales que nos permitan modificar el aspecto de nuestras páginas:

Columnas

En ocasiones nos interesará disponer el texto y las imágenes de nuestra página Web en forma de columnas, ya sea por el tipo de documento que estamos creando (revista, periódico electrónico) o, simplemente, por una cuestión de estilo.

Aunque Netscape admite actualmente la etiqueta <MULTICOL>, si queremos que nuestro página se vea igual en otros navegadores debemos emplear otra forma de crear las columnas.

La forma más sencilla de crear columnas es mediante el uso de tablas con una fila y varias columnas.

Encabezamientos lateralesFormularios con tablas anidadasInclusión de guíasEnlaces y ventanasImágenes transparentes (¿?)

22- ALGNUOS TRUCOS JAVASCRIPT Alertas (Pop up windows)Redireccionamiento automáticoScroll automáticoBotones InteractivosEfectos de ratón

imprimir el lenguage html

Documents