HTML

HTML. Páginas web estáticas

El lenguaje HTML

HTML fue el lenguaje pionero para la creación de páginas web estáticas, páginas que siempre tienen los mismos contenidos salvo que se modifique el archivo. Aunque el mundo de la World Wide Web ha evolucionado mucho, incorporando nuevos lenguajes y tecnologías, HTML sigue jugando un papel fundamental en él.

¿Qué es HTML?

HTML es el acrónimo del inglés HyperText Markup Language (Lenguaje de marcas de hipertexto). Es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto estructurado en el que se incluyen hiperenlaces (hyperlinks) que conducen a otros documentos, objetos multimedia (gráficos, sonidos, etc.) u otros elementos de información relacionados. Con el hipertexto lo que se hace realmente es especificar tanto la estructura lógica del contenido (títulos, párrafos, listas, etc.) como los diferentes efectos que se quieren dar a dicho contenido (se especifican los lugares del documento donde se debe poner cursiva, negrita o insertar una imagen). Esta información es interpretada por el navegador web o browser, el cual se encargará de reproducir la página web tal y como la puede ver el usuario.

Se dice también que HTML es un lenguaje de marcas o etiquetas porque las instrucciones que permiten estructurar los contenidos de las páginas y darles estilos o formatos son porciones de texto diferenciadas del resto de elementos. Es decir, dichas instrucciones en forma de etiquetas sirven permiten:

• Establecer la estructura lógica del documento. Las etiquetas diferencian los párrafos de texto, establecen los títulos, etc. En general, determinan todos los elementos que forman parte de la estructura de documento.
• Diferenciación del texto mediante estilos. Las etiquetas permiten añadir al texto y a los elementos de la página diferentes estilos y formatos, diferenciando por ejemplo, si una palabra debe ir en cursiva o en negrita.
• Incrustación de información o contenidos externos. Las etiquetas permiten definir hiperenlaces, los cuales pueden servir para acceder a contenidos alojados en otras páginas o sitios web.
• Inserción de elementos multimedia e imágenes. Hay etiquetas o marcas especiales que permiten insertar imágenes, vídeos, etc., de forma rápida y sencilla.

Esto quiere decir que mediante HTML es posible definir la estructura de un documento, los estilos de sus elementos, incorporar elementos gráficos o multimedia e incluir enlaces a otras páginas o sitios web. Aunque, en la actualidad se prefiere definir los estilos de los elementos mediante el lenguaje CSS, esto siempre será posible con HTML.

 

Orígenes de HTML

El HTML es la lingua mater de la web. Es el lenguaje más utilizado para publicar contenidos en la web. Es un lenguaje etiquetado. Un documento HTML no es más que un fichero de texto en el que la estructura y el formato son aplicados con etiquetas.

Tras la adopción de Internet por parte de la comunidad científica y académica, se hizo necesario un lenguaje común que posibilitase el intercambio de documentos entre los usuarios. La existencia de diferentes lenguajes dificultaba dicha tarea por lo que se encargó al IETF (Internet Engineering Task Force, Grupo de trabajo de Ingeniería de Internet) la elaboración de un estándar. Surgió así, en 1995, HTML 2.0.

            HTML 2.0 no estaba, sin embargo, preparado para la extensión de Internet entre el gran público. Muchas empresas comenzaron a proponer nuevas etiquetas con las que dotar de mayor funcionalidad a sus navegadores, rompiendo así la uniformidad existente hasta entonces. La nueva propuesta de estandarización de IETF (HTML 3.0) no fue bien acogida por su complejidad, por lo que se tuvo que buscar otra solución.

            Surgió así el W3C (World Wide Web Consortium, Consorcio de la World Wide Web), formado por diferentes empresas como Sun, Microsoft o Netscape. Éste comenzó su trabajo con el borrador de la versión 3.2 de HTML, añadiendo numerosas mejoras y, sobre todo, haciéndolo más accesible y por tanto, más popular. En 1997, propuso un nuevo estándar, HTML 4.0, vigente en la actualidad.

 Las etiquetas HTML

Un documento realizado con el lenguaje HTML constará de dos elementos: los contenidos del documento y las instrucciones HTML que darán el formato adecuado a dichos contenidos. Estas instrucciones, llamadas etiquetas, constituyen la base del lenguaje HTML.

 

Formato

Una etiqueta o marca está formada por una o varias palabras reservadas, es decir, palabras que tienen un significado especial en el lenguaje.

Se diferencian de la información del documento propiamente dicha porque se encuentran encerradas entre los símbolos “menor que” (<) y “mayor que” (>) de la siguiente forma:

<palabra (s)>

Gracias a la palabra o palabras reservadas que se encierran entre estos símbolos, será posible conocer las características o formatos que se le darán al elemento afectado. Lo ideal es que todo elemento de una página web esté suscrito a una etiqueta, evitando así que el navegador malinterprete el código.

Existen dos tipos básicos de etiquetas: las de inicio o apertura y las de fin o cierre. Las primeras declaran las características o formatos del elemento (por ejemplo que el siguiente párrafo irá en cursiva). La etiqueta de fin o cierre es la que indica al navegador que el formato que afectaba al elemento desde la etiqueta de inicio, se acaba. Es decir, si se inserta la marca de “texto en cursiva” (<I>), el navegador web formateará en cursiva todas las palabras que vengan a continuación; el efecto dejará de aplicarse cuando el navegador encuentre la etiqueta de cierre (/I). Obsérvese que las etiquetas de apertura y cierre son exactamente iguales salvo por el símbolo propio de las etiquetas de fin: “la barra inclinada” (/).

<etiqueta>elemento afectado</etiqueta>

No todas las etiquetas de este lenguaje tienen su correspondiente etiqueta de fin ya que hay de diferentes tipos:

• Etiquetas de apertura y cierre. Son las que se han explicado hasta ahora. La instrucción sólo se aplica al elemento que encierran.
• Etiquetas sólo de apertura. El efecto se producirá en un punto determinado del documento sin afectar a otros elementos.
• Etiquetas de cierre opcional. Pueden adoptar uno de los dos formatos vistos anteriormente aunque se aconsejaría cerrarlas para estructurar mejor el documento y dotarlo de mayor claridad.

Las etiquetas con apertura y cierre deben estar “balanceadas”. Si se abren en un orden determinado, se deben cerrar en el orden inverso para que las primeras engloben a las siguientes.

<etiqueta 1>

<etiqueta 1>

Por otra parte, en HTML no se diferencia entre mayúsculas y minúsculas a la hora de escribir e interpretar las etiquetas. Con el fin de lograr una mayor uniformidad en el código, lo normal es que siempre se escriban de la misma forma, prefiriendo la mayoría de desarrolladores ponerlas en mayúscula para que resalten más a pesar de las recomendaciones de W3C en el sentido contrario.

Atributos

En muchas ocasiones, habrá una serie de parámetros que harán que los efectos, que producen las etiquetas varíen, ya sea en colores, alineación, estilos, etc. Estos parámetros son modificadores de la etiqueta genérica de inicio o apertura y se denominan atributos. Con ellos se pueden definir diferentes posibilidades de la instrucción HTML, y generalmente, están formados por el nombre del atributo, que es una palabra reservada del lenguaje, el signo “igual” (=) y el valor que toma. Una etiqueta genérica con atributos sería:

<etiqueta ATR1=”valor1” ATR2=”valor2”> Elemento </etiqueta>

Aquí, ATR1 y ATR2 son dos atributos distintos que toman los valores valor1 y valor2 respectivamente.

El orden en el que incluyan los atributos es indiferente aunque hay que tener en cuenta dos puntos importantes:

• Si el valor del atributo contiene dos o más palabras separadas por espacios, debe ir entre comillas para evitar que el navegador malinterprete el código.

• Cada atributo sólo puede tener un valor en cada etiqueta. En caso de que en una misma etiqueta, se pusiese el mismo atributo con distintos valores, el resultado sería imprevisible y dependería de la interpretación que diese a dicho código el navegador.

Editores de HTML

La herramienta principal en el desarrollo de páginas web es el editor que se usa para escribir el código. Los editores pueden ser de dos tipo dependiendo de la funcionalidad visual que ofrezcan. Por un lado, están los editores puros que muestran el código tal cual es, con la consiguiente dificultad para imaginar la página que resulta de dicho código conforme se va elaborando la misma. Un ejemplo de este tipo de programa podría ser el Bloc de Notas de Windows. Por otro lado se encuentran los llamados programas WYSIWYG, que ofrecen la enorme ventaja de permitir al usuario saber en todo momento cómo le está quedando la página ya que muestran el diseño de la misma. Ejemplos de este tipo de programas son Dreamweaver y Nvu.

Navegadores

            Un navegador web es un programa que interpreta el código HTML de una página, reconstruyendo a partir de dicho código la imagen de la web que recibe el ususario. La reconstrucción de una página puede variar dependiendo del navegador que se utilice para visualizarla. Por ello, es conveniente, cuando se programa una página web, comprobar en varios navegadores distintos, especialmente los más extendidos: Internet Explorer, Opera y Firefox.

Estructura de un documento HTML

Un documento realizado en HTML tiene unas partes bien definidas que constituyen su estructura básica o lo que se conoce como el esqueleto del documento. Estas partes están definidas por una serie de marcas o etiquetas.

Para que el navegador aplique el intérprete correcto a la página web en cuestión, debe saber el lenguaje en la que está escrita. Esto se le indica de dos formas: en primer lugar, el documento llevará la extensión html; en segundo lugar, el documento llevará al principio y al final las etiquetas <html> y </html>, las cuales indican el lenguaje en el que está escrito el mismo.

Una vez establecido el lenguaje que se utiliza, se escribe el esqueleto del documento. Éste está constituido por dos partes: la cabecera y el cuerpo. La primera está delimitada por las etiquetas <head> </head>, mientras que la segunda lo está por <body></body>. De esta forma, la estructura de un documento genérico en HTML será la siguiente:

