html aula0

Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML

Lenguaje HTML

Manual de lenguaje HTML a través de ejemplos

Instituto Cuatrovientos – Pamplona/Iruñeahttp://www.cuatrovientos.org

Autor: Pello Xabier Altadill IzuraAsignatura: DIREhttp://dire.cuatrovientos.org

Distribuido bajo licencia Copyleft.http://creativecommons.org/licenses/by/2.0/es/legalcode.es

- 1


Lenguaje HTML1.Introducción............................................................................................................................................42.Texto básico............................................................................................................................................6

Cabeceras, <H1>,<H2>,..,<H6>............................................................................................................6Párrafos y saltos de linea <p>, <br>......................................................................................................7Formatos básicos, <b>, <i>, <pre> y lineas <hr>.................................................................................9Caracteres especiales é, ©,.............................................................................................12Atributos de <body>............................................................................................................................13Fuentes <FONT>.................................................................................................................................15Líneas horizontales <hr>.....................................................................................................................17Etiquetas no estándar...........................................................................................................................18

3.Imágenes...............................................................................................................................................20Insertar imágenes en un documento<img>..........................................................................................20Imagen como fondo de página............................................................................................................21

4.Enlaces..................................................................................................................................................23Enlaces o hipervínculos a otras páginas.<a>.......................................................................................23Atributos de body para hipervinculos..................................................................................................24Enlaces internos en una página............................................................................................................25

5.Listas.....................................................................................................................................................28Listas no numeradas o desordenadas <ul>, <li>.................................................................................28Listar ordenadas...................................................................................................................................29Listas anidadas....................................................................................................................................31

6.Tablas....................................................................................................................................................33Tablas simples <TABLE>, <TR>, <TD>...........................................................................................33Atributos de las tablas.........................................................................................................................35Uniendo celdas: Colspan y Rowspan..................................................................................................36Etiquetas de zona de tabla: <TH>, <THEAD>, <TBODY>, <TFOOT>............................................39Tablas anidadas...................................................................................................................................41Maquetación de documentos con tablas..............................................................................................43

7.Formularios...........................................................................................................................................48Formularios básico: <FORM>, <INPUT>, texto y botones...............................................................48Formularios maquetados en una tabla y <TEXTAREA>....................................................................49Listas desplegables <SELECT>, <OPTION>.....................................................................................51Campos tipo CHECKBOX y RADIO.................................................................................................53Campos ocultos y de envío de ficheros...............................................................................................57Otros elementos: imágenes, <LEGEND>, <LABEL>........................................................................58

8.Marcos...................................................................................................................................................61Definición de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES>............................61Marcos o Frames en columnas............................................................................................................63

- 2


Marcos o Frames anidados..................................................................................................................64Marcos internos: <IFRAME>.............................................................................................................66

9.Etiquetas META....................................................................................................................................69Ejemplos básicos, <META>...............................................................................................................69Redirección automática: refresh..........................................................................................................70

10.XHTML...............................................................................................................................................7211.Referencia HTML...............................................................................................................................7312.Referencia CSS2.................................................................................................................................8013.Bibliografía, enlaces............................................................................................................................90

- 3


1.IntroducciónHTML: HyperText Markup Language

HTML es un lenguaje de marcas para crear documentos de hipertexto, el formato más extendido yfundamental de la World Wide Web. Se basa en una serie de marcas que aportan propiedades a sucontenido, como por ejemplo:

<b>Esto seria un texto en negrita</b>

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

Como se puede ver, añadiendo las marcas <b> y <a> damos al texto simple el formato o la utilidad quequeramos.

HTML hunde sus raices en un lenguaje de proposito mas general llamado SGML. Con la red Interneten funcionamiento desde hacia décadas, ya en el año 1991 y en el ámbito de la comunidad científicaTim Berneers Lee popone la idea de crear una red de paginas entrelazadas. En 1993 se termina dedesarrollar el primer navegador llamado Mosaic, que era capaz de interpretar el lenguaje hipertexto ymostrarlo de manera visual. Y el lenguaje que se empleo y se emplea para los documentos de la web esel HTML.

A partir de ahí surgieron nuevos navegadores (Netscape, mas tarde Internet Explorer), y nuevasespecificaciones del lenguaje HTML. Surgieron lenguajes para dar una apariencia dinamica y mascapacidad de interacción con el usuario como javascript, VBScript, los objetos embebidos en paginascomo los applets, activeX, flash, etc..

Pero al margen de todos los añadidos el lenguaje HTML ha seguido siendo lo mismo: un lenguaje paracrear documentos, que nada tiene que ver con un lenguaje de programación al uso. Actualmente laespecificacion de HTML se encuentra en la versión 4.01 y paralelamente han ido surgiendo otroslenguajes como XHTML y mecanismos de formato como las hojas de estilos CSS. Quien marca (nuncamejor dicho) las pautas y las normas del estándar es la W3C o Consorcio de la WWW.

Para estar al día de los cambios en especificaciones, ver ejemplos, etc no esta demás visitar su páginaweb: http://www.w3.org

Un documento HTML no es más que un archivo de texto con las marcas que dicta el estándar.Básicamente suele estar formado por una cabecera y un cuerpo con el contenido de la página que ve elusuario. Existen editores sofisticados tipo WYSIWYG (=lo que ves es lo que consigues, son editoresvisuales como Dreamweaver, Mozilla-composer, Nvu, Frontpage, ...), pero una página simple se puedecrear con un editor de texto cualquiera.

Introducción - Introducción 4

Veamos la primera página HTML con las etiquetas mas básicas:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 00 :: Mi primera página :</title>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>

 Una página HTML<br> <br> </body> </html>

¿Sencillo no?Primero se especifica el tipo de documento (<!DOCTYPE...>), y seguidamente se van metiendo lasmarcas o tags HTML para definir la página. En general todas las marcas que se abren se tienen quecerrar manteniendo el orden y la jerarquía. En los documentos se empieza por <HTML> y se acaba con</HTML>. La cabecera empieza con <HEAD> y termina con </HEAD>. Y lo mismo con la etiqueta<BODY>. Las etiquetas a su vez pueden tener atributos que dan mayores opciones al formato y alcomportamientos de las mismas (colores, tamaños, anchura, altura, etc...)Esto sería lo que veríamos en el navegador:

Introducción - Introducción 5


2.Texto básicoBien, ya sabemos que es un documento HTML y conocemos las etiquetas básicas para crear uno:

La definición de tipo de documento:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

La cabecera con su titulo...

<title>DIRE - 2º DAI :: HTML :: 01 :: Página con cabeceras::</title>

... y la definición del juego de caracteres que necesita la pagina (depende del idioma)

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Podemos saltarnos esas especificación y la página aparentemente sera la misma, pero si queremosasegurarnos que la página se vea correctamente en cualquier navegador de cualquier ordenador decualquier lugar del mundo conviene no obviarlas. Los navegadores se tragan cualquier cosa y suelen sertolerantes aún así una cabecera correcta puede ser determinante en ocasiones para que el navegadorsepa lo que tiene que hacer.

Las etiquetas HTML pueden escribirse en mayusculas o minusculas omezclando ambas, el navegador las interpretara igual. Por ejemplo:Importante

<Body> = <body> = <BODY> De todas formas conviene acostumbrarse a usar las minúsculas ya que en el estandar XHTML actualse deben usar las minúsculas.

Bueno, una vez que la cabecera esta completa, ya podemos meter contenido dentro de las etiquetasbody, En esta capítulo veremos las etiquetas, marcas o tags más básicas para el contenido de tipo texto.

En un documento HTML como poco podemos meter texto. Existen unas etiquetas básicas para ponerencabezados, marcar parrafos, meter saltos de linea, etc...Cabeceras <H1>,<H2>,..,<H6>

Cabeceras, <H1>,<H2>,..,<H6>Con las etiquetas de cabecera podemos crear títulos, de mayor (<H1>) a menor tamaño (<H6>).Veamos un ejemplo sencillo:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>

Texto básico - Cabeceras, <H1>,<H2>,..,<H6> 6

<title>DIRE - 2º DAI :: HTML :: 01 :: Página con cabeceras::</title>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>   <h1>Esto es una cabecera de tamaño 1</h1> <h2>Esto es una cabecera de tamaño 2</h2> <h3>Esto es una cabecera de tamaño 3</h3> <h4>Esto es una cabecera de tamaño 4</h4> <h5>Esto es una cabecera de tamaño 5</h5> <h6>Esto es una cabecera de tamaño 6</h6> </body> </html>

Y este sería el resultado:

Párrafos y saltos de linea <p>, <br>

A la hora de meter cantidades de texto grandes conviene meter saltos de linea u organizar el texto en

Texto básico - Párrafos y saltos de linea <p>, <br> 7

parrafos, como poco para facilitar la lectura. En HTML se pueden crear párrafos con la etiqueta <p> ymeter saltos de linea con la etiqueta <br>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 02 :: Párrafos y saltos de linea ::</title>

 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <h1>Párrafos y saltos de linea</h1>

 <p>Internet: Internet se define generalmente como la red de redes mundial. Las redes que son parte de esta red se pueden comunicar entre sí a través de un protocolo denominado, TCP/IP (Transmission Control Protocol/ Internet Protocol). Fue concebida a fines de la década de 1960 por el Departamento de Defensa de los Estados Unidos; más precisamente, por la ARPA. Se la llamó primero ARPANET y fue pensada para cumplir funciones de investigación</p> <p> Según una revista alemana de informática, sólo con cambiar 2 bytes del archivosetupreg.hiv de los archivos del CD de Windows convierte nuestro Windows XP Home en Professional. </p>

 Preparados para el salto<br> Y otro salto<br> Y ahora triple salto<br> <br> <br> Alehop! </body> </html>

Veamos como quedaría el documento:

Texto básico - Párrafos y saltos de linea <p>, <br> 8

