Diseño web en HTML by Toni Pérez

Titulo Largo

Artículo 1.3. XHTML para el diseño web

Titulo Corto

Artículo 1.3

Autor

David Maniega

Palabras clave

Descripcion Objetivos Contenidos Actividades

Enunciado del ejercicio Esta unidad es un taller que incluye un artículo muy práctico con algunos ejercicios incrustados. Para superar esta unidad deberán realizarse los ficheros XHTML que se indican en los ejercicios del artículo e instalarlos en el espacio personal del servidor del curso: gestioninformacion.idec.upf.edu Procedimento de instalación Siguiendo las indicaciones de los ejercicios del artículo de la unidad realizará dos ficheros llamados "inicio.html" y "curso.html". La entrega de este ejercicio se realiza colocando los ficheros realizados en la cuenta personal del servidor del curso (consulte en el apartado del proyecto del módulo 0 como instalar el cliente FTP para colgar ficheros en su cuenta y cuales son sus claves). A continuación deberá notificar la finalización del ejercicio por medio de un mensaje en el siguiente apartado. Este ejercicio le permitirá conocer todas las rutinas de trabajo necesarias para construir e instalar la sede Web del proyecto. Formule sus dudas al profesor de la unidad en el buzón abierto de consultas Recuerde notificar al profesor que ha finalizado el ejercicio con un mensaje en el siguiente formulario.

Evaluacion

Introducción al diseño web con estándares Con el propio devenir de la historia de Internet hemos podido ver cómo han evolucionado los sitios web siguiendo diferentes pautas, modelos, modas, formas de hacer y de presentar la información, etc., pero en muchos casos se han dejado de lado aspectos clave para su éxito como son pensar en quien los va a utilizar o en el uso de estándares para su construcción formalista. En esta unidad vamos a tratar de comprender por qué es necesario utilizar estándares y qué elementos del lenguaje XHTML podemos aplicar para diseñar nuestros sitios de forma correcta. Para poder conseguirlo lo primero que hay que tener presente son las siguientes premisas: -

El sitio web debe poderse ver con cualquier navegador, no hay que diseñar para un único navegador web. Si diseñamos bien una página con HTML la podrán interpretar todos los navegadores, si la eXtendemos a (X)HTML además la haremos semántica, es decir, podremos definir no cómo se ven las cosas (eso le pertocará a CSS) sino lo que significan. Los contenidos es lo más importante a la hora de diseñar el sitio web, sí, sí, los contenidos,

no el diseño visual. Es un error muy frecuente comenzar la construcción del sitio web a partir del formato visual, es decir, de cómo queremos que se vea por pantalla. Lo primero es conceptuar la estructura y tener claros los contenidos, una vez hecho esto (en XHTML) hay que empezar a aportar el estilo (con hojas de estilo CSS). Si buscamos un paralelismo con el mundo real, es como la construcción de una casa. Los planos de la casa son los prototipos de lo que queremos que sea el producto final, los cimientos nuestra base de conocimientos para hacerlo posible (XHTML y CSS), y de forma coherente y estable, la estructura de la casa nuestro código aplicado a los contenidos (con XHTML) y finalmente el levantamiento de las paredes, techos, alicatados y pintura nuestro diseño visual, el estilo con la apariencia final (con CSS). Tanto el código XHTML y CSS deben ser válidos y estar bien formados, es decir, hay que utilizar las etiquetas correctas y en la disposición adecuada, y con el sentido semántico que cada etiqueta del lenguaje XHTML aporta.

Perfecto, ya hemos especificado algunas cosas que nos sirven porque son muy claras y otras que no comprendemos porque es la primera vez que nos enfrentamos a ello. Que no cunda el pánico, vamos a ir viendo poco a poco cada elemento para poder ir trabajando con estos estándares. Lo primero que deberemos tratar es ¿por qué el concepto "estándares"? La respuesta es sencilla, porque utilizando estándares vamos a garantizar dos cosas fundamentales, trabajar correctamente (consistencia) y evitar la obsolescencia de los lenguajes propietarios (perdurabilidad). Pero para aproximar de forma más clara esta necesidad vamos a ver qué ventajas nos ofrece el hecho de trabajar con estándares: -

Los desarrolladores de agentes de usuario (AU) como los navegadores web utilizan los lenguajes estándar para crear los motores que interpretan los códigos en que se basan las aplicaciones, por lo tanto si nosotros utilizamos esos mismos lenguajes nos aseguramos de que los resultados sean los óptimos, asegurando la interoperabilidad del sitio web haciéndolo accesible para diferentes plataformas y agentes de usuario. En el caso del uso de XHTML junto a CSS nos permite separar la estructura de los contenidos de la presentación visual de éstos. Podemos crear diferentes estilos de visualización sin tener que multiplicar las versiones de las páginas, e incluso tener plantillas de formato específico para otros dispositivos, por ejemplo, un formato destinado al modelo de impresión de una página web. Nos haremos más visibles a todo el mundo y eliminaremos barreras de accesibilidad. Por ejemplo, los buscadores sólo ven contenidos y enlaces, no formatos de presentación, eso no le interesa. Podremos crear un sitio web modular, es decir, formado por diferentes "piezas" que ubicaremos en las páginas y a las que posteriormente daremos formato de forma individual para formar un todo. Si decidimos cambiar nuestra estética será mucho más fácil si lo hacemos con CSS.

Veamos ahora cómo podemos trabajar con el estándar XHTML que no es un lenguaje alejado de HTML, es de hecho un hermano, una reformulación de este último basado en las especificaciones de extensibilidad que aporta XML. Esta "extensión" supone la eliminación de algunas etiquetas utilizadas por su predecesor como son <font>, <b> o <i>, además de estar pensado para dar simplemente estructura al contenido, dejando, como hemos indicado anteriormente, la capa de presentación al lenguaje de hojas de estilo CSS.

Lo primero, necesitamos un marco de conocimiento previo ¿Qué es XHTML? XHTML (eXtensible HyperText Markup Language) en su especificación 1.0 aparece como recomendación del W3C el 26 de enero del 2000 y consiste en una reformulación de las definiciones de tipo de documento (DTD) de HTML 4 como aplicaciones compatibles con XML. Conviene dejar claro que XHTML no es un lenguaje de programación sino de marcado, que se limita a describir la estructura lógica del contenido del documento, dejando la apariencia visual en manos de las hojas de estilo (CSS), de esta forma se centra en la semántica, es decir, que no busca determinar el aspecto de los elementos de la página, sino lo que significan. Así podemos marcar diferentes elementos en base a su función e importancia dentro del contenido, por ejemplo que un título pueda ser el principal (h1) o secundario (h3), pero sin entrar si éstos seran de color verde o azul, en negrilla, alineados a la izquierda o la derecha..., eso se lo dejaremos a las hojas de estilo. El aspecto visual lo podremos o querremos cambiar en más de una ocasión, pero el significado de los elementos no.

