Tutorial HTML

INTRODUCCION A HTML
El HTML (Hyper Text Markup Language) es un sistema para estructurar documentos. Estos documentos pueden ser mostrados por los visores de pginas Web en Internet, como Netscape, Mosaic o Microsoft Explorer. Por el momento no existe un estndar de HTML, aunque existen diferentes revisiones o niveles de estandarizacin, el 1.0, el 2.0 , el 3.0, el 3.2 y el 4.0, lo que produce que algunos visores no "comprendan" en su totalidad el contenido de un documento. En este manual se ha utilizado la revisin 3.2 de HTML. Esto quiere decir que algunas de las rdenes de HTML que aqu se indican puede que no sean reconocidas por algunos visores de pginas Web. Netscape 2.x y Microsoft Explorer 3.x reconocen prcticamente todas las rdenes HTML vistas en este manual. (Para los estilos, tendr que ser Netscape 4.x). Bsicamente, el HTML consta de texto plano (ASCII) y una serie de rdenes a travs de marcas o etiquetas (tags), que indican al visor que estemos utilizando, la forma de representar los elementos (texto, grficos, etc...) que contenga el documento. En este manual nos referiremos a estas rdenes con la palabra "directiva". Un documento HTML se puede crear usando cualquier editor o procesador de textos que permita trabajar con texto ASCII. Una directiva ser un texto incluido entre los smbolos menor que < y mayor que >. Este texto ser una orden que explique la utilidad de la etiqueta, y es indistinto que se escriba en maysculas o minsculas. Las directivas de HTML pueden ser de dos tipos, cerradas o abiertas. Las directivas cerradas son aquellas que tienen una etiqueta que indica el principio de la directiva y otra que indica el final. La del final contendr el mismo texto, aadindole al principio el carcter /. El efecto que define la directiva se aplicar sobre todo lo que est incluido entre estas dos etiquetas. Entre ambas etiquetas se pueden encontrar otras directivas. Las directivas abiertas constan de una sola etiqueta. Las directivas pueden contener modificadores que llamaremos "parmetros" o "atributos". En el caso de las directivas cerradas, se escriben slo en la etiqueta de inicio y consisten, normalmente, en el nombre del parmetro y un valor, unidos por el carcter =. Si se incluyen varios, se separan por espacios y su orden es indistinto. Si el valor que toma el parmetro es ms de una palabra, deber escribirse entre comillas. Ejemplos: Directiva cerrada <CENTER> Mi pgina Web </CENTER> Directiva abierta <HR> Directiva con parmetros <BODY bgcolor="#FFFFFF"> </BODY>
Los ficheros que contienen documentos HTML suelen tener la extensin .html o .htm. En este manual se han fijado los siguientes criterios a la hora de escribir la sintaxis de las directivas de HTML: 1) Las directivas se indican en letra mayscula y en negrilla. 2) Los parmetros de las directivas se indican en letra minscula y negrilla. 3) El resto de elementos se indican en letra normal. 4) Las palabras a resaltar en el texto se indican en cursiva y negrilla.
Estructura bsica de un documento HTML

Un documento escrito en HTML contendra bsicamente las siguientes directivas:
<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Indica el inicio del documento. Inicio de la cabecera. Inicio del ttulo del documento. Final del ttulo del documento. Final de la cabecera del documento. Inicio del cuerpo del documento. Final del cuerpo del documento. Final del documento.
El documento se hallar situado en algn ordenador al que se pueda acceder a travs de Internet. Para indicar la situacin del documento en Internet se utiliza la URL (Uniform Resource Locator). La URL es el camino que ha de seguir nuestro visor a travs de Internet para acceder a un determinado recurso, bien sea una pgina Web, un fichero, un grupo de noticias, etc. Es decir, lo que el visor de pginas Web hace es acceder a un fichero situado en un ordenador que est conectado a la red Internet. La estructura de una URL para una pgina Web suele ser del tipo http://dominio/directorio/fichero. El dominio indica el nombre del ordenador al que accedemos, el directorio es el nombre del directorio de ese ordenador y fichero el nombre del fichero que contiene la pgina Web escrita en HTML. Por ejemplo: http://ares.six.udc.es/cine/corunha2.html Donde .... http:// ares.six.udc.es /cine/ corunha2.html es el indicador de pagina Web es el Dominio (nombre) del ordenador es el Directorio dentro del ordenador es el Fichero que contiene la pgina Web
Cabecera del documento

