Apuntes 2

(1)

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

(2)

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

(3)

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:

(4)

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:

(5)

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>

(6)

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.

(7)

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 #000080 Silver #C0C0C0 Red #FF0000 Lime #00FF00 Blue #0000FF Gray #808080 Purple #800080 Olive #808000 Teal #008080 White #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

(8)

valor por ausencia. center Centra el texto.

right Alinea el texto a la derecha. texto en el encabezado.

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

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

Encabezado de nivel 4, alineado a la izquierda </h4>

Encabezado de nivel 5, alineado a la derecha </h5>

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

(9)

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

(10)

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

(11)

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

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

<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

(12)

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

(13)

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>

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

(14)

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>

ancho Ancho de la línea en pixeles. width Establece el ancho de la

línea horizontal.

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.

grosor Grosor de la línea en pixeles.

color Establece el color de la línea horizontal.

(15)

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

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

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

</html>

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

Imágenes

(16)

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:

(17)

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.

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

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.

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

(18)

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

<p>Imagen con atributos de dimensiones</p>

<p>Imagen ampliada</p>

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

(19)

<body>

Imagen con alineación superior y texto a la izquierda <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"/>

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:

(20)

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

Imagen con alineación media y texto a la derecha <br />

<br />

Imagen con alineación izquierda <br clear="left"/>

Imagen con alineación derecha </body>

</html>

(21)

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.

(22)

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

(23)

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>

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>

name Define una ancla destino dentro de un documento.

(24)

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

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

Tabla1. Destino de un hipervínculo </caption>

<tr>

<th align="center">Columna 1</th> <th align="center">Columna 2</th> </tr>

<tr>

<tr>

</table>

(25)

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>

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>

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

(26)

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

<title>Mapa de Imagenes</title> <head>

<body>

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

(27)

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>

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.

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

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

value Valor asignado a este elemento de la lista. Su uso está desaprobado. Se prefiere el uso de hojas de estilo.

valor Un entero.

(28)

listas.html

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

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

(29)

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

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

(30)

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>

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

(31)

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.

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:

(32)

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>

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.

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:

(33)

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.

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

(34)

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.

ancho% Ancho en porcentaje de la tabla

bicolor Establece el color de fondo de la fila.

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

tabla.html

<title>Tabla</title> </head>

<div align="center">

</div>

(35)

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

<td>12345</td>

<td>Juan Pérez</td>

<td>

<a href="mailto:[email protected]">[email protected]</a> </td>

</tr>

<tr>

<td>Luis Soto</td>

</tr>

<tr>

(36)

<td><a href="mailto:[email protected]">[email protected]</a></td> </tr>

<tr>

<td>Raúl Suárez</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

(37)

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>

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.

(38)

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