Tema 2.

HTML y XHTML

Tema 2. HTML y XHTML

1. Introduccin..........................................................................................3
1.1. Declaracin <!DOCTYPE>...............................................................................3
1.1.1. HTML 4.01 Strict.................................................................................................................4 1.1.2. HTML 4.01 Transitional.......................................................................................................4 1.1.3. HTML 4.01 Frameset...........................................................................................................4 1.1.4. XHTML 1.0 Strict................................................................................................................4 1.1.5. XHTML 1.0 Transitional......................................................................................................4 1.1.6. XHTML 1.0 Frameset..........................................................................................................4 1.1.7. XHTML 1.1..........................................................................................................................4

2. Estructura de un documento HTML......................................................5

2.1. Cabecera.............................................................................................................6 2.2. Estructura en zonas............................................................................................6

3. Formato de etiquetas.............................................................................7 4. Descripcin detallada de las etiquetas...................................................9

4.1. Etiquetas de texto...............................................................................................9 4.2. Etiquetas para marcos......................................................................................10 4.3. Etiquetas para enlaces......................................................................................11 4.4. Etiquetas para imgenes y multimedia............................................................13 4.5. Etiquetas para listas..........................................................................................15 4.6. Etiquetas para tablas........................................................................................16 4.7. Etiquetas para formularios...............................................................................17

IES Zaidn Vergeles de Granada. Departamento de Informtica.

Lenguajes de marcas y sistemas de gestin de la informacin.

IES Zaidn Vergeles de Granada. Departamento de Informtica.

Tema 2. HTML y XHTML

Tema 2. HTML y XHTML

1. Introduccin.
HTML es el acrnimo de HyperText Markup Language. El significado de XHTML es similar pero va precedido por eXtensible, lo que nos indica que cumple las normas de XML. En este tema vamos a aprender HTML 4.01 y con tan solo asegurarnos de cumplir unos pequeos detalles su equivalente XHTML 1.0. HTML es un lenguaje basado en etiquetas que sirven para estructurar o dar formato a los contenidos de las pginas web. Junto al formato, es importante aadir conceptos de diseo o estilo, para lo cual, utilizamos lenguaje CSS (Cascade Style Sheet) con las normas 1 y 2 que veremos en el siguiente tema. HTML fue rpidamente acogido y empez a crecer de una forma descontrolada con etiquetas nuevas y funcionalidades propias de cada navegador. Debido a esta falta de estandarizacin se propone utilizar como base XML para imponer reglas pero usando las etiquetas de HTML As naci XMHTL. La diferencia principal entre XHTML y HTML es que XHTML al ser un derivado de XML genera documentos bien formados, los cuales cumplen ciertas reglas: a) Cada elemento debe contar con su marca de apertura y de cierre, y la anidacin de elementos debe ser correcta. Se debe incluir una instruccin de procesamiento XML que indique la versin de XML y la codificacin de caracteres usada. <?xml version=1.0 encoding=UTF-8?>

b) Debe existir un nico elemento raz denominado <html>. c)

d) Debe existir una declaracin <!DOCTYPE> para poder validar el documento frente a una DTD. (Las declaraciones de tipo de documento las veremos en el punto siguiente). e) f) Las etiquetas siempre se escribirn en minscula. Los atributos se escriben con minscula, seguidos de un signo igual y de un valor delimitado por comillas. Por ejemplo, style=valor.

g) Los elementos vacos que en HTML son correctos, como <br>, en XHTML deben escribirse como <br/> o como <br></br>. Con estas normas podremos asegurar que nuestros documentos HTML son XHTML. Es muy importante en cualquier caso comprender que las normas que definen como se deben interpretar tanto las etiquetas que veremos en este tema como los estilos del siguiente, estn redactadas por un comit. Pero que la interpretacin ha correspondido a muchas empresas de software, tantas como navegadores hay. Esto supone que debido a que el lenguaje no es absolutamente preciso, a veces dicha interpretacin vara, provocando que la forma de visualizar una misma pgina web no sea igual con un navegador que con otro, incluso puede que no se vea correctamente una pgina con algunos navegadores. Adems, de todo esto, debemos aadir que sobre todo Internet Explorer suele aadir funcionalidades o etiquetas particulares para sus navegadores. Es absolutamente necesario probar las pginas web que confeccionemos en al menos, los navegadores ms utilizados, para asegurarnos su correcta visualizacin por la mayora de los usuarios.

1.1. Declaracin <!DOCTYPE>

Para que los navegadores sepan que versin de HTML o XHTML utilizada en un documento deben presentar, es necesario incluir una cabecera <!DOCTYPE> que lo indique. La declaracin <!DOCTYPE>, indica el tipo de documento, la versin de HTML/XHTML que se usa y el DTD (Definicin de Tipo de Documento). Todo documento de un lenguaje de marcas tiene en comn una gramtica que define las marcas permitidas en dicho lenguaje, las que son obligatorias y cmo deben usarse. Una manera de definir dicha gramtica es mediante DTD. As pues en la DTD se identifica la estructura de un documento mediante reglas que indica los nombres de los elementos, su significado, dnde pueden ser utilizados, qu pueden

