Tema 2 - Paginas Web · 2011-05-03 · que genera el contenido dinámico a partir de la...

ITSON Manuel Domitsu Kono

Tema 2 Páginas Web

La mayoría de las aplicaciones Web utilizan un navegador Web como un cliente ligero para que el usuario interactúe con la aplicación. Un navegador Web es una aplicación que el usuario utiliza para solicitar una página Web a un servidor de páginas Web. El servidor Web le envía la página Web al navegador quien procesa el contenido de la página y despliega el resultado. Un servidor Web es una aplicación o un módulo de software que recibe las peticiones de páginas Web de un navegador y se encarga de enviárselas. El contenido de una página Web puede ser estático o dinámico. Las páginas estáticas muestran el mismo contenido cada vez que son visualizadas, mientras que las páginas dinámicas pueden variar su contenido cada vez que son accedidas. Si la página solicitada es una página estática, el servidor Web busca la página en el sistema de archivos del servidor Web y la envía. Si la página solicitada es una página dinámica el servidor Web redirige la solicitud a un servidor de aplicaciones, que es una aplicación o un módulo de software que genera el contenido dinámico a partir de la información contenida en la solicitud, de la información del entorno o de información almacenada en archivos o tablas de una base de datos, lo formatea como una página Web y se lo envía al navegador. Una página Web es un documento que contiene texto plano llamado contenido y corresponde a la información que desplegará el navegador. La página Web también tiene incrustadas instrucciones escritas en el lenguaje HTML (lenguaje de marcación de hipertexto) o en su descendiente XHTML (lenguaje extensible de marcación de hipertexto) llamadas elementos HTML. Estos elementos HTML:

• Le sugieren al navegador como desplegar el contenido. • Hacen que el navegador le solicite al servidor contenido multimedia,

imágenes, audio o video; al recibirlo el navegador desplegará o reproducirá ese contenido.

• Hacen que el navegador ejecute código escrito en algún lenguaje de guiones: Javascript o VBScript; o applets escritos en Java.

• Hacen que el navegador le solicite al servidor otra página Web.

HTML y XHTML Los lenguajes HTML y XHTML definen la sintaxis y ubicación de los elementos HTML. Aunque HTML es perfectamente adecuado para la mayoría de los casos tiene ciertas limitaciones con ciertos formatos de documentos. Por esa

14 Páginas Web


razón se desarrolló XHTML. En términos generales XHTML es muy parecido a HTML aunque su sintaxis es más rigurosa. Conforme se estudie la sintaxis de los elementos HTML se indicará sus diferencias. Es importante notar que aunque los elementos de HTML permiten establecer la apariencia de los documentos, su énfasis es en la estructura, por ejemplo podemos establecer que cierto contenido (texto) aparezca como una tabla (estructura) y con cierto color y tipo de letra (apariencia). Sin embargo el uso de los elementos de HTML para definir la apariencia de HTML está desaprobado. Para establecer la apariencia de un documento se recomienda usar las hojas de estilo en cascada, CSS, las cuales se estudiarán en el Tema 3: Hojas de Estilo en Cascada.

Caracteres y Entidades en HTML y XHTML En una página Web:

• Son válidos todos los caracteres incluidos en ISO Latín 1 (ISO 8859-1). • El formato es libre. El formato introducido en el archivo fuente (saltos de

línea, líneas en blanco, etc.) es irrelevante para el formato final del documento.

• Hay caracteres que tienen un significado especial dentro de la sintaxis de los elementos HTML y por lo tanto no pueden formar parte del contenido de una página Web, de ser necesario utilizarlos, se sustituyen por su entidad, que es una secuencia de caracteres que representan a ese carácter especial. Algunos de esos caracteres especiales y su entidad se muestran en la tabla 2.1:

Tabla 2.1. Algunos caracteres especiales y sus entidades

Carácter Entidad Carácter Entidad& & é é < < í í > > ó ó ñ ñ ú ú á á Espacio &nbsp

Sintaxis de los Elementos HTML La sintaxis general de un elemento HTML es la siguiente: etiquetaInicio [[contenido] etiquetaFinal] donde etiquetaInicio es la etiqueta de inicio del elemento y etiquetaFinal es la etiqueta final del elemento. Sus sintaxis son las siguientes:

<identificador [atributos]> </identificador>

Tema 2 Páginas Web 15


donde identificador es el nombre del elemento y atributos es una lista de los atributos deseados para esa etiqueta. HTML no hace distinción entre mayúsculas y minúsculas en los nombres de los elementos y de sus atributos, mientras que en XHTML se deben escribir en minúsculas. contenido Es el contenido de un elemento y puede ser texto u otro elemento. Un elemento con contenido es un contenedor.

• Algunos elementos, llamados elementos vacíos, no tienen contenido. • En HTML, los elementos vacíos no llevan etiqueta final. • En XHTML todos los elementos, aún los elementos vacíos requieren una

etiqueta final. Para un elemento vacío, podemos sustituir la sintaxis:

<identificador [atributos]></identificador>

por la siguiente:

<identificador [atributos] />

• La etiqueta final de un elemento interno a otro elemento debe ir antes de la etiqueta final del elemento externo.

Atributos Un atributo es una propiedad de un elemento. Su sintaxis es la siguiente:

[identificador=]"valor" donde identificador es el nombre del atributo y valor es una constante numérica o una cadena.

• En HTML, si el valor de un atributo sólo contienen letras, números, puntos o guiones no requiere ir encerrado entre comillas o apostrofes, de otro modo sí. En XHTML los valores de los atributos deben ir entre comillas o entre apóstrofes.

• Algunos atributos juegan el papel de variables booleanas, esto es, si su

valor aparece, significa que el valor del atributo es verdadero. Su ausencia implica el valor de falso. Por ejemplo el elemento <option> tiene la siguiente sintaxis:

<option value="texto" [selected="selected"] [disabled="disabled"]> opción </option>

Los atributos selected y disabled representan ese tipo de atributos. En HTML se puede omitir el nombre del atributo y escribir sólo su valor: <option value="texto" [selected] [disabled]>

16 Páginas Web


opción </option>

En XHTML, sin embargo, debe escribirse tanto el nombre del atributo como su valor.

Atributos Genéricos Todos los elementos HTML del cuerpo de un documento tienen un conjunto de atributos llamados genéricos, los cuales se muestran en la tabla 2.2:

Tabla 2.2 Atributo Genéricos de los Elementos HTML Atributo Descripción Valores Descripción id Estable un nombre único dentro

del documento para el elemento. El nombre puede ser usado como un selector en una hoja de estilos, como destino de una hipervínculo, etc.

nombre Nombre del elemento.

class Establece uno o más nombres de clases al elemento. Se dice que el elemento pertenece a esas clases. Varios elementos pueden compartir el mismo nombre de clase. El nombre puede ser usado como un selector en una hoja de estilos.

clase [clase]... Lista de los nombres de clase

style Establece la información de estilo para el elemento.

declaración [; declaración] ...

Lista de las declaraciones de estilo del elemento.

Comentarios Texto introducido en un documento que no aparece en el formato final. Sirve para propósitos de documentación. Su sintaxis es:



• Note que hay dos guiones tanto al inicio como al final de los

comentarios.

• El comentario no debe contener los caracteres "--" ni ">"

Estructura de un Documento HTML o XHTML Un documento HTML tiene la siguiente sintaxis:

<html>



cabecera cuerpo

</html>

Todo el documento HTML está contenido en el elemento <html>, que a su vez contiene dos elementos: La cabecera y el cuerpo.

Cabecera El elemento cabecera o cabecera contiene información general acerca del documento. Su sintaxis es:

<head> elementos de cabecera

</head>

• La información de cabecera está contenida en una serie de elementos llamados elementos de cabecera.

• Todos los elementos son opcionales y pueden aparecer en cualquier orden.

• Los elementos de cabecera no deben ser desplegados por el navegador.

Elementos de Cabecera Dos de los elementos de cabecera son:

URL Base Define el url base para todos los hipervínculos relativos de la página. Su sintaxis es:

<base href="urlBase" /> La tabla 2.3 muestra el significado y valor del atributo href del elemento base:

Tabla 2.3 Atributo href del Elemento <base> Atributo Descripción Valores Descripción

href Establece el url base para todas las ligas de una página.

urlBase URL que sirve de base para todas las URLs relativas en esta página.

Título del Documento Establece el título de la página. Normalmente se despliega en la barra de título del navegador. Su sintaxis es: <title>Título</title> donde Título es el título del documento.

18 Páginas Web


Cuerpo Es el contenedor de la información propia del documento, la información que será desplegada en el navegador y los elementos que darán formado a esa información. Su sintaxis es:

<body [background=”imgFondo”] [bgcolor =”color”] [text ="color"] [link ="color"] [vlink ="color"] [alink ="color"] > [encabezados]

[elementos de flujo de texto] [elementos para especificar el significado del texto] [elementos para especificar la apariencia del texto] [elementos para el control de fuentes texto] [línea horizontal e imágenes] [hipervínculos] [listas] [tablas] [formularios] [scripts] [applets] ...

</body>

La tabla 2.4 muestra el significado y valor de los atributos del elemento body:

Tabla 2.4 Atributos del Elemento <body> Atributo Descripción Valores Descripción

background Establece la imagen que se usará como fondo de la página. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

imgFondo URL de la imagen.

bicolor Establece el color que se usará como fondo de la página. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

color El valor del color está en el formato RGB.

text Establece el color del texto del documento. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.


link Establece el color que tendrán los hipervínculos de la página. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.


vlink Establece el color que tendrán los hipervínculos de la página que ya han sido visitados. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.