La directiva <HEAD></HEAD> delimita la cabecera del documento. Dentro de la cabecera es importante definir el ttulo de la pgina por medio de la directiva <TITLE></TITLE>. Este ttulo ser el que aparezca en la barra de nuestro visor de pginas Web. Ejemplo: <TITLE>La pgina Web de Juan</TITLE> Dentro de la cabecera de nuestro documento podemos incluir otras directivas adicionales. La directiva <META> indica al visor de Internet las palabras clave y contenido de nuestra pgina Web. Muchos de los buscadores de pginas Web de Internet (Google, Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la pgina en sus bases de datos. La directiva <META> lleva generalmente dos parmetros, name y content. Ejemplos: <META name = "Descripcin" content = "Mi pgina personal, Msica y Pelculas"> Indica al visor la descripcin de la pgina y sus contenidos principales. <META name = "keywords" content = "msica, pelculas, links"> Indica al visor las palabras clave para los buscadores de Internet. <meta name="title" content="AgregaWeb"> Indica el ttulo de la Pgina Hay pginas para registrar automticamente, por ejemplo: Agregaweb, Recursos gratis,... Otro uso de la directiva <META> es la de indicar documentos con "refresco automtico". Si se indica una URL se sustituir el documento por el indicado una vez transcurridos el nmero de segundos especificados. Si no se incluye ninguna URL se volver a cargar en el visor el documento en uso transcurridos los segundos indicados. Esto es til para pginas que cambian de contenido con mucha frecuencia o para redireccionar a la persona que visita nuestra pgina Web a una nueva direccin donde se encuentra una versin actualizada de nuestra pgina Web. Ejemplo : <META http-equiv= "refresh" content = "15;url=http://www.pangea.org"> Transcurridos 15 segundos se acceder a la pagina Web de Pangea. La directiva <BASE> indica la localizacin de los ficheros, grficos, sonidos, etc... a los que se hace referencia en nuestra pgina Web. Si no se incluye esta directiva el visor entiende que dichos elementos se encuentran en el mismo lugar donde se encuentra nuestra pgina Web.
Ejemplo: <BASE href = "http://www.jet.es/jose/">
Cuerpo del documento

La directiva <BODY></BODY> indica el inicio y final de nuestra pagina Web. Ser entre el inicio y el final de esta directiva donde pongamos los contenidos de nuestra pgina, textos, grficos, enlaces, etc.... Esta directiva tiene una serie de parmetros opcionales que nos permiten indicar la "apariencia" global del documento: background= "nombre de fichero grfico" Indica el nombre de un fichero grfico que servir como "fondo" de nuestra pgina. Si la imagen no ocupa todo el fondo del documento, esta ser reproducida tantas veces como sea necesario. bgcolor = "cdigo de color" Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parmetro background. Aun as es bueno indicarlo ya que en el caso de que el visor que utilicemos tenga desactivado los grficos s se ver. text = "cdigo de color" Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro. link = "cdigo de color" Indica el color de los textos que dan acceso a un Hyperenlace. Por defecto es azul. vlink = "cdigo de color" Indica el color de los textos que dan acceso a un Hyperenlace que ya hemos visitado con nuestro visor. Por defecto es azul oscuro. El cdigo de color es un nmero compuesto por tres pares de cifras hexadecimales que indican la proporcin de los colores "primarios", rojo, verde y azul. El cdigo de color se antecede del smbolo #. El primer par de cifras indican la proporcin de color Rojo, el segundo par de cifras la proporcin de color Verde y, las dos ltimas, la proporcin de color Azul. Estos nmeros estn en numeracin hexadecimal. Esta numeracin se caracteriza por tener 16 dgitos (en lugar de los 10 habituales). Estos dgitos son: 0123456789ABCDEF Es decir, que en nuestro caso, el nmero menor es el 00 y el mayor el FF. Combinando las proporciones de cada color primario obtendremos diferentes colores. Ejemplos: #000000 #FF0000 Color Negro Color Rojo
#00FF00 #0000FF #FFFFFF
Color Verde Color Azul Color Blanco
Cuando la gente no usa color verdadero, sino 256 colores hay que tener en cuenta que los navegadores slo permiten ver con exactitud 216. Estos se conseguirn con ternas de parejas expresadas como: 00, 33, 66, 99, CC y FF. Cualquier otra combinacin se visualizar como el color ms parecido. La paleta de colores de 216 que asegura una visin real de los colores en la web ser: FFFFFF 99FF66 00FFFF 00FF66 FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCFFFF CCFFCC 66FFFF 33FF99
CCFF99 CCFF66 CCFF33 CCFF00 99FFFF 99FFCC 99FF99 66FF99 FFCC99 66FF66 66FF33 00FFCC 66FF00
99FF33 66FFCC FFCCFF 99FF00 33FFFF FFCCCC 33FFCC
FFCC66 FFCC33 CCCCFF 33FF66 33FF33 00FF99 FFCC00 33FF00 00FF33 00FF00 CCCCCC CCCC99 99CCFF CCCC66 CCCC00 CCCC33 99CCCC FF99FF 99CC99 66CCFF FF99CC 99CC66 66CCCC 99CC33 00CCFF 33CCFF 99CC00 FF9999 66CC99 FF9966 66CC66 33CCCC CC99FF 00CCCC FF9933 FF9900 66CC33 66CC00 33CC99 00CC99 CC99CC 33CC66 00CC66 CC9999 FF66FF 33CC33 33CC00 CC9966 00CC33 9999FF 00CC00 CC9933 CC9900 FF66CC 9999CC FF6699 999999 6699FF FF6666 CC66FF 999966 6699CC 999933 FF6633 FF6600 FF33FF 3399FF 999900 669999 CC66CC 0099FF FF33CC 3399CC CC6699 669966 FF00FF 339999 669933 669900 FF3399 0099CC 9966FF CC6666 009999 CC6633 CC6600 339966 FF00CC FF3366 009966 CC33FF FF3333 339933 009933 9966CC FF3300 FF0033 FF0099 339900 009900 6666FF CC33CC FF0066 996699 FF0000 CC00FF CC3399 996666 6666CC 996633 996600
3366FF CC3366 CC00CC 9933FF 0066FF 666699 CC3333 CC3300 3366CC CC0099 9933CC 666666 666633 0066CC 9900FF 666600 CC0066 336699 993399 CC0033 6633FF 336666 006699 CC0000 993366 9900CC 336633 006666 336600 6633CC 3333FF 006633 993333 993300 6600FF 990099 006600 0033FF 663399 990066 3333CC 663366 6600CC 990033 0033CC 990000 3300FF 663333
663300# 660099 0000FF 333399 3300CC 003399 333300 660066 333333 003366 0000CC 660033 333300 660000 330099 003333 003300 000099 330066 330033 000066 330000 000033 000000 De cualquier forma la mayora de los editores de HTML nos permiten obtener el cdigo de color correspondiente escogiendo directamente el color de una paleta. As mismo la mayor parte de los navegadores actuales tienen algunos colores predefinidos por lo que pueden ser referenciados por su nombre. La paleta de colores que se pueden poner con nombre es ms limitada, slo 140: White Linen Silver Lavender Beige LightYellow BlanchedAlmon d PeachPuff DeepSkyBlue Blue Snow GhostWhite DarkGray LavenderBlush Cornsilk
LightGoldenrodYello w
Seashell WhiteSmoke LightCyan MistyRose AntiqueWhite LemonChiffon Moccasin LightBlue CornflowerBlue DarkBlue Navy DarkOrchid Magenta LightPink Burlywood LightCoral IndianRed SaddleBrown Orange DarkKhaki OliveDrab DarkGreen Chartreuse SpringGreen PowderBlue
FloralWhite Gainsboro Azure MintCream PapayaWhip PaleGoldenrod Wheat
OldLace LightGrey AliceBlue Honeydew Ivory Khaki NavajoWhite
Bisque LightSteelBlue DodgerBlue MediumBlue
DarkSlateBlue Indigo BlueViolet DarkViolet Thistle Plum MediumOrchid Pink PaleVioletRed MediumVioletRed RosyBrown Salmon OrangeRed Red Brown Sienna Tan SandyBrown Peru DarkSeaGreen Goldenrod DarkGoldenrod Olive DarkOliveGreen LimeGreen YellowGreen MediumSpringGreen Lime Cyan PaleTurquoise
SkyBlue LightSkyBlue SteelBlue RoyalBlue MediumSlateBlu SlateBlue e MidnightBlue MediumPurple DarkMagenta Purple Violet Orchid HotPink DeepPink LightSalmon DarkSalmon Coral Tomato Crimson Firebrick DarkRed Maroon DarkOrange Chocolate Yellow Gold ForestGreen Green SeaGreen MediumSeaGreen GreenYellow LawnGreen LightGreen PaleGreen Turquoise MediumTurquoise
DarkTurquoise DarkCyan DimGray
MediumAquamarin LightSeaGreen e Teal LightSlateGray SlateGray DarkSlateGray Black Aquamarine
CadetBlue Gray
Juego de caracteres del Documento.

Todos los visores de pginas Web actuales soportan todos los caracteres grficos de la especificacin ISO 8859-1, que permite escribir textos en la mayora de los pases occidentales. De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres ASCII, se han definido dos formas de representar caracteres especiales usando solamente el cdigo ASCII de 7 bits. Para hacer referencia a estos caracteres se les asigna un cdigo numrico o un nombre de "entidad". Asimismo hay caracteres que se utilizan para las directivas de HTML, por ejemplo < y >. Estos caracteres pueden ser representados por un cdigo numrico o una entidad cuando deseemos que aparezcan en el documento "tal cual". Las entidades comienzan por el smbolo & (ampersand) y terminan con el smbolo ; (punto y coma). A continuacin veamos una tabla con las principales entidades: Carcter Cdigo Entidad Carcter Cdigo Entidad ! # % ' ) + / ; = ? [ ] ! # % ' ) + - / ; = ? [ ] -------------" $ & ( * , . : < > @ \ ^ " $ & ( * , . : < > @ \ ^ --------------
_ { }
_
--
` | ~
`
--
{ -} - nbsp ¢ cent ¤ curren ¦ brvbar ¨ uml ª ordf ¬ not ® reg ° deg ² sup2 ´ acute ¶ para ¸ cedil º ordm ¼ frac14 ¾ frac34 À Agrave Â Acirc Ä Auml Æ AElig È Egrave Ê Ecirc Ì Igrave Î Icirc Ð ETH Ò Ograve Ô Ocirc Ö Ouml Ø Oslash Ú Uacute
| -~ -¡ iexcl £ pound ¥ yen § sect © copy « laquo shy ¯ macr ± plusmn ³ sup3 µ micro · middot ¹ sup1 » raquo ½ frac12 ¿ iquest Á Aacute Ã Atilde Å Aring Ç Ccedil É Eacute Ë Euml Í Iacute Ï Iuml Ñ Ntilde Ó Oacute Õ Otilde × times Ù Ugrave Û Ucirc
Ü Uuml Þ THORN à agrave â acirc ä auml æ aelig è egrave ê ecirc ì igrave î icirc ð eth ò ograve ô ocirc ö ouml ø oslash ú uacute ü uuml þ thorn
Ý Yacute ß szlig á aacute ã atilde å aring ç ccedil é eacute ë euml í iacute ï iuml ñ ntilde ó oacute õ otilde ÷ divide ù ugrave û ucirc ý yacute ÿ yuml
Por lo tanto, la palabra pgina la podramos escribir como: pgina página página Si deseamos que cualquier visor de pginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes entidades o cdigos para representarlas.
Espaciados y saltos de lnea

En HTML slo se reconoce un espacio entre palabra y palabra, el resto de los espacios sern ignorados por el visor. Ejemplo Se ver como
Esto
es
una
frase
Esto es una frase
Asimismo tampoco se respetan las tabulaciones, retornos de carro etc... Para ello existen una serie de directivas que indican estos cdigos. La directiva <PRE></PRE> obliga al visor a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc.. pero se ver con una fuente tipo mquina (courier). Ejemplo <PRE>
Este texto ha sido
Se ver como
Este texto ha sido
preformateado
preformateado
</PRE>
Para indicar un salto de lnea se utiliza la directiva <BR> y para un cambio de prrafo (deja una lnea en blanco en medio) se utiliza la directiva <P>. Ejemplo Este texto tiene<BR>saltos de lnea y <P> de prrafo. Se ver como Este texto tiene saltos de lnea y de prrafo. La directiva <P> tiene el parmetro opcional: align = posicin Alinea el prrafo a la izquierda (left), a la derecha (right), lo centra (center) o lo justifica (justify). Este ltimo parmetro slo funciona en navegadores versiones 4 o superiores. La directiva <HR> muestra una lnea horizontal de tamao determinable. Tiene los siguientes parmetros opcionales: align = posicin Alinea la lnea a la izquierda (left), a la derecha (right) o la centra (center). noshade No muestra sombra, evitando el efecto en tres dimensiones. size = nmero Indica el grosor de la lnea en pixels.
width = % nmero Indica el ancho de la lnea en tanto por ciento en funcin del ancho de la ventana del visor, o en pixels si indicamos un nmero sin porcentaje. Ejemplo: <HR align= center size= 20 width= 50%>
La directiva <HR> sin ningn parmetro mostrar una lnea horizontal que ocupar todo el ancho de la pgina. Estas lneas sencillas son las que ves en este manual para separar las diferentes secciones.
Cabeceras
En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaos de letra) por medio de las directivas <H1><H2><H3><H4><H5> y <H6>. El texto que escribamos entre el inicio y el fin de la directiva ser el afectado por las cabeceras. La cabecera <H1> ser la que muestre el texto en mayor tamao. Ejemplo <H1>Texto de Prueba</H1> Se vera como
Texto de prueba
<H2>Texto de Prueba</H2> <H3>Texto de Prueba</H3> <H4>Texto de Prueba</H4> <H5>Texto de Prueba</H5> <H6>Texto de Prueba</H6>
Texto de Prueba
Texto de Prueba
Texto de Prueba
Texto de Prueba
Texto de Prueba
Los textos marcados como "cabeceras" provocan automticamente un retorno de carro sin necesidad de incluir la directiva <BR>. Por ejemplo: Ejemplo Se vera como
Pgina de Jos
<H3>Pgina de Jos</H3>Esta es mi pgina personal. Esta es mi pgina personal
Atributos del Texto

Para indicar atributos de texto (negrilla, subrayado, etc...) tenemos varias directivas. Algunas de ellas no son reconocidas por determinados visores de Internet, es por ello que segn el visor que ests utilizando, vers el resultado correctamente o no. Atributo Negrita Cursiva Teletype Subrayado Tachado Parpadeo Directiva <B></B> <I></I> <TT></TT> <U></U> <S></S> <BLINK></BLINK> Ejemplo <B>Texto de prueba</B> <I>Texto de prueba</I> <TT>Texto de prueba</TT> <U>Texto de prueba</U> <S>Texto de prueba</S> <BLINK>Texto de prueba</BLINK> <SUP>Texto de prueba</SUP> <SUB>Texto de prueba</SUB> <CENTER>Texto de prueba</CENTER> Resultado Texto de prueba Texto de prueba
Texto de prueba
Texto de prueba Texto de prueba Texto de prueba

