Download - 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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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> <!-- Este es un comentario HTML, el usuario no lo ve en el navegador --> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>
<!-- Aquí empieza la página --> 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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<title>DIRE - 2º DAI :: HTML :: 01 :: Página con cabeceras::</title> <!-- Aquí se configura el juego de caracteres de la página --> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <!-- Al meter una cabecera el siguiente elemento irá en la próxima linea --> <!-- El tamaño de cabeceras va de más grande a más pequeño: 1,2,3,.. hasta 6 --> <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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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>
<!-- Aquí se configura el juego de caracteres de la página --> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <h1>Párrafos y saltos de linea</h1>
<!-- Las etiquetas <p> encierran un parrafo--> <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>
<!-- Un salto de linea con <br> --> 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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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> <!-- Aquí se configura el juego de caracteres de la página --> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <h1>Formatos básicos</h1>
<!-- Formatos básicos de texto negrita: <b></b> cursiva: <i></i> Texto preformateado: <pre></pre> -->
<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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
persona</i><br> Bill Gates </p>
<!-- Con <hr> metemos una linea horizontal en la página--> <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:
Texto básico - Formatos básicos, <b>, <i>, <pre> y lineas <hr> 10
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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> <!-- Aquí se configura el juego de caracteres de la página --> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <!-- La prueba del oftalmólogo con cabeceras --> <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>
Texto básico - Formatos básicos, <b>, <i>, <pre> y lineas <hr> 11
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje 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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
● © = ©● € = €● ¿ = ¿
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>
<!-- Aquí empieza la página --> <h1>Caracteres especiales</h1>
<h1>á é í ó ú</h1>
<h1>ñ ˜ © > < ® ü</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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<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>
Y este sería el resultado:
Texto básico - Atributos de <body> 14
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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>
<!-- Aquí se configura el juego de caracteres de la página --> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body bgcolor="black" text="white">
<h1>Jugando con las FUENTES</h1> <!-- Con la etiqueta FONT podemos aplicar distintos formatos al texto como color,tamaño, fuente, etc --> <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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<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>
<!-- La etiqueta font esta desfasada y conviene no usarla ¿Con qué la sustituimos? con <DIV>
-->
<!-- Con la etiqueta DIV se crean bloques de contenido HTML al que se le puedenaplicar estilos --> <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>
Y este sería el resultado:
Texto básico - Fuentes <FONT> 16
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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> <!-- Aquí se configura el juego de caracteres de la página --> <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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<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>
Y este sería el resultado:
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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head>
<body> <h1 align="center">Etiquetas fuera del estándar</h1>
<!-- Algunas etiquetas no validas. Generalmente funcionan en Explorer -->
<!-- Marquee es un texto que se desplaza --> <marquee><h2>Esto es un <marquee> Y NO ES ESTÁNDAR</h2></marquee>
<!-- El explorer es capaz de interpretar esta etiqueta para reproducir sonido --> <h1>El sonido de fondo: etiqueta <bgsound></h1> <bgsound src="sonido.wav" loop="10"> </body> </html>
Y este sería el resultado:
Texto básico - Etiquetas no estándar 19
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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 <!-- Un archivo de imagen se mete simplemente con la etiqueta SRC --> <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 <!-- Un archivo de imagen se mete simplemente con la etiqueta SRC --> <img src="logo-cuatrovientos.gif" border=0 title="logotipo" align="middle"> del instituto Cuatrovientos
Imágenes - Insertar imágenes en un documento<img> 20
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
</div> <br> <div align="center"> Esto que se ve aquí es el logotipo <!-- Un archivo de imagen se mete simplemente con la etiqueta SRC --> <img src="logo-cuatrovientos.gif" border=0 title="logotipo" align="middle"height="300" width="600"> del instituto Cuatrovientos </div> <br>
</body> </html>
Y este sería el resultado:
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>
<!-- Para meter una imagen de fondo usamos la propiedad background --> <body background="logo-cuatrovientos.gif">
<h1 align="center">Una imagen como fondo de documento</h1>
Imágenes - Imagen como fondo de página 21
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
</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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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>
<!-- Aquí empieza la página -->
<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> <!-- Para poner enlaces a otras webs se mete una URL completa --> <a href="http://www.google.es">Ir a Google</a>
</body> </html>
Y este sería el resultado:
Enlaces - Enlaces o hipervínculos a otras páginas.<a> 23
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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> <!-- Atributos para BODY link: color de los enlaces que no se han pinchado vlink: color para los enlaces ya visitados alink: color para los enlaces activos --> <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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<a href="ftp://ftp.rediris.es">Ir a SERVIDOR FTP REDIRIS</a> <br> <br> <!-- Con el valor mailto:direccion haremos arrancar el cliente de correo --> <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>
Y este sería el resultado:
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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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> <!-- Aquí se configura el juego de caracteres de la página --> <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> <!--A continuacion pongo una chapa para poder ver el efecto del enlace interno --><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>
Y este sería el resultado:
Enlaces - Enlaces internos en una página 26
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Enlaces - Enlaces internos en una página 27
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje 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> <!-- Aquí se configura el juego de caracteres de la página --> <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>
<!-- aqui metemos atributo compact para reducir tamaño --> <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>
Y este sería el resultado:
Listas - Listas no numeradas o desordenadas <ul>, <li> 28
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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> <!-- Aquí se configura el juego de caracteres de la página --> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <h1>Una lista ordenada: <ol></h1> <!-- metemos una linea horizontal sin efecto 3D gracias al atributo shade --> <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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<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>
Y este sería el resultado:
Listas - Listar ordenadas 30
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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> <!-- Aquí se configura el juego de caracteres de la página --> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body> <h1>Una lista ordenada: <ol></h1> <!-- metemos una linea horizontal sin efecto 3D gracias al atributo shade --> <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>
Y este sería el resultado:
Listas - Listas anidadas 31
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Existen otro tipo de listas, las de definiciones (<dl>) pero su uso es muy poco habitual.
Listas - Listas anidadas 32
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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>
<!-- Aquí empieza la página --> <h1>Tablas HTML</h1>
<h2>Se utilizan las etiquetas <table>, <tr> y <td></h2> <hr size="1" color="black">
<!-- la tabla se encierra entre etiquetas TABLE--> <table border="1">
<!-- Cada fila se crea con la etiqueta TR : Table Row--> <tr>
<!-- Y cada celda con la etiqueta TD --> <td>Nombre</td> <td>Apellidos</td> <td>DNI</td> <td>Edad</td>
Tablas - Tablas simples <TABLE>, <TR>, <TD> 33
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
</tr> <tr>
<!-- Y cada celda con la etiqueta TD --> <td>Juan</td> <td>Palomo</td> <td>33445532L</td> <td>34</td>
</tr> <tr>
<!-- Cada celda con la etiqueta TD --> <td>Darth</td> <td>Vader</td> <td>66666666H</td> <td>26</td>
</tr> <tr>
<!-- Cada celda con la etiqueta TD --> <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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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>
<!-- Aquí empieza la página --> <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">
<!-- la tabla se encierra entre etiquetas TABLE--> <table border="1" cellspacing="1" cellspadding="1" width="80%" align="center">
<!-- Cada fila se crea con la etiqueta TR : Table Row--> <tr bgcolor="blue" style="color:white">
<!-- Y cada celda con la etiqueta TD --> <td>Nombre</td> <td>Apellidos</td> <td>DNI</td> <td>Edad</td>
</tr> <tr>
<!-- Y cada celda con la etiqueta TD --> <td>Juan</td> <td>Palomo</td> <td>33445532L</td> <td>34</td>
</tr> <tr>
<!-- Cada celda con la etiqueta TD --> <td>Darth</td> <td>Vader</td> <td>66666666H</td> <td>26</td>
</tr> <tr>
Tablas - Atributos de las tablas 35
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<!-- Cada celda con la etiqueta TD --> <td>Miguel</td> <td>Indurain</td> <td>45326853X</td> <td>39</td>
</tr> </table>
</body> </html>
Y este sería el resultado:
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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<!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>
<!-- Aquí empieza la página --> <h1>Uniendo celdas con colspan y rowspan</h1> <hr size="1" color="black">
<h2>Efecto del colspan</h2>
<!-- la tabla se encierra entre etiquetas TABLE--> <table border="1" cellspacing="1" cellspadding="1" width="80%" align="center">
<!-- Cada fila se crea con la etiqueta TR : Table Row--> <tr bgcolor="blue" style="color:white">
<!-- Y cada celda con la etiqueta TD --> <!-- 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>
<!-- Y cada celda con la etiqueta TD --> <td>Juan</td> <td>Palomo</td> <td>33445532L</td> <td>34</td>
</tr> <tr>
<!-- Cada celda con la etiqueta TD --> <td>Darth</td> <td>Vader</td> <td>66666666H</td> <td>26</td>
</tr> <tr>
<!-- Cada celda con la etiqueta TD --> <td>Miguel</td> <td>Indurain</td> <td>45326853X</td> <td>39</td>
</tr> </table>
<hr size="1" color="black">
<h2>Efecto del rowspan</h2>
<!-- la tabla se encierra entre etiquetas TABLE--> <table border="1" cellspacing="1" cellspadding="1" width="80%" align="center">
Tablas - Uniendo celdas: Colspan y Rowspan 37
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<!-- Cada fila se crea con la etiqueta TR : Table Row--> <tr bgcolor="blue" style="color:white">
<!-- Y cada celda con la etiqueta TD --> <td>Nombre</td> <td>Apellidos</td> <td>DNI</td> <td>Edad</td>
</tr> <tr>
<!-- Y cada celda con la etiqueta TD --> <td>Juan</td> <td>Palomo</td> <td>33445532L</td> <!-- Aqui le decimos a la celda que ocupe el espacio de 3 filas --> <!-- En consecuencia, en las demas filas NO se pone la 4º celda --> <td rowspan="3">No se sabe</td>
</tr> <tr>
<!-- Cada celda con la etiqueta TD --> <td>Darth</td> <td>Vader</td> <td>66666666H</td>
</tr> <tr>
<!-- Cada celda con la etiqueta TD --> <td>Miguel</td> <td>Indurain</td> <td>45326853X</td>
</tr> </table>
</body> </html>
Y este sería el resultado de la unión:
Tablas - Uniendo celdas: Colspan y Rowspan 38
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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>
<!-- Aquí empieza la página --> <h1>Etiquetas para delimitar partes de la tabla</h1>
<h2><TABLE></h2>
Tablas - Etiquetas de zona de tabla: <TH>, <THEAD>, <TBODY>, <TFOOT> 39
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<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">
<!-- la tabla se encierra entre etiquetas TABLE-->
<table border="1" cellspacing="1" cellspadding="1" width="80%" align="center">
<thead style="color:red; font-weight: bold">
<!-- Cada fila se crea con la etiqueta TR : Table Row--> <tr>
<!-- Y cada celda con la etiqueta TD --> <td>Nombre</td> <td>Apellidos</td> <td>DNI</td> <td>Edad</td>
</tr> </thead>
<tbody> <tr>
<!-- Cada celda con la etiqueta TD --> <td>Darth</td> <td>Vader</td> <td>66666666H</td> <td>26</td>
</tr> <tr>
<!-- Y cada celda con la etiqueta TD --> <td>Juan</td> <td>Palomo</td> <td>33445532L</td> <td>34</td>
</tr> <tr>
<!-- Cada celda con la etiqueta TD --> <td>Darth</td> <td>Vader</td> <td>66666666H</td> <td>26</td>
</tr> <tr>
<!-- Cada celda con la etiqueta TD --> <td>Miguel</td> <td>Indurain</td> <td>45326853X</td> <td>39</td>
</tr>
Tablas - Etiquetas de zona de tabla: <TH>, <THEAD>, <TBODY>, <TFOOT> 40
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
</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>
Y este sería el resultado:
Tablas anidadas
Tablas - Tablas anidadas 41
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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>
<!-- Aquí empieza la página --> <h1>Anidando tablas</h1>
<!-- la tabla se encierra entre etiquetas TABLE-->
<table border="2" cellspacing="1" cellspadding="1" width="80%" height="80%"align="center">
<!-- Cada fila se crea con la etiqueta TR : Table Row--> <tr>
<!-- Y cada celda con la etiqueta TD --> <!--
¿Donde se mete el contenido en las tablas? dentro de las celdas: TD --> <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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
</tr> </table>
</body> </html>
Y este sería el resultado:
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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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>
<!-- Aquí empieza la página --> <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
Tablas - Maquetación de documentos con tablas 44
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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">
<!-- Aquí empieza la página -->
<table border="2" cellspacing="1" cellspadding="1" width="100%" height="80%"align="center">
Tablas - Maquetación de documentos con tablas 45
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<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>
Y este sería el resultado:
Tablas - Maquetación de documentos con tablas 46
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Tablas - Maquetación de documentos con tablas 47
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje 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>
<!-- Aquí empieza la página --> <h1>Formularios <FORM></h1>
<h2>Se utilizan las etiquetas <INPUT> con atributos type, name y value</h2> <hr size="1" color="black">
<!-- El formulario se encierra dentro de etiquetas FORM --> <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>
<!-- Al final siempre se meten los botones de envio y reset--><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
Y este sería el resultado:
Formularios - Formularios básico: <FORM>, <INPUT>, texto y botones 48
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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>
<!-- Aquí empieza la página --> <h1>Formularios <FORM></h1>
<h2>Campos de texto y MAQUETACIÓN de formularios</h2> <hr size="1" color="black">
Formularios - Formularios maquetados en una tabla y <TEXTAREA> 49
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<!-- El formulario se encierra dentro de etiquetas FORM --> <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>
<!-- Al final siempre se meten los botones de envio y reset--><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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<!-- Aquí empieza la página --> <h1>Formularios <FORM></h1>
<h2>Listas</h2> <hr size="1" color="black">
<!-- El formulario se encierra dentro de etiquetas FORM --> <form name="Formulario" method="POST" action="dire_html02.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><!-- Los campos de texto con mas de una linea se hacen con TEXTAREA --><td><textarea name="descripcion">Contenido inicial...</textarea></td>
</tr><tr>
<td>Estado civil:</td><!-- Las listas se hacen con <SELECT> y <OPTION> --><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><!-- Las listas se hacen con <SELECT> y <OPTION> --><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>
<!-- Al final siempre se meten los botones de envio y reset-->
Formularios - Listas desplegables <SELECT>, <OPTION> 52
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<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>
Y este sería el resultado:
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>
Formularios - Listas desplegables <SELECT>, <OPTION> 53
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
</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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body>
<!-- Aquí empieza la página --> <h1>Formularios <FORM></h1>
<h2>Checkbox y Radiobuttons</h2> <hr size="1" color="black">
<!-- El formulario se encierra dentro de etiquetas FORM --> <form name="Formulario" method="POST" action="dire_html02.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><!-- Los campos de texto con mas de una linea se hacen con TEXTAREA --><td><textarea name="descripcion">Contenido inicial...</textarea></td>
</tr><tr>
<td>Posesiones:</td><!-- Los checkbox se hacen con el tipo "checkbox" --><td> <INPUT type="checkbox" name="posesion" value="Casa"> Casa<BR> <INPUT type="checkbox" name="posesion" value="Ordenador">
Ordenador<BR> <INPUT type="checkbox" name="posesion" value="Coche"> Coche<BR> <INPUT type="checkbox" name="posesion" value="Moto"> Moto<BR> <INPUT type="checkbox" name="posesion" value="Bicicleta">
Bicicleta<BR></td>
</tr><tr>
<td>SEXO:</td><!-- Los radiobuttons se hacen con el tipo radio --><!-- Todos los elementos deben tener el mismo "name" --><td> <INPUT type="radio" name="sexo" value="Male"> Hombre<BR> <INPUT type="radio" name="sexo" value="Female"> Mujer<BR> <INPUT type="radio" name="sexo" value="Raro"> Raaaaro<BR></td>
</tr><tr>
<!-- Al final siempre se meten los botones de envio y reset--><td><input type="submit" name="boton_submit" value="Enviar"></td><td><input type="reset" name="boton_vaciar" value="Vaciar"></td>
</tr>
Formularios - Campos tipo CHECKBOX y RADIO 55
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
</table></form>
</body> </html>
Y este sería el resultado:
Formularios - 56
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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>
<!-- Aquí empieza la página --> <h1>Formularios <FORM></h1>
<h2>INPUT TYPE: file y hidden</h2>
<legend> ACCESO AL SISTEMA <!-- El formulario se encierra dentro de etiquetas FORM --><!-- Al enviar un fichero ES IMPRESCINDIBLE METER EL ATRIBUTO ENCTYPE --> <form name="Formulario" method="POST" action="dire_html04.html"enctype="multipart/form-data">
<!-- Esto es un campo oculto --><input type="hidden" name="codigo" value="32454325">
Formularios - Campos ocultos y de envío de ficheros 57
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<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><!-- Este campo permite seleccionar y enviar un fichero --><td><input type="file" name="fichero" value=""></td>
</tr><tr>
<!-- Al final siempre se meten los botones de envio y reset--><td><input type="submit" name="boton_submit" value="Enviar"></td><td><input type="reset" name="boton_vaciar" value="Vaciar"></td>
</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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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>
<!-- Aquí empieza la página --> <h1>Formularios <FORM></h1>
<h2>Otros elementos: legend, label, image</h2>
<legend> ACCESO AL SISTEMA <!-- El formulario se encierra dentro de etiquetas FORM --> <form name="Formulario" method="POST" action="dire_html05.html"><table border="1" align="center">
<tr><!-- En lugar de poner un texto simple se puede meter dentro de label Relacionamos el label con el input a traves de los atributos for e
id
Con el accesskey definimos una tecla que si la pulsa el usuario elfoco
se lleva hasta el control asociado al label--><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>
<!-- Al final siempre se meten los botones de envio y reset--><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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
</legend>
</body> </html>
Y este sería el resultado:
Formularios - Otros elementos: imágenes, <LEGEND>, <LABEL> 60
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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>
<!-- Para hacer una pagina con frames primero hay que crear la pagina en la que se definen los FRAMES. En esa página se especifica el numero de frames, la direccion de la pagina de cada frame, la anchura, etc.. --> <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>
Y este sería el resultado:
Marcos - Definición de Marcos o Frames: <FRAMESET>, <FRAME> y <NOFRAMES> 61
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<!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>
<!-- Para hacer una pagina con frames primero hay que crear la pagina en la que se definen los FRAMES. En esa página se especifica el numero de frames, la direccion de la pagina de cada frame, la anchura, etc.. --> <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">
<noframes> Lo sentimos pero su navegador no soporta FRAMES </noframes>
</frameset>
</html>
Este sería el resultado:
Marcos - Marcos o Frames en columnas 63
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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>
<!-- Para hacer una pagina con frames primero hay que crear la pagina en la que se definen los FRAMES. En esa página se especifica el numero de frames, la direccion de la pagina de cada frame, la anchura, etc.. --> <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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<noframes> Lo sentimos pero su navegador no soporta FRAMES </noframes>
</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>
<!-- Para hacer una pagina con frames primero hay que crear la pagina en la que se definen los FRAMES. En esa página se especifica el numero de frames, la direccion de la pagina de cada frame, la anchura, etc.. --> <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>
Y este sería el resultado:
Marcos - Marcos o Frames anidados 65
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
Marcos - Marcos internos: <IFRAME> 67
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Marcos - Marcos internos: <IFRAME> 68
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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> <!-- Las etiquetas invisibles META se meten en la cabecera -->
<!-- Esta primera especifica que el contenido es texto html y que debe usarse el juego de caracteres iso-8859-1 --> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Los metas keywords y description son informacion util para programas de indexación, buscadores, bots,... para tener una idea de que va la página
--> <META name="keywords" content="cuatrovientos, instituto, enseñanza"> <META name="description" lang="es"
content="Esta es la pagina del instituo cuatrovientos bla la...">
<!-- Este meta sirve para influir en el protocolo HTTP metiendo cabeceras --> <META http-equiv="Expires" content="Mon, 11 Aug 2005 16:12:03 GMT">
<!-- Este sirve para especificar el autor--> <META name="Author" lang="es" content="Pello Xabier Altadill"> <!-- Esta sirver para especificar el editor que se uso para la pagina --> <META NAME="generator" CONTENT="Microsoft Emacs editor">
<!-- Otras... --> <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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<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> <!-- Las etiquetas invisibles META se meten en la cabecera -->
<!-- Esta primera especifica que el contenido es texto html y que debe usarse el juego de caracteres iso-8859-1 -->
Etiquetas META - Redirección automática: refresh 70
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Este meta sirve para influir en el protocolo HTTP metiendo cabeceras --> <!-- En este caso para redirigir la peticion a otra pagina en 3 segundos--> <meta HTTP-EQUIV="refresh" CONTENT="3; URL=dire_html05.html"> <title>Desarrollo de aplicaciones Web :: 2º DAI :: Etiquetas META:refresh</title></head><body><h1>Saltando a cuatrovientos...</h1><a href="dire_html05.html">(Si no ve la pagina pulse aqui)</a>
</body></html>
Etiquetas META - Redirección automática: refresh 71
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
class, dir, id, lang, onClick, onDblClick, onKeyDown,onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title
descripción de definición
DEL Texto eliminado
DFN Listado de directorio
DIR
class, dir, id, lang, onClick, onDblClick, onKeyDown,onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title
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
Referencia HTML - Referencia HTML 74
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
DT
class, dir, id, lang, onClick, onDblClick, onKeyDown,onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title
Termino de una lista de
definiciones
EM Énfasis
FIELDSET
class, dir, id, lang, onClick, onDblClick, onKeyDown,onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title
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
class, dir, id, lang, onClick, onDblClick, onKeyDown,onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title
Estilo de texto en cursiva
IFRAMEalign, class, frameborder, height, id, longdesc,marginheight, marginwidth, name, scrolling, src, style,title, width
Marco o frame interno
Referencia HTML - Referencia HTML 75
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
class, dir, id, lang, onClick, onDblClick, onKeyDown,onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title
D Lista de menu
Referencia HTML - Referencia HTML 76
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
META charset , content, dir, http_equiv, lang, name, scheme Metainformacion de la página
NOFRAMES
class, dir, id, lang, onClick, onDblClick, onKeyDown,onKeyPress, onKeyUp, onMouseDown,onMouseMove, onMouseOut, onMouseOver,onMouseUp, style, title
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
Referencia HTML - Referencia HTML 77
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
Referencia HTML - Referencia HTML 78
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
Referencia HTML - Referencia HTML 79
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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
seeindividualproperties
no visual
Referencia CSS2 - Referencia CSS2 80
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Nombre ValoresValorinicial
Aplicado a (Por
defecto:todos)
Heredado?
Porcentajes (Defecto: N/D)
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
seeindividualproperties
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
Referencia CSS2 - Referencia CSS2 81
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Nombre ValoresValorinicial
Aplicado a (Por
defecto:todos)
Heredado?
Porcentajes (Defecto: N/D)
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
Referencia CSS2 - Referencia CSS2 82
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Nombre ValoresValorinicial
Aplicado a (Por
defecto:todos)
Heredado?
Porcentajes (Defecto: N/D)
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
seeindividualproperties
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
Referencia CSS2 - Referencia CSS2 83
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Nombre ValoresValorinicial
Aplicado a (Por
defecto:todos)
Heredado?
Porcentajes (Defecto: N/D)
Grupo demedios
'height' <length> | <percentage> | auto| inherit
auto
all elementsbut non-replacedinlineelements,tablecolumns,and columngroups
no see prose visual
'left' <length> | <percentage> | auto| inherit
auto positionedelements
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
elementswith'display: list-item'
yes visual
'list-style-position'
inside | outside | inherit outside
elementswith'display: list-item'
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
elementswith'display: list-item'
yes visual
Referencia CSS2 - Referencia CSS2 84
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Nombre ValoresValorinicial
Aplicado a (Por
defecto:todos)
Heredado?
Porcentajes (Defecto: N/D)
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
no refer to heightof containingblock
visual
'max-width' <length> | <percentage> | none| inherit
none
all elementsexcept non-replacedinlineelements andtableelements
no refer to widthof containingblock
visual
'min-height' <length> | <percentage> |inherit
0
all elementsexcept non-replacedinlineelements andtableelements
no refer to heightof containingblock
visual
'min-width' <length> | <percentage> |inherit
UAdependent
all elementsexcept non-replacedinlineelements andtableelements
no refer to widthof containingblock
visual
Referencia CSS2 - Referencia CSS2 85
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Nombre ValoresValorinicial
Aplicado a (Por
defecto:todos)
Heredado?
Porcentajes (Defecto: N/D)
Grupo demedios
'orphans' <integer> | inherit 2 block-levelelements
yes visual, paged
'outline' [ 'outline-color' || 'outline-style'|| 'outline-width' ] | inherit
seeindividualproperties
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
depends onuser agent
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
Referencia CSS2 - Referencia CSS2 86
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Nombre ValoresValorinicial
Aplicado a (Por
defecto:todos)
Heredado?
Porcentajes (Defecto: N/D)
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
depends onuser agent
yes visual
'richness' <number> | inherit 50 yes aural
'right' <length> | <percentage> | auto| inherit
auto positionedelements
no refer to widthof containingblock
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
Referencia CSS2 - Referencia CSS2 87
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Nombre ValoresValorinicial
Aplicado a (Por
defecto:todos)
Heredado?
Porcentajes (Defecto: N/D)
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
auto positionedelements
no refer to heightof containingblock
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
depends onuser agent
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
Referencia CSS2 - Referencia CSS2 88
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
Nombre ValoresValorinicial
Aplicado a (Por
defecto:todos)
Heredado?
Porcentajes (Defecto: N/D)
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
no refer to widthof containingblock
visual
'word-spacing' normal | <length> | inherit normal yes visual
'z-index' auto | <integer> | inherit auto positionedelements
no visual
Referencia CSS2 - Referencia CSS2 89
Instituto Cuatrovientos - Desarrollo de aplicaciones Web : Lenguaje HTML
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