IES Zaidn Vergeles de Granada. Departamento de Informtica.

Lenguajes de marcas y sistemas de gestin de la informacin.

contener, etc. De esta manera los navegadores al conocer la DTD del documento, pueden representarlo adecuadamente. La etiqueta <!DOCTYPE> el la primera que se escribe en un documento HTML/XHTML, ya que va delante de la etiqueta <html>. Las DTD disponibles en las Recomendaciones del W3C para HTML y XHTML son: 1.1.1. HTML 4.01 Strict Esta DTD contiene todos los elementos y atributos HTML, pero no incluye elementos de presentacin o en desuso (como las fuentes). Los marcos no estn permitidos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

1.1.2. HTML 4.01 Transitional Esta DTD contiene todos los elementos HTML y atributos, incluyendo elementos de presentacin y obsoletos. Los marcos no estn permitidos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

1.1.3. HTML 4.01 Frameset Este DTD es igual a HTML 4.01 Transitional, pero permite la utilizacin de los contenidos de marcos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

1.1.4. XHTML 1.0 Strict Esta DTD contiene todos los elementos y atributos HTML, pero no incluye elementos de presentacin o en desuso (como fuente). Los marcos no estn permitidos. Adems el documento se debe escribir como XML bien formado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1.1.5. XHTML 1.0 Transitional Esta DTD contiene todos los elementos HTML y atributos, incluyendo elementos de presentacin y obsoletos (como fuente). Los marcos no estn permitidos. Adems el documento se debe escribir como XML bien formado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1.1.6. XHTML 1.0 Frameset Este DTD es igual a XHTML 1.0 Transitional, pero permite la utilizacin de los contenidos de marcos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

1.1.7. XHTML 1.1 Este DTD es igual a XHTML 1.0 Strict, pero se permite aadir mdulos (por ejemplo, para proporcionar soporte para los idiomas de Asia Oriental).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

IES Zaidn Vergeles de Granada. Departamento de Informtica.

Tema 2. HTML y XHTML

La especificacin HTML 5, an en desarrollo aunque muchos navegadores ya la incorporan no est basada en SGML y por lo tanto no necesita la referencia a la DTD. Sin embargo se requiere la declaracin
<!DOCTYPE HTML>

2. Estructura de un documento HTML.

Todo documento HTML tiene la siguiente estructura bsica: <html> <head> </head> <body> </body> </html> Las etiquetas <html> y </html> nos indican que todo el texto contenido entre ambas es cdigo HTML. Por tanto, la primera debe abrir este tipo de documentos y la segunda, cerrarlos. La cabecera del documento, delimitada por <head> y </head>, proporciona informacin acerca de l. El contenido, propiamente dicho, se aloja dentro del cuerpo del documento y viene sealado con las etiquetas <body> y </body>. Esa estructura debe ser antecedida por una declaracin de tipo de documento. Por ejemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Esta declaracin indica que las definiciones que describen la estructura de un documento XHTML se exponen en un documento DTD en la Red cuyo URL se especifica. De esta forma, los clientes web conocern sin ambigedad con qu reglas deben procesar el documento. Es muy til contar siempre con una plantilla de este tipo para evitar tener que escribirla en todos los documentos, aunque algunos editores avanzados la generan automticamente. He aqu un ejemplo sencillo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Buscador</title> </head> <body> <a href="http://www.google.es"> <img src="google.jpg"/> </a> <p> <h3>Motor de bsqueda creado por <em>Larry Page</em> y <em>Sergey Brin</em></h3> </p> </body> </html> Al visualizar este cdigo en un navegador, se mostrar la palabra Buscador en la barra de ttulo de la ventana, mientras que, en el rea de trabajo de la misma, encontraremos una imagen que sirve como

IES Zaidn Vergeles de Granada. Departamento de Informtica.

Lenguajes de marcas y sistemas de gestin de la informacin.

enlace a una pgina de Internet y un prrafo con ciertas caractersticas tipogrficas, determinadas por el navegador que estemos utilizando.

2.1. Cabecera.
En la cabecera de un documento HTML se incluyen las siguientes etiquetas que dan informacin de la pgina o soporte para ella: a) <base> Permite indicar la URL por defecto para las URL relativas, as como el lugar donde se abrirn las pginas enlazadas. b) <link> Sirve para relacionar un documento con los recursos externos que utiliza, como por ejemplo la hoja de estilos aplicable al documento. Ejemplo: c) <link rel =stylesheet type=text/css href=estilo.css/> d) <title> </title> Como ya hemos visto sirve especificar el texto que aparecer en la barra de ttulo de la ventana, es importante no confundir con que al hacer una pgina web la informacin que presentemos lleve un ttulo, el cual deberemos poner con una etiqueta de encabezado <hn> antes de los prrafos de informacin. e) <meta name= content=/> Permite proporcionar metainformacin al navegador sobre la pgina. Se escriben tantas etiquetas meta, como valores de name queramos utilizar. Algunos de los valores de name son: author, permite indicar el autor de la pgina. keywords, lista de palabras clave separadas por comas. description, permite incluir una breve descripcin de la pgina. Por ejemplo: <head> <meta name="author" content="Paquito" /> <meta name="keywords" lang="es" content="instituto, zaidn, clase, ciclo formativo" /> <meta name="description" lang="es" content="Pgina de ejemplo para la explicacin" /> </head> f) <script>, con esta etiqueta podemos incluir cdigo en algn lenguaje cliente, por ejemplo, JavaScript. Esta etiqueta tambin puede aparecer una o ms veces en la seccin body. Por ejemplo: <script type=text/javascript> document.alert(hola) </script> g) <style type=text/css> Al igual que con <link> podemos especificar los estilos para etiquetas dentro del mismo documento, por ejemplo: <style type=text/css> body {background: black; color:white;} div {background: red; width:300px;} </style> No debemos olvidar que, adems, es posible asignar estilos a una etiqueta determinada mediante su propio atributo style.