Texto de prueba Texto de prueba
Superndice <SUP></SUP> Subndice Centrado <SUB></SUB> <CENTER></CENTER>
Texto de prueba
Por otro lado, la directiva <FONT></FONT> nos permite variar el aspecto del texto, con los siguientes parmetros: size = valor Da al texto un tamao en puntos determinado. size = +/- valor Da al texto un tamao tantas veces superior (+) o inferior (-) como indique el valor. color = "cdigo de color" Escribe el texto en el color cuyo cdigo se especifica. face = "fuente_de_letra" Permite cambiar la fuente de la letra, por ejemplo: Arial. Se pueden poner varias separadas por comas. De esa manera si el navegador no tiene la primara, probar con la segunda, etc. Por ejemplo: Helvetica, Arial, Sans Serif.
Ejemplo <FONT size = +2 color = "#FF0000"> Texto de prueba </FONT>
Se vera como
Texto de prueba
El tamao por defecto de la letra es 3. Pero la directiva <BASEFONT>, con el parmetro size permite cambiarlo. Existen otras directivas que realizan las mismas operaciones que las antes vistas en los atributos del texto. Directiva <STRONG></STRONG> <CITE></CITE> <STRIKE></STRIKE> Hace lo mismo que <B></B> <I></I> <S></S>
Para sangrar el texto se <BLOCKQUOTE></BLOCKQUOTE>
puede
utilizar
la
directiva
Para incluir comentarios en la pgina Web que no sean mostrados en la pgina, se utiliza la directiva . Ejemplo: 
Listas de elementos
Existen tres tipos de listas: numeradas, sin numerar y de definicin. Las listas numeradas representarn los elementos de la lista numerando cada uno de ellos segn el lugar que ocupan en la lista. Para este tipo de lista se utiliza la directiva <OL></OL>. Cada uno de los elementos de la lista ir precedido de la directiva <LI>. La directiva <OL> puede llevar los siguientes parmetros: start = num
Indica que nmero ser el primero de la lista. Si no se indica se entiende que empezar por el nmero 1. Se indica numricamente, independientemente del tipo que se elija. type = tipo Indica el tipo de numeracin utilizada. Si no se indica se entiende que ser una lista ordenada numricamente. Los tipos posibles son: 1 = Numricamente. (1, 2, 3, 4, a = Letras minsculas. (a, b, c, d, A = Letras maysculas. (A, B, C, D, i = Nmeros romanos en minsculas. (i, ii, iii, iv, I = Nmeros romanos en maysculas. (I, II, III, IV, V, ... etc.) Ejemplo <OL> <LI>Espaa <LI>Francia <LI>Italia <LI>Portugal </OL> <OL type = A > <LI>Espaa <LI>Francia <LI>Italia <LI>Portugal </OL> Resultado 1. Espaa 2. Francia 3. Italia 4. Portugal A. Espaa B. Francia C. Italia D. Portugal ... ... ... v, ... etc.) etc.) etc.) etc.)
Las listas sin numerar representan los elementos de la lista con un "topo" o marca que antecede a cada uno de ellos. Se utiliza la directiva <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. La directiva <UL> puede contener el parmetro type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disc, circle o square, con lo que el topo o marca puede ser un disco, un circulo o un cuadrado. Ejemplo <UL type = disc > <LI>Espaa <LI>Francia <LI>Italia <LI>Portugal </UL>