Herramientas de edición El lenguaje XHTML como se basa en el código ASCII o ANSI (texto plano), no contempla una interfaz específica para su tratamiento. Esto quiere decir que cualquier procesador de textos puede servir como base para la creación de páginas web, archivando siempre los documentos bajo la extensión *.htm o *.html y formato texto plano. Siendo así de fácil, podemos realizar nuestras páginas desde un simple bloc de notas. Esta simplicidad, implica también que seamos nosotros mismos quienes tecleemos las diferentes etiquetas o marcas propias del lenguaje XHTML dentro de nuestro texto, lo que presupone su conocimiento. Existen también otros programas que nos facilitan esta tarea, son los editores multifunción de páginas web, como es el caso de Nvu, editor en software libre que utilizamos este año. Estas aplicaciones automatizan y facilitan la inserción de las diferentes marcas XHTML a través de botones y barras de menús, haciendo fácil e inteligible su comprensión y presentando un modo de visualización en tiempo real de lo que hacemos (WYSIWYG - What You See Is What You Get, " lo que ves es lo que obtienes (el resultado)").

Elementos de XHTML A las instrucciones del lenguaje XHTML las denominaremos elementos y los distinguiremos entre tres tipos diferentes.

Elementos dobles Estos son los que están formados por marcas o etiquetas de inicio y de final. En XHTML, como en HTML o XML, estas etiquetas quedan delimitadas por los símbolos < (menor que) y > (mayor que). La etiqueta final del elemento sólo se diferencia en que tiene una barra (/) justo antes del nombre de la misma. De esta manera un texto "marcado" tendrá un aspecto como el siguiente: texto normal <etiqueta> texto afectado por la marca </etiqueta> más texto Por ejemplo si el texto afectado está en cursiva pondremos:

texto normal <em> texto afectado por la marca </em> más texto

Elementos simples Estos elementos no precisan de la etiqueta doble final según se especifica en la DTD ( Document Type Definition ) propia de XHTML, pero como todas las etiquetas han de estar obligatoriamente cerradas tendremos que ponerlas en su forma correcta. Para ello, al ser elementos simples se cierran de una forma específica: <etiqueta|espacio|barra> <img />, <br /> y <hr /> Es importante notar que la etiqueta img necesita obligatoriamente una serie de atributos para que pueda realizar su función específica dentro de la página. Esto lo veremos más adelante cuando hablemos de los gráficos.

Elementos con argumentos La mayoría de los elementos que forman las etiquetas XHTML, pueden tener lo que se denominan argumentos , a los que llamaremos atributos , que sirven para modificar el comportamiento o añadir propiedades a las etiquetas. Los atributos encierran valores numéricos o alfanuméricos que han de ir siempre entrecomillados con comillas dobles. Este es su formato: <etiqueta atributo="valor">... Por ejemplo: <table border="0" cellspacing="2" width="100%"> CORRECTO <table border=0 cellspacing=2 width=100%> INCORRECTO Guía de referencia XHTML W3C Acceso a la guía de referencia creada por la oficina española del W3C. Validador del código (W3C) Es fundamental validar el código de nuestras páginas para verificar que no estamos comentiendo errores en las mismas. Sólo así podremos crear sitios web interoperables y acorde al estándar que tengan una cierta perdurabilidad temporal futura.

Reglas importantes a seguir en XHTML Para poder crear documentos válidos y bien formados deberemos observar algunas normas que son fundamentales para recordar:

Hemos de incluir siempre la declaración de tipo de documento al inicio de las páginas (lo veremos más adelante en profundidad). Todas las etiquetas y atributos deben escribirse en minúsculas ya que para XHTML esto es obligado. Se deben cerrar todas las etiquetas del lenguaje, sin excepción. Hay que anidar correctamente las relaciones jerárquicas entre etiquetas para poder decir que el documento está bien formado. Por ejemplo:

<p><em> texto afectado </p></em> INCORRECTO <p><em> texto afectado </em></p> CORRECTO Todos los valores de los atributos deben ir entrecomillados sin excepción. Los atributos de una etiqueta siempre han de cumplir con la clave atributo="valor", no pudiendo minimizarlos como se ha venido haciendo con HTML con algunos de ellos. Por ejemplo:

<option value="valor" selected> INCORRECTO <option value="valor" selected="selected"> CORRECTO Hay que tener presente que XHTML está pensado para estructurar contenidos y determinar su significado y no para conseguir un formato visual, esto quedará en manos de las hojas de estilo. Con ello existen algunas etiquetas que ya podemos olvidar si hemos trabajado previamente con HTML, como pueden ser <center>, <font>, <applet> o <u>.

Etiquetas en desuso Las etiquetas que ya están en desuso son las indicadas por el W3C bajo el concepto ' deprecated ', y aunque ello no implica que no sean interpretadas, sí significa que más adelante pasen a ser obsoletas y por lo tanto ignoradas.

Utilización de caracteres especiales El uso de signos gráficos o el código ASCII en la creación de páginas web, es necesario si pretendemos hacer legible al 100% nuestros contenidos a toda la comunidad internauta. Hemos de pensar que existen diferentes sistemas operativos en los ordenadores conectados a la red, y que éstos ejecutan una serie de órdenes de entre las cuales está la del reconocimiento de los caracteres de teclado para mostrarlos en pantalla. No todas las tablas de juegos de carácter son iguales para todos los sistemas, pudiendo variar ostensiblemente de uno a otro. Este problema es muy evidente en vocales acentuadas, o ciertos caracteres como la Ñ, lo que no implica que renunciemos a ellos, sino que deberemos substituirlos por unos códigos especiales. Para evitar este problema, existen diversos estándares y el más extendido es el ASCII. De hecho, actualmente todos los ordenadores tienen la misma tabla ASCII para los primeros 127 caracteres. Pero esa tabla no contiene vocales con acento, ni eñes, ni símbolos de abrir interrogación o exclamación, etc. Desde la aparición de la versión HTML 2.0, se escogió como tabla estándar la ISO-Latin-1, que comparte con la ASCII los 127 caracteres e incluye unos cuantos más hasta el número 255. En la tabla siguiente se muestran los códigos que se deberán introducir para los caracteres más usuales. El código del carácter específico se puede insertar mediante el juego de funciones [alt] +número de código, mientras que la escritura en XHTML del carácter seleccionado se debe teclear. Así, si queremos incorporar el signo "~" deberemos ejecutar la función [alt]+126, mientras que si queremos incorporar una vocal acentuada "é", deberemos incorporar el código "é". IMPORTANTE : El carácter & se considera reservado para el propio lenguaje porque marca el inicio de una entidad, por lo que si se incluye dentro de nuestro código, cuando lo validemos nos dará como resultado un error. Es muy común encontrarlo en direcciones de enlaces como elemento concatenador de variables de una página generada dinámicamente, por ejemplo: <a href="buscar.cgi?capítulo=1 & sección=2 & sección=3">...</a> por lo que habremos de substituirlo por &

<a href="buscar.cgi?capítulo=1 & sección=2 & sección=3">...</a> En la siguiente tabla podemos ver la correspondencia entre los caracteres ASCII y su modo extendido para HTML Tabla de caracteres y símbolos en ASCII y HTML