2.2. Estructura en zonas

Para maquetar una pgina web, podemos dividirla en diferentes zonas lgicas a las que aplicaremos distintas posibilidades de diseo. Las zonas se definen con las dos siguientes etiquetas:

IES Zaidn Vergeles de Granada. Departamento de Informtica.

Tema 2. HTML y XHTML a) <span> para zonas en un trozo de lnea, de forma que permite agrupar elementos en lnea. b) <div> para zonas que tienen ms de una lnea, agrupndose en bloques. Sus respectivas declaraciones son: <span id=identificador style= ; ;; ;> </span> <div id=identificador style= ; ;; ;> </div> El atributo id permite poner un nombre o identificador a la zona.

El atributo style, se utiliza para incluir una serie de propiedades de estilo. (Los estilos los veremos en profundidad en el siguiente tema, pero para entender mejor los div vemos un pequeo adelanto). Algunas propiedades bsicas de estilo son: position: absolute | relative, indica si la posicin de la zona es absoluta o relativa. top, indica el nmero de pxeles a desplazar desde la parte superior. left, indica el nmero de pxeles a desplazar desde la izquierda.

En el caso que la posicin del elemento sea absoluta, los desplazamientos se miden desde los bordes del documento. Por ejemplo: <div id=nombre style=position: absolute; top: 200px; left: 200px> </div> Adems, se pueden aplicar otras propiedades como background-color (indica el color de fondo), width (anchura de la zona), height (altura de la zona), text-align (alineacin del texto), etc. Ejercicio: Escribir el siguiente ejemplo en el Bloc de notas y llamarlo prueba1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>prueba1</title> </head> <body> <h1>Vamos a poner una etiqueta span y una div</h1> <span>Esto esta en una etiqueta span. No provoca salto de linea</span> fuera del span sigo en la misma linea <br/> <div style="background-color: orange; border: 3px solid #C00; position: absolute; top:200px">Este texto esta dentro del div</div> </body> </html>

3. Formato de etiquetas.
En HTML existen 90 etiquetas para marcar los elementos de una pgina, aunque algunas de ellas se consideran obsoletas, como las de los marcos. El formato general de una etiqueta es: <etiqueta atributo=valor atributo=valor> </etiqueta> Los atributos de se pueden clasificar en: a) Atributos bsicos. Se usan en casi todas las etiquetas pero son realmente tiles para trabajar con hojas de estilo y/o lenguaje JavaScript. Son los siguientes: id, identifica de forma nica cada elemento de un documento HTML (se recomienda que el valor sea mnemotcnico). class, determina clases de etiquetas para las hojas de estilo. (Lo veremos)

IES Zaidn Vergeles de Granada. Departamento de Informtica.

Lenguajes de marcas y sistemas de gestin de la informacin. style, establece, de forma directa, propiedades de estilo CSS a un elemento concreto. title, establece el ttulo de un elemento que se muestra cuando se pasa el ratn por encima de l. b) Atributos de internacionalizacin i18n (se encuentra as escrito en muchos lugares: el 18 es por la cantidad de letras entre la i y la n, y sirve para abreviar). Se utilizan para pginas con contenidos en varios idiomas. lang=cdigo (en documentos HTML y XHTML) xml:lang=cdigo (slo en documentos XHTML) dir=direccin (donde direccin podr ser rtl o ltr) Cdigo se refiere al idioma (es-ES, para espaol de Espaa; en-GB, para ingls britnico; en-US, para ingls de USA; etc.) Direccin hace referencia a la direccin en la que se escriben los caracteres dentro de un prrafo. Se usa en los lenguajes en los que se escribe de derecha a izquierda. c) Atributos de eventos. En una pgina dinmica, es decir, con elementos de animacin, es necesario asociar determinado cdigo (en algn lenguaje, como JavaScript) a los eventos que desencadenan cada accin. Algunos eventos son: onclick ondblclick onmouseover onload onkeypress onchange

Ejercicio: Escribir el siguiente ejemplo en el Bloc de notas y llamarlo prueba2.html (No vamos a aprender JavaScript. Tan solo, para comprender mejor estos atributos, copiad literalmente el cdigo)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>prueba2</title> </head> <body> <div onclick="alert('Hola, has pulsado sobre el div')" style="background-color: orange; border: 3px solid #C00; position: absolute; top:200px">Pulsa sobre esta capa</div> </body> </html>

