Tema 2 - Paginas Web - Ramses Gonzalez 2 - Paginas... · Tema 2 Páginas Web 15 ITSON Manuel...

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) 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 El lenguaje HTML define la sintaxis y ubicación de los elementos HTML. Es importante notar que aunque los elementos de HTML permiten establecer la apariencia de los documentos, su énfasis es en la estructura, por ejemplo

14 Páginas Web


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 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 entidades1

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:

<nombreElemento [atributos]> </nombreElemento>

donde nombreElemento es el nombre del elemento y atributos es una lista de los atributos deseados para ese elemento, separados por espacios. HTML no

1 Una lista más completa de las entidades de HTML se encuentra en la liga: http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

Tema 2 Páginas Web 15


hace distinción entre mayúsculas y minúsculas en los nombres de los elementos y de sus atributos. 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 los elementos vacíos 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:

[nombreAtributo=]"valor" ó

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

• 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í.

• 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] [disabled]> opción </option>

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:

16 Páginas Web


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 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.

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]

18 Páginas Web


[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.

imgFondo URL de la imagen.

bgcolor* Establece el color que se usará como fondo de la página.

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

text* Establece el color del texto del documento.


link* Establece el color que tendrán los hipervínculos de la página.


vlink* Establece el color que tendrán los hipervínculos de la página que ya han sido visitados.


alink* Establece el color que tendrá 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 RGB2 Nombre Valor Nombre Valor Nombre Valor Nombre ValorBlack #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

2 La lista de los 147 nombres de colores HTML se encuentran en la siguiente liga: http://www.w3schools.com/html/html_colornames.asp



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ónalign* Establece la

alineación del texto en el elemento.

left Alinea el texto a la izquierda. Es el valor por ausencia. center Centra el texto. right Alinea el texto a la derecha. justify Ajusta el texto a ambos márgenes.

* Su uso está desaprobado. Se prefiere el uso de hojas de estilo. 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

20 Páginas Web


</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:

Figura 2.1. Encabezados de HTML

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:

<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> <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:

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.

22 Páginas Web


Figura 2.2. Párrafos de HTML

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

<br [clear="{left|right|all}"] /> 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 clear Forza 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.

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.

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:

Figura 2.3. Saltos de Línea en HTML

Elementos que especifican 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. La sintaxis de estos elementos es:

<nombreElemento>texto</nombreElemento> Los diferentes elementos para especificar el significado del texto se presentan en la tabla 2.8:

Tabla 2.8. Elementos que Especifican el Significado del Texto. Nombre del Elemento Descripción Despliegue

Normal abbr Indica que texto es una abreviatura. -

acronym Indica que texto es un acrónimo. -

24 Páginas Web


Tabla 2.8. Elementos que Especifican el Significado del Texto. Cont. Nombre del Elemento Descripción Despliegue

Normal cite Indica que texto es una cita bibliográfica. Cursiva

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

dfn Indica que texto es una definición de un término o frase. Cursiva em Indica que texto debe enfatizarse. Cursiva kbd Indica que texto debe teclearse en un teclado. Monoespaciada

strong Indica que texto debe enfatizarse con mayor fuerza. Negrita

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

Elementos que especifican 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. La sintaxis de estos elementos es:

<nombreElemento>texto</nombreElemento> Los diferentes elementos que especificar la apariencia del texto se presentan en la tabla 2.9:

Tabla 2.9. Elementos que Especifican la Apariencia del Texto. Nombre del Elemento Descripción Despliegue

Normal b* Despliega el texto en negritas. Negrita

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* Despliega el texto en cursiva. Cursiva s*, strike* Despliega el texto tachado. Letras tachadas

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 Despliega el texto como subíndice. Subíndices sup Despliega el texto como superíndice. Superíndices tt* Despliega el texto en una fuente monoespaciada. Monoespaciada

u* Despliega el texto subrayado. Su uso está desaprobado. Letras subrayadas


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.

Tabla 2.10 Atributos de los Elementos <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 separadas por comas

Utiliza la primera fuente de la lista que soporte el navegador. Si no soporta ninguna, utiliza la fuente por omisión del navegador.

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

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

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 width* Establece el ancho de la línea

horizontal. ancho Ancho de la línea en pixeles. ancho% Ancho de la línea en

porcentaje del ancho de la página.

align* Alinea la línea. Sólo es útil si se usa con el atributo width.

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

por ausencia. right Alinea la línea a la derecha.

size* Establece el grueso de la línea horizontal.

grosor Grosor de la línea en pixeles.

color* Establece el color de la línea horizontal.


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

* Su uso está desaprobado. Se prefiere el uso de hojas de estilo. El siguiente código es una página Web que muestra los diferentes tipos de líneas horizontales:

26 Páginas Web


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 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:

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

[border="grueso"] [width="ancho"] [height="alto"] [hspace="valor"] [vspace="valor"] [usemap="url"] />



Figura 2.4. Líneas Horizontales en HTML

La tabla 2.12 muestra el significado y valor de los atributos del elemento <img>:

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 textoa desplegar

si no se encuentra la imagen texto Texto a desplegar si no se encuentra la

imagen. Hasta 1024 caracteres, * Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

28 Páginas Web


Tabla 2.12 Atributos del Elemento <img>. Cont. Atributo Descripción Valores Descripción align* Alineación de la imagen

respecto a la base de la línea actual.

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

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

border* Establece un borde alrededor de la imagen.

grueso Grueso del borde en pixeles

width Establece el ancho de la imagen. Es recomendable

ancho Ancho en pixeles ancho% Ancho en porcentaje del espacio

disponible para la imagen height Establece el alto de la imagen alto Ancho en pixeles

alto% Ancho en porcentaje del espacio disponible para la imagen

hspace* Establece el espacio horizontal entre la imagen y el texto.

valor Valor en pixeles

vspace* Establece el espacio vertical entre la imagen y el texto.

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.

* Su uso está desaprobado. Se prefiere el uso de hojas de estilo. El siguiente código es una página Web que muestra algunas variantes del uso del elemento <img>:

imagenes1.html <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"/>

30 Páginas Web


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>

La figura 2.6 muestra la página Web imagenes2.html en un navegador:


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

imagenes3.html <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> La figura 2.7 muestra la página Web imagenes3.html en un navegador:


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:

32 Páginas Web


http://[servidor][:puerto]/[ruta][nomArch][#marcador] 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. • marcador: es un identificador que apunta a una sección específica

dentro de un documento. El marcador le dice al navegador que empiece a desplegar el documento a partir de esa sección. Este marcador 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 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.



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

34 Páginas Web


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 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, el ancla destino o ambas. Su sintaxis es: <a [href="url"] [name="marcador"]>{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 de los atributos del elemento <a>:

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 name Define un ancla destino dentro de un

documento. marcador Identificador de fragmento.

Nombre del elemento dentro del documento a vincular.

Una 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="marcador" ...>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 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="marcador">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. marcador 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} />

36 Páginas Web


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

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

circ La región es de forma circular.

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

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 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>

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 type* Establece el tipo de viñeta.

disc

• viñeta en forma de disco (Valor por ausencia)

square viñeta en forma de cuadrado 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 type* Establece el tipo de carácter de

numeración.

1

1, 2, 3... (Valor por omission)

i i, ii, iii, ... I I, II, III, ... a a, b, c, ... A A, B, C,...

start* Valor con el que se inicializa la lista.

inicio Un entero. El valor por ausencia es 1.


38 Páginas Web


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ónvalue* Valor asignado a este elemento de la lista. valor Un entero. * Su uso está desaprobado. Se prefiere el uso de hojas de estilo. El siguiente código es una página Web que muestra listas sin ordenar y ordenadas:

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:



Figura 2.8 Listas ordenadas y no ordenadas en HTML

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.

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>

40 Páginas Web


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 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

align* Alineación de la tabla en la página.

left Alinea la tabla a la izquierda center Centra la tabla right Alinea la tabla a la derecha

width Establece el ancho de la tabla

ancho Ancho de la tabla en pixeles. 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.

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

boxborder

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.

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

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

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.

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.

bgcolor* Establece el color de fondo de la tabla.

color Color de fondo en formato RGB.


42 Páginas Web


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

Figura 2.10 Bordes, espacio entre celdas y relleno de celda 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> 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ónalign* Alineación

del título de la tabla.

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 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>

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 align Alineación horizontal del contenido

de las celdas de la fila de la tabla left Alinea el contenido a la

izquierda center Centra el contenido right Alinea el contenido a la

derecha justify Alinea el contenido a ambos

lados. valign Alineación vertical del contenido

de las celdas de la fila de la tabla top Alinea el contenido a la parte

superior middle Centra el contenido 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>.

bgcolor* Establece el color de fondo de la fila.



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>

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>

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

align Alineación horizontal del contenido de las celdas

left Alinea el contenido a la izquierda

center Centra el contenido right Alinea el contenido a la derecha

44 Páginas Web


Tabla 2.24 Atributos de los Elementos de <th> y <td> Cont. Atributo Descripción Valores Descripción valign Alineación vertical del contenido

de las celdas top Alinea el contenido a la parte

superior Centra el contenido Alinea el contenido a la parte inferior

middle

bottom

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

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

bgcolor* 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>  <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:

46 Páginas Web


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, cajas de texto, á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 formulario </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

method establece el mecanismo empleado para enviar las variables

get Utiliza el mecanismo get post Utiliza el mecanismo post

enctype Establece el modo de cifrado de la información.

application/x-www-form-urlencoded

Valor por ausencia.

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. La tabla 2.26 muestra el significado y valor de los atributos de los elementos campos de entrada:

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}"]