Formatos básicos, <b>, <i>, <pre> y lineas <hr>

Muchas veces es necesario dar cierto formato para resaltar o diferenciar el texto. Los mas básicos, lanegrita y la cursiva se consiguen con <b> e <i> respectivamente.Tal y como se ve en el siguiente ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 03 :: Formatos básicos::</title>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <h1>Formatos básicos</h1>



<br> Esta asignatura me tiene <b>negro</b> <br> <h3>Frase celebre</h3> <p> <i>640Kb de memoria es más que suficiente para cualquier

Texto básico - Formatos básicos, <b>, <i>, <pre> y lineas <hr> 9

persona</i><br> Bill Gates </p>

 <hr> <pre> La World Wide Web (del inglés, Telaraña Mundial), la Web WWW, es un sistema de hipertexto que funciona sobre Internet. Para ver la información se utiliza una aplicación llamada navegador web para extraer elementos de información (llamados "documentos" o"páginas web") de los servidores web (o "sitios") y mostrarlos en la pantalla del usuario. El usuario puede entonces seguir hiperenlaces que hay en la página a otros documentos o incluso enviar información al servidor parainteractuar con él.

Y en esta asignatura nos moveremos por la WWW. </pre> </body> </html>

En este documento se ven otras etiquetas:● <hr>: crea una linea horizontal en la página, muy útil para dividir el documento.● <pre>: nos permite introducir un texto ya formateado (con sus saltos, sus tabulaciones, sus espacios)

y al mostrarlo visualmente se respeta ese formato. Muy útil por ejemplo para meter texto largo sintener que preocuparse por saltos de linea ni nada, o para meter codigo de programas, etc..

Esto es lo que veríamos:

El siguiente ejemplo trata de emular una prueba de visión de un oftalmólogo. Se puede hacer demuchas maneras (con tamaños de fuentes, con estilos), pero aquí se crea simplemente con cabeceras.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 04 :: La vista ::</title>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>  <center> <h1>N G H I</h1> <h2>E T Q W</h2> <h3>C V G Y</h3> <h4>L K Y R</h4> <h5>W T O V</h5> <h6>Z N M W</h6> </center>

</body> </html>


Y así es como quedaría:

Caracteres especiales é, ©,..

Existen una serie de caracteres que no se pueden meter dentro del texto en un docuemento HTML. Sontodos aquellos que se salen del alfabeto inglés las eñes y las acentuaciones de cualquier tipo como lastildes españolas. Para poder sacar esos caracteres HTML dispone de unas constantes especificas quenos permiten incluirlos en el documento. Esas constantes comienzan por el simbolo & y terminan conel ;. Estos son los más usados:● á = á● é = é● í = í● ó = ó● ú = ú● Á = Á● É = É● Í = Í● Ó = Ó● Ú = Ú● ñ = ñ● Ñ = Ñ

Texto básico - Caracteres especiales é, ©,.. 12

● © = ©● € = €● ¿ = ¿

Existen más caracteres especiales y la mayoría de ellos se insertan usando un código hexadecimal.En la siguiente página podemos ver su uso:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 00 :: Caracteres especiales ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>

 <h1>Caracteres especiales</h1>

<h1>á é í ó ú</h1>

<h1>ñ &tilde; © > < ® ü</h1> </body> </html>

Y así es como los veríamos:

Atributos de <body>Como decíamos en la introducción, la etiquetas HTML pueden ir acompañadas de atributos. En el casode la etiqueta body esos atributos marcan propiedades fundamentales como los colores de todo eldocumento. Veamos su uso:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Texto básico - Atributos de <body> 13


<html> <head> <title>DIRE - 2º DAI :: HTML :: 01 :: Atributos de <body> : Colores ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body bgcolor="green" text="white">

<H1> El color de fondo se establece con bgcolor y el texto con text </H1>

<pre> #include <stdio.h>

int main (int argc, char *argv[], envp *char[]) {

int i = 0;

printf("Esto es codigo C\n");

return 1; } </pre> </body> </html>


Texto básico - Atributos de <body> 14

Fuentes <FONT>

Mediante la etiqueta FONT, en desuso según el estándar, podemos aplicar modificaciones al texto deun documento HTML. Los atributos de la etiqueta FONT giran en torno al formato de fuente como eltamaño, el color, la familia de fuente, etc...Hoy en día es mejor aplicar estilos dentro de bloques <DIV> o <SPAN>.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 02 :: Jugando con las fuentes ::</title>

 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body bgcolor="black" text="white">

<h1>Jugando con las FUENTES</h1>  <font size="14" color="aqua">AQUA</font> <font size="14" color="black">BLACK</font> <font size="14" color="blue">BLUE</font>

Texto básico - Fuentes <FONT> 15

<font size="14" color="fuchsia">FUCHSIA</font><br> <font size="14" color="gray">GRAY</font> <font size="14" color="green">GREEN</font> <font size="14" color="lime">LIME</font> <font size="14" color="maroon">MAROON</font><br> <font size="14" color="navy">NAVY</font> <font size="14" color="olive">OLIVE</font> <font size="14" color="purple">PURPLE</font> <font size="14" color="red">RED</font><br> <font size="14" color="SILVER">SILVER</font> <font size="14" color="TEAL">TEAL</font> <font size="14" color="yellow">YELLOW</font> <font size="14" color="white">WHITE</font><br>

<br><br> <font color="red" face="Verdana">Esto lo pongo en rojo y con fuente Verdana usando<FONT></font> <br><br>



 <div style="color:red; font-family:verdana"> Esto lo pongo en rojo y en Verdana usando la etiqueta <DIV> y su atributostyle </div> </body> </html>


Texto básico - Fuentes <FONT> 16

Líneas horizontales <hr>

En ocasiones puede resultar interesante dividir partes de documento de manera rapida y simple con unaliena horizontal. HTML tiene una etiqueta para la linea : HR<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 03 :: Lineas horizontales ::</title>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <h1>Jugando con lineas horizontales</h1>

<h2>Linea normal <hr></h2> <hr> <h2>Linea coloreada <hr color="red"></h2> <hr color="red"> <h2>Linea corta y coloreada <hr color="green" width="80%"></h2>

Texto básico - Líneas horizontales <hr> 17


<hr color="green" width="75%"> <h2>Linea gorda (en pixels) y coloreada <hr color="red" size="15"></h2> <hr color="red" size="15"> <hr color="blue" size="1"> <h2>Linea corta, alineada y coloreada <hr color="green" align="right"width="80%"></h2> <hr color="green" align="right" width="75%"> </body> </html>


Etiquetas no estándar

Existen una serie de etiquetas no especificadas por el estándar que los navegadores han incluido en lainterpretación del HTML. Es mejor evitar este tipo de etiquetas ya que no se puede asegurar lacompatibilidad con todos los navegadores. A continuación vemos algunos ejemplos:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 05 :: Etiquetas no estándar ::

Texto básico - Etiquetas no estándar 18

</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head>

<body> <h1 align="center">Etiquetas fuera del estándar</h1>



 <marquee><h2>Esto es un <marquee> Y NO ES ESTÁNDAR</h2></marquee>

 <h1>El sonido de fondo: etiqueta <bgsound></h1> <bgsound src="sonido.wav" loop="10"> </body> </html>


Texto básico - Etiquetas no estándar 19

3.ImágenesInsertar imágenes en un documento es muy simple, no hay mas que crear una etiqueta img y especificarel nombre de archivo de imagen que nos interesa. Hay que tener mucha precaución con los nombres deficheros ya que un error de cualquier tipo provoca que la imagen no se cargue correctamente (cuidadocon la las mayúsculas y minúsculas).

Conviene recordar también que las imágenes pueden cargar mucho un documento HTML hasta elpunto de hacer la descarga de una página más lenta o ralentizar el navegador. Por eso conviene noutilizar archivos de imágenes muy grandes (mas allá de 300K por ejemplo) y en cualquier casoretocarlas para que no sean muy pesadas: reducir tamaño, reducir colores, cambiar formato, etc..

Los formatos más habituales para la web son gif, jpg y png. El gif es más peculiar ya que permiteefectos como la transparencia y las imágenes animadas. El jpg comprime las imágenes y facilita que laspáginas sean más ligeras, aunque no es un formato del todo libre; para eso ya esta el png.

Insertar imágenes en un documento<img>

Es muy sencillo, basta con poner la etiqueta <img src=”nombre.gif”> y la imagen se incluirá en eldocumento. La etiqueta tiene atributos para poner borde a la imagen(border), cambiar el tamaño (heighty witdth), ponerle un titulo (title), un texto alternativo si la imagen no sale (alt).

Veamos un ejemplo simple:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 06 :: Imágenes ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <h1 align="center">Insertando imágenes en un documento HTML</h1> <div align="center"> Esto que se ve aquí es el logotipo  <img src="logo-cuatrovientos.gif" border=0 title="logotipo modificado"> del instituto Cuatrovientos </div> <br> <br> <div align="center"> Esto que se ve aquí es el logotipo  <img src="logo-cuatrovientos.gif" border=0 title="logotipo" align="middle"> del instituto Cuatrovientos

Imágenes - Insertar imágenes en un documento<img> 20

</div> <br> <div align="center"> Esto que se ve aquí es el logotipo  <img src="logo-cuatrovientos.gif" border=0 title="logotipo" align="middle"height="300" width="600"> del instituto Cuatrovientos </div> <br>

</body> </html>


Imagen como fondo de páginaBasta con usar el atributo background aunque aún así no da mucho juego. Por eso conviene usar lashojas de estilos que veremos más adelante.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 07 :: Fondo de página ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head>

 <body background="logo-cuatrovientos.gif">

<h1 align="center">Una imagen como fondo de documento</h1>

Imágenes - Imagen como fondo de página 21


</body> </html>