Resultado Espaa Francia Italia Portugal
<UL type = square> <LI>Espaa <LI>Francia <LI>Italia <LI>Portugal </UL>
Espaa Francia Italia Portugal
Las listas de definicin muestran los elementos tipo Diccionario, o sea, trmino y definicin. Se utiliza para ellas la directiva <DL></DL>. El elemento marcado como trmino se antecede de la directiva <DT>, el marcado como definicin se antecede de la directiva <DD>. Ejemplo Resultado
<DL> <DT>WWW WWW <DD>Abreviatura de World Wide Web Abreviatura de World Wide Web <DT>FTP FTP <DD>Abreviatura de File Transfer Protocol Abreviatura de File Transfer Protocol <DT>IRC IRC <DD>Abreviatura de Internet Relay Chat Abreviatura de Internet Relay Chat </DL> Existen otros dos tipos de listas menos comunes. Las listas de Men o Directorio se comportan igual que las listas sin numerar. La lista de Men utiliza la directiva <MENU></MENU> y los elementos se anteceden de <LI> El resultado es una lista sin numerar ms "compacta" es decir, con menos espacio interlineal entre los elementos. La lista de Directorio utiliza la directiva <DIR></DIR> y los elementos se anteceden de <LI>. Los elementos tienen un limite de 20 caracteres. Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo "ndice de materias". Ejemplo <UL type= disc> <LI>Buscadores <UL> <LI>Google <LI>Yahoo <LI>Ole <LI>El ndice </UL> <LI>Links
Resultado Buscadores Google Yahoo Ole El ndice Links Pangea
PIE
<UL> <LI>Pangea <LI>PIE </UL> </UL>
Imgenes
Hasta el momento hemos visto como se puede escribir texto en una pgina Web, as como sus posibles formatos. Para incluir una imagen en nuestra pgina Web utilizaremos la directiva <IMG>. Hay dos formatos de imgenes que todos los navegadores modernos reconocen. Son las imgenes GIF y JPG. Cualquier otro tipo de fichero grfico o de imagen (BMP, PCX, CDR, etc...) no ser mostrado por el visor, a no ser que disponga de un programa externo que permita su visualizacin. La directiva <IMG> tiene varios parmetros: src = "imagen" Indica el nombre del fichero grfico a mostrar. alt = "Texto" Mostrar el texto indicado en el caso de que el navegador utilizado para ver la pgina no sea capaz de visualizar la imagen. align = TOP / MIDDLE / BOTTOM Las imgenes, por defecto, se comportan como si fueran un carcter, alinendose en la misma lnea que el texto que las precede o que las sigue. ste parmetro indica como se alinear el texto que siga a la imagen con respecto a sta. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior. Otras opciones ms avanzadas seran: TEXTTOP se alinea justo al comienzo del texto ms alto de la lnea, ABSMIDDLE, se alinea en el centro real de la imagen y ABSBOTTOM, coloca el texto justo al final de la imagen. Estos tres parmetros son ms precisos, pero no todos los navegadores los aceptan. align = LEFT / RIGHT Si en el parmetro align tiene los valores left o right, la imagen dejar de comportarse como un carcter colocndose a la izquierda o a la dercha y permitiendo escribir texto a su otro lado (si no, slo se podr escribir una lnea). border = tamao Indica el tamao del "borde" de la imagen. A toda imagen se le asigna un borde que ser visible cuando la imagen forme parte de un Hyperenlace. height = tamao Indica el alto de la imagen en puntos o en porcentaje. Se puede usar para variar el tamao de la imagen original, aunque es mejor redimensionarla en un programa de retoque fotogrfico ya que ser de mejor calidad y el archivo tendr el tamao apropiado.
width = tamao Indica el ancho de la imagen en puntos o en porcentaje. Se puede usar para variar el tamao de la imagen original, aunque es mejor redimensionarla en un programa de retoque fotogrfico ya que ser de mejor calidad y el archivo tendr el tamao apropiado. hspace = margen Indica el nmero de espacios horizontales, en puntos, que separarn la imagen del texto que la siga y la anteceda. vspace = margen Indica el nmero de puntos verticales que separaran la imagen del texto que le siga y la anteceda. Ejemplo Se vera como <IMG src="caution.gif" alt= "Obras !!" > Si el visor no pudiese visualizar el grfico..... Obras!!
La imagen a mostrar puede encontrarse en el mismo lugar (URL) que la pgina Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL o la trayectoria de donde se encuentre la imagen. Ejemplo: <IMG src= "http://www.microsoft.com/iexplorer.gif"> <IMG src= "/imagenes/iexplorer.gif"> (imgenes sera un subdirectorio de aquel donde se encuentra la pgina HTML que estamos usando) Veamos varios ejemplos "jugando" con los tamaos de la imagen, as como comprobando la alineacin de los textos. (Recuerda que en funcin del visor que utilices pueden verse o no los efectos de cada parmetro). Ejemplo <IMG src="caution.gif" width=100 > <IMG src="caution.gif" height=20 > <IMG src="caution.gif" align=TOP>Atencin !!! Se vera como
Atencin !!!
<IMG src="caution.gif" align=MIDDLE>Atencin !!! <IMG src="caution.gif" align=BOTTOM>Atencin !!!
Atencin !!!
Atencin !!!
Tenga en cuenta<IMG src="caution.gif" hspace=20>esta indicacin. Tenga en cuenta Tenga en cuenta<IMG src="caution.gif" vspace=40>esta indicacin. Tenga en cuenta
esta indicacin
esta indicacin.
Siempre es bueno especificar el tamao de la imagen, incluso aunque no se quiera redimensionar y se use el suyo propio, ya que esto acelerar la velocidad de visualizacin de la pgina.
Hyperenlaces.
La caracterstica principal de una pgina Web es que podemos incluir Hyperenlaces. Un Hyperenlace es un elemento de la pgina que hace que el navegador acceda a otro recurso, otra pgina Web, un archivo, etc... Para incluir un Hyperenlace se utiliza la directiva <A></A>. El texto o imagen que se encuentre dentro de los lmites de esta directiva ser sensible, esto quiere decir que si situamos el ratn sobre l aparecer una mano con el dedo apuntando y si pulsamos se realzar la funcin de hyperenlace indicada por la directiva <A></A>. Si el Hyperenlace est indicado por un texto, este aparecer subrayado y en distinto color, si se trata de una imagen, esta aparecer con un borde rodendola. Esta directiva tiene el parmetro href que indica el lugar a donde nos llevar el Hyperenlace si lo pulsamos. Ejemplo <A href = "http://www.pangea.org/"> Pulse para ir a la pgina de Pangea</A> Se vera como Pulse para ir a la pgina de Pangea
Si situamos el ratn encima de la frase y pulsamos, el navegador acceder a la pgina Web indicada por el parmetro href, es decir, acceder a la pgina situada en http://www.pangea.org
Lo mismo podramos hacer con un grfico. Ejemplo Se vera como
Para buscar en Internet : <A href = "http://www.yahoo.com/" > Para buscar en Internet : <IMG src = "yahoo.gif"></A>
Pulsando sobre la imagen se accedera a la pgina situada en http://www.yahoo.com/. Cuando queremos ir a una pgina fuera de nuestro sitio web, siempre hay que usar una referencia absoluta, es decir, hay que poner la url completa, incluido el protocolo, etc. Por ejemplo: http://www.pangea.org/pacoc/manuales. Cuando queremos ir a una pgina de nuestro sitio web se debe poner siempre una referencia relativa, es decir, slo el nombre de la pgina ala que queremos ir si est en la misma carpeta, o el camino para ir desde donde estamos a donde queremos ir. Por ejemplo, para ir a la pgina "principal.htm" que estuviera en la subcarpeta "paginas" de la que estamos, habra que poner: <A HREF="paginas/principal.htm>. Un Hyperenlace tambin puede llevarnos a una zona de nuestra pgina. Para ello debemos marcar en nuestra pgina las diferentes secciones en las que se divide. Lo haremos con el parmetro name. Ejemplo: <A name = "seccion1"></A>
Esta instruccin marca el inicio de una seccin dentro de nuestra pgina. La seccin se llamar seccion1. Para hacer un enlace a esta seccin dentro de nuestra pgina lo haramos de la siguiente forma: <A href = "#seccion1">Primera Parte</A> O tambin : <A href = "http://www.jet.es/mipagina.htm#seccion1">Primera Parte</A> Un Hyperenlace puede hacerse a cualquier tipo de fichero. Con las directivas anteriores hemos visto como hacer enlaces a pginas Web o secciones dentro de una pgina web, pero podramos hacer un Hyperenlace a un grupo de noticias, o a otro servicio de Internet. Ejemplo: <A href = "news://news.actualidad.es/">Noticias de actualidad</A>
Asimismo podemos hacer que el Hyperenlace de como resultado el envo de un correo electrnico a una direccin de correo determinada. Ejemplo: <A href = "mailto: luisfd@jet.es">Envame tus sugerencias</A> Tambin podemos realizar un Hyperenlace a un fichero cualquiera. En este caso el navegador intentar "ejecutar" el fichero, y si no puede hacerlo nos preguntar si deseamos grabarlo en nuestro ordenador. Esta es una forma sencilla de permitir a los visitantes de nuestra pgina copiar ficheros a su ordenador. Ejemplo: <A href = "manual.zip">Pulsa aqu para llevarte una copia del manual.</A>
Tablas
Las tablas nos permiten representar cualquier elemento de nuestra pgina (texto, listas, imgenes, etc...) en diferentes filas y columnas separadas entre s. Es una herramienta muy til para "ordenar" contenidos de distintas partes de nuestra pgina. La tabla se define mediante la directiva <TABLE></TABLE>. Los parmetros opcionales de esta directiva son: border = num Indica el ancho del borde de la tabla en puntos. cellspacing = num Indica el espacio en puntos que separa las celdas que estn dentro de la tabla. Por defecto 2. cellpadding = num Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta. Por defecto 1. width = num % Indica la anchura de la tabla en puntos o en porcentaje en funcin del ancho de la ventana del visor. Si no se indica este parmetro, el ancho se adecuar al tamao de los contenidos de las celdas. height = num % Indica la altura de la tabla en puntos o en porcentaje en funcin del alto de la ventana del visor. Si no se indica este parmetro, la altura se adecuar a la altura de los contenidos de las celdas. bgcolor = "cdigo de color" Indica el color del fondo de la tabla. background = "cdigo de color" Indica una imagen de fondo para la tabla.
Para definir las celdas que componen la tabla se utilizan las directivas <TD> y <TH>. <TD> indica una celda normal, y <TH> indica una celda de "cabecera", es decir, el contenido ser resaltado en negrita y en un tamao ligeramente superior al normal. Los parmetros opcionales de ambas directivas son: align = LEFT / CENTER / RIGHT / JUSTIFY Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY). valign = TOP / MIDDLE / BOTTOM Indica la alineacin vertical del contenido de la celda, en la parte superior (TOP), en la inferior (BOTTOM), o en el centro (MIDDLE). rowspan = num Indica el nmero de filas que ocupar la celda. Por defecto ocupa una sola fila. colspan = num Indica el nmero de columnas que ocupar la celda. Por defecto ocupa una sola columna. bgcolor = "cdigo de color" Indica el color del fondo de la celda. background = "cdigo de color" Indica una imagen de fondo para la celda. Para indicar que acaba una fila de celdas se utiliza la directiva <TR>. A continuacin mostraremos un ejemplo de una tabla que contiene slo texto. Como se indic anteriormente el contenido de las celdas puede ser cualquier elemento de HTML, un texto, una imagen, un Hyperenlace, una Lista, etc... Ejemplo <TABLE border = 4 cellspacing = 4 cellpadding = 4 width =80%> <TH align = center>Buscadores <TH align = center colspan = 2>Otros Links <TR> <TD align = LEFT>Yahoo <TD align = LEFT>El ndice <TD align = LEFT>Pangea <TR> <TD align = LEFT>APC <TD align = LEFT>Web verde <TD align = LEFT>Agenda alternativa </TABLE> Se vera como Buscadores Yahoo APC El ndice Web verde Otros Links Pangea Agenda alternativa
Las directivas <TD> y <TH> son cerradas segn el estndar de HTML, es decir, que un elemento de tabla <TD> debera cerrarse con un </TD>, sin embargo los visores asumen que un elemento de la tabla, queda automticamente "cerrado" cuando se "abre" el siguiente. La directiva CAPTION se utiliza para poner una cabecera o un pie a la tabla, segn se indique en el parmetro align que puede tener los valores top y bottom. Por ejemplo, <CAPTION ALIGN="BOTTOM">Titulo tabla</CAPTION>.
Mapas
Un Mapa es una imagen que permite realizar diferentes Hyperenlaces en funcin de la "zona" de la imagen que se pulse. Para crear un mapa debemos tener un fichero con la imagen y un conjunto de rdenes donde indicaremos las coordenadas de la imagen que nos enlazarn con cada Hyperenlace. Actualmente hay dos maneras de hacer los mapas: a travs de un programa externo (CGI) que pueda "procesar" el fichero .map en el que habremos metidos las rdenes, o a travs de la directiva que soportan los Navegadores a partir de su versin 2 y 3 de Netscape y Explorer, respectivamente. En el primer caso el mapa se dice que corre en el servidor, ya que tiene que hacer llamadas a el y a su CGI para que funcione, en el segundo, corre en el cliente. Para el segundo caso, se utilizan las directivas <MAP></MAP> y <AREA>. La directiva <MAP> identifica al mapa y tiene el parmetro name para indicar el nombre del mapa. La directiva <AREA> define las reas sensibles de la imagen y tiene los siguientes parmetros obligatorios: shape = "tipo" Indica el tipo de rea a definir. coords = "coordenadas" Indica las coordenadas de la figura indicada con shape. href = "URL" Indica la direccin a la que se accede si se pulsa en la zona delimitada por el rea indicada. Los tipos de rea pueden ser los siguientes: rect rea rectangular. Se deben especificar las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. poly
Polgono. Se deben especificar las coordenadas de todos los vrtices del polgono. El visor se encarga de "cerrar" la figura. circle Crculo. Se debe especificar en primer lugar las coordenadas del centro del crculo y a continuacin el valor del radio (en puntos). Si dos reas se superponen, se ejecutar la que se encuentre en primer lugar en la definicin del mapa. Es importante definir una ltima rea que abarque la totalidad del grfico para direccionar a una URL "por defecto", con el objeto de contemplar el caso de que no se pulse sobre un rea definida. Veamos un ejemplo completo. <MAP name = "casa"> <AREA shape = "poly" coords = "2,62,57,62,28,1" href= "tejado.htm"> <AREA shape = "rect" coords = "21,101,35,138" href= "puerta.htm"> <AREA shape = "rect" coords = "2,64,57,138" href= "casa.htm"> <AREA shape = "circle" coords = "80,76,21" href= "arbol.htm"> <AREA shape = "rect" coords = "78,98,85,138" href= "tronco.htm"> <AREA shape = "rect" coords = "0,0,96,138" href= "dibujo.htm"> </MAP>
Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen es tratada por un mapa. Para ello escribiramos la siguiente directiva: <IMG src = "grafico.gif" usemap = "#casa">
Si tu visor tiene la capacidad de gestionar este tipo de mapas (Netscape 2.x o Ms-Explorer 2.x), prueba a pulsar sobre alguna parte del mapa que hemos definido y que te aparecer a continuacin:
Extensiones del HTML
Netscape y Microsoft han aadido al estndar de HTML diversas directivas para hacer ms atractiva la visualizacin de las pginas Web. Veremos aqu las ms interesantes y la forma de usarlas. Estas directivas pueden no funcionar en algn visor de HTML, pero el uso de ellas por parte de los dos "grandes" del software para Internet hace prever que sern inmediatamente incluidas en las nuevas versiones del resto de los visores.
Marquee
La directiva <MARQUEE></MARQUEE> crea una marquesina con un texto en su interior que se desplaza. Funciona nicamente con Ms-Explorer. Sus parmetros son los siguientes: align = top / middle / bottom Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la baja (bottom) o en el centro (middle) de la misma. bgcolor = "cdigo de color" Indica el color del fondo de la marquesina. direction = left / right Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha (right) height = num o % Indica la altura de la marquesina en puntos o porcentaje en funcin de la ventana del visor. width = num o % Indica la anchura de la marquesina en puntos o porcentaje en funcin de la ventana del visor. loop = num / infinite Indica el nmero de veces que se desplazar el texto por la marquesina. Si se indica infinite, se desplazar indefinidamente. scrolldelay = num. Indica el nmero de milisegundos que tarda en reescribirse el texto por la marquesina, a mayor nmero ms lentamente se desplazar el texto. Veamos un ejemplo de esta directiva: <MARQUEE bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 > Bienvenido a mi pgina personal en Internet. </MARQUEE> Si ests utilizando Ms-Explorer vers el efecto producido a continuacin:
Sonido de fondo
Nuestra pgina Web puede tener un sonido que se active al entrar en la pgina. Esta caracterstica de Ms Explorer utiliza la directiva <BGSOUND> y tiene los siguientes parmetros: src = "fichero" Indica el nombre del fichero que contiene el sonido (.wav, .mid). loop = num / infinite Indica el nmero de veces que se reproducir el sonido. Si se indica infinite, el sonido se reproducir de forma continua hasta que abandonemos la pgina. Un ejemplo de esta directiva sera: <BGSOUND src= "yesterday.mid" loop= infinite>
Embed y sonido de fondo en netscape