La cabecera (<head>)

En la cabecera se incluirán las definiciones generales que afectan a todo el documento.

• Etiqueta <title>

La etiqueta <title></title> sirve para especificar el título que tendrá el documento:

<title>Título del documento</title>

Dicho título no aparecerá en la página web en sí sino en la barra del navegador. Tiene una gran utilidad puesto que facilita un elemento de identificación cuando la página se agrega a los favoritos. Además, es común en algunos buscadores utilizar este título como resultado de las búsquedas (por ello se recomienda que el título guarde relación con los contenidos de la página). Es preferible que el título no sea muy largo ya que dependiendo del tamaño de la ventana del navegador, puede verse cortado y, por tanto, ilegible.

• Etiqueta <meta>

En la navegación a través de diferentes páginas de Internet, es muy fácil encontrarse con páginas que ya no están donde debieran, sino que en su antigua URL hay una página intermedia que redirecciona al usuario hacia la nueva ubicación del documento. Esto se consigue en HTML con la etiqueta <meta>, la cual permite introducir en una página web un refresco automático de unos segundos. Para ello se indica la URL del documento que va a sustituir al actual y el número de segundos que debe esperar el navegador para efectuar el refresco. La sintaxis de esta etiqueta es la siguiente:

<meta http-equiv=”refresh” content=”segundos;URL=nuevaURL”>

El atributo content lleva especificado un valor que consta de dos partes: segundos y nuevaURL. La primera adopta un formato numérico que expresa el número de segundos que deben transcurrir hasta que se refresque la página. La segunda indica la URL de la página que debe sustituir a la actual. Así, si se quisiera que tras 5 segundos se cargará la página de Google, habría que escribir:

<meta http-equiv=”refresh” content=”5;URL=http://www.google.es”>

Si se quiere que el cambio entre páginas sea inmediato, el valor segundos deberá dejarse vacio; si lo que se quiere es simplemente refrescar el contenido de la página actual, lo que se debe dejar vacío es el valor URL.

El cuerpo <body>

El cuerpo del documento viene indicado por el par de etiquetas <body></body>. Es en él donde van dispuestos los distintos elementos que componen el documento y que le dan sentido: texto, imágenes, sonido, etc.

La etiqueta <body>, a diferencia de <head>, admite una serie de atributos que son de carácter global para todo el documento. Es decir definen aspectos generales del documento como la imagen de fondo de la página o el color de la misma, del texto o de los vínculos (visitados o no).

Cuatro de estos atributos (bgcolor, text, link, vlink y alink) modifican el color de algunos elementos básicos del documento como son el fondo de la página o el texto. Simplemente habrá que prestar atención al necesario contraste entre el fondo y los textos para garantizar la legibilidad del documento.

Por otra parte, el cambio de color de los enlaces no siempre tiene el comportamiento deseado en todos los navegadores por lo que es conveniente realizar una comprobación.

Más atención hay que prestar al atributo background, con el que se declara la imagen de fondo de la página. Su valor debe ser el nombre de una imagen y su extensión, si dicha imagen está en la misma carpeta que el documento HTML, o el de la URL donde se halla dicha imagen. Por ejemplo:

<body background=http://www.paginaweb.com/imagen.jpg>

Esta imagen se mostrará por debajo del texto y los elementos que compongan el documento. Si el navegador no pudiera encontrar la imagen definida, mostraría simplemente el color de fondo establecido.

Hay que tener mucho cuidado de que la imagen tenga el tamaño adecuado, ya que si es menor que la ventana del navegador del usuario, la imagen será reproducida como un mosaico por toda la ventana hasta rellenarla por completo.

Etiqueta	Atributo	Valor	Significado
body	bgcolor	Color	Define el color de fondo del documento.
	background	URL	Indica la dirección web de la imagen de fondo del documento. Si dicha imagen se encuentra en el propio servidor,
	text	Color	Establece el color en el que aparecerá el texto del documento.
	link	Color	Establece el color en el que aparecerá el texto de los enlaces del documento.
	vlink	Color	Determina el color en el que aparecerá el texto de los enlaces cuando son activados
	alink	Color	Determina el color en el que aparecerá el texto de los enlaces cuando ya hayan sido visitados.

CASO PRÁCTICO 1

Realizar una página web que contenga una imagen .gif  como fondo y se refresque a los tres segundos con otra URL.

<html>

  <head>

     <title>Caso práctico 1</title>

     <meta http-equiv=”refresh” content=”5;URL=http://www.google.es”>

  </head>

  <body background=”imagenes\ranas.gif”>

  </body>

</html>

Nota: ojo con las comillas al copiar un texto en word.

El texto en HTML

Los navegadores no “entienden” el lenguaje que hablan los editores de texto: las instrucciones que estos utilizan para insertar saltos de línea, poner en negrita una palabra, etc., no son las que los buscadores necesitan para reproducir el texto en pantalla tal y como se desea. Para ello, HTML cuenta con unas etiquetas especiales destinadas al formato y estructuración del texto.

Espaciado y estructura básica del texto

Si se escriben varios espacios en blanco o se introducen tabuladores o saltos de línea en el texto tal y como se puede hacer en un documento cualquiera, estos formatos no se visualizarán en el navegador. Esto es debido a que en HTML se necesitan unas etiquetas concretas para definir la estructura que va a tener el texto y los espacios que se quieran introducir en el mismo.

• La etiqueta <p>. La etiqueta <p></p> o de párrafo, es una de las más utilizadas en HTML a la hora de estructurar un texto. Introduce un espacio de dos líneas de separación (equivalente a pulsar dos veces Enter en un editor de texto) con el siguiente párrafo de texto Aunque se trata de una etiqueta opcional, su uso es muy recomendable al servir como separador de bloques de texto y elemento de espaciado.
• La etiqueta <br>. La etiqueta <br> provoca un salto de línea simple (equivalente a apretar sólo una vez Enter en un editor de texto) dentro de un párrafo. Es decir, si una vez que se ha definido un bloque de texto <p>, se desea introducir un salto de línea pero sin romper dicho bloque, se utilizará <br>. Esta etiqueta no necesita otra de cierre.
• La etiqueta <hr>. Introduce una “regla” o línea horizontal en el documento. Por defecto, dicha regla poseerá el ancho de la ventana del navegador, tendrá forma tridimensional (3D) e introducirá una separación equivalente a un cambio de párrafo tanto por delante como por detrás de ella. Sin embargo, es posible modificar su aspecto mediante los atributos siguientes:

Atributo	Valor	Significado
color	Color	Define el color de la regla
align	left, center, right	Alinea la regla según el valor dado, siendo sólo apreciable si la regla es menor que el tamaño de la pantalla.
noshade		Elimina el efecto tridimensional de la regla.
width	Número, Número%	Cambia la anchura de la regla respecto a la ventana del navegador. Usa píxeles o porcentajes.
size	Número, Número%	Cambia el grosor de la regla. Usa píxeles o porcentajes.

Títulos de cabecera

En HTML se pueden definir diferentes jerarquías de títulos tal y como hacen algunos procesadores de texto como Word. Para definir estos títulos de cabecera se utilizan etiquetas que siguen la estructura:<hnivel></hnivel>. Es decir, los de la categoría 1 están marcados en el documento como <h1></h1>, los de categoría 2 como <h2></h2>, etc. En total hay seis niveles, siendo <h1> de mayor jerarquía y mayor tamaño de letra y <h6> el de menor.

Cada navegador puede representarlos de un modo diferente, lo que hace recomendable la comprobación de los resultados obtenidos sean los adecuados. En cualquier caso, los títulos se mostrarán de forma diferente según su importancia, siendo lo normal que la cabecera de tipo <h1> se presente en negrita y de tamaño grande y que los efectos y tamaños vayan variando conforme se reduzca el número de orden de la cabecera hasta llegar a <h6>.

Por defecto, los títulos aparecerán alineados a la izquierda. Esto puede ser modificado mediante la introducción del atributo align y valores como center (centrado) o right (derecha). Por ejemplo:

<h1 align=center >Título centrado</h1>

Formato de las fuentes

El texto, aparte de poderse estructurar como ya se ha reseñado, también se puede formatear cambiando la fuente, el tamaño, su color o resaltando ciertas palabras mediante el uso de negritas o cursivas. Aunque desde HTML 4.0, se prefiere que el formato se aplique a través del lenguaje CSS, esto también es posible con las siguientes etiquetas.

Una de las etiquetas de formato más importantes es <font></font>. Con ella se formatea el texto según los atributos que se le indiquen. Así será posible modificar la fuente por defecto (Times New Roman)  y definir el tipo de fuente base. Para evitar problemas si el usuario no tiene dicha fuente instalada en su navegador, se puede dar un listado de fuentes para que el navegador elija la primera que encuentre instalada:

<font face=”Arial, Tahoma”>Texto</font>

Por otra parte, el atributo size permite definir el tamaño de la fuente. En HTML, el tamaño de esta se define en referencia a una escala del 1 al 7, siendo 3 el valor por defecto. Es posible definir el tamaño de la fuente de manera absoluta (2) o de manera relativa (+2, -4, etc.). En este último caso, tomará como referencia el valor por defecto (3) o el último indicado, de tal forma que para dar un tamaño 5 a la fuente, bastaría con escribir: 

<font size=”+2”>

Etiqueta	Atributo	Valor	Significado
font	face	Tipo de letra	Determina el tipo de fuente con el que se representará un texto. Se pueden consignar varios valores a la vez separándolos con una coma y un espacio en blanco.
	color	Color	Determinará el color del texto.
	size	Número	Indica el tamaño de la fuente en una escala del 1 (menor) al 7 (mayor). Acepta valores absolutos (4) o relativos (+2). En este último caso, tomará como referencia el valor por defecto (3) o el último indicado.

Además de la fuente de un bloque de texto, también se pueden resaltar palabras o un conjunto de ellas mediante el uso de negritas, cursivas o subrayado.