Estructura de un documento Las reglas a seguir para crear un documento XHTML son simples. Al ser una adaptación de la versión 4.01 de HTML (basada en SGML) al formato XML (también basado en SGML), la mayoría de las características no han cambiado. Solamente unas pocas nuevas reglas fueron implementadas que harán al documento compatible con XML y algunos otros cambios pensados para transformar al lenguaje en uno semántico. Veamos que elementos son necesarios para generar un documento XHTML estándar.

La declaración XML Como las páginas creadas bajo la sintaxis de XHTML siguen una serie de normas sintácticas propias de XML, lo primero que deberemos indicar es a qué versión de XML hacemos referencia en primera instancia y la codificación de caracteres que el documento va a utilizar. Se forma de la siguiente manera: <?xml version="1.0" encoding="ISO-8859-1"?> El problema que presenta el uso de dicha declaración es que no permita la compatibilidad de nuestras páginas en navegadores antiguos, por lo que en la mayoría de casos no se incluye, dejando la especificación de codificación de caracteres (ISO-8859-1) en manos de una declaración meta dentro de la cabecera de la página (lo veremos más adelante). <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

La declaración de tipo de documento (DTD) Los documentos XHTML deben tener siempre una declaración de tipo de documento. Recordemos que XHTML es un lenguaje subconjunto de SGML ( Standard Generalized Markup Language ) creado para poder definir documentos estructurados en base a un lenguaje de marcas. Por ello, hereda la declaración que permitirá que el validador de sintaxis interno de un navegador web identifique el DTD ( Document Type Definition ) de XHTML y verifique que el documento es sintácticamente correcto. Una DTD define de forma estructurada todos los elementos, atributos y las relaciones que se establecen entre ellos y que permiten configurar un documento válido en función de la sintaxis definida. A continuación mostramos las definiciones de documento para la versión de XHTML 1.0 y XHTML 1.1: XHTML 1.0: Strict : se utiliza en combinación exclusiva con hojas de estilo CSS, separando completamente el formato de los contenidos. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional : se utiliza cuando queremos incluir alguna etiqueta de formato dentro del documento. Esto es indicado cuando queremos que nuestras páginas se vean en algunos navegadores con problemas de interpretación correcta de las hojas de estilo. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset : se utiliza cuando queremos dividir la pantalla en marcos o frames . <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1 Document : para la última versión 1.1. En la actualidad ya existe el borrador de XHTML 2.0 especificado en julio de 2006. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Este recurso os presenta una serie de plantillas formateadas con código limpio que podréis copiar y pegar en vuestro editor para configurar una página web como plantilla en base a un tipo de documento adecuado. Reference: HTML 4.01, XHTML 1.0 and XHTML 1.1 Conforming Templates

El elemento raíz La siguiente etiqueta ha de ser <html> , denominada elemento raíz, que se cerrará al final del documento con la correspondiente </html> . Esta etiqueta sirve como identificación del contenido del fichero que se publicará en un entorno web, que será XHTML, y el idioma que utilizaremos de base, en nuestro caso si es el español el código a especificar será "es". Otros códigos cercanos: "ca" catalán, "gl" gallego, "eu" euskera, "en" inglés o "fr" francés. Su formato como sigue: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

La cabecera del documento Después de esta etiqueta raíz, le sigue la cabecera del documento <head> y </head> , que contiene información sobre la página que no será visualizada en el contenido físico de nuestros documentos. Entre estas etiquetas podemos incluir: -

El título del documento, <title> título </title> , que proporciona el nombre del documento en la barra de estado superior del navegador. Es importante no olvidarla porque es el texto con que se guarda como nombre de la página cuando la agregamos a nuestros "Favoritos". Además, cuando imprimimos el documento, es la información que aparece en la parte superior izquierda que identifica el texto y, es también, el nombre que se mantiene en la opción de historial de navegación del navegador. Metainformación, <meta> , mediante etiquetas que proporcionan a nuestra página una información adicional sobre el documento que no se puede expresar mediante otros campos anteriores. Sirve básicamente para proporcionar datos al servidor de HTTP para que pueda generar campos y tipos de cabecera (p.e. juego de caracteres ISO 8859-1), o bien para que el propio creador de las páginas añada información como el autor, descripción de contenidos o palabras clave que serán ponderadas en primera instancia por los motores de búsqueda. Así

por ejemplo podemos tener: <meta http-equiv="content-type" content="texto/html; charset=iso-8859-1" /> <meta name="author" content="David Maniega" /> <meta name="keywords" content="documento,digital,edición,web,internet,html" /> <meta name="description" content="Con este tutorial conoceremos las etiquetas básicas de XHTML para la creación de documentos estándar" /> Debemos fijarnos que las etiquetas <meta> son elementos simples, por lo que deberemos cerrarlos mediante la barra final para evitar problemas en la validación de nuestras páginas: <meta tipo de elemento contenido del elemento /> -

Elementos de scripting , <script> , es decir, piezas de código de lenguajes de programación como javascript que se necesiten incluir al inicio de la página para poder posteriormente activar las diferentes funciones que incluyan. Elementos de complemento, <link> , que nos permite enlazar otros archivos alternativos o complementarios al documento, como pueden ser los ficheros de las hojas de estilo que vinculamos a nuestras páginas, su regla para este cometido que es el que nos interesa en este momento es: <link href="hoja_de_estilo.css" rel="stylesheet" type="text/css" /> Elemento de estilo, <style> , con el que podremos definir reglas de estilo embebidas para dar formato al documento, sólo es conveniente utilizar esta forma si queremos aplicar una regla puntual en una página. Lo ideal es tener definidas todas las reglas de estilo en un fichero externo vinculado en cada página.

Edición de páginas web: las meta-tags Tutorial explicativo sobre las meta-tags para la publicación de documentos web Generador de META-TAgs Mediante este generador automático de meta-tags podrás crear los elementos necesarios para el buen funcionamiento de tu página web El uso ilegal de metaetiquetas y el word stuffing Interesante artículo de Javier Hernández Martínez, abogado especialista en Derecho de Internet y de las Nuevas Tecnologías, donde podrás aprender algunos conceptos sobre las infracciones en el uso de metaetiquetas.

Ejercicio 1 Vuestra primera página web. A continuación iremos haciendo diferentes prácticas con las que iréis añadiendo elementos a vuestros primeros documentos en XHTML. Para diseñar y practicar lo aprendido podemos hacerlo con el editor Kompozer (evolución de Nvu) que podéis descargar desde esta página . Kompozer - NVU es un editor gráfico que permite trabajar de forma sencilla con diferentes elementos, ver el código XHTML generado por nuestras acciones y previsualizar el resultado final. Guía para instalar el paquete de la versión en español del editor . Desde esta página podréis

descargaros el módulo de traducción al español del editor. Descargad primero el instalador y luego seguid las sencillas instrucciones de la página paso a paso. Curso de creación de páginas web con NVU Tutorial descriptivo que se presenta como una guía de iniciación muy completa (sirve para Kompozer). Manual de diseño web con NVU . Manual sencillo que nos muestra cómo movernos por las opciones de este editor. Kompozer user guide . Manual del editor compatible con NVU. Antes de comenzar debéis crear un directorio en la unidad C: , que lleve por nombre xhtml . Aquí se deberán grabar las páginas que vayamos elaborando, unas 2 ó 3. Una vez hecho esto, abriremos el editor y crearemos la página principal mediante estos pasos: 1. Podréis ver que por defecto el editor crea una nueva página en blanco que nos puede servir para comenzar a trabajar. Si queréis la podemos eliminar y crear una nueva aunque el efecto será el mismo. Para ello debéis ir al menú y seleccionad la siguiente secuencia Archivo > Nuevo > Seleccionar la opción por defecto "Un documento vacío" . También es posible realizar esta acción desde el botón