Probar a cambiar el evento onclick, por ondblclick o por onmouseover. El foco es el elemento de la interfaz grfica que responde al teclado en un momento concreto. Estos atributos permiten controlarlo y desencadenar acciones cuando un elemento tiene dicho foco. Algunos atributos son: onfocus=, desencadena una accin JavaScript cuando recibe el foco. onblur=, desencadena una accin JavaScript cuando el elemento pierde el foco.

IES Zaidn Vergeles de Granada. Departamento de Informtica.

Tema 2. HTML y XHTML Ejercicio: Escribir el siguiente ejemplo y llamarlo prueba3.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>prueba3</title> </head> <body> <form> Haz click sobre el campo de texto <input type="text" onfocus="alert('El campo tiene el foco')"/> </form> </body> </html>

d) Atributos de teclado. accesskey=letra, sirve para usar la combinacin de teclas Alt+letra para acceder de forma rpida a un elemento (atajos de teclado), tabindex=n, indica el orden en que se accede a un elemento, utilizando la tecla Tab. e) Atributos especficos. Son los propios de cada etiqueta o grupo de etiquetas. Aparte de esto, hemos de tener en cuenta que HTML clasifica todos los elementos en dos grupos, atendiendo a la forma en que ocupan los espacios en la pgina: a) inline (en lnea), slo ocupan el espacio necesario para mostrar sus contenidos. Slo pueden contener otros elementos inline o texto. b) block (en bloque), realizan un salto antes y otro despus del espacio que utilizan para su contenido. Pueden contener otros elementos en bloque, en lnea o texto. Hay algunos elementos que pueden ser en bloque o en lnea, segn las circunstancias.

4. Descripcin detallada de las etiquetas.

4.1. Etiquetas de texto.
<p> <h1><h2><h3> <h4><h5><h6> <em> Atr. bsicos, i18n, eventos No tiene atributos particulares block

Es una estructura de bloque que delimita el contenido del prrafo. Atr. bsicos, , i18n, eventos No tiene atributos particulares block

Etiquetas de cabecera. Se usan para encabezar las secciones de un documento. Atr. bsicos, , i18n, eventos No tiene atributos particulares inline

Enfatiza un bloque de texto. En algunos navegadores aparece en cursiva. Atr. bsicos, , i18n, eventos No tiene atributos particulares inline

<strong>

Resalta lo ms importante de una pgina. En algunos navegadores aparece en negrita. Atr. bsicos, , i18n, eventos cite=url block

<blockquote>

Indica que el texto es una cita textual, donde url indica de dnde se extrae la cita. El contenido aparece indentado. Atr. bsicos, , i18n, eventos title=texto inline

<abbr> <acronym>

Indica abreviatura, donde texto indica el significado de la abreviatura. El contenido aparece subrayado con puntos y presenta un tooltip con el texto. Atr. bsicos, , i18n, eventos title=texto inline

IES Zaidn Vergeles de Granada. Departamento de Informtica.

10

Lenguajes de marcas y sistemas de gestin de la informacin.

Indica acrnimos, donde texto indica el significado completo de la siglas. El contenido aparece subrayado con puntos y presenta un tooltip con el texto. Atr. bsicos, , i18n, eventos title=texto inline

<dfn>

Seala definiciones disponibles, donde texto indica el significado del trmino. Presenta un tooltip con el texto. Atr. bsicos No tiene atributos particulares inline/bloc k

<br> Salto de lnea y retorno de carro. <hr> Atr. bsicos, eventos No tiene atributos particulares

block

Muestra una lnea horizontal. Puede ser usado para separar contenidos. Atr. bsicos, , i18n, eventos No tiene atributos particulares block

<pre> <code>

Texto preformateado con fuente no escalable. Respeta los saltos del texto plano. Atr. bsicos, , i18n, eventos No tiene atributos particulares inline

Permite escribir cdigo en algn lenguaje de programacin.

En los lenguajes de marcas, no todos los caracteres son utilizables como contenido de las etiquetas. Los caracteres <, >, &, , , tienen un significado para el lenguaje, por lo que habr que sustituirlos por las llamadas entidades: &lt;, &gt;, &amp;, &quot;, &apos;. Por otra parte, si algunos de los procesos (el sistema operativo del servidor, el servidor web, el navegador cliente,) no utilizan la misma codificacin (por defecto UTF-8), se producen conversiones de un sistema de codificacin a otro. Muchas de estas conversiones producen errores y consecuentemente algunos caracteres no se presentan bien. En estos casos lo mejor es sustituir dichos caracteres problemticos por su entidad HTML equivalente. Estos caracteres siempre se escriben empezando por el smbolo & y acabando con el carcter punto y coma. Entre ambos caracteres se insertar el cdigo que proceda. Algunos ejemplos son:
ntilde Ntilde eacute Eacute espacio nbsp euro euml