alink Establece el color que tendrán un hipervínculo activo (aquel que haya sido seleccionado. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.


Color



El valor de los atributos que representan un color se especifica en el formato RGB que es un valor hexadecimal de 6 dígitos con la siguiente sintaxis:

#rrggbb donde rr, gg, bb son secuencias hexadecimales de dos caracteres que representan las componentes roja, verde y azul del color. El valor para rr, gg, bb está en el rango 00 a FF (0 a 255). Nota: Los 16 colores de la paleta estándar VGA pueden especificarse, además de por su valor RGB, mediante una constante simbólica. Los valores de esas constantes simbólicas y sus equivalentes RGB están dados en la tabla 2.5:

Tabla 2.5 Colores de la paleta estándar VGA y su valor RGB Nombre Valor Nombre Valor Nombre Valor Nombre Valor Black #000000 Maroon #800000 Green #008000 Navy #000080Silver #C0C0C0 Red #FF0000 Lime #00FF00 Blue #0000FFGray #808080 Purple #800080 Olive #808000 Teal #008080White #FFFFFF Fuchsia #FF00FF Yellow #FFFF00 Aqua #00FFFF

Elementos del Cuerpo del Documento Los elementos del cuerpo del documento pueden ir en el orden que se desee y repetirse las veces que se desee.

Encabezados Este elemento permite escribir encabezados. Existen 6 niveles de encabezados. Su sintaxis es:

<hn [align="{left|center|right|justify}"]>encabezado</hn> donde n es el nivel del encabezado encabezado: 1 .. 6. El formato en que se visualizan los encabezados depende de su nivel, variando:

• Tamaño de la letra • Tipo de resaltado • Líneas a saltar antes y después del texto.

La tabla 2.6 muestra el significado y valor del atributo Align del elemento encabezado:

Tabla 2.6 Atributo align de los Elementos <hn>, <div>, <p> y <span> Atributo Descripción Valores Descripción align Establece la alineación del left Alinea el texto a la izquierda. Es el

20 Páginas Web


valor por ausencia. center Centra el texto. right Alinea el texto a la derecha.

texto en el encabezado. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

justify Ajusta el texto a ambos márgenes. El siguiente código es una página Web que muestra los diferentes tipos de encabezados:

encabezados.html <html> <head> <title>Encabezados</title> <head> <body> <h1 align="center">Encabezado de nivel 1, centrado</h1> <h2 align="center">Encabezado de nivel 2, centrado</h2> <h3> Encabezado de nivel 3, alineado a la izquierda, por ausencia </h3> <h4 align="left"> Encabezado de nivel 4, alineado a la izquierda </h4> <h5 align="right"> Encabezado de nivel 5, alineado a la derecha </h5> <h6 align="justify"> Encabezado de nivel 6, justificado. Texto muy largo, texto muy largo, texto muy largo, texto muy largo, texto muy largo, texto muy largo, texto muy largo, texto muy largo, texto muy largo, texto muy largo, texto muy largo </h6> </body> </html>

La figura 2.1 muestra la página Web Encabezados.html en un navegador:

Elementos de Flujo de Texto Definen la alineación y el flujo de texto. Hay cuatro elementos: División, párrafo, segmento de texto y nueva línea.

División El elemento división permite dividir un documento en partes separadas y distintas. Puede usarse para organizar el documento y para controlar la alineación de las diferentes partes del documento La sintaxis del elemento división es:



Figura 2.1. Encabezados de HTML

<div [align="{left|center|right|justify}"]>

bloques de texto </div>

La tabla 2.6 muestra el significado y valor del atributo Align del elemento grupo de bloques.

Párrafo Define un párrafo de texto. Normalmente los navegadores despliegan una línea en blanco antes y después de cada párrafo. Su sintaxis es:

<p [align="{left|center|right|justify}"]> párrafo

</p>

La tabla 2.6 muestra el significado y valor del atributo Align del elemento párrafo. El siguiente código es una página Web que muestra los diferentes tipos de párrafos:

parrafos.html <html> <head> <title>Párrafos</title>

22 Páginas Web


<head> <body> <p>Párrafo sin atributos</p> <p align="center">Párrafo centrado</p> <p align="right">Párrafo justificado a la derecha</p> <p align="left">Párrafo justificada a la izquierda</p> </body> </html> La figura 2.2 muestra la página Web Encabezados.html en un navegador:

Figura 2.2. Párrafos de HTML

Segmento de texto Permite seleccionar una porción de texto, para asignarle una propiedad como la alineación. Su sintaxis es:

<span align="{left"|"center"|"right"|"justify}"> texto

</span>

La tabla 2.6 muestra el significado y valor del atributo Align del elemento bloque de texto.

Nueva Línea Fuerza una nueva línea de texto independientemente del formato en que se este trabajando. Su sintaxis es:

<br [clear="{left|right|all}"]>



en HTML, y

<br [clear="{left|right|all}"] /> en XHTML. La tabla 2.7 muestra el significado y valor del atributo Align del elemento bloque de texto.

Tabla 2.7 Atributo clear del Elemento <br> Atributo Descripción Valores Descripción

left La nueva línea empieza debajo de la imagen o tabla de la izquierda.

right La nueva línea empieza debajo de la imagen o tabla de la derecha.

clear Fuerza la nueva línea de texto por debajo de la imagen o tabla que se encuentra a la izquierda, a la derecha o a ambos lados.

all La nueva línea empieza debajo de las imágenes o tablas ya sea de la izquierda o la derecha.

El siguiente código es una página Web que muestra el uso del elemento <br>:

nuevaLinea.html <html> <head> <title>Nuevas Líneas</title> <head> <body> <p>Esta es la primera línea del párrafo.<br /> Esta es la segunda fila del párrafo.</p> <img src="pullcart_library_book_open_md_wht.gif" align="left"/> <p>Esta línea está enseguida de la imagen de la izquierda.<br /> Esta línea también está enseguida de la imagen de la izquierda.<br clear="left" /> Esta línea está por debajo de la imagen de la izquierda</p> </body> </html>

La figura 2.3 muestra la página Web nuevaLinea.html en un navegador:

Elementos para especificar el significado del texto Este grupo de elementos le informan al navegador que el contenido de estos elementos tiene un significado, contexto u uso específico. El navegador formatea el texto de forma consistente con significado, contexto u uso. Los diferentes elementos para especificar el significado del texto se presentan en la tabla 2.8:

24 Páginas Web


Figura 2.3. Saltos de Línea en HTML

Tabla 2.8. Elementos Para Especificar el Significado del Texto.

Sintaxis Descripción Despliegue Normal <abbr>texto</abbr> Indica que texto es una

abreviatura. - <acronym>texto</acronym> Indica que texto es un acrónimo. - <cite>texto</cite> Indica que texto es una cita

bibliográfica. Cursiva

<code>texto</code> Indica que texto representa código fuente de un programa. Monoespaciada

<dfn>texto</dfn> Indica que texto es una definición de un término o frase. Cursiva

<em>texto</em> Indica que texto debe enfatizarse. Cursiva

<kbd>texto</kbd> Indica que texto debe teclearse en un teclado. Monoespaciada

<strong>texto</strong> Indica que texto debe enfatizarse con mayor fuerza. Negrita

<var>texto</var> Indica que texto es un nombre de una variable o un valor suministrado por el usuario.

Cursiva

Elementos para especificar la apariencia del texto Este grupo de elementos le indican al navegador como desplegar el contenido de estos elementos. Se recomienda utilizar los elementos para especificar el significado del texto en lugar de los elementos para especificar la apariencia. Los diferentes elementos para especificar la apariencia del texto se presentan en la tabla 2.9:



Tabla 2.9. Elementos Para Especificar la Apariencia del Texto. Sintaxis Descripción Despliegue Normal

<b>texto</b> Despliega el texto en negritas Negrita

<big>texto</big>

Despliega el texto en una fuente de un tamaño mayor que el texto adyacente. Si el texto ya se encuentra en el tamaño más grande se ignora al elemento. Pueden anidarse elementos <big> para obtener tamaños mayores de las fuentes.

Letras un tamaño mayor

<i>texto</i> Despliega el texto en cursiva. Cursiva <s>texto</s> <strike>texto</strike>

Despliega el texto tachado. Su uso está desaprobado. Letras tachadas

<small>texto</small>

Despliega el texto en una fuente de un tamaño menor que el texto adyacente. Si el texto ya se encuentra en el tamaño más pequeño se ignora al elemento. Pueden anidarse elementos <small> para obtener tamaños menores de las fuentes.

Letras un tamaño menor

<sub>texto</sub> Despliega el texto como subíndice. Subíndices

<sup>texto</sup> Despliega el texto como superíndice. Superíndices

<tt>texto</tt> Despliega el texto en una fuente monoespaciada. Monoespaciada

<u>texto</u> Despliega el texto subrayado. Su uso está desaprobado. Letras subrayadas

Elementos de control de las fuentes de texto Fuente Base Establece el tamaño base de la fuente que el navegador usará para desplegar el texto. Su uso está desaprobado. Se prefiere el uso de hojas de estilo. Su sintaxis es:

<basefont [size="tamaño"] [color="color"] [face="nombre"]> texto </basefont>

La tabla 2.10 muestra el significado y valor de los atributos del elemento fuente base:

Tabla 2.10 Atributos de los Elementos <basefont> y <font> Atributo Descripción Valores Descripción size Establece el tamaño de

la fuente. tamaño 1 a 7, siendo 3 el tamaño por

ausencia. color Establece el color de la

fuente. color Color de la fuente en formato

RGB. face Establece la fuente a

utilizar. lista de nombres de fuentes

Utiliza la primera fuente de la lista que soporte el navegador. Si no soporta ninguna, utiliza la

26 Páginas Web


separadas por comas

fuente por omisión del navegador.

Fuente Actual Establece las propiedades del tipo de letra: tamaño, color fuente. Su uso está desaprobado. Se prefiere el uso de hojas de estilo. Su sintaxis es:

<font [size="tamaño"] [color="color"] [face="nombre"]> texto </font>

La tabla 2.10 muestra el significado y valor de los atributos del elemento fuente actual.

Línea Horizontal Dibuja una línea horizontal. Su sintaxis es:

<hr [width="ancho"] [align="{left|center|right}"] [size="grosor"] [color="color"] [noshade]>

en HTML, y

<hr [width="ancho"] [align="{left|center|right}"] [size="grosor"] [color="color"] [noshade="noshade"] />

en XHTML. La tabla 2.11 muestra el significado y valor de los atributos del elemento línea horizontal:

Tabla 2.11 Atributos del Elemento <hr> Atributo Descripción Valores Descripción

ancho Ancho de la línea en pixeles. width Establece el ancho de la línea horizontal. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

ancho% Ancho de la línea en porcentaje del ancho de la página.

left Alinea la línea a la izquierda. center Centra la línea. Es el valor por

ausencia.

align Alinea la línea. Sólo es útil si se usa con el atributo width. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

right Alinea la línea a la derecha.

size Establece el grueso de la línea horizontal. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

grosor Grosor de la línea en pixeles.

color Establece el color de la línea horizontal. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.




noshade Por omisión la línea horizontal tienen un efecto tridimensional. Si el atributo noshade existe, la línea horizontal aparece con un efecto en dos dimensiones.

"noshade” El valor sólo se escribe en XHTML.

El siguiente código es una página Web que muestra los diferentes tipos de líneas horizontales:

lineas.html <html> <head> <title>Líneas horizontales</title> <head> <body> <p>Línea horizontal sin atributos</p> <hr /> <p>Línea horizontal que ocupa el 80% del ancho de la ventana del navegador y un grosor de 10 pixeles</p> <hr width="80%" size="10" /> <p>Línea horizontal que ocupa el 80% del ancho de la ventana del navegador, un grosor de 10 pixeles y sin efecto tridimensional</p> <hr width="80%" size="10" noshade="noshade" /> <p>Línea horizontal de 500 pixeles de ancho, justificada a la derecha, un grosor de 20 pixeles, de color rojo</p> <hr width="500" align="right" size="20" color="red" /> <p>Línea horizontal que ocupa el 60% del ancho de la ventana del navegador, justificada a la izquierda, un grosor de 10 pixeles y color verde</p> <hr width="60%" align="left" size="20" color="green" /> </body> </html> La figura 2.4 muestra la página Web nuevaLinea.html en un navegador:

Imágenes Si se quiere agregar una imagen a una página Web, no se incrusta en el documento HTML/XHTML la imagen. En lugar de ello se incrusta, en el lugar donde queremos la imagen, el elemento HTML <img> que establece el URL del archivo que contiene la imagen y otros atributos que definen como se desplegará la imagen. Cuando el navegador procesa el documento HTML y se encuentra el elemento <img> le solicita al servidor que le envíe la imagen y la despliega en el lugar donde se encuentra el elemento <img>. La sintaxis del elemento <img> es:

28 Páginas Web


Figura 2.4. Saltos de Línea en HTML

<img scr="url" alt="texto" [align="{top|middle|bottom|left|right}"]

[border="grueso"] [width="ancho"] [height="alto"] [hspace="valor"] [vspace="valor"] [usemap="url"] > en HTML, y

<img scr="url" [alt="texto"] [align="{top|middle|bottom|left|right}"]

[border="grueso"] [width="ancho"] [height="alto"] [hspace="valor"] [vspace="valor"] [usemap="url"] /> en XHTML. La tabla 2.12 muestra el significado y valor de los atributos del elemento imagen:

Tabla 2.12 Atributos del Elemento <img>



Atributo Descripción Valores Descripción scr Establece el archivo que

contiene la imagen url URL, absoluta o relativa, del archivo

que contiene la imagen alt Establece un texto, de hasta

1024 caracteres, a desplegar si no se encuentra la imagen

texto Texto a desplegar si no se encuentra la imagen

top La parte superior de la imagen se alinea con la parte superior del texto

middle La imagen se centra con respecto al texto

bottom La imagen se alinea con la parte inferior del texto

left La imagen se alinea a izquierda y es rodeada por el texto

align Alineación de la imagen respecto a la base de la línea actual. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

right La imagen se alinea a derecha y es rodeada por el texto

border Establece un borde alrededor de la imagen. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

grueso Grueso del borde en pixeles

ancho Ancho en pixeles width Establece el ancho de la imagen. Es recomendable ancho% Ancho en porcentaje del espacio

disponible para la imagen alto Ancho en pixeles height Establece el alto de la imagen alto% Ancho en porcentaje del espacio

disponible para la imagen hspace Establece el espacio

horizontal entre la imagen y el texto. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

valor Valor en pixeles

vspace Establece el espacio vertical entre la imagen y el texto. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

valor Valor en pixeles

usemap Asocia esta imagen con un mapa de navegación dado por el elemento <map>. El mapa de navegación le asigna un hipervínculo a cada porción de la imagen. Hacer clic sobre un punto de la imagen equivale a hacer clic sobre el hipervínculo asociado. El uso de este atributo se verá cuando se vea el elemento <map>.

url URL, absoluta o relativa, del elemento <map>. El identificador de fragmento del URL dado por el atributo usemap deberá ser el mismo que valor del atributo name del elemento <map> asociado.

El siguiente código es una página Web que muestra algunas variantes del uso del elemento <img>:

imagenes1.html

30 Páginas Web


<html> <head> <title>Imágenes1</title> <head> <body> Imagen con atributos por omisión: <img src="email.gif" alt="e-mail" /> <br /> <p>Imagen inexistente y borde</p> <img src="persona.gif" alt="e-mail" border="1"/> <br /> <p>Imagen con atributos de dimensiones</p> <img src="email.gif" alt="e-mail" width="100" height="62" /> <br /> <p>Imagen ampliada</p> <img src="email.gif" alt="e-mail" width="200" height="124" /> </body> </html>

La figura 2.5 muestra la página Web imagenes1.html en un navegador:

Figura 2.5. Página imagenes1.html en un navegador.

El siguiente código es una página Web que muestra algunas imágenes con alineación superior e inferior:

imagenes2.html



<html> <head> <title>Imágenes2</title> <head> <body> Imagen con alineación superior y texto a la izquierda <img src="email.gif" alt="e-mail" width="100" height="62" align="top"/> <br /> <br /> <img src="email.gif" alt="e-mail" width="100" height="62" align="top"/> Imagen con alineación superior y texto a la derecha <br /> <br /> Imagen con alineación inferior y texto a la izquierda <img src="email.gif" alt="e-mail" width="100" height="62" align="bottom"/> <br /> <br /> <img src="email.gif" alt="e-mail" width="100" height="62" align="bottom"/> Imagen con alineación inferior y texto a la derecha </body> </html>



El siguiente código es una página Web que muestra algunas imágenes con alineación central, izquierda y derecha:

imagenes3.html

32 Páginas Web


<html> <head> <title>Imágenes3</title> <head> <body> Imagen con alineación media y texto a la izquierda <img src="email.gif" alt="e-mail" width="100" height="62" align="middle"/> <br /> <img src="email.gif" alt="e-mail" width="100" height="62" align="middle"/> Imagen con alineación media y texto a la derecha <br /> <br /> <img src="email.gif" alt="e-mail" width="100" height="62" align="left"/> Imagen con alineación izquierda <br clear="left"/> <img src="email.gif" alt="e-mail" width="100" height="62" align="right"/> Imagen con alineación derecha </body> </html>



Localizador Uniforme de Recursos (URL)



Como ya se mencionó, el navegador Web le solicita a un servidor Web un recurso: Documento, imagen, audio, etc. El servidor se lo envía y el navegador lo despliega o reproduce. Cada uno de los recursos en Internet tiene un identificador único que lo distingue de otro recurso en Internet. Este identificador único se conoce como Localizador Uniforme de Recursos (URL). Hay varios tipos de URLs:

URL http Este URL se usa para acceder documentos de un servidor Web. Su sintaxis es la siguiente:

http://[servidor][:puerto]/[ruta][nomArch][#fragmento] donde:

• servidor: es el nodo de la red en que se encuentra dicho objeto. • puerto: es el puerto en el que escucha el servidor Web. Si se omite el

puerto se tomaría el válido por ausencia: 80. • ruta: es la trayectoria dentro del nodo, del archivo físico que contiene el

objeto. • nomArch: nombre del archivo físico que contiene el objeto. • fragmento: es un identificador que apunta a una sección específica

dentro de un documento. El identificador de fragmento le dice al navegador que empiece a desplegar el documento a partir de esa sección. Este identificador se inserta en el documento usando el atributo name del elemento <a>, como se verá más adelante o el atributo id de cualquier elemento.

URL para Archivos Este URL se usa para acceder archivos en una computadora sin especificar el protocolo empleado para recuperar el archivo. Se limita a una red de área local. Su sintaxis es la siguiente:

file://[ servidor]/[ruta][nomArch] donde :

• servidor: es el nodo de la red en que se encuentra dicho objeto. Si se omite, se entiende que es la computadora del cliente. Podemos utilizar el identificador: localhost.

• ruta: es la trayectoria dentro del nodo, del archivo físico que contiene el objeto.

• nomArch: nombre del archivo.

URL para Correo Electrónico

34 Páginas Web


Este URL se usa para indicarle al navegador que invoque al cliente de correos para enviar un correo al destinatario. Su sintaxis es la siguiente:

mailto://destinatarios[?subject=asunto] donde :

• destinatarios: es la lista de destinatarios del correo separados por comas.

• asunto: es campo asunto dentro del encabezado de un correo electrónico.

• nomArch: nombre del archivo.

Caracteres Reservados y No Seguros Es un URL sólo podemos utilizar caracteres del conjunto imprimible de caracteres del código ASCII. Si deseamos utilizar algún carácter del conjunto de caracteres del código ASCII extendido tendremos que reemplazar ese carácter por el código ASCII de ese carácter en hexadecimal precedido de un signo de porcentaje (%). Adicionalmente existe una serie de caracteres que tienen un uso reservado dentro de un URL y otros caracteres que tienen un significado especial en el contexto en el que se usan las URL y que no son seguros de usar como parte de una URL. Esos caracteres deben reemplazarse por una codificación URL. La tabla 2.13 muestra la lista de caracteres reservados y no seguros y su codificación.

Tabla 2.13 Lista de Caracteres Reservados y No Seguros y su Codificación.

Carácter Uso Codificación Carácter Uso Codificación ; Reservado %3B % No Seguro %25 / Reservado %2F { No Seguro %7B ? Reservado %3F } No Seguro %7D : Reservado %3ª | No Seguro %7C @ Reservado %40 \ No Seguro %5C = Reservado %3D ^ No Seguro %5E & Reservado %26 ~ No Seguro %7E < No Seguro %3C [ No Seguro %5B > No Seguro %3E ] No Seguro %5D " No Seguro %22 ‘ No Seguro %60 # No Seguro %23

URLs Absolutas Es un URL que contiene todos los elementos de su sintaxis, esto es, es el nombre completo del recurso. Por ejemplo:

http://www.itson.mx/die/mdomitsu/tema1.pdf

URLs Relativas



Es un URL de un objeto cuya dirección se establece con referencia a la dirección de la página actual. Por ejemplo el siguiente URL:

imagenes/fondogris.gif establece que la imagen fondogris.gif se encuentra en el directorio imágenes que a su vez está en el mismo directorio donde se encuentra la página actual.

Hipervínculos Una de las características más importantes de HTML es que permite ligar un documento con otro, mediante hipervínculos. Un hipervínculo es la conexión a un recurso de la Web (una imagen, un video, un programa, un documento HTML, etc.). Un hipervínculo tiene dos extremos, llamados anclas y una dirección. El hipervínculo empieza en el ancla origen y apunta al ancla destino que es cualquier recurso en la Web. En el caso de que el destino sea un documento HTML/XHTML el ancla destino puede ser un elemento dentro del documento. En este caso, al elemento dentro del documento debe dársele un nombre único, llamado identificador de fragmento, dentro del documento. El elemento <a> de HTML permite establecer el ancla origen de un hipervínculo. Su sintaxis es: <a href="url">{texto|imagen}</a> donde texto|imagen es el texto o imagen que aparece como hipervínculo. La imagen se especifica mediante el elemento <img> vista en el subtema anterior. La tabla 2.14 muestra el significado y valor del atributo href:

Tabla 2.14 Atributo href del Elemento <a> Atributo Descripción Valores Descripción href Establece el recurso Web a vincular. url URL del recurso a vincular Hay dos formas de establecer el ancla destino, si ésta se encuentra dentro de un documento. La primera, utiliza otra variante del elemento <a> cuya sintaxis es: <a name="fragmento">texto</a> donde texto es el texto que será el ancla destino del hipervínculo. La tabla 2.15 muestra el significado y valor del atributo name:

Tabla 2.15 Atributo name del Elemento <a> Atributo Descripción Valores Descripción name Define una ancla destino

dentro de un documento. fragmento Identificador de fragmento.

Nombre del elemento dentro del documento a vincular.

36 Páginas Web


La segunda forma de establecer un ancla destino es dándole al atributo id del elemento destino el valor del identificador de fragmento, de la siguiente manera:

<elemento id="fragmento" ...>contenido</elemento> Por ejemplo el siguiente código muestra diferentes hipervínculos y marcadores:

ligas.html <html> <head> <title>Ejemplo de Hipervínculo 1</title> </head> <body> <p>Este es un <a href="#marcador1.1">hipervínculo</a> a un marcador dentro de este documento</p> <p>Este es un <a href="#tabla1">hipervínculo</a> a un elemento dentro de este documento</p> <p>Este es un <a href="ligas2.htm">hipervínculo</a> a otro documento</p> <p>Este es un <a href="ligas2.htm#marcador2">hipervínculo</a> a un marcador dentro de otro documento</p> <p>Este es un <a href="ligas2.htm#tabla2">hipervínculo</a> a un elemento dentro de otro documento</p> <p>Este es un <a name="marcador1.1">destino</a> de un hipervínculo.</p> <table align="center" border="1" id="tabla1"> <caption align="top"> Tabla1. Destino de un hipervínculo </caption> <tr> <th align="center">Columna 1</th> <th align="center">Columna 2</th> </tr> <tr> <td align="center">1</th> <th align="center">2</th> </tr> <tr> <th align="center">3</th> <th align="center">4</th> </tr> </table> </body> </html>



Mapas de Imágenes HTML/XHTML permite empotrar varios hipervínculos a una imagen. Al hacer clic en diferentes regiones de la imagen hace que el navegador invoque diferentes documentos. Para que una imagen sea utilizada como un mapa de imagen, su elemento <img> debe de establecer el atributo usemap para nombrar al elemento <map> que tendrá el mapa de navegación.

Mapa de Navegación Un mapa de navegación permite definir un conjunto de regiones de una imagen y los hipervínculos a invocar cuando se hace clic en cada región. Su sintaxis es:

<map name="fragmento">lista de regiones</map> La tabla 2.16 muestra el significado y valor del atributo name:

Tabla 2.16 Atributo name del Elemento <map> Atributo Descripción Valores Descripción name Define el nombre del mapa

de navegación. fragmento Identificador de fragmento. Nombre

del mapa de navegación. Cada una de las regiones de un mapa y su hipervínculo asociado tiene la siguiente sintaxis:

<area alt="texto" shape="forma" coords="coordenadas" {href="url" | nohref}>

en HTML, y

<area alt="texto" shape="forma" coords="coordenadas" {href="url" | nohref="nohref"} />

en XHTML. La tabla 2.17 muestra el significado y valor de los atributos del elemento <area>:

Tabla 2.17 Atributos del Elemento <area> Atributo Descripción Valores Descripción

alt Establece el texto a desplegar en la región si no se encuentra la imagen

texto Texto a desplegar si no se encuentra la imagen

circ La región es de forma circular.

poly La región tiene forma de un polígono.

shape Define la forma de la región de la imagen

rect La región es de forma rectangular.

coords Define la forma de la región de la imagen

x, y, r Coordenadas del centro del círculo y su radio para

38 Páginas Web


una región de forma circular.

x1, y1, x2, y2,...

Coordenadas de los vértices, para una región que tiene forma de un polígono.

x1, y1, x2, y2

Coordenadas de dos de las esquinas diagonalmente opuestas, para una región de forma rectangular.

href Establece el recurso Web a vincular cuando se hace clic en la región.

url URL del recurso a vincular

nohref Establece que para esta región no se va a tomar una acción. Debe incluirse ya sea un atributo href o un atributo nohref para cada elemento <area>

nohref El valor sólo se escribe en XHTML.

El siguiente código es un ejemplo de mapas de imagenes:

mapa.html <html> <head> <title>Mapa de Imagenes</title> <head> <body> <img alt="menu" src="menu.gif" width="135" height="300" usemap="#menu" border="0" /> <map name="menu"> <area alt="Inicio" shape="rect" coords="0, 0, 135, 30" href="index.html" /> <area alt="Programa" shape="rect" coords="0, 31, 135, 60" href="programa.html" /> <area alt="Conferencias" shape="rect" coords="0, 61, 135, 90" href="conferencias.html" /> <area alt="No" shape="rect" coords="0, 91, 135, 150" nohref="index.html" /> </map> </body> </html>

Listas Listas de elementos. Los elementos de la lista se sangran.

Lista sin Ordenar Cada elemento de la lista comienza por una viñeta. Su sintaxis es:

<ul [type="{disc|square|circle}"]> lista de elementos

</ul>



La tabla 2.18 muestra el significado y valor de los atributos del elemento lista sin ordenar:

Tabla 2.18 Atributo type del Elemento <ul> Atributo Descripción Valores Descripción

disc (Valor por ausencia)

• viñeta en forma de disco

square viñeta en forma de cuadrado

type Establece el tipo de viñeta. Su uso está desaprobado. Se prefiere el uso de hojas de estilo

circle o viñeta en forma de círculo

Lista Ordenada Cada elemento de la lista comienza por un carácter de numeración. Su sintaxis es:

<ol [type="{1|i|I|a|A}" start="inicio"]> lista de elementos

</ol>

La tabla 2.19 muestra el significado y valor de los atributos del elemento lista ordenada:

Tabla 2.19 Atributos del Elemento <ol> Atributo Descripción Valores Descripción

1 (Valor por omission)

1, 2, 3...

i i, ii, iii, ... I I, II, III, ... a a, b, c, ...

type Establece el tipo de carácter de numeración. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

A A, B, C,... stara Valor con el que se inicializa la lista.

Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

inicio Un entero. El valor por ausencia es 1.

Elementos de Listas sin ordenar y ordenadas Establece un elemento de una lista sin ordenar u ordenadas. Su sintaxis es:

<li [value="valor"]> elemento

</li>

La tabla 2.120 muestra el significado y valor del atributo valor del elemento de una lista ordenada:

Tabla 2.20 Atributo value del Elemento <li> de una lista ordenada Atributo Descripción Valores Descripción value Valor asignado a este elemento de la lista.

Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

valor Un entero.

El siguiente código es una página Web que muestra listas sin ordenar y ordenadas:

40 Páginas Web


listas.html

<html> <head> <title>Listas Ordenadas y Sin Ordenar</title> <head> <body> <h2 align="center">Omelet de Queso</h2> <h3 align="center">Ingredientes</h3> <ul type="square"> <li>2 Huevos</li> <li>1 Cucharada de agua</li> <li>2 Rebanadas de queso Chihuahua</li> <li>Sal y pimienta</li> </ul> <h3 align="center">Preparación</h3> <ol type="i"> <li>Bata los 2 huevos con la cucharada de agua, sal y pimienta </li> <li>Cocine por un lado hasta que esté cocido</li> <li>Volteé y coloque el queso encima</li> <li>Cuando este cocido del segundo lado, doble en dos</li> </ol> </body> </html>

La figura 2.8 muestra la página Web listas.html en un navegador:

Listas de Definiciones Permiten la creación de glosarios, lista de términos o cualquier lista del tipo nombre/valor. Su sintaxis es:

<dl> término definición [término definición]...

</dl>

Cada uno de los elementos de una lista de definiciones consta de un término seguido de una definición.



Figura 2.8 Listas ordenadas y no ordenadas en HTML

Término de una Lista de Definiciones Establece un término a definir en la lista de definiciones. Su sintaxis es:

<dt>término</dt>

Definición de una Lista de Definiciones Establece la definición de un término a definir en la lista de definiciones. Su sintaxis es:

<dd>definición</dd> El siguiente código es una página Web que muestra listas de definiciones:

listaDefs.html <html> <head> <title>Lista de definición</title> <head> <body> <h3 align="center">Tipos de Omelettes</h3> <dl> <dt>Tortilla de patatas</dt> <dd>Es un omelette grueso con papas y cebollas finamente picadas frito en aceite de oliva. </dd> <dt>Omelette Francés</dt> <dd>Es un omelette cocinado suave y rápidamente en un

42 Páginas Web


sartén especial. Con frecuencia contiene tomate, hierbas de olor y cebollas rebanadas. </dd> <dt>Omelette Denver</dt> <dd>Es un omelette relleno de jamón en cubos, cebollas y pimientos verdes. </dd> </dl> </body> </html> La figura 2.9 muestra la página Web listaDefs.html en un navegador:

Figura 2.9 Lista de definiciones en HTML

Tablas Agrupa elementos en filas y columnas. Nos permiten un diseño de página más preciso. Su sintaxis es la siguiente:

<table [align="{left|center|right}"] [width="ancho"] [border="valor"] [frame="{box|border|void|above|below|

lhs|rhs|hsides|vsides}"] [rules="{all|none|rows|cols}"] [bgcolor="color"]

[cellspacing="valor"] [cellpadding="valor"]> título definiciones de filas </table>

La tabla 2.21 muestra el significado y valor de los atributos del elemento tabla:

Tabla 2.21 Atributos del Elemento <table> Atributo Descripción Valores Descripción

left Alinea la tabla a la izquierda align Alineación de la tabla en la página. Su uso está desaprobado. Se prefiere el uso de hojas

center Centra la tabla



de estilo. right Alinea la tabla a la derecha

ancho Ancho de la tabla en pixeles. width Establece el ancho de la tabla ancho% Ancho de la tabla en porcentaje del

ancho de la página. border Establece el grueso de los

bordes de la tabla valor Grueso de los bordes en pixeles. El

valor por ausencia es 0. Si se omite valor se toma el valor de 1.

box border

Dibuja las cuatro líneas alrededor de la tabla. Éste es el valor por omisión.

void Elimina las cuatro líneas alrededor de la tabla.

above Dibuja sólo la línea superior de la tabla.

below Dibuja sólo la línea inferior de la tabla.

lhs Dibuja sólo la línea izquierda de la tabla.

rhs Dibuja sólo la línea derecha de la tabla.

hsides Dibuja sólo las líneas superior e inferior de la tabla.

frame Establece cuales de las líneas alrededor de la tabla serán visibles.

vsides Dibuja sólo las líneas izquierda y derecha de la tabla.

all Dibuja todas las líneas entre las celdas de la tabla.

none Ninguna de las líneas entre las celdas de la tabla será dibujada.

rows Dibuja sólo las líneas entre las filas de la tabla.

rules Establece cuales de las líneas entre las celdas de la tabla serán visibles.

cols Dibuja sólo las líneas entre las columnas de la tabla.

cellspacing Establece el espacio entre las celdas adyacentes y alrededor de las celdas en las orillas de la tabla.

valor Espacio en pixeles.

cellpadding Establece espacio horizontal y vertical entre las orillas y el contenido de la celda

valor Espacio en pixeles. El valor por ausencia es 1.

bicolor Establece el color de fondo de la tabla. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

color Color de fondo en formato RGB.

La figura 2.10 muestra los bordes, espacio entre celdas, relleno de celdas y el contenido de celdas de una tabla.

Título de la Tabla Establece el título de la tabla. Su sintaxis es:

<caption [align="{top|left|bottom|right}"]>título</caption>

44 Páginas Web


Figura 2.10 Bordes, espacio entre celdas y relleno de celda de una tabla

La tabla 2.22 muestra el significado y valor de los atributos del elemento Título de Tabla:

Tabla 2.22 Atributo del Elemento <caption> Atributo Descripción Valores Descripción

top

Centra el título en la parte superior de la tabla

left Coloca el título en la parte superior izquierda de la tabla

bottom Centra el título en la parte inferior de la tabla

align Alineación del título de la tabla. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

right Coloca el título en la parte superior derecha de la tabla

Definición de fila Define una fila de la tabla. Su sintaxis es:

<tr [align="{left|center|right|justify}"] [valign="{top|middle|bottom}"] [nowrap] [bgcolor="color"]> encabezados de columnas definiciones de celdas </tr>

en HTML, y

<tr [align="{left|center|right|justify}"] [valign="{top|middle|bottom}"] [nowrap="nowrap"] [bgcolor="color"]> encabezados de columnas definiciones de celdas </tr>

en XHTML. La tabla 2.23 muestra el significado y valor de los atributos del elemento Fila de Tabla:

Tabla 2.23 Atributos del Elemento <tr>



Atributo Descripción Valores Descripción left Alinea el contenido a la

izquierda center Centra el contenido right Alinea el contenido a la

derecha

align Alineación horizontal del contenido de las celdas de la fila de la tabla

justify Alinea el contenido a ambos lados.

top Alinea el contenido a la parte superior

middle Centra el contenido

valign Alineación vertical del contenido de las celdas de la fila de la tabla

bottom Alinea el contenido a la parte inferior

nowrap Impide que el navegador divida un párrafo en varias líneas, a menos que se incluya el elemento <br>.

nowrap El valor sólo se escribe en XHTML.

bicolor Establece el color de fondo de la fila. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.


Definición de Encabezado de Columna y Definición de Celda Definen encabezados de columna y celda, respectivamente. Producen el mismo resultado, con la diferencia de que el texto de un encabezado de columna aparece en negrillas. La sintaxis de un encabezado de columna es:

<th [colspan="valor"] [rowspan="valor"] [align="{left|center|right}"] [valign="{top|middle|bottom}"] [nowrap] [width="ancho"] [bgcolor="color"]> encabezado de columna </th>

en HTML, y

<th [colspan="valor"] [rowspan="valor"] [align="{left|center|right}"] [valign="{top|middle|bottom}"] [nowrap="nowrap"] [width="ancho"] [bgcolor="color"]> encabezado de columna </th>

en XHTML. La sintaxis de una celda de una tabla es:

<td [colspan="valor"] [rowspan="valor"] [align="{left|center|right}"}] [valign={"top|midle|bottom}"] [nowrap] [width="ancho"] [bgcolor="color"]> elemento de celda </td>

en HTML, y

<td [colspan="valor"] [rowspan="valor"] [align="{left|center|right}"] [valign="{top|middle|bottom}"] [nowrap="nowrap"] [width="ancho"] [bgcolor="color"]>

46 Páginas Web


encabezado de columna </td>

en XHTML. La tabla 2.24 muestra el significado y valor de los atributos de los elementos encabezado de columna y de celda de tabla:

Tabla 2.24 Atributos de los Elementos de <th> y <td> Atributo Descripción Valores Descripción colspan Número de filas por las que se

extiende la celda valor Número de filas

rowspan Número de filas por las que se extiende la casilla

valor Número de columnas

left Alinea el contenido a la izquierda

center Centra el contenido

align Alineación horizontal del contenido de las celdas

right Alinea el contenido a la derecha top

middle

valign Alineación vertical del contenido de las celdas

bottom

Alinea el contenido a la parte superior Centra el contenido Alinea el contenido a la parte inferior

nowrap Impide que el navegador divida un párrafo en varias líneas, a menos que se incluya el elemento <br>.

nowrap El valor sólo se escribe en XHTML.

ancho Ancho en pixeles width Establece el ancho de la celda. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

ancho% Ancho en porcentaje de la tabla

bicolor Establece el color de fondo de la fila. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.


El siguiente código muestra un ejemplo de una página Web con una tabla:

tabla.html <html> <head> <title>Tabla</title> </head> <body background="fondobaigeitson.jpeg" bgcolor="#C0C0C0">  <div align="center"> <img src="Compresor.gif" width="125" height="85" border="0" alt="Compresor.gif - 5643 Bytes"> </div>  <hr align="center" size="1">

<table border="1" align="center" cellpadding="2">  <caption align="top"> <b>Equipos de Trabajo</b> </caption>  <tr>  <th rowspan="2">Equipo</th>  <th colspan="3">Integrantes</th> </tr>  <tr>  <th>Matrícula</th> <th>Nombre</th> <th>E-mail</th> </tr>  <tr>  <th rowspan="2">1</th>  <td>12345</td>  <td>Juan Pérez</td>  <td> <a href="mailto:[email protected]">[email protected]</a> </td> </tr>  <tr>  <td>13745</td>  <td>Luis Soto</td>  <td> <a href="mailto:[email protected]">[email protected]</a> </td> </tr>  <tr>  <th rowspan="2">2</th>  <td>20034</td>

48 Páginas Web


<td>Luz Vela</td>  <td><a href="mailto:[email protected]">[email protected]</a></td> </tr>  <tr>  <td>21745</td>  <td>Raúl Suárez</td>  <td> <a href="mailto:[email protected]">[email protected]</a> </td> </tr> </table> </body> </html>

La figura 2.11 muestra la página Web Equipos.html en un navegador:

Figura 2.11 Tablas en HTML

Formularios Los formularios dentro de una página Web, nos permiten solicitar información al cliente para después procesarla. Un formulario puede contener campos de texto, botones, casillas de verificación, botones de radio, menús emergentes áreas de texto, etc. Por medio de estos elementos, llamados campos, el cliente suministra una serie de datos, al presionar un botón especial llamado botón Enviar, el cliente los envía a un servidor o dirección de correo. Para enviarlos



al servidor, el navegador asocia a cada dato con un parámetro y los empaca. El servidor recibirá los datos y se los pasará a una aplicación para que los procese, la cual producirá una respuesta en forma de una página Web y la regresará al navegador del cliente. La sintaxis de un formulario es la siguiente:

<form action="url" method="{get|post}" enctype="{application/x-www-form-urlencoded| multipart/form-data|text/plain}"> elementos de entrada </form>

La tabla 2.25 muestra el significado y valor de los atributos del elemento formulario:

Tabla 2.25 Atributos del Elemento <form> Atributo Descripción Valores Descripción

action Establece la página o el programa que va a recibir las variables que se envíen con el formulario.

url URL de la página o el programa que va a recibir las variables que se envíen con el formulario

get Utiliza el mecanismo get method establece el mecanismo empleado para enviar las variables post Utiliza el mecanismo post

application/ x-www-form-urlencoded Valor por ausencia. enctype Establece el modo de

cifrado de la información.

text/plain Empleado para enviar el formulario por correo electrónico.

Campos de Entrada Construyen un campo para capturar datos en un formulario. Los diferentes campos de entrada tienen el mismo nombre <input> pero se distinguen uno del otro por su atributo type.

Campos de Entrada de Texto Permite la captura de una línea de texto. Su sintaxis es la siguiente:

<input [type="text"] name="parámetro" [maxlenght="valor"] [size="valor"] [value="texto"] [readonly="{true|false}"]>

en HTML, y

<input [type="text"] name="parámetro" [maxlenght="valor"] [size="valor"] [value="texto"] [readonly="{true|false}"]

/> en XHTML.

Campo de Entrada de Contraseña

50 Páginas Web


Permite la captura de una contraseña. El carácter de eco será un asterisco. Su sintaxis es la siguiente:

<input type="password" name="parámetro" [maxlenght="valor"] [size="valor"] [value="texto"]>

en HTML, y

<input type="password" name="parámetro" [maxlenght="valor"] [size="valor"] [value="texto"] />

en XHTML.

Campos de Entrada de Casilla de Verificación El campo se elegirá marcando una casilla. Se permite marcar varias casillas. Su sintaxis es la siguiente:

<input type="checkbox" name="parámetro" value="texto" [checked]> en HTML, y

<input type="checkbox" name="parámetro" value="texto" [checked="checked"] />

en XHTML.

Campos de Entrada de Botón de Radio El campo se elegirá marcando un botón de radio. Sólo se permite marcar un botón de radio del grupo de botones. Su sintaxis es la siguiente:

<input type="radio" name="parámetro" value="texto" [checked]> en HTML, y

<input type="radio" name="parámetro" value="texto" [checked="checked"] />

en XHTML.

Campos de Entrada Oculto En este campo no se muestra el elemento en la página, por lo que no puede modificarse su valor. Su sintaxis es la siguiente:

<input type="hidden" name="parámetro" value="texto"> en HTML, y

<input type="hidden" name="parámetro" value="texto" /> en XHTML.



Botón Enviar Representa un botón. Al pulsar este botón, la información de todos los campos se envía al programa indicado en el formulario. Su sintaxis es la siguiente:

<input type="submit" [name="parámetro"] [value="texto"]> en HTML, y

<input type="submit" [name="parámetro"] [value="texto"] /> en XHTML.

Botón Reestablecer Representa un botón. Al pulsar este botón, la información de todos elementos del formulario será restablecida al valor inicial. Su sintaxis es la siguiente:

<input type="reset" [value="texto"]> en HTML, y

<input type="reset" [value="texto"] /> en XHTML. La tabla 2.26 muestra el significado y valor de los atributos de los elementos campos de entrada:

Tabla 2.26 Atributos de los Elementos Campos de Entrada Atributo Descripción Valores Descripción

text Campo de entrada de texto password Campo de password checkbox Casilla de verificación radio Botón de radio hidden Botón oculto submit Botón enviar

type Establece el tipo de campo de entrada

reset Botón restablecer name Establece el nombre del parámetro.

El valor capturado en el campo de entrada se asocia con el nombre del parámetro y se envía al servidor o dirección de correo en el formato: parámetro="valor"

parámetro

Nombre del parámetro

maxlenght Número máximo de caracteres que se pueden capturar.

valor Un entero

size Ancho del campo, en caracteres. valor Un entero. Si size < maxlenght al llenarse el campo el texto se recorrerá a la izquierda.

value • En los campos de texto y contraseña, es el texto que se despliega en los campos inicialmente.

texto

52 Páginas Web


• En el campo oculto, en la casilla de verificación y botón de radio es el texto que se enviará como valor asociado al nombre del parámetro.

• En el botón Enviar y value es el texto que se desplegará en el botón y si existe el atributo name es el valor que se enviará asociado al nombre del parámetro.

• En el botón Reestablecer value es el texto que se desplegará en el botón

true El Campo de Entrada de Texto es editable.

readonly Establece si el Campo de Entrada de Texto es editable o no

false El Campo de Entrada de Texto no es editable.

checked Establece la(s) casilla(s) de verificación o el botón de radio seleccionada(s) inicialmente

checked El valor sólo se escribe en XHTML.

Campo de Selección (Menú emergente) Este tipo de campo despliega una lista de opciones, entre las que debemos escoger una o varias. Su sintaxis es:

<select [name="parámetro"] size="valor" [multiple] [disabled]> opciones </select >

en HTML, y

<select [name="parámetro"] size="valor" [multiple="multiple"] [disabled="disabled"]> opciones </select >

en XHTML. La tabla 2.27 muestra el significado y valor de los atributos del elemento campos de selección:

Tabla 2.27 Atributos del Elemento Campos de Selección Atributo Descripción Valores Descripción name Establece el nombre del parámetro parámetro Nombre del parámetro size Establece el número de opciones

de la lista que serán visibles valor Un entero

multiple Permite seleccionar más de un valor para el campo

multiple El valor sólo se escribe en XHTML.

disabled La lista sólo se visualiza. El usuario no puede seleccionar.

disabled El valor sólo se escribe en XHTML.

Opciones de un Campo de Selección (Menú emergentes)



Establecen las opciones de un campo de selección. Su sintaxis es:

<option value="texto" [selected] [disabled]>opción</option> en HTML, y

<option value="texto" [selected="selected"] [disabled=" disabled"]> opción </select >

en XHTML. La tabla 2.28 muestra el significado y valor de los atributos del elemento opción de campos de selección:

Tabla 2.28 Atributos del Elemento Opción de Campos de Selección Atributo Descripción Valores Descripción

value Valor(es) a enviar si selecciona el (los) elemento(s). Este(os) valor(es) está(n) asociado(s) al atributo name de la tabla 2.20

texto Si se omite, se envía el texto de opción.

selected Establece que esta opción está seleccionada inicialmente.

selected El valor sólo se escribe en XHTML.

disabled Establece que esta opción no se puede seleccionar.

disabled El valor sólo se escribe en XHTML.

Área de Texto Multilínea Representa un campo de texto de múltiples líneas. Normalmente se utiliza para que se incluyan en él comentarios. Su sintaxis es:

<textarea name="parámetro" cols="valor" rows="valor"> línea de texto 1 línea de texto 2 ...

</textarea> línea de texto 1, …: Líneas de texto que aparecerá inicialmente en el área de texto. La tabla 2.29 muestra el significado y valor de los atributos del elemento texto multilínea:

Tabla 2.29 Atributos del Elemento Texto Multilínea Atributo Descripción Valores Descripción

name Establece el nombre del parámetro

parámetro Nombre del parámetro

cols Establece el número de columnas de texto visibles

valor Número de columnas de texto visibles

rows Establece el número de filas de texto visibles

valor Número de filas de texto visibles

El siguiente código muestra un ejemplo de una página Web con un formulario:

54 Páginas Web


Encuesta.html

<html> <head> <title>Encuesta</title> </head> <body>  <form action ="mailto: [email protected]?subject=Encuesta" method=post enctype="text/plain"> <h1 align="center">Estimado Alumno</h1>  <table align="center">  <caption align="center"> <h3>Por favor suministra tus datos</h3> </caption>  <tr>  <td>Nombre</td>  <td><input type="text" name="nombre" size="50" /></td> </tr>  <tr>  <td>Correo Electrónico</td>  <td><input type="text" name="email" size="50" /></td> </tr> </table> <br>  <table align="center" width="40%">  <caption align="center"> <h3>Información que deseas recibir:</h3> </caption>  <tr>  <td align="right"> <input type="checkbox" name="archivo" value="Html" /> </td>  <td>Tutorial de HTML</td> </tr>  <tr>

<td align="right"> <input type="checkbox" name="archivo" value="Ejemplo" /> </td>  <td>Archivo de Ejemplos</td> </tr> </table> <br>  <table align="center" width="40%">  <caption align="center"><h3>Carrera inscrito:</h3></caption>  <tr>  <td align="right"> <input type="radio" name="carrera" value="Electronica" /> </td>  <td>Electrónica</td> </tr>  <tr>  <td align="right"> <input type="radio" name="carrera" value="Industrial" /> </td>  <td>Industrial</td> </tr>  <tr>  <td align="right"> <input type="radio" name="carrera" value ="LSIA" /> </td>  <td>LSIA</td> </tr> </table> <div align="center">  <input type="hidden" name="lugar" value="difusion" /> <h3>Como te enteraste del curso</h3>  <select name="donde">  <option>De casualidad</option> <option>Por mi jefe</option> <option>Por otro maestro</option> <option selected="selected">En el bar</option> </select> <h3>Tus Comentarios</h3>

56 Páginas Web


 <textarea name="comentario" rows="3" cols="40"></textarea> <br>  <input type="submit" name="boton" value="Enviar" />  <input type="reset" value="Borrar" /> </div> </form> </body> </html>

La figura 2.12 muestra la página Web Encuesta.html en un navegador:

Figura 2.12 Formulario en HTML

La figura 2.13 muestra la página Web Encuesta.html ya contestada y lista a enviarse:



Figura 2.13 Formulario contestado y listo para enviar

Al hacer clic en el botón Enviar del formulario, aparecerá en nuestro cliente de correo, la información capturada en la encuesta, lista para ser enviada, como se muestra en la figura 2.14.

58 Páginas Web


Figura 2.14 Valores del formulario a enviarse en el cliente E-mail

Tema 2 - Paginas Web · 2011-05-03 · que genera el contenido dinámico a partir de la...

Documents

Transcript of Tema 2 - Paginas Web · 2011-05-03 · que genera el contenido dinámico a partir de la...