HTML Daw

Ciclo Formativo de Grado Superior de Administracin de Sistemas Informticos en red
Mdulo Profesional: LMSGI Unidad de Trabajo 4.- (X) HTML

Departamento de Informtica y Comunicacin
IES San Juan Bosco (Lorca-Murcia)
Profesor: Juan Antonio Lpez Quesada
XHTML es uno de los lenguajes derivados de XML usados en las pginas web de Internet (o Intranets). XHTML est basado en HTML, pero con la diferencia que XHTML es ms estricto y de acuerdo con el estndar XML. De hecho, la primera versin del XHTML es una mera adaptacin del HTML a la sintaxis del XML. XHTML sigue muchas de las convenciones de HTML, por ende los navegadores que soporten HTML podrn ver los documentos XHTML. Con este tema se pretende proporcionar una visin general del lenguaje proporcionando los recursos externos que permitan resolver cualquier cuestin y escribiendo cdigo directamente con el fin de tener un profundo conocimiento de los tags y atributos que conforman este mundo; en cualquier caso al final de la unidad de trabajo se presentar una herramienta CASE.
Qu es (x)HTML? Especificacin oficial
Lenguajes de etiquetas Elementos (X)HTML

El futuro de Internet, X/HTML 5 vs XHTML 2
5
El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar informacin de forma global". Desde su creacin, el lenguaje HTML ha pasado de ser un lenguaje utilizado exclusivamente para crear documentos electrnicos a ser un lenguaje que se utiliza en muchas aplicaciones electrnicas como buscadores, tiendas online y banca electrnica.
El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es ms que una adaptacin de HTML al lenguaje XML. Tcnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML (que a su vez, tambin es descendiente de SGML).
6
El organismo W3C (World Wide Web Consortium) elabora las normas que deben seguir los diseadores de pginas web para crear las pginas HTML. Las normas oficiales estn escritas en ingls y se pueden consultar de forma gratuita en las siguientes direcciones: Especificacin oficial de HTML 4.01 http://www.w3.org/TR/html401/ Especificacin oficial de XHTML 1.0 http://www.w3.org/TR/xhtml1/
El estndar XHTML 1.0 incluye el 95% del estndar HTML 4.01, ya que slo aade pequeas mejoras y modificaciones menores. Afortunadamente, no es necesario leer las especificaciones y recomendaciones oficiales de HTML para aprender a disear pginas con HTML o XHTML. Las normas oficiales estn escritas con un lenguaje bastante formal y algunas secciones son difciles de comprender.
7
Para entender los lenguajes de marcas y ms concretamente (x)html nos plantearamos las siguientes cuestiones: cmo se almacena un texto en negrita? y un texto de color rojo? y otro texto azul, en negrita y subrayado? Una solucin tcnicamente viable consiste en almacenar la informacin sobre el formato del texto en una zona especial reservada dentro del propio archivo. En esta zona se podra indicar dnde comienza y dnde termina cada formato.
No obstante, la solucin que realmente se emplea para guardar la informacin con formato es mucho ms sencilla: el archivo electrnico almacena tanto los contenidos como la informacin sobre el formato de esos contenidos. Si por ejemplo se quiere dividir el texto en prrafos y se desea dar especial importancia a algunas palabras, se podra indicar de la siguiente manera:
<parrafo> Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma especial. </parrafo>
Aunque existen algunas excepciones, en general las etiquetas se indican por pares y se forman de la siguiente manera:
Etiqueta de apertura: carcter <, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carcter > Etiqueta de cierre: carcter <, seguido del carcter /, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carcter > As, la estructura tpica de las etiquetas HTML es: <nombre_etiqueta> ... </nombre_etiqueta> HTML es un lenguaje de etiquetas (tambin llamado lenguaje de marcado) y las pginas web habituales estn formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML" de la sigla HTML significan "markup language", que es como se denominan en ingls a los lenguajes de marcado.
9
(x)HTML define etiquetas que los diseadores pueden utilizar para marcar los diferentes elementos que componen una pgina: a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, ..
Algunos elementos requieren cierta informacin adicional para estar completamente definidos. Como no es viable crear una etiqueta para cada diferencia, la solucin consiste en personalizar las etiquetas HTML mediante cierta informacin adicional llamada atributos.
10
Atributos bsicos: se pueden utilizar prcticamente en todas las etiquetas. Ejemplo: style = "texto" Establece de forma directa los estilos CSS de un elemento.
Atributos para internacionalizacin: los utilizan las pginas que muestran sus contenidos en varios idiomas o aquellas que quieren indicar de forma expltica el idioma de sus contenidos. Ejemplo: lang = "codigo de idioma" Indica el idioma del elemento mediante un cdigo predefinido. Atributos de eventos: slo se utilizan en las pginas web dinmicas creadas con JavaScript. Ejemplos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Permiten controlar los eventos producidos sobre cada elemento de la pgina Atributos para los elementos que pueden obtener el foco. Ejemplo: tabindex = "numero" Establece la posicin del elemento en el orden de tabulacin de la pgina.
11
Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en realidad un elemento HTML es mucho ms que una etiqueta, ya que est formado por:
Una etiqueta de apertura. Cero o ms atributos. Texto encerrado por la etiqueta. Una etiqueta de cierre.
Lenguaje HTML clasifica a todos los elementos en dos grupos: elementos en lnea y elementos de bloque. Los elementos de bloque siempre empiezan en una nueva lnea y ocupan todo el espacio disponible hasta el final de la lnea, aunque sus contenidos no lleguen hasta el final de la lnea. Por su parte, los elementos en lnea slo ocupan el espacio necesario para mostrar sus contenidos.
12
El desarollo de Hypertext Markup Language HTML par en 1999 con la HTML 4.01, en ese momento la World Wide Web Consortium (W3C) centr sus esfuerzos en otros estndares (SGML, XML, SVG, XForms, RSS, CSS), pero durante estos 8 aos HTML ha aguantado firmemente. En estos ltimos aos se ha circunscrito el trabajo en la especificacin de XHTML (publicando su versin 1.0 en el 2000) y ahora se estaba trabajando en la versin XHTML 2.0 (an en fase borrador).
HTML 5
Lo nuevo de HTML 5 La W3C ya tiene una lista con diferencias de HTML 5 a HTML 4 que est en desarrollo todava, por ejemplo tenemos estos nuevos elementos: section, article, aside, header, footer, nav, dialog, figure, audio, video, embed, m, meter, time, canvas, command, datagrid, details, datalist, event-source, output, progress.
XHTML 2
13
14
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Documento sin título</title> </head> <body> </body> </html>
15
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> Todos los documentos XHTML vlidos deben llevar un elemento llamado DOCTYPE, el cual no es parte del documento en s, sino que define el tipo de DTD (Document Type Definition o Definicin de tipo de documento) a emplear en nuestros documentos, es obligatorio y puede ser uno de estos tres:
XHTML 1.0 Strict: Se usa cuando se desea utilizar al 100% XHTML, su nombre lo dice bien claro, es XHTML estricto, la declaracin del mismo es como sigue: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 1.0 Transitional: Es el ms usado ya que permite manejar elementos de XHTML y HTML 4.01, su declaracin es la que sigue: <!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 debe usar cuando se manejan frames, su declaracin es la siguiente: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
16
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
17
18
19
<p> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /> </a> </p>
20
https://suma.um.es/suma/sumav2/
21
<html xmlns="http://www.w3.org/1999/xhtml">
Esta lnea hace referencia al espacio de nombres (namespace) de xhtml . un "namespace" XML es una coleccin de nombres, identificados por un URI, que se utiliza en los documentos XML para identificar los nombres de los elementos y atributos.
<head> .. </head> /<body> .. </body>

