2011

Taller Diseo pginas WEB Comunidad Educativa Tonall

[MANUAL DE PROGRAMACIN HTML]

Aprendamos a programar cdigos para poder dar una mejor vista a una pgina web.

Formato texto
Formato a nivel de bloques

Dando formato Estilos de prrafo Encabezados Estilos de texto Tipo de letra Otros elementos

Dando formato
Evidentemente en las pginas no todo el contenido es igual y por tanto no todo se ha de mostrar en la misma forma, por eso HTML nos permite modificar el aspecto del texto: podemos darle diferentes formatos, modificando desdel el aspecto de los caracteres (tipo de letra) hasta el color. Podemos formatear desde las letras una por una hasta bloques completos de texto.

Estilos de prrafo
Estos estilos o formatos actan a nivel de prrafo

Etiqueta
<P>

Significado
Sirve para delimitar un prrafo. Inserta una lnea en blanco antes del texto. Justificar el texto del prrafo a la izquierda (ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a ambos mrgenes (JUSTIFY html4 ) Permite centrar todo el bloque de texto encerrado.

Resultado
Soy un prrafo: fjate en los espacios de antes y de despus. Alineacin izquierda Texto centrado Alineacin derecha Texto justificado o sea, alineado a ambos lados sin dejar, escalones en el margen derecho. Alineacin por defecto Texto centrado

<p ALIGN=x> ... </p>

<CENTER> ... </CENTER> <PRE WIDTH=x> ... </PRE> <BLOCKQUOTE> ... </BLOCKQUOTE>

Representa el texto encerrado en ella con un tipo de letra de paso fijo. El parmetro WIDTH Estoy en paso fijo especifica el nmero mximo de caracteres en una lnea. Mete sangras de prrafo tanto a derecha como a izquierda. Suele usarse como tabulador Si quieres ver el texto indentado por ambos mrgenes usa el Blockquote.

Los encabezados
El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras o ttulos.

Etiqueta
<H1> ... </H1> <H2> ... </H2> <H3> ... </H3> <H4> ... </H4>

Resultado

Cabecera de nivel 1
Cabecera de nivel 2
Cabecera de nivel 3
Cabecera de nivel 4
Cabecera de nivel 6

<H5> ... </H5> Cabecera de nivel 5 <H6> ... </H6>

Actan a nivel de prrafo, es decir, el texto encerrado en <h1></h1> lleva una linea enblanco por delante y por detrs. Habitualmente se utilizan para destacar ttulos de los diferentes apartados o secciones de un texto. arriba

Cambiando el tipo de letra

Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar dentro de un prrafo.

Etiqueta
<B> ... </B> <I> ... </I> <U> ... </U> <S> ... </S> <TT> ... </TT> <SUP> ... </SUP> <SUB> ... </SUB> <BIG> ... </BIG>

Utilidad
Pone el texto en negrita. Representa el texto en cursiva. Para subrayar algo. Para tachar. Permite representar el texto en un tipo de letra de paso fijo. Letra superndice. Letra subndice. Incrementa el tamao del tipo de letra.

Resultado
Soy un texto negro como el tizn Estoy ladeado Como soy muy importante estoy subrayado A m, en cambio, nadie me quiere

No soy variable
E=mc2 ai,j=bi,j+1

Soy GRANDE
Cre ver un lindo gatito

<SMALL> ... </SMALL> Disminuye el tamao del tipo de letra.

Estilos de texto
Son formatos predefinidos aplicables a caracteres individuales (y a grupos por supuesto). Realmente no se usan demasiado salvo que se controlen mediante los estilos CSS.

Etiqueta
<CITE> ... </CITE> <CODE> ... </CODE> <STRONG> ... </STRONG> <EM> ... </EM> <KBD> ... </KBD> <VAR> ... </VAR> <SAMP> ... </SAMP> <ABBR> ... </ABBR>
Cdigo

Significado
Cita, por ejemplo de un texto

Efectos
Esta frase no es ma

int x=0;
Hay cosas importantes. Para poner nfasis El usuario debe teclear Multivac es el mejor. La variable x, definida anteriormente... Estoy en un literal La WWW usa el protocolo http

Fuerte, negrita. Enfasis. Teclado Representar variables de un cdigo. Para representar una serie de caracteres literalmente. Abreviaturas.

Otros elementos
Estas etiquetas realmente no son formato ni de prrafo ni de texto, pero hay que ponerlas en algn sitio:

Etiqueta Significado
<BR> <HR> <!-- ... -->
Barra horizontal. Comentarios.

Resultado

Cambio de lnea. Simple salto de linea

No se ve el contenido

Atributos del texto

Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias etiquetas. Algunas de ellas no son reconocidas por determinados navegadores de Internet, es por ello que segun el navegador que este vd. utilizando, ver el resultado correctamente o no.

Atributo Etiqueta Ejemplo Negrita <b></b> <b> Texto de prueba </b> Cursiva <i></i> <i> Texto de prueba </i> Teletype <tt></tt> <tt> Texto de prueba </tt> Subrayado <u></u> <u> Texto de prueba </u> Tachado <s></s> <s> Texto de prueba </s> Parpadeo <blink></blink> <blnk> Texto de prueba </blink> Superindice ^{Texto de prueba} Subindice  _{Texto de prueba} Centrado <center></center><center> Texto de prueba </center>
Por otro lado la etiqueta <font></font> nos permite variar el tamao, el color, y el tipo de letra de un texto determinado. Utiliza para ello los parmetros size , bgcolor y face . 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="codigo de color" Escribe el texto en el color cuyo codigo se especifica. face="nombre de font" Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el ordenador que "lee" la pagina se usara el font predeterminado del navegador.

Ejemplo <font size="+2" color="#FF0000" face="Arial" > Texto de prueba </font>

Existen otras etiquetas que realizan las mismas operaciones que las antes vistas en los atributos del texto.

Ejemplo <font size="+2" color="#FF0000" face="Arial"> Texto de prueba </font>

Para incluir comentarios en la pgina Web se utiliza la etiqueta <!-- -->. Ejemplo : <!-- Esto es un comentario sobre mi pagina Web -->

Los comentarios no seran mostrados por el navegador y son itiles para realizar anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una determinada parte del documento. Asimismo veremos ms adelante que la etiqueta de comentario nos ser de utilidad para incluir codigo JavaScript en nuestra pgina Web.

Enlaces web

Enlaces o vnculos La etiqueta <A> Las URLs Ancla

Enlaces
Las pginas web no son ms que un caso particular de documentos de hipertexto, es decir, documentos cuyo contenido no es solo el texto simple que podemos leer sino tambin el contenido de otras fuentes a las que accedemos desde el documento. En el caso de las pginas web estas otras fuentes pueden estar situadas en cualquier parte de la red, y a ellos se accede mediante los enlaces o links: unos elementos interactivos del documento que aparentemente son solo eso una palabra o un grfico que habitualmente destacan por su color o su forma. Es prcticamente imposible que una pgina web no posea uno de estos enlaces. Los enlaces que nos encontramos en cualquier pgina pueden ser de dos tipos: internos a la propia pgina o externos a otra pgina. La forma de construir unos y otros es muy similar como vers a continuacin.

La etiqueta <A>
La etiqueta <A></A> nos sirve para delimitar la zona de la pgina que constituye el enlace. Lo que est encerrado en esta etiqueta ser mostrado por el navegador de forma resaltada, bien sea por el color si es texto o por un borde si es una imagen (a menos que modifiquemos el formato), y si pulsamos con el cursor del ratn sobre esa zona el navegador se dirigir al lugar apuntado por ese enlace. El formato completo de esta etiqueta es el que sigue: <A HREF="direccin de destino" target="destino">Pulsar para saltar</A> La direccin de destino ser la pgina web especificada mediante una URL, en formato absoluto o relativo. En ambos casos el destino puede incluso ser un elemento concreto dentro de la pgina. En este caso se ha usado un texto pero igualmente podramos colocar una imagen. El atributo target es una manera de decirle al navegador en que ventana debe abrir esa nueva pgina. Por ahora veremos dos de sus valores posibles: _blank Muestra la nueva pgina en una ventana nueva y sin nombre del navegador. _self Muestra la nueva pgina en el marco donde est declarado el enlace. Este es el destino por defecto de cualqueir enlace dentro de una pgina En el apartado dedicado a los frames veremos algo ms de este parmetro.

Las URLs
Cualquier elemento conectado a la red internet se identifica por un conjunto de cuatro nmeros entre 0 y 255, algo as como 84.234.12.122, cualquier sitio de internetest identificado por esta direccin. Pero como quiera que recordar esos nmeros no es nada fcil existen unos servidores de nombre que transforman esas direcciones en nombres ms humanos como www.espaciolatino.com. A estas direcciones se les llama Universal Resource Locator, o URL, es la forma de localizar cualquier pgina en internet. En general tiene el siguiente formato: protocolo://mquina:puerto/ruta/fichero@usuario Donde protocolo puede ser uno de los siguientes:

http Es el protocolo para la transmisin de documentos HTML, es decir, el que habitualmente usamos para ver las pginas en nuestro navegador. https Es similar al anterior pero con la particularidad de que la informacin viaja codificada mediante tcnicas de encriptacin. ftp Es un protocolo para la transmisin de ficheros (File Transfer Protocol). Permite intercambiar ficheros con sitios en los que se ejecuten servidores ftp. Los navegadores actuales permiten acceder a estos servidores FTP, pero lo ms normal es usasr unos programas al efecto denominados clientes de FTP. mailto Otro protocolo para la transmisin de datos, pero en este caso a travs de servidores de correo. news Mediante este protocolo accedemos a los denominados grupos de noticias, listas de distribucin de mensajes relativos a temas concretos. Habitualmente se accede a estos servidores mediante el cliente de correo. telnet Es un terminal de acceso remoto en modo texto. Es un sistema bastante inseguro por lo que no es habitual en servidores donde la seguridad est bien pensada. Lo ms normal en nuestras pginas ser acceder a elementos de otros pginas y por tanto lo habitual ser usar URL del estilo http://servidor.dom/pgina.htm o similar. En un enlace podremos usar la URL como hemos escrito ms arriba, URL absoluta, pero tambin podremos usar formatos como /pagina.htm, parece que faltara la primera parte de la direccin verdad? Pues no, en estos casos el navegador completa esa parte con la correspondiente de la pgina en la que est el enlace, son las URL relativas. Por ejemplo si miras la URL de esta pgina vers que es http://www.espaciolatino.com/tutorhtml/tema6.html Pues bien si en esta pgina colocara un enlace en la forma <A href="tema3.htm">Tema 3</A> Esta direccin realmente apuntara a http://www.espaciolatino.com/tutorhtml/tema3.html Como ltimo detalle a tener en cuenta es el uso de la / como forma de referirse a la raiz del sitio. As este enlace <A href="/index.htm">Portada</A>

estara apuntando a http://www.espaciolatino.com/index.htm.

Anclas
Como dijimos, es posible acceder a una posicin dentro del documento HTML. Para ello lo primero que tenemos que hacer es colocar marcas de destino en el documento al que queremos acceder: <A NAME="ancla"> A estos elementos se les llama anclas. Su uso es muy simple: en una etiqueta de enlace colocamos el smbolo # seguido del nombre del ancla de esta manera: <A HREF="#ancla">Ancla en esta pgina</A> Al pulsar sobre este enlace se mostrar en la ventana la parte de la pgina actual que contiene el ancla. Si queremos acceder a un ancla en otra pgina basta indicarlo al final de su URL. Como en este ekemplo: <A HREF="enlaces.html#ancla">Ancla en la pgina enlaces.html</A>

Listas

El formato listas Listas desordenadas Listas ordenadas Listas de definiciones

El formato listas
El lenguaje HTML nos permite crear listas en las pginas web de una manera casi tan simple y efectiva como en un procesador de textos, para ello utiliza las etiquetas de listas, de las que existen varios tipos. Todas ellas se pueden anidar (meter unas dentro de otras) formando rboles ms o menos complejos. Todos los tipos siguen el mismo formato: <tipo_lista> <LI>Primer elemento <LI>Segundo elemento </tipo_lista>

tipo_lista puede ser una de las siguientes: UL, OL, DL.

Listas desordenadas
La etiqueta <UL> significa unordered list, lista desordenada, y se corresponde con las vietas en los procesadores de texto: son listas donde cada elemento est precedido de un smbolo como un putno o un disco. EL formato es el qeu sigue: <UL> <LI>Juan <LI>Luisa </UL> se ver como

Pedro

Juan Pedro Luisa

A partir del HTML 3.2 la etiqueta <UL> admite estos parmetros:

Parmetro
COMPACT

Significado
Indica al navegador que debe representar la lista de la manera ms compacta posible.

Resultado

Primer elemento Segundo elemento

TYPE="disc", "circle", "square"

Indica al navegador el dibujo que preceder a cada elemento de la lista. Para mayor flexibilidad se admite tambin como parmetro de <LI>.

Tipo disc Tipo circle Tipo square

Listas ordenadas
La etiqueta <OL> responde a Ordered List, lista ordenada, y nos permite presentar listas como esquemas numerados de un solo nivel, o sea, que cada elemento de la lsita lleva un nmero de orden. Por ejemplo, <OL> <LI>Primer elemento <LI>Segundo elemento </OL> se ver como 1. 2. Primer elemento Segundo elemento

El HTML 3.2 admite estos parmetros para la etiqueta <OL> :

Parmetro
COMPACT

Significado
Indica al navegador que debe representar la lista de la manera ms compacta posible.

Resultado
1. 2. Primer elemento Segundo elemento Tipo 1 Tipo a Tipo A Tipo i Tipo I Primer elemento Segundo elemento Primer elemento Segundo elemento Tercer elemento

TYPE="1", "a", "A", "i", "I"

Indica al navegador el tipo de numeracin que preceder a cada elemento de la lista. Para mayor flexibilidad se admite tambin como parmetro de <LI>.

1. b. C. iv. V. 3. 4.

START="num"

Indica al navegador el nmero por el que se empezar a contar los elementos de la lista.

1.

VALUE="num"

Atributo de <LI>, acta como START pero a partir de un elemento predeterminado.

4. 5.

Listas de definiciones
Este tipo de lista utiliza las etiquetas <DT>y <DD> en lugar de <LI>. En estas lista cada elemento tiene una entrada de texto indentada respecto a dicho elemento. Es como si tuvieramos una lista de conceptos y sus definiciones (el texto indentado). Para entenderlo lo mejor es verlas en marcha: <DL> <DT>HTML<DD>Es un lenguaje de definicin de pginas web. <DT>Java<DD>Es un lenguaje de programacin. </DL> se ver como HTML Es un lenguaje de definicin de pginas web. Java Es un lenguaje de programacin. La etiqueta <DL> slo admite como parmetro el ya conocido COMPACT, que tiene el mismo comportamiento que con los otros dos tipos de lista anteriores. Un elemento <DT> puede contener varios elementos <DD>.

Imgenes

Insertar imgenes Imgenes y enlaces Alineacin respecto al texto

Insertar imgenes
Una pgina web sin alguna imagen es como el mar sin sal. Para incluir grficos e imgenes en nuestras pginas utilizaremos la etiqueta <IMG SRC="fichero_grafico" ALT="descripcion" WIDTH=88 HEIGHT=31 BORDER=0> El parmetro SRC especifica la URL del fichero que contiene el grfico. Los formatos estndar en la red son el GIF, PNG y JPG. Si quieres saber ms sobre imgenes e internet debes dirigirte a esta seccin dedicada al tema en la gua de diseo. El parmetro ALT especifica el texto que se mostrar en lugar del grfico en aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de que el usuario los haya desactivado. Algunos navegadores lo muestran cuando pasamos el ratn por encima de la imagen. Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo siempre. De hecho, el estdar HTML 4.0 obliga a hacerlo. Su uso es adems muy interesante cara a los robots buscadores que de este atributo pueden sacar informacin del tema tratado en la pgina. Los atributos WIDTH y HEIGHT indican el ancho y alto del grfico en pixels. Su uso no es obligatorio pero si muy aconsejable para mejorar el tiempo de carga de la iamgen: el navegador sabe el espacio que ocupar la imagen y puede seguir colocando los otros elementos de la pgina mientras se termina de descargar la imagen. Por ltimo vemos el atributo BORDER que como podrs adivinar tan solo coloca el ancho del borde que rodea la imagen. Por defecto su valor es cero, salvo el caso que vemops en el siguiente apartado. Por ejemplo <img src="/imgs/im_crear/pubcorreo.gif" width="30" height="32" alt="correo">

Imgenes y enlaces
Recordars que al hablar de los enalces decamos que en el contenido de la etiqueta <A> poda ir texto o una imagen. En este caso el navegador destaca la imagen colocandole un borde del color que use para sealar los enlaces de texto. Algo bastante lgico pero que en la mayora de los casos queda poco esttico, afortunadamente podemos eliminar ese borde poniendo a 0 el atributo BORDER. <a <img alt="Tema </a> href="tema1.htm"> src="/imgs/im_crear/indice2.png" height="30">

1"

width="45"

Se ve as:

Sin embargo, <a href="tema1.htm"> <img alt="Tema 1" width="45" height="30" BORDER="0"> </a> Se ve as:

src="/imgs/im_crear/indice2.png"

Alineacin respecto al texto

HTML nos permite controlar la disposicin de las imgenes en la pgina con relacin al texto, para ello usamos el parmetro ALIGN :

ALIGN= TOP

Significado
Coloca el punto ms alto de la imagen coincidiendo con ms alto de la lnea de texto actual.

Muestra

Este es el texto

MIDDLE

Alinea el punto medio (en altura) de la imagen con la base del texto. Este es el texto

BOTTOM Alinea el punto ms bajo de la imagen con la base del texto.

Este es el texto Este es el texto y esta es otra lnea

LEFT

Coloca la imagen a la izquierda del texto.

RIGHT

Coloca la imagen a la derecha del texto.

Este es el texto y esta es otra lnea

Hay que aclarar que la base del texto es la lnea donde descansan casi todas las letras del alfabeto excepto algunas como la p, la g o la j.

Los formularios

Formularios Campos de texto Opciones Botones del formulario Marcas de verificacin Campos ocultos

Formularios
Las pginas webs no son solo permiten presentar documentos de forma ms o menos atractiva al destinatario final, sino que tambin proporcionan elementos para interactuar con l. De esta manera el usuario final puede enviar su opinin de la pgina al autor, o realizar una compra en lnea. Estos elementos se conocen como formularios y seguro que todos los habis visto y utilizado alguna vez. Por ejemplo este sencillo formulario Tu nombre:

Ests registrado? Si No
Enviar Borrar

<FORM ACTION="" METHOD="POST" name="formul"> Tu nombre:<BR> <INPUT NAME="nombre" TYPE="TEXT" SIZE="32"/><BR> &iquest;Est&aacute;s registrado?<br> <label><input type="radio" name="Si" value="1">Si</label><br> <label><input type="radio" name="Si" value="0">No</label><br><BR> <INPUT TYPE="Submit" VALUE="Enviar"> <input name="Reset" type="reset" id="Reset" value="Borrar"> </FORM> El formulario est formado por una serie de elementos (cajas de texto, casillas de verificacin, botones...) encerrados entre las etiquetas <FORM> </FORM>. Como vers en esta etiqueta existen varios parmetros como son: ACTION la accin que se ejecutar al pulsar el botn de enviar. Habitualmente ser una URL a un programa CGI encargado de procesar los datos del formulario. Puede ser tambin mailto: seguido de una direccin de correo electrnico, en este caso el formulario se enviar por correo, en cuyo es recomendable aadir el parmetro ENCTYPE="text/plain" para que el mensaje sea fcil de leer. METHOD indica como se enviarn losa datos del formulario al programa que los procese: POST de forma interna (oculta) y GET aadido a la direccin URL del programa. Si usas el formulario para un mailto: debes usr el mtodo POST NAME es el nombre que identifica al formulario, til si se usan scripts dentro de la pgina.

Cajas de texto
Los controles o cajas de texto permiten al usuario escribir texto en el formulario. Pueden ser cajas de una solo lnea o cuadros de texto con varias lneas. Las primeras usan la etiqueta <INPUT> y pueden ser de texto simple (se ve lo que escribimos) o de tipo password (lo que escribimos es visto como una serie de asteriscos).

<INPUT TYPE=TEXT> <INPUT TYPE=PASSWORD>

Ojo, el dato escrito en el segundo campo no se ve pero eso no quiere decir que est codificado en ninguna manera. Ambos tipos comparten todos sus atributos que son:

Parmetro
SIZE VALUE
Pero si necesitamos que <TEXTAREA></TEXTAREA>: el

Significado
Tamao en columnas de la caja de texto.

MAXLENGTH Nmero mximo de caracteres que se pueden teclear.

Texto por defecto que aparecer en el campo. usuario escriba ms llineas de texto pues usamos la etiqueta

<TEXTAREA>Comienza a escribir </TEXTAREA>

Si escribimos algun texto dentro de esta etiqueta, ese texto aparecer por defecto en ese area de texto. Admite estos parmetros:

Parmetro
ROWS COLS

Utilidad
Filas que ocupar la caja de texto. Columnas que ocupar la caja de texto.

Opciones
Para que el usuario pueda marcar una de entre varias opciones podemos usar un campo INPUT de tipo RADIO. En nuestro ejemplo lo hemos usado:

Si<INPUT NAME="Registrado" TYPE=RADIO VALUE="1"><BR> No<INPUT NAME="Registrado" TYPE=RADIO VALUE="0"><BR>

Si No

Fjate que ambos INPUT usan el mismo atribuyto NAME, de esa manera el navegador los reconoce como un juego de respuestas alternativas.

Parmetro
VALUE CHECKED

Significado
Este es el valor que asignar a la variable. Si lo indicamos en una de las opciones esta ser la que est activada por defecto.

Listas de opciones
Hay una alternativa al control de seleccin de alternativas: las listas desplegables. Mediante este control el usuasrio puede seleccionar una opcin de entre un grupo que aparece en una lista desplegable. La lista se encierra en etiquetas <SELECT></SELECT>, y las opciones se poenen en etiquetas <OPTION></OPTION>: <SELECT NAME="Idioma"> <OPTION>Espaol</OPTION> <OPTION>Ingls</OPTION> <OPTION>Francs</OPTION> <OPTION>Alemn</OPTION> </SELECT> Los parmetros que admite SELECT son las siguientes:

Espaol

Parmetro
SIZE MULTIPLE

Significado
El nmero de opciones que podremos ver. Si es mayor que 1 veremos una lista de seleccin con un scroll y, si no, veremos una lista desplegable. Si lo indicamos podremos elegir ms de una opcin, para ello el usuario utilizar la tecla CTRL y el botn activo del ratn.

Y OPTION estos:

Parmetro
VALUE SELECTED

Significado
Este es el valor que asignar a la variable. La opcin con esta propiedad ser la que aparezca seleccionada por defecto.

Botones del formulario

Existen dos clases e botones: uno que se utiliza para poner en marcha la operacin indicada por ACTION (botones submit) y otro que sirve para resetear el formulario borrando el contenido de todos los controles:

Enviar

<INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>

Restablecer

En ambos casos su puede usar el parmetro VALUE para el texto que aparece dentro del botn. El botn de submit puede ser una imagen, por ejemplo <input name="imageField" type="image" src="imgs/botonel.gif" width="85" height="46" border="0">

Que se vera Este botn actua como un botn tipo SUBMIT, pero enva con los datos del formulario las coordenadas X Y del punto de la imagen donde puls el usuario.

Marcas de verificacin
Son controles parecidos a los campos de opciones pero que no van agrupados, o sea no son excluyentes, Sirven para que el usuario coloque una marca de si o no (verdadero o falso, marcado o no marcado). Lo podremos conseguir por medio de controles de confirmacin:

<INPUT NAME="Opina" TYPE=CHECKBOX> Te gusta el curso?

Te gusta el curso?

Si queremos que el control est activado por defecto le aadiremos el parmetro CHECKED.

Campos ocultos
Mediante un formulario podemos tambin enviar datos al programa encargado de procesarlo. Esto se realiza mediante los llamados campos ocultos, que son campos INPUT de tipo HIDDEN, y se llaman as porque no se ven en la pgina web, o sea, el usuario no los ve a menos que se mete en la vista de cdigo de la pgina, digo esto poruqe no vayamos a pensar que con estos campos podemos pasar informacin privada mediante los formularios. El cdigo para este tipo de campos es algo como esto: <INPUT TYPE=HIDDEN NAME="Curso" VALUE="Javascript">

De esta manera si en un sitio tengo muchos formularios sabr que estos datos en concreto vienen de la pgina de Javascript. Su uso realmente no lo vers hasta que no escribas o utilices programas para gestionar los formularios.

Formularios avanzados

Controles avanzados para formularios Botones Etiquetas Agrupacin de elementos Desactivacin de elementos

Controles avanzados en formularios

Con lo que has visto en la seccin anterior de formularios podrs perfectamente incoiporar estos elementos de interaccn a tu pgina web, pero los navegadores modernos (MSIE 5+ y Netscape 6+) permiten el uso de algunas caractersticas extras aladidas por el estandard HTML 4.0, caractersticas que bsicamente mejoran la esttica y facilitan el uso de estos elementos.

Botones
Una importante mejora en el HTML 4 es el nuevo control <BUTTON> que permite enriquecer la etiqueta de texto que hasta ahora tenan los botones de formulario. Ahora estos elementos pueden tener cualquier contenido HTML, como por ejemplo imagen con un texto. POr ejemplo el siguiente cdigo <BUTTON TYPE="button"> Inicio <img src="imgs/im_crear/bolamas.gif" width="10" height="10"> </BUTTON> Los parmetros de dicha etiqueta son TYPE, defecto), RESET y BUTTON, NAME y VALUE. que