o con las teclas Ctrl + N 2. Podréis ver que aparecen en la parte inferior cuatro pestañas: "Normal", "Etiquetas HTML", "Código fuente" y "Vista preliminar". La primera es la vista básica donde podemos incluir elementos como si de un editor de textos se tratara, en la segunda veréis cómo dentro de la página se marcan las diferentes etiquetas de cada sección o elemento, en la tercera podréis acceder al código fuente de lo que vayáis realizando y por último, la vista preliminar es el resultado tal y como se verá una vez hayáis traspasado la página al espacio del servidor web vía FTP. Nota: es muy importante para estas prácticas que vayáis viendo el resultado de las diferentes acciones en la pestaña "Código fuente" donde se puede ver el código en formato HTML. Para ello haced clic sobre dicha pestaña, así podréis familiarizaros más con las etiquetas que estamos trabajando. 3. Id al menú y seleccionad la siguiente secuencia Formato > Título y propiedades de la página . Aparecerá un cuadro de diálogo con diferentes opciones básicas de la página. En la opción General rellenad los campos Título, Autor y Descripción.

4. Escoged también los diferentes colores que queréis aplicar por defecto al cuerpo de vuestra página. Esto lo podéis hacer desde la opción " Formato > Fondo y colores de la página " que viene por defecto con una serie de atributos. 5. Una vez hecho esto presionad el botón Aceptar, con esto tendréis la base de vuestro primer documento. 6. Visualizad el resultado de estas acciones en formato HTML desde la pestaña inferior "Etiquetas HTML". 7. Guardad la página en el directorio que habéis creado anteriormente con el nombre " inicio.html ". Archivo - Guardar o bien desde el botón

8. Ya tenéis vuestra primera página definida. Si la llamáis desde vuestro navegador, veréis que no ha de tener contenido, solamente ha de aparecer el título en la barra de estado del navegador. También podréis visualizar el resultado si presionáis sobre la pestaña "Vista preliminar".

Formato y apariencia física básica Formato del cuerpo Ya sabemos que para indicar el contenido de los documentos lo debemos hacer en el cuerpo, entre las etiquetas <body> y </body>, pero se pueden establecer algunos aspectos que queramos sean genéricos a todo el documento. De esta manera la etiqueta body nos permite definir unas propiedades de estilo que afecten a toda la página, como puede ser el color de fondo, el color del texto, su familia tipográfica, tamaño, etc. Para especificar estos valores los haremos directamente a partir de una hoja de estilo CSS. Sobre el formato para definir los colores que afectan a todos los contenidos y elementos de las páginas web, podemos indicar que se identifican mediante el nombre del color en inglés (256 colores) o bien mediante el código tipo RRGGBB, que son valores hexadecimales comprendidos entre 00 y FF, que especifican el grado de saturación del color rojo, verde y azul. En este punto es necesario comentar que con las hojas de estilo podremos especificar el color de primer plano y de fondo para cada elemento de nuestras páginas, ya sea a nivel individual como

genéricos. Para profundizar sobre este aspecto nos remitiremos a la unidad 1.7 "Diseño y creación de sitios web con CSS" donde se hablará de ello con mayor detalle. Ahora, y a modo de ejemplo, vamos a mostrar cómo se transforman las equivalencias de valores de color e imagen de fondo asociados en HTML a la etiqueta <font> y a los atributos de color e imagen de fondo de <body> declarados en desuso para XHTML: <body style="color:#000000;background-color:#4466GG;"> Vemos que "color" marca el color del elemento en primer plano (texto de la página) y "backgroundcolor" el del fondo. Si queremos insertar una imagen de fondo lo haremos con la propiedad siguiente: <body style="background-image:url(iconos/fondo_pagina.gif);"> Mediante esta página podréis hacer diferentes combinaciones de colores con sus valores en código hexadecimal preparado para insertar en vuestras páginas web: Control de colores para páginas web: fondo y texto

Definición de separadores y bloques de texto Existen diversas etiquetas que afectan directamente a la funcionalidad del texto, tanto a nivel particular de ciertos caracteres como a todo un párrafo o bloques de texto. Estas etiquetas nos sirven para separar y marcar los bloques de texto según diferentes significados. Estos son: -

Salto o cambio de línea: <br /> , equivale a hacer un retorno de carro, no necesita marca de cierre ( </br> ). Salto de párrafo: <p>...</p> , sirven para estructurar el contenido. Su efecto visual provoca un salto de párrafo dejando una línea en blanco entre bloques. Tabulación y sangrado de citas: <blockquote>...</blockquote> , utilizado para citaciones largas. Tabula párrafos por la izquierda y la derecha. Bloque o sección: <div>...</div> , sirve para definir secciones de una página y aplicarles propiedades de estilo CSS, de forma que definimos estilos de una vez a todo un bloque de la página. Texto preformateado: <pre>...</pre> , indica que el contenido está preformateado, de forma que el texto será respetado por el navegador tal y como ha sido generado por un procesador de textos, o sea, respetando los saltos de línea y retornos de carro originales. Separador horizontal: <hr /> ,sirve para delimitar o separar contenidos de forma gráfica con una línea. Su representación es una línea horizontal que nosotros podemos configurar con diferentes atributos controlados mediante hojas de estilo. Comentarios:  , son bloques de contenido no visible en la página pero sí desde el código fuente. Sirven para comentar partes del código o para especificar indicaciones útiles en partes del código no muy extensas.

Etiquetas de formato Con el siguiente grupo de etiquetas y atributos, se pueden modificar las diferentes características que afectan física y semánticamente los contenidos de las páginas. De la misma manera, aprenderemos a definir los diferentes estilos físicos y lógicos que pueden afectar al texto para destacar partes del contenido.

Encabezamientos o títulos Debemos tener presente, que por defecto el texto tratado entre estas etiquetas siempre se presentará en negrilla y, que además tiene como complemento implícito que ejecuta por sí mismo un salto de párrafo, lo que equivaldría a la marca <p>. Estos efectos se pueden modificar sin problemas mediante propiedades de estilo CSS. La etiqueta <hn> y </hn> la utilizamos para incluir encabezamientos en los documentos de forma que podamos agrupar la información. Esta etiqueta asigna un valor semántico de importancia del contenido en función de una variable (n) que varía en una horquilla de importancia de 1 (mayor importancia) hasta 6 (menor importancia). Así, por ejemplo, asignaremos una etiqueta <h1>título</h1> a un título principal y un <h2>subtítulo</h2> al secundario.

Estilos de caracteres Al texto le podemos aplicar diversos efectos gracias a una serie de etiquetas que definen los estilos físicos y los lógicos que sirven para destacar o remarcar partes del contenido.