Con una imagen grande también se pueden definir áreas con las etiquetas <map> y <area> con las quedeterminadas partes de la imagen pueden enlazar a páginas distintas, o invocar funciones distintas.Crear una imagen con zonas con un editor de texto simple es bastante complejo, es mejor usar un editorWYSIWYG.

Imágenes - Imagen como fondo de página 22

4.EnlacesLos enlaces. Los links o hipervínculos son el fundamento de la World Wide Web. Con ellos se enlazaun documento tras otro, se enlazan contenidos como imágenes, música, vídeos, etc... Crear un enlace esmuy sencillo. Basta con usar la etiqueta <a> y especificar un destino.

Enlaces o hipervínculos a otras páginas.<a>

Mediante la etiqueta <a href=”direccion”>contenido enlazado</a> se pueden crear enlaces. Elcontenido enlazado no tiene porque ser un texto, puede ser cualquier elemento de un documento HTMLcomo imágenes, tablas, filas, bloques div, etc...

Veamos un ejemplo simple:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 00 :: Enlaces ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>



<h1>Enlaces o HIPERVINCULOS</h1>

<h1><a href="http://www.w3.org">texto enlazado<A></h1>

<a href="dire_html00.html">Enlace a si misma</a>

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

</body> </html>


Enlaces - Enlaces o hipervínculos a otras páginas.<a> 23

Atributos de body para hipervinculos

Los hipervínculos pueden mostrar distintos colores aparte de los predeterminados. Estos colores puedenser distintos dependiendo de las circunstancias de la navegación (un enlace ya visitado, activo, etc...)

En el siguiente ejemplo vemos el uso de esos atributos y además una serie de URL que se pueden crear(a sitios ftp, para escribir correo, etc...)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 01 :: Atributos de <body> parahipervinculos ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head>  <body link="red" vlink="green" alink="black"> <H1> Color de los hipervinculos y tipos </H1>

<a href="dire_html01.html">Enlace a si mismo</a> <br> <br> <a href="http://www.barrapunto.org">Ir a BARRAPUNTO</a> <br> <br> <a href="http://www.barrapunto.org">Ir a SLASHDOT</a> <br> <br>

Enlaces - Atributos de body para hipervinculos 24

<a href="ftp://ftp.rediris.es">Ir a SERVIDOR FTP REDIRIS</a> <br> <br>  <a href="mailto:[email protected]">Escribeme un correo</a><br> <a href="mailto:[email protected]?subject=me gusta tu web">Escribeme uncorreo con asunto incluido</a> <br> <br> Pincha en la imagen para ir a cuatrovientos <a href="http://www.cuatrovientos.org"><img src="logo-cuatrovientos.gif"title="4vientos"></a> </body> </html>


Enlaces internos en una páginaUn enlace interno, también llamados inline, sirve para desplazarnos dentro de un mismo documento deun punto a otro. Es muy práctico en caso de páginas largas donde necesitamos movernos de un extremoa otro de manera rápida y fácil.

Para crear un enlace interno se necesitan dos elementos:

La definición del anchor : <a name=”arriba”>Esto es arriba</a>

El enlace a ese anchor: <a href=”#arriba”>subir arriba</a>

En la definición del anchor no hay porque poner texto. Como se puede apreciar, el enlace interno va

Enlaces - Enlaces internos en una página 25

precedido del símbolo #. Si metemos un enlace a un documento externo y queremos dirigirnos a unaparte concreta también podemos especificar el anchor como por ejemplo:http://www.cuatrovientos.org/documento.html#abajo

Veamos un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 02 :: Enlaces internos del documento ::</title>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head>

<body> <a name="arriba">Estamos arriba</a> <div align="center"><h1>Enlaces internos del documento</h1></div> <h1>Marcamos una zona del documento con <a name="nombre"> zona</a></h1>

<h1>Y la enlazamos con <a href="#nombre"> ir a zona </a></h1> <br> <a href="#abajo">Quiero ir abajo!!</a> <pre> Winamp 5.05: * Security bug fix * Fix for upside down videos through DirectShow Winamp 5.0: * Support for classic Winamp 1.x/2.x/2.9x skins and Winamp 3 ("Modern") skins * Support for classic Winamp 1.x/2.x/2.9x skins and Winamp 3 ("Modern") skins .... etc</pre>

<a name="abajo">Estamos abajo</a> <br> <a href="#arriba">Quiero ir arriba!!</a> </body> </html>

5.ListasLas listas son otro elemento básico de cualquier documento. HTML provee varias opciones para crearlistas tanto ordenadas como desordenadas. Las listas se basan en dos etiquetas: <ul> o <ol> para elcomienzo y final de la lista (según sean ordenadas o desordenadas) y <li> para cada uno de loselementos de la lista.

Listas no numeradas o desordenadas <ul>, <li>

Veamos un ejemplo de listas simples.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 03 :: Listas ::</title>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <h1>Listas simples</h1>

En este curso aprenderás <ul type="square"> <li>HTML</li> <li>Javascript</li> <li>Lenguaje ASP</li> <li>Lenguaje PHP</li> <li>Plataforma .NET</li> </ul>

<h1>Probad atributo type con valores: disc, circle, square</h1>

 <ul type="circle" compact> <li>HTML</li> <li>Javascript</li> <li>Lenguaje ASP</li> <li>Lenguaje PHP</li> <li>Plataforma .NET</li> </ul>

</body> </html>


Listas - Listas no numeradas o desordenadas <ul>, <li> 28

Listar ordenadasMediante la etiqueta <ol> podemos definir una lista pero ordenada. En las listas ordenadas se incluyennúmeros u otras formas de orden como a, b, c,... El modo de numerar se aplica con el atributo type

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 04 :: Listas ordenadas ::</title>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <h1>Una lista ordenada: <ol></h1>  <hr noshade> <font size="6+"> Ingredientes para un gazpacho <ol> <li>Tomates</li> <li>Pepino</li> <li>Pimiento verde</li> <li>Ajo</li>

Listas - Listar ordenadas 29


<li>Cebolla</li> <li>Unas migas</li> <li>Sal vinagre y aceite</li> </ol> </font> <hr> <h1>Probar atributo type de <ol> con estos valores</h1> <font size="6+"> <ul> <li>A</li> <li>a</li> <li>I</li> <li>i</li> <li>1</li> </ul> </font> </body> </html>


Listas - Listar ordenadas 30

Listas anidadas

Las listas también se pueden anidar unas dentro de otras. ¿Se puede hacer que la numeración siga lalógica de listas y sublista? según el estándar de CSS2 si, pero lo cierto es que al probarlo en distintosnavegadores no queda muy claro.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 04 :: Listas anidadas ::</title>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <h1>Una lista ordenada: <ol></h1>  <hr noshade> <font size="6+"> Índice del libro <ol type="1"> <li>Tema1</li>

<ol type="1"> <li>Subtema1</li> <li>Subtema2</li>

<ol type="a"> <li>Subtemaa</li> <li>Subtemab</li> </ol>

<li>Subtema3</li> </ol>

<li>Tema2</li> <li>Tema3</li> <li>Tema4</li>

<ol type="1"> <li>Subtema1</li> <li>Subtema2</li> <li>Subtema3</li> </ol>

<li>Tema5</li> <li>Tema6</li> <li>Tema7</li> </ol> </font> </body> </html>


Listas - Listas anidadas 31


Existen otro tipo de listas, las de definiciones (<dl>) pero su uso es muy poco habitual.

Listas - Listas anidadas 32

6.TablasLas tablas en HTML sirven, como es lógico, para mostrar información de manera ordenada perotambién se usan como herramienta de maquetación básica. A través de las tablas anidadas podemosdividir el documento en varias partes ordenadas como menús laterales, cabeceras, etc...

¿Por qué necesitamos una herramienta para maquetar? La disposición (layout) de los elementos en un documento HTML es seguida: si vamos metiendoelementos (imágenes, párrafos, tablas)estos se pondrán uno detrás de otro sin control alguno de loselementos. Con las tablas, como veremos en uno de los ejemplos podremos controlar la disposición detodos los elementos de la página, y aplicar distintos estilos.

Tablas simples <TABLE>, <TR>, <TD>Para crear una tabla se utilizan tres etiquetas:

● <TABLE> : esta etiqueta sirve para definir la tabla

● <TR> : esta enmarca una fila

● <TD>: y esta enmarca una celda

Por tanto para crear una tabla básica debemos crear las etiquetas <TABLE>, por cada fila la etiqueta<TR> y dentro de cada fila metemos las <TD> para especificar las celdas. Por defecto debemos meterel mismo numero de celdas en cada fila ya que eso marca el numero de columnas de la tabla. Siqueremos unir columnas o filas haremos uso del atributo colspan y rowspan.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 00 :: Tablas ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>

 <h1>Tablas HTML</h1>

<h2>Se utilizan las etiquetas <table>, <tr> y <td></h2> <hr size="1" color="black">

 <table border="1">

 <tr>

 <td>Nombre</td> <td>Apellidos</td> <td>DNI</td> <td>Edad</td>

Tablas - Tablas simples <TABLE>, <TR>, <TD> 33

</tr> <tr>

 <td>Juan</td> <td>Palomo</td> <td>33445532L</td> <td>34</td>

</tr> <tr>

 <td>Darth</td> <td>Vader</td> <td>66666666H</td> <td>26</td>

</tr> <tr>

 <td>Miguel</td> <td>Indurain</td> <td>45326853X</td> <td>39</td>

</tr> </table>

</body> </html>

Y esto es lo que se vería

Tablas - Tablas simples <TABLE>, <TR>, <TD> 34

Atributos de las tablasLas tablas cuentas con una serie de atributos para controlar tanto el aspecto visual (colores, tamaños,..)como otras características propias de las tablas como el espacio entre celdas, los bordes, etc.