La mayora de las pginas Web estn divididas en dos partes: la cabecera (head) y el cuerpo (body). La cabecera es donde se define el ttulo de la pgina, incluida la informacin sobre su pgina para los motores de bsqueda como Google, estable la ubicacin de la pgina, aade estilos y escribe scripts. A excepcin del ttulo, el contenido de la cabecera no es visible para el visitante
<html> .. </html>
El tag HTML html contiene a todo el documento, con la excepcin del tag HTML !DOCTYPE, definido al comienzo del documento.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Se utiliza para definir la codificacin de los caracteres del documento
22
Los nombres de las etiquetas de elementos y de los atributos tienen que estar en minscula. Los valores de los atributos tienen que estar entre comillas dobles (") o simples ('). Todos los elementos tienen que estar cerrados, ya tengan contenido (<p>...</p> ) o no (<br/> ). Los elementos deben de estar correctamente anidados. Los valores de pares atributo=valor iguales no pueden ser simplificados, por ejemplo <dl compact='compact'> no se puede expresar como <dl compact>. Algunos elementos son obligatorios (html, body, head, etc.) Se debe incluir una declaracin de tipo de documento. Adems existen ciertas incompatibilidades en el anidamiento de elementos, por ejemplo, <a> no puede contener otros elementos <a> ..
23
Los documentos transmitidos con HTTP que son de tipo texto, como text/html, text/plain, etc., pueden enviar un parmetro charset en el encabezado de HTTP para especificar la codificacin de caracteres del documento. Es muy importante etiquetar siempre los documentos web en forma explcita. HTTP 1.1 dice que el charset predeterminado es ISO-8859-1.
En teora, se puede utilizar toda codificacin de caracteres que haya sido registrada por la Autoridad de Asignacin de Cifras en Internet (IANA) (http://www.iana.org/assignments/character-sets), pero no existe explorador alguno que comprenda todas las codificaciones. Cuanto ms extenso sea el uso de una codificacin de caracteres, mayor ser la probabilidad de que el explorador la comprenda.
24
<head> . <meta http-equiv="Content-Type" content="text/html; charset="> . </head>
Todos los documentos de texto, incluidos los (x)html se guardan con una codificacin de carcter. Puesto que hay muchas codificaciones disponibles en el mundo, es una buena idea declarar con que codificacin se ha guardado su pgina en el cdigo (x)html.
charset=UTF-8"> charset=UTF-16"> charset= iso-8859-1 ">
25
<meta > La etiqueta <meta> se utiliza para aadir informacin sobre la pgina. Esta informacin puede ser utilizada por los buscadores. Los buscadores consultan la informacin de la etiqueta <meta> de las pginas, buscando coincidencias con lo que el usuario pretende encontrar.
A travs de esta etiqueta pueden especificarse los atributos name y content. El atributo name indica el tipo de informacin, y el atributo content indica el valor de dicha informacin.
<head> <meta name="description" content="Free Web tutorials" /> <meta name="keywords" content="HTML,CSS,XML,JavaScript" /> <meta name="author" content="Hege Refsnes" /> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> </head>
26
<title>. </title> Toda pgina debe tener un elemento title. Un ttulo debera ser corto y descriptivo. En la mayora de los navegadores, el ttulo aparece en la barra de ttulo de la ventana.
27
<hn>. </hn> n:1-6

Los ttulos de seccin se utilizan para delimitar el comienzo de cada seccin de la pgina. HTML permite crear secciones de hasta seis niveles de importancia. Las etiquetas que definen los ttulos de seccin son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los titulares de la pgina. La importancia del resto de etiquetas es descendiente, de forma que la etiqueta <h6> es la que se utiliza para delimitar las secciones menos importantes de la pgina.
28
<p>. </p>
Una de las etiquetas ms utilizadas de HTML es la etiqueta <p>, que permite definir los prrafos que forman el texto de una pgina. Para delimitar el texto de un prrafo, se encierra ese texto con la etiqueta <p>. Para aadir espacios extra entre los caracteres que forman el prrafo utilizaremos Puede alinear el texto del prrafo con el atributo align=direction (left, right, center o justify)
29
id=nombre class=nombre Puede asignarse a los elementos de un (X)html tanto un nombre nico como un nombre perteneciente a una clase. Este elementos me permite aplicar acciones, estilos, referencias.. , utilizando el identificador nico o utilizando el nombre de la clase al que pertenece. Cada id en un documento debe ser nico. Los atributos class e id se pueden aadir a la mayora de los elementos pero son particularmente tiles en los elementos div y span.
30
<div> </div>
Para agrupar los elementos que forman cada zona o divisin de la pgina se utiliza la etiqueta <div>. Una capa o divisin es un elementos de bloque, lo que significa que sus contenidos comienzan automticamente en una lnea nueva. La potencia se obtiene con el uso del atributo style o con CSS.
31
<p> Juan Antonio <span id=estilo_apellido> Lpez Quesada </p>

Aunque puede organizar grandes bloques en secciones, capas, prrafos, se puede nombrar bloques ms pequeos de texto u otros elementos para identificarlos. El elemento <span> es lo que se podra denominar un elemento neutro que no aade nada al documento en s. Pero con CSS <span> se puede usar para aadir caractersticas visuales distintivas a partes especficas de texto en los documentos.
<p>El que pronto se acuesta y pronto se levanta, es hombre saludable, rico y sabio.</p>
<p>El que pronto se acuesta y pronto se levanta, es hombre <span class="ventaja">saludable</span>, <span class="ventaja">rico</span> y <span class="ventaja">sabio</span>.</p>
32
<br />
Los navegadores automticamente separan el texto de acuerdo con la anchura del bloque o ventana, creando nuevas lneas segn sea necesario. Aunque puede iniciar un nuevo prrafo con la etiqueta p, tambin puede crear saltos de lnea manuales all donde desee.

Puede aadir comentarios a sus documentos para plasmas lo que se est tratando de conseguir con las etiquetas (X)html utilizadas.
<etiqueta title=label> .. </etiqueta>

Aadir una etiqueta descriptiva que aprecer cuando el visitante coloque el cursos sobre el elemento.
33
 <hr width="20%" size="20" color="#3333CC"> <hr width="100" size="200" color="#CC3300">
68
69
El lenguaje de marcado HTML se defini teniendo en cuenta algunas de las caractersticas que existan en ese momento para la publicacin digital de contenidos. Entre los conceptos utilizados en su creacin, se encuentra el mecanismo de "hipertexto". De hecho, las letras "HT" de la sigla HTML significan "hipertexto" (hypertext en ingls), por lo que el significado completo de HTML podra traducirse como "lenguaje de marcado para hipertexto". La incorporacin del hipertexto fue una de las claves del xito del lenguaje HTML, ya que permiti crear documentos interactivos que proporcionan informacin adicional cuando se solicita. El elemento principal del hipertexto es el "hiperenlace", tambin llamado "enlace web" o simplemente "enlace". Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayora de enlaces relacionan pginas web, tambin es posible enlazar otros recursos como imgenes, documentos y archivos. Una caracterstica que no se suele tener en cuenta en los enlaces es que estn formados por dos extremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta hacia otro recurso. Cada uno de los dos extremos se llaman "anchors" en ingls, que se puede traducir literalmente como "anclas".
70
Antes de empezar a crear enlaces, es necesario comprender y dominar el concepto de URL. El acrnimo URL (del ingls Uniform Resource Locator) hace referencia al identificador nico de cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero tambin se utilizan en otros elementos HTML como las imgenes y los formularios.
Identificar de forma nica a ese recurso
Permitir localizar de forma eficiente ese recurso
URL
71
http://www.librosweb.es/xhtml/capitulo4.html
Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese recurso. Todas las pginas web utilizan http://. Las pginas web seguras (por ejemplo las de los bancos y las de los servicios de email) utilizan https:// (se aade una letra s). Servidor (www.librosweb.es): simplificando mucho su explicacin, se trata del ordenador en el que se encuentra guardada la pgina que se quiere acceder. Los navegadores son capaces de obtener la direccin de cada servidor a partir de su nombre.
Ruta (/xhtml/capitulo4.html): camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso especfico que se quiere acceder.
72
http://www.alistapart.com/comments/webstandards2008.php?page=5#42
Protocolo (http://) Servidor (www.alistapart.com)
Ruta (/comments/webstandards2008.php)
Consulta (?page=5): informacin adicional necesaria la pgina. Valores de entrada (atributo/valor).Siempre comienza con el carcter ? y contiene una sucesin de palabras separadas por = y &
Seccin (#42): permite que el navegador se posicione automticamente en una seccin/ancla de la pgina web. Siempre comienza con el caracter #
73
Como las URL utilizan los caracteres :, =, & y / para separar sus partes, estos caracteres estn reservados y no se pueden utilizar libremente. Adems, algunos caracteres no estn reservados pero pueden ser problemticos si se utilizan en la propia URL. Si es necesario incluir estos caracteres reservados y especiales en una URL, se sustituyen por combinaciones de caracteres seguros. Esta sustitucin se denomina codificacin de caracteres y el servidor realiza el proceso inverso (decodificacin) cuando le llega una URL con los caracteres codificados.
Carcter original / : = Carcter codificado %2F %3A %3D Carcter original ? @ & Carcter codificado %3F %40 %26
"
'
%22
%60
\
~
%5C
%7E
(espacio en blanco)
%20
%7C
74
Por otra parte, aunque desde hace tiempo ya es posible incluir en las URL caracteres de otros idiomas que no sean el ingls, an no es completamente seguro utilizar estos caracteres en las URL. Si se utilizan letras como , , o , es posible que algunos navegadores no las interpreten de forma correcta. La solucin consiste en codificar todos los caracteres que no existen en ingls. La siguiente tabla muestra la codificacin de los caracteres ms utilizados:
Carcter original
Carcter codificado
%F1
Carcter original
Carcter codificado
%D1
%E1
%E9 %ED %F3 %FA
%C1
%C9 %CD %D3 %DA
%E7
%C7
75
Teniendo en cuenta las dos tablas anteriores de codificacin de caracteres, es fcil crear las URL correctas sin caracteres problemticos:
 http://www.ejemplo.com/estaciones/otoo.html  http://www.ejemplo.com/estaciones/oto%F1o.html  http://www.ejemplo.com/ruta/nombre pgina.html  http://www.ejemplo.com/ruta/nombre%20p%E1gina.html
76
Los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del ingls "anchor", literalmente traducido como "ancla"). Atributos especficos:
name = "texto" - Permite nombrar al enlace para que se pueda acceder desde otros enlaces. href = "url" - Indica la URL del recurso que se quiere enlazar.
<a href="http://www.google.com">Pgina principal de Google</a> <a href="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen interesante </a> <a href=../../informe.pdf">Descargar informe completo [PDF]</a> <a href="http://www.ejemplo.com/informe.doc">Descargar informe completo [DOC]</a> <a href="/">Volver al inicio</a>
Referencia relativa
Referencia absoluta
77
El otro atributo bsico de la etiqueta <a> es name, que permite definir enlaces dentro de una misma pgina web. Si una pgina es muy larga, puede ser til mostrar enlaces de tipo "Saltar hasta la segunda seccin", "Volver al principio de la pgina", etc.
<a name="primera_seccion"></a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p> ... <a name="segunda_seccion"></a> <p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget, dolor.</p>
El atributo name permite crear "enlaces vacos" que hacen referencia a secciones dentro de una misma pgina. Una vez definidos los "enlaces vacos", es posible crear un enlace que apunte directamente a una seccin concreta.
78
<a name="inicio"></a> . <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p> . <a href="#inicio">Volver al inicio de la pgina</a> ... <p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget, dolor.</p> <a href="#inicio">Volver al inicio de la pgina</a> .
Los enlaces directos a secciones tambin funcionan con el atributo id de cualquier elemento. El siguiente ejemplo es equivalente al ejemplo anterior:
79
<h1 id="inicio">Ttulo de la pgina</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p> . <a href="#inicio">Volver al inicio de la pgina</a> ... <p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget, dolor.</p> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <a href="#inicio">Volver al inicio de la pgina</a> ...
80
Los puntos de destino permite abrir un vnculo en una determinada ventana, o incluso en una nueva creada especialmente para ese vnculo. De esta forma, la pgina que contiene el vnculo permanece abierta, permitiendo al usuario desplazarse entre la pgina de vnculos y la informacin de cada uno de esos vnculos. Para abrir vnculos en ventanas especficas se utiliza el atributo target=ventana, donde ventana es el nombre de la ventana donde se mostrar la pgina correspondiente:
target="_blank" Fuerza que el documento referenciado por el enlace sea mostrado en una nueva ventana del navegador. target="_self" Usando este valor el documento enlazado ser mostrado en el mismo frame o ventana donde est el enlace. Este valor es especialmente til cuando se ha usado la etiqueta BASE para especificar un frame destino por defecto distinto del actual. target="_parent" Este valor provoca que el documento sea mostrado en el FRAMESET padre del frame actual. target="_top" Fuerza a que el enlace sea mostrado usando todo el espacio de la ventana del navegador destruyendo toda estructura de frames. Este valor debe ser usado siempre que creemos un enlace a una pgina externa a nuestro sitio web.
81
Un vnculo, por defecto, se abre en la misma ventana o marco que contiene ese vnculo. Puede elegir otro destino para cada vnculo de forma individual o especfica un punto de destino por defecto para todos los vnculos de la pgina.
<head> .. <base target=destino_por_defecto /> </head>
82
Incluir enlaces bsicos mediante la etiqueta <a> es muy sencillo. Sin embargo, la definicin completa de <a> es muy compleja, ya que dispone de varios atributos especficos importantes. A continuacin se muestra la definicin completa de <a>:
name = "texto" - Permite nombrar al enlace para que se pueda acceder desde otros enlaces href = "url" - Indica la URL del recurso que se quiere enlazar hreflang = "codigo_idioma" - Idioma del recurso enlazado type = "tipo_de_contenido" - Permite "avisar" al navegador sobre el tipo de contenido que se enlaza (imgenes, archivos, etc.) para que pueda preparase en caso de que no entienda ese contenido rel = "tipo_de_relacion" - Describe la relacin del documento actual con el recurso enlazado rev = "tipo_de_relacion" - Describe la relacin del recurso enlazado con el documento actual charset = "tipo_de_charset" - Describe la codificacin del recurso enlazado
Atributos especficos
83
Idioma del enlace (hreflang)

El enlace puede indicar al navegador el idioma del recurso que se enlaza. Para establecer el valor del idioma, se utiliza un cdigo estandarizado de dos letras. Adems del idioma genrico, tambin se puede indicar una variacin idiomtica. Ejemplo de cdigos de idioma ms utilizados:
Cdigo
en en-US es es-ES es-AR
Idioma
Ingls Ingls Espaol Espaol Espaol
Variacin idiomtica
Estados Unidos Espaa Argentina
La lista completa de cdigos de idioma est definida en el estndar ISO 639. http://xml.coverpages.org/iso639a.html
84
Tipo de contenido (type)
Se utiliza para notificar al navegador sobre el tipo de contenido que se enlaza. Se indica mediante una cadena de texto cuyos posibles valores tambin estn estandarizados.
Los valores de los contenidos ms utilizados son los siguientes: "text/html" (pginas HTML), "image/png" (imgenes con formato PNG), "image/gif" (imgenes con formato GIF), "text/css" (hojas de estilo CSS), "application/rss+xml" (archivos RSS).
La lista completa de tipos de contenido se define en los estndares RFC 2045 y RFC 2046. http://www.iana.org/assignments/media-types/
85
Tipo de relacin (rel y rev) Proporciona informacin adicional muy til para los navegadores y para los motores de bsqueda como Google. Permiten indicar la relacin que la pgina actual tiene con la pgina a la que se enlaza (atributo rel) y la relacin que tiene la pgina enlazada con la pgina actual (atributo rev). Los tipos de relacin definidos son los siguientes:
alternate Indica que es una versin alternativa al documento actual . stylesheet Indica que se ha enlazado una hoja de estilos start Indica que se trata del primer documento de una coleccin de documentos. next Indica que es el documento que sigue al actual dentro de una secuencia lgica. prev - Indica que es el documento que precede al actual dentro de una secuencia lgica.
La especificacin oficial de HTML define la lista completa de tipos de relaciones que se pueden utilizar. http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-links
86
Codificacin de caracteres (charset) Adems del idioma, tipo de contenido y relacin del recurso que se enlaza, los enlaces tambin pueden indicar la codificacin de caracteres que utiliza la pgina web enlazada.
Los valores que se pueden utilizar tambin estn estandarizados y las codificaciones ms utilizadas son UTF-8 y ISO-8859-1, aunque existen decenas de cdigos definidos (ISO-10646-UCS-2, IBM852, Big5-HKSCS, windows-1252, HZ-GB-2312). El organismo IANA publica la lista completa de codificaciones de caracteres disponibles: http://www.iana.org/assignments/character-sets
<a href="http://www.google.com" hreflang="en" type="text/html" charset="UTF-8">Pgina principal de Google</a> <a href="http://www.ejemplo.com/fondo_escritorio.jpg" type="image/jpg">Imagen interesante para un fondo de escritorio</a>
87
Otros tipos de Enlaces

Adems de estos enlaces, las pginas HTML pueden incluir otro tipo de enlaces que cargan los recursos automticamente. Si una pgina HTML utiliza archivos CSS para aplicar estilos a sus contenidos, no es lgico que los enlace con la etiqueta <a> y espere a que el usuario pinche sobre el enlace para as cargar los archivos CSS. De la misma forma, muchas pginas web dinmicas necesitan que el navegador cargue varios archivos JavaScript para funcionar correctamente.
HTML define las etiquetas <script> y <link> para enlazar recursos que se deben cargar automticamente. Cuando el navegador encuentra alguna de estas dos etiquetas, descarga los recursos enlazados y los aplica a la pgina web.
88
Aunque la etiqueta <script> permite enlazar cdigo de varios lenguajes de programacin, el uso habitual de <script> consiste en enlazar un archivo JavaScript externo:
<head> <script type="text/javascript src="http://www.ejemplo.com/js/inicializar.js"> </script> </head>
El atributo type utilizado habitualmente para los archivos JavaScript es "text/javascript". El atributo src es equivalente al atributo href de los enlaces creados con la etiqueta <a>. La URL indicada en el atributo src puede ser absoluta o relativa y externa o interna.
89
Adems de enlazar un archivo JavaScript externo, la misma etiqueta <script> tambin permite incluir en la pgina web un bloque de cdigo JavaScript: <html> <head> <script type="text/javascript"> //<![CDATA[ window.onload = function() { alert("La pgina se ha cargado completamente"); } //]]> </script> </head> <body> ... </body> </html>
90

Cuando se incluye cdigo JavaScript en la propia pgina XHTML, se debe insertar dentro de una seccin especial llamada CDATA. Para ello, el cdigo JavaScript se debe encerrar entre <![CDATA[ y ]]>. Cuando el navegador encuentra una seccin de este tipo, no procesa su contenido como si fuera XHTML y por tanto no tiene en cuenta los posibles errores de validacin de XHTML. De esta forma, se pueden construir pginas XHTML vlidas y cdigo JavaScript correcto. En los captulos posteriores se profundiza en el concepto de validacin de pginas XHTML. Los caracteres // al comienzo y al final de la seccin CDATA son necesarios para los navegadores que no son capaces de procesar correctamente estas secciones. La etiqueta <script> (tanto cuando enlaza, como cuando incluye directamente el cdigo) puede aparecer en cualquier parte del documento HTML, aunque normalmente se incluye dentro de la cabecera de la pgina (<head>...</head>).
91
La segunda etiqueta de XHTML para enlazar recursos es <link>, que permite enlazar y relacionar la pgina con otros recursos externos.
El uso habitual de la etiqueta <link> es el de enlazar las hojas de estilos CSS utilizadas por las pginas web: <head> ... <link rel="stylesheet" type="text/css" href="/css/comun.css" /> </head> En este caso, es habitual establecer los atributos rel y type para indicar el tipo de recurso enlazado y su relacin con la pgina web. La URL del recurso enlazado se indica en el atributo href, que admite tanto URL absolutas como relativas.
92
Enlace al inicio del sitio web <a href="/">Inicio</a> Enlace a un email <a href="mailto:nombre@direccion.com" title="Direccin de email para solicitar ms informacin"> Solicita ms informacin </a>
!-- Envo del correo electrnico a varias direcciones a la vez --> <a href="mailto:nombre@direccion.com,otro_nombre@direccion.com">Solicita ms informacin</a>  <a href="mailto:nombre@direccion.com?subject=Solicitud de ms informacin">Solicita ms informacin</a>  <a href="mailto:nombre@direccion.com?body=Estara interesado en solicitar ms informacin sobre sus productos">Solicita ms informacin</a>
93
Enlace a un archivo FTP

Para enlazar un archivo almacenado en un servidor FTP, la parte del protocolo de la URL debe cambiar de http:// a ftp://:
<a href="ftp://ftp.ejemplo.com/ruta/archivo.zip" title="Archivo comprimido de los contenidos"> Descarga un ZIP con todos los contenidos </a>
Enlazar varias hojas de estilos CSS <link rel="stylesheet" type="text/css" href="/css/comun.css" /> <link rel="stylesheet" type="text/css" href="/css/secciones.css" />
94
Enlazar hojas de estilos CSS para diferentes medios <link rel="stylesheet" type="text/css" href="/css/comun.css" media="screen, projection" /> <link rel="stylesheet" type="text/css" href="/css/impresora.css" media="print" /> <link rel="stylesheet" type="text/css" href="/css/movil.css" media="handheld" />
Enlazar el favicon
El favicon o icono para favoritos es el pequeo icono que muestran las pginas en varias partes del navegador. Dependiendo del navegador (Firefox ..) que se utilice, este icono se muestra en la barra de direcciones, en la barra de ttulo del navegador y/o en el men de favoritos/marcadores.
<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />
95
Enlazar un archivo RSS <link rel="alternate" type="application/rss+xml" title="Resumen de todos los artculos del blog" href="/feed.xml" />
Enlazar hojas de estilos, favicon y RSS
<head> ... <link rel="stylesheet" type="text/css" href="/css/impresora.css" media="print" /> <link rel="stylesheet" type="text/css" href="/css/movil.css" media="handheld" /> <style type="text/css" media="screen, projection"> @import '/css/main.css'; </style> <link rel="shortcut icon" href="/favicon.ico" type="image/ico" /> <link rel="alternate" type="application/rss+xml" title="Resumen .. href="/feed.xml" /> ... </head>
96
Las combinaciones de teclas permiten que los visitantes seleccionen y activen vnculos sin utilizar el ratn, para ello se utiliza el atributo accesskey=tecla o nmero.
<body> <h3>Conbinación de teclas</h3> <p><a href="http://www.um.es" accesskey="h">Lenguajes de Marcas</a> (Alt-h, Ctrl-h)</p> <p><a href="www.carm.es" accesskey="x">Bases de Datos</a> (Alt-x, Ctrl-x)</p> </body>
97
Muchos navegadores permiten que los usuarios naveguen por los vnculos, mapas de imgenes y elementos de formulario con la tecla Tab. Para establecer el orden de tabulacin utilizaremos el atributo tabindex=n, donde n es el nmero que establece el orden de tabulacin comprendido entre 0 y 32767.
<body> <h3>Conbinación de teclas</h3> <p><a href="http://www.um.es" tabindex="2">Lenguajes de Marcas</a> (Alt-h, Ctrl-h)</p> <p><a href="www.carm.es" tabindex="1">Bases de Datos</a> (Alt-x, Ctrl-x)</p> </body>
98
99
El lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos: listas no ordenadas (se trata de una coleccin simple de elementos en la que no importa su orden), listas ordenadas (similar a la anterior, pero los elementos estn numerados y por tanto, importa su orden) y listas de definicin (un conjunto de trminos y definiciones similar a un diccionario).
100
<ol>
<li> Introduccin al Mdulo Profesional de LMSGI. </li> <li> Introduccin a los Lenguajes de Programacin.</li> <li> Introduccin al Lenguaje de Marcas - XML.</li> <li> XHTML, Extensible Hypertext Markup Language. </li> <li> WebEstilo. Hojas de estilo en cascada.</li> <li> Lenguaje javascript. </li>
</ol>
101
<ul>
<li> Introduccin al Mdulo Profesional de LMSGI. </li> <li> Introduccin a los Lenguajes de Programacin.</li> <li> Introduccin al Lenguaje de Marcas - XML.</li> <li> XHTML, Extensible Hypertext Markup Language. </li> <li> WebEstilo. Hojas de estilo en cascada.</li> <li> Lenguaje javascript. </li>
</ul>
102
Su funcionamiento es similar al de un diccionario, ya que cada elemento de la lista est formado por trminos y definiciones. La etiqueta <dl> crea la lista de definicin y las etiquetas <dt> y <dd> definen respectivamente el trmino y la descripcin de cada elemento de la lista.
<dl> <dt> Introduccin al Mdulo Profesional de LMSGI. </dt> <dd> esta unidad de trabajo de encarga de ............</dd> <dt> Introduccin a los Lenguajes de Programacin.</dt> <dd> esta unidad de trabajo de encarga de ............</dd> </dl>
103
Cuando se crea un lista, se ordenada o no ordenada, tambin puede elegirse el tipo de marcador que debe aparecer a la izquierda de cada elementos de la lista.
<ul> <li style="list-style-type:square"> Introduccin al Mdulo Profesional de LMSGI. </li> <li> Introduccin a los Lenguajes de Programacin.</li> <li> Introduccin al Lenguaje de Marcas - XML.</li> </ul> <ol> <li style="list-style-type:upper-alpha"> XHTML, Extensible Hypertext Markup Language. </li> <li> WebEstilo. Hojas de estilo en cascada.</li> <li> Lenguaje javascript. </li> </ol>
http://www.w3schools.com/CSS/pr_list-style-type.asp
104
Es posible empezar la enumeracin de una determinada lista ordenada con algo que sea diferente al 1 (el valor por defecto).
<ol start="2"> <li> XHTML, Extensible Hypertext Markup Language. </li> <li> WebEstilo. Hojas de estilo en cascada.</li> <li value="10"> Lenguaje javascript. </li> <li> Lenguaje de Marcas XML </li> </ol>
105
<ul> <li> Introduccin al Mdulo Profesional de LMSGI. </li> <li> Introduccin a los Lenguajes de Programacin.</li> <li style="list-style-image:url(whstart.ico)"> Introduccin al Lenguaje de Marcas XML.</li> <li> XHTML, Extensible Hypertext Markup Language. </li> <li> WebEstilo. Hojas de estilo en cascada.</li> <li style="list-style-image:url(dictmain.ico)"> Lenguaje javascript. </li> <li> Lenguaje de Marcas XML </li> </ul>
106
<ul> <li> Introduccin al Mdulo Profesional de LMSGI. </li> <li> Introduccin a los Lenguajes de Programacin.</li> <li style="list-style-position:inside"> Introduccin al Lenguaje de Marcas - XML.</li> <li> XHTML, Extensible Hypertext Markup Language. </li> <li style="list-style-position:outside"> WebEstilo. Hojas de estilo en cascada.</li> <li> Lenguaje javascript. </li> <li> Lenguaje de Marcas XML </li> </ul>
inside para mostrar los marcadores ajustados al texto de los elementos de la lista, o outside para mostrar los marcadores a la izquierda del texto del elemento de la lista
107
<ul> <li style="list-style:inside circle"> Introduccin al Mdulo Profesional de LMSGI. </li> <li> Introduccin a los Lenguajes de Programacin.</li> <li style="list-style:inside circle url(whstart.ico)"> Introduccin....</li> <li> XHTML, Extensible Hypertext Markup Language. </li> <li> WebEstilo. Hojas de estilo en cascada.</li> </ul>
108
109
Establecer opciones
Tablas avanzadas
Tablas bsicas
Tablas
110
Desde sus primeras versiones, HTML incluy el soporte para crear tablas de datos en las pginas web. Adems de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo. Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y ttulos que los que se utilizan en cualquier otro entorno de publicacin de documentos:
111
Las tablas de HTML puede contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras mltiples y otros elementos complejos.
Hasta hace unos aos, las tablas tambin se utilizaban para definir la estructura de las pginas web. La cabecera de la pgina era una fila de una gran tabla, el pie de pgina era otra fila de esta tabla y la zona de contenidos estaba formada por varias columnas dentro de esa gran tabla. Aunque algunos malos diseadores siguen utilizando hoy en da las tablas para definir la estructura completa de las pginas web, se trata de una tcnica obsoleta y nada recomendable. El motivo es que se complica en exceso el cdigo HTML y su mantenimiento es muy complejo. La solucin correcta para definir la estructura de las pginas consiste en la utilizacin de hojas de estilos CSS.
112
Las tablas ms sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr> para crear cada fila y <td> para crear cada columna.
<table> <tr> <th>Tema</th> <th>Duración</th> </tr> <tr> <td>XHMTL</td> <td>30 horas </td> </tr> <tr> <td>CSS</td> <td>20 horas </td> </tr> </table>
113
Las tablas ms sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr> para crear cada fila y <td> para crear cada columna.
<table> <tr> <th>Tema</th> <th>Duración</th> </tr> <tr> <td>XHMTL</td> <td>30 horas </td> </tr> <tr> <td>CSS</td> <td>20 horas </td> </tr> La etiqueta <table> encierra todas las filas y columnas de la </table> tabla. Las etiquetas <tr> (del ingls "table row") definen cada fila de la tabla y encierran todas las columnas. Por ltimo, la etiqueta <td> (del ingls "table data cell") define cada una de las columnas de las filas, aunque realmente HTML no define columnas sino celdas de datos.
114
abbr = "texto" - Permite describir el contenido de la celda (se emplea sobre todo con los navegadores de voz utilizados por personas discapacitadas). scope = "col, row, colgroup, rowgroup" - Indica las celdas para las que esta celda ser su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas las dems celdas que estn en la misma columna. colspan = "numero" - Nmero de columnas que ocupa esta celda. rowspan = "numero" - Nmero de filas que ocupa esta celda. Por otra parte, HTML define la etiqueta <caption> para establecer la leyenda o ttulo de una tabla. La etiqueta debe colocarse inmediatamente despus de la etiqueta <table> y cada tabla slo puede incluir una etiqueta <caption>.
115
<table> <tr> <th scope="col">Nombre producto</th> <th scope="col">Precio unitario</th> <th scope="col">Unidades</th> <th scope="col">Subtotal</th> </tr> <tr> <td>Reproductor MP3 (80 GB)</td> <td>192.02</td> <td>1</td> <td>192.02</td> </tr>
<tr> <td>Reproductor de radio & control remoto</td> <td>12.99</td> <td>1</td> <td>12.99</td> </tr> <tr> <th scope="row">TOTAL</th> <td>-</td> <td>7</td> <td><strong>207.51</strong></td> </tr> </table>
<tr> <td>Fundas de colores</td> <td>2.50</td> <td>5</td> <td>12.50</td> </tr>

116
Las tablas complejas suelen disponer de una estructura irregular que junta varias columnas para formar una columna ancha o une varias filas para formar una fila ms alta que las dems. Para fusionar filas o columnas, se utilizan los atributos rowspan y colspan respectivamente.
<table border="1"> <tr> <td colspan="2">A</td> </tr> <tr> <td>B</td> <td>C</td> </tr> </table>
La primera fila de la tabla est formada slo por una celda, mientras que la segunda fila est formada por dos celdas.
117
Las tablas complejas suelen disponer de una estructura irregular que junta varias columnas para formar una columna ancha o une varias filas para formar una fila ms alta que las dems. Para fusionar filas o columnas, se utilizan los atributos rowspan y colspan respectivamente.
<table> <tr> <td>A</td> <td rowspan="2">B</td> </tr> <tr> <td>C</td> </tr> </table>
La primera fila de la tabla est formada slo por dos celdas, donde la 2 celda ocupa 2 filas.
118
<table border="1"> <tr> <td colspan="3">A</td> <td>B</td> </tr> <tr> <td>C</td> <td colspan="2">D</td> <td>E</td> </tr> <tr> <td colspan="4">F</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> <td>J</td> </tr> </table>
119
<table border="1"> <tr> <td>A</td> <td>B</td> <td rowspan="3">C</td> <td>D</td> </tr> <tr> <td rowspan="2">E</td> <td>F</td> <td rowspan="3">G</td> </tr> <tr> <td>H</td> </tr> <tr> <td>I</td> <td>J</td> <td>K</td> </tr> </table>
120
121
<table>.</table>
<caption> Análisis de ventas anuales </caption>
<tfoot> <tr> <th rowspan="2" scope="col">AÑO</th> <th scope="col">Prod. A</th> <th scope="col">Prod. B</th> </tr> <tr> <th colspan="2" scope="col">Expansión de ventas</th> </tr> </tfoot>
<thead> <tr> <th rowspan="2" scope="col">AÑO</th> <th colspan=2" scope="col">Expansión de ventas</th> </tr> <tr> <th scope="col">Prod. A</th> <th scope="col">Pro. B</th> </tr> </thead>
<tbody> <tr> <th scope="row">N-3</th><td>-</td><td>-</td> </tr> <tr> <th scope="row">N-2</th><td>3</td><td>5</td> </tr> <tr> <th scope="row">N-1</th><td>4</td><td>4</td> </tr> <tr> <th scope="row">N</th><td>5</td><td>7</td> </tr> </tbody>
122
<table>.</table>
Las partes que componen las tablas complejas se definen mediante las etiquetas <thead>, <tbody> y <tfoot>. La cabecera de la tabla se define con la etiqueta <thead>, el pie de la tabla se define mediante <tfoot> y cada seccin de datos se define con una etiqueta <tbody>. Aunque al principio resulta extrao, el elemento <tfoot> siempre se escribe antes que cualquier elemento <tbody> en el cdigo HTML. De hecho, si la etiqueta <tfoot> aparece despus de un elemento <tbody>, la pgina no se considera vlida.
123
El uso de las etiquetas <col> y <colgroup> no est muy extendido, debido a que la mayora de navegadores no soportan muchas de sus funcionalidades.
La etiqueta <tbody> permite realizar agrupaciones de filas, pero en ocasiones se necesitan agrupar columnas. Aunque su uso no es muy comn, HTML define dos etiquetas similares para agrupar columnas: <col> y <colgroup>. La etiqueta <col> se utiliza para asignar los mismos atributos a varias columnas de forma simultnea. De esta forma, la etiqueta <col> no agrupa columnas, sino que slo asigna atributos comunes a varias columnas.
<table summary="Anlisis de ventas anuales"> <caption>Anlisis de ventas anuales</caption> <col style="width:10%;" /> <col style="width:30%;" /> <thead> <tr> <th scope="col">AO</th> <th scope="col">Producto A</th> <th scope="col">Producto B</th> <th scope="col">Producto C</th> <th scope="col">Producto D</th> </tr> </thead> 124
El uso de las etiquetas <col> y <colgroup> no est muy extendido, debido a que la mayora de navegadores no soportan muchas de sus funcionalidades.
Por otra parte, la etiqueta <colgroup> se emplea para agrupar de forma estructural varias columnas de la tabla. La forma habitual de indicar el nmero de columnas que abarca la agrupacin es utilizar el atributo span, que establece el nmero de columnas de cada agrupacin.
<table summary="Anlisis de ventas anuales"> <caption>Anlisis de ventas anuales</caption>
<colgroup span="1" style="color:red;" /> <colgroup span="3" style="color:blue;" />

<thead> <tr> <th scope="col">AO</th> <th scope="col">Producto A</th> <th scope="col">Producto B</th> <th scope="col">Producto C</th> <th scope="col">Producto D</th> </tr> </thead>
125
<table border="10"> <tr> <td>Celda (1,1)</td> <td>Celda (1,2)</td> <td>Celda (1,3)</td> </tr> <tr> <td>Celda (2,1)</td> <td>Celda (2,2)</td> <td>Celda (2,3)</td> </tr> <tr> <td>Celda (3,1)</td> <td>Celda (3,2)</td> <td>Celda (3,3)</td> </tr> </table>
10 pixeles para los bodes de la tabla. Los bordes de las celdas tendrn un ancho de 1 pixel
126
<table style="border: double red 8px" <tr> <td>Celda (1,1)</td> <td>Celda (1,2)</td> <td>Celda (1,3)</td> </tr> <tr> <td>Celda (2,1)</td> <td>Celda (2,2)</td> <td>Celda (2,3)</td> </tr> <tr> <td>Celda (3,1)</td> <td>Celda (3,2)</td> <td>Celda (3,3)</td> </tr> </table>
Borde doble, rojo y con una anchura de 8 pixeles
127
<table border="1" style="border:double red 8px"> <tr> <td>Celda (1,1)</td> <td>Celda (1,2)</td> <td>Celda (1,3)</td> </tr> <tr> <td style="border:double #0000FF 20px">Celda (2,1)</td> <td>Celda (2,2)</td> <td>Celda (2,3)</td> </tr> <tr> <td>Celda (3,1)</td> <td>Celda (3,2)</td> <td>Celda (3,3)</td> </tr> </table>
128
<table border="1" width="300px"> <tr height="200px"> <td>Celda (1,1)</td> <td>Celda (1,2)</td> <td>Celda (1,3)</td> </tr> <tr height="20px"> <td>Celda (2,1)</td> <td>Celda (2,2)</td> <td>Celda (2,3)</td> </tr> <tr height="80px"> <td>Celda (3,1)</td> <td>Celda (3,2)</td> <td>Celda (3,3)</td> </tr> </table>
129
<table border="1" align="center" width="400px"> <tr> <td align="right">Celda (1,1)</td> <td>Celda (1,2)</td> <td>Celda (1,3)</td> </tr> <tr align="center"> <td>Celda (2,1)</td> <td>Celda (2,2)</td> <td>Celda (2,3)</td> </tr> <tr> <td>Celda (3,1)</td> <td align="justify">Celda (3,2)</td> <td>Celda (3,3)</td> </tr> </table>
El atributo align como atributo de table provoca que la tabla se centra respecto a su localizacin no el contenido-. Y como atributo de tr y td provoca que sea el contenido en este caso que se vea afectado
130
<table border="1" style="float:right" width="400px"> <tr> <td>Celda (1,1)</td> <td>Celda (1,2)</td> <td>Celda (1,3)</td> </tr> <tr> <td>Celda (2,1)</td> <td >Celda (2,2)</td> <td>Celda (2,3)</td> </tr> <tr> <td>Celda (3,1)</td> <td>Celda (3,2)</td> <td>Celda (3,3)</td> </tr> </table> <p><strong>Float: </strong> ;.</p>
131
<table border="10" align="center" background="xhtml.jpg" width="400px"> <tr> <td>Celda (1,1)</td> <td>Celda (1,2)</td> <td>Celda (1,3)</td> </tr> <tr> <td>Celda (2,1)</td> <td >Celda (2,2)</td> <td>Celda (2,3)</td> </tr> <tr> <td>Celda (3,1)</td> <td>Celda (3,2)</td> <td>Celda (3,3)</td> </tr> </table>
132
133
<table border="10" align="center" cellpadding=30px" cellspacing="15" width="400px"> <tr> <td>Celda (1,1)</td> <td>Celda (1,2)</td> <td>Celda (1,3)</td> </tr> <tr> <td style="border:#FF0000 double 10px">Celda (2,1)</td> <td >Celda (2,2)</td> <td>Celda (2,3)</td> </tr> <tr> <td>Celda (3,1)</td> <td>Celda (3,2)</td> <td>Celda (3,3)</td> </tr> </table>
(X)HTML tiene dos atributos para la etiqueta de tabla que permite controlar el espaciado entre los contenidos de una celda (cellpadding) y entre un borde y lo siguiente (cellspacing)
134
Atributo style: <style> table { border:10px; background:#0000CC; } </style>
<link rel="stylesheet" type="text/css" href=miestilo.css">
135
136
HTML es un lenguaje de marcado cuyo propsito principal consiste en estructurar los contenidos de los documentos y pginas web. Sin embargo, HTML tambin incluye elementos para participar en el desarrollo de aplicaciones web. El estndar HTML/XHTML permite crear formularios para que los usuarios interacten con las aplicaciones web. Los formularios son posiblemente la herramienta ms utilizada en Internet para obtener datos e informacin acerca de la gente que navega por nuestro sitio. La idea de los formularios es recolectar informacin online en la interaccin con el usuario y luego ejecutar una determinada accin (action=) con la misma,. Cinco son solamente las etiquetas que el cdigo HTML posee para definir todos los elementos interactivos que un formulario puede presentar: <FORM>, <INPUT>, <SELECT>, <OPTION> y <TEXTAREA>. Estas etiquetas, junto a un nmero de modificadores o atributos, son suficientes para indicarle al navegador cliente cmo debe recoger la informacin, cmo debe manejarla una vez recolectada y cmo debe interactuar con el servidor.
137
Los formularios ms sencillos se pueden crear utilizando solamente dos etiquetas: <form> y <input>.
<h3>Formulario muy sencillo</h3> <form action="http://www.midominio.es/gestion_formularios.php" method="get"> Escribe tu nombre: <input type="text" name="nombre" value="" /> <br/> <input type="submit" value="Enviar" /> </form>
138
La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros de texto, listas desplegables) y la etiqueta <input> permite definir varios tipos diferentes de elementos (botones y cuadros de texto).
action = "url" Indica la URL que se encarga de procesar los datos del formulario
method = "POST o GET"
Mtodo HTTP empleado al enviar el formulario
Atributos especficos
enctype = "application/x-wwwform-urlencoded o multipart/form-data"
Tipo de codificacin empleada al enviar el formulario al servidor (slo se indica de forma explcita en los formularios que permiten adjuntar archivos) Lista separada por comas de todos los tipos de archivos aceptados por el servidor (slo para los formularios que permiten adjuntar archivos)
accept = "tipo_de_contenido"
Otros: accept-charset, onsubmit, onreset
139
La mayora de formularios utilizan slo los atributos action y method. El atributo action indica la URL de la aplicacin del servidor que se encarga de procesar los datos introducidos por los usuarios. Esta aplicacin tambin se encarga de generar la respuesta que muestra el navegador. El atributo method establece la forma en la que se envan los datos del formulario al servidor. Este atributo hace referencia al mtodo HTTP, por lo que no es algo propio de HTML. Los dos valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los formularios incluyen el atributo method="get" o el atributo method="post".
El mtodo POST permite el envo de mucha ms informacin que el mtodo GET. En general, el mtodo GET admite como mximo el envo de unos 500 bytes de informacin. La otra gran limitacin del mtodo GET es que no permite el envo de archivos adjuntos con el formulario. Adems, los datos enviados mediante GET se ven en la barra de direcciones del navegador (se aaden al final de la URL de la pgina), mientras que los datos enviados mediante POST no se pueden ver tan fcilmente.
140
type = "text | password | checkbox | radio | submit | reset | file | hidden | image | button" name = "texto"
Indica el tipo de control que se incluye en el formulario
Asigna un nombre al control (es imprescindible para que el servidor pueda procesar el formulario)
value = "texto"
size = "unidad_de_medida" maxlength = "numero"
Valor inicial del control

Tamao inicial del control (para los campos de texto y de password se refiere al nmero de caracteres, en el resto de controles se refiere a su tamao en pxel)
<input>
checked = "checked" disabled = "disabled" readonly = "readonly" src = "url"
Mximo nmero de caracteres para los controles de texto y de password
Para los controles checkbox y radiobutton permite indicar qu opcin aparece preseleccionada
El control aparece deshabilitado y su valor no se enva al servidor junto con el resto de datos El contenido del control no se puede modificar Para el control que permite crear botones con imgenes, indica la URL de la imagen que se emplea como botn de formulario
alt = "texto"
Descripcin del control
141
Cuadro de texto
Se trata del elemento ms utilizado en los formularios.

<form action="http://www.midominio.es/gestion_formularios.php" method="get"> cuadro de Texto: <input type="text" name="nombre" value="valor por defecto" size="15" maxlength="30" readonly="readonly"/> <br/> <input type="submit" value="Enviar" /> </form>
142
Cuadro de texto
El atributo name es el ms importante en los campos del formulario..De hecho, si un campo no incluye el atributo name, sus datos no se envan al servidor. El valor que se indica en el atributo name es el nombre que utiliza la aplicacin del servidor para obtener el valor de este campo de formulario. Cuando el usuario pulsa el botn de envo del formulario, el navegador enva los datos a una aplicacin del servidor para que procese la informacin y genere una respuesta adecuada.
method=get
El atributo value se emplea para establecer el valor inicial del cuadro de texto. Si se crea un formulario para insertar datos, los cuadros de texto deberan estar vacos. Por lo tanto, o no se aade el atributo value o se incluye con un valor vaco value="". Si por el contrario se crea un formulario para modificar datos, lo lgico es que se muestren inicialmente los datos guardados en el sistema. En este caso, el atributo value incluir el valor que se desea mostrar: <input type="text" name="nombre" value="Juan Prez" />
143
Cuadro de texto
Si no se especifica un tamao, el navegador muestra el cuadro de texto con un tamao predeterminado. El atributo size permite establecer el tamao, en caracteres, con el que se muestra el cuadro de texto. Su uso es imprescindible en muchos formularios, en los que algunos campos como la direccin deben mostrar ms caracteres de lo normal (<input size="100" ...) y otros campos como el cdigo postal deben mostrar menos caracteres de lo normal (<input size="5"...).
Adems de controlar el tamao con el que se muestra un cuadro de texto, tambin se puede limitar el tamao del texto introducido. El atributo maxlength permite establecer el mximo nmero de caracteres que el usuario puede introducir en un cuadro de texto. Su uso es imprescindible para campos como el cdigo postal, el nmero de la Seguridad Social y cualquier otro dato con formato predefinido y limitado. Por ltimo, el atributo readonly permite que el usuario pueda ver los contenidos del cuadro de texto pero no pueda modificarlos y el atributo disabled deshabilita un cuadro de texto de forma que el usuario no pueda modificarlo y adems, el navegador no enva sus datos al servidor.
144
Campo de contrasea
La nica diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en un cuadro de contrasea no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o crculos, por lo que es ideal para escribir contraseas y otros datos sensibles.
<form action="http://www.midominio.es/gestion_formularios.php" method="get"> Cuadro de Texto: <input type="text" name="nombre" value="valor por defecto" size="15" maxlength="30 /> <br/> Campo de Contrasea: <input type="password" name="contrasena" value="" /> <br/> <input type="submit" value="Enviar" /> </form>
145
Checkbox
La nica diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en un cuadro de contrasea no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o crculos, por lo que es ideal para escribir contraseas y otros datos sensibles.
<input name="select_1" type="checkbox" value="texto_enviar_select_1"/> texto_visible_select_1 <input name="select_2" type="checkbox" value="texto_enviar_select_2" checked="checked"/> texto_visible_select_2 <input name="select_3" type="checkbox" value="texto_enviar_select_3"/> texto_visible_select_3
Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el atributo checked. Si el valor del atributo es checked, el checkbox se muestra seleccionado. En cualquier otro caso, el checkbox permanece sin seleccionar. Aunque resulta redundante que el nombre y el valor del atributo sean idnticos, es obligatorio indicarlo de esta forma porque los atributos en XHTML no pueden tener valores vacos.
146
Radio
Los controles de tipo radio son similares a los controles de tipo checkbox, pero presentan una diferencia muy importante: son mutuamente excluyentes. Los radiobutton se utilizan cuando el usuario solamente puede escoger una opcin entre las distintas opciones relacionadas que se le presentan. Cada vez que se selecciona una opcin, automticamente se deselecciona la otra opcin que estaba seleccionaba.
<br/>Sexo <br/> <input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre <input type="radio" name="sexo" value="mujer" /> Mujer <br/>
147
Botn envo / reseteo del formulario
<input type="submit" value="Enviar Formulario" /> <input type="reset" name="limpiar" value="Borrar datos del formulario" />
148
Ficheros Adjuntos
Los formularios tambin permiten adjuntar archivos para subirlos al servidor. Aunque desde el punto de vista de HTML y del navegador no existe ninguna limitacin sobre el nmero, tipo o tamao total de los archivos que se pueden adjuntar, todos los servidores aaden restricciones por motivos de seguridad.
Fichero adjunto:<br/> <input type="file" name="adjunto" />

El navegador se encarga de mostrar un cuadro de texto donde aparece el nombre del archivo seleccionado y un botn que permite navegar por los directorios y archivos del ordenador del usuario. Si se incluye un control para adjuntar archivos, es obligatorio aadir el atributo enctype en la etiqueta <form> del formulario. El valor del atributo enctype debe ser multipart/form-data, por lo que la etiqueta <form> de los formularios que permiten adjuntar archivos siempre es: <form action="..." method="post" enctype="multipart/form-data"> ... </form> 149
Campos ocultos
Los campos ocultos se emplean para aadir informacin oculta en el formulario:

<input type="hidden" name=login" value=user1" /> Botn Imagen
<input type="image" name="enviar" src="applelogo.jpg" height="30" width="30" /> Pulsar el botn provoca el mismo efecto que si el botn fuera de type=submit.
150
Botn
Algunos formularios complejos necesitan botones ms avanzados que los de enviar datos (type="submit") y resetear el formulario (type="reset"). Por ese motivo, el estndar HTML/XHTML define un botn de tipo genrico.
<input type="button" name="mostrar" value="Mostrar" onclick="funcion_javascript(document.getElementById('nombre').value)" /> <script language="javascript"> function funcion_javascript(f) { alert(document.getElementById('nombre').value); alert(f); } </script>
Este tipo de botones slo son tiles si se utilizan junto con el lenguaje de programacin JavaScript. Si la pgina incluye cdigo JavaScript, los botones de este tipo se pueden programar para que realicen cualquier tarea compleja cuando se pulsa sobre ellos.
151
HTML define algunos elementos adicionales para mejorar la estructura de los formularios creados.
La etiqueta <fieldset> agrupa todos los controles de formulario a los que encierra. El navegador muestra por defecto un borde resaltado para cada agrupacin. La etiqueta <legend> se incluye dentro de cada etiqueta <fieldset> y establece el ttulo que muestra el navegador para cada agrupacin de elementos.
<form> <fieldset> <legend>Datos personales </legend> </fieldset> <fieldset> <legend>Otros </legend> </fieldset> </form> Datos
152
Por otra parte, todos los controles de formulario salvo los botones presentan una carencia muy importante: no disponen de la opcin de establecer el ttulo o texto que se muestra junto al control Afortunadamente, el lenguaje HTML incluye una etiqueta denominada <label> y que se utiliza para establecer el ttulo de cada campo del formulario. <label for="nombre">Nombre</label> <br/> <input type="text" id="nombre" name="nombre" value="" />
La principal ventaja de utilizar <label> es que el cdigo HTML est mejor estructurado y se mejora su accesibilidad. Adems, al pinchar sobre el texto del <label>, el puntero del ratn se posiciona automticamente para poder escribir sobre el campo de formulario asociado.
153
<textarea
tributos></textarea>
Las reas de texto son tiles cuando se debe introducir una gran cantidad de texto, ya que es mucho ms cmodo de introducir que en un campo de texto norma. La anchura del rea de texto se controla mediante el atributo cols, que indica las columnas o nmero de caracteres que se podrn escribir como mximo en cada fila. La altura del rea de texto se controla mediante rows, que indica directamente las filas de texto que sern visibles. El principal inconveniente de los elementos <textarea> es que el lenguaje HTML no permite limitar el nmero mximo de caracteres que se pueden introducir. (programacin con JavaScript)
154
<select>
La imagen muestra los tres tipos de listas desplegables disponibles. El primero es el de las listas ms utilizadas que slo muestran un valor cada vez y slo permiten seleccionar un valor. El segundo tipo de lista es el que slo permite seleccionar un valor pero muestra varios a la vez. Por ltimo, el tercer tipo de lista desplegable es aquella que muestra varios valores y permite realizar selecciones mltiples.
155
<select>
<select name="so"> <option value="windowsselected="selected">Windows</option> <option value="mac">Mac</option> <option value="linux">Linux</option> <option value="otro">Otro</option> </select> <select name="so2" size="5"> <option value="windows" selected="selected">Windows</option> <option value="mac">Mac</option> <option value="linux">Linux</option> <option value="otro">Otro</option> </select>
<select name="so3" size="5 multiple="multiple"> <option value="windows" selected="selected">Windows</option> <option value="mac">Mac</option> <option value="linux">Linux</option> <option value="otro">Otro</option> </select>
156
<select>
<label for="programa">Programa seleccionado</label> <br/> <select id="programa" name="programa"> <optgroup label="Sistemas Operativos"> <option value="Windows" selected="selected">Windows</option> <option value="Mac">Mac</option> <option value="Linux">Linux</option> <option value="Other">Otro</option> </optgroup> <optgroup label="Navegadores"> <option value="Internet Explorer" selected="selected">Internet Explorer</option> <option value="Firefox">Firefox</option> <option value="Safari">Safari</option> <option value="Opera">Opera</option> <option value="Other">Otro</option> </optgroup> </select>
157
<select>
<label for="programa">Programa seleccionado</label> <br/> <select id="programa" name="programa"> <optgroup label="Sistemas Operativos"> <option value="Windows" selected="selected">Windows</option> <option value="Mac">Mac</option> <option value="Linux">Linux</option> <option value="Other">Otro</option> </optgroup> <optgroup label="Navegadores"> <option value="Internet Explorer" selected="selected">Internet Explorer</option> <option value="Firefox">Firefox</option> <option value="Safari">Safari</option> <option value="Opera">Opera</option> <option value="Other">Otro</option> </optgroup> </select>
158
Al pulsar la tecla Tab, los visitantes pueden desplazarse por los campos en su formulario desde arriba hacia abajo (y luego seleccionar el deseado al pulsar Intro). En funcin de la presentacin de su formulario, es posible que prefiera establecer personalmente el orden de tabulacin para que los visitantes completen los campos en un determinado oreden. Para establecer el orden de tabulacin:
En la etiqueta del elemento de formulario, se escribir tabindex=n, donde n es el nmero que indica el orden de tabulacin.
Al desplazarse por el formulario, los elementos del formulario se seleccionan pero no se activan. Pera ello es necesario pulsar Intro. El valor para tabindex puede ser cualquier nmero entre 0 y 32767. Por defecto, el orden de tabulacin depende de los elementos en el cdigo (X)HTML. Cuando cambia el orden de tabulacin, los elementos con numeracin ms baja son los primeros, seguidos de los elementos con numeracin ms alta. Se puede asigna orden de tabulacin a campos de texto, casillas de verificacin, vnculos, mapas de imgenes .. La primera vez en el IE que se pulsa la tecla Tab, el campo de Direccin, donde se muestra la URL, se resalta. Luego, la siguiente tabulacin lleva al visitante a donde se haya definido.
159
Las teclas de acceso rpido permiten que sus visitantes seleccionen y activen objetos sin ratn. Para aadir teclas de acceso rpido/directo a un elemento del formulario:
Dentro de la etiqueta del elemento del formulario, se escribir accesskey=. A continuacin la combinacin de teclas (cualquier tecla o nmero). Se escribir .
<input type="password" name="contrasena" value="" accesskey="W"/> En los sistemas Windows, para invocar la combinacin de teclas de acceso rpido, se utilizar la tecla ALT. Cuando se utiliza una combinacin de teclas de acceso rpido, no solamente lo destaca del resto, sino que lo activa. En el caso de botones de opcin y casillo de verificacin, esto significa que el elemento se selecciona. Si es un cuadro de texto, el curso se sita dentro. Si es un botn, ste de activa.
160
<form action="mailto:lopezquesada@iessanjuanbosco.es" method="post" enctype="text/plain">
161
<form action="http://www.midominio.es/subir_fichero.php" name="ejemplo" method=post"> <fieldset> <legend>Otros Datos</legend> <br/>Fichero adjunto:<br/> <input type="file" name="adjunto" /><br/> </fieldset> </form>
162
http://html.conclase.net/w3c/html401-es/cover.html#minitoc
163
Centrar elementos de una pgina Aplicar formato al body Aplicar formato a elementos de texto Elegir caractersticas por defecto
164
De vuelta a los das en los que CSS apenas contaba con soporte en la mayora de los navegadores, la mayora de las personas controlaban la apariencia del texto en sus pginas Web con elementos HTML. En parte debido a la guerra entre navegadores y la balcanizacin de la Web, y en parte por el empuje hacia CSS y XHTML, el W3C decidi desaprobar un nmero de elementos de formato, es decir, los marc para una definitiva eliminacin de las especificaciones del estndar (X)HTML. Todava hoy no se ha hecho mucho y la mayora de las pginas en la Web, en la actualidad, utilizan una o ms etiquetas desaprobadas. Aunque CSS es ms potente, ms eficaz y mucho ms sencillo de actualizar, para la mayora de las personas (X)HTML sigue siendo ms fcil de entender !a veces ms fcil de utilizar. Adems, aunque el soporte CSS ha aumentado considerablemente, todava no rivaliza el soporte universal que disfrutan la mayora de las etiquetas (X)HTML.
Observe que las etiquetas de formato, a pesar de estar desaprobadas, siguen siendo vlidas y parte legal de la parte transitoria de HTML 4 y XHTML 1.0. y aunque, algunos puedan decir que utilizar etiquetas desaprobadas es similar a una hereja, hay tantas pginas que lo siguen usando, que es importante saber al menos cmo funcionan.
165
Puede seleccionar la fuente, tamao y color por defeco para todo el texto de la pgina.
<basefont color="#0000FF" size="5" face="Times New Roman, Times, serif" /> La etiqueta HTML <basefont> o fuente base en castellano, que usamos <br /> para definir el tamaño de la fuente o letra que empleamos en un documento.
Los encabezados no se ven afectados por el atributo size, aunque adquieren el tipo y el color. Los vnculos no se ven afectados por el atributo calor, aunque adquieren el tamao y tipo de la fuente. El elemento font anula el elemento basefont que anula el atributo text de la etiqueta body. Los estilo anulan a basefont (y text) pero no font. El elemento basefont est desaprobado y puede ser extremadamente inconsistente de un navegador a otro. Se deber evitar en su lugar utiliza estilos.
166
<font color="#00FF33" face="Courier New, Courier, monospace" lang="es" size="6" title="Ejemplo de font"> La etiqueta HTML <basefont> o fuente base en castellano, que usamos <br /> para definir el tamaño de la fuente o letra que empleamos en un documento. </font>
Un valor de 3 en el atributo size representa el tamao por defecto para el texto del navegador, normalmente Times a 16 pxeles. El elemento font anula el elemento basefont. El elemento font tambin anula cualquier formato aplicado con hojas de estilo. La etiqueta font puede cambiar el tamao y fuente de n vnculo, pero no su color. El elemento font afecta el tamao de los encabezados.
167
<body bgcolor="#66FF00" text="#006699" link="#FF0000" vlink="#FFFF00" alink="#3300FF">

La etiqueta bgcolor le permite establecer el color de fondo para toda la pgina Web. el atributo text funciona de la misma manera que el atributo color de la etiqueta basefont. Tanto basefont como font anulan el atributo text. Para cambiar el color de los vnculos que an no se han visitado, se utiliza el atributo link. Para cambiar el color de los vnculos que ya se han visitado, se utilizar el atributo vlink. Si lo que se quiere es cambiar el color de un vnculo cuando el usuario hace clic, escriba alink.
168
<body background="xhtml.jpg" leftmargin="60" topmargin="20">

Se puede utilizar una imagen como teln de fondo de toda la pgina. Esto se realiza mediante el atributo background. Solamente IE, leftmargin indicar la anchura en pxeles del espacio entre el borde izquierdo de la ventana y el contenido de la pgina; topmargin es la altura en pxeles entre la parte superior de la ventana y los contenidos de la pgina. En Netscapa se utilizar las etiquetas marginwidth (leftmargin) y marghinheight (topmargin).
169
DOCTYPE Metadatos Estructura de la cabecera
Metainformacin
170
Las pginas y documentos HTML incluyen ms informacin de la que los usuarios no ven en sus pantallas. Estos datos adicionales siempre estn relacionados con la propia pgina, por lo que se denominan metainformacin o metadatos. La metainformacin siempre se incluye en la seccin de la cabecera, es decir, dentro de la etiqueta <head>.
Aunque la metainformacin ms conocida y utilizada es el ttulo de la propia pgina, se puede incluir mucha otra informacin til para los navegadores y para los buscadores. En las prximas secciones se explica cmo incluir la metainformacin y se introduce un concepto relacionado llamado DOCTYPE.
171
Las pginas XHTML se dividen en dos partes denominadas cabecera y cuerpo. La seccin de la cabecera est formada por todas las etiquetas encerradas por la etiqueta <head>.
La cabecera tpica de una pgina HTML completa presenta la siguiente estructura: <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <title>El ttulo del documento</title>  <link rel="stylesheet" href="#" type="text/css" media="screen" /> <link rel="stylesheet" href="#" type="text/css" media="print" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="#" /> <script src=javascript/fichero_codigo_javascript.js" type="text/javascript"> </script> </head>
172
Una de las partes ms importantes de la metainformacin de la pgina son los metadatos, que permiten incluir cualquier informacin relevante sobre la propia pgina.
La especificacin oficial de HTML no define la lista de metadatos que se pueden incluir, por lo que las pginas tienen libertad absoluta para definir los metadatos que consideren adecuados. La etiqueta empleada para la definicin de los metadatos es <meta>. Definir el autor del documento: <meta name="author" content="Juan Prez" /> Definir el programa con el que se ha creado el documento: <meta name="generator" content=Word" /> Definir la codificacin de caracteres del documento: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> Definir el copyright del documento: <meta name="copyright" content="librosweb.es" />
173
Definir las palabras clave que definen el contenido del documento: <meta name="keywords" content="diseo, css, hojas de estilos, web, html" /> Definir una breve descripcin del sitio: <meta name="description" content="Artculos sobre diseo web, usabilidad y accesibilidad" /> Para "refrescar" una pgina o redirigirla a otra, transcurrido un cierto tiempo: <meta http-equiv="refresh" content=5;URL=http://www.um.es" >
etc.
La etiqueta que define la codificacin de los caracteres (httpequiv="Content-Type") se emplea prcticamente en todas las pginas y las etiquetas que definen la descripcin (description) y las palabras clave (keywords) tambin son muy utilizadas.
174
El estndar XHTML deriva de XML, por lo que comparte con el muchas de sus normas y sintaxis. Uno de los conceptos fundamentales de XML es la utilizacin del DTD o Document Type Definition ("Definicin del Tipo de Documento"). Un DTD es un documento que recoge el conjunto de normas y restricciones que deben cumplir los documentos de un determinado tipo. Si por ejemplo se define un DTD para los documentos relacionados con libros, se puede fijar como norma que cada libro tenga un ttulo y slo uno, que tenga uno o ms autores, que la informacin sobre el nmero de pginas pueda ser opcional, etc. El conjunto de normas, obligaciones y restricciones que se deben seguir al crear un documento de un determinado tipo, se recogen en su correspondiente DTD. El estndar XHTML define el DTD que deben seguir las pginas y documentos XHTML. En este documento se definen las etiquetas que se pueden utilizar, los atributos de cada etiqueta y el tipo de valores que puede tener cada atributo. En realidad, la versin 1.0 del estndar de XHTML define tres DTD diferentes. Para indicar el DTD utilizado al crear una determinada pgina, se emplea una etiqueta especial llamada doctype. La etiqueta doctype es el nico elemento que se incluye fuera de la etiqueta <html> de la pgina. De hecho, la declaracin del doctype es lo primero que se debe incluir en una pgina web, antes incluso que la etiqueta <html>.
175
Para que una pgina XHTML sea correcta y vlida es imprescindible que incluya el correspondiente doctype que indica el DTD utilizado. A continuacin se muestran los tres DTD que se pueden utilizar al crear pginas XHTML:
XHTML 1.0 Estricto <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Se trata de la variante con las normas ms estrictas y las restricciones ms severas. Las pginas web que incluyan este doctype, no pueden utilizar atributos relacionados con el aspecto de los contenidos, por lo que requiere una separacin total de cdigo HTML y estilos CSS. XHTML 1.0 Transitorio <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Se trata de una variante menos estricta que la anterior, ya que permite el uso de algunos atributos HTML relacionados con el aspecto de los elementos. XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Esta ltima variante la utilizan las pginas que estn formadas por frames, una prctica completamente desaconsejada y que hoy en da slo utilizan los sitios web obsoletos.
176
Por otra parte, adems del DOCTYPE apropiado, tambin es necesario que las pginas web indiquen el namespace asociado. Un namespace en un documento XML permite diferenciar las etiquetas y atributos que pertenecen a cada lenguaje.
Si en un mismo documento se mezclan etiquetas de dos o ms lenguajes derivados de XML (XHTML y SVG por ejemplo) y que tienen el mismo nombre, no se podra determinar a qu lenguaje pertenece cada etiqueta y por tanto, no se podra interpretar esa etiqueta o ese atributo. Los namespaces se indican mediante una URL.
El namespace que utilizan todas las pginas XHTML (independientemente de la versin y del DOCTYPE) es http://www.w3.org/1999/xhtml y se indica de la siguiente manera:
<html xmlns="http://www.w3.org/1999/xhtml"> ... </html>
177
De esta forma, es habitual que las pginas XHTML comiencen con el siguiente cdigo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> Aunque el cdigo anterior es mucho ms complicado que una simple etiqueta <html>, es imprescindible para que las pginas XHTML creadas sean correctas y superen satisfactoriamente el proceso de validacin que se muestra en los captulos siguientes. Afortunadamente, si utilizas un editor avanzado como Dreamweaver para crear las pginas, todo el cdigo anterior se incluye de forma automtica. Si creas las pginas a mano, slo tienes que copiar y pegar ese cdigo en cada nueva pgina.
178
Iframes CSS JavaScript
Comentarios
179
Al igual que la mayora de lenguajes de marcado, HTML permite incluir comentarios dentro de su cdigo para aadir informacin que no se debe mostrar por pantalla.
Normalmente, los diseadores y programadores incluyen comentarios para marcar el comienzo y el final de las secciones de las pginas, para incluir avisos y notas para otros diseadores o para incluir explicaciones sobre la forma en la que se ha creado el cdigo HTML. Aunque los comentarios no se muestran por pantalla y por tanto son invisibles para los usuarios, s que se descargan con el cdigo HTML de la pgina. Por este motivo, nunca debe incluirse informacin sensible o confidencial en los comentarios.
180
La sintaxis de los comentarios es la siguiente: Apertura del comentario: <!-Contenido del comentario: (cualquier texto) Cierre del comentario: --> El siguiente ejemplo muestra el uso de los comentarios HTML para indicar el comienzo y final de cada seccin. Recuerda que los comentarios no se muestran por pantalla y que no influyen en la forma en la que se ven las pginas:
 <div id="menu"> <ul> <li>... </li> <li>... </li> <li>...< /li> <li>... </li> </ul>   <div id="publicidad"> ... </div> 
Los comentarios de HTML puede ocupar tantas lneas como sea necesario. Sin embargo, los comentarios no se pueden anidar, es decir, no se puede incluir un comentario dentro de otro comentario.
181
JavaScript (desde ahora JS) es un lenguaje de script, de guiones, creado originalmente por la empresa Nestcape, que se inserta en las pginas web mediante la etiqueta <SCRIPT> de HTML.
Una vez que el navegador descarga una pgina que contiene un script se encarga de interpretarlo y de ejecutarlo. As se consigue la independencia del script frente a la plataforma. Lo nico que necesitamos, pues, es un navegador que interprete scripts! Existen varias versiones del lenguaje JS y adems diferentes nmeros de versin para cada navegador, por ejemplo, JavaScript 1.3 para Nestcape Navigator 4.06 y 4.6 o JScript 5 para Microsoft Internet Explorer 5.0, entre otros. La etiqueta <Script> puede insertarse en cualquier parte de la pgina, aunque frecuentemente se sita en la seccin de cabecera. Mediante el atributo language se debe indicar si se trata de un script de JS o de cualquier otro lenguaje (si no se indica se sobreentiende que es un script de JavaScript):
182
<Script language="JavaScript"> .. </Script>

Algunos navegadores no disponen de soporte completo de JavaScript, otros navegadores permiten bloquearlo parcialmente e incluso algunos usuarios bloquean completamente el uso de JavaScript porque creen que as navegan de forma ms segura. Si JavaScript est bloqueado o deshabilitado y la pgina web requiere su uso para un correcto funcionamiento, es habitual incluir un mensaje de aviso al usuario indicndole que debera activar JavaScript para disfrutar completamente de la pgina. HTML define la etiqueta <noscript> para incluir un mensaje que los navegadores muestran cuando JavaScript se encuentra bloqueado o deshabilitado.
183
<script language="javascript"> alert("Hola Mundo"); </script> </head> <body> <noscript> <p>Bienvenido a Mi Sitio</p> <p>La pgina que ests viendo requiere para su funcionamiento el uso de JavaScript. Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p> </noscript> Incluir un mensaje de aviso que solamente sea visible en los navegadores que tienen bloqueado JavaScript es tan sencillo como incluir la etiqueta <noscript> dentro del <body>. </body>
Una pgina web puede contener ms de un script. Su orden de ejecucin corresponde a su orden de aparicin en la pgina. Si bien hay scripts que no son ejecutados hasta que el usuario lleve a cabo alguna accin (como los manejadores de eventos) o el estado de la pgina cambie por algn motivo (por ejemplo, porque se acaba de procesar todo el documento).
184
Algunos de los atributos ms utilizados en la creacin de pginas web son id, class y style. Los tres atributos estn muy relacionados con CSS, sobre todo class y style. El atributo id se emplea para asignar un identificador nico a cada elemento de la pgina, lo que es til tanto para aplicar estilos CSS a ese elemento como para programar aplicaciones con JavaScript. Por otra parte, el atributo class se emplea para definir la clase CSS que se aplica a un elemento.
<style type="text/css"> .resumen { color:#00FF99; font-size:24px} </style> </head> <body> <p class="resumen">The <style> tag is used to define style information for an HTML document. Inside the style element you specify how HTML elements should render in a browser. The required type attribute defines the content of the style element. The only possible value is "text/css". The style element always goes inside the head section </p>
185
Aunque su uso no es muy comn, la etiqueta <iframe> puede ser muy til en determinadas ocasiones, ya que permite insertar un documento HTML dentro de otro documento HTML. Un iframe puede considerarse como un agujero que se abre en una pgina web y a travs del cual se muestra otra pgina web. <iframe> src = "url" - URL del documento HTML que se visualiza en el iframe height = "longitud" - Altura que ocupar el iframe en el documento width = "longitud" - Anchura que ocupar el iframe en el documento name = "texto" - Nombre que identifica al iframe longdesc = "url" - Direccin en la que puede encontrarse una descripcin larga del contenido del iframe scrolling = "yes | no | auto" - Indica si el iframe debe mostrar barras de scroll (horizontal y vertical) cuando el contenido incluido no cabe en el iframe
<iframe src="/ruta/documento.html" width="250" height="250" scrolling="no" />
186
La pgina principal de Google Analytics emplea un <iframe> para incluir en un pequeo recuadro la pgina correspondiente a la validacin de usuario.
187
Ejemplos Cmo funciona? Para qu sirve?
Qu es la Accesibilidad Web?
http://www.w3.org/WAI/WCAG1-Conformance
188
Hablar de Accesibilidad Web es hablar de un acceso universal a la Web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localizacin geogrfica y capacidades de los usuarios. Con esta idea de accesibilidad nace la Iniciativa de Accesibilidad Web, conocida como WAI (Web Accessibility Initiative). Se trata de una actividad desarrollada por el W3C, cuyo objetivo es facilitar el acceso de las personas con discapacidad, desarrollando pautas de accesibilidad, mejorando las herramientas para la evaluacin y reparacin de accesibilidad Web, llevando a cabo una labor educativa y de concienciacin en relacin a la importancia del diseo accesible de pginas Web, y abriendo nuevos campos en accesibilidad a travs de la investigacin en este rea. Introduccin a la Accesibilidad Web. Disponible una versin en espaol http://www.w3c.es/Traducciones/es/WAI/intro/accessibility Breve introduccin sobre lo que es la Accesibilidad Web y su importancia.
189
La idea principal radica en hacer la Web ms accesible para todos los usuarios independientemente de las circunstancias y los dispositivos involucrados a la hora de acceder a la informacin. Partiendo de esta idea, una pgina accesible lo ser tanto para una persona con discapacidad, como para cualquier otra persona que se encuentre bajo circunstancias externas que dificulten su acceso a la informacin (en caso de ruidos externos, en situaciones donde nuestra atencin visual y auditiva no estn disponibles, pantallas con visibilidad reducida, etc.).
Para hacer el contenido Web accesible, se han desarrollado las denominadas Pautas de Accesibilidad al Contenido en la Web (WCAG), cuya funcin principal es guiar el diseo de pginas Web hacia un diseo accesible, reduciendo de esta forma barreras a la informacin. WCAG consiste en 14 pautas que proporcionan soluciones de diseo y que utilizan como ejemplo situaciones comunes en las que el diseo de una pgina puede producir problemas de acceso a la informacin. Las Pautas contienen adems una serie de puntos de verificacin que ayudan a detectar posibles errores.
190
Cada punto de verificacin est asignado a uno de los tres niveles de prioridad establecidos por las pautas.
Prioridad 1: son aquellos puntos que un desarrollador Web tiene que cumplir ya que, de otra manera, ciertos grupos de usuarios no podran acceder a la informacin del sitio Web. Prioridad 2: son aquellos puntos que un desarrollador Web debera cumplir ya que, si no fuese as, sera muy difcil acceder a la informacin para ciertos grupos de usuarios. Prioridad 3: son aquellos puntos que un desarrollador Web debera cumplir ya que, de otra forma, algunos usuarios experimentaran ciertas dificultades para acceder a la informacin. En funcin a estos puntos de verificacin se establecen los niveles de conformidad: Nivel de Conformidad "A": todos los puntos de verificacin de prioridad 1 se satisfacen. Nivel de Conformidad "Doble A": todos los puntos de verificacin de prioridad 1 y 2 se satisfacen. Nivel de Conformidad "Triple A": todos los puntos de verificacin de prioridad 1,2 y 3 se satisfacen.
191
http://www.w3c.es/traducciones/es/wai/intro/accessibility
Herramientas de evaluacin que determinan si un sitio Web cumple los estndares y pautas. Para obtener una lista de herramientas de evaluacin, visite Herramientas de evaluacin, reparacin y transformacin para accesibilidad de contenido Web. http://www.w3.org/WAI/ER/tools/
Finding Evaluation Tools The W3C WAI list of Web accessibility evaluation tools is available through: Complete List - to show all tools in the list maintained by WAI Simple Search - to find tools using common search criteria Advanced Search - to find tools using detailed search criteria
192
193
Un ejemplo de prioridad 1 sera la identificacin clara de cualquier cambio de idioma que se pueda producir en el texto de un documento. Es decir, si se utilizan diferentes idiomas es necesario que cualquier cambio est claramente sealado con el atributo lang: Un ejemplo de cdigo correcto sera el siguiente: <p> <q>Buenos das Philip</q> <q lang="en">Good morning</q>. Respondi Philip en ingls. <q>Qu tal ests?</q> <q lang="fr">Trs bien.</q> Volvi a responder, pero esta vez en francs. </p>
194
Otro ejemplo de prioridad 1 sera la utilizacin del atributo alt para incorporar texto equivalente al contenido de una imagen cuando se quieren utilizar grficos; esto permitira que dispositivos o personas que no pueden visualizar los grficos, obtengan una representacin alternativa textual. El cdigo correspondiente sera: <img src="wai.png" alt="Web Accessibility Initiative" lang="en"/>
195
Validacin con Dreamweaver
Validador del W3C
Validacin
196
La validacin es el proceso que asegura que un documento escrito en un determinado lenguaje (por ejemplo XHTML) cumple con las normas y restricciones de ese lenguaje. Las normas y restricciones de los documentos escritos en XML (y en sus lenguajes derivados, como XHTML) se definen en el DTD o Document Type Definition ("Definicin del Tipo de Documento"). El concepto de validacin es objeto de controversia en el mbito del diseo web. Por una parte, la validacin no es obligatoria y las pginas web se pueden ver bien sin que sean vlidas. Por otra parte, una pgina vlida es ms correcta que otra pgina que no lo sea, ya que cumple con las normas y restricciones impuestas por XHTML.
Debido a esta controversia, algunos diseadores consideran que se da demasiada importancia a la validacin de las pginas y a la creacin de pginas vlidas. El resto de diseadores argumentan que si la especificacin de XHTML impone una serie de normas y restricciones, lo ms correcto es que las pginas web las cumplan, aunque no sea obligatorio.
En cualquier caso, el proceso de validacin consiste en probar pgina a pgina si su cdigo HTML pasa la prueba de validacin. Los validadores son las herramientas que se utilizan para validar cada pgina. Algunos editores de pginas web incluyen sus propios validadores y el organismo W3C ha creado una herramienta gratuita para la validacin de las pginas.
197
Si utilizas Dreamweaver para crear las pginas web, el validador se encuentra integrado en la propia herramienta. En primer lugar, accede a la configuracin de la herramienta de validacin desde la opcin Edicin > Preferencias > Validador:
198
En esta ventana de configuracin se puede elegir el DTD que se utiliza en caso de que la pgina web no indique el DTD que utiliza. Las pginas declaran el DTD que utilizan mediante el doctype. Una vez seleccionado el DTD por defecto (en la imagen anterior, se ha elegido el DTD de XHTML 1.0 de transicin), se puede acceder a la herramienta de validacin de Dreamweaver desde el icono que se muestra en la siguiente imagen:
199
Si no se han producido errores al validar la pgina, Dreamweaver lo indica mediante un mensaje que declara a la pgina como vlida. Si se produce algn error, la pgina no es vlida y Dreamweaver muestra la lista de todos los errores encontrados junto con sus posibles soluciones:
Despus de corregir todos los errores, se puede pasar otra vez la prueba de validacin para comprobar que la pgina cumple con todas las restricciones que impone el tipo de doctype que utiliza.
200
La validacin de las pginas web no requiere el uso de editores avanzados como Dreamweaver, ya que el organismo W3C ha creado una herramienta que se puede utilizar gratuitamente a travs de Internet: http://validator.w3.org/
201
Aunque la herramienta slo est disponible en ingls, su uso es muy intuitivo:
Validate by URI, permite escribir la URL de la pgina que se quiere validar. Esta opcin es la ms sencilla para validar las pginas que ya estn publicadas en Internet. Validate by File Upload, muestra un formulario mediante el que se puede subir el archivo HTML correspondiente a la pgina que se quiere validar. Esta opcin es la mejor para validar las pginas web que has desarrollado y que an no has publicado en Internet. Validate by Direct Input, permite validar cdigo HTML de forma directa. Se trata de la opcin ms rpida para validar trozos o pginas HTML completas. Esta opcin es la mejor cuando ests desarrollando las pginas y quieres asegurarte que el cdigo sea vlido.
La siguiente imagen muestra el resultado de la validacin de la pgina principal de Google realizada mediante la opcin Validate by URI:
202
Si la pgina no pasa correctamente la prueba de validacin, se muestra el listado completo de fallos junto con la ayuda necesaria para resolver cada uno de los errores. Como se observa en la imagen anterior, incluso una pgina tan sencilla como la portada de Google contiene decenas de errores que impiden considerarla vlida. Por lo tanto, la pgina principal de Google no es una pgina vlida, aunque eso no impide que se vea bien en todos los navegadores y que los usuarios la consideren correcta.
203
204

HTML Daw

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML Daw

Caricato da

Copyright:

Formati disponibili

Ciclo Formativo de Grado Superior de Administracin de Sistemas Informticos en red

Mdulo Profesional: LMSGI Unidad de Trabajo 4.- (X) HTML

Qu es (x)HTML? Especificacin oficial

Lenguajes de etiquetas Elementos (X)HTML

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<head> .. </head> /<body> .. </body>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<head> . <meta http-equiv="Content-Type" content="text/html; charset="> . </head>

<hn>. </hn> n:1-6

<p> Juan Antonio <span id=estilo_apellido> Lpez Quesada </p>

<etiqueta title=label> .. </etiqueta>

Camino 2.Tags meta http-equiv Refresh

signo de menor que

&quot; &nbsp; &apos;

quotation mark non-breaking space apostrophe

comillas espacio en blanco apstrofo

<img src="/imagenes/proyecto1.png" alt=sustituye a la imagen" title=descripcin emergente />

Comprueba el efecto entre br y p en ambos el atributo aling

texttop alinea la imagen 2 con la parte superior del texto en lnea

top alinea la imagen 2 con el elemento ms alto de la lnea

middle alinea la imagen 2 con la mitad del elemento ms grande de la lnea

Identificar de forma nica a ese recurso

Permitir localizar de forma eficiente ese recurso

Protocolo (http://) Servidor (www.alistapart.com)

<head> .. <base target=destino_por_defecto /> </head>

Idioma del enlace (hreflang)

Tipo de contenido (type)

Otros tipos de Enlaces

Otros tipos de Enlaces

Otros tipos de Enlaces

Otros tipos de Enlaces

Otros tipos de Enlaces

Enlace a un archivo FTP

<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />

<tr> <td>Fundas de colores</td> <td>2.50</td> <td>5</td> <td>12.50</td> </tr>

<table summary="Anlisis de ventas anuales"> <caption>Anlisis de ventas anuales</caption>

<colgroup span="1" style="color:red;" /> <colgroup span="3" style="color:blue;" />

Borde doble, rojo y con una anchura de 8 pixeles

Atributo style: <style> table { border:10px; background:#0000CC; } </style>

<link rel="stylesheet" type="text/css" href=miestilo.css">

method = "POST o GET"

Mtodo HTTP empleado al enviar el formulario

enctype = "application/x-wwwform-urlencoded o multipart/form-data"

Otros: accept-charset, onsubmit, onreset

Indica el tipo de control que se incluye en el formulario

Valor inicial del control

Mximo nmero de caracteres para los controles de texto y de password

Descripcin del control

Se trata del elemento ms utilizado en los formularios.

Botn envo / reseteo del formulario

Fichero adjunto:<br/> <input type="file" name="adjunto" />

Los campos ocultos se emplean para aadir informacin oculta en el formulario:

<form action="mailto:lopezquesada@iessanjuanbosco.es" method="post" enctype="text/plain">

<body bgcolor="#66FF00" text="#006699" link="#FF0000" vlink="#FFFF00" alink="#3300FF">

<body background="xhtml.jpg" leftmargin="60" topmargin="20">

DOCTYPE Metadatos Estructura de la cabecera

Iframes CSS JavaScript

<Script language="JavaScript"> .. </Script>

<iframe src="/ruta/documento.html" width="250" height="250" scrolling="no" />

Ejemplos Cmo funciona? Para qu sirve?

Validacin con Dreamweaver

Validador del W3C

Aunque la herramienta slo est disponible en ingls, su uso es muy intuitivo:

" '