(Buscar la tabla completa en Internet.) Ejercicio: Escribir el siguiente ejemplo en el bloc de notas y llamarlo prueba4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>prueba4</title> </head> <body> <p> En este p&aacute;rrafo por fin podemos asegurar que salen las palabras que llevan tildes correctamente, cosa que en todos los ejemplos anteriores no</p> <p> Adem&aacute;s vamos a escribir matem&aacute;ticamente que 3 es menor que 4: 3&lt;4</p> </body> </html>

4.2. Etiquetas para marcos.

Los marcos permiten organizar la presentacin de varios documentos HTML simultneamente en la ventana del navegador. La forma de conseguirlo es dividiendo sta en diferentes reas y asignando, a cada una de ellas, uno de los documentos a mostrar.

IES Zaidn Vergeles de Granada. Departamento de Informtica.

Tema 2. HTML y XHTML Su declaracin tiene esta estructura: <frameset [cols=| rows=]> <frame src=url1/> <frame src=url2/> </frameset>

11

El tamao de una fila o columna se puede indicar por el tanto por ciento que ocupa en el espacio total de las ventanas o por el nmero de pxeles. La etiqueta <frame> aparecer tantas veces como filas o columnas se hayan indicado y, en ella, se especificar toda la informacin relativa a un marco. Por ejemplo, el atributo src se usa para indicar la pgina que se va a cargar en l. Los marcos no son muy utilizados hoy en da, adems, no son vlidos en documentos estrictos de HTML 4.1. En la actualidad se usa otro tipo de marco que permite insertar un documento dentro de otro. El marco insertado se denomina flotante y puede considerarse como un agujero que se abre en una pgina web para mostrar otra. Admite atributos bsicos, de internacionalizacin, de eventos y los siguientes especficos: src=url, pgina que se carga en el marco. width=nmero, anchura en pxeles o en %. height=nmero, altura en pxeles o en %. scrolling=yes | no | auto, barras de desplazamiento lateral. frameborder=1 | 0, indica si el marco tiene borde o no. name=, nombre para el marco. marginwidth=nmero, anchura en pxeles de los mrgenes superior e inferior. marginheight=nmero, altura en pxeles de los mrgenes izquierdo y derecho. Ejercicio: Escribir el siguiente ejemplo en el bloc de notas y llamarlo prueba5.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>prueba5</title> </head> <body> <h1>Vamos a poner un marco flotante con la pgina del periodico ideal dentro</h1> <iframe src="http://www.ideal.es" width="300" height="300">Pgina no disponible</iframe> </body> </html>

4.3. Etiquetas para enlaces.

Un enlace se puede definir sobre un texto, una imagen, un elemento de una lista, etc. y hace referencia a una URL concreta. sta se compone de las siguientes partes:
PROTOCOLO http:// SERVIDOR www.nombre.dominio [RUTA] Camino de [ARCHIVO] Nombre.extensin [CONSULTA] ?variable=valor [SECCIONES] #ID (lugar

IES Zaidn Vergeles de Granada. Departamento de Informtica.

12

Lenguajes de marcas y sistemas de gestin de la informacin.

https:// ftp:// file:// directorios concreto dentro de la pgina web)

Los caracteres que aparecen en los enlaces deben poder expresarse en ASCII. Sin embargo, en ocasiones, las URL contienen caracteres que no se pueden representar mediante este cdigo y, por tanto, stos deben ser convertidos. La llamada codificacin URL convierte una URL en un formato ASCII vlido. La codificacin URL sustituye estos caracteres especiales por un "%" seguido por los dos dgitos hexadecimales correspondientes al cdigo ISO-8859-1. Como las URL no pueden contener espacios en blanco, se sustituyen por el signo +. He aqu la codificacin de algunos de ellos:
/ %2F ? %3F @ %40 ~ %7E %F1 %D1 %E1 %E7

Las principales etiquetas para enlaces son: a) <a> </a>, con atributos bsicos, de internacionalizacin, de eventos y de foco, Adems, cuenta con los siguientes atributos especficos: href=url indica la direccin a la que apunta el enlace. (Esta direccin puede ser relativa o absoluta si es del servidor, si no, en general se puede escribir mediante el protocolo y la direccin completa.) name=valor, pone un nombre a la etiqueta y crea anclas a las que otro enlace puede hacer referencia usando #valor como valor del atributo href. rel=, indica la relacin de la pgina actual con la pgina enlazada. rev=, indica la relacin de la pgina enlazada con la actual. target=, seala el nombre de la ventana o el marco donde se mostrar el documento apuntado por el enlace. hreflang=, especifica el cdigo de internacionalizacin de la pgina enlazada. Los atributos rel y rev pueden tomar los valores: alternate, start, next, prev, chapter, help, etc. El valor de target puede ser el nombre de una ventana o marco, o bien, blank, si se quiere abrir una ventana nueva o self (valor por defecto), si queremos visualizar el documento en el mismo marco o ventana. Si se pone un nombre que no existe abre una ventana nueva. La etiqueta <a> es de tipo en lnea. Ejercicio: Escribir el siguiente ejemplo y llamarlo prueba6.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>prueba6</title> </head> <body> <a href="#ancla">Pulsa para ir al ancla</a> <div style="position: absolute; top:1000px"> <p><a name="ancla">Este </a> parrafo esta situado muy abajo, y en el hemos situado un ancla, mueve la barra de scroll para volver al principio</p> </div>