En el siguiente ejemplo se muestra el uso de alguno de estos atributos.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 01 :: Atributos para tablas ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>

 <h1>Atributos para Tablas HTML</h1> <h2><TABLE></h2> <font size="+2"> <ul> <li>Borde (border=1)</li> <li>cellspacing="0"</li> <li>cellspadding="0"</li> <li>width="80%"</li> <li>align="center"</li> </ul> </font> <hr size="1" color="black">

 <table border="1" cellspacing="1" cellspadding="1" width="80%" align="center">

 <tr bgcolor="blue" style="color:white">


</tr> <tr>


</tr> <tr>


</tr> <tr>

Tablas - Atributos de las tablas 35



</tr> </table>

</body> </html>


Uniendo celdas: Colspan y RowspanEn ocasiones puede interesar unir celdas o columnas en una tabla, tanto por estética como porfuncionalidad. Eso se consigue mediante los atributos colspan y rowspan; su aplicación parece simplepero hay que tener claro lo que se tiene y lo que se quiere conseguir, sobretodo si se hace con un editorno-visual. Las herramientas WYSIWYG facilitan enormemente la tarea de fusión de celdas.

Veamos unos ejemplos sencillos.

Tablas - Uniendo celdas: Colspan y Rowspan 36

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 02 :: Colspan y rowspan ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>

 <h1>Uniendo celdas con colspan y rowspan</h1> <hr size="1" color="black">

<h2>Efecto del colspan</h2>



 <!-- En este caso le decimos a la celda que ocupe el espacio de 4 celdas --

> <td colspan="4" align="center"><b>CLIENTES</b></td>

</tr> <tr>


</tr> <tr>


</tr> <tr>


</tr> </table>

<hr size="1" color="black">

<h2>Efecto del rowspan</h2>

</tr> <tr>

 <td>Juan</td> <td>Palomo</td> <td>33445532L</td>   <td rowspan="3">No se sabe</td>

</tr> <tr>

 <td>Darth</td> <td>Vader</td> <td>66666666H</td>

</tr> <tr>

 <td>Miguel</td> <td>Indurain</td> <td>45326853X</td>

</tr> </table>

</body> </html>

Y este sería el resultado de la unión:

Etiquetas de zona de tabla: <TH>, <THEAD>, <TBODY>, <TFOOT>Estas etiquetas aparentemente no hacen nada, pero no es así. <THEAD>, <TBODY>, <TFOOT> seutilizan para marcar filas concretas de la tabla como parte de la cabecera, el cuerpo o el pié de la tabla.En el caso de <TH> su comportamiento es como el de una celda <TD> aunque se usa en la cabecera delas tablas.

Como poco son muy útiles para aplicar estilos diferenciados en cada zona de la tabla. Las tablassiempre suelen tener un color de fondo distinto el la cabecera o en el pie de tabla.

Aparte de eso, si se imprime un documento HTML con una tabla muy grande se conseguirá un efectosorprendente: si el listado de la tabla ocupa varias paginas, el encabezado y el pie de las tablasaparecerá en todas ellas para facilitar el significado de cada campo.

Veamos un simple ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 03 :: Etiquetas dentro de las tablas ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>

 <h1>Etiquetas para delimitar partes de la tabla</h1>

<h2><TABLE></h2>

Tablas - Etiquetas de zona de tabla: <TH>, <THEAD>, <TBODY>, <TFOOT> 39

<font size="+2"> <ul> <li>TH : equivalente a TD</li> <li>THEAD : etiqueta para contener las filas de cabecera</li> <li>TBODY : etiqueta para contener las filas del cuerpo de la tabla</li> <li>TFOOT : etiqueta para contener el pie de tabla</li> </ul> </font> <hr size="1" color="black">



<table border="1" cellspacing="1" cellspadding="1" width="80%" align="center">

<thead style="color:red; font-weight: bold">



</tr> </thead>

<tbody> <tr>


</tr> <tr>


</tr> <tr>


</tr> <tr>


</tr>

Tablas - Etiquetas de zona de tabla: <TH>, <THEAD>, <TBODY>, <TFOOT> 40


</tbody>

<tfoot style="font-weight:bold;color: white; background: black"> <tr>

<td colspan="4" align="center">Pie de tabla</td> </tr> </tfoot>

</table>

</body> </html>


Tablas anidadas

Tablas - Tablas anidadas 41

Las posibilidades de anidación de elementos en un documento HTML son infinitas y con las tablas nopodía ser menos. De hecho la maquetación con etiquetas <TABLE> deriva siempre en tablas anidadas.

Veamos un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 04 :: Tablas dentro de tablas</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>

 <h1>Anidando tablas</h1>



<table border="2" cellspacing="1" cellspadding="1" width="80%" height="80%"align="center">


  <td style="vertical-align: bottom;" valign="bottom">

<table width="80%" height="90%" border="2"> <tr>

<td>celda1</td> <td>celda2</td> <td><img src="logo-cuatrovientos.gif" title=""></td>

</tr> <tr>

<td>Ir a <a href="http://www.google.es">google</a></td> <td>Celda3</td> <td align="center" valign="center">

<table border="1" width="90%"> <tr>

<td>1</td><td>2</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>

</tr> </table>

</td> </tr> </table>

</td>

Tablas - Tablas anidadas 42


</tr> </table>

</body> </html>


Maquetación de documentos con tablas

Para la maquetación o diseño general de las paginas web se pueden utilizar entre otras soluciones lastablas HTML. Es la forma más sencilla ya que no requiere conocimientos de hojas de estilos. Se suele

Tablas - Maquetación de documentos con tablas 43

partir de tablas que ocupan todo el espacio de página y de ahí se pasa a tablas que definen partes másconcretas de la misma.

Veamos un simple ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 05 :: Maquetación con TABLAS</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>

 <h1>Las tablas como herramienta de maquetación</h1>

<table border="2" cellspacing="1" cellspadding="1" width="100%" height="80%"align="center"> <tr>

<td height="10%" width="20%"> </td> <td width="60%"><h1>Cabecera</h1></td> <td width="20%"> </td>

</tr> <tr>

<td height="80%">MENU<br>LATERAL</td> <td align="center" valign="center"><h1>CONTENIDO CENTRAL</h1></td> <td> </td>

</tr> <tr>

<td> </td> <td align="center">© 2005 - Pello Xabier Altadill</td> <td> </td>

</tr> </table>

</body> </html>

Y este sería el resultado

En el proceso de diseño de la página conviene usar tablas con borde para no perder de vista los limitesde la tabla y sus celdas. Los editores WYSIWYG en su caso suelen mostrar la estructura de tablas conlíneas discontinuas.

Veamos ahora otro ejemplo en el que ya se aplican colores para ir dando forma concreta a la página.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 06 :: Maquetación con TABLAS</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body leftmargin="0" topmargin="0">



<table border="2" cellspacing="1" cellspadding="1" width="100%" height="80%"align="center">


<tr bgcolor="red" style="color:white"> <td height="10%" width="20%"> </td> <td width="60%"><h1>Cabecera</h1></td> <td width="20%"> </td>

</tr> <tr>

<td height="80%" bgcolor="red" style="color:white" align="left"valign="top">

<table style="font-size:24" border="1" width="90%" style="color:white">

<tr><td>MENU1</td></tr> <tr><td>MENU2</td></tr> <tr><td>MENU3</td></tr> <tr><td>MENU4</td></tr> <tr><td>MENU5</td></tr> <tr><td>MENU6</td></tr> <tr><td>MENU7</td></tr>

</table> </td> <td align="left" valign="center"><h1>CONTENIDO CENTRAL</h1></td> <td> </td>

</tr> <tr>

<td bgcolor="red" style="color:white"> </td> <td align="center">© 2005 - Pello Xabier Altadill</td> <td> </td>

</tr> </table>

</body> </html>



7.Formularios

Si queremos crear aplicaciones web serias los formularios son imprescindibles; de hecho,¿qué son lasmayorías de las aplicaciones web sino conjuntos de formularios? Veamos como se define un formularioy los elementos de formulario uno por uno.

Formularios básico: <FORM>, <INPUT>, texto y botones

Un formulario HTML debe encerrarse con las etiquetas <FORM> y a partir de ahí debe conter uno omas campos cuyo valor será enviado por el formulario a una página de destino.

Los campos se crean en su mayoría con etiquetas INPUT de distinto tipo y se les pueden añadir botonespara facilitar su envío, cancelación o cualquier otro tipo de acción que le asociemos.

Veamos un ejemplo de formulario muy simple:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 00 :: Mi primer formulario ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>

 <h1>Formularios <FORM></h1>

<h2>Se utilizan las etiquetas <INPUT> con atributos type, name y value</h2> <hr size="1" color="black">

 <form name="Formulario" method="POST" action="dire_html00.html">

Login: <input type="text" name="login" value=""><br>Password: <input type="password" name="password" value=""><br>

<input type="submit" name="boton_submit" value="Enviar"><input type="reset" name="boton_vaciar" value="Vaciar">

</form>

</body> </html> Ahora vamos a ver las listas que se ve


Formularios - Formularios básico: <FORM>, <INPUT>, texto y botones 48


Formularios maquetados en una tabla y <TEXTAREA>

Como se ha comentado en el tema anterior, las tablas son muy utiles para confeccionar el diseño de unapágina pero además en el caso de los formularios nos sirven para poner los campos y sus etiquetas deforma ordenada.

Se consigue un efecto más profesional, como se ve en el siguiente ejemplo. De paso se presenta el tipode campo <TEXTAREA>: este campo tiene etiqueta propia y no se define con INPUT.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 01 :: Un formulario maquetado ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>


<h2>Campos de texto y MAQUETACIÓN de formularios</h2> <hr size="1" color="black">

Formularios - Formularios maquetados en una tabla y <TEXTAREA> 49

<form name="Formulario" method="POST" action="dire_html01.html"><table border="1">