<em>...</em> , s irve para enfatizar un contenido. El navegador representará el texto en cursiva. Substituye a la desaconsejada etiqueta física <i>...</i> de HTML. <strong>...</strong> , si queremos dar un énfasis mayor al contenido esta será nuestra etiqueta. El navegador representará el texto en cursiva. Substituye a la desaconsejada etiqueta <b>...</b> de HTML. <tt>...</tt> , representa como texto de teletipo o ancho fijo, similar al de una máquina de escribir. <kbd>...</kbd> , sirve para indicar que el texto que encierra debe ser tecleado por el usuario. <code>...</code> , sirve para designar un fragmento de código de programación. Ideal para incluir ejemplos de código en una página. Está relacionada con <samp>...</samp> , destinada a incluir código de ejemplo. <address>...</address> , sirve para marcar la información de contacto con el autor del contenido. <cite>...</cite> , determina que el contenido encerrado es una cita. A diferencia de <blockquote> no la crea en un bloque sino que la integra en línea, es decir, dentro del mismo contenido. Su apariencia por lo general es en cursiva. <acronym>...</acronym> , determina que el contenido encerrado es un acrónimo. Sirve para desglosar o explicar su significado. Una etiqueta relacionada con esta es <abbr>...</abbr> , que determina que el contenido es la abreviatura de algo. Ambas etiquetas necesitan el atributo title="descripción" para que al pasar el ratón por encima nos aparezca una caja de texto con el desglose de dicha descripción de su significado. <del>...</del> , sirve para marcar las diferencias entre versiones de contenidos, su aspecto visual, tachando el contenido nos deja ver claramente su funcionalidad. Substituye a la obsoleta <strike> ... </strike> . <sup>...</sup> , sirve para indicar el superíndice, por ejemplo para incluir la fórmula de metro cuadrado o cúbico de forma correcta. <sub>...</sub> , similar a la anterior, el subíndice sirve para indicar fórmulas como las químicas, H2O

Por último, comentar que la etiqueta <u>...</u> para subrayar contenido está cayendo en desuso y no se recomienda su aplicación ya que puede comportar una gran interferencia con la interpretación de ser un enlace aquello subrayado. Actualmente su utilización está más enfocada a la definición de

propiedades de un elemento en la hoja de estilos, sustituyéndose por ejemplo por: <span style="text-decoration:underline;">Texto subrayado</span>

Ejercicio 2 Ahora empezaréis a llenar la página principal con diferentes contenidos. Estos pueden ser escogidos a vuestro gusto, pero en todos los casos han de tener consistencia y ser coherentes. 1. Abrid la página " inicio.html " desde el editor. 2. Poned un título destacado en el cuerpo de la página que defina lo que en ella vais a introducir. Para ello debéis tener activada la barra de iconos de formato. Si no está activa seguid estos pasos: desde el menú seleccionad Ver > Mostrar/Ocultar > Barra de formato

3. Ha de aparecer la siguiente barra: En la primera casilla desplegable escoged el tipo de encabezado (Header) que deseéis (se muestra bajo los epígrafes "Título 1,2,3..."). 4. A continuación escribid un párrafo introductorio de unas tres o cuatro líneas donde se explique el contenido de vuestra página a modo de resumen. Dentro de este texto podéis incluir diferentes estilos físicos. Lo más importante es que este texto esté sangrado un nivel. Para ello seleccionad desde el menú Formato > Incrementar sangría o bien haced clic en el botón

5. Después de esto, insertad una línea a vuestro gusto. Nos servirá para separar diferentes bloques. Para ello, seleccionad desde el menú Insertar > Línea horizontal . Para ajustar las propiedades de la línea, seleccionadla y con un clic en el botón derecho aparecerá la opción Propiedades de línea horizontal que abre una caja de edición de opciones de línea. 6. Observad el código XHTML generado desde la pestaña inferior "Código fuente". 7. Guardad la página con los cambios efectuados.

Definición de listas

Mediante las listas podemos organizar la información textual para estructurarla de una forma clara y concisa. Las hay definidas en base a tres tipos: las listas no numeradas o desordenadas, las ordenadas con numeración y las de definición. Existen un par de etiquetas que pautan el inicio y el final de la acción de las listas, donde el texto queda afectado por éstas, pero se incorpora una novedad, que es que se debe indicar otra etiqueta para indicar donde comienza cada elemento de la lista.

Listas no numeradas En el caso de las listas no numeradas, las marcas delimitadoras son <ul> y </ul> , y para determinar las entradas individuales para cada elemento utilizamos la etiqueta <li> y </li> , que automáticamente incluye un salto de línea al final de la definición de cada entrada sin tener que especificar la etiqueta <br />. Visualmente marcan cada entrada con una viñeta que podremos modificar con hojas de estilo. -

Primer elemento Segundo elemento Tercer elemento

<ul> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ul>

Las listas tienen por defecto puntos gruesos para cada elemento que pueden ser modificados con la propiedad "list-style-type" para la etiqueta genérica <ul> o específica para <li>. Estos valores a la propiedad son: disc | circle | square

Listas numeradas u ordenadas Las listas numeradas u ordenadas quedan delimitadas por las marcas <ol> y </ol> . Igual que sucede con las no numeradas, la marca que delimita la acción dentro de la lista es <li> y </li>, pero estableciendo una numeración correlativa: 1. Primer elemento 2. Segundo elemento 3. Tercer elemento

<ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li> </ol>

Las listas numeradas u ordenadas no sólo se pueden ordenar por números, sino también con letras o numeración romana, tanto en mayúsculas como minúsculas gracias a la propiedad "list-style-type" para la etiqueta genérica <ul> o específica para <li>. Estos valores a la propiedad son: decimal | lower-roman | upper-roman | lower-alpha | upper-alpha

Listas de definición Las listas de definición, son listas no numeradas en las que se da una descripción a cada uno de los elementos que la forman. El ejemplo más normal es el glosario. Estas listas están definidas por los siguientes elementos: <dl> , define el inicio de la lista y englobará dos marcas más (<dt> y <dd>). <dt> , precede a cada elemento de la lista que no ha de pasar de una línea. <dd> , determina la definición del elemento de cada ítem. Cada línea que ocupe la definición, quedará sangrada a la derecha. Tampoco tiene necesariamente final de marca.

Elemento definición del elemento

<dl> <dt>Elemento</dt> <dd>Definición del elemento </dd> </dl>

Ejercicio 3 En este momento vamos a definir un sumario de contenidos. Lo haremos mediante una lista numerada . 1. Abrid la página " inicio.html " desde el editor. 2. Situad el cursor por debajo de lo último que habéis añadido. 3. La lista debe ser numerada con números o letras, según más os guste, cread por lo menos 5 elementos. Os podéis ayudar del menú Formato > Lista > Numerada . Una vez creada la lista podréis configurar todas las características de ésta, tanto en estilo como en formatos de viñeta o número según vuestras preferencias seleccionando los diferentes elementos de la lista y haciendo clic en el botón derecho se abrirá un menú donde escoger la opción "Propiedades de la lista...".