IES Zaidn Vergeles de Granada. Departamento de Informtica.

Tema 2. HTML y XHTML

</body> </html>

13

b) <script> </script>, slo tiene atributos especficos, que son: scr=, indica la URL de un archivo externo que contiene el cdigo del script. type=text/javascript, especifica el tipo MIME (tipo de archivo/contenido). defer = defer, indica al navegador que no pare la carga de la pgina por la ejecucin del script. c) <link> establece una relacin entre el documento y otros recursos que descarga. Esta etiqueta slo puede aparecer en la cabecera del documento. Tiene atributos bsicos, de internacionalizacin, de eventos (aunque no se pueden usar al estar en la cabecera) y los especficos siguientes: href=url del documento a enlazar. rel= indica la relacin entre el documento actual y el enlazado rev= indica la relacin entre el documento enlazado y el actual target= indica dnde se presentar el documento enlazado hreflang= especifica el cdigo de internacionalizacin del documento enlazado. Ejemplos: <link rel=stylesheet type=text/css href=estilos/llamativo.css/> <link rel=shortcut icon type=image/ico href=favicon.ico />

4.4. Etiquetas para imgenes y multimedia.

En un sitio web, se pueden usar imgenes de contenido e imgenes de adorno y diseo. Las primeras deben incluirse mediante HTML y las segundas, en la medida de lo posible, con hojas de estilo CSS. Los formatos de imagen ms estandarizados en pginas web son JPG, PNG y GIF. Existen diferentes etiquetas que permiten insertar imgenes y multimedia: a) <img>, para insertar una imagen. Posee atributos bsicos, de internacionalizacin, de eventos y los siguientes especficos: src=url, para indicar la localizacin de la imagen. alt=texto descriptivo, texto que aparece si no se carga la imagen. title=texto descriptivo, ttulo de la imagen. width=npx, especifica la anchura de la imagen en pxeles. height=npx, especifica la altura de la imagen en pxeles. usemap=#namedelmap, mapa de imgenes para la imagen. Es importante tener en cuenta que las imgenes tienen un comportamiento en lnea. b) <map>, para crear un mapa de imgenes. Cuenta con atributos bsicos, de internacionalizacin y de eventos y puede ser en lnea o de bloque. c) <area>, para definir los distintos trozos del mapa. Cuenta con atributos bsicos, de internacionalizacin, de eventos y los siguientes atributos especficos: shape=, para indicar la forma del trozo (rect, circle, poly). coords=x, para sealar las coordenadas de la forma. href=url, especifica la direccin enlazada. target=, indica dnde se carga el contenido apuntado en la url.

IES Zaidn Vergeles de Granada. Departamento de Informtica.

14

Lenguajes de marcas y sistemas de gestin de la informacin. Ejemplo: <img src=img.jpg usemap=#dibujo/> <map id=dibujo name=dibujo> <area shape=rect coords=x1, y1, x2, y2/> <area shape=circle coords=x, y, r/> <area shape=poly coords=x1, y1, x2, y2, x3, y3, .../> <map> Ejercicio: Escribir el cdigo que se obtiene tras las siguientes instrucciones y llamarlo prueba7.html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>prueba7</title> </head> <body> <!-Miniprctica: -Buscar una imagen de un mapa de Andaluca. -Descargarla al ordenador. -Entrad en la direccin: http://www.maschek.hu/imagemap/imgmap -Subid la imagen de Andaluca -Generar un mapa web, utilizando las figuras geomtricas, para delimitar las provincias, si es necesario

utilizar ms de una figura para la misma provincia. -Sin poner pgina de destino, tan solo utilizar el atributo alt para poner el nombre de la provincia correspondiente --> </body> </html>

d) Aparte de stas, en HTML existan, para multimedia, diversos tipos de etiquetas que, posteriormente, se estandarizaron en una sola, llamada <object>. Se trata de una etiqueta contenedora que incluye otra, llamada <param/>, que permite pasar los parmetros adecuados al objeto correspondiente. Se pueden tener objetos Flash, objetos Java, etc. Es de tipo bloque. Ejemplo: <object classid=CLSID:XXXXXXXXXX width=800 height=600 type=video/wmv> <param name=FileName value=archive.wmv <param name=autoStart value=true> </object> La etiqueta <object> tena la intencin de sustituir los elementos img y applet. Sin embargo, a causa de errores y la falta de soporte de navegadores, esto no ha sucedido. El soporte para la etiqueta en los navegadores depende del tipo de objeto. Lamentablemente, los principales navegadores utilizan cdigos diferentes para cargar el mismo tipo de objeto. Afortunadamente, la propia etiqueta objeto proporciona una solucin. Si el contenido no se muestra, el cdigo entre las <object> y </ object> etiquetas ser ejecutado. De esta manera, podemos tener varias etiquetas objeto anidadas (una para cada navegador).

IES Zaidn Vergeles de Granada. Departamento de Informtica.

Tema 2. HTML y XHTML

15

4.5. Etiquetas para listas.