<tr><td>Login:</td><td><input type="text" name="login" value=""></td>

</tr><tr>

<td>Password:</td><td><input type="password" name="password" value=""></td>

</tr><tr>

<td>Descripcion:</td><td><textarea name="descripcion"></textarea></td>

</tr><tr>

<td><input type="submit" name="boton_submit" value="Enviar"></td><td><input type="reset" name="boton_vaciar" value="Vaciar"></td>

</tr>

</table></form>

</body> </html>

Este sería el resultado, se ve un formulario más centrado.

Formularios - Formularios maquetados en una tabla y <TEXTAREA> 50


Listas desplegables <SELECT>, <OPTION>Ahora Las listas desplegables ofrecen una serie de opciones de las que el usuario debe elegir alguna.Dependiendo de el numero de elementos que pueda seleccionar (único o múltiple) la lista puedeaparecer con aspecto distinto. Las de elección única se muestran replegadas y las de elección múltiplese pueden mostrar abiertas. En cualquier caso lás dos se crean las etiquetas <SELECT> para definir lalista y <OPTION> para cada elemento de la misma.

Es importante recordar que en cada elemento de una lista (<OPTION>) haydos valores: el que se muestra al usuario y se ve en la página y el atributo

“value” que es quien tiene el valor efectivo de cada opción (es el valor que se envía con el formulario).No tienen por qué coincidir el uno con el otro.

Importante

Veamos un ejemplo de uso de listas:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 02 :: Listas ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>

Formularios - Listas desplegables <SELECT>, <OPTION> 51

<h2>Listas</h2> <hr size="1" color="black">



</tr><tr>


</tr><tr>

<td>Descripcion:</td><td><textarea name="descripcion">Contenido inicial...</textarea></td>

</tr><tr>

<td>Estado civil:</td><td>

<select name="estado"><option value="0">CASADO</option><option value="1">SOLTERO</option><option value="2">CON NOVIA</option><option value="3">PROMISCUO</option><option value="4">VIVO EN PECADO</option>

</select></td>

</tr><tr>

<td>Aficiones:</td><td>

<select name="aficiones" multiple size="5"><option value="0">IR AL CINE</option><option selected value="1">IR A CLASE</option><option value="2">LEER</option><option value="3">COMER</option><option value="4">NO HACER NADA</option><option value="5">NADAR</option><option value="6">HACER DEPORTE</option>

</select></td>

</tr><tr>


<td><input type="submit" name="boton_submit" value="Enviar"></td><td><input type="reset" name="boton_vaciar" value="Vaciar"></td>

</tr>

</table></form>

</body> </html>


Listas con elementos agrupados

En las listas o selects tenemos la opción de agrupar los elementos de la misma bajo un mismo grupo.Para ellos se utiliza la etiqueta optgroup al que se le indica un label especifico para cada grupo. Estesería un código de ejemplo:

<select name="superlista"><optgroup label="Amiguetes">

<option value="0">Mikel</option><option value="1">Juan</option><option value="2">Jon</option>



</optgroup><optgroup label="Amiguitas">

<option value="3">Bea</option><option value="4">Nerea</option><option value="5">Raquel</option>

<optgroup label="Malvados"><option value="6">Lord Beider</option><option value="7">Lord Maula</option>

</optgroup></select>

Y este sería el efecto en el navegador:

Campos tipo CHECKBOX y RADIO

Estos campos son habituales en cualquier entorno visual: generalmente se presentan en grupos aunquetambién pueden ir solos. En cualquier caso la funcionalidad es distinta: los checkbox (de formacuadrada) permiten más de una selección y los radio en cambio solo permiten una.

A la hora de definir un grupo de checkbox y radios hay que tener mucho cuidado con el atributo nameya que todos los elementos de un grupo de checkbox o radios deben compartir el atributo name. Así escomo se asocian. El valor real que se envía en el formulario es un array que especifica el value y si estachequeado el campo o no (true o false).

Otra cosa a tener en cuenta es que debemos meter una etiqueta aparte para que acompañe a estoselementos ya que por si solos no muestran ningún texto.

Veamos un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 03 :: Checkbox y Radiobuttons::</title>

Formularios - Campos tipo CHECKBOX y RADIO 54


</table></form>

</body> </html>


Formularios - 56

Campos ocultos y de envío de ficheros

Un campo habitual en los formularios de aplicaciones web es el de tipo hidden u oculto. Este es comoun campo de texto con la excepción de que no se ve en el navegador. Pero sirve para almacenar datosque deben enviarse con el formulario.

Otro campo útil es el de envío de ficheros o tipo file. Permiten al usuario seleccionar un fichero de suordenador para enviarlo como parte del formulario. Es muy habitual en aplicaciones de webmail paraañadir ficheros adjuntos o en foros para añadir avatars.

Hay que tener en cuenta que si se envía un fichero con un formulario debedefinirse el formulario con algunas variantes en sus atributos:

enctype="multipart/form-data"

Importante

Veámoslo en este ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 04 :: Envio de ficheros y campos hidden ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>


<h2>INPUT TYPE: file y hidden</h2>

<legend> ACCESO AL SISTEMA  <form name="Formulario" method="POST" action="dire_html04.html"enctype="multipart/form-data">

<input type="hidden" name="codigo" value="32454325">

Formularios - Campos ocultos y de envío de ficheros 57

<table border="1" align="center">

<tr>

<td>Login</td><td><input type="text" name="login" value="" id="idlogin"></td>

</tr><tr>

<td>Password</td><td><input type="password" name="password" value=""

id="idpassword"></td></tr><tr>

<td>Enviar fichero</td><td><input type="file" name="fichero" value=""></td>

</tr><tr>


</tr>

</table></form>

</legend>

</body> </html>

Y esto es lo que se ve. En los campos tipo file se puede apreciar que el interprete de HTML (elnavegador), añade un botón para la selección de un fichero.

Formularios - Campos ocultos y de envío de ficheros 58

Otros elementos: imágenes, <LEGEND>, <LABEL>Estos elemento se asocian a los formularios aunque no es muy habitual verlos.

Los legend se usan para enmarcar: no son mas que un texto con un marco. En el ejemplo anterior sepuede ver uno, en concreto es lo que pone “ACCESO AL SISTEMA”.

Los label sirven para poner un texto que acompañe a un campo de formulario. Es raro verlos aunquepueden ser útiles como poco para aplicarles estilos.

Veamos un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 05 :: Otros elementos::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>


<h2>Otros elementos: legend, label, image</h2>

<legend> ACCESO AL SISTEMA  <form name="Formulario" method="POST" action="dire_html05.html"><table border="1" align="center">

<tr><td><label for="idlogin" accesskey="L">Login</label></td><td><input type="text" name="login" value="" id="idlogin"></td>

</tr><tr>

<td><label for="idpassword" accesskey="P">Password</label></td><td><input type="password" name="password" value=""

id="idpassword"></td></tr><tr>

<td><input type="image" name="boton_submit" src="logo-

cuatrovientos.gif" alt="Enviar"></td><td><input type="reset" name="boton_vaciar" value="Vaciar"></td>

</tr>

</table></form>

Formularios - Otros elementos: imágenes, <LEGEND>, <LABEL> 59


</legend>

</body> </html>


Formularios - Otros elementos: imágenes, <LEGEND>, <LABEL> 60

8.MarcosLos marcos o frames sirven para dividir el navegador en varias partes y mostrar distintos documentosHTML en cada una de ellas. Hay quien dice que están en desuso aunque siempre pueden ser útiles endeterminadas circunstancias.

Definición de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES>Para hacer una página con marcos lo primero que hay que hacer es crear la página que los contiene: esapagina es muy simple, no tiene más que la etiqueta HTML, la cabecera y un titulo y la etiqueta<FRAMESET>. Y no debe tener la etiqueta body.

Dentro del frameset se define la disposición de los marcos y la página que debe contener cada uno deellos, cada uno de ellos se especifica en la etiqueta <FRAME>.

¿Cómo se marca el numero de frames y el espacio que van a ocupar? Mediante el atributo rows o cols.Ese atributo contiene una lista de porcentajes o tamaños por cada frame (separados por coma).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 00 :: Mi primera página conFRAMES::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head>

 <frameset rows="20%,80%" border="5" frameborder="2">

<frame src="menu.html" name="menu"> <frame src="principal.html" name="principal">

<noframes> Lo sentimos pero su navegador no soporta FRAMES </noframes>

</frameset>

</html>


Marcos - Definición de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES> 61


Esta sería la página del la parte superior<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 00 :: Mi primera página conFRAMES::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body bgcolor="red">

<table width="100%" border="1"> <tr style="font-size:54pt;color:white">

<td style="font-size:14pt">Opción 1</td> <td style="font-size:14pt">Opción 2</td> <td style="font-size:14pt">Opción 3</td> <td style="font-size:14pt">Opción 4</td> <td style="font-size:14pt">Opción 5</td> <td style="font-size:14pt">Opción 6</td> <td style="font-size:14pt">Opción 7</td>

</tr> </table> </body> </html>

Y esta la página de la parte inferior.

Marcos - Definición de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES> 62

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 00 :: Mi primera página conFRAMES::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body bgcolor="green">

<div style="font-size:54pt;color:white" align="center"> Esta es la pagina principal </div>

</body> </html>

Marcos o Frames en columnasVeamos un ejemplo de frames pero formando columnas.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 01 :: FRAMES columnas ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head>

 <frameset cols="20%,20%,20%,20%,20%" border="5" frameborder="2">

<frame src="menu.html" name="menu"> <frame src="principal.html" name="principal"> <frame src="menu.html" name="menu"> <frame src="principal.html" name="principal"> <frame src="menu.html" name="menu">


</frameset>

</html>

Este sería el resultado:

Marcos - Marcos o Frames en columnas 63