Etiqueta	Efecto
<b></b>	Negrita
<i></i>	Cursiva
<u></u>	Subrayada
<strong></strong>	Enfatizada

Simplemente hay que tener en cuenta dos cosas: la primera es que este tipo de etiqueta puede usarse por separado o de forma conjunta. Si es necesario que un texto aparezca subrayado y en negrita, tan sólo habrá que usar las dos etiquetas de forma balanceada:

<u><b>Texto</b></u>

El efecto de la etiqueta <strong></strong> depende en gran medida del navegador que la interprete. Su misión es enfatizar el texto afectado y esto se puede hacer poniéndolo en negrita, subrayado o negrita y subrayado a la vez.

Caracteres especiales

HTML dispone de las llamadas instrucciones de código que sustituyen a los llamados caracteres especiales: letras que no existen en inglés, acentos, caracteres con una función propia en HTML como “<”, o incluso “&”, muy habitual en otros idiomas pero que es utilizado también en HTML como símbolo reservado.

Los caracteres especiales se escriben en HTML siguiendo la estructura básica &#código_ASCII, siendo código_ASCII el valor numérico ASCII equivalente al carácter en cuestión. En algunos casos, HTML posee palabras reservadas que permiten la escritura de un carácter, generalmente aquellos que son muy usuales en idiomas importantes como el español o francés (caso de los acentos, tildes, etc.). Este sistema es mucho más intuitivo ya que bastará escribir &palabra_reservada; para representar el carácter en cuestión.

Carácter	Código
¡	¡
¿	¿
“	"
	 
>	>
<	&lt;
Ñ	&Ntilde;
ñ	&ntilde;
á	&aacute;

Ejemplo: az&uacute;car

Comentarios

Siempre que se utiliza un lenguaje de programación, es muy útil introducir comentarios sobre el mismo, es decir, líneas de texto en el código que no repercuten sobre el resultado y que sirven únicamente para el programador realice anotaciones que pueden servir en un futuro: explicaciones del comportamiento de una línea concreta del código, avisos de modificaciones realizadas en el mismo, etc. En HTML, los comentarios deben ser introducidos de la siguiente manera:

<!-- texto del comentario -->

La única manera de ver estos comentarios será observando el código fuente de las páginas web.

CASO PRÁCTICO 2

Crear una página web que contenga el texto Ud4_CP2_texto.doc formateado de forma similar a como se presenta en Word.

El texto en HTML

Los navegadores no "entienden" el lenguaje que hablan los editores de texto: las instrucciones que estos utilizan para insertar saltos de línea, poner en negrita una palabra, etc., no son las que los browsers necesitan para reproducir el texto en pantalla tal y como se desea. Para ello, HTML cuenta con unas etiquetas especiales destinadas al formato y estructuración del texto.

---

Espaciado y estructura básica del texto

Si se escriben varios espacios en blanco o se introducen tabuladores o saltos de línea en el texto tal y como se puede hacer en un documento cualquiera, estos formatos no se visualizarán en el navegador. Esto es debido a que en HTML se necesitan unas etiquetas concretas para definir la estructura que va a tener el texto y los espacios que se quieran introducir en el mismo.

La etiqueta P o de párrafo, es una de las más utilizadas en HTML a la hora de estructurar un texto. Introduce un espacio de dos líneas de separación (equivalente a pulsar dos veces enter en un editor de texto) con el siguiente párrafo de texto. Aunque se trata de una etiqueta opcional, su uso es muy recomendable al servir como separador de bloques de texto y elemento de espaciado.

Paso 1. Escribimos la estructura básica de una página HTML.

Paso 2. Dentro de la parte del cuerpo, creamos la estructura básica del texto introduciendo encabezados, párrafos y reglas.

<html>

  <head>

     <title>Caso pr&aacute;ctico 2</title>

   </head>

   <body>

            <h1>El texto en HTML</h1>

             <p>Párrafo 1</p>

             <hr>

            <h2>El texto en HTML</h2>

             <p>Párrafo 2</p>

             <p>Párrafo 3</p>

     </body>

  </html>

Paso 3. Ahora pasamos a crear las características generales de los bloques de texto. Como la mayoría de los párrafos tiene color azul, esta propiedad la definiremos en la etiqueta <body>. Además, todos los párrafos tienen una alineación centrada que implementaremos con el atributo align y su valor center.

   <body text=”blue”>

      <h1>El texto en HTML</h1>

      <p align=”center”>Párrafo 1</p>

      <hr>

      <h2>El texto en HTML</h2>

      <p align=”center”>Párrafo 2</p>

      <p align=”center”>Párrafo 3</p>

     </body>

Paso 4. El último párrafo difiere de los demás en cuanto al color (naranja) y tipo de fuente (Geneva) por lo que habrá que especificarlo mediante la etiqueta <font>.

<p align=”left”><font color=”#FF6600” face=”Genera, Arial, Helvetica, sans-serif”>Párrafo 3</font></p>

Paso 5. Pasamos ahora a definir los formatos que afectan simplemente a algunas palabras. Éstas son:browsers (en cursiva en el primer párrafo), etiqueta p (etiqueta en negrita y P en negrita y courier en el tercer párrafo) y enter (con letra courier, en el tercer párrafo).

<i>browsers</i>

La <b>etiqueta <font face="Courier New">P</font></b>

<font face="Courier New">enter</font>

Paso 6. Ya sólo queda insertar los caracteres especiales, los cuales serán del tipo &letraacute; excepto en la primera línea, en donde habrá que insertar unas comillas de la siguiente forma:

&quot;entienden&quot;

Hiperenlaces

Los hiperenlaces (enlaces, links o vínculos) son elementos de la página que permiten al usuario ir de una página a otra o de una parte de un documento a otra parte, sin necesidad de introducir una nueva URL en la barra de direcciones del navegador. Suelen estar claramente diferenciados del resto de elementos, bien porque posean diferencias visuales (color azul o texto subrayado, por ejemplo), bien porque son sensibles al paso del ratón en la mayoría de los navegadores (el cursor cambiará de aspecto, indicando al usuario que se trata de un elemento interactivo).

El tipo de enlace más frecuente es el que permite la navegación entre dos páginas distintas. Para ello se utiliza la etiqueta <a>:

<a href.=”http://www.google.es”>Ir a Google</a>

Ir a Google

El valor del atributo href indica la URL de la nueva página web. El texto “Ir a Google” aparecerá por defecto en color azul y subrayado. Una vez visitado, aparecerá normalmente en color púrpura. Ambas características se pueden modificar mediante el uso de atributos opcionales de <body>.

Etiqueta	Atributo	Valor	Significado
a	href	URL	Indica la URL de la página que se cargará.
	name	Nombre	Establece el nombre del ancla al que llevará el enlace de ancla.
	target	_blank _self _top _parent	Indica al navegador dónde debe abrir la nueva página: en una ventana nueva (_blank), en la misma ventana (_self), en el marco primario (_parent) o en toda la ventana (_top).

Si en vez de definir un texto como enlace hiperactivo se quisiera incrustar el enlace de una imagen u otro elemento como una cabecera, se definiría simplemente el hipervínculo y en vez del texto, se incluiría la etiqueta del elemento en cuestión.

<a href.=”URL”><h1>Titulo 1</h1></a>

Por otra parte, también es posible definir los llamados enlaces de ancla. Éstos, en vez de cargar una nueva página, permitirán al usuario acceder a una parte concreta del documento que en esos momentos está consultando.

Para que funcione como enlace entre zonas de la página, debe tener, además del consabido link, un punto de referencia: punto de ancla. Éste debe poseer un nombre unívoco y estar en la zona del documento que se quiere referenciar. Generalmente, será invisible para los usuarios aunque siempre se puede poner un texto que lo indique. La forma  que tendría un enlace de este tipo sería:

<a href.=”#nombreAncla”>Texto del enlace de ancla</a>

Parte A del documento

<a name=”nombreAncla”></a>

Parte B del documento