nicio

podr

tomar

los

valores SUBMIT (por

Etiquetas
Los controles tipo LABEL permiten asociar etiquetas a los controles de formulario. Es decir ahora el texto que suele acompaar a los campos que debe rellenar el usuario son solo eso texto, pero con esta etiqueta ese texto se convierte en un elemento activo que forma parte del campo y podemos seleccionar ste pulsando sobre la etiqueta. Observa el uso del atributo for usado para asociar la etiqueta al campo cuyo ID tenga el mismo valro que este for <INPUT ID="Curso" TYPE=CHECKBOX> <LABEL for="Curso"> Me gusta este curso </LABEL> Compara con este otro ejemplo aparentemente igual al anterior.

Me gusta este curso

<INPUT NAME="Curso" TYPE=CHECKBOX> Me gusta este curso/a

Me gusta este curso

En el primer caso el click sobre la etiqueta actua igual que sobre el control.

Agrupando elementos
HTML 4 nos presenta una forma sencilla de estructurar los formularios sin necesidad de acudir a las socorridas tablas. Ahora podemos agrupar visualmente varios controles encerrndolos dentro de la etiqueta FIELDSET, veremos que alrededor de ellos se ve un rectngulo con el ttulo que le demos mediante la etiqueta LEGEND. <FIELDSET> <LEGEND>Tus datos</LEGEND> <LABEL> Tus datosNombre: Nombre: <INPUT TYPE="text" name="nombre"> Edad: <br>Edad: <INPUT TYPE="text" name="edad"> </LABEL> </FIELDSET> La posicin del ttulo (LEGEND) puede controlarse usando el parmetro ALIGN, que por defecto es TOP (arriba), pero puede ser BOTTOM (abajo) a laLEFT (Izquierda) o RIGHT (derecha) .

Desactivando elementos
Todos los controles de un formulario se pueden desactivar, impidiendo as al usuario que los sobreescriba. Se seguirn mostrando en pantalla, aunque con un aspecto distinto para indicar que no son editables. Para ello slo tenemos que indicarle el parmetro DISABLED: <LABEL DISABLED>Origen: <INPUT TYPE=TEXT DISABLED> </LABEL>

Origen:

Mapas de imgenes

Mapas de imgenes Mapas lado cliente Usando los mapas

Mapas
Recordemos que los enlaces en las pginas web podan escribirse con un texto o con una imagen. Es decir podamos tener una imagen que al ser pulsada con el ratn nos llevaba a otra pgina. Pues bien un mapa de imagen es algo parecido pero en el que l imagen no tienen asociado un solo enlace sino varios: depende de que parte de la imagen pises para ir a uno u otro destino. Esto se puede hacer de dos maneras:

Gestionando el mapa en el navegador. Gestionando el mapa en el servidor.

Los ms utilizados sin duda actualmente son los primeros, los mapas del lado del cliente, pues no exigen ningn apoyo del servidor y por tanto los puede usar cualuier webmaster en su propia pgina.

Mapas lado cliente

Un mapa no es ms que una imagen en la que se definen zonas activas, o sea, zonas que al ser pulsadas con el ratn actan como un enlace y nos llevan a otras pginas. Su creacin tienen dos partes: una definir el mapa y otra asociar el mapa con una imagen: <MAP NAME="mapa_enlaces"> <AREA SHAPE=... COORDS=... ALT="Enlace a.."> ... </MAP> La descripcin del mapa es de lo ms simple: le damos nombre (para luego poderle asociar la imagen) y definimos las zonas activas (formas geomtricas como vers a continuacin):

Parmetro
SHAPE COORDS HREF NOHREF ALT

Significado
Define la forma de la zona: rectangular, circular o poligonal. Coordenadas (separadas por comas) que definen la zona. El nmero y significado de esas coordenadas depender de la forma. URL del enlace corespondiente a esta zona. Zona inactiva Texto alternativo, etiqueta idntica al ALT de IMG

Como podemos ver, para declarar correctamente una zona necesitamos conocer cmo se definen exactamente las formas y coordenadas:

SHAPE
Rectangular Circular Polgono irregular Toda la imagen

COORDENADAS
"x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la inferior derecha. "x,y,r" siendo (x,y) el centro del crculo y r el radio. "x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una esquina del polgono. La ltima pareja de coordenadas se unir a la primera para cerrar el polgono.

RECT CIRC POLY

DEFAULT No se necesitan

Usando los mapas

Una vez definido como es el mapa lo aisgnamos a una imagen: <IMG SRC=... USEMAP="#mapa_enlaces"> Siempre tenemos que aadir al comienzo del nombre de nuestro mapa una almohadilla (#). Vamos a ver un ejemplo: <MAP NAME="navegadores"> <AREA SHAPE=RECT COORDS="0,0,24,31" HREF="http://www.apache.org" ALT="Servidor Apache"> <AREA SHAPE=RECT COORDS="26,0,53,31" HREF="http://www.w3c.org" ALT="la W3C"> <AREA SHAPE=DEFAULT NOHREF ALT="por defecto"> </MAP> <IMG SRC="mapa.gif" WIDTH=198 HEIGHT=51 BORDER=0 USEMAP="#deinteres"> Hay que tener en cuenta que, cuando dos zonas se solapan, la que est declarada primero es la que tiene preferencia. Por eso declaramos al final una zona que no conduce a ningn URL por si el usuario pulsa fuera de las zonas activas.

Las tablas

Tablas Definicin Definir las filas Definir las celdas Ttulares

Tablas
La organizacin del texto en una pgina es posible gracias a las tablas. Muchas pginas web son como pginas de revistas, y la forma ms simple de emular las funciones de maquetacin son las tablas. Una tabla no es ms que una coleccin de listas y columnas a cuyas interseccinoes le vamos a llamar celdas, y es en esas celdas donde podmeos colocar textos o imgenes. Las tablas se pueden incluso anidar y las celdas se pueden agrupar unas con otras para lograr disposiciones de texto e imagen prcitcamente similares a las que se podran conseguir en pginas de revistas gracias a los programas de maquetacin.

Definir tablas
Para definir una tabla tan solo debemos definar las filas que la componen. Y dentro de estas las caractersticas de las celdas. Por ejemplo la siguiente tabla posee 2 filas (2 <TR></TR>) y 3 columnas (3 pares <TD></TD> en cada fila) as: <TABLE> <TR> <TD>1,1</TD> <TD>1,2</TD> <TD>1,3</TD> 1,1 1,2 1,3 </TR> <TR> 2,1 2,2 2,3 <TD>2,1</TD> <TD>2,2</TD> <TD>2,3</TD> </TR> </TABLE> Pero la definicin va ms all, podemos poner bordes, colores de fondo a las celdas, definir mrgenes en las celdas, aumentar o disminuir el espaciado entre celdas. Resumimos todo esto en la siguiente tabla de atributos:

WIDTH ALIGN BORDER CELLSPACING CELLPADDING

Anchura de la tabla. Puede ir en pixels o en porcentaje de la anchura total disponible. Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). Especifica el grosor del borde que se dibujar alrededor de las tabla y celdas.

BORDERCOLOR Define el color de los bordes de la tabla

Espacio entre celdas, en pixels. Borde interior de las celdas, en pixels.

Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1 WIDTH="50%" ALIGN=CENTER> veremos lo siguiente: 1,1 2,1 1,2 2,2 1,3 2,3

El contenido escrito son las coordenadas de la celda, as 1,2 indica que esa celda es la correspondiente a la fila 1 y la columna 2.

Definiendo las filas

La definicin de cada fila se inicia con la etiquete <TR> y finaliza con </TR>, entre ellas colocaremos las celdas. Cada etiqueta TR tiene los siguientes atributos: Alinea el contenido de las celdas de la fila horizontalmente a izquierda ( LEFT), derecha (RIGHT) o centro (CENTER). Alinea el contenido de las celdas de la fila verticalmente arriba ( TOP), abajo (BOTTOM) o centro (MIDDLE).

ALIGN VALIGN

Defiminiendo las celdas

Ya slo nos queda definir cada celda para lo que disponemos de las TD y TH. Esta ltima es una celda especial que se ver destacada, como un ttulo para la columna: en negrita y centrado. Ambas etiquetas admiten los siguientes atributos:

ALIGN VALIGN WIDTH

Alinea el contenido de la celda horizontalmente a izquierda ( LEFT), derecha (RIGHT) o centro (CENTER). Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE). Especifica la anchura de la celda. Tambin se puede especificar tanto en pixels como en porcentaje, teniendo en cuenta que, en este ltimo caso, ser un porcentaje respecto al ancho total de la tabla (no de la ventana del navegador). Impide que, en el interior de la celda, se rompa la lnea en varias lineas.