Marcos o Frames anidados

Los marcos se pueden anidar, como no podía ser menos. Dentro de un frameset se puede meter otroframeset y crear una estructura típica como esta:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 01 :: FRAMES anidados ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head>

 <frameset rows="20%,80%" border="5" frameborder="2">

<frame src="cabecera.html" name="cabecera"> <frameset cols="20%,80%" border="5" frameborder="2">

<frame src="lateral.html" name="lateral"> <frame src="principal.html" name="principal">

</frameset>

Marcos - Marcos o Frames anidados 64

</frameset>

</html>

Esta sería la misma pero usando atributos NORESIZE. Sirve para que el usuario no pueda cambiar detamaño los marcos.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 03 :: FRAMES anidado + NORESIZE ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head>

 <frameset rows="20%,80%" border="5" frameborder="2" >

<frame src="cabecera.html" name="cabecera" noresize > <frameset cols="20%,80%" border="5" frameborder="2" >

<frame src="lateral.html" name="lateral" noresize> <frame src="principal.html" name="principal">

</frameset> <noframes> Lo sentimos pero su navegador no soporta FRAMES </noframes>

</frameset>

</html>


Marcos - Marcos o Frames anidados 65


Marcos internos: <IFRAME>

Los IFRAMES son marcos internos en una página, esto es, una página HTML puede contener otra enun IFRAME. El efecto que se crea es como el de un textarea que contiene HTML. Su uso esta enentredicho por los problemas de seguridad que puede suponer (hubo un exploit muy popular que hacíauso de los IFRAMES). De hecho, si un documento HTML (una página web o un correo electrónico)con IFRAMES pasa por un filtro de seguridad puede que este elimine o “desarme” las etiquetasIFRAME.

En fin, veamos un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 04 :: La etiqueta IFRAME ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head>

<div style="bgcolor:red;bgcolor:white;font-size:25pt"> Esto es un IFRAME, una etiqueta con polemica.<br> Es un frame interno<br><iframe src="pagina.html"><iframe> </div>

<hr> <iframe src="contenido.html"> </iframe>

</html>

Marcos - Marcos internos: <IFRAME> 66


Este sería el contenido del frame interno:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIRE - 2º DAI :: HTML :: 05 :: Contenido de pruebas ::</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body bgcolor="maroon" text="white" link="grey"> <pre> <h1>Menú</h1><img src="logo-cuatrovientos.gif" border="0"> <a href="http://www.restauranteotzarreta.com">Ir a restaurante</a>

Coctail de Bienvenida Platos de Ibericos Ensalada de mariscos Bogavante a la plancha Hongos en hojaldre Cazuelita de kokotxas Rodaballo asado con papas Sorbete de limon al cava Corazon de solomillo al Oporto Natillas </pre> </body> </html>

Y este sería el resultado


9.Etiquetas METALas META son etiquetas que se incluyen en el documento y están dedicadas a describir distintosaspectos generales del documento, como el juego de caracteres que necesita la página como ladescripción del mismo, el autor, el programa que se ha utilizado para editarlo, etc...

Son etiquetas que se meten en la cabecera (<HEAD>) no se ven en el navegador aunque si se puedenhacer notar.

Ejemplos básicos, <META>

Entre las etiquetas más útiles de cara a colgar la página en internet se podrían citar keywords (palabrasclave que identifican el docuemto) y description (una breve descripción del mismo). A la hora de colgaruna página en internet las arañas, bots o rastreadores pasarán por nuestra página y mirarán en estasetiquetas para sacar información; cuando alguien busque información sobre algo que hayamos puestoen estas etiquetas será más fácil que encuentre nuestra página.

Veamos unos ejemplos de etiquetas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> 

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

 <META name="keywords" content="cuatrovientos, instituto, enseñanza"> <META name="description" lang="es"

content="Esta es la pagina del instituo cuatrovientos bla la...">

 <META http-equiv="Expires" content="Mon, 11 Aug 2005 16:12:03 GMT">

 <META name="Author" lang="es" content="Pello Xabier Altadill">  <META NAME="generator" CONTENT="Microsoft Emacs editor">

 <META name="copyright" content="© Pello Xabier Altadill."> <META name="date" content="2004-12-09T09:14:23+00:00">

Etiquetas META - Ejemplos básicos, <META> 69

<title>Desarrollo de aplicaciones Web :: 2º DAI :: Etiquetas META </title></head><body><h1>El instituto Cuatrovientos</h1><i>Cuatrovientos es una cooperativa de profesionales, lo que facilita las claves paraque seamos capaces de promover un modelo educativo atravesado por proyectosinterdisciplinares que ponen en contacto la vida con la escuela y la empresa yenriquecido por la voluntad permanente de superación. </i>

<hr width="80%"><h2>Servicios a la mano</h2>

<b>Artean</b><p>Departamento de actividades externas del Instituto. Un mundo de relaciones con lasempresas: prácticas en empresas (FCT), búsqueda o mejora de empleo,cursos de formación, información y orientacion laboral.</p>

<b>Salas Informáticas</b><p>El Instituto Cuatrovientos cuenta con 12 salas de ordenadores conectadas en red,con equipos informáticos y tecnología de últimageneración.</p><p>El ordenador es una herramienta habitual de trabajo, en cualquier etapa educativa.</p>

</body></html>

Redirección automática: refresh

Un efecto muy elegante para crear un splash-screen o página de presentación es hacer un refresh de unapágina. Mediante una etiqueta META podemos provocar que una página cargue otro pasados unossegundos. Puede ser otra página distinta o la misma (un truco habitual en retransmisiones de partidos defútbol a través de páginas web). En muchos casos también se usa para que simplemente se actualice lapágina cada x-tiempo.

Veamos como se hace:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> 



Etiquetas META - Redirección automática: refresh 70


10.XHTMLMás allá del estándar HTML y basándose en los principios de XML ha surgido un nuevo tipo dedocumento: XHTML. Aparentemente el código no cambia mucho respecto a la sintaxis de HTML,aunque para que un documento sea válido debe cumplir los requisitos mínimos de XML:

● Debe tener un título

● Todas las etiquetas deben cerrarse: <b> debe cerrarse con </b>

● Los atributos deben tener algún valor entre comillas: por ejemplo esto no es válido

<select name=”nombre” multiple>

● La anidación de etiquetas debe ser coherente.

Conviene ir conociendo este estándar ya que es probable que la tendencia sea converger hacia loscontenidos XML. Con este estándar el consorcio web trata de que se separe la estructura del documentodel contenido, y facilitar por ejemplo que un mismo documento se pueda adaptar a distintosdispositivos: ordenadores, móviles, etc..

Veamos un simple ejemplo. Obsérvese el cambio en la definición de tipo de documento (DTD), ladeclaración como documento XML, y el hecho de que incluso las etiquetas que no tienen etiqueta decierre (como <hr>), se cierran añadiendo la “/”.

<?xml version="1.0" encoding="UTF-8"?><!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" xml:lang="en" lang="en"><head> <meta name="author" content="Pello Xabier Altadill" /> <meta name="keywords" content="Ejemplo pagina xhtml" /> <meta http-equiv="content-language" content="es-es" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Ejemplo de pagina XHTML</title></head><body><div> <h1>Super ejemplo de pagina XHTML</h1>

Aqui se cierran todas las etiquetas. <hr /></div><p>Bueno, no parece complicado.</p></body></html>

Las etiquetas individuales que debieran cerrarse serían:

● <hr />

● <img src=”foto.gif” />

● <br />

● <meta ... />

XHTML - XHTML 72


11.Referencia HTMLUna referencia de las etiquetas HTML extraído de la especificación de la w3c, a la que se han añadidolos atributos y eventos disponibles.

Nombr AtributosDesuso

Descripción

A

accesskey, charset, class, coords, dir, href, hreflang, id,lang, name, onBlur, onClick, onDblClick, onFocus,onKeyDown, onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, rel, rev, shape, style, tabindex, target, title,type

Anchor o enlace

ABBR abbreviated form (e.g., WWW,

HTTP, etc.)

ACRONYM Acrónimo

ADDRESS Dirección del autor

APPLET Desuso Applet de java

AREA

accesskey, alt, class, coords, dir, href, id, lang, nohref,notab, onBlur, onClick, onDblClick, onFocus,onKeyDown, onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, shape, style, tabindex, taborder , target ,title, type

Área de un mapa de imagen

B

class, dir, id, lang, onClick, onDblClick, onKeyDown,onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title

Texto en negrita

BASE href, target URI base del documento

BASEFONT E D Tamaño base de la fuente

BDO I18N BiDi over-ride

BIG Texto de tamaño grande

BLOCKQUOTE

cite, class, dir, id, lang, onClick, onDblClick,onKeyDown, onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title

long quotation

BODY El cuerpo del documento

BR class, clear, id, style, title Salto de linea forzado

Referencia HTML - Referencia HTML 73


BUTTON

accesskey, class, dir, disabled, id, lang, name, onBlur,onClick, onDblClick, onFocus, onKeyDown,onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, tabindex, title, type, value

botón

CAPTION

align, class, dir, id, lang, onClick, onDblClick,onKeyDown, onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title, valign

Título de tabla

CENTERonMouseDown, onMouseMove, onMouseOut,onMouseOver, onMouseUp, style, title

DAbreviatura de <DIV

align=”center”>

CITE cita

CODE Código de programa

COL

align, char, charoff, class, dir, id, lang, onClick,onDblClick, onKeyDown, onKeyPress, onKeyUp,onMouseDown, onMouseMove, onMouseOut,onMouseOver, onMouseUp, span, style, title, valign,width

Columna de tabla

COLGROUP

align, char, charoff, class, dir, id, lang, onClick,onDblClick, onKeyDown, onKeyPress, onKeyUp,onMouseDown, onMouseMove, onMouseOut,onMouseOver, onMouseUp, span, style, title, valign,width