También se puede realizar haciendo clic en uno de los dos botones

que encontramos en la barra de herramientas. 4. Guardad la página con los cambios efectuados.

Creación de hipervínculos Los enlaces son una de las mejores opciones que ofrece el lenguaje XHTML en el entorno virtual, que permite una navegación completa y global. Para obtener esto utilizamos los hiperenlaces o links mediante la etiqueta <a> y sus atributos que pasamos a ver:

href ="url donde queremos ir" , define el nexo de partida de un enlace que nos llevará a otra página o recurso. Si la url a la que enlazamos es externa no debemos olvidarnos de poner el

protocolo de lanzamiento http:// sino no funcionará el enlace, por ejemplo: <a href= http://www.upf.edu/ title="Acceso a la web de la universidad">UPF</a> title="descripción" , este atributo nos permite aportar metainformación al enlace al poder incluir una descripción sucinta del sitio web a donde saltaremos. No hay que poner el texto del propio enlace. id="referente" , define enlaces internos dentro de una misma página. Determinaremos así el punto de destino especificado en el nexo de partida. Funciona como una marca en el texto o parte del documento al que apuntar desde el nexo href. Como vemos la clave es el uso de la parrilla "#" seguida del nombre del ancla o identificador: <a href="pagina.html#ejemplo" title="información">Parte del documento donde queremos ir </a><a id="ejemplo" /> Lugar donde saltará el enlace anteriormente definido IMPORTANTE: en HTML este elemento se llama "name" y no "id".

Pensemos que podemos hacer un enlace a cualquier parte o elemento de un documento web, ya sea texto, una imagen, un espacio en blanco, etc.

Ejercicio 4 Dentro del sumario que habéis creado anteriormente, incluid un enlace o hipervínculo real. Por ejemplo, si hacemos un sumario donde se han listado diferentes universidades españolas, crearemos un hipervínculo a alguna de estas universidades que después comprobaremos en el navegador. Aseguraos de poner la url correcta. 1. Abrid la página " inicio.html " desde el editor. 2. Situad el cursor por debajo de lo último que habéis añadido.

3. Incluid un hipervínculo mediante la etiqueta <A HREF>, no olvidéis que el valor del atributo ha de ir entrecomillado. Os podéis ayudar del menú Insertar > Enlace... para crear la etiqueta o bien haced clic en el botón .

Recordad que si marcáis previamente el texto que ha de ser afectado por el hipervínculo, las etiquetas se sitúan correctamente en el texto cuando lo seleccionáis como enlace NOTA: si queréis que el enlace se abra en una ventana nueva, haced clic en el botón "Más

propiedades" dentro de la caja de edición del enlace. Veréis una casilla llamada "Destino" donde nos dice: "El enlace se abrirá", podemos marcarla y escoger del desplegable la opción "En una ventana nueva".

4. Guardad la página con los cambios efectuados, pero no la cerréis. 5. Para crear un enlace interno dentro de vuestro propio documento escribid un texto largo, inventado o citación, en el cual incluid varios saltos de línea y de párrafo. Ahora podríais escoger un tipo de letra más grande para poder ocupar mayor espacio en el documento. Como mínimo debe tener 15 líneas. 6. Dentro de este texto, debéis incluir letras de diferentes tipografías y colores, como mínimo tres diferentes (Ayudaros de los botones de la barra de botones Formato) 7. Guardad la página con los cambios efectuados, pero no la cerréis. 8. Colocad el referente en aquella parte del documento a la cual queréis que salte cuando se active el enlace interno desde el sumario. Os recomiendo que sea en alguna parte del texto último que habéis introducido para que podáis ver el efecto real. Os podéis ayudar del menú Insertar > Enlace interno... , para crear la etiqueta seleccionando la palabra o texto que sirve de referente antes de ejecutar la acción del menú. 9. Ahora situad el cursor en un epígrafe del sumario que habéis realizado anteriormente y seleccionad aquella palabra o frase que sirva de nexo y que defina un referente dentro del documento a donde saltar. Os podéis ayudar del menú Insertar > Enlace... , para crear el nexo de partida. Debéis rellenar únicamente el campo Ubicación del enlace : donde debéis escoger del desplegable uno de los nombres de los marcadores o anclas previamente definidos. Veréis que el campo URL tiene este formato " #nombre del marcador " 10. Guardad la página con los cambios efectuados.

Insertar imágenes La inclusión de imágenes en las páginas web las hace más atractivas, y permite una creación mucho más visual e incluso más intuitiva según el caso aunque conviene medir su utilización y no abusar de ellas. Tenemos dos formas de mostrar una imagen, la primera sería visualizándola directamente cuando se carga la página y, una segunda opción mediante un enlace que la importe. Existen diversos formatos de imagen, pero los que son directamente interpretados por los navegadores son el formato .GIF (de 256 colores ideales para iconos, admite el efecto de transparencia), .PNG (navegadores de nueva generación, alta definición, canal-alpha para transparencia y excelente compresión) y .JPG (para imágenes de muchos colores como fotografías, pero sin transparencia). La etiqueta designada para incluir las imágenes es <img> , que va asociada al atributo src=".." con el cual determinamos el camino donde tenemos la imagen a incluir, con la ruta donde está la imagen

almacenada más el nombre de la imagen. <img src="imagenes/modulo1ndd/w3c.gif" />

Si nos equivocamos al introducir el URL de la imagen, o navegamos con la opción de carga automática de imágenes desactivada, el navegador nos mostrará la siguiente apariencia indicativa de error o imagen no cargada: <img src="w3c.gif" />

Esta etiqueta admite también otros atributos que la perfeccionan: -

alt="descripción de la imagen" , define un texto alternativo a la imagen que la substituirá en caso que el navegador no la pueda visualizar. También se visualiza cuando se sitúa el ratón sobre la misma. Es obligatorio para garantizar la accesibilidad. title="información" , de la misma forma que en los enlaces, podemos incluir el atributo title para aportar metainformación a la imagen, generalmente utilizado cuando son enlaces de forma que podamos vincular los atributos de la imagen mediante alt y su funcionalidad mediante title . width="n" , define la anchura de la imagen (medida real en píxeles). height="n" , define la altura de la imagen (medida real en píxeles).

Ejercicio 5 Ahora, desde este mismo documento haremos un enlace a otro documento nuevo que vamos a crear. Para activar este enlace lo haremos desde una imagen. 1. Cread una nueva página en blanco siguiendo los primeros pasos anteriores del ejercicio 1. 2. Guardad esta página con el nombre " curso.html ". 3. Abrid la página "inicio.html" y situad el puntero después de la última modificación añadida. 4. Insertad una imagen que habéis podido capturar previamente de cualquier web, escogerla de los recursos gráficos que de la galería de imágenes que tengáis en el ordenador o directamente de Internet. Si aplicáis una imagen desde una ubicación diferente a donde estamos guardando los ejercicios, veréis que la ruta de acceso a la imagen no está dentro de vuestro directorio de ejercicios "HTML". Para que esto sea así, cread una carpeta llamada " iconos " dentro de este directorio. Aquí grabaréis las imágenes que vayáis a utilizar en las páginas. Recordad que este directorio también tendréis que