NOWRAP

COLSPAN Nmero de celdas de una fila agrupadas. ROWSPAN Nmero de celdas de la columna agrupadas.
Los dos ltimos parmetros se usan para fundir celdas de una misma fila o de una misma columna. Por ejemplo veamos una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo: <TABLE BORDER=1> <TR> <TD COLSPAN=2>1,1 y 1,2</TD> <TD>1,3</TD> </TR> <TR> <TD ROWSPAN=2>2,1 y 3,1</TD> <TD>2,2</TD> <TD>2,3</TD> </TR> <TR> <TD>3,2</TD>

1,1 y 1,2 2,1 y 3,1

1,3 2,2 2,3 3,2 3,3

<TD>3,3</TD> </TR> </TABLE> Si te fijas cuando una celda con un colspan = 2 equivale a dos celdas a la hora de calcular el nmero de celdas de la fila. Algo similar ocurre con el rowspan pero referido a celdas unidas en vertical.

Titulares
Ya hemos dicho que hay un tipo de celdas utilizable como encabezamiento o titular, pero la tabla al completo puede llevar un ttulo, que ir en una zona fuera de cualquier celda o fila. Esta es la etiqueta CAPTION. Su uso es muy simple como puedes ver en este ejemplo:

Nmeros <TABLE BORDER=1> <CAPTION> 1,1 y 1,2 1,3 Nmeros</CAPTION> 2,2 2,3 ... 2,1 y 3,1 </TABLE> 3,2 3,3
Con el parmetro ALIGN, podemos controlar que el ttulo aparezca arriba (por defecto TOP) o abajo de la tabla , con el valor BOTTOM.