Las listas son estructuras que permiten enumerar elementos por lo que, habitualmente, se usan en clasificaciones, instrucciones y barras de navegacin (mens). Las etiquetas que se utilizan para trabajar con listas son:
Atr. bsicos, de internacionalizacin, de eventos Lista sin indicador de orden Atr. bsicos, de internacionalizacin, de eventos Lista ordenadas (numeradas) Atr. bsicos, de internacionalizacin, de eventos Elemento de una lista

<ul>

block

<ol>

block

<li>

block

He aqu un ejemplo de lista ordenada formada por dos elementos: <ol> <li>Elemento1</li> <li>Elemento2</li> </ol> Las listas se pueden anidar, es decir, un elemento de una lista puede ser, a su vez, otra lista. En este caso, habr que poner especial cuidado al colocar las etiquetas de cierre y apertura para que no se entrecrucen. Existe otro tipo de listas, llamadas listas de definiciones, que permiten indicar elementos y sus definiciones. En ellas se contempla la posibilidad de que un trmino tenga varias definiciones y que varios trminos tengan una definicin comn. Las etiquetas que utilizan son las siguientes:
Atr. bsicos, de internacionalizacin, de eventos Lista de definicin Atr. bsicos, de internacionalizacin, de eventos Elemento a definir Atr. bsicos, de internacionalizacin, de eventos Definicin de un elemento

<dl>

block

<dt>

block

<dd>

block

Ejemplo: <dl> <dt>Trmino1</dt> <dd> Definicin1</dd> <dt>Trmino2</dt> <dd> Definicin2</dd> <dd> Definicin3</dd> <dt>Trmino3</dt> <dt>Trmino4</dt> <dd> Definicin3-4</dd> </dl>

IES Zaidn Vergeles de Granada. Departamento de Informtica.

16

Lenguajes de marcas y sistemas de gestin de la informacin.

4.6. Etiquetas para tablas.

Las tablas permiten representar datos en filas y columnas y, aunque durante cierto tiempo se usaron para maquetar informacin, esta prctica est totalmente desaconsejada. Es responsabilidad de quien escribe la tabla asegurarse de que el nmero de datos se ajusta al de filas y columnas. Si no se hace as, el navegador no informar de los errores sino que, tan slo, mostrar huecos en determinados lugares o presentar un comportamiento extrao. Las etiquetas para tablas son: a) <table>, que posee atributos bsicos, de internacionalizacin y de eventos. Adems, posee el atributo especfico summary=, para escribir un breve resumen de los contenidos de la tabla. Es de tipo bloque. b) <tr>, seala cada fila de la tabla. Tiene atributos bsicos, de internacionalizacin y de eventos. c) <td>, seala cada elemento de una fila. Tiene atributos bsicos, de internacionalizacin, de eventos y los atributos especficos: abbr=, para escribir un resumen de la celda. colspan=nmero, expande el nmero de celdas. rowspan=nmero, expande el nmero de filas. Se puede poner una tabla dentro de otra, siempre que se coloque dentro de una celda. d) <th>, posee atributos bsicos, de internacionalizacin, de eventos y los mismos atributos especficos que <td>. Permite indicar las celdas que forman la cabecera de la tabla. e) <caption>, posee atributos bsicos, de internacionalizacin y de eventos. Slo puede aparecer una vez y se escribe, justo, despus de la etiqueta <table>. Se utiliza para poner un ttulo o leyenda a la tabla. f) <thead>, <tfoot>, <tbody> son etiquetas para crear tablas de forma avanzada. Su principal utilidad es agrupar bloques de la tabla y aplicar estilos a cada bloque, sin tener que ir poniendo el estilo en cada fila o celda. Las tres poseen los atributos bsicos, de internacionalizacin y de eventos. Adems, son de tipo bloque. Ejercicio: escribir el siguiente ejemplo en el bloc de notas y llamarlo prueba8.html (Recordad lo de border para table)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>prueba8</title> </head> <body> <table border="1"> <caption>Tabla de prueba</caption> <tr><td rowspan="2" colspan="2"> Hemos unido las dos primeras filas y columnas</td> <td>celda</td><td>celda</td></tr> <tr><td>celda</td><td>celda</td></tr> <tr><td>celda</td><td>celda</td><td>celda</td><td>celda</td></tr> <tr><td>celda</td><td>celda</td><td>celda</td><td>celda</td></tr> </table> </body> </html>

IES Zaidn Vergeles de Granada. Departamento de Informtica.

Tema 2. HTML y XHTML

17

4.7. Etiquetas para formularios.