traspasarlo al servidor para que desde el navegador pueda encontrar la ruta de las imágenes.

Esta imagen debe ir centrada en la página. Os podéis ayudar del menú Insertar > Imagen o bien haciendo clic en el botón 5. Cuando insertemos una imagen aseguraos de asignar un texto alternativo a la imagen (atributo ALT) en el campo correspondiente. Si no lo rellenáis, el editor mostrará una ventana de alerta donde nos indica que no lo hemos puesto. En caso de quererlo modificar una vez incluida la imagen, bastará hacer doble clic sobre la imagen y aparecerá el menú flotante con las características de definición de la imagen.

6. Seleccionad la imagen con un clic encima de ella, veréis que aparecen unos puntos de limitación, insertad un vínculo desde Insertar > Enlace , veréis que os lleva a la última pestaña de la caja de edición de imágenes donde podréis determinar el enlace. El valor de enlace o ruta ha de ser el nombre de la página que habéis creado anteriormente " curso.html ". Ahora la imagen es a la vez un enlace. 7. Guardad la página con los cambios efectuados. 8. Visualizad la página desde el navegador y observad qué sucede con el cursor cuando lo pasáis por encima de la imagen. Comprobad que el enlace funciona correctamente.

Creación de tablas Las tablas se estructuran mediante una serie de etiquetas, todas ellas con su correspondiente elemento de cierre, que son <table> (marca el inicio de la tabla), <tr> (marca el inicio de una fila) y <td> (marca el inicio de una celda). Además de estos, se pueden poner títulos a las tablas mediante la etiqueta <caption> , así como definir títulos de cabecera específicos para las columnas que se definen con la etiqueta <th> . Veamos más a fondo las principales etiquetas para generar una tabla. Hay que tener muy presente que las tablas no las debemos utilizar para crear estructuras o maquetación, no es esta su finalidad, sino la de presentar datos tabulares. <table> Permite la obertura y definición de una tabla y puede tener una serie de atributos que

condicionan el aspecto final de esta. Estos son: -

border="0,1,2,3...", define el grosor del borde externo, si el valor es 0 no tendrá ninguno cellpadding="1,2,3...", define el espacio alrededor del texto de una celda cellspacing="1,2,3...", define el espacio entre celdas summary="información", define un texto que describa el contenido de la tabla Aspectos como el color de fondo, la anchura o la altura de una tabla se definen desde las propiedades CSS atribuibles.

<td> Delimita el inicio y final de una columna, es decir, define el contenido físico de una celda. Admite diferentes atributos: -

colspan="1,2,3...", fusiona tantas columnas como especifiquemos en sentido horizontal rowspan="1,2,3...", fusiona tantas filas como especifiquemos en sentido vertical nowrap="nowrap", obliga al navegador a inscribir todo el texto de una celda en una línea sin salto

Ejemplos de construcción de tablas Desde esta página podréis ver diferentes ejemplos de creación de tablas mediante las etiquetas y atributos que hemos visto en el artículo de la unidad

Ejercicio 6 Desde la segunda página que habéis creado, vais a realizar una tabla y un formulario simples. Vamos allá. 1. Editad la página " curso.html ". 2. Cread una tabla que tenga 3 columnas y 4 filas. 3. Poned un título a la tabla con la etiqueta adecuada alineado en la parte superior de la tabla. 4. Dentro de las diferentes celdas que se han creado, insertad texto de manera que en alguna celda éste esté centrado, en otra alineado a la parte superior, en otra a la inferior y en otra a la derecha. NOTA: para poder ver claramente cómo se alinea el texto dentro de una celda a nivel superior e inferior, cread celdas con diferente cantidad de contenido, una que tenga bastante para poder apreciar cómo la altura de la celda crece y otra con poco para ver correctamente el posicionamiento. 5. En la segunda fila, debéis hacer que se fusionen dos celdas para formar una sola sin comprometer el resto de la estructura de la tabla.

6. Haced que toda la fila superior y sólo esta, tenga un color de fondo diferente al resto de las filas que forman la columna. Os podéis ayudar del menú Tabla > Insertar > Tabla... o bien desde el botón

activando la caja de creación de una tabla desde donde definimos las celdas que queremos que tenga la tabla.

Recordad que algunos cambios en la tabla los deberéis hacer vosotr@s mism@s desde el código fuente para personalizarla. 7. Guardad la página con los cambios efectuados.

Elaboración de formularios Un formulario es una plantilla para presentar un conjunto de datos y generar páginas interactivas con cuadros de diálogo que faciliten al usuario la tarea de rellenar campos de datos y enviarlos a través de la red, generalmente al servidor, para su posterior procesamiento o a nosotros mismos mediante correo electrónico. Es importante remarcar que el uso de formularios y su procesamiento, está condicionado a la ejecución de un programa llamado CGI ( Common Gateway Interface ), que actúa de pasarela y que está escrito en lenguaje de programación o interpretado, como pueda ser Perl, C++, o bien procesados de página como PHP, ASP o JSP por ejemplo. La etiqueta para definir formularios es <form> , dentro de la cual se incluirán los diferentes campos de entrada del formulario (input, select, textarea) y se cerrará la definición del formulario mediante la etiqueta </form> . NOTA: para cada formulario sólo tendremos una única etiqueta inicial FORM y su respectiva etiqueta de cierre. Form posee diferentes atributos: method , define el método y está dirigido al programador que codifica. Las opciones posibles son, get o post que definen el modo de transferencia de los datos, y action , define el URI de un programa encargado de tratar los datos adquiridos desde el formulario. Name y/o id , define el nombre que permitirá al script del programa identificar el origen de los datos. Este nombre debe ser único. El envío de la información que se vincula a los campos de un formulario, generalmente está asociado a unos patrones de funcionamiento definidos por un CGI como hemos comentado con anterioridad, pero para poder realizar la práctica número 7 vamos a aprovechar otra fórmula mucho más sencilla que no nos complicará la vida si no sabemos cómo generar un CGI en un lenguaje de programación que puede ser compilado o interpretado, y no es el nivel que estamos tratando en esta unidad. El método es tan sencillo como indicar en el form action una dirección de correo electrónico a la que queramos que llegue la información que se introduzca en los diferentes campos. Para hacer esto, indicaremos que se envía por correo electrónico añadiendo la sentencia 'mailto:dirección de correo electrónico ', y finalmente en el method="" le indicaremos que los datos deben ser enviados como post .

De esta manera, la sentencia que tendréis que añadir al inicio de vuestro formulario, para ser más claro y conciso, sería la siguiente: <form action="mailto:xxxx@xxxx.xx" method="post"> El problema que puede comportar, es que envíe la información en una sola línea. Para solucionar esto, debemos especificar un atributo de formato de contenido con la siguiente cadena: enctype="text/plain" dentro de la etiqueta form, por ejemplo: <form action="mailto:xxxx@xxxx.es" enctype="text/plain" method="post" name="datos">