Obsérvese que la forma del enlace de ancla es igual a los hiperenlaces ya explicados, con la excepción de que lo que se referencia no es una URL sino el nombre del punto de ancla precedido por el símbolo “almohadilla” (#).

Con HTML es posible acceder a estos enlaces de ancla directamente desde otro documento. Para ello, hay que indicar tanto la URL del documento de destino como el nombre del punto de ancla. Se escribiría de la siguiente forma:

<a href.=”URL#nombreAncla”>Texto</a>

Finalmente, reseñar que hay un enlace especial que puede resultar muy útil: mailto:direccion_de_correo. Este enlace permitirá que cuando el usuario haga clic sobre él, se abra el programa de gestión de correo electrónico del ordenador del usuario para enviar un correo a la dirección que se indica después de los dos puntos.

<a href=”mailto:direccion_de_correo”> contenido_enlace </a>

CASO PRÁCTICO 3

Dada la página web Ud4_CP3_Formato_de_texto.html, crear un índice desde el que poder acceder a cada uno de los epígrafes. Al final de cada uno de estos apartados debe haber así mismo un enlace que lleve al usuario de nuevo al índice. Finalmente, se creará otra página HTML que permita acceder que permita acceder a la anterior y a sus epígrafes.

Paso 1: Primeramente, crearemos puntos de ancla en cada título para poder reverenciarlos posteriormente.

<a name="ep1"></a><h1>El texto en HTML</h1>

<a name="ep2"></a><h2>A Espaciado y estructura b&aacute;sica del texto</h2>

…

Paso 2: Ahora se debe crear el índice con los enlaces a los puntos recién creados. Además, se añadirá un punto de ancla en dicho índice.

<a name="indice"></a>

<p><strong><u>&Iacute;NDICE</u></strong></p>

<p>

<ul>

        <li><a href="#ep1">El texto en HTML</a>

        <li><a href="#ep2">Espaciado y estructura b&aacute;sica del texto</a>

        <ul><li><a href="#ep21">La etiqueta P</a>

                       <li><a href="#ep22">La etiqueta BR</a>

                       <li><a href="#ep23">La etiqueta PRE</a>

                       <li><a href="#ep24">La etiqueta HR</a>

        </ul>

        <li><a href="#ep3">T&iacute;tulos de cabecera</a>

        <li><a href="#ep4">Formato de las fuentes</a>

</ul>

</p>

Paso 3:  Ahora crearemos nuevos enlaces de ancla al final de cada epígrafe para que lleven hasta el creado en el índice.

 <a href="#indice">Al &iacute;ndice</a><BR>

Paso 4: Ahora crearemos una nueva página. En ella habrá que conjugar los enlaces normales con los de ancla de la siguiente forma:

<html>

<head>

         <title>El texto en HTML</title>

</head>

<body>

         <p><strong><u>&Iacute;NDICE</u></strong></p>

         <p>

           <ul>

             <li><a href="Ud4_CP3_solucion.html#ep1">El texto en HTML</a>

    <li><a href="Ud4_CP3_solucion.html#ep2">Espaciado y estructura        b&aacute;sica del texto</a>

             <li><a href="Ud4_CP3_solucion.html#ep3">T&iacute;tulos de cabecera</a>

             <li><a href="Ud4_CP3_solucion.html#ep4">Formato de las fuentes</a>

           </ul>

         </p>

</body>

</html>

Imágenes y elementos multimedia

En la actualidad, una de las posibilidades más llamativas de HTML es la introducción de elementos multimedia e imágenes en la página web, ya que proporcionan mayor dinamismo y colorido a las mismas.

Imágenes

En la actualidad, incluir imágenes en una página web es algo tan común como introducir texto. Los navegadores son ya capaces de interpretar ficheros JPEG o GIF sin necesidad de instalar plugins o extensiones que le añadan dicha funcionalidad. Sin embargo, sí que se tendrá que tener en cuenta las recomendaciones sobre las limitaciones físicas de los sistemas.

Para que una imagen aparezca en una página web, será necesario declararla, allí donde se quiera que aparezca, mediante la etiqueta <img>, la cual no necesita etiqueta de cierre pero sí diversos atributos.

<img src=”imagen.jpg” alt=”Texto”>

Como puede observarse, <img> va acompañada de dos de sus atributos, src y alt. El primero indica el lugar en el que está la imagen que hay que incluir en la página. Si ésta pertenece a otra página web, además de tener en cuenta las recomendaciones y leyes al respecto, hay que poner la URL completa de la misma, incluido el nombre completo de la imagen y su extensión.

<img src=http://paginaweb/imagen.jpg alt=”Texto alternativo”>

Sin embargo, si la imagen está en el directorio de trabajo, se podrá utilizar con sólo escribir su nombre y la localización de la misma dentro de dicho directorio. Por ejemplo, si estuviera dentro de una carpeta llamada fotos, habría que escribir:

<img src=”fotos/imagen.jpg” alt=”Texto”>

Hay que recordar que las imágenes que se utilizan en las páginas web, así como los diferentes elementos multimedia, deben estar organizados en directorios en el servidor para que sea más fácil la posterior actualización de contenidos. Así, por ejemplo, las páginas irán en directorio raiz y los elementos multimedia en directorios creados para ese fin.

Por su parte, el atributo alt sirve para introducir un texto, generalmente, explicativo sobre la imagen. Su finalidad es informar al usuario, en caso de que la imagen haya desaparecido de donde estaba o su navegador esté sólo en modo texto, de que en ese lugar hay una imagen.

Además de src y alt, es posible introducir otros atributos, algunos de los cuales son comunes a otras etiquetas

Etiqueta	Atributo	Valor	Significado
img	src	URL	Indica la URL de la imagen. . Actualmente los navegadores soportan los formatos GIF, JPEG, y PNG
	alt	Texto	Define un texto alternativo por si no se encuentra la imagen deseada.
	align	top, middle, bottom, left, right, center	Alinea la imagen respecto al texto, tanto en sentido horizontal (left, right, center), como en sentido vertical (top, middle, bottom).
	border	Número	Pone un borde o marco a la imagen. Se expresa en píxeles. Con border=0 no pone borde.
	height	Número%	Especifica la altura que debe tener la imagen. Se expresa en píxeles o porcentaje.
	width	Número%	Especifica el ancho que debe tener la imagen. Se expresa en píxeles o porcentaje.
	hspace	Número	Especifica en píxeles la separación horizontal entre el texto y la imagen.
	vspace	Número	Especifica en píxeles la separación vertical entre el texto y la imagen.

Los atributos width y height permiten especificar el tamaño absoluto (en píxeles) o relativo (en porcentaje) que debe tener la imagen; esto es, claro está, si se quiere modificar el tamaño original. A la hora de introducirlos, habrá que tener cuidado de mantener las proporciones originales de la imagen ya que si no, se puede producir la distorsión de la misma por alargamiento o estrechamiento. En caso de que el tamaño se exprese en forma relativa, habrá que poner el símbolo de “porcentaje” (%) justo después de la cantidad.

Ejemplo:

<body>

<!-- Alineacion LEFT -->

<img src="mapa.gif" width="100" height="100" alt="left" border="0" align="left" />

El veloz murciélago hindú comía feliz cardillo y kiwi.

La cigüeña tocaba el saxofón detrás del palanque de paja.

El veloz murciélago hindú comía feliz cardillo y kiwi.

La cigüeña tocaba el saxofón detrás del palanque de paja.

El veloz murciélago hindú comía feliz cardillo y kiwi.

La cigüeña tocaba el saxofón detrás del palanque de paja.

<br /> <br />

<!-- Alineacion RIGHT -->

<img src="mapa.gif" width="100" height="100" alt="right" border="0" align="right" />

El veloz murciélago hindú comía feliz cardillo y kiwi.

La cigüeña tocaba el saxofón detrás del palanque de paja.

El veloz murciélago hindú comía feliz cardillo y kiwi.

La cigüeña tocaba el saxofón detrás del palanque de paja.

El veloz murciélago hindú comía feliz cardillo y kiwi.

La cigüeña tocaba el saxofón detrás del palanque de paja.

<br /> <br />

<!-- Alineacion TOP -->

<img src="mapa.gif" width="100" height="100" alt="top" border="0" align="top" />

El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palanque de paja. El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palanque de paja. El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palanque de paja.

<br /> <br />

<!-- Alineacion BOTTOM -->

<img src="mapa.gif" width="100" height="100" alt="bottom" border="0" align="bottom" />

El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palanque de paja. El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palanque de paja. El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palanque de paja.

<br /> <br />

<!-- Alineacion MIDDLE -->

<img src="mapa.gif" width="100" height="100" alt="middle" border="0" align="middle" />

El veloz murciélago hindú comía feliz cardillo y kiwi.

La cigüeña tocaba el saxofón detrás del palanque de paja.

El veloz murciélago hindú comía feliz cardillo y kiwi.

La cigüeña tocaba el saxofón detrás del palanque de paja.

El veloz murciélago hindú comía feliz cardillo y kiwi.

La cigüeña tocaba el saxofón detrás del palanque de paja.

<!-- Alineacion en el medio de la pagina -->

<center><img src="mapa.gif" width="100" height="100" alt="middle" border="0" /></center>

El veloz murciélago hindú comía feliz cardillo y kiwi.

La cigüeña tocaba el saxofón detrás del palanque de paja.

El veloz murciélago hindú comía feliz cardillo y kiwi.

La cigüeña tocaba el saxofón detrás del palanque de paja.

El veloz murciélago hindú comía feliz cardillo y kiwi.

La cigüeña tocaba el saxofón detrás del palanque de paja.

</body>

</html>

            Una imagen puede ser utilizada dentro de un hiperenlace en lugar del texto normal.

<a href=http://www.ole.es><img src=”IMAGEN1.JPG” border=1/></a>

Elementos multimedia

HTML permite la inclusión de elementos multimedia (vídeos y sonidos) en las páginas web. La etiqueta estándar para su inclusión es <object>. Las más utilizadas <bgsound> y <img dynsrc=”URL”>, no forman parte del estándar y sólo se garantiza su funcionamiento con Internet Explorer.

Por otra parte, Internet Explorer es el único navegador que no necesita extensiones o plugins adicionales para la reproducción de ficheros en formatos en la web como MPEG.

Para introducir un sonido es necesario utilizar la etiqueta <bgsound src=”URL”>, con el atributo src. Otro atributo posible es loop, el cual determina si el sonido se debe repetir una o más veces.

Ejemplo: para que una página reprodujera un sonido y lo repitiese cinco veces:

<bgsound src=”sonidos/pitido.waw” loop=5>

Respecto a los vídeos, una forma sencilla de incrustarlos es mediante  la etiqueta <img dynsrc=”URL”>, que simplemente necesitará la indicación de la URL del vídeo.

Dado que el vídeo se trata como una imagen dinámica, esta etiqueta acepta los atributos ya reseñados para imágenes estáticas, es decir, para la etiqueta <img>. Aunque esto quiere decir que también se pueden utilizar los atributos width y height, hay que tener cuidado con ellos debido a que pueden provocar que el vídeo, debido a su resolución, se vea mal.

También es posible utilizar atributos propios de los videos como loop o start. El primero funciona igual con los sonidos mientras que el segundo, indica si la secuencia de video debe empezar justo cuando se abre el fichero HTML (si toma el valor fileopen) o bien cuando se pase el ratón por encima. (si se establece el valor mouseover).

Existe otra etiqueta alternativa, cuyo uso se aconseja si la anterior no funciona como debería: <embed src=”URL”>. Acepta los atributos loop, width y height, pero en lugar de start, habrá que utilizar a    utostart. Si su valor es trae, el vídeo se reproducirá nada más se cargue el archivo, si es false se reproducirá cuando el usuario haga clic sobre él con el ratón.

Etiqueta	Atributo	Valor	Significado
img	dynsrc	URL	Indica la URL del vídeo.
	loop	Número, infinite	Indica cuántas veces se debe repetir el video. Si se le da el valor infinite, se reproducirá constantemente.
	start	fileopen, mouseover	Indica si el archivo se debe reproducir al ser cargado o cuando el usuario pase el ratón por encima.

Etiqueta	Atributo	Valor	Significado
embed	src	URL	Indica la URL del vídeo.
	loop	Número, infinite	Indica cuántas veces se debe repetir. Si se le da el valor infinite, se reproducirá constantemente.
	autostart	true, fale	Si autostart=true, el vídeo se reproducirá autmáticamente. Si autostart=false, deberá ser activado por el usuario.

Etiqueta	Atributo	Valor	Significado
bgsound	src	URL	Indica la URL del sonido.
	loop	Número, infinite	Indica cuántas veces se debe repetir el sonido. Si se le da el valor infinite, el sonido se reproducirá constantemente.

CASO PRACTICO

Realizar una página web en la que aparezcan una imagen y un vídeo y se oiga un sonido al cargarse la página.

Paso 1: Escribimos la estructura básica de una página HTML.

Paso 2: Dentro de las etiquetas del cuerpo introducimos las etiquetas correspondientes a la imagen, el vídeo y el sonido.

<html>

<head>

            <title>Caso Pr&aacute;ctico 4</title>

</head>

<body>

            <img src="imagen.jpg" alt="Imagen" border="2" width="15%">

            <img dynsrc="video.mpg"alt="Video" start= "mouseover" border="2" height="250">

            <bgsound src="sonido.wav" loop="2">

</body>

</html>

http://www.cartoonnetwork.es

Creación de listas en HTML

En HTML, es posible representar enumeraciones de elementos en forma de listas. Dentro de éstas se podrá incluir cualquier elemento del lenguaje, incluida otra lista (listas anidadas). De la misma forma, se pueden incluir estas enumeraciones dentro de otros elementos como formularios o tablas, lo que conlleva un gran número de posibilidades y combinaciones de uso.

           

HTML permite la creación de tres tipos de listas: las no ordenadas, las ordenadas o numeradas y las de definiciones. Las dos primeras se declaran de una forma muy similar. Primero se especifica el tipo de lista que se quiere, con la etiqueta <ul></ul> (unsorted list) para las no ordenadas, etiqueta <ol></ol> (ordered list) para las ordenadas, y a continuación cada uno de los elementos que la componen a través de la etiqueta <li> (list item).

Ejemplo lista ordenada:

<ol>

   <li> Elemento 1

   <li> Elemento 2

   …

   <li> Elemento n

</ol>

Las etiquetas <ul> y <ol> necesitan un cierre, <li> no.

Las listas no ordenadas se utilizan para enumerar elementos sin orden establecido. Los elementos del listado aparecerán con un símbolo al lado que se puede definir mediante el atributo type y sus valores: circle (círculo), square (cuadrado) o disc (disco), apareciendo por defecto con la primera opción. En cualquier caso, no todos los navegadores aceptan estos cambios de símbolos y siempre hay que comprobar si realmente funcionan o no.

Las listas ordenadas son similares a las anteriores pero en lugar de viñetas, aparece una numeración continua. Ésta, en realidad, no tiene nada que ver con el contenido, es decir, los elementos no se ordenan automáticamente (por ejemplo, por orden alfabético) sino que cada elemento, conforme se van introduciendo en la lista, posee un número o una letra.

Por defecto, los elementos de las listas numeradas aparecerán con un número a su izquierda. Al igual que ocurre con <ul>, esto se puede cambiar utilizando el atributo type con algunos de sus valores.

Ejemplo: 

<ol type=”A” start=”2”>

Las listas de definiciones, por su parte, tras un nombre o concepto, ofrecen en una línea sangrada una definición. Esto se realiza declarando primero la lista mediante la etiqueta <dl></dl> (definition list), luego el término o concepto con <dt> (definition term) y finalmente, la definición con <dd> (data definition):

<dl>

   <dt>  Concepto 1

      <dd> Definición 1

   …

   <dt> Concepto n

     <dd> Definición n

</dl>

Ejemplo:

Gato

            Mamífero doméstico …

Perro

            Mamífero cuadrúpedo, doméstico, con un olfato muy fino…

Etiqueta	Atributo	Valor	Significado
<ul></ul>	type	circle, square, disc	Crea una lista desordenada. El icono depende del valor dado: cículo (circle), cuadrado (square) o disco (disc).
<ol></ol>	type	1 A a I i	Crea una lista ordenada con números (1), letras mayúsculas (A) o minúsculas (a), o en números romanos en mayúsculas (I) o en minúsculas (i).
	start	Número	Indica con qué número o letra debe comenzar la lista (2àB, 3àC, etc).

Tablas en HTML

Las tablas representan información organizada en filas y columnas. En el caso de HTML, serán necesarias tres etiquetas para definirlas: una para la tabla en sí, otra para cada fila y otra para cada celda. No habrá que definir previamente ni el número de filas o columnas ni el tamaño de las celdas como ocurre en algunos editores de texto. En este caso, es el navegador web el que lo calcula automáticamente según el contenido de las mismas.

Las etiquetas principales y que englobarán el resto son <table></table>. Éstas definen la tabla, la cual puede ser formateada según diversos atributos como border, cellspacing, etc.

En el caso de width, es mejor que el ancho se exprese en porcentaje, ya que así la tabla quedará bien en la página sea cual sea el tamaño de la ventana; sin embargo, es preferible que height se exprese en valor absoluto (es decir, en píxeles) ya que es complicado hacer una tabla que coincida con el alto de la ventana.

Dentro del conjunto <table></table>, se deben definir las filas y las celdas (que en este caso equivalen a las columnas). Esto se hace en HTML mediante las etiquetas <tr>, para las filas, y <td>, para las celdas. Éstas no necesitan etiquetas de cierre salvo en el caso de que se realicen tablas anidadas (tablas que contienen a otras tablas), donde sí habrá que poner la etiqueta </tr> para que se obtengan los resultados esperados.

Cada vez que se quiera introducir una fila nueva, se pondrá <tr> y dentro de ella tantas veces <td> como celdas deba tener esa fila.

Ejemplo: Tabla compuesta por dos filas y dos columnas (es decir, cuatro celdas):

<table>

  <tr>

      <td>  Elemento 1-A

      <td>  Elemento 1- B

   <tr>

       <td> Elemento 2-A

       <td> Elemento 2-B

</table>

Etiqueta	Atributo	Valor	Significado
table	border	Número	Crea un borde en la tabla.
	cellspacing	Número	Indica el espacio que debe existir entre dos celdas.
	cellpadding	Número	Indica el espacio que debe existir entre el borde de una celda y su contenido.
	width	Número %	Establece el ancho de la tabla, aceptando valores en píxeles o en porcentajes relativos a la ventana del navegador.
	height	Número %	Fija la altura de la tabla, aceptando valores en píxeles o en porcentajes relativos a la ventana del navegador.

Dentro de una tabla también se pueden definir celdas de tipo cabecera en las que el texto aparece con un estilo diferente. Este tipo de celdas se declara mediante la etiqueta <th>, la cual sustituye a <td>, pudiendo adoptar sus mismos atributos. Al igual que <td>, <th> debe estar definida dentro del ámbito de una etiqueta <tr> para que se cree una nueva fila. Así, aparecerán tantas celdas cabecera como etiquetas <th> se pongan, salvo en el caso de que se usen los atributos colspan y rowspan.

Estos atributos nos permiten definir celdas que abarcan más de una fila o columna.

·         Si rowspan > 1, entonces la celda actual abarcará (hacia abajo) más de una fila.

·         Si colspan > 1, entonces la celda actual abarcará (hacia la derecha) más de una columna.

 

Etiqueta	Atributo	Valor	Significado
tr	align	left, right, center	Permite fijar horizontalmente los elementos de una fila.
	valign	top, middle, bottom	Permite fijar la alineación vertical de los elementos de una fila.
	bgcolor	Color	Indica el color de fondo que debe tener la fila.

Etiqueta	Atributo	Valor	Significado
td/th	align	left, right, center	Permite fijar la alineación horizontal de los elementos de una celda.
	valign	top, middle, bottom	Permite fijar la alineación vertical de los elementos de una celda
	bgcolor	Color	Indica el color de fondo que debe tener la celda.
	width	Número	Fija el ancho de una celda. Acepta valores en píxeles o en porcentajes relativos a la ventana del navegador.
	nowrap		Impide que la línea de texto dentro de una celda se divida en varias líneas.
	rowspan	Número	Indica el número de filas que debe ocupar una celda.
	colspan	Número	Establece el número de columnas que debe ocupar una celda.

CASO PRÁCTICO 5

Realizar una página en la que aparezca una tabla con las siguientes características:

• La tabla tendrá un borde de 3 píxeles, un ancho del 50% y un alto de 300 píxeles.
• La primera fila tendrá sólo una celda que abarcará toda la tabla. Será de tipo cabecera y tendrá como título Columnas.
• Las primeras celdas de la segunda y tercera fila estarán unidas formando una celda cabecera titulada Filas.
• La segunda fila tendrá color de fondo SandyBrown y la tercera Lightblue.

Paso 1:  Escribimos la estructura básica de una página HTML.

Paso 2: Dentro de las etiquetas del cuerpo introducimos las etiquetas correspondientes a la tabla con los atributos pertinentes.

<HTML>

<HEAD>

        <TITLE>Caso Práctico 5</TITLE>

</HEAD>

<BODY>

<H1>Caso Pr&aacute;ctico 5</H1>

<TABLE WIDTH="50%" height="300" BORDER="3" ALIGN="center">

        <TR> 

               <TH COLSPAN="3"> COLUMNAS

        <TR> 

               <TH ROWSPAN="2"> FILAS

               <TD ALIGN="LEFT" BGCOLOR= "SandyBrown"> Izquierda

               <TD ALIGN="RIGHT" BGCOLOR= "SandyBrown"> Derecha

        <TR BGCOLOR="LightBlue"> 

               <TD ALIGN="CENTER"> Centro

               <TD> Sin justificaci&oacute;n

</TABLE>

</BODY>

</HTML>

Creación de formularios

Los formularios son la herramienta que se utiliza para recoger información concreta introducida por el usuario para su posterior procesamiento. Habitualmente están formados por un conjunto de cajas de texto, menús desplegables y botones con los que el usuario puede dar los datos necesarios para registrarse en una organización, comprar un producto, etc.

Dicha información es enviada posteriormente al correo del administrador o a un servidor que contenga un programa específico capaz de procesarla. Por si sólo, HTML no puede procesar los datos, por lo que habrá que recurrir al uso de otras herramientas como, por ejemplo, un lenguaje script de servidor como PHP o ASP.

Para introducir un formulario en una página web, hay que utilizar las etiquetas <form> y su cierre </form>. Entre ellas irán los elementos que sean necesarios para configurar el formulario, tales como campos para introducir el texto, botones, menús desplegables, texto explicativo, etc. También podemos incluir otras etiquetas (<table>, <em>, etc.)

Un formulario debe tener un botón de envío. Al pulsarlo, nuestro navegador enviará los datos introducidos en el formulario al servidor web. Concretamente, lo que se envían son unos pares (parámetro, valor). Cada control del formulario genera un parámetro.

(DNI, 5551234)

(Nombre, Fulanito Pí)

También suelen utilizarse para hacer scripting en el cliente (por ejemplo, cuando el usuario pulsa el botón, se inicia un proceso).

Etiqueta	Atributo	Valor	Significado
form	action	URL	Atributo obligatorio. Indica a dónde se debe enviar la información del formulario.
	enctype	Tipo MIME	Determina la forma en la que se debe codificar la información, ya sea como texto plano (text/plain) o como fichero (multipart/form-data).
	method	get, post	Determina el método HTTP con el que se debe enviar la información. Con get se enviará a través de la URL; con post se hará en el cuerpo de la petición (invisible a los usuarios). Por defecto se usa get.
	name	Texto	Define un nombre unívoco para el formulario

La etiqueta <form> lleva consigo dos atributos muy importantes:

• action. Indica al navegador qué debe hacer con la información una vez pulsado el botón de envío. Puede tomar el valor URL si se van a enviar los datos a un servidor o mailto:direccióndecorreo si se mandan a una dirección de correo.
• method. Informa al navegador sobre la forma de enviar los datos para su procesamiento. Tomará el valor post si el envío de información se realiza de forma transparente (sin hacerla visible al usuario) y el valor get si los datos se envían a través de la URL (aparecen en la barra del navegador insertadas en la dirección de la página en la que se efectúa el procesamiento). Es más seguro utilizar post ya que evita que la información sea captada por un intruso mirando la URL.

Se pueden introducir otros atributos, el genérico name, común a muchas etiquetas de HTML, y el específico enctype, que determina la forma de codificación de la información. Generalmente, su valor será text/plain (envío como texto plano) aunque también acepta multipart/form-data

La forma en la que aparecería la etiqueta <form> de manera genérica es:

<form action=”URL” method=”post” enctype=”text/plain”>

Elementos de un formulario

Dentro de los formularios hay diferentes etiquetas que introducen elementos útiles tales como cuadros de texto o botones de selección. Con el atributo name se les designa un nombre unívoco a cada elemento del formulario Este atributo es importante de cara a:

§  Scripting en el cliente: Es el identificador con el que podremos modificar dinámicamente el control.

§  Scripting en el servidor: El script (ASP, PHP, etc.) que recibe los datos del formulario utilizará este nombre para acceder al dato introducido en dicho control.

También tienen un atributo value=“valor”, cuyo significado varía en cada control, y el atributo  disabled, con el cual  se desactiva el elemento.

A continuación se enumerarán los elementos que se pueden incluir en un formulario:

La mayoría se crea mediante la etiqueta <input> y su atributo <type>.

Etiqueta	Atributo	Valor	Significado
input	accept	Tipos MIME	Indica el tipo MIME del archivo (sólo se utiliza con type=”file”).
	align	left, right, top, middle, bottom	Define la alineación del texto respecto a la imagen.
	alt	Texto	Establece un texto alternativo para la imagen.
	checked		Indica que el cuadro de validación debe aparecer seleccionado por defecto.
	maxlength	Número	Determina el número máximo de caracteres que se pueden insertar en un campo de texto.
	name	Texto	Atributo obligatorio. Define un nombre unívoco para el elemento.
	size	Número	Define el tamaño en caracteres del elemento <input>. No se puede utilizar con type=”hidden”.
	src	URL	Indica la URL de la imagen.
	type	Button,checkbox, file, hidden, image, password, radio, reset, submit, text	Indica el tipo de elemento. Por defecto, será texto.
	value	value	Define el valor del tipo de elemento: Si type=”button”, “reset” o “submit”, define el texto del botón. Si type=”checkbox” o “radio”, este atributo es obligatorio. Define el resultado del elemento input al ser pulsado. El resultado se envía a la URL indicada en <form>. Si type=”hidden”, “password” o “text”, define el valor por defecto del elemento.

Los elementos de un formulario son:

·         Botones. Puede ser de envío (si lo pulsamos, se envía el formulario en el que está incluido (submit) o de reinicialización (reset). Este último permitiría borrar los datos introducidos por el usuario y devolver los campos del formulario a sus valores iniciales. Un botón no genera ningún parámetro. Aunque se puede crear con <input>, también existe la etiqueta <button>

Etiqueta	Atributo	Valor	Significado
button	name	Nombre	Especifica un nombre unívoco para el menú desplegable.
	type	button, reset, submit	Define el tipo del botón.
	value	Cualquier valor.	Especifica el texto que aparece en el botón. Dicho valor puede ser modificado por un script.

            <input type=“button” value=“texto_en_boton” (opcional)>

Ejemplos:

1. Botón de Envío

<input  type=“submit”  value=“texto_en_boton_envio” (opcional)>

2. Imagen de Envío

<input type=“image” atributos_comunes  src=“URL”>

Siendo src=“URL”, URL de la imagen.

Actúa como un botón de envío.

3. Botón de Reset

<input type=“reset” value=“texto_en_boton_borrar” (opcional)>

• Cuadros de validación (checkbox). Pueden ser seleccionados o deseleccionados con un simple clic. Cuando se envía la información a través de action, se incluirá la variable con el nombre que se haya indicado en la etiqueta <input> está activada o sin activar. En caso de que se añada el atributo checked (sin valor alguno), el cuadro de validación aparecerá seleccionado por defecto.

Ejemplo:

<input type=“checkbox” name=Nombre value=Valor (obligatorio) checked (opcional)>

Los parámetro/s generado/s por un checkbox:

Nombre " Valor del atributo name”, Valor "Valor del atributo value

Un tipo especial de cuadro de validación son los radiobotones (radiobuttom). Si un conjunto de éstos tienen un mismo nombre de control, serán autoexcluyentes. Es decir, funcionarán como un menú que sólo permite elegir una opción.

<input  type=“radio” atributos_comunes checked (opcional)>

Para crear un grupo de radio buttons (de manera que solo uno de ellos esté seleccionado), tenemos que darles el mismo nombre (atributo name).

Parámetro generado por un radio button:

Nombre : Valor del atributo name -Valor : Valor del atributo value del radio button seleccionado.

Menús. Con el elemento <select> se definen menús desplegables con un conjunto de opciones indicadas por la etiqueta <option></option>. Un ejemplo sería:

<select>

   <option>Posibilidad 1 </option>

   <option>Posibilidad 2 </option>

</select>

§  ¡Ojo! Una lista desplegable no es más que un ‘combo’ en el que sólo podemos ver una opción a la vez.

§  <select ...>

<option ...>Madrid</option>

<option ...>Londres</option>

<option ...>París</option>

<option ...>Roma</option>

<option ...>Lisboa</option>

</select>

§  <select

name=“nombre”

size=“num_opciones”

multiple=“multiple”

> 

opciones

</select>

§  Siendo:

-               name=“nombre”

Nombre del control.

-               size=“num_opciones”

Número de opciones visibles a la vez. 1 indica que es una lista desplegable.

-               multiple=“multiple”

Indica que pueden seleccionarse múltiples opciones a la vez.

§  <option

value=“valor”

selected=“selected”

> 

texto_opcion

</option>

§  Siendo:

-               value=“value”

Valor de la opción (para el parámetro generado)

-               selected=“selected”

Indica que esta opción está inicialmente seleccionada.

§  Se generan tantos parámetros como opciones seleccionadas.

§  Párametros generados en el servidor:

-               Nombre : Valor del atributo name de la etiqueta <select>

-               Valor : Valor del atributo value de la opción seleccionada. Si no tiene atributo value, se envía el contenido de la etiqueta <option>.

• Campos de texto. Otra forma de introducir datos en un formulario es mediante campos en los que el usuario puede escribir texto. Esto se puede realizar también con la etiqueta <input>, al menos, si el texto que se debe escribir es corto (por ejemplo, introducir simplemente un nombre de usuario). Para ello, simplemente habrá que indicar con el atributo type, el valor text:

<input name=”nombre” type=”text”>

Cuando los cuadros de texto van a ser usados para pedir datos como claves, direcciones de correo, etc. que no deben ser vistos por terceras personas, es conveniente utilizar type=”password”. Así, el texto tecleado por el usuario será reemplazado por un conjunto de asteriscos o símbolos similares (dependerá del navegador web que utilice el usuario).

Otros atributos:

size=“num_caracteres”: Tamaño (en caracteres) del campo de texto

maxlength=“num_caracteres”: Número máximo de caracteres que puede introducir el usuario en el campo de texto.

 value : Indica el valor inicial del campo de texto.

Si, por otra parte, lo que se desea es crear una caja de texto para que el usuario pueda escribir más de una línea, habría que recurrir a la etiqueta <textarea></textarea> y sus correspondientes atributos para definir el tamaño  de la caja (número de líneas y columnas visibles de la página). Si el texto que introduce el usuario fuese más largo que el cuadro del comentario, entonces se activarían automáticamente las barras de desplazamiento que facilitarían la movilidad a través del texto.

<textarea name=”nombre” cols=20 rows=5>contenido inicial </textarea>

 No tiene atributo value. El valor inicial es el contenido de <textarea>

Páginas con marcos (frames)

Mediante los marcos (frames) es posible dividir una página en varias partes de forma que en cada una de ellas pueda haber contenidos diferentes. Se pueden obtener páginas con distintas estructuras, destinando por ejemplo la parte superior a una cabecera, la lateral a la barra de menús y dejando el resto para la navegación en sí a través del sitio web.

Esta estructuración tiene ventajas e inconvenientes. Por una parte, la navegación es más rápida, ya que parte de los contenidos de la página sólo deberán cargarse una vez (por ejemplo, la cabecera y los menús) y existe la posibilidad de dejar siempre el menú del sitio web a la vista. Sin embargo, los marcos reducen el tamaño de visualización de la ventana principal y pueden dar problemas a la hora de añadir las páginas a los favoritos. Todo ello hace que haya que saber muy bien qué se quiere hacer o conseguir con el sitio web, ya que a veces, los marcos no serán realmente apropiados.

Los documentos con marcos no se basan exactamente en la exactamente en la estructura básica vista hasta ahora. La etiqueta <body></body> queda reemplazada por las que introducen los marcos: <frameset></frameset>. Entre este conjunto de etiquetas se establecerá cada uno de los marcos con la etiqueta <frame>. Con ella, lo único que se establecerá es el contenido del marco mientras que con <frameset> se definen las medidas de las divisiones y la estructura. Así, se tendría que la estructuras básica de una página con marcos sería:

<html>

  <head>

      <title>…</title>

  </head>

  <frameset>

    <frame>

    ...

    <frame>

 </frameset>

</html>

La etiqueta <frameset> sólo acepta dos atributos: rows o cols (no son compatibles en la misma etiqueta). Con ellas se indica el número de divisiones horizontales (filas) o verticales (columnas) que habrá en el documento así como el tamaño de las mismas. Por ejemplo:

<frameset rows=”100, 25%,*”>

Con esta instrucción, se dividirá el documento en tres filas. La primera mediría 100 píxeles, la segunda un 25% del tamaño de la ventana del navegador y la tercera el espacio restante, ya que el asterisco (*) funciona como carácter comodín.

Para que el navegador sepa qué página se va a representar en cada uno de esos marcos, es necesario indicárselo con las etiquetas <frame> y su atributo src. Continuando con el ejemplo anterior, para cargar una página en cada uno de los marcos, se debería escribir lo siguiente:

<html>

  <head>

      <title>…</title>

  </head>

  <frameset rows=”100, 25%, *”>

    <frame src=”http://www.google.es”>

    <frame src=”http://www.msn.com”>

    <frame src=”http://www.w3c.org”>

 </frameset>

</html>

Como se puede observar, los documentos HTML que se introducen en los marcos no tienen título por sí mismos, sino que adoptarán todos el título que tenga la página en la que se definan.

Sin embargo, cuando se introduce un enlace en un marco y se quiere que la página destino aparezca en uno diferente al del enlace, es necesario que el marco destino tenga un nombre para poder reverenciarlo. Para ello se utiliza el atributo name. Posteriormente en la etiqueta <a href> se añadirá el atributo target con el nombre del marco destino como valor.

Por otra parte se pueden introducir marcos en forma de filas y columnas en la misma página. Para ello se necesitará recurrir a los marcos anidados, los cuales se construyen enlazando etiquetas <frameset> de forma que se vayan incluyendo los más pequeños en el más general.

Por ejemplo para hacer una distribución, primero habrá que comprobar cuáles son los marcos principales, es decir, los que ocupan todo el alto o el ancho de la página. En este caso se puede observar que el marco de la izquierda ocupa todo el alto de la página mientras que el marco de la derecha está partido. Se puede deducir, pues, que la página se ha dividido primero en dos columnas y posteriormente, la columna de la derecha se ha dividido en dos filas.

El código necesario para crear esta distribución sería:

<frameset cols=”200,*”>

   <frame src=”p1.html”>

   <frameset rows=150, *”>

      <frame src=”p2.html”>

      <frame src=”p3.html”>

  </frameset>

</frameset>

En él se puede comprobar que en un primer grupo de marcos se establecen las dos columnas, en la que la primera será la que incluya la página p1.html y la segunda columna será para el segundo grupo, en el que se establecen las dos filas que contendrán a p2.html y p3.html respectivamente.

Etiqueta	Atributo	Valor	Significado
frameset	cols	Número, *	Define el número y tamaño de las columnas de un conjunto de marcos.
	rows	Número, *	Define el número y tamaño de las filas de un conjunto de marcos.

Etiqueta	Atributo	Valor	Significado
frame	frameborder	1,0	Especifica la posibilidad de añadir un borde al marco.
	marginheigt	Número	Define en píxeles el margen superior e inferior del marco.
	marginwidth	Número	Define en píxeles el margen derecho e izquierdo del marco.
	name	Texto	Establece un nombre unívoco para el marco
	noresize		Impide el cambio de tamaño del marco por parte del usuario
	scrolling	Yes, no, auto	Indica si se incluye una barra de desplazamiento en el marco.
	src	URL	Establece la URL de la página que debe mostrarse en el marco.

CASO PRÁCTICO 6

Se pide crear una página web dividida en tres marcos de la forma

El marco superior tendrá una línea de texto del mayor tamaño posible donde dirá MARCOS. En el marco de la izquierda habrá tres enlaces a Google, Yahoo y Altavista, y en el de la derecha o principal se irán abriendo los enlaces que se pulsen.

SOLUCION

<HTML>

<HEAD>

   <TITLE>Caso Práctico 6</TITLE>

</HEAD>

<FRAMESET ROWS="150,*">

   <FRAME SRC="p1.html">

   <FRAMESET COLS="200,*">

      <FRAME SRC="p2.html">

      <FRAME SRC="p3.html" NAME="principal">

   </FRAMESET>

</FRAMESET>

</HTML>

Creamos las etiquetas correspondientes a los marcos con los atributos pertinentes (se dará a la fila superior una altura de 150 píxeles y a la columna izquierda un ancho de 200.

p1.html

<html>

<body>

  <font size=”7”>

    <b>marcos</b>

  </font>

</body>

</html>

p2.html

<html>

<body>

  <a href=”http://www.google.es” target=”principal”>google</a><br>

  <a href=”http://www.yahoo.es” target=”principal”>yahoo</a><br>

  <a href=”http://www.altavista.com” target=”principal”>altavista</a>

</body>

</html>

p3.html

<html>

<body bgcolor=”sandybrown”>

</body>

</html>

PRACTICAS.

1. En programación, es habitual realizar una primera práctica denominada Hola Mundo. Consiste simplemente en realizar una página web que salude al usuario con esas dos palabras. Realiza dicha página y consérvala en tu disco duro para futuras actividades.

2. Realiza una página web en la que aparezca la frase “Estas siendo redireccionado a la página web que has solicitado. Espera 5 segundos”. Transcurridos 5 segundos se cargará automáticamente la página creada en la práctica 1.

3. Crea una página web de título Probando fondos… con una imagen de fondo que tenga un tamaño de 800x600 píxeles. Escribe tres párrafos de texto, cambiando el color del mismo de forma que se pueda leer correctamente sobre la imagen.

4. Construye una página web de título Cambio de colores en la que el fondo, los textos, los enlaces no visitados y los visitados tengan colores distintos. Comprueba que todo se puede leer correctamente.

5. Introduce como comentario tu nombre y la fecha de creación en el archivo de la práctica 4.

6. Crea una página web en la que aparezcan las palabras listadas a continuación. Asegúrate de que se leen correctamente con una codificación no occidental.

• Cigüeña
• Cañon
• <palabra>
• “ejemplo”
• Marca
• Rock&Roll
• MURCIÉLAGO
• FranÇaise
• ¿Dudas?
• ¡Perfecto!

7. Realiza una página en la que aparezcan siete reglas. En cada una de ellas se debe aplicar al menos uno de los diferentes atributos posibles de manera que sean visibles correctamente.

8. Crear una página web con cinco párrafos de texto en los que se incluyen caracteres especiales. Cada párrafo deberá tener un color de texto, una fuente y un tamaño diferente.

9. Escribe una página en la que haya tres párrafos resaltados con diferentes efectos:

·         El primer párrafo irá en negrita.

·         El segundo párrafo irá en cursiva.

·         El tercer párrafo estará subrayado.

10. Crear una página en la que haya dos párrafo. En el primero utiliza formato negrita y en el segundo <strong>. Compara los resultados de la visualización del documento en al menos dos navegadores diferentes y comenta las diferencias que se aprecian.

11. Escribe el código de una página web de manera que tenga cinco párrafos con un punto de ancla al comienzo de cada uno de ellos. Además, tendrá que haber un enlace de ancla para cada uno tanto al comienzo como al final.

12. Crea una página web en la que se utilicen los diferentes títulos de cabecera. Analiza qué diferencia a cada uno de ellos y comprueba cómo cambia la representación de los mismos en dos navegadores diferentes.

13. Escribe un documento HTML en el que se cree una página que tenga tres párrafos en los que el texto esté con el tamaño por defecto en el primero, tres unidades mayor (utiliza la definición del tamaño de forma relativa) en el segundo y dos unidades menor (usa el tamaño relativo) en el tercero.

14. Crea una página web en la que se incluyan las imágenes necesarias para que se muestren las diferentes alineaciones posibles que pueda tener cada una de ellas con respecto al texto.

15. Incluye en una página web tres imágenes iguales. La primera tendrá una apariencia normal y las dos restantes se modificarán mediante los atributos width y height respectivamente.

16. Crea una página web en la que se incluyan tres imágenes que funcionen como enlaces a otras tantas páginas.

17. Haz una págin web de título Sonidos en la que se escuche un sonido de forma continua.

18. Incluye un vídeo centrado en una página web de título Mis vídeos. Dicho vídeo debe empezar a reproducirse en el momento en que el usuario pase el ratón por encima de él.

19. Crea una página web en la que aparezca una lista no numerada con viñetas en forma cuadrada, en la que comentes tus principales aficiones.

20. Crea una web en la que haya una lista de definición en la que aparezcan tres verduras y un breve comentario donde se indique el color de las mismas.

21. Crea una web en la que haya una lista ordenada o numerada que esté indexada por letras minúsculas, que empiece por la c y en la que aparezcan los números cardinales del 1 al 5 escritos con letras.

22. ¿Qué ocurre si al crear una tabla se utiliza sólo el atributo border sin darle ningún valor?. Compruébalo de forma práctica.

23. Crea una tabla con dos filas y dos columnas en la que cada celada tenga un color de fondo. En cada celda se escribirá una palabra con un color diferente que permita su lectura.

24. Crea una tabla con dos filas y tres columnas. En la primera fila, los elementos aparecerán alineados a la izquierda, centro y derecha respectivamente. En la segunda fila aparecerán arriba, en el medio y abajo respectivamente.

25. Crea una tabla con tres columnas y dos filas. En la fila de arriba introduce una imagen centrada en cada celda. (deben tener todas las imágenes el mismo tamaño) y en la fila de abajo introduce una breve descripción o el nombre de la imagen que tienen arriba de forma que la frase aparezca centrada.

26. Realiza un formulario que envíe los datos a la dirección de correo electrónico midireccion@correo de forma segura como texto plano para ser procesados. Dicho formulario debe tener los siguientes campos:

·         Nombre. El tamaño de caja será 10 píxeles y la longitud máxima del texto será 15.

·         Apellidos. Su tamaño de caja será 10 y la longitud máxima del texto, 25.

·         Teléfono. Tendrá un tamaño de caja igual a 10 y una longitud máxima de texto de 9.

·         DNI. Este campo tendrá un tamaño de caja de 10, su texto poseerá una longitud máxima de 9 y será de tipo password.

·         Género. Tendrá dos botones de radio para seleccionar si el usuario es hombre o mujer. La opción Mujer aparecerá seleccionada por defecto.

·         Sugerencias. Será un campo de texto con 5 líneas y 30 columnas.

·         Un cuadro de validación para seleccionar si se desea recibir las novedades de la web (activado por defecto).

·         Un desplegable en el que den una calificación a la web.

·         Un botón de envío de información.

·         Un botón de borrado.

Comprueba el correcto funcionamiento de los diferentes elementos, incluidos los botones.

SOLUCIONES.

1. 

 <HTML>

        <HEAD>

               <TITLE>Hola Mundo</TITLE>

        </HEAD>

        <BODY>

               <P>Este es mi hola mundo</P>

        </BODY>

</HTML>

 2.

<HTML>

  <HEAD>

    <TITLE>Refrescando en 5 segundos...</TITLE>

    <META HTTP-EQUIV="REFRESH" CONTENT="5;URL=Ud4_actividad01.html">

    </HEAD>

    <BODY>

<P>Esta web es de paso a la siguiente, que va a aparecer en 5         segundos</P>

    </BODY>

</HTML>

3.

<HTML>

        <HEAD>

               <TITLE>Probando fondos...</TITLE>

        </HEAD>

        <BODY BACKGROUND="imagenes\imagenFondo.gif" BGCOLOR="cornsilk" TEXT="blue">

        <P>Las im&aacute;genes que se utilizan en las p&aacute;ginas web, as&iacute; como los diferentes elementos multimedia deben estar organizados en directorios en el servidor para que sea m&aacute;s f&aacute;cil la posterior actualizaci&oacute;n de contenidos.</P>

        <P>Si se va a insertar una imagen como fondo de una web, hay que tener en cuenta que no tenga gran diferencia de contrastes entre colores ya que puede dificultar que los elementos que se introduzcan en el documento se vean adecuadamente.</P>

        <P>Si la imagen que se va a insertar pertenece a otra web, adem&aacute;s de tener en cuenta las recomendaciones y leyes al respecto, hay que poner la URL completa de dicha imagen, que tendr&aacute; la forma “http://paginaweb/imagen.jpg”</P>

        </BODY>

</HTML>

4.

<HTML>

        <HEAD>

               <TITLE>Cambio de colores</TITLE>

        </HEAD>

        <BODY BGCOLOR="cornsilk" TEXT="blue" LINK="darkblue" VLINK="black">

        <P>En algunos navegadores, los enlaces no toman los colores que se le indican como atributos en la etiqueta BODY por lo que hay que probar los resultados en diferentes navegadores</P>

        <P>Si se va a insertar una imagen como fondo de una web, hay que tener en cuenta que no tenga gran diferencia de contrastes entre colores ya que puede dificultar que los elementos que se introduzcan en el documento se vean adecuadamente.</P>

        <P>Si la imagen que se va a insertar pertenece a otra web, adem&aacute;s de tener en cuenta las recomendaciones y leyes al respecto, hay que poner la URL completa de dicha imagen, que tendr&aacute; la forma &quot;http://paginaweb/imagen.jpg&quot;</P>

        <A HREF="http://www.google.es">Google</A><BR>

        <A HREF="http://www.yahoo.es">Yahoo</A>

        </BODY>

</HTML>

Nota: Con Mozilla Firefox no se ven en azul los enlaces no visitados.

5.

<!-- Antonio Vazquez -->

<!-- Web realizada en Agosto del 2010 -->

<HTML>

7.

<HTML>

            <HEAD>

                        <TITLE>Uso de reglas</TITLE>

            </HEAD>

            <BODY>

                        <HR COLOR="orange">

                        <HR ALIGN="LEFT" WIDTH="30">

                        <HR ALIGN="CENTER" WIDTH="30">

                        <HR ALIGN="RIGHT" WIDTH="40">

                        <HR WIDTH="20">

                        <HR SIZE="15">

                        <HR SIZE="15" NOSHADE>

            </BODY>

</HTML>

8.

<HTML>

                <HEAD>

                               <TITLE>Colores, fuentes y tama&ntilde;o</TITLE>

                </HEAD>

                <BODY BGCOLOR="beige" TEXT="blue">

                               <P>En algunos navegadores, los enlaces no toman los colores que se le indican como atributos en la etiqueta BODY por lo que hay que probar los resultados en diferentes navegadores</P>

                               <P><FONT COLOR="darkblue" FACE="Arial" SIZE="2">Si se va a insertar una imagen como fondo de una web, hay que tener en cuenta que no tenga gran diferencia de contrastes entre colores ya que puede dificultar que los elementos que se introduzcan en el documento se vean adecuadamente.</FONT></P>

                               <P><FONT COLOR="black" FACE="Comic Sans MS" SIZE="1">Si la imagen que se va a insertar pertenece a otra web, adem&aacute;s de tener en cuenta las recomendaciones y leyes al respecto, hay que poner la URL completa de dicha imagen, que tendr&aacute; la forma &quot;http://paginaweb/imagen.jpg&quot;</FONT></P>

                               <P><FONT COLOR="orange" FACE="Century Gothic" SIZE="4">Si se va a insertar una imagen como fondo de una web, hay que tener en cuenta que no tenga gran diferencia de contrastes entre colores ya que puede dificultar que los elementos que se introduzcan en el documento se vean adecuadamente.</FONT></P>

                               <P><FONT COLOR="darkorange" FACE="Tahoma" SIZE="5">En algunos navegadores, los enlaces no toman los colores que se le indican como atributos en la etiqueta BODY por lo que hay que probar los resultados en diferentes navegadores</FONT></P>

                </BODY>

</HTML>

 

9.

PRACTICA

Vamos a crear una página que consiste en un portal web de temática personal. Estará constituida por marcos, uno horizontal, en donde se pondría un logo personalizado y una fotografía, y otro lateral, donde irá emplazado el menú. El marco superior tendrá una altura de 102 píxeles y el lateral de una anchura de 220. El logo por tanto, tendrá unas dimensiones de 220x120 y la fotografía superior de 580x120.

Por otra parte, para que el portal mantenga un mismo estilo a través de sus secciones se utilizará la fuente Verdana, la cual suele estar por defecto en la mayoría de los ordenadores y, por tanto, nos asegura una visualización correcta de la página. Además, tendrá un tamaño 2.

El portal tendrá cuatro secciones básicas, dos de acceso público y dos de acceso privado:

• Página de presentación. Debe servir de presentación a todo aquel que acuda al portal web. En ella podrán ver alguna foto personal, texto que escribamos nosotros mismos, etc.
• Àlbum de fotos. En esta sección se colocará un álbum con fotos personales. Será accesible para todo el mundo.
• Agenda de teléfonos. Ésta será una página a la que sólo podremos acceder nosotros ya que en ella almacenaremos números de teléfono que podamos necesitar.
• Agenda de direcciones. Tiene la misma finalidad que la página anterior pero, en este caso, será de direcciones.

Las dos últimas secciones se considerarán como privadas por lo que se pedirá el nombre de usuario y contraseña para acceder a ellas. Debido a que HTML no es un lenguaje de servidor, el proceso de login no se podrá implementar todavía aunque sí se puede empezar a diseñar el formulario para la recogida de los datos y la simulación de todo el proceso.