Grupo de columnas de tabla

DD


descripción de definición

DEL Texto eliminado

DFN Listado de directorio

DIR


D

DIV

align, class, dir, id, lang, nowrap, onClick, onDblClick,onKeyDown, onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title

Contenedor de lenguaje o estilo

generico

DL

class, compact, dir, id, lang, onClick, onDblClick,onKeyDown, onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title, type

Lista de definiciones



DT


Termino de una lista de

definiciones

EM Énfasis

FIELDSET


Grupo de controles de un

formulario

FONT class, color, dir, face, id, lang, size, style, title D Formato de fuente

FORM

accept, action, charset, class, dir, enctype, id, lang,method, name, onClick, onDblClick, onKeyDown,onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, onReset, onSubmit, style, target, title

Formulario interactivo

FRAMEbordercolor, class, frameborder, id, longdesc,marginheight, marginwidth, name, noresize, scrolling,src, style, title

Marco o subventana

FRAMESETborder, bordercolor, class, cols, frameborder ,framespacing, id, onLoad, onUnload, style, title

División de ventana

H1

H2

H3

H4

H5

H6

align, class, dir, id, lang, onClick, onDblClick,onKeyDown, onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title

Cabecera (la más grande)

Cabecera

Cabecera

Cabecera

Cabecera

Cabecera (la más pequeña)

HEAD Cabecera del documento

HR

align, class, color , dir, id, lang, noshade, onClick,onDblClick, onKeyDown, onKeyPress, onKeyUp,onMouseDown, onMouseMove, onMouseOut,onMouseOver, onMouseUp, size, style, title, width

Linea horizontal

HTML Elemento raiz del documento

HTML

I


Estilo de texto en cursiva

IFRAMEalign, class, frameborder, height, id, longdesc,marginheight, marginwidth, name, scrolling, src, style,title, width

Marco o frame interno



IMG

align,alt, border, class, controls , dir, dynsrc , height,hspace, id, ismap, lang, longdesc, loop , lowsrc , name ,onAbort, onClick, onDblClick, onError, onKeyDown,onKeyPress, onKeyUp, onLoad, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, src, start , style, title, usemap, vspace,width

Imágenes insertadas

INPUT

accept, accesskey, align, alt, border , checked, class, dir,disabled, id, lang,

maxlength, name, notab , onBlur, onChange, onClick,onDblClick, onFocus, onKeyDown, onKeyPress,onKeyUp, onMouseDown, onMouseMove,onMouseOut, onMouseOver, onMouseUp, onSelect,size, src, tabindex, taborder , title, type, usemap, value

Campo o control de formulario

INS Texto insertado

ISINDEX E D Prompt de una única línea

KBD Texto que debe ser insertado

por el usuario

LABEL

accesskey, class, dir, for, id, lang, onBlur, onClick,onDblClick, onFocus, onKeyDown, onKeyPress,onKeyUp, onMouseDown, onMouseMove,onMouseOut, onMouseOver, onMouseUp, style, title

Etiqueta de un campo de

formulario

LEGEND

accesskey, align, class, dir, id, lang, onClick,onDblClick, onKeyDown, onKeyPress, onKeyUp,onMouseDown, onMouseMove, onMouseOut,onMouseOver, onMouseUp, style, title

Título o leyenda de un grupo de

campos

LI

class, dir, id, lang, onClick, onDblClick, onKeyDown,onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title, type, value

Elemento de lista

LINK

charset, class, dir, href, hreflang, id, lang, media,onClick, onDblClick, onKeyDown, onKeyPress,onKeyUp, onMouseDown, onMouseMove,onMouseOut, onMouseOver, onMouseUp, rel, rev,style, target, title, type

Enlace independiente del medio

MAP

class, dir, id, lang, name, onClick, onDblClick,onKeyDown, onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title

Mapa de imágenes del lado

cliente

MENU


D Lista de menu



META charset , content, dir, http_equiv, lang, name, scheme Metainformacion de la página

NOFRAMES


Contenido alternativo para

navegadores que no soportenlos frames o marcos

NOSCRIPT Contenido alternativo para

navegadores que no soportenscripts.

OBJECT

align, archive, border, class, classid, codebase,codetype, data, declare, dir, height, hspace, id, lang,name, notab, onClick, onDblClick, onKeyDown,onKeyPress, onKeyUp, onLoad, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, shapes, standby, style, tabindex, title, type,usemap, vspace, width

Objeto embebido generico

(flash, activeX, etc..)

OL

class, compact, dir, id, lang, onClick, onDblClick,onKeyDown, onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, start, style, title, type

Lista ordenada

OPTGROUP Grupo de opciones

OPTION

class, dir, disabled, id, label, lang, onClick, onDblClick,onKeyDown, onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, selected, style, title, value

Opción seleccionable de una

lista

P

align, class, dir, id, lang, onDblClick, onKeyDown,onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title

Parrafo

PARAM named property value

PRE

class, dir, id, lang, onClick, onDblClick, onKeyDown,onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title, width

Texto preformateado

Q short inline quotation

S D Texto subrayado

SAMP Salida/output de un programa,

scripts, etc..

SCRIPT Scripts



SELECT

class, dir, disabled, id, lang, multiple, name, onBlur,onChange, onClick, onDblClick, onFocus,onKeyDown, onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, size, style, tabindex, title

Lista o select de formularios

SMALL Estilo de texto pequeño

SPAN Contenedor de lenguaje o estilos

generico

STRIKE D Texto rayado

STRONG Énfasis más fuerte

STYLE dir, lang, media, title, type Información de estilo

SUB Subtexto

SUP superscript

TABLE

align, background, bgcolor, border, bordercolor,bordercolordark , bordercolorlight , cellpadding,cellspacing, class, cols, dir, frame, height, hspace , id,lang, nowrap , onClick, onDblClick, onKeyDown,onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, rules, style, summary, title, valign , vspace, width

Tabla

TBODY

align, char, charoff, class, dir, id, lang, onClick,onDblClick, onKeyDown, onKeyPress, onKeyUp,onMouseDown, onMouseMove, onMouseOut,onMouseOver, onMouseUp, style, title, valign

Cuerpo de tabla

TD

abbr, align, background, bgcolor, bordercolor,bordercolordark, bordercolorlight, char, charoff, class,colspan, dir, headers, height, id, lang, nowrap, onClick,onDblClick, onKeyDown, onKeyPress, onKeyUp,onMouseDown, onMouseMove, onMouseOut,onMouseOver, onMouseUp, rowspan, scope, style, title,valign, width

Celda de una tabla

TEXTAREA

accesskey, class, cols, dir, disabled, id, lang, name,onBlur, onChange, onClick, onDblClick, onFocus,onKeyDown, onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, onSelect, readonly, rows, style, tabindex,title, wrap

Campo de texto multinea

TFOOT

align, char, charoff, class, dir, id, lang, onClick,onDblClick, onKeyDown, onKeyPress, onKeyUp,onMouseDown, onMouseMove, onMouseOut,onMouseOver, onMouseUp, style, title,valign

Pie de tabla



TH ver TD Celda de cabecera de tabla

THEAD

align, char, charoff, class, dir, id, lang, onClick,onDblClick, onKeyDown, onKeyPress, onKeyUp,onMouseDown, onMouseMove, onMouseOut,onMouseOver, onMouseUp, style, title, valign

Cabecera de tabla

TITLE Título de documento

TR

align, background, bgcolor, bordercolor,bordercolordark, bordercolorlight , char, charoff, class,dir, id, lang, nowrap, onClick, onDblClick,onKeyDown, onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title, valign

Fila de una tabla

TT Estilo de texto de teletipo o

monoespaciado

U D Estilo de texto subrayado

UL

class, compact, dir, id, lang, onClick, onDblClick,onKeyDown, onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title, type

Lista desordenada

VAR Instacia de una variable de

argumento de program



12.Referencia CSS2Esta sería la referencia de propiedades de las hojas de estilos.

Extraída de la especificación de CSS2 de la w3c.

Nombre ValoresValorinicial

Aplicado a (Por

defecto:todos)

Heredado?

Porcentajes (Defecto: N/D)

Grupo demedios

'azimuth'

<angle> | [[ left-side | far-left |left | center-left | center |center-right | right | far-right |right-side ] || behind ] |leftwards | rightwards | inherit

center yes aural

'background'

['background-color' ||'background-image' ||'background-repeat' ||'background-attachment' ||'background-position'] | inherit

XX no allowed on'background-position'

visual

'background-attachment'

scroll | fixed | inherit scroll no visual

'background-color'

<color> | transparent | inherit transparent no visual

'background-image'

<uri> | none | inherit none no visual

'background-position'

[ [<percentage> | <length> ]{1,2} | [ [top | center | bottom]|| [left | center | right] ] ] |inherit

0% 0% block-leveland replacedelements

no refer to the sizeof the box itself

visual

'background-repeat'

repeat | repeat-x | repeat-y | no-repeat | inherit

repeat no visual

'border' [ 'border-width' || 'border-style'|| <color> ] | inherit

seeindividualproperties

no visual

'border-collapse' collapse | separate | inherit collapse 'table' and'inline-table'elements

yes visual

'border-color' <color>{1,4} | transparent |inherit


no visual

Referencia CSS2 - Referencia CSS2 80



Aplicado a (Por

defecto:todos)

Heredado?


Grupo demedios

'border-spacing' <length> <length>? | inherit 0 'table' and'inline-table'elements

yes visual

'border-style' <border-style>{1,4} | inherit seeindividualproperties

no visual

'border-top''border-right''border-bottom''border-left'

[ 'border-top-width' || 'border-style' || <color> ] | inherit


no visual

'border-top-color' 'border-right-color''border-bottom-color' 'border-left-color'

<color> | inherit the value ofthe 'color'property