Sonido

Esta pgina me suena Sonido manual Sonido de fondo

Esta pgina me suena

Siempre hemos oido que las pginas web y que internet se aprovecha de la tecnologa multimedia, que si puedes oir msica y ver vdeos. Pues bien el elnguaje HTML, repetimos, es un lenguaje par definir documentos de hipertexto y soporta por tanto elementos multimedia como puede ser sonido. Los navegadores mayoritarios son capaces de ejecutar piezas musicales desde una pgina web, algo de lo que algunos webmaster abusan despiadadamente. Hasta hace no mucho tiempo el colcoar una pieza de msica en una pgina se pagaba con tiempos de carga muy elevados (el navegador no solo tena que subir la pgina con sus imgnes y texto, sino tambin el archivo de sonido). Pero actualmente la extensin de las redes de alta velocidad ha casi eliminado este problema. Aunque si decides colocar msica en tu pgina piensa en que el visitante quizs no quiera oir msica o prefiera escuchar la radio o sus propios CD,s, por tanto dale siempre la oportunidad de hacer callar a la pgina. Los formatos de sonido que sern reproducidos por cualquier navegador son los WAV y MID. Aunque otros formatos tambin sern reproducidos previa carga del correspoindiente plugin, como Real Audio o Quicktime.

Sonido manual
Una forma muy simple de ejecutar un sonido es mediante un enlace que llame alk archivo de sonido, el sistema operativo llamar a la aplicacin asociada y ese sonido se escuchar. Pero se lanzar la aplicacin asociada. Por ejemplo: <A HREF="ringin.wav">El telfono?<A> No est mal, al menos el asunto suena. Pero claro con una aplicacin asociada de por medio.