Los formularios hacen posible la interaccin entre el usuario y el servidor. a) Para definir un formulario se usa la etiqueta <form>, de tipo bloque, que cuenta con atributos bsicos, de internacionalizacin, de eventos y los siguientes especficos: action=url, indica la pgina del servidor que va a procesar los datos del formulario (Por ej: pginas PHP, ASP, JSP, Perl, etc.). method=get | post, determina la forma en que el protocolo http enva la informacin. Con get, la informacin se aade a la URL de la cabecera mediante parejas de la forma URL? name=value&name=value mientras que con post va en el contenido. Si la informacin tiene que llegar antes que la pgina, se enva en la cabecera apareciendo en la barra de direcciones. enctype=application/x-www-form-urlencoded | multipart/form-data | text/plain . Indica el tipo de codificacin de los datos antes de enviarlos al servidor. Por defecto se usa application/xwww-form-urlencoded lo que significa que todos los datos son codificados. Con multipart/form-data no se codifican los caracteres; tan solo, se usa cuando se envan archivos adjuntos al formulario. Con text/plain slo los espacios en blanco se sustituyen por el signo +. La informacin importante no debe enviarse con el mtodo get, a menos que vaya codificada. Por tanto si los datos a enviar son de control, se usa get. Si los datos son para almacenar en una base de datos o en un fichero, usaremos post. Dentro de la etiqueta form, se ponen los controles, cuyas etiquetas se nombran a continuacin. b) <input>, con atributos bsicos, de internacionalizacin, de eventos, de foco y los siguientes: type=, con diez posibles valores (text, password, checkbox, radio, submit, reset, file, hidden, image, button) y es de tipo en lnea. Dependiendo del valor, se pueden utilizar otros atributos. value=texto, indica el valor del control. size=nmero, especifica el ancho del control en nmero de caracteres maxlength=nmero, En los controles text y password indica la longitud mxima de caracteres que se puede teclear. checked=checked indica si el control est marcado en los controles radio y checkbox. disable=disable desactiva el control y, por tanto, no se enva el valor al servidor. readonly=readonly pone el control en slo lectura. (slo para los controles text o password) src=url, para indicar la ruta de la imagen que actuar como un botn de envo. alt=texto, descripcin o texto alternativo que aparece cuando no se carga la imagen. c) <fieldset> sirve para hacer agrupaciones lgicas de controles para lo cual dibuja un marco que engloba varios de ellos. Es de tipo bloque y tiene atributos bsicos, de internacionalizacin y de eventos. d) <legend>, se escribe justo debajo de la apertura del fieldset y le pone un ttulo al grupo. e) <label>, tiene atributos bsicos, de internacionalizacin y de eventos. Define una etiqueta que puede asociarse con un control de formulario mediante el atributo especfico for=id, siendo id el identificador del control del formulario al que se asocia. Mejora la entrada de usuario, ya que si se hace un clic de ratn en el texto que muestra <label> conmuta el estado del control asociado. f) <textarea>, de tipo lnea, con atributos bsicos, de internacionalizacin, de eventos, de foco y los siguientes especficos: cols=nmero, nmero de columnas. rows=nmero, nmero de filas. disabled=disabled, desactiva el textarea con lo que no se enva informacin.

IES Zaidn Vergeles de Granada. Departamento de Informtica.

18

Lenguajes de marcas y sistemas de gestin de la informacin. readonly=readonly, de slo lectura por lo que no se puede escribir. g) <select>, muestra listas desplegables o desplegadas. Es de tipo lnea y admite atributos bsicos, de internacionalizacin, de eventos, de foco y los siguientes especficos: size=nmero, fija el tamao inicial de la lista. Si es mayor que uno la lista aparece desplegada. multiple=multiple permite elegir ms de una opcin. disabled=disabled, desactiva el control. h) <option>, indica cada una de las opciones de la lista. Admite los siguientes atributos especficos: selected=selected, opcin marcada por defecto. value=value, valor de la variable de la opcin correspondiente que se enva al servidor. disabled=disabled, desactiva esa opcin de la lista. i) <optgroup>, sirve para englobar etiquetas <option> y hacer subgrupos. Tiene atributos bsicos, de internacionalizacin, de eventos y los siguientes especficos: label=, texto para la cabecera del grupo. disabled=disabled, desactiva el grupo. Ejemplo: <select> <optgroup label=vehculos suecos> <option value=Volvo>Volvo</option> <option value=Saab>Saab</option> </optgroup> <optgroup label=vehculos alemanes> <option value=Opel>Opel</option> <option value=Audi>Audi</option> </optgroup> </select> Ejercicio: escribir el siguiente ejemplo en el bloc de notas y llamarlo prueba9.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>prueba9</title> </head> <body> <form action="" method="get" enctype="text/plain"> <label>Marcar las opciones que os interesen:</label><br/> <fieldset> <legend>Agrupadas estan mas bonitas</legend> <input type="checkbox" />Opcion 1<br/> <input type="checkbox" />Opcion 2<br/> <input type="checkbox" />Opcion 3<br/> </fieldset> </form> <form action="" method="get" enctype="text/plain"> <label>Marcar las opciones que os interesen:</label> <fieldset>

IES Zaidn Vergeles de Granada. Departamento de Informtica.

Tema 2. HTML y XHTML

<legend>Agrupadas estan mas bonitas</legend> <input type="checkbox" id="op1"/> <label for = "op1"> Opcion 1<label><br/>

19

<input type="checkbox" id="op2"/> <label for = "op2"> Opcion 2<label><br/> <input type="checkbox" id="op3"/> <label for = "op3"> Opcion 3<label><br/> </fieldset> </form> </body> </html>

IES Zaidn Vergeles de Granada. Departamento de Informtica.