/>

Campo de Entrada de Contraseña 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"] />

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]/>

48 Páginas Web


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

type Establece el tipo de campo de entrada

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 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.

• 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 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

texto

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

true El Campo de Entrada de Texto es editable.

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

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] />



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" />

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

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

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"] /> La tabla 2.26 muestra el significado y valor de los atributos de los elementos campos de entrada:

Caja Combinada 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 >

La tabla 2.27 muestra el significado y valor de los atributos de la Caja Combinada:

Tabla 2.27 Atributos del Elemento Caja Combinada 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

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

Opciones de una Caja Combinada Establecen las opciones de una Caja Combinada. Su sintaxis es:

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

50 Páginas Web


La tabla 2.28 muestra el significado y valor de los atributos del elemento opción de una Caja Combinada:

Tabla 2.28 Atributos del Elemento Opción de una Caja Combinada 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.

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

Á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íneas de texto

</textarea> líneas de texto : 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:

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> <!-- La siguiente tabla se emplea para ordenar los mensajes y campos de texto para el nombre y e-mail, las líneas

de la tabla no se muestran --> <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> <!-- La siguiente tabla se emplea para ordenar los mensajes y

52 Páginas Web


botones de radio para la carrera, las líneas de la tabla no se muestran --> <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>  <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:

54 Páginas Web


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.



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

Tema 2 - Paginas Web - Ramses Gonzalez 2 - Paginas... · Tema 2 Páginas Web 15 ITSON Manuel...

Documents

Transcript of Tema 2 - Paginas Web - Ramses Gonzalez 2 - Paginas... · Tema 2 Páginas Web 15 ITSON Manuel...