Sonido de fondo
Pero hay otra manera: el sonido de fondo, un sonido que suena al cargar la pgina. El navegador de Microsoft, desde la versin 2.0, utilizaba la etiquea BGSOUND: <BGSOUND SRC="musica.mid"> Su parmetro SRC indicar el archivo a reproducir. Tambin podemos permitir que se repita un cierto nmero de veces mediante el parmetro. Si se indica LOOP="infinite", el archivo se reproducir indefinidamente, mientras estemos en la pgina. Para detener la msica o cambiar de melodia debamos hacer uso de Javascript.

Los exploradores actuales usan la etiqueta <EMBED>, que tiene los siguiente parmetros:

Parmetro
SRC WIDTH y HEIGHT LOOP="true" HIDDEN="true"

Utilidad
Contiene el nombre de archivo de sonido a reproducir Tamao de los controles del reproductor que aparece en la pgina.

AUTOSTART="true" Arranca automticamente la reproduccin.

Reproduce ininterrumpidamente el fichero hasta que salimos de la pgina. Oculta el reproductor.

Pero el problema del plugin vuelve a aparecer tambin con este mtodo, puede ocurrir que el ordenador cliente lance su aplicacin para hacer sonar el fichero cargado. Y como suena esto? pues este ejemplo os lo muestra.

Trucos HTML
Aqu pretendemos ofrecerte soluciones para problemas que suelen presentarse a la hora de crear una pgina web. Conocer todas las etiquetas del lenguaje HTML no siempre garantiza un uso ptimo. Esta es la razn de este apartado.

Flash al fondo de la pgina

Los objetos flash en las pginas web se empean en colocarse en primer plano con lo que ocultan mens desplegables y otros elementos de la pgina. Para evitar esto basta con aadir al objeto flash el argumento: <param name="WMODE" value="TRANSPARENT"> El objeto flash no ocultar los elementos dinmicos.

Esconder tu email
Existen robots que se dedican a recorrer las pginas web extrayendo las direcciones de correo, a las que luego inundarn con mensajes spam. Existe un truco muy sencillo para evitar esto sin dejar de mostrar nuestra direccin en la pgina: crear una imagen gif o jpg con nuestra direccin email. Quien desee enviarnos un email deber leer nuestra direccin y escribirla a mano en el mensaje creado con su programa de correo.

Celda como enlace

Una celda de una tabla puede convertirse en un enlace activo de la manera ms simple, basta con colocarla dentro de <a href> </a>. Ejemplo <table><tr><ahref="sitio"><td>enlace</td></a> <td>otra celda</td> As de fcil, ahora la celda completa es un enlace.

Dimensiones exactas
Para lograr que una fila o una columda tenga una altura o anchura exacta, o para separar dos elementos una distancia fija, utiliza una imagen gif transparente de un slo pixel. Luego asignale la anchura o altura que desees. Por ejemplo <table><tr><td><img src="punto.gif" height="5"></td></tr> Esa celda poseer una altura exacta de 5 pixels.