no visual

'border-top-style' 'border-right-style''border-bottom-style' 'border-left-style'

<border-style> | inherit none no visual

'border-top-width' 'border-right-width''border-bottom-width' 'border-left-width'

<border-width> | inherit medium no visual

'border-width' <border-width>{1,4} | inherit seeindividualproperties

no visual

'bottom' <length> | <percentage> | auto| inherit

auto positionedelements

no refer to heightof containingblock

visual

'caption-side' top | bottom | left | right |inherit

top 'table-caption'elements

yes visual

'clear' none | left | right | both | inherit none block-levelelements

no visual




Aplicado a (Por

defecto:todos)

Heredado?


Grupo demedios

'clip' <shape> | auto | inherit auto block-leveland replacedelements

no visual

'color' <color> | inherit depends onuser agent

yes visual

'content'

[ <string> | <uri> | <counter> |attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

empty string:before and :after pseudo-elements

no all

'counter-increment'

[ <identifier> <integer>? ]+ |none | inherit

none no all

'counter-reset' [ <identifier> <integer>? ]+ |none | inherit

none no all

'cue' [ 'cue-before' || 'cue-after' ] |inherit

XX no aural

'cue-after' <uri> | none | inherit none no aural

'cue-before' <uri> | none | inherit none no aural

'cursor'

[ [<uri> ,]* [ auto | crosshair |default | pointer | move | e-resize | ne-resize | nw-resize |n-resize | se-resize | sw-resize |s-resize | w-resize| text | wait |help ] ] | inherit

auto yes visual,interactive

'direction' ltr | rtl | inherit ltr all elements,but see prose

yes visual

'display'

inline | block | list-item | run-in| compact | marker | table |inline-table | table-row-group |table-header-group | table-footer-group | table-row | table-column-group | table-column |table-cell | table-caption | none| inherit

inline no all

'elevation' <angle> | below | level | above| higher | lower | inherit

level yes aural

'empty-cells' show | hide | inherit show 'table-cell'elements

yes visual




Aplicado a (Por

defecto:todos)

Heredado?


Grupo demedios

'float' left | right | none | inherit none

all butpositionedelements andgeneratedcontent

no visual

'font'

[ [ 'font-style' || 'font-variant' ||'font-weight' ]? 'font-size' [ /'line-height' ]? 'font-family' ] |caption | icon | menu |message-box | small-caption |status-bar | inherit


yes allowed on'font-size' and'line-height'

visual

'font-family' [[ <family-name> | <generic-family> ],]* [<family-name> |<generic-family>] | inherit

depends onuser agent

yes visual

'font-size' <absolute-size> | <relative-size> | <length> |<percentage> | inherit

medium

yes,thecomputedvalue isinherited

refer to parentelement's fontsize

visual

'font-size-adjust' <number> | none | inherit none yes visual

'font-stretch'

normal | wider | narrower |ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded |expanded | extra-expanded |ultra-expanded | inherit

normal yes visual

'font-style' normal | italic | oblique | inherit normal yes visual

'font-variant' normal | small-caps | inherit normal yes visual

'font-weight' normal | bold | bolder | lighter |100 | 200 | 300 | 400 | 500 | 600| 700 | 800 | 900 | inherit

normal yes visual




Aplicado a (Por

defecto:todos)

Heredado?


Grupo demedios

'height' <length> | <percentage> | auto| inherit

auto

all elementsbut non-replacedinlineelements,tablecolumns,and columngroups

no see prose visual

'left' <length> | <percentage> | auto| inherit


no refer to widthof containingblock

visual

'letter-spacing' normal | <length> | inherit normal yes visual

'line-height' normal | <number> | <length> |<percentage> | inherit

normal yes refer to the fontsize of theelement itself

visual

'list-style' [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] |inherit

XX

elementswith'display: list-item'

yes visual

'list-style-image' <uri> | none | inherit none


yes visual

'list-style-position'

inside | outside | inherit outside


yes visual

'list-style-type'

disc | circle | square | decimal |decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin| hebrew | armenian | georgian |cjk-ideographic | hiragana |katakana | hiragana-iroha |katakana-iroha | none | inherit

disc


yes visual




Aplicado a (Por

defecto:todos)

Heredado?


Grupo demedios

'margin' <margin-width>{1,4} | inherit XX no refer to widthof containingblock

visual

'margin-top''margin-right''margin-bottom''margin-left'

<margin-width> | inherit 0 no refer to widthof containingblock

visual

'marker-offset' <length> | auto | inherit auto

elementswith'display:marker'

no visual

'marks' [ crop || cross ] | none | inherit none page context N/A visual, paged

'max-height' <length> | <percentage> | none| inherit

none

all elementsexcept non-replacedinlineelements andtableelements


visual

'max-width' <length> | <percentage> | none| inherit

none



visual

'min-height' <length> | <percentage> |inherit

0



visual

'min-width' <length> | <percentage> |inherit

UAdependent



visual




Aplicado a (Por

defecto:todos)

Heredado?


Grupo demedios

'orphans' <integer> | inherit 2 block-levelelements

yes visual, paged

'outline' [ 'outline-color' || 'outline-style'|| 'outline-width' ] | inherit


no visual,interactive

'outline-color' <color> | invert | inherit invert no visual,interactive

'outline-style' <border-style> | inherit none no visual,interactive

'outline-width' <border-width> | inherit medium no visual,interactive

'overflow' visible | hidden | scroll | auto |inherit

visible block-leveland replacedelements

no visual

'padding' <padding-width>{1,4} | inherit XX no refer to widthof containingblock

visual

'padding-top''padding-right''padding-bottom''padding-left'

<padding-width> | inherit 0 no refer to widthof containingblock

visual

'page' <identifier> | auto auto block-levelelements

yes visual, paged

'page-break-after'

auto | always | avoid | left |right | inherit

auto block-levelelements

no visual, paged

'page-break-before'

auto | always | avoid | left |right | inherit

auto block-levelelements

no visual, paged

'page-break-inside'

avoid | auto | inherit auto block-levelelements

yes visual, paged

'pause' [ [<time> | <percentage>]{1,2}] | inherit


no

see descriptionsof 'pause-before' and'pause-after'

aural

'pause-after' <time> | <percentage> | inheritdepends onuser agent

no see prose aural

'pause-before' <time> | <percentage> | inheritdepends onuser agent

no see prose aural




Aplicado a (Por

defecto:todos)

Heredado?


Grupo demedios

'pitch' <frequency> | x-low | low |medium | high | x-high | inherit

medium yes aural

'pitch-range' <number> | inherit 50 yes aural

'play-during' <uri> mix? repeat? | auto |none | inherit

auto no aural

'position' static | relative | absolute | fixed| inherit

static

all elements,but not togeneratedcontent

no visual

'quotes' [<string> <string>]+ | none |inherit


yes visual

'richness' <number> | inherit 50 yes aural

'right' <length> | <percentage> | auto| inherit



visual

'size' <length>{1,2} | auto | portrait |landscape | inherit

auto the pagecontext

N/A visual, paged

'speak' normal | none | spell-out |inherit

normal yes aural

'speak-header' once | always | inherit once

elements thathave tableheaderinformation

yes aural

'speak-numeral' digits | continuous | inherit continuous yes aural

'speak-punctuation'

code | none | inherit none yes aural

'speech-rate' <number> | x-slow | slow |medium | fast | x-fast | faster |slower | inherit

medium yes aural

'stress' <number> | inherit 50 yes aural

'table-layout' auto | fixed | inherit auto 'table' and'inline-table'elements

no visual




Aplicado a (Por

defecto:todos)

Heredado?


Grupo demedios

'text-align' left | right | center | justify |<string> | inherit

depends onuser agentand writingdirection

block-levelelements

yes visual

'text-decoration' none | [ underline || overline ||line-through || blink ] | inherit

none

no(seeprose)

visual

'text-indent' <length> | <percentage> |inherit

0 block-levelelements

yes refer to widthof containingblock

visual

'text-shadow'

none | [<color> || <length><length> <length>? ,]*[<color> || <length> <length><length>?] | inherit

none

no(seeprose)

visual

'text-transform' capitalize | uppercase |lowercase | none | inherit

none yes visual

'top' <length> | <percentage> | auto| inherit



visual

'unicode-bidi' normal | embed | bidi-override |inherit

normal all elements,but see prose

no visual

'vertical-align'

baseline | sub | super | top |text-top | middle | bottom |text-bottom | <percentage> |<length> | inherit

baseline

inline-leveland 'table-cell'elements

no

refer to the'line-height' ofthe elementitself

visual

'visibility' visible | hidden | collapse |inherit

inherit no visual

'voice-family' [[<specific-voice> | <generic-voice> ],]* [<specific-voice> |<generic-voice> ] | inherit


yes aural

'volume' <number> | <percentage> |silent | x-soft | soft | medium |loud | x-loud | inherit

medium yes refer toinherited value

aural

'white-space' normal | pre | nowrap | inherit normal block-levelelements

yes visual




Aplicado a (Por

defecto:todos)

Heredado?


Grupo demedios

'widows' <integer> | inherit 2 block-levelelements

yes visual, paged

'width' <length> | <percentage> | auto| inherit

auto

all elementsbut non-replacedinlineelements,table rows,and rowgroups


visual

'word-spacing' normal | <length> | inherit normal yes visual

'z-index' auto | <integer> | inherit auto positionedelements

no visual



13.Bibliografía, enlacesBibliografía

● HTML&XHTML The definitive guide

Enlaces

● http://www.w3.org

● http://www.webdesign.org

● http://www.cuatrovientos.org

● http://dire.cuatrovientos.org

Distribuido bajo licencia Copyleft.http://creativecommons.org/licenses/by/2.0/es/legalcode.es

Bibliografía, enlaces - Bibliografía, enlaces 90

html aula0

Documents