Campos de entrada <input> La etiqueta <input> definirá los campos para entrar texto y botones de opción. Es importante asignar a cada etiqueta un nombre mediante el atributo name="x" y id="x" , donde "x" es el valor de nombre asignado a la etiqueta y, que nos servirá posteriormente, para ordenar la información de los diferentes campos de manera correcta y clara. Ejemplo: <input name="hola" id="hola" /> El atributo type asociado a la etiqueta <input>, permite la selección del elemento de entrada y puede tener los siguientes valores: -

text , es la opción por defecto y define la entrada de texto simple. Si definimos un valor preestablecido value , tendremos un campo lleno de texto pero modificable por el usuario.

La anchura de la caja de texto la definimos mediante el atributo size="n" , cuya capacidad para admitir caracteres de texto es indefinida a no ser que la delimitemos a un número máximo de estos. Para llevarlo a cabo utilizamos el atributo maxlength="n" , donde "n" son los caracteres máximos permitidos para este campo de entrada de datos.<input type="text" size="25" maxlength="50" value="Creación de documentos digitales" name="datos" id="datos" />

submit , envía los datos del formulario y el texto del botón se define con el atributo value : <input type="submit" value="envía" name="enviar" id="enviar" />

reset , borra los datos que se hayan introducido en los campos del formulario, y el texto del botón se define, como en el caso anterior, con el atributo value : <input type="reset" value="Borra" name="borrar" id="borrar" />

password , asigna una contraseña de manera confidencial, donde el texto se oculta bajo asteriscos (*): <input type="password" name="clave" id="clave" />

file , crea un campo de texto con una opción de búsqueda de un fichero para poderlo subir al servidor directamente. Para su correcto funcionamiento, en el atributo enctype se deb especificar el valor "multipart/form-data". <input type="file" name="sube" id="sube" />

checkbox , crea unas casillas de verificación que permiten la selección de múltiples opciones. Se pueden preseleccionar una o diversas casillas por defecto mediante el atributo checked="checked" : <input type="checkbox" name="internet" id="internet" value="web" /> web <input type="checkbox" name="internet" id="internet" value="html" checked="checked" /> html <input type="checkbox" name="internet" id="internet" value="xml" /> xml

web html xml -

radio , crea un bloque de botones que permiten una selección exclusiva entre diversas opciones. Equivalen a campos de sí/no , donde únicamente interesa que se seleccione una opción. Para su correcto funcionamiento, todos los campos input relacionados han de tener el mismo valor para el atributo "name". Se puede preseleccionar un botón por defecto mediante el atributo checked="checked" , pero que cambia si se selecciona otro botón de radio: <input type="radio" name="nav" id="nav_ff" value="FF" checked="checked" /> Firefox <input type="radio" name="nav" id="nav_ie" value="IE" /> Internet Explorer

Firefox Internet Explorer

<select> La etiqueta <select> permite generar listas de selección simple o de selección variable. Se codifica con una lista donde los diferentes elementos se especifican mediante la etiqueta <option> . Con la etiqueta <optgroup> podremos agrupar diferentes entradas option bajo un mismo concepto o epígrafe o temática. Necesita del atributo label="descripción" para poder describir o marcar una relación de grupo. En el caso de la ventana con barra de desplazamiento y más de una opción visible, la presentación de la lista depende del atributo multiple="multiple" . Si se desea mantener una opción marcada por defecto, se utilizará el atributo selected . Veamos unos ejemplos de todo ello:

Menú despegable: <select name="sede" id="sede"> <option>UOC</option> <option>UB</option> <option selected="selected" >UPF</option> </select>

UOC UB UPF

Ventana con barra de desplazamiento: (con opción de selección múltiple) <select multiple="multiple" name="uni" id="uni"> <option selected="selected" >URL</option> <option>UOC</option> <option>UAB</option> <option>UdL</option> <option>UPF</option> <option>UB</option> </select>

name="uni"> URL UOC UAB UdL UPF UB

La longitud de la ventana de selección se autoajusta al valor más largo de la lista. <select name="lista" id="lista" multiple="multiple"> <option>UdL</option> <option>Universitat Pompeu Fabra</option> <option>UAB</option> <option>UB</option> <option>UOC</option> </select>

UdL Universitat Pompeu Fabra UAB UB UOC

<textarea> La etiqueta <textarea> permite crear una ventana con barras de desplazamiento horizontales y verticales en la que se podrá escribir texto. el valor dado a los atributos rows (líneas) y cols (columnas) delimita el tamaño de esta ventana. Tiene como atributos los posibles id , name y title , permitiéndonos este último especificar una texto que determine qué puede o debe introducir el usuario en esa caja de texto. Aparecerá al posicionar el ratón sobre el control. Es posible predefinir un texto (entre las etiquetas <textarea> y </textarea> ) que el usuario podrá cambiar o completar con su propio texto. <textarea name="comentario" id="comentario" rows="5" cols="20" title="Escribe tu opinión">Dame tu opinión sobre esta lección </textarea> Dame tu opinión sobre esta lección

Etiquetar controles Las etiquetas de los elementos ayudan a la accesibilidad y con ello a establecer las relaciones entre controles y elementos o textos relacionados. Esta es la función principal de la etiqueta <label> , que

tiene como único atributo for , que debe tener el mismo valor del atributo id del control. <label for="idnombre" >Nombre:</label> <input type="text" id="idnombre" name="nombre" /> <label for="idapellidos" >Apellidos:</label> <input type="text" id="idapellidos" name="apellidos" /> Nombre: Apellidos:

Agrupamiento de elementos Asimismo podemos agrupar diferentes campos de un formulario por sus relaciones internas o temáticas. Utilizando la etiqueta <fieldset> que agrupa en su interior a la etiqueta <legend> que determina el título visible para cada grupo de elementos. Por ejemplo:

<fieldset> <legend>Información personal</legend> <label for="idnombre">Nombre:</label> <input type="text" id="idnombre" name="nombre" /> <label for="idapellidos">Apellidos:</label> <input type="text" id="idapellidos" name="apellidos" /> </fieldset> Información personalNombre: Apellidos:

Ejercicio 7 Ahora por último, vamos a realizar un pequeño formulario a vuestro gusto con unos campos mínimos. 1. Editad la página " curso.html ". 2. Cread un formulario simple que contenga 3 campos diferentes de tipo input , y dos menús, uno desplegable y otro de tipo ventana con barra de desplazamiento, así como un campo para comentarios o sugerencias. Para ello os podéis ayudar del menú Insertar > Formulario > Campo de formulario .

3. Recordad que para poder enviar los datos que se introduzcan en este formulario, utilizaremos la fórmula que se señala en la unidad para que llegue a una cuenta de correo electrónico.

4. Guardad la página con los cambios efectuados. 5. Abrid la página inicial desde vuestro navegador y ¡comprobad vuestros avances! NOTA IMPORTANTE: recordad que para crear un único formulario solamente deberemos tener una etiqueta de apertura <form> y otra de cierre </form> , y que dentro de ellas tendremos todos los campos input, select o textarea que deseemos para nuestro formulario.

Ejercicio 8 Para finalizar todo el proceso de creación de documentos electrónicos, ahora debéis traspasar los dos ficheros al espacio de servidor asignado vía FTP. Comprobad que el resultado que veáis por pantalla es el óptimo.