Caja de esquinas curvas

Puedes crear una caja de esquinas curvas usando el elemento fieldset de los formularios. Ejemplo <fieldset> contenido </fieldset> de la caja con esquinas curvas sin tablas!!!

Y no es necesario usar tablas.

Sonido de fondo
Se puede hacer que suene una msica mientras los visitantes visitan la Web, o bien colocar una meloda a modo de presentacin. Guarda el sonido en el directorio raz de tu servidor. el cdigo HTML es el que sigue: <BGSOUND SRC="sonido.mid" LOOP=none> <WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true"> Los sonidos en formato "midi" ocupan menos espacio y por tanto se cargan antes.

Archivos para descargar

Si queremos que los visitantes puedan descargar algn archivo solo debemos subir ese archivo a nuestro servidor e insertar en nuestra Web un enlace al mismo: <a href="archivo.exe">Descripcin del enlace </a> Ahora cuando el visitante pulse sobre ese enlace el navegador abre el dilogo de abrir o guardar el archivo. Lo habitual es usar arvhivos comprimidos en formato zip, de esta manera la descarga es ms rpida y se puede bajar cualquier tipo de archivo (previamente comprimido).

Listas
<UL> <OL> <LI>
Junto con encabezados y prrafos, son otro de los elementos HTML ms comunes. Pueden darse cinco tipos diferentes de listas, cada uno con tags distintas aunque con alguna en comn: 1. Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol> y cada elemento de la lista estar encabezado por la tag <li> que puede o no llevar la tag de cierre </li>. Es conveniente que cada elemento de la lista est en una lnea nueva aunque todo seguido consiga en la presentacin el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones. Listas con vietas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la lista, tambin estar encabezado por la tag <li>. El resultado es que el navegador inserta vietas (marcadores) delante de cada elemento. Listas de men y de directorio: Estn en desuso puesto que su resultado suele ser, prcticamente, idntico al de las listas con vietas. 1. Men: Englobadas por las tags <menu>.....</menu> y cada elemento encabezado por la tag <li>. 2. Directorio: Englobadas por las tags <dir>.....</dir> y cada elemento encabezado por la tag <li>. Listas de glosario: Cada elemento de la lista est compuesto por un trmino y una definicin y cada una de estas partes tiene su propia tag. Estas listas se engloban con las tags <dl>.....</dl>. Para el trmino se usa la tag <dt> y para la definicin la tag <dd>. Generalmente el navegador colocar trmino y definicin en dos lneas diferentes pero esto se puede evitar aadiendo a la tag de apertura el atributo compact: <dl compact>. Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarn todo el conjunto de las listas y las tags de las listas secundaras se cerraran antes de volver a la lista principal. Ahora quiz le empiece a convenir sangrar el propio cdigo conforme lo va escribiendo en HTML.

2.

3.

4.

5.

<HTML> <HEAD> <TITLE>Ejemplo 6</TITLE> </HEAD> <BODY> <H1>Listas</H1> Una lista ordenada <ol> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ol> <br><br> Una lista sin ordenar <ul> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ul> <br><br> Una lista de glosario <dl> <dt>T&eacute;mino 1</dt> <dd>Definici&oacute;n 1</dd> <dt>T&eacute;mino 2</dt>

<dd>Definici&oacute;n 2</dd> </dl> <br><br> Listas anidadas <ul> <li>Uno <ul> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ul> </li> <li>Dos</li> <li>Tres</li> </ul> </BODY> </HTML>

Estilos de caracter
<B> <U> <I>
Estos estilo son tags que afectan a palabras o carcteres dentro de otras entidades de HTML modificando el aspecto de ese texto para que sea diferente del texto que lo rodea. Existen dos tipos de estilos: 1. Estilos lgicos: Indican como se va a emplear el texto que realzamos, no el como se va a formatear. o <em>.....</em>: Indica que los carcteres estarn enfatizados de alguna manera, generalmente en cursiva aunque depender del navegador. o <strong>.....</strong>: Los carcteres tendrn mayor nfasis, generalmente en negrita. o <code>.....</code>: Muestra como una fuente monoespaciada, generalmente Courier. o <samp>.....</samp>: Muy similar a code. o <kdb>.....</kdb>: Texto que el usuario debe escribir. o <var>.....</var>:Nombre de una variable que deba ser reemplazada por su valor real. Generalmente en cursiva o subrayada. o <dfn>.....</dfn>:Se usa para resaltar una palabra que se va a definir. o <cite>.....</cite>: Se usa para citas cortas.

2.

o o o o

Estilos fsicos: Modifican la presentacin real del texto. <b>.....</b>: Pone el texto en negrita. <i>.....</i>: Pone el texto en cursiva. <tt>.....</tt>: Pone el texto en fuente monoespaciada. <u>.....</u>: Subraya el texto afectado.

<HTML> <HEAD> <TITLE>Ejemplo 7</TITLE> </HEAD> <BODY> <H1>Estilos de caracter</H1> Un ejemplo de texto de <EM>realzado</EM>.<br> Un ejemplo de texto de <STRONG>realzado</STRONG>.<br> Un ejemplo de texto de <CODE>realzado</CODE>.<br> Un ejemplo de texto de <SAMP>realzado</SAMP>.<br> Un ejemplo de texto de <KDB>realzado</KDB>.<br> Un ejemplo de texto de <VAR>realzado</VAR>.<br> Un ejemplo de texto de <DFN>realzado</DFN>.<br> Un ejemplo de texto de <CITE>realzado</CITE>.<br> <br> Un ejemplo de texto de <B>realzado</B>.<br> Un ejemplo de texto de <I>realzado</I>.<br> Un ejemplo de texto de <U>realzado</U>.<br> Un ejemplo de texto de <TT>realzado</TT>.<br> </BODY> </HTML>

Texto preformateado
<PRE>
Ya dijimos que HTML elimina cualquier espacio en blanco adicional que se inserte pero nos encontramos con una excepcin a esta regla cuando utilizamos las tags<pre>.....</pre>. Sin embargo esta tag convertir el texto afectado a fuente monoespaciada (posiblemente Courier). Esta tag se usaba para hacer tablas en versiones anteriores del lenguaje HTML ahora su utilidad puede reducirse a convertir a HTML, rpida y fcilmente, archivos de correo electrnico y publicaciones de grupos Usenet.
<HTML> <HEAD> <TITLE>Ejemplo 8</TITLE> </HEAD> <BODY> <H1>Texto preformateado</H1> Diferencia entre un texto normal y un texto preformateado. En el texto preformateado, se respetan los car&aacute;cteres y los espacios.<br> iiiiii<br> wwwwww<br> <PRE> Diferencia entre un texto normal y un texto preformateado. En el texto preformateado, se respetan los car&aacute;cteres y los espacios.<br> iiiiii<br> wwwwww<br> </PRE> </BODY> </HTML>

Saltos y lineas
<HR> <BR>
1. Lneas divisorias: Se crean con la tag <hr> que no tiene tag de cierre ni lleva texto asociado. Se puede especificar el ancho de la lnea con el siguiente atributo <hr width="80%">.

2. Saltos de lnea: La tag <br> inserta un salto de lnea donde se coloque. Puede colocar tantas como desee y se insertar un salto de lnea por cada una de ellas.
<HTML> <HEAD> <TITLE>Ejemplo 9</TITLE> </HEAD> <BODY> <H1>Saltos y lineas</H1> <HR> <HR width="80%"> <HR width="60%"> <HR width="40%"> <HR width="20%"> ---<br><br><br> ---</BODY> </HTML>

Tamaos y tipos de letra en HTML

Para definir distintos tamaos de letra, en HTML se utiliza el elemento lleno <Hx> </Hx> donde x es un nmero que puede variar entre 1 y 6, siendo 1 el tamao mayor. Se escribirn as: <H1> Texto de prueba (H1)</H1>. <H2> Texto de prueba (H2)</H2> <H3> Texto de prueba (H3)</H3> <H4> Texto de prueba (H4)</H4> <H5> Texto de prueba (H5)</H5> <H6> Texto de prueba (H6)</H6> y este sera el resultado:

Texto de prueba (H1)

Texto de prueba (H2)
Texto de prueba (H3)
Texto de prueba (H4)
Texto de prueba (H5)
Texto de prueba (H6)

No hay que olvidar poner el cierre </Hx> a cada elemento utilizado. Este tipo de elemento se suele utilizar para escribir encabezamientos, ya que despus del cierre automticamente el visualizador inserta un salto de prrafo. Por ejemplo: si escribes <H1> Texto en H1 </H1> <H3> Texto en H3 </H3> se ver:

Texto en H1
Texto en H3
Y no una cosa al lado de la otra, como cabra esperar. Este elemento admite un parmetro de alineacin. As, si escribes:

<H3 align=center> Texto en H3 </H3>

Texto en H3

Otra forma de cambiar los tamaos de letra es utilizar el elemento <FONT > con el atributo VALOR, que es un nmero entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notacin respecto a la anterior es que no se produce un salto de prrafo despus de cada cambio, por lo que pueden hacerse cosas como esta: <FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font> <FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font> <FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT> Dar como resultado:

AAA

AAAAAA

Se puede cambiar el tamao por defecto (3) de toda la pgina con el elemento <BASEFONT SIZE=valor>. El texto tomar el tamao indicado por valor y lo mantendr hasta que aparezca otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente. Tanto si se ha establecido un valor base como si se utiliza el valor por defecto, los tamaos tambin pueden indicarse de formarelativa, por lo que el valor puede ser positivo (+) o negativo (-) respecto al tamao base. Por ejemplo estos dos valores dan el mismo resultado: <FONT SIZE=5>ABcde</FONT> <FONT SIZE=+2>ABcde</FONT>

ABcde ABcde
Con la versin 3.0 de Netscape se ha implementado un nuevo atributo del elemento <FONT> que permite elegir tipos de letra entre los varios de que dispone por defecto Windows. Se trata del atributoFACE. Este atributo permite forzar el tipo de letra que el diseador de la pgina quiere que vea el cliente, sin importar el que por defecto tenga establecido el visualizador. Si escribes <FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT> <FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW ROMAN</FONT> <FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER NEW</FONT> <FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT> <FONT FACE="Verdana">Texto de prueba 12345 con tipo SMALL FONTS</FONT>

Se ver: Texto de prueba 12345 con tipo ARIAL Texto de prueba 12345 con tipo TIMES NEW ROMAN Texto de prueba 12345 con tipo COURIER NEW Texto de prueba 12345 con tipo COURIER Texto de prueba 12345 con tipo VERDANA

Por supuesto, este atributo es compatible con todos los dems ya conocidos, como color y tamao. Por ejemplo, si escribes <FONT FACE="impact" SIZE=6 COLOR="red"> Texto de prueba 12345 con tipo IMPACT</FONT> Se ver:

Texto de prueba 12345 con tipo IMPACT

Se pueden hacer todas la combinaciones que se quieran, pero hay que tener presente que si en la mquina cliente no est instalada una determinada fuente, sta no se ver y en su lugar aparecer la fuente por defecto del visualizador. No es interesante por tanto, definir tipos raros, que probablemente, no llegarn a verse nunca. Si a pesar de todo, se define un tipo del que se tienen dudas de que exista en el cliente, se pueden indicar otros tipos alternativos, de forma que el navegador si no tiene el primer tipo, utilizar el siguiente, y si tampoco lo tiene el prximo, etc. As: <FONT FACE="raro, courier" SIZE=4 COLOR="red"> Texto de prueba 12345 con tipos alternativos</FONT> Se ver:

Texto de prueba 12345 con tipos alternativos

Como puedes ver, se ha declarado como primer tipo de letra el llamado "raro" que, por supuesto, no existe, y el navegador pasa a utilizar el siguiente, "courier", que s es habitual.

Texto en color
Se puede controlar el color del texto utilizando el elemento <FONT> con el atributo COLOR="xxx", donde "xxx" es el nombre en ingls del color que se desea. Hay que tener presente que algunos no se vern o se vern mal si la mquina no soporta, por lo menos, 256 colores. Por supuesto, este efecto es anidable con el de tamao y todos los dems. Si escribes: <B><FONT COLOR="red">Texto ROJO </FONT> <br> <FONT COLOR="blue">Texto AZUL </FONT> <br> <FONT COLOR="navy">Texto AZUL MARINO </FONT> <br> <FONT COLOR="green">Texto VERDE </FONT> <br> <FONT COLOR="olive">Texto OLIVA </FONT> <br> <FONT COLOR="yellow">Texto AMARILLO </FONT> <br> <FONT COLOR="lime">Texto LIMA </FONT> <br> <FONT COLOR="magenta">Texto MAGENTA </FONT> <br> <FONT COLOR="purple">Texto PURPURA </FONT> <br>

<FONT COLOR="black">Texto NEGRO </FONT> <br> <FONT COLOR="gray">Texto GRIS </FONT> <br> <FONT COLOR="white">Texto BLANCO </FONT> <br> </B> Se ver:

Texto ROJO Texto AZUL Texto AZUL MARINO Texto VERDE Texto OLIVA Texto AMARILLO Texto LIMA Texto MAGENTA Texto PURPURA Texto NEGRO Texto GRIS Texto BLANCO
He aqu una combinacin de colores y tamaos: Si escribes: <FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT> <FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT> Resulta:

Esto es una Prueba

Los colores tambin se pueden definir en hexadecimal (por ejemplo el rojo es <FONT COLOR=#FF0000>). Cuando son colores bsicos, como los del ejemplo de arriba, es ms cmodo escribir el nombre aunque sea en ingls, pero cuando se trata de definir un color que "no tiene nombre" no hay ms remedio que usar la codificacin hexadecimal. En el ndice encontrars una tabla con los cdigos de colores.

Texto en movimiento
Este es un nuevo elemento que slo funciona con las ltimas versiones de los navegadores. Hasta su implementacin sus efectos solamente podan conseguirse con JavaScript. La ventaja de hacerlo con JavaScript es que siempre funciona, incluso con navegadores antiguos. Se trata del elemento <MARQUEE> </MARQUEE> que sirve para hacer que el contenido de un bloque se desplace horizontalmente a lo ancho del mismo. Adems de texto el bloque puede contener tambin imgenes. Tiene muchas parametrizaciones:

DIRECTION= Establece en que direccin se mueve el contenido del bloque en la pantalla. Puede tener dos valores: o LEFT izquierda (por defecto)

o RIGHT derecha BEHAVIOR= Determina cmo se mueve el contenido del bloque en la pantalla. Puede tener tres valores: o SCROLL har que el contenido del bloque aparezca por un extremo, desaparezca por el contrario y vuelva a apracer por donde comenz. o SLIDE (por defecto) hace que el contenido del bloque se deslice hacia el lado indicado por direction y se detenga al llegar al lado opuesto. Solamente volver a moverse si la pgina es cargada de nuevo. o ALTERNATE El contenido del bloque se mover alternativamente en una direccin y otra, comenzando por la indicada por direction LOOP=n donde n es un nmero que indica las veces que el movimiento programado se realizar. El valor INFINITE (por defecto) producir un bucle infinito. SCROLLDELAY=n donde n indica el tiempo de espera en milisegundos que se debe aplicar entre cada redibujado del bloque, es decir, la velocidad del movimiento. SCROLLAMOUNT=n donde n indica el nmero de pixels que se deben tomar entre cada redibujado del bloque. Por defecto, tomar el bloque entero. Este parmetro debe utilizarse con cuidado, ya que puede ser contradictorio con el anterior SCROLLDELAY. ALIGN= Es la alineacin del bloque en la pantalla. no funciona en todos los navegadores, por lo que es ms seguro indicar la alineacin fuera del elemento o aplicar instrucciones de estilo. Puede tener tres valores: o CENTER centro o LEFT izquierda (por defecto) o RIGHT derecha BGCOLOR=color donde color indica el color de fondo del bloque. El color se indica mediante su nombre en ingls, como "red", "blue", etc. Tambin puede hacerse por su cdigo RGB, pero esto no funciona igual en todos los navegadores, y en algunos, como FireFox no funciona. Con el IE y con Opera en lugar de indicar el color de la forma habitual: #FFFFFF hay que escribirlo precedido de la arroba: @FFFFFF. En el ndice encontrars una lista de los cdigos de colores. HSPACE=px donde px indica el nmero de pixels que tendrn los mrgenes izquierdo y derecho de fuera del bloque. Solamente funciona con el IE. VSPACE=px donde px indica el nmero de pixels que tendrn los mrgenes superior e inferior fuera del bloque. Solamente funciona con el IE. HEIGHT=px donde px indica el nmero de pixels que tendrel bloque de alto. Tambin puede indicarse en tantos por ciento respecto a la altura total de la pantalla. WIDTH=px donde px indica el nmero de pixels que tendrel bloque de ancho. Tambin puede indicarse en tantos por ciento respecto a la anchura total de la pantalla.

Por ejemplo:
Se escribe: <CENTER><MARQUEE BGCOLOR="cyan" HEIGHT="40" WIDTH="50%" DIRECTION="RIGHT" BEHAVIOR="ALTERNATE" SCROLLDELAY=400> texto1 <IMG SRC="bolaazul.gif"> texto2 </MARQUEE></CENTER>

Cdigos HTML bsicos para texto

Aqu una pequea lista de cdigos HTML que podemos usar para darle algn estilo a nuestros textos ya sea en los post o cuando dejemos un comentario.

Texto en negrita: <b>Aqu una palabra o frase</b> Ejemplo: Hola

Superndice: ^{Aqu una palabra o nmero} Ejemplo: El factor ax + bx + c = 0

2

Texto subrayado: <u>Aqu una palabra o frase</u> Ejemplo: Hola

Subndice: _{Aqu una palabra o nmero} Ejemplo: El factor X1

Texto en cursiva: <i>Aqu una palabra o frase</i> Ejemplo: Hola

Texto grande: <big>Aqu una palabra o frase</big> Ejemplo:

Grande

Texto pequeo: Texto tachado: <small>Aqu una palabra o frase</small> <strike>Aqu una palabra o frase</strike>

Ejemplo: Pequeo
Ejemplo: Hola

Crear Enlace
La caracterstica principal de una pgina Web es que podemos incluir Hiperenlaces. Un Hiperenlace 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 etiqueta <a></a> . El texto o imagen que se encuentre dentro de los lmites de esta etiqueta ser sensible, esto quiere decir que si pulsamos con el raton sobre l, se realzar la funcion de hiperenlace indicada por la etiqueta <a></a> .

Si el Hiperenlace 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 etiqueta tiene el parmetro href que indica el lugar a donde nos llevar el Hiperenlace si lo pulsamos.

Ejemplo <a href="http://www.descargabeta.com/" > Pulse para ir a la pgina de DescargaBeta </a>

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 enhttp://www.descargabeta.com/ Lo mismo podramos hacer con un grfico.

Se vera como Ejemplo 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 pagina situada en http://www.yahoo.com/. Un Hiperenlace tambin puede llevarnos a una zona de nuestra pgina. Para ello debemos marcar en nuestra pagina las diferentes secciones en las que se divide. Lo haremos con el parametro name .

Ejemplo: <a name="seccion1" ></a>

Esta instruccin marca el inicio de una seccin dentro de nuestra pgina. La seccion 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.descargabeta.com/mipagina.htm#seccion1">Primera Parte </a>

Un Hiperenlace puede hacerse a cualquier tipo de fichero. Con las etiquetas anteriores hemos visto como hacer enlaces a pginas Web o secciones dentro de una pgina web, pero podramos hacer un Hiperenlace a un grupo de noticias, o a otro servicio de Internet.

Ejemplo: <a href="news://www.descargabeta.com/">Noticias de actualidad </a>

Asimismo podemos hacer que el Hiperenlace de como resultado el envo de un correo electrnico a una direccin de correo determinada.

Ejemplo: <a href="mailto:usuario@descargabeta.com"> Envame tus sugerencias </a>

Tambin podemos realizar un Hiperenlace 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. <a href="manual.zip">Pulsa aqui para llevarte una copia del manual. </a>

Varios links en una misma imgen

Hoy es posible linkear solo una o varias parte de una misma imagen a diferentes destinos, gracias al tag MAP. Los mapas de imgenes convierten parte de la superficie de un .gif o .jpg en un link a otra direccin. La diferencia de enlazar la imagen a un url especfico es que estaramos tomando la totalidad de la superficie de la imagen, en cambio, utilizando las etiquetas MAP podemos especificar la forma, tamao y coordenadas sobre la imagen.

Crear las etiquetas no ser difcil, lo que puede llevar algo de tiempo es encontrar las coordenadas exactas. El cdigo sera el siguiente:

<img SRC="nombredelarchivo.jpg" USEMAP="#ejemplo" BORDER=0 height=XXX width=XXX> <MAP NAME="ejemplo">

Luego es necesario especificar la forma y tamao del sector a linkear. Las formas puede ser crculos (CIRCLE), rectngulo (RECT) o una polilnea (POLY), y se especifican en la etiqueta SHAPE.

Adems, hay que incluir las coordenadas de la superficie de trabajo, relativas de la esquina superior izquierda de las imgenes. En caso de un crculo sers tres nmeros, separados por comas y entre parntesis. Los dos primeros especifican las coordenadas X,Y y el tercero el radio. Para los rectngulos tendremos cuatro valores, los dos primeros marcan las coordenadas del vrtice superior izquierdo, y los restantes el ngulo opuesto. Y para las polilneas, se dan pares de valores por cada vrtice. Obviamente, las dos ultimas deben coincidir con las dos primeras, para cerrar la polilnea.

<AREA SHAPE=CIRCLE COORDS="x,x,x" HREF="http://..."> <AREA SHAPE=RECT COORDS="x,x,x,x" HREF="http://..."> <AREA SHAPE=POLY COORDS="x,x,x,x,x,x,x,x...." HREF="http://...">

Para no volverse monos buscando las coordenadas correctas, existes pequeos programas que lo hacen por nosotros. Solo se debe abrir la imagen y especificar las reas y los links, y por resultado el programa nos dar el cdigo html listo para incluir en la pgina.

Cdigo javascript para agregar a favoritos una pagina web

Si queremos facilitar la vuelta a nuestra pgina a quienes nos visiten, podemos hacer unlink que agregue a sus favoritos nuestra pgina, usando javascript. El cdigo es el siguiente: Agregar a fvoritos: <a href="javascript:window.external.AddFavorite('http://www.descargabeta.com','Mi web trata de...');"><b>Agrega esta web a tus favritos!</b></a>

Cdigo javascript para hacer pgina de inicio

Con un simple cdigo javascript podemos crear un link que agregue nuestra pgina como pgina de inicio de nuestro visitante. El cdigo es el siguiente: style="cursor: hand">Haznos tu pgina de inicio

Javascript para recomendar pgina

El siguiente javascript permite incorporar un enlace para que nuestros visitantes puedanrecomendar nuestra pgina a sus amigos (dentro del BODY): <script language="javascript"> // Los mejores trucos para windows en http://www.descargabeta.com/ function mailpage() { mail_str = "mailto:tunombre@descargabeta.com?subject=visita esta pgina. " document.title; mail_str = "&body=Hola. Te recomiendo que visites Infotrucos -- " document.title; mail_str = ". Enlace: " location.href; location.href = mail_str; } </script> <a HREF="javascript:mailpage()">Recomendar por e-mail esta pgina</a>

Como deshabilitar el botn derecho del mouse o ratn

Para anular el botn derecho del ratn, con el objetivo de que no puedan copiar directamente los contenidos de nuestra pgina web, tan slo hay que introducir el siguiente cdigo en el cuerpo de la pgina: <body oncontextmenu="return false" onselectstart="return false" ondragstart="return false"> Ejemplo: www.descargabeta.Com

cmo Poner Musica De Fondo?

1 abre una entrade en el blog en modo editar o usa una entrada que ya este en uso 2 cosigue la url de la cancion k kieres poner 3 verifica k esta url sea de rapido descargue 4 copia y pega este codigo en la entrada del blog <div></div><img height=0 loop=infinite dynsrc="Url De La Cancion" width=0>