HTML y XHTML
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.
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">
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>
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.
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)
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.
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.
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
10
<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
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: <, >, &, ", '. 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árrafo por fin podemos asegurar que salen las palabras que llevan tildes correctamente, cosa que en todos los ejemplos anteriores no</p> <p> Además vamos a escribir matemáticamente que 3 es menor que 4: 3<4</p> </body> </html>
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>
12
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>
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 />
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).
15
<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>
16
17
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>
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>