Para lograr el sonido de fondo en Netscape se puede utilizar la directiva <EMBED>, que tambin nos permitir incorporar cualquier tipo de archivo en cualquier posicin. Para que pueda mostrarse el archivo se deber tener el plug-in adecuado. Es una directiva cerrada y tiene los siguientes parmetros: src = "fichero" Indica el nombre del fichero (sonido .wav o .mid, o cualquier otro). loop = num / infinite Indica el nmero de veces que se reproducir el sonido. Si se indica infinite, el sonido se reproducir de forma continua hasta que abandonemos la pgina. width = "nmero" Ancho del objeto insertado. Si se quiere que no se vea se puede poner en 0 o utilizar el parmetro <HIDDEN> height = "nmero" Altura del objeto insertado. Si se quiere que no se vea se puede poner en 0 o utilizar el parmetro <HIDDEN> HIDDEN = true Ocultar el gestor de sonidos. AUTOSTART = true Se activar el sonido al cargarse la pgina. Estos dos ltimos parmetros los utilizaremos cuando queramos poner sonidos de fondo para Netscape. Habr que utilizar tanto esta directiva como la <BGSOUND>. De esta manera el sonido de fondo funcionar tanto en Netscape como en Explorer.
Frames (marcos)
Los marcos son una tcnica para dividir la ventana del visor en diferentes zonas. Cada una de estos marcos se podr manipular por separado, permitindonos mostrar en cada una de ellos una pgina Web diferente. Esto es muy til para, por ejemplo, mostrar
permanentemente en un marco los diferentes contenidos de nuestra pgina, y en otro mostrar el contenido seleccionado. Para definir los diferentes marcos o frames se utilizan las directivas <FRAMESET> </FRAMESET> y <FRAME>. La directiva <FRAMESET> indica como se va a dividir la ventana principal. Pueden incluirse varias directivas <FRAMESET> anidadas con el objeto de subdividir una divisin. Los parmetros de <FRAMESET> son rows y cols en funcin de si la divisin de la pantalla se realiza por filas (rows) o columnas (cols). Los parmetros rows y cols se acompaan de un grupo de nmeros que indican en puntos o en porcentaje el tamao de cada uno de los marcos. En caso de utilizar rows los tamaos de los marcos se entienden indicados de arriba a abajo, es decir, el primer valor ser el asignado al marco superior, el segundo al marco inmediatamente inferior, etc... En el caso de cols los tamaos se aplican de izquierda a derecha. Ejemplos <FRAMESET rows = "25%,50%,25%"> Resultado Crea tres marcos horizontales, la primera ocupar un 20% de la ventana principal, la segunda un 50% y la tercera un 25%. Crea tres marcos verticales, la primera y la tercera tendrn un "ancho" fijo de 120 y 100 puntos respectivamente. La segunda ocupar el resto de la ventana principal (*). En este caso "anidamos" dos directivas. La primera divide la ventana principal en dos marcos verticales, la primera ocupa un 15% de la ventana principal y la segunda el resto. La segunda directiva vuelve a subdividir el primer marco creado anteriormente, pero esta vez en dos marcos horizontales, el superior ocupar un 20% de la ventana, y el inferior el resto.
<FRAMESET cols = "120,*,100">
<FRAMESET cols = "15%,*"> <FRAMESET rows = 20%,*">
La directiva <FRAMESET> tiene los siguientes parmetros: border = "nmero" Permite cambiar o quitar (0) el borde entre los marcos. Por defecto, aparece. Para que tambin funcione en Explorer habr que usar frameborder = 0 framespacing = "nmero" Permite cambiar el espacio entre el borde del marco y la pgina.
La directiva <FRAME> indica las propiedades de cada marco. Es necesario indicar una directiva <FRAME> para cada marco creado. Los parmetros de <FRAME> son: name = "nombre" Indica el nombre por el que nos referiremos a ese marco. src = "URL" El marco mostrar en principio el contenido del documento HTML que se indique. marginwidth = num. Indica, en puntos, el margen izquierdo y derecho del marco. marginheight = num Indica, en puntos, el margen superior e inferior del marco. scrolling = "yes / no / auto" Indica si se aplica una barra de desplazamiento al marco en el caso de que la pgina que se cargue en ella no quepa en los lmites del marco. El valor "yes" muestra siempre la barra de desplazamiento, "no" no la muestra nunca (la zona de la pgina que no quepa en el marco no la veremos), y "auto" la muestra slo en caso de que sea necesario para poder ver la pgina. noresize Si se indica este parmetro, el usuario no podr "redimensionar" los marcos con el visor. Un usuario que est viendo una pgina con marcos puede redimensionarlos seleccionando un borde del marco con el ratn y desplazndolo. Los visores que no soportan la caracterstica de marcos, no mostrarn nada de lo indicado con estas directivas. Es por ello que existe una directiva llamada <NOFRAMES> </NOFRAMES>. Todo lo indicado entre esta directiva ser lo que muestren los visores sin capacidad para visualizar marcos. Los visores que soporten marcos obviarn las directivas incluidas entre <NOFRAMES> </NOFRAMES>. Veamos un ejemplo completo de marcos con comentarios:
<HTML> <HEAD> <TITLE>Pgina con Marcos</TITLE> </HEAD> <FRAMESET cols = "15%,*">  <FRAMESET rows = "35%,*">  <FRAME name = "rotulo" src = "titulo.htm" scrolling = "auto">  <FRAME name = "menu" src = "menu1.htm" scrolling = "auto">  </FRAMESET>  <FRAME name = "principal" src = "primera.htm" scrolling = "auto"> 
<NOFRAMES>  SU VISOR NO MUESTRA MARCOS. Pulse <A href= "primera.htm"> AQUI </A> para ir a la pgina principal sin Marcos. </NOFRAMES> </FRAMESET>  </HTML>
Al usar marcos, nos encontramos con un problema. Cuando queramos mostrar una pgina Web debemos indicarle al visor en que marco queremos que se muestre. Por defecto se mostrar en el marco donde se encuentre el enlace. Para poder escoger el marco de destino del Hyperenlace se aade un nuevo parmetro a la directiva <A href= > </A>. Este parmetro se llama target y puede tener los siguientes valores: target = "nombre_marco" Muestra el Hyperenlace en la ventana cuyo nombre se indica. target = "_blank" Abre una nueva copia del visor y muestra el Hyperenlace en ella. target = "_self" Se muestra el Hyperenlace en el marco activo, es decir, en el mismo marco que lo referencia. target = "_parent" El Hyperenlace se muestra en el marco o <FRAMESET> que llam al documento actual. Si no hay ningn <FRAMESET> anterior se muestra a pantalla completa suprimiendo todos los marcos de la pantalla. target = "_top" Suprime todos los marcos de la pantalla y muestra el Hyperenlace a pantalla completa. Ejemplos Resultado <A href= "http://www.nasa.com/" Muestra la pgina de la Nasa en una target = "_blank"> nueva copia del visor <A href= "http://www.pangea.org/" Muestra la pgina de Pangea en el target = "principal"> marco llamado "principal" <A href= "http://www.yahoo.com/" Muestra la pagina del buscador Yahoo target = "_top"> a pantalla completa
Manual Avanzado de HTML
Formularios
Los formularios nos permiten dentro de una pgina Web solicitar informacin al visitante y procesarla. En un formulario podremos solicitar diferentes datos (campos) cada uno de los cuales quedar asociado a una variable. Una vez se hallan introducido los valores en los campos, el contenido de estos ser enviado a la direccin (URL) donde tengamos el programa que pueda procesar las variables. Para poder realizar este ltimo paso de procesar las variables necesitaremos realizar un programa externo en algun lenguaje de programacin como PERL, C++ o Visual Basic. A este programa externo se le suele llamar CGI (Common Gateway Interface). La creacin de este tipo de programas sera tema de otro manual diferente, por lo que aqu veremos como se pueden enviar las variables a nuestra direccin de correo electrnico. La declaracin del formulario se pone entre las directivas <FORM></FORM>. En el interior de la declaracin se indican los elementos (variables) de entrada. La directiva <FORM> tiene los parmetros action y method.
action = "programa" Indica el programa que va a "tratar" las variables que se envien con el formulario. Este programa debe encontrarse en el servidor y estar escrito en algn lenguaje de programacin. A este tipo de programas se les llama cgi-bin, y normalmente estn escritos en PERL, C, TCL, shell de unix, ... En nuestro caso enviaremos las variables por correo electrnico, con lo que el "programa" ser "mailto: direccion_de_correo". Tambin puede ser una URL usando el mtodo GET (por ejemplo, un botn para ir a otra pgina). method = POST / GET Indica el mtodo segn el que se transferiran las variables. POST enva los datos, normalmente al programa CGI definido en action o por correo si en action hemos utilizado mailto. El mtodo GET aade los argumentos del formulario al URL recogido en action (utilizando como separador de las variables la "?"). El mtodo de uso ms normal es POST. enctype = Indica el tipo de documento en formato MIME. El ms usado para que lleguen el contenido a travs de un mail con el mtodo post sera text/plain
Campos de Entrada Para la introduccin de las variables se utiliza la directiva <INPUT>. Esta directiva tiene el parmetro type que indica el tipo de variable a introducir y name que indica el nombre que se le dar al campo. Cada tipo de variable tiene sus propios parmetros.
type= text name = campo Indica que el campo a introducir ser un texto. Sus parmetros son : maxlength = nmero Nmero mximo de caracteres a introducir en el campo. size = nmero Tamao en caracteres que se mostrar en pantalla. value = "texto" Valor inicial del campo. Normalmente sera " ", o sea, vaco. type = password name = campo Indica que el campo ser una palabra clave. Mostrar asteriscos (*) en lugar de las letras escritas. Sus parmetros opcionales son los mismos que para text. type = checkbox name = campo El campo se elegir marcando una casilla de verificacin. Se permite marcar varias casillas. Los valores de las casillas sern indicados por: value = "valor" checked La casilla aparecer marcada por defecto. type = radio name = campo El campo se elegir marcando una casilla de opcin. Slo permite marcar una de las casillas. El name debe ser en todas el mismo. Los valores de las casillas sern indicados por: value = "valor" type = image name = campo El campo contendr el valor de las coordenadas del punto de la imagen pinchado. Debe indicarse la imagen con el parmetro: src = "fichero de imagen". type = hidden name = campo
El usuario no puede modificar su valor, ya que el campo no es visible se manda siempre con el valor indicado por el parmetro : value = "valor" type = file value = "texto" Muestra un botn para seleccionar el archivo a enviar. type = submit Representa un botn. Al pulsar este botn la informacin de todos los campos se enva al programa indicado en <FORM>. Tiene el parmetro value = "texto" que indica el texto que aparecer en el botn. type = reset Representa un botn. Al pulsar este botn se borra el contenido de todos los campos. El parmetro value = "texto" indica el texto que aparecer en el botn.
Campos de Seleccin Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger una o varias. Se utiliza para ellos la directiva <SELECT> </SELECT> . Sus parmetros son :
name = campo Nombre del campo size = num Nmero de opciones visibles. Si se indica 1 se presenta como una lista desplegable, se se indica ms de uno se presenta como una lista con barra de desplazamiento. multiple Permite selecionar ms de un valor para el campo.
Las diferentes opciones de la lista se indican con la directiva <OPTION>. Esta directiva puede incluir el parametro selected para indicar cual es la opcin por defecto. En caso de que no se especifique, se tomar por defecto la primera opcin de la lista. reas de texto.
Representa un campo de texto de mltiples lneas. Normalmente se utiliza para que se incluyan en l comentarios. La directiva usada es <TEXTAREA> </TEXTAREA>, y sus parmetros:
name = campo Nombre del campo. cols = num. Nmero de columnas de texto visibles. rows = num. Nmero de filas de texto visibles. wrap = VIRTUAL / PHYSICAL Justifica el texto automticamente en el interior de la caja. La opcin PHYSICAL enva las lneas de texto separadas en lneas fsicas. La opcin VIRTUAL enva todo el texto seguido.
Veamos a continuacin un ejemplo de formulario utilizando todas las formas de introduccin de datos.
<FORM action = "mailto: alguien@pangea.org" method = post > Tu Nombre:<INPUT type = text name = nombre size = 30 > Tu Clave: <INPUT type = password name = clave size = 8 > <P> Archivos a Enviar: <INPUT type = checkbox name = archivo value = "Manual" > Manual de Html <INPUT type = checkbox name = archivo value ="Mapthis" > Programa Mapthis <INPUT type = checkbox name = archivo value ="Help" > Archivo de Ayuda <P> Tu Edad : <INPUT type = radio name = edad value = "-20" > Menos de 20 aos <INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 aos <INPUT type = radio name = edad value = "+40" > Ms de 40 aos <P>
<INPUT type = hidden name = lugar value = "pagina personal" > Como encontraste mi pgina : <SELECT name = donde > <OPTION>De casualidad <OPTION>Por el buscador Ole <OPTION>Por el buscador Yahoo <OPTION>Me la comentaron </SELECT> <P> Tus Comentarios: <BR> <TEXTAREA name = comentario rows = 5 cols = 40 wrap = virtual ></TEXTAREA> <P> <INPUT type = submit value = "Enviar" > <INPUT type = reset value = "Borrar" > </FORM>
Ahora veamos el efecto producido en la pgina Web:

Tu Nombre: Tu Clave:
Archivos a Enviar: Manual de Html Programa Mapthis Archivo de Ayuda Tu Edad: Menos de 20 aos Entre 20 y 40 aos Ms de 40 aos Como encontraste mi pgina: Tus Comentarios:
Si rellenas este FORM y pulsas sobre el botn Enviar, (estando conectado a Internet), se generar un mensaje de correo a mi direccin de correo. Si pulsas el botn Borrar se borrarn los datos que hayas introducido en el Formulario. El texto que se recibira por correo electrnico sera parecido a este:
nombre=Pedro+Perez &clave=12345678 &archivo=Manual &archivo=Mapthis &edad=20-40 &lugar=pagina+personal &donde=Por+el+buscador+Ole &comentario%94= Espero+que+me+mandes+los%0D %0Aficheros+antes+del+martes%0D%0A%0D%0AS aludos.%0D%0A
Podemos observar que en el correo se separan las variables con el smbolo &, los espacios se sustituyen por el signo + y se representan los cdigos de retorno de carro y avance de lnea del campo de texto con los caracteres %0D y %0A respectivamente. Si en vez de enviar estas variables por correo electrnico, fuesen enviadas a un programa (CGI), este programa podra tratarlas y dar como respuesta una nueva pgina Web.
Otros trucos para las pginas HTML

Existen diferentes trucos para hacer nuestras pginas Web ms atractivas. En la mayora de los casos no se trata de directivas de HTML pero su uso permitir conseguir mejores resultados estticos en nuestras pginas Web.
Gifs Animados.
Un Gif animado es un grfico del tipo GIF 89a que da la impresin de animacin. Para conseguir este efecto se deben crear por separado los grficos GIF que componen la secuencia de la animacin. Una vez hecho esto utilizaremos un programa para "fundir" todos estos grficos en uno solo. Al mostrar este grfico en nuestra pgina Web, el visor mostrar la secuencia de todos los grficos individuales de forma continua, con lo que dar el aspecto de animacin que buscamos. Uno de los programas que permite crear Gifs animados es el GIF CONSTRUCTION SET desarrollado por Alchemy MindWorks. Asimismo existe una URL donde se pueden "enviar" la secuencia de gifs estticos y nos devuelve el gif animado correspondiente. La URL es http://www.vrl.com/Imaging/index.html.
A continuacin podemos ver un gif animado. Si tu visor no reconoce esta caracterstica vers el grfico esttico.
Gifs Transparentes
Un Gif transparente es un grfico del tipo GIF 89a en el cual se define su color de fondo como transparente. Con esto conseguimos el efecto de que el grfico se encuentre como "flotando" en nuestra pgina. Para crear Gifs con el fondo transparente podemos utilizar un programa freeware tal como Paint Shop Pro o LviewPro. De cualquier forma, los programas grficos recientes, como CorelDraw 6, Adobe Photoshop, ... permiten crear Gifs con colores transparentes.
Scripts
Un Script es un programa escrito en un lenguaje distinto al HTML que se puede incluir en una pgina Web "tal cual". Para incluir estos programas en una pgina Web se utiliza la directiva <SCRIPT> </SCRIPT>. Esta directiva tiene el parmetro language para indicar el lenguaje de programacin utilizado para el Script. El cdigo del programa debe "ocultarse" con las directivas de comentario de HTML  con el objeto de que no sean mostradas por los visores que no reconocen la directiva <SCRIPT>. Los scripts ms usados suelen estar escritos en lenguaje Javascript. Asimismo se podrn incluir con esta directiva programas escritos en C++, Perl o Visual Basic. La inclusin de un Script en una pgina Web se hara de la siguiente forma:
<SCRIPT language = "JavaScript"> < !-instrucciones del programa ...... // --> </SCRIPT>
Para saber ms a cerca de JavaScript, puedes ir a la secccin de Javascript o a cualquiera de los scripts que encontrars en el ndice bajo ese ttulo.
Hojas de estilo
La directiva principal para manejar los estilos es <STYLE> y algunos de sus parmetros son los siguientes:
font-size: nmero unidad_de_medida Tamao de la letra. La unidad_de_medida puede ser puntos (pt), pulgadas (in), centmetros (cm), milmetros (mm), picas (pc) o pixels (px). font-family: "nombre" Indica el nombre de la fuente. Como con el atributo FACE de la directiva FONT, se pueden poner varias separadas por comas, cada una entre comillas si su nombre esta compuesto por varias palabras. Tambin se admiten nombres genricos: serif, sans-serif, monospace, ... font-weight: valor Indica el "peso" del texto. Podemos dar valor en texto o en nmeros, por ejemplo: bold, 100, 600, 800, .... font-style: valor Indica la apariencia del texto. Los valores posibles son: normal o italic. line-height: nmero Sirve para cambiar el interlineado, pudiendose especificar en las unidades de medida mencionadas anteriormente o como porcentaje de la altura del texto. color: nombre El color del texto. Se puede indicar el nombre del color o el valor RGB. text-decoration: valor Atributos especiales del texto. Los valores posibles son: none (ninguno), underline (subrayado), overline (subrayado superior), line-through (tachadura) y blink (parpada slo en Netscape). text-transformation: valor Convertir el texto. Los valores posibles son: uppercase (convierte todo a maysculas), lowercase (convierte todo a minsculas) y capitalize (la
primera letra de cada palabra en maysculas y las dems en minsculas). margin-left: nmero Margen izquierdo. Se puede indicar en las unidades de medida reconocidas. margin-right: nmero Margen derecho. Se puede indicar en las unidades de medida reconocidas. margin-top: nmero Margen superior. Se puede indicar en las unidades de medida reconocidas. text-align: valor Alineacin del texto. Los valores posibles son: left, right, center y justify. text-indent: nmero Indentacin del texto desde la izquierda. Se puede indicar en las unidades de medida reconocidas. letter-spacing: nmero Controla el espacio entre letras (kerning). Se utilizan valores decimales (usando como separador el punto) y en la unidad de medida em. Por ejemplo, 0.4em background: nombre Color del fondo. Admite 2 nombres: el del color (con nombre o valor RGB) y/o el nombre de un fichero de imagen. En el ltimo caso se utiliza la expresin "url(direccin_del _fichero)". Por ejemplo: background: white url(http://www.htmlhelp.com/foo.gif)
Las hojas de estilo pueden actuar a 3 niveles: sobre una directiva individual (por ejemplo: <P>) o una zona de texto, sobre todo un documento, o sobre un conjunto de documentos. En el caso de utilizar los 3 en un mismo documento, el orden de prevalencia ser directiva individual, documento, hoja de estilo en fichero.
Sobre una directiva individual
Introduciendo la directiva <STYLE> como un parmetro cuyo valor sean todos sus parmetros entre comillas y separados por ";". Por ejemplo: <P style="text-align:justify; text-indent:5cm">. Esto modificar este prrafo haciendo que est indentado 5 cms. y alineado por ambas partes.
Sobre una zona de texto

Otra forma de modificar el texto, no de una directiva, sino de una zona de texto, es utilizar la directiva <SPAN> y utilizar como parmetro la directiva <STYLE> como en el ejemplo anterior. Tambin se puede usar la directiva <DIV>, de la misma forma. La diferencia entre las dos, s que la segunda cree una lnea vaca por arriba y por abajo.
Sobre todo un documento

En este caso se definen los estilos en la cabecera del documento. Ya que esta directiva no es reconocida por todos los navegadores, es bueno (como hacemos con los scripts de Javascript) meter todo el texto de la directiva dentro de un comentario. Dentro de la directiva <STYLE> se pueden redefinir tantas directivas como se quiera. Por ejemplo: <STYLE type=text/css> <!-H1 {text-align:center; color: blue} P {text-align:justify; text-indent:5cm} --> </STYLE>
Sobre un conjunto de documentos

Vendra a ser como una plantilla de estilos, de manera que puede ser usada por varios documentos y que al modificarla permite cambiar la apariencia de todos ellos. Se trata de grabar los estilos en un archivo con extensin .css, en el que slo estar la directiva <STYLE>, sin necesidad de ninguna otra directiva. Para luego poder activar y usar esa hoja de estilos en una pgina habr que utilizar la directiva <LINK> dentro de la seccin <HEAD>. Los parmetros de la directiva <LINK> son:
rel: STYLESHEET href: direccin (URL del archivo donde est grabada la hoja de estilo) Por ejemplo: <LINK rel=STYLESHEET href=estilo.css type=text/css>
Variantes
Se pueden definir variantes de un estilo, es lo que conocemos por clases. Para ello a la hora de definir los estilos se crearn otros con el mismo nombre de la directiva que estamos redefiniendo, seguido de un punto y un "nombre". Por ejemplo: P {text-align:justify; text-indent:5cm} P.normal {text-align:justify; text-indent:0cm} Para hacer una variante para todos los estilos usaremos all.nombre_variante. Para utilizarla deberamos usar el parmetro class="nombre_variante". Por ejemplo:
<P class=normal>.
Pseudoclases y pseudoelementos
Se trata de clases y de elementos ya predifinidos por el navegador. Las pseudoclases actuales son:

:link: representa cmo se vern los enlaces :active: representa cmo se vern los enlaces activos :visited: representa cmo se vern los enlaces ya visitados
Actualmente, slo la etiqueta <A> puedo hacer uso de estas pseudoclases (a:link{definicion_de_estilo}. Si queremos definir variantes para las pseudoclases, la sintxis ser: A.clase:pseudoclase{definicion_de_estilo}. Por ejemplo: A.bonito:link{textdecoration:none}, para hacer vnculos sin subrayado. Los pseudoelementos actuales son (no se visualizan en navegadores 4, ni en Explorer 5):

:first-line: la primera lnea de un bloque de texto (un prrafo, un div, ...) :first-letter: la primera letra de un elemento texto. Por ejemplo, para hacer
capitulares.
La sintxis ser: elemento:pseudoelemento{definicion_de_estilo}. Por ejemplo: P:firstletter{font-size:200%}, para hacer que la primera letra de cada prrafo sea de tamao doble.
Agrupar
Por ltimo, se pueden agrupar distintos parmetros. Podramos hablar de tres casos: cuando son los mismos, los de texto y los de mrgenes.
Si se quiere aplicar los mismos atributos a varias directivas.

H1, H2, H3 {font size: 15pt; color: blue}
Agrupar parmetros de texto:

P {font-weight: bold; font-size: 13pt; line-height: 16pt; font-family: Arial, Helvetica;} P {font: bold 13pt/16pt Arial, Helvetica;}.
El orden es importante: font-weight y
font-style antes que los dems. Agrupar parmetros de mrgenes:

BODY {margin-top: 20 px; margin-right: 10px; margin-left: 10px} BODY {margin: 20px 10px 0px 10px}
El orden es importante: superior,
derecho, inferior e izquierdo.
Seleccin contextual
Se pueden definir estilos para directivas slo en determinadas circunstancias. Por ejemplo:
P B {text-align:justify; text-indent:5cm} OL LI {text-align:justify; text-indent:0cm}
En estos casos se aplicarn slo en las zonas de negrita de un prrafo, en el primer caso, y en elementos de una lista ordenada, en el segundo caso.
Directivas nuevas e identificadores

Tambin se pueden crear nuevas directivas individuales. La forma ser:
Para usar esta directiva utilizaremos el parmetro ID en cualquier directiva. Por ejemplo:
<P ID=nombre> #nombre {font-familiy:Arial}
Este sistema lo usaremos para definir capas en DHTML.
Hojas de Estilo
Propiedades de las hojas de estilo

Propiedades de fuente Propiedades de color y fondo Propiedades de texto Propiedades de bloque Propiedades de clasificacin Unidades de medida
Propiedades de Fuente

Familia de fuente Estilo de fuente Variante de fuente Peso de fuente Tamao de fuente Fuente
Familia de fuente
Sintxis: Posibles valores: font-family: nombre-familia | familia-genrica nombre-familia
Cualquier nombre de familia. Como no todos los ordenadores tendrn las familias instaladas, se pueden poner varias alternativas separadas por comas
familia-genrica

serif (P.ej., Times) sans-serif (P.ej., Arial or Helvetica) cursive (P.ej., Zapf-Chancery) fantasy (P.ej., Western) monospace (P.ej., ) C o u r
Valor por La fuente por defecto defecto: Se aplica a: Ejemplo: Todos los elementos
P { font-family: "New Century Schoolbook", Times, serif }
El tipo de fuente se puede cambiar tambin con la propiedad font .
Estilo de fuente
Sintxis: Posibles valores: Valor por defecto: Se aplica a: font-style: valor normal | italic | oblique normal
Todos los elementos
Ejemplo:
H1 { font-style: oblique } P { font-style: normal }
Variante de fuente
Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: font-variant: valor normal |
SMALL-CAPS
normal
Todos los elementos

SPAN { font-variant: small-caps }
Permite especificar si la letra se ver normal o en versalita. Versiones posteriores de CSS permiten otras variantes, como: condensed, expanded, small-caps numeral, ...
Peso de fuente
Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: font-weight: valor normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal
Todos los elementos

H1 { font-weight: 800 } P { font-weight: normal }
Tamao de fuente
Sintxis:
font-size: tamao-absoluto | tamao-relativo | longitud | porcentaje
Posibles valores:
tamao-absoluto
o
xx-small
| x-small | small |
medium | large |
x-
large | xx-large

tamao-relativo o larger | smaller longitud porcentaje (en relacin al elemento anterior)
Valor por defecto: Se aplica a: Ejemplo:
medium
Todos los elementos
H1 P LI
{ font-size: large } { font-size: 12pt } { font-size: 90% }
STRONG { font-size: larger }
Fuente
Sintxis: Posibles valores: Valor por defecto: font: valor font-style || font-variant || font-weight || font-size /line-height || font-family Ninguno
Se aplica a: Todos los elementos Ejemplo:

P { font: italic bold 12pt/14pt Times, serif }
especifica un prrafo en negrita, cursiva, Times con un tamao de 12 puntos y un interlineado de 14 puntos.
La propiedad font es una forma de abreviar propiedades de fuente y de interlineado.
Propiedades de color y fondo

Color Color de fondo Imagen de fondo Repetir fondo Fondos aadidos Posicin del fondo Fondos
Color
Sintxis: Valor por defecto: Se aplica a: Ejemplo: color: color Depende del navegador. Normalmente negro Todos los elementos
H1 { color: blue } H2 { color: #000080 } H3 { color: #0c0 }
Para evitar problemas conviene definirlo junto con el background.
Color de fondo
Sintxis: Posibles valores: Valor por defecto: Se aplica a: background-color: valor color | transparent
transparent
Todos los elementos
Ejemplo:
BODY { background-color: white } H1 { background-color: #000080 }
Imagen de fondo
Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: background-image: valor url | none
ninguno
Todos los elementos

BODY { background-image: url(/images/foo.gif) } P { background-image: url(http://www.htmlhelp.com/bg.png) }
Cuando se define una imagen de fondo conviene definir tambin un background color similar para que si se desactiva la carga de imgenes el texto siga pudindose leer.
Repetir fondo
Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: background-repeat: valor repeat | repeat-x | repeat-y | norepeat repeat
Todos los elementos

BODY { background: white url(candybar.gif); background-repeat: repeat-x }
repeat-x repetir la imagen slo horizontalmente, mientras que repeat-y lo har verticalmente.
Background Attachment
Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: background-attachment: valor scroll | fixed
scroll
Todos los elementos

BODY { background: white url(candybar.gif); background-attachment: fixed }
Posicin del fondo

Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: background-position: valor [porcentaje | longitud | top | center | bottom | left | center | right 0% 0%
Bloques y IMG, INPUT, TEXTAREA, SELECT, OBJECT
Fondo
Sintxis: background: valor
Posibles valores: Valor por defecto: Se aplica a: Ejemplo:
<background-color> || <background-image> || <backgroundrepeat> || <background-attachment> || <background-position> No definido
Todos los elementos
BODY TABLE
{ background: white url(http://www.htmlhelp.com/foo.gif) } { background: #0c0 url(leaves.jpg) no-repeat bottom right }
Propiedades de texto

Word Spacing Letter Spacing Text Decoration Vertical Alignment Text Transformation Text Alignment Text Indentation Line Height
Word Spacing
Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: word-spacing: valor normal | longitud
normal
Todos los elementos

P EM { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }
Permite cambiar la cantidad de separacin que habr entre las palabras. Se permiten valores negativos.
Espaciado entre letras

Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: letter-spacing: valor normal | longitud
normal
Todos los elementos

H1 { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }
Permite definir el espacio entre las letras (interletraje o kerning). Se permiten valores negativos
Decoracin de texto
Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: text-decoration: valor none || underline || overline || line-through || blink none
Todos los elementos

A:link, A:visited, A:active { text-decoration: none }
Alineacin vertical
Sintxis: Posibles valores: vertical-align: valor baseline | sub | super | top | text-top | middle | bottom | textbottom | porcentaje
baseline
Elementos de lnea (EM, A, IMG)

IMG.middle { vertical-align: middle } IMG { vertical-align: 50% }
.exponent { vertical-align: super }
Permite especificar como se alinearan los elementos con respecto a la lnea base del texto.
Transformaciones del texto

Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: text-transform: valor none | capitalize | UPPERCASE | lowercase none
Todos los elementos

H1 { text-transform: uppercase } H2 { text-transform: capitalize }
Alineacin de texto
Sintxis: Posibles valores: Valor por defecto: Se aplica a: text-align: valor left | right | center | justify
Determinado por el navegador Bloques
Ejemplo:
H1
{ text-align: center }
P.newspaper { text-align: justify }
Sangrados
Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: text-indent: valor longitud | porcentaje 0
Bloques
P { text-indent: 5em }
Interlineado
Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: line-height: valor normal | nmero | longitud | porcentaje normal
Todos los elementos Doble espacio

P { line-height: 200% }
Propiedades de bloques

Mrgenes Separaciones (Padding) Anchura de los bordes Border Color
Border Style Bordes Anchura Altura Alineacin Clear
Mrgenes
Sintxis: margin-top, margin-right, margin-top, margin-bottom, margin: valor longitud | porcentaje | auto
Posibles valores: Valor por defecto: Se aplica a: Ejemplo:
Todos los elementos

BODY { margin-top: 0 } BODY { margin: 5em } P /* todos los mrgenes de 5em */
{ margin: 2em 4em } /* margen superior e inferior de 2em, e izquierdo y derecho de 4em */
DIV { margin: 1em 2em 3em 4em } /* margen superior de 1em, derecho de 2em, inferior de 3em, e izquierdo de 4em */
La propiedad margin permite definir todos los margenes de una sola vez si se desean uniformes, o poner 4 valores separados por espacios que corresponderan a los mrgenes superior, derecho, inferior e izquierdo, respectivamente.
Separaciones
Sintxis: padding-top, padding-right, padding-bottom, padding-left, padding: valor [ longitud | porcentaje
Posibles valores:
Todos los elementos

BLOCKQUOTE { padding: 2em 4em 5em }
La propiedad padding permite definir el espacio que habr entre un elemento y su margen de una sola vez si se desean uniformes, o poner 4 valores separados por espacios que corresponderan a los espaciados superior, derecho, inferior e izquierdo, respectivamente.
Grosor de los bordes

Sintxis: border-top-width, border-right-width, border-bottom-width, border-left-width, border-width: valor thin | medium | thick | longitud
Posibles valores: Valor por defecto: Se aplica a:
No definidos
Todos los elementos
La propiedad border-width permite definir el grosor de los bordes de una sola vez si se desean uniformes, o poner 4 valores separados por espacios que corresponderan al grosor de los bordes superior, derecho, inferior e izquierdo, respectivamente.
Color del borde

Sintxis: Posibles valores: border-color: valor color
Valor por defecto: Se aplica a:
El valor de la propiedad color Todos los elementos
Estilo de los bordes

Sintxis: Posibles valores: border-style: valor none | dotted | dashed | solid | double | groove | ridge | inset | outset
Valor por defecto: Se aplica a:
none
Todos los elementos
Se puede dar un slo valor o 4. En este caso ltimo caso corresponderan a los lados superior, derecho, inferior e izquierdo, respectivamente.
Bordes
Sintxis: boder-top, border-right, border-bottom, border-left, border: valor <border-width> || <border-style> || <color>
Posibles valores:
No definido
Todos los elementos

H2 A:link { border: groove 3em } { border: solid blue }
A:visited { border: thin dotted #800080 } A:active { border: thick double red }
La propiedad border permite difinir de una sola vez varias caractersticas de los bordes. Si se quiere slo especificar los de un border habr que usar el respectivo.
Anchura
Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: width: valor longitud | porcentaje | auto auto
Elementos de bloque
INPUT.button { width: 10em }
Altura
Sintxis: Posibles valores: Valor por defecto: height: valor longitud | auto
auto
Se aplica a: Ejemplo:
Elementos de bloque
IMG.foo { width: 40px; height: 40px }
Alineacin
Sintxis: Posibles valores: Valor por defecto: Se aplica a: float: valor left | right | none
none
Todos los elementos
Esta propiedad permite hacer que el texto contornee el bloque.
Clear
Sintxis: Posibles valores: Valor por defecto: Se aplica a: clear: valor none | left | right | both none
Todos los elementos
Permite especificar donde se puede o no hacer flotar elementos. La zona especificada NO tendr elementos, se quedar vaca.
Propiedades de clasificacin
Display Whitespace List Style Type List Style Image List Style Position List Style
Display
Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: display: valor block | inline | list-item | none block
Todos los elementos No
Permite determinar como se ha de visualizar un elemento en la pgina. Da lugar a que el elemento aparezca en un nuevo cuadro, saltando de lnea (block), en la misma lnea (inline) o saltando y con un topo de lista (list-item).
Espacios en blanco
Sintxis: Posibles valores: Valor por defecto: Se aplica a: white-space: valor normal | pre | nowrap normal
Elementos de bloque
Determina la forma en que se tratar el espacio en blanco de una pgina. El valor normal hace que slo se vea un espacio entre palabras, pre muestra los
espacios tal como estn estn escritos, y nowrap no permite retorno automtico dentro de una etiqueta <BR>
Estilos de lista
Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: list-style-type: valor disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none disc
Elementos con el valor list-item en display value

LI.square { list-style-type: square } UL.plain { list-style-type: none } OL { list-style-type: upper-alpha } /* A B C D E etc. */ OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
Estilos de imgenes en las listas

Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: list-style-image: valor <url> | none
none

UL.check { list-style-image: url(/LI-markers/checkmark.gif) } UL LI.x { list-style-image: url(x.png) }
Posicin de estilos de lista

Sintxis: list-style-position: valor
Posibles valores: Valor por defecto: Se aplica a:
inside | outside
outside

Outside rendering: * List item 1 second line of list item Inside rendering: * List item 1 second line of list item
Ejemplo:
Estilos de lista
Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: list-style: valor <list-style-type> || <list-style-position> || <url>
No definido

LI.square { list-style: square inside } UL.plain { list-style: none } UL.check { list-style: url(/LI-markers/checkmark.gif) circle } OL { list-style: upper-alpha } OL OL { list-style: lower-roman inside }
Unidades

Unidades de Longitud Unidades de Porcentaje Unidades de Color URLs
Unidades de Longitud
El formato de una valor de longitud es un signo opcional + o -, seguido por un nmero y una unidad de medida sin espacios; P.ej., 1.3 em no es vlido, pero 1.3em s es vlido. Tipos de unidades relativas:

em (ems, la altura de la fuente, normalmente la altura de las maysculas) ex (la mitad de la altura de la fuente, normalmente la altura de la letra "x") px (pixels, relativos a la resolucin del lienzo)
Tipos de unidades absolutas:

in (pulgadas; 1in=2.54cm) cm (centimetros; 1cm=10mm) mm (milimetros) pt (puntos; 1pt=1/72in) pc (picas; 1pc=12pt)
Unidades de porcentaje
Un valor de porcentaje est formado por un signo opcional + o -, seguido por un nmero y % sin espacios; P.ej., 3%.
Unidades de color
Un valor de color es un nombre de color o una descripcin numrica RGB. Los 16 nombres de color de la paleta VGA de Windows, son: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Los valores numricos RGB se pueden dar de 4 maneras:

#rrggbb (P.ej., #00cc00) #rgb (P.ej., #0c0) rgb(x,x,x) donde x es un nmero entero entre 0 y 255 inclusive (P.ej., rgb(0,204,0)) rgb(y%,y%,y%) where y es un nmero entre 0.0 y 100.0 inclusive (P.ej., rgb(0%,80%,0%))
Los ejemplos anteriores especifican todos el mismo color.
URLs
Los valores de URL tienen la sintxis url(nombre), en donde nombre es la URL. La URL puede estar escrita, opcionalmente, entre comillas sencillas (') o dobles ("). Parntesis, comas, espacios, comillas sencillas o dobles que queramos que sean escritas literalmente dentro de la URL debern ser precedidas de una contrabarra. Ejemplos:
BODY { background: url(stripe.gif) } BODY { background: url(http://www.htmlhelp.com/stripe.gif) } BODY { background: url( stripe.gif ) } BODY { background: url("stripe.gif") } BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */

Tutorial HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial HTML

Uploaded by

Copyright:

Available Formats

INTRODUCCION A HTML

Estructura bsica de un documento HTML

Cabecera del documento

Ejemplo: <BASE href = "http://www.jet.es/jose/">

Cuerpo del documento

#00FF00 #0000FF #FFFFFF

Color Verde Color Azul Color Blanco

99FF33 66FFCC FFCCFF 99FF00 33FFFF FFCCCC 33FFCC

FloralWhite Gainsboro Azure MintCream PapayaWhip PaleGoldenrod Wheat

OldLace LightGrey AliceBlue Honeydew Ivory Khaki NavajoWhite

Bisque LightSteelBlue DodgerBlue MediumBlue

DarkTurquoise DarkCyan DimGray

MediumAquamarin LightSeaGreen e Teal LightSlateGray SlateGray DarkSlateGray Black Aquamarine

Juego de caracteres del Documento.

Espaciados y saltos de lnea

Esto es una frase

Atributos del Texto

Texto de prueba Texto de prueba Texto de prueba

Superndice <SUP></SUP> Subndice Centrado <SUB></SUB> <CENTER></CENTER>

Ejemplo <FONT size = +2 color = "#FF0000"> Texto de prueba </FONT>

Para sangrar el texto se <BLOCKQUOTE></BLOCKQUOTE>

Resultado Espaa Francia Italia Portugal

<UL type = square> <LI>Espaa <LI>Francia <LI>Italia <LI>Portugal </UL>

Espaa Francia Italia Portugal

Resultado Buscadores Google Yahoo Ole El ndice Links Pangea

<UL> <LI>Pangea <LI>PIE </UL> </UL>

<IMG src="caution.gif" align=MIDDLE>Atencin !!! <IMG src="caution.gif" align=BOTTOM>Atencin !!!

Lo mismo podramos hacer con un grfico. Ejemplo Se vera como

Extensiones del HTML

Embed y sonido de fondo en netscape

<FRAMESET cols = "120,*,100">

<FRAMESET cols = "15%,*"> <FRAMESET rows = 20%,*">

Manual Avanzado de HTML

Ahora veamos el efecto producido en la pgina Web:

Otros trucos para las pginas HTML

Sobre una directiva individual

Sobre una zona de texto

Sobre todo un documento

Sobre un conjunto de documentos

Si se quiere aplicar los mismos atributos a varias directivas.

Agrupar parmetros de texto:

El orden es importante: font-weight y

font-style antes que los dems. Agrupar parmetros de mrgenes:

El orden es importante: superior,

derecho, inferior e izquierdo.

Directivas nuevas e identificadores

Este sistema lo usaremos para definir capas en DHTML.

Propiedades de las hojas de estilo

P { font-family: "New Century Schoolbook", Times, serif }

El tipo de fuente se puede cambiar tambin con la propiedad font .

Todos los elementos

H1 { font-style: oblique } P { font-style: normal }

Todos los elementos

Todos los elementos

font-size: tamao-absoluto | tamao-relativo | longitud | porcentaje

tamao-relativo o larger | smaller longitud porcentaje (en relacin al elemento anterior)

Valor por defecto: Se aplica a: Ejemplo:

{ font-size: large } { font-size: 12pt } { font-size: 90% }

STRONG { font-size: larger }

Se aplica a: Todos los elementos Ejemplo:

La propiedad font es una forma de abreviar propiedades de fuente y de interlineado.

Propiedades de color y fondo

Para evitar problemas conviene definirlo junto con el background.

Todos los elementos

<FRAMESET cols = "15%,"> <FRAMESET rows = 20%,">