Introduccin a HTML - http://desarrolloweb.com/manuales/21/

Introduccin a HTML

Introduccin al manual de HTML y al lenguaje de modelado de pginas web. Veremos qu es HTML y las primeras nociones que nos ayudarn a realizar las primeras pruebas de creacin de una pgina web sencilla.

1.- Prlogo al manual de HTMLA quin va dirigido este manual y las lecturas aconsejadas antes de abordarlo. Entrar2.- Introduccin al HTMLLas primeras cosas que debes saber sobre HTML: historia, objetivos y dems conocimientos donde sentar las bases del manual. Entrar3.- Sintaxis del HTMLDescripcin de la sintaxis con la que se trabaja en el lenguaje HTML, as como la estructura que tendr el documento bsico HTML. Entrar4.- Tu primera pginaVamos a ver cmo se hace una pgina muy sencilla en HTML, que sirva de prctica a los debutantes. EntrarFormatos bsicos con HTML

Cmo realizar el formato de textos que se colocan en una pgina web. Aprende a utilizar tus primeras etiquetas HTML y atributos para definir los contenidos de la pgina y aplicar un formato bsico.

5.- Formato de prrafos en HTMLCmo colocar prrafos y saltos de lnea en pginas web. Tambin vemos los encabezados como prrafos que sirven de titulo. EntrarA quin va dirigido este manual y las lecturas aconsejadas antes de abordarlo.

Por Rubn AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

Bienvenidos al manual de HTML de DesarrolloWeb. A travs de todos estos captulos vamos a descubrir el lenguaje utilizado para la creacin de pginas web: el Hyper Text Markup Language, ms conocido como HTML.

Puede que en un principio, el hecho de hablar de un lenguaje informtico pare los pies a ms de uno. No os asustis, el HTML no deja de ser ms que una forma un tanto peculiar de dar formato a los textos e imgenes que pretendemos ver por medio de un navegador.

Antes de entrar en materia, lo cual haremos de una forma directa y practica, os recomendamos fervorosamente la lectura previa de nuestro manual Publicar en Internet. A partir de esta gua, aprenderis los conceptos ms bsicos necesarios para creacin de un sitio web. Tambin os permitir acceder a este manual con unos conocimientos de base sobre HTML imprescindibles y os dejara bien claro lo que su conocimiento aporta con respecto al simple uso de editores de HTML. Adems, en dicho manual sobre la publicacin en Internet, explicamos tambin algo tan importante como qu hace falta para subir una pgina web realizada que tenemos en nuestro ordenador a un servidor de Internet. Si lo deseamos, lo podemos ver en vdeo en el Videotutorial sobre subir una web a Internet.

El pblico al que va enfocado este manual es a todos aquellos que, con conocimientos mnimos de informtica, desean hacer mundialmente pblico un mensaje, una idea o una informacin usando para ello el medio ms prctico, econmico y actual: Internet.

Lo que necesitis como base para llevar a buen trmino el aprendizaje (aparte de leer el manual Publicar en Internet) es:

Saber escribir con un teclado

Saber manejar un ratn

Tener ganas de aprender

Como podris ver, cualquier persona que sepa manejar un ordenador tiene los conocimientos bsicos para aprender HTML. Si le pones un poco de ganas y sigues este manual hasta el final, tendrs las siguientes habilidades o conocimientos:

Capacidad para crear y publicar vuestro propio sitio web con un mnimo de calidad.

Conocimientos de todo tipo sobre las tecnologas y herramientas empleadas en el mbito de la Red.

Posiblemente una aficin que puede convertirse en pasin y terminar, en algunos casos, siendo un vicio o un oficio.

Podis formular vuestras cuestiones y, esperamos que en un futuro ayudar a otros compaeros, enviando discusiones sobre HTML o bien en la lista de correo de DesarrolloWeb.com.

Para quien no sepa nada sobre crear una pgina web, y le gusta que le expliquen las cosas desde cero y de manera visual, recomendamos ver el vdeo donde mostramos el proceso de creacin de la primera pgina bsica. Adems, para complementar las explicaciones de este manual, tambin recomendamos el videotutorial de HTML.

Finalmente, antes de comenzar con el temario, queremos daros una referencia importante a la seccin HTML a fondo, donde publicamos todos los contenidos que tienen que ver con HTML y donde encontrars este y otros manuales relacionados con el lenguaje.

Pasemos pues sin ms prembulos a ver de qu se trata el HTML...

Las primeras cosas que debes saber sobre HTML: historia, objetivos y dems conocimientos donde sentar las bases del manual.

Por Rubn AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

HTML es el lenguaje con el que se escriben las pginas web. Las pginas web pueden ser vistas por el usuario mediante un tipo de aplicacin llamada navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las pginas webs al usuario, siendo hoy en da la interface ms extendida en la red.

Este lenguaje nos permite aglutinar textos, sonidos e imgenes y combinarlos a nuestro gusto. Adems, y es aqu donde reside su ventaja con respecto a libros o revistas, el HTML nos permite la introduccin de referencias a otras pginas por medio de los enlaces hipertexto.

El HTML se cre en un principio con objetivos divulgativos. No se pens que la web llegara a ser un rea de ocio con carcter multimedia, de modo que, el HTML se cre sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizaran en un futuro. Sin embargo, pese a esta deficiente planificacin, si que se han ido incorporando modificaciones con el tiempo, estos son los estndares del HTML. Numerosos estndares se han presentado ya. El HTML 4.01 es el ltimo estndar a septiembre de 2001.

Esta evolucin tan anrquica del HTML ha supuesto toda una seria de inconvenientes y deficiencias que han debido ser superados con la introduccin de otras tecnologas accesorias capaces de organizar, optimizar y automatizar el funcionamiento de las webs. Ejemplos que pueden sonaros son las CSS, JavaScript u otros. Veremos ms adelante en qu consisten algunas de ellas.

Otros de los problems que han acompaado al HTML es la diversidad de navegadores presentes en el mercado los cuales no son capaces de interpretar un mismo cdigo de una manera unificada. Esto obliga al webmster a, una vez creada su pgina, comprobar que esta puede ser leda satisfactoriamente por todos los navegadores, o al menos, los ms utilizados.

Adems del navegador necesario para ver los resultados de nuestro trabajo, necesitamos evidentemente otra herramienta capaz de crear la pgina en si. Un archivo HTML (una pgina) no es ms que un texto. Es por ello que para programar en HTML necesitamos un editor de textos.

Es recomendable usar el Bloc de notas que viene con windows, u otro editor de textos sencillo. Hay que tener cuidado con algunos editores ms complejos como Wordpad o Microsoft Word, pues colocan su propio cdigo especial al guardar las pginas y HTML es nicamente texto plano, con lo que podremos tener problemas.

Existen otro tipo de editores especficos para la creacin de pginas web los cuales ofrecen muchas facilidades que nos permiten aumentar nuestra productividad. No obstante, es aconsejable en un principio utilizar una herramienta lo ms sencilla posible para poder prestar la mxima atencin a nuestro cdigo y familiarizarnos lo antes posible con l. Siempre tendremos tiempo ms delante de pasarnos a editores ms verstiles con la consiguiente ganancia de tiempo.

Para tener ms claro todo el tema de editores y los tipos que existen, visita los artculos:

Editores de HTML.

Bloc de notas.

Tambin puedes acceder a descripciones editores ms complejos que el Block de Notas, pero ms potentes como Homesite o UltraEdit.

Es importante tener claro todo ello puesto que en funcin de vuestros objetivos puede que, ms que aprender HTML, resulte ms interesante aprender el uso de una aplicacin para la creacin de pginas.

As pues, una pgina es un archivo donde est contenido el cdigo HTML en forma de texto. Estos archivos tienen extensin .html o .htm (es indiferente cul utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos y guardaremos nuestros trabajos con extensin .html, por ejemplo mipgina.html

Consejo: Utiliza siempre la misma extensin en tus archivos HTML. Eso evitar que te confundas al escribir los nombres de tus archivos unas veces con .htm y otras con .html. Si trabajas con un equipo en un proyecto todava ms importante que os pongis todos de acuerdo en la extensin.

Descripcin de la sintaxis con la que se trabaja en el lenguaje HTML, as como la estructura que tendr el documento bsico HTML.

Por Rubn AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que llamamos etiqueta. A travs de las etiquetas vamos definiendo los elementos del documento, como enlaces, prrafos, imgenes, etc. As pues, un documento HTML estar constituido por texto y un conjunto de etiquetas para definir la forma con la que se tendr que presentar el texto y otros elementos en la pgina.

La etiqueta presenta frecuentemente dos partes:

Una apertura de forma general Un cierre de tipo

Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que caracterizan a esta etiqueta. As por ejemplo:

Las etiquetas y definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente cdigo:

Esto esta en negrita

El resultado Ser:

Esto esta en negrita

Las etiquetas y definen un prrafo. Si en nuestro documento HTML escribiramos:

Hola, estamos en el prrafo 1 Ahora hemos cambiado de prrafo

El resultado sera:

Hola, estamos en el prrafo 1

Ahora hemos cambiado de prrafo

Partes de un documento HTML

Adems de todo esto, un documento HTML ha de estar delimitado por la etiqueta y . Dentro de este documento, podemos asimismo distinguir dos partes principales:

El encabezado, delimitado por y donde colocaremos etiquetas de ndole informativo como por ejemplo el titulo de nuestra pgina.

El cuerpo, flanqueado por las etiquetas y , que ser donde colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas como las que hemos visto.

El resultado es un documento con la siguiente estructura:

Etiquetas y contenidos del encabezadoDatos que no aparecen en nuestra pgina pero que son importantes para catalogarla: Titulo, palabras clave,...

Etiquetas y contenidos del cuerpoParte del documento que ser mostrada por el navegador: Texto e imgenes

Las maysculas o minsculas son indiferentes al escribir etiquetas

A notar que las etiquetas pueden ser escritas con cualquier tipo de combinacin de maysculas y minsculas. , o son la misma etiqueta. Resulta sin embargo aconsejable acostumbrarse a escribirlas en minscula ya que otras tecnologas que pueden convivir con nuestro HTML (XML por ejemplo) no son tan permisivas y nunca viene mal coger buenas costumbres desde el principio para evitar fallos triviales en un futuro.

Vamos a ver cmo se hace una pgina muy sencilla en HTML, que sirva de prctica a los debutantes.

Por Rubn AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

Podemos ya con estos conocimientos, y alguno que otro ms, crear nuestra primera pgina. Para ello, abre tu editor de textos y copia y pega el siguiente texto en un nuevo documento.

Cocina Para Todos

Bienvenido,Ests en la pgina Comida para Todos.Aqu aprenders recetas fciles y deliciosas.

Ahora guarda ese archivo con extensin .html o .htm en tu disco duro. Para ello accedemos al men Archivo y seleccionamos la opcin Guardar como. En la ventana elegimos el directorio donde deseamos guardarlo y colocaremos su nombre, por ejemplo mi_pagina.html

Consejo: Utiliza nombres en tus archivos que tengan algunas normas bsicas para ahorrarte disgustos y lios.

Nuestro consejo es que no utilices acentos ni espacios ni otros caracteres raros. Tambin te ayudar escribir siempre las letras en minsculas.

Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlos descriptivos para que te aclaren lo que hay dentro. Algn caracter como el guin "-" o el guin bajo "_" te puede ayudar a separar las palabras. Por ejemplo quienes_somos.html

Con el documento HTML creado, podemos ver el resultado obtenido a partir de un navegador. Es conveniente, llegado a este punto, hacer hincapi en el hecho de que no todos los navegadores son idnticos. Desgraciadamente, los resultados de nuestro cdigo pueden cambiar de uno a otro por lo que resulta aconsejable visualizar la pgina en varios. Generalmente se usan Internet Explorer y Netscape como referencias ya que son los ms extendidos.

A decir verdad, en el momento que estas lneas son escritas, Internet Explorer acapara la inmensa mayora de usuarios (90% ms o menos) y Netscape esta relegado a un segundo plano. Esto no quiere decir que lo debemos dejar totalmente de lado ya que el 10% de visitas que puede proporcionarnos puede resultar muy importante para nosotros. Por otra parte, parece que se ha hecho publica la intencin de Netscape de desviar un poco su temtica de negocios hacia otros derroteros y abandonar esta llamada "lucha de navegadores" en la cual estaba recibiendo la peor parte.

Pues bien, volviendo al tema, una vez creado el archivo .html o .htm, podemos visualizar el resultado de nuestra labor abriendo dicha pgina con un navegador. Para hacerlo, la forma resulta diferente dependiendo del navegador:

Si estamos empleando el Explorer, hemos de ir al barra de men, elegir Archivo y seleccionar Abrir. Una ventana se abrir. Pulsamos sobre el botn Examinar y accederemos a una ventana a partir de la cual podremos movernos por el interior de nuestro disco duro hasta dar con el archivo que deseamos abrir.

La cosa no resulta ms difcil para Netscape. En este caso, nos dirigimos tambin a la barra de men principal y elegimos File y a continuacin Open File. La misma ventana de bsqueda nos permitir escudriar el contenido de nuestro PC hasta dar con el archivo buscado.

Nota: Tambin puedes abrir el archivo si accedes al directorio donde lo guardaste. En l podrs encontrar tu archivo HTML y vers que tiene como icono el logotipo de Netscape o el de Internet Explorer. Para abrirlo simplemente hacemos un doble click sobre l.

Una vez abierto el archivo podris ver vuestra primera pgina web. Algo sencillita pero por algo se empieza. Ya veris como en poco tiempo seremos capaces de mejorar sensiblemente.

Fijaos en la parte superior izquierda de la ventana del navegador. Podris comprobar la presencia del texto delimitado por la etiqueta . Esta es una de las funciones de esta etiqueta, cuyo principal cometido es el de servir de referencia en los motores de bsqueda como Altavista o Yahoo.

Por otro lado, los elementos que colocamos entre la etiqueta y se pueden ver en el espacio reservado para el cuerpo de la pgina.

Se puede ver la pgina del ejemplo en funcionamiento aqu.

Si ahora hacis click con el botn derecho sobre la pgina y elegs Ver cdigo fuente (o View page source) veris como en una ventana accesoria aparece el cdigo de nuestra pgina. Este recurso es de extremada importancia ya que nos permite ver el tipo de tcnicas empleadas por otros para la confeccin de sus pginas.

Con todo esto asimilado ya estamos en condiciones de adentrarnos un poco ms en la descripcin de algunas de las etiquetas ms empleadas del HTML.

Posible problema: Al utilizar el Block de Notas en Windows en ocasiones, aunque le digamos que es un archivo .html, el documento se guarda como si fuera un texto y no una pgina web. Lo que est pasando es que el Block de Notas tiene predeterminado guardar sus archivos con extensin .txt y en realidad lo que est guardando en el disco duro es mi_pagina.html.txt

Para conseguir tener el control de las extensiones en el block de notas y en Windows en general podemos acceder a MI-PC y en el men de Ver seleccionis "Opciones de carpeta". En la ventana que sale pulsamos en la solapa "Ver" y nos permite deseleccionar una caja de seleccin que pone algo como "Ocultar extensiones para los tipos de archivos conocidos". (As se hace en Win98, puede variar un poco en otras versiones de Windows.)

Con ello conseguiremos que se vea siempre la extensin del archivo con el que estamos trabajando y que el Block de Notas nos haga caso cuando le indicamos que grabe el archivo con otra extensin que no sea .txt

Cmo colocar prrafos y saltos de lnea en pginas web. Tambin vemos los encabezados como prrafos que sirven de titulo.

Por Rubn AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

En los captulos anteriores hemos presentado a titulo de ejemplo algunas etiquetas que permiten dar formato a nuestro texto. En este capitulo veremos con ms detalle las ms ampliamente utilizadas y ejemplificaremos algunas de ellas posteriormente.

Formatear un texto pasa por tareas tan evidentes como definir los prrafos, justificarlos, introducir vietas, numeraciones o bien poner en negrita, itlica...

Hemos visto que para definir los prrafos nos servimos de la etiqueta que introduce un salto y deja una lnea en blanco antes de continuar con el resto del documento.

Podemos tambin usar la etiqueta
, de la cual no existe su cierre correspondiente (), para realizar un simple retorno de carro con lo que no dejamos una lnea en blanco sino que solo cambiamos de lnea.

Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como para las imgenes, las veremos ms adelante. Esto ocurre porque un salto de lnea o una imagen no empiezan y acaban ms adelante sino que slo tienen presencia en un lugar puntual.

Podis comprobar que cambiar de lnea en nuestro documento HTML sin introducir alguna de estas u otras etiquetas no implica en absoluto un cambio de lnea en la pgina visualizada. En realidad el navegador introducir el texto y no cambiara de lnea a no ser que esta llegue a su fin o bien lo especifiquemos con la etiqueta correspondiente.

Los prrafos delimitados por etiquetas pueden ser fcilmente justificados a la izquierda, centro o derecha especificando dicha justificacin en el interior de la etiqueta por medio de un atributo align. Un atributo no es ms que un parmetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma ms personal. Veremos a lo largo de este manual cantidad de atributos muy tiles para todo tipo de etiquetas.

As, si desesemos introducir un texto alineado a la izquierda escribiramos:

Texto alineado a la izquierda

El resultado seria:

Texto alineado a la izquierda

Para una justificacin al centro:

Texto alineado al centro

que dara:

Texto alineado al centro

Para justificar a la derecha:

Texto alineado a la derecha

cuyo efecto seria:

Texto alineado a la derecha

Como veis, en cada caso el atributo align toma determinados valores que son escritos entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left.

Nota: Los atributos tienen sus valores indicados entre comillas ("), pero si no los indicamos entre comillas tambin funcionar en la mayora de los casos. Sin embargo, es aconsejable que pongamos siempre las comillas para acostumbrarnos a utilizarlas, por dar homogeneidad a nuestros cdigos y para evitar errores futuros en sistemas ms quisquillosos.

El atributo align no es exclusivo de la etiqueta . Otras etiquetas muy comunes, que veremos ms adelante, entre las cuales se introducen texto o imgenes, suelen hacer uso de este atributo de una forma habitual.

Imaginemos un texto relativamente largo donde todos los prrafos estn alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro cdigo y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta .

Esta etiqueta por si sola no sirve para nada. Tiene que estar acompaada del atributo align y lo que nos permite es alinear cualquier elemento (prrafo o imagen) de la manera que nosotros deseemos.

As, el cdigo:

Parrafo1 Parrafo3 Parrafo2

es equivalente a:

Parrafo1Parrafo2Parrafo3

Como hemos visto, la etiqueta marca divisiones en las que definimos un mismo tipo de alineado.

Ejemplo prctico:

Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que podis resolver en vuestros ordenadores. Simplemente queremos construir una pgina que tenga, por este orden:

2 Prrafos centrados3 Prrafos alineados a la derechaUn salto de lnea triple1 prrafo alineado a la izquierda

No vamos a escribir en esta ocasin el cdigo fuente del ejercicio. Podemos verlo en funcionamiento en nuestro navegador y en la ventana podemos obtener el cdigo fuente seleccionando en el men Ver la opcin Cdigo fuente.

Ver el ejercicio en marcha.

Encabezados

Existen otras etiquetas para definir prrafos especiales, formateados como ttulos. Son los encabezados o Header en ingls. Como decimos, son etiquetas que formatean el texto como un titular, para lo cual asignan un tamao mayor de letra y colocan el texto en negrita.

Hay varios tipos de encabezados, que se diferencian en el tamao de la letra que utilizan. La etiqueta en concreto es la , para los encabezados ms grandes, para los de segundo nivel y as hasta que es el encabezado ms pequeo.

Los encabezados implican tambin una separacin en prrafos, as que todo lo que escribamos dentro de y (o cualquier otro encabezado) se colocar en un prrafo independiente.

Podemos ver cmo se presentan algunos encabezados a continuacin.

Encabezado de nivel 1

Se ver de esta manera en la pgina:

Encabezado de nivel 1

Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 2 alineado al centro.

Encabezado de nivel 2

Se ver de esta manera en la pgina:

Encabezado de nivel 2

Otro ejercicio interesante es construir una pgina web que contenga todos los encabezados posibles. Se puede ver a continuacin.

Todos los encabezados

Encabezado de nivel 1Encabezado de nivel 2Encabezado de nivel 3Encabezado de nivel 4Encabezado de nivel 5Encabezado de nivel 6

Se puede ver el ejercicio en una pgina aparte.

Consejo: No debemos utilizar las etiquetas de encabezado para formatear el texto, es decir, si queremos colocar un tipo de letra ms grande y en negrita debemos utilizar las etiquetas que existen para ello (que veremos en seguida). Los encabezados son para colocar titulares en pginas web y es el navegador el responsable de formatear el texto de manera que parezca un titular. Cada navegador, pues, puede formatear el texto a su gusto con tal de que parezca un titular.

Vemos como colocar negritas, itlicas, subrayados, subndices y suprendices.

Por Rubn AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

Adems de todo lo relativo a la organizacin de los prrafos, uno de los aspectos primordiales del formateo de un texto es el de la propia letra. Resulta muy comn y prctico presentar texto resaltado en negrita, itlica y otros. Paralelamente el uso de ndices, subndices resulta vital para lapublicacin de textos cientficos. Todo esto y mucho ms es posible por medio del HTML a partir de multitud de etiquetas entre las cuales vamos a destacar algunas.

Negrita

Podemos escribir texto en negrita incluyndolo dentro de las etiquetas y (bold). Esta misma tarea es desempeada por y siendo ambas equivalentes. Nosotros nos inclinamos por la primeras por simple razon de esfuerzo.

Escribiendo un cdigo de este tipo:

Texto en negrita

Obtenemos este resultado:

Texto en negrita

Nota: Qu diferencia hay entre y ? Aunque las dos etiquetas hacen el mismo efecto, tienen una peculiaridad que las hace distintas. La etiqueta indica negrita, mientras que la etiqueta indica que se debe escribir resaltado. El HTML lo interpretan los navegadores segn su criterio, es por eso que las pginas se pueden ver de distinta manera en unos browsers y en otros. La etiqueta quiere decir "encabezado de nivel 1", es el navegador el responsable de formatear el texto de manera que parezca un encabezado de primer nivel. En la prctica los encabezados de Internet Explorer y Netscape son muy parecidos (tamao de letra grande y en negrita), pero otro navegador podra colocar los encabezados con subrayado si le pareciese oportuno. La diferencia entre y se podr entender ahora. Mientras que significa simplemente negrita y todos los navegadores la interpretarn como negrita, es una etiqueta que significa que se tiene que resaltar fuertemente el texto y cada navegador es el responsable de resaltarlo como desee. En la prctica coloca el texto en negrita, pero podra ser que un navegador decidiese resaltar colocando negrilla, subrayado y color rojo en el texto.ItlicaTambin en este caso existen dos posibilidades, una corta: e (italic) y otra un poco ms larga: y . En este manual, y en la mayora de las pginas que veris por ah, os encontraris con la primera forma sin duda ms sencilla a escribir y a acordarse.He aqu un ejemplo de texto en itlica:Texto en itlicaQue da el siguiente efecto:Texto en itlicaSubrayadoEl HTML nos propone tambin para el subrayado el par de etiquetas: y (underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha precaucin dado que los enlaces hipertexto van, a no ser que se indique lo contrario, subrayados con lo que podemos confundir al lector y apartarlo del verdadero inters de nuestro texto.Subndices y suprandicesEste tipo de formato resulta de extremada utilidad para textos cientficos. Las etiquetas empleadas son: y para los suprandices y para los subndicesAqu tenis un ejemplo:La 13CC3H4ClNOS es un heterociclo alergeno enriquecidoEl resultado:La 13CC3H4ClNOS es un heterociclo alergeno enriquecidoAnidar etiquetasTodas estas etiquetas y por supuesto el resto de las vistas y que veremos ms adelante pueden ser anidadas unas dentro de otras de manera a conseguir resultados diferentes. As, podemos sin ningn problema crear texto en negrita e itlica embebiendo una etiqueta dentro de la otra:Esto slo est en negrita y esto en negrita e itlicaEsto nos daria:Esto slo est en negrita y esto en negrita e itlicaConsejo: Cuando anides etiquetas HTML hazlo correctamente. Nos referimos a que si abres etiquetas dentro de otra ms principal, antes de cerrar la etiqueta principal cierres las etiquetas que hayas abierto dentro de ella. Debemos evitar cdigos como el siguiente: Esto est en negrita e itlicaEn favor de cdigos con etiquetas correctamente anidadas: Esto est en negrita e itlicaEsto es muy aconsejable, aunque los navegadores entiendan bien las etiquetas mal anidadas, por dos razones: 1. Sistemas como XML no son tan permisivos con estos errores y puede que en el futuro nuestras pginas no funcionen correcamente.2. A los navegadores les cuesta mucho tiempo de procesamiento resolver este tipo de errores, incluso ms que construir la propia pgina y debemos evitarles que sufran por una mala codificacin.Todo lo que se ha visto hasta el momento en el Manual de HTML se puede ver en un vdeo para aprender visualmente. Si te interesa puedes acceder al Videotutorial de HTML - Parte 1, documento bsico y formato de texto.Seguimos aprendiendo etiquetas que nos sirven para formatear el texto.Por Rubn AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.A pesar de que por razones de homogeneidad y sencillez de codigo este tipo de formatos son controlados actualmente por hojas de estilo en cascada (de las cuales ya tendremos tiempo de hablar), existe una forma clsica y directa de definir color tamao y tipo de letra de un texto determinado.Esto se hace a partir de la etiqueta y su cierre correspondiente. Dentro de esta etiqueta deberemos especificar los atributos correspondientes a cada uno de estos parmetros que deseamos definir. A continuacin os comentamos los atributos principales de esta etiqueta:Atributo faceDefine el tipo de letra. Este atributo es interpretado por versiones de Netscape a partir de la 3 y de MSIE 3 o superiores. Otros navegadores las ignoran completamente y muestran el texto con la fuente que utilizan.Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de la plataforma que utilice, puede no disponer de los mismos tipos de letra que nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el navegador se ver forzado a mostrar el texto con la fuente que utiliza por defecto (suele ser Times New Roman). Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobar que dispone del primer tipo enumerado y si no es as, pasar al segundo y as sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto. Veamos un ejemplo.Este texto tiene otra tipografaQue se visualizara as en una pgina web.Este texto tiene otra tipografaNota: Aqu tenemos un ejemplo de atributo cuyo valor debe estar limitado por comillas ("). Habamos dicho que las comillas eran opcionales en los atributos, sin embargo esto no es as siempre. Si el valor del atributo contiene espacios, como es el caso de: face="Comic Sans MS,arial,verdana"debemos colocar las comillas para limitarlo. En caso de no tener comillas face=Comic Sans MS,arial,verdanase entendera que face=Comic, pero no se tendra en cuenta todo lo que sigue, porque HTML no lo asociara al valor del atributo. En este caso HTML pensara que las siguientes palabras (despus del espacio) son otros atributos, pero como no los conoce como atributos simplemente los desestimar.Atributo sizeDefine el tamao de la letra. Este tamao puede ser absoluto o relativo.Si hablamos en trminos absolutos, existen 7 niveles de tamao distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra ms pequea o size="7" para la ms grande.Este texto es ms grandeQue se visualizara as en una pgina web.Este texto es ms grandePodemos asimismo modificar el tamao de nuestra letra con respecto al del texto mostrado precedentemente definiendo el nmero de niveles que queremos subir o bajar en esta escala de tamaos por medio de un signo + o -. De este modo, si definimos nuestro atributo como size="+1" lo que queremos decir es que aumentamos de un nivel el tamao de la letra. Si estabamos escribiendo previamente en 3, pasaremos automticamente a 4.Los tamaos reales que veremos en pantalla dependern de la definicin y del tamao de fuente elegido por el usuario en el navegador. Este tamao de fuente puede ser definido en el Explorer yendo al menu superior, Ver/Tamao de la fuente. En Netscape elegiremos View/Text Size. Esta flexibilidad puede en ms de una ocasin resultarnos embarazosa ya que en muchos casos desearemos que el tamao del texto permanezca constante para que ste quepa en un determinado espacio. Veremos en su momento que esta prefijacin del tamao puede ser llevada a cabo por las hojas de estilo en cascada.Atributo colorEl color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un nmero hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribucin del rojo, verde y azul al color en cuestin.Podis entender cmo funciona esta numeracin y cules son los colores que resultan ms compatibles a partir de este artculo:Los colores y HTML.Por otra parte, es posible definir de una manera inmediata algunos de los colores ms frecuentemente usados para los que se ha creado un nombre ms memotcnico:NombreColorAquaBlackBlueFuchsiaGrayGreenLimeMaroonNavyOlivePurpleRedSilverTealWhiteYellowEste texto est en rojoQue se visualizara as en una pgina web.Este texto est en rojoCon todo esto estamos ya en disposicin de crear un texto formateado de una forma realmente elaborada. Pongamos pues en prctica todo lo que hemos aprendido en estos captulos haciendo un ejercicio consistente en una pgina que tenga las siguientes caractersticas: Un titular con encabezado de nivel 1, en itlica y color verde oliva. Un segundo titular con encabezado de nivel 2, tambin de color verde oliva. Todo el texto de la pgina deber presentarse con una fuente distinta de la fuente por defecto. Por ejemplo "Comic Sans MS" y en caso de que sta no est en el sistema que se coloque la fuente "Arial".Se puede ver una posible solucin del ejercicio en este enlace. (Ver el cdigo fuente de la pgina para ver cmo lo hemos resuelto)En este reportaje tratamos de acercarte todos los detalles relativos al buen uso de colores en HTML. Colores compatibles con todos los sistemas.Por Miguel Angel AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.El la composicin de webs juegan un papel muy importante los colores. Se indican en valores RGB, es decir, que para conseguir un color cualquiera mezclaremos cantidades de Rojo, Verde y Azul.Los valores RBG se indican en numeracin hexadecimal, en base 16. (Los dgito pueden crecer hasta 16. Como no hay tantos dgitos numricos se utilizan las letras de la A a la F.0=04=48=8C=121=15=59=9D=132=26=6A=10E=143=37=7B=11F=15Para conseguir un color, mezclaremos valores de esta manera: RRGGBB Donde cada valor puede crecer desde 00 hasta FF.EjemploCmo se cambiara la fuente para escribir en rojo: RojoAl Atributo color le damos un valor RGB en formato hexadecimal. El caracter # se coloca al principio de la cadena.Otros coloresNaranja#FF8000Verde turquesa#339966Azul oscuro#000080Colores compatibles en todos los sistemasComo las pginas web las tienen que ver todos los usuarios, y los sistemas que utilizan para entrar son distintos, hay que utilizar colores compatibles con la paleta de todos ellos.La forma de conseguir esto es limitando nuestros colores alos que se pueden conseguir utilizando la siguiente norma:Utilizaremos siempreestos valores:00336699CCFFEjemplos: #3366FF #FF9900 #666666Se consiguen los colores siguientes:Por ltimo, te ofrecemos unos archivos con programillas en JavaScript que te pueden ayudar a encontrar los colores adecuados. Entro otros, podrs encontrar el script que genera la tabla de arriba.Colores.zip 16Kb Explicamos una serie de atributos que se aplican de manera global a toda la pgina, como el color de fondo el del texto, de los enlaces, mrgenes, etc.Por Miguel Angel AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.Las pginas HTML pueden construirse con variedad de atributos que le pueden dar un aspecto a la pgina muy personalizado. Podemos definir atributos como el color de fondo, el color del texto o de los enlaces. Estos atributos se definen en la etiqueta y, como decamos son generales a toda la pgina.Lo mejor para explicar su funcionamiento es verlos uno por uno.Atributos para fondosbgcolor: especificamos un color de fondo para la pgina. En el captulo anterior y en el taller de los colores y HTML hemos aprendido a construir cualquier color, con su nombre o su valor RGB. El color de fondo que podemos asignar con bgcolor es un color plano, es decir el mismo para toda la superficie del navegador.background: sirve para indicar la colocacin de una imagen como fondo de la pgina. La imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo de la pgina. En captulos ms adelante veremos como se insertan imgenes con HTML y los tipos de imgenes que se pueden utilizar.Ejemplo de fondoVamos a colocar esta imagen como fondo en la pgina. La imagen se llama fondo.jpg y suponemos que se encuentra en el mismo directorio que la pgina. En este caso se colocara la siguiente etiqueta Se puede ver el efecto de colocar ese fondo en una pgina a parte.Consejo: siempre que coloquemos una imagen de fondo, debemos poner tambin un color de fondo cercano al color de la imagen.Esto se debe a que, al colocar una imagen de fondo, el texto de la pgina debemos colocarlo en un color que contraste suficientemente con dicho fondo. Si el visitante no puede ver el fondo por cualquier cuestin (Por ejemplo tener deshabilitada la carga de imgenes) puede que el texto no contraste lo suficiente con el color de fondo por defecto de la web.Creo que lo mejor ser poner un ejemplo. Si la imagen de fondo es oscura, tendremos que poner un texto claro para que se pueda leer. Si el visitante que accede a la pgina no ve la imagen de fondo, le saldr el fondo por defecto, que generalmente es blanco, de modo que al tener un texto con color claro sobre un fondo blanco, nos pasar que no podremos leer el texto convenientemente.Ocurre parecido cuando se est cargando la pgina. Si todava no ha llegado a nuestro sistema la imagen de fondo, se ver el fondo que hayamos seleccionado con bgcolor y es interesante que sea parecido al color de la imagen para que se pueda leer el texto mientras se carga la imagen de fondo.Color del textotext: este atributo sirve para asignar el color del texto de la pgina. Por defecto es el negro.Adems del color del texto, tenemos tres atributos para asignar el color de los enlaces de la pgina. Ya debemos saber que los enlaces deben diferenciarse del resto del texto de la pgina para que los usuarios puedan identificarlos fcilmente. Para ello suelen aparecer subrayados y con un color ms vivo que el texto. Los tres atributos son los siguientes: link: el color de los enlaces que no han sido visitados. (por defecto es azul clarito)vlink: el color de los enlaces visitandos. La "v" viene justamente de la palabra visitado. Es el color que tendrn los enlaces que ya hemos visitado. Por defecto su color es morado. Este color debera ser un poco menos vivo que el color de los enlaces normales.alink: es el color de los enlaces activos. Un enlace est activo en el preciso instante que se pulsa. A veces es difcil darse cuenta cuando un enlace est activo porque en el momento en el que se activa es porque lo estamos pulsando y en ese caso el navegador abandonar la pgina rpidamente y no podremos ver el enlace activo ms que por unos instantes mnimos.Ejemplo de color del textoVamos a ver una pgina donde el color de fondo sea negro, y los colores del texto y los enlaces sean claros. Pondremos el color de texto balnco y los enlaces amarillos, ms resaltados los que no estn visitados y menos resaltados lo que ya estn visitados. Para ello escribiramos la etiqueta body as:El efecto se puede ver en una pgina a parte.MrgenesCon otros atributos de la etiqueta se pueden asignan espacios de margen en las pginas, lo que es muy til para eliminar los mrgenes en blanco que aparecen a los lados, arriba y debajo de la pgina. Estos atributos son distintos para Internet Explorer y para Netscape Navigator, por lo que debemos utilizarlos todos si queremos que todos los navegadores los interpreten perfectamente.leftmargin: para indicar el margen a los lados de la pgina. Vlido para iexplorer.topmargin: para indicar el margen arriba y debajo de la pgina. Para iexplorer.marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados)marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo)Tenemos un artculo sobre la utilizacin de estos atributos para hacer diseos avanzados con tablas en distintas definiciones de pantalla, que puede ser interesante de leer. Un ejemplo de pgina sin margen es la propia pgina de DesarrolloWeb.com, que ests visitando actualmente. (Por lo menos a la hora de escribir este artculo) Adems, vamos a ver otra pgina sin mrgenes, por si alguien necesita ver el ejemplo en estas lneas.Hola amigos

Gracias por visitarme!Esta pgina tiene el fondo blanco y dentro una tabla con el fondo rojo. En la pgina podremos ver que la tabla ocupa el espacio en la pgina sin dejar sitio para ningn tipo de margen. Puede verse el ejemplo en una pgina a parte.Todo lo que hemos visto hasta ahora en el Manual de HTML lo podemos encontrar en vdeo y en concreto las explicaciones de los ltimos artculos se han recogido en el Vdeotutorial de HTML - Fuentes, colores y estilos de BODY.Una referencia til, y una lista completa de los caracteres especiales del HTML.Por Miguel Angel AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.Una pgina web se ha de ver en paises distintos, que usan conjuntos de caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores del mundo, independientemente de su juego de caracteres. Este conjunto son los caracteres especiales. Cuando queremos poner uno de estos caracteres en una pgina, debemos sustituirlo por su cdigo.Por ejemplo, la "" (a minscula acentuada) se escribe "" de modo que la palabra pgina se escribira en una pgina HTML de este modo: pginaCaracteres especiales bsicosEn realidad estos caracteres se usan en HTML para no confundir un principio o final de etiqueta, unas comillas o un & con su correspondiente caracter.... para marcar las partes de un documento que se han agregado desde la versin pasada del documento. ... marca de manera similar un texto de un documento que se ha suprimido desde la versin anterior. ... Se utiliza para tener un mejor control sobre un el formato de las tablas especificando las caractersticas que comparten como: anchura, altura y alineacin.Cada tabla debe tener por lo menos un ; sin especificar ninguna caracterstica de < COLGROUP >. HTML 4.0 asume que una tabla contiene un solo grupo de columnas y que este contiene todas las columnas de una tabla.Por ejemplo, esto nos servira para crear una tabla con una celda en la que puede incluirse una descripcin y despus seguido de check boxes para seleccionar las opciones deseadas.Cdigo: ... De esta forma, proporciona un formato ms agradable a los check boxes sin necesidad de especificar, propiedades identicas para cada fila.La etiqueta de inicio < COLGROUP >, requiere otra de cierre.Con el que obtenemos: (en Nestcape slo se ver la tabla, no el botn).Explicacin de las nuevas etiquetas de HTML 4.0 para uso en formularios.Por Luciano MorenoAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.Este artculo tambin pertenece al tema de formularios en HTML, que ya venimos explicando desde hace varios artculos del Manual de HTML. Hasta el momento hemos visto la mayora de las etiquetas disponibles para hacer los formularios, al menos las ms utilizadas. Sin embargo, aun existen varias etiquetas que podramos necesitar algn da y que vamos a tratar en el presente artculo. Si eres nuevo en HTML quizs podras saltarte este artculo y pasar con los siguientes, puesto que ofrece explicaciones de etiquetas que probablemente no necesitars tan temprano. No queremos aburrirte contando cosas que no sean muy prcticas ni tampoco presionar con una excesiva informacin desde el inicio. En cualquier caso, tambin puedes leerlo e intentar practicar con estas etiquetas nuevas. ... Hasta ahora, no disponamos de ninguna manera de agrupar visualmente varios controles, si no echbamos mano de elementos que no son del formulario, como tablas o imgenes.Ahora, si encerramos una parte de un formulario dentro de la etiqueta FIELDSET se mostrara un rectngulo alrededor de los mismos. Adems, podemos indicar un ttulo por medio de la etiqueta LEGEND, que admite el parmetro align="left / center / right / top / bottom", lo que nos permite alinear el ttulo horizontal y verticalmente. La nica pega es que deberemos introducir el conjunto en una celda de tabla con un ancho determinado, ya que si no lo hacemos as el recuadro abarcara todo el ancho de pantalla disponible.Ejemplo.- (Slo para I. Explorer)Caja de textopon tu nombre:... Hasta no hace mucho los campos de entrada no estaban asociados a ellos mismos. Por ejemplo; a la hora de pulsar sobre un campo de confirmacin, no suceda nada! Pero ahora, s lo pulsamos el control cambiar de estado.Ejemplo:Le deseamos un feliz ao nuevo... A partir de la implementacin de los estndares HTML 4.0 contamos con varias etiquetas nuevas para construir formularios, siendo BUTTON una de ellas, bastante til por cierto. La pega es que las versiones de 4 de Nestcape se lanzaron antes de estas implementaciones, por lo que estas nuevas etiquetas slo se pueden visualizar correctamente con Internet Explorer 4 y superiores.Esta etiqueta proporciona un mtodo nico para la implementacin de cualquier tipo de botn de formulario. Sus principales atributos son: type= " tipo ", que puede tomar los ya conocidos valores submit (por defecto), reset y button. name= " nombre ", que asigna un nombre identificador nico al botn. value= " texto ", que define el texto que va a aparecer en el botn.La principal ventaja que aporta estas etiquetas es que ahora vamos a poder introducir dentro de ellas cualquier elemento de HTML, como imagenes y tablas.EjemplosunodostrescuatroEste es el primer captulo de un manul de el sonido en la web.Por Luciano MorenoAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.En su corta pero rpida vida, las pginas web han pasado a ser no ya unos meros documentos textuales a los que se puede acceder por Internet, sino unas verdaderas presentaciones multimedia, que combinan textos con imgenes, sonidos, videos y elementos de realidad virtual.Si el primer paso que se dio fue aadir imgenes a las pginas web, tanto estticas como dinmicas GIF animados), el siguiente paso consisti en introducir sonidos en las mismas, consiguiendo con ellos el apelativo de multimedia. Y nos referiremos en lo sucesivo cuando hablemos de sonido tanto a sonido sintetizado como a verdaderas grabaciones de audio, de calidad muy elevada.Ahora bien, aunque los navegadores han sido capaces de interpretar los ficheros de sonido adecuados desde hace ya algunas versiones, es cierto que la aplicacin de sonidos a las pginas web ha estado limitada desde siempre por el ancho de banda necesario en las conexiones a Internet para poder descargar de forma adecuada dichos ficheros, debido al tamao excesivo de los mismos.Otra de las limitaciones importantes que encontramos a la hora de incluir ficheros de sonido en nuestras pginas es la diferentes implementacin que hacen de ellos los navegadores web ms usados. En efecto, no slo deberemos usar etiquetas HTML distintas para Internet Explorer que para Netscape Navigator, sino que a veces la forma misma de interpretar el sonido puede diferir de uno a otro navegador.Por ltimo, hay que destacar que a la hora de incluir ficheros de audio en nuestras pginas debemos ser conscientes que muchos de los formatos usados, sobre todo en grabaciones de calidad, precisan un plugin o programa especial para su reproduccin en el navegador cliente. Y si es cierto que actualmente hay ciertos plugins se han transformado casi en un estndar en Internet (como el de Real Audio o el de MP3), hay otros posibles que no es normal tener instalados, por lo que si incluimos ficheros de esos tipos obligaremos al usuario a tener que instalarlos, cosa a la que suele ser reacio.Conceptos bsicos del sonido digital.Por Luciano MorenoAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.Vamos a estudiar algunos de los conceptos bsicos del sonido digital, aunque sin entrar en demasiadas consideraciones tcnicas. Para aquellos que deseen ms informacin, existen multitud de sitios web que estudian especficamente el sonido digital y el hardware necesario para su captura y reproduccin.El sonido tiene una naturaleza ondulante, es decir, se propaga en forma de ondas analgicas desde el objeto que lo produce. Las caractersticas propias de cualquier sonido (desde el producido por un automvil hasta una bella cancin), sus diferentes tonos y notas dependen precisamente de las propiedades fsicas de las ondas que lo forman.Para poder viajar desde el emisor al receptor, las ondas de sonido precisan de un medio fsico de soporte, ya sea el aire de la atmsfera, al agua, etc. Tanto es as que en el espacio exterior, donde no hay medio fsico soporte, no se pueden transmitir sonidos.Si representamos en un grfico un sonido complejo, obtendremos la siguiente figura:En la que podemos apreciar los diferentes valores de onda que va tomando el sonido.Todos sabemos que los equipos informticos no trabajan con datos analgicos, sino que lo hacen con datos digitales, formados por estados binarios. Por lo tanto, para representar un sonido, desde el punto de vista informtico, es preciso capturarlo en una naturaleza binaria, para lo que se hace un muestreo del mismo, tomando determinados valores de las ondas y representando dichos valores en formato digital. En cada captura obtendremos un punto de la grfica anterior.Pero, Cuntas muestras deberemos tomar?. Este es el verdadero meollo de la cuestin, ya que cuantas ms muestras tomemos, ms fiel ser el sonido capturado respecto al original, con lo que tendr ms calidad.Para medir el nmero de capturas utilizamos la frecuencia del muestreo. Como un Herzio es un ciclo por segundo, la frecuencia de una captura en Herzios representa el nmero de capturas que realizamos en un segundo. As, una frecuencia de muestreo de 20 KHz (20 Kilo Herzios = 20000 Herzios) realizar 20000 capturas de puntos cada segundo.El odo humano es captar de captar la asombrosa cantidad de 44000 sonidos por segundo, es decir, 44 KHz. Por lo tanto, para que un sonido digital tenga suficiente calidad deber estar basado en una frecuencia similar a sta. En general, el valor estndar de captura de sonidos de calidad es de 44,1 Khz (calidad CD), aunque hay capturadoras de sonido profesionales que llegan hasta los 100 Khz, con objeto de obtener un mayor nmero de puntos sobre la muestra, consiguiendo una calidad mxima.Otro concepto del que habris odo hablar en torno al sonido digital es el nmero de bits de una tarjeta de sonido. El origen de esta magnitud es que, a la hora de capturar el sonido, no slo es importante el nmero de muestreos tomados, sino tambin la cantidad de informacin capturada en cada uno de esos muestreos. Una vez capturado el sonido, para su posterior reproduccin en un equipo informtico es necesario mandar una serie de impulsos o posiciones a los altavoces para que creen el sonido a partir de ellos. Cmo?. Bien, produciendo a partir de esas posiciones movimientos de las membranas de los altavoces, movimientos que transforman de nuevo el sonido digital en analgico, estado en el que es capaz de viajar por el aire y producir los estmulos necesarios en nuestros tmpanos, con lo que somos capaces de percibir el sonido original. Cuantas ms posiciones de informacin se enven a los altavoces, mejor calidad tendr el sonido reproducido.Con estas bases, se define el nmero de bits de un sonido digital como el nmero de impulsos de informacin (posiciones) que se envan a los altavoces para su transformacin en ondas analgicas.Las tarjetas de sonido actuales trabajan normalmente con 8 bits de informacin, con los que se pueden obtener 28=256 posiciones (ceros y unos binarios), aunque hay algunas de mayor calidad que son capaces de trabajar con capturas de 16 bits, que originan 216 = 65536 posiciones de informacin.Como dato de referencia, los CDs actuales estn basados en sonido grabado a 44 Khz y con un tamao de muestra de 16 bits. Estas medidas se conocen con el nombre de sonido de calidad CD.Por ltimo, una vez que el sonido digital llega a nuestros odos, impactan contra los tmpanos, verdaderas membranas especializadas que vuelven a transformar las ondas analgicas en impulsos elctricos, que viajan hasta nuestro cerebro, donde son interpretados y producen las sensaciones auditivas que todos conocemos.Una excepcin al sonido anteriormente descrito, que podemos denominar "de datos de sonido", es el sonido sintetizado, en el que no se realiza ninguna captura de ondas sonoras reales, sino que es sonido totalmente digital, generado directamente en el equipo informtico por en reproductor digital conocido con el nombre de MIDI (Music Instrument Digital Interface). Cuando se desea reproducir una nota musical concreta, se enva un comando MIDI al chip sintetizador, que se encarga de traducir ese comando en una vibracin especial que produce la nota. Mediante este sistema es posible crear melodas bastante aceptables, aunque nunca tendrn la calidad ni riqueza de una onda sonora natural capturada. Cules son los ficheros que podemos ejecutar desde el navegador y cuales desde un programa especfico.Por Luciano MorenoAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.Formatos de sonidoA la hora de incluir ficheros de sonido en nuestras pginas web debemos distinguir entre los que pueden ser directamente ejecutados por el navegador y aquellos que deben ser abiertos por un programa propio, que deber tener el usuario instalado en su equipo para poder reproducir el fichero.De forma general, podemos incluir en la web los siguietes tipos de ficheros de audio. WAV (Wave form Audio File format): formato tpico de la casa Windows, de elevada calidad, usado en las grabaciones de CDs, que trabaja a 44 Khz y a 16 bits. Consta bsicamente de tres bloques: el de identificacin, el que especifica los parmetros del formato y el que contiene las muestras. Su principal inconveniente es el elevado peso de los ficheros, por lo que su uso queda limitado en Internet a la reproduccin de ruidos o frases cortas. La extensin de estos ficheros es .wav. Es soportado por Internet Explorer y Netscape 4x. AU (Audio File format): formato creado por la casa Apple para plataformas MAC, cuyos ficheros se guardan con la extensin .au MIDI formato de tabla de ondas, que no guardan el sonido a reproducir, sino un cdigo que nuestra tarjeta de sonido tendr que interpretar. Por ello, este tipo de ficheros no puede almacenar sonidos reales, como voces o msica rela grabada; slo puede contener sonidos almacenables en tablas de ondas. Como contarpartida, los ficheros MIDI, que se guardan con extensin .mid, son de pequeo tamao, lo que los hace idneos para la web. Es soportado por Internet Explorer y Netscape 4x. MP3 (MPEG 1 Layer 3): desarrollado por el MPEG (Moving Picture Expert Group), obtiene una alta compresin del sonido y una muy buena calidad basndose en la eliminacin de los componentes del sonido que no estn entre 20 hz y 16 Kh (los que puede oir el ser humano normal). Tiene en cuenta el sonido envolvente (surround) y la extensin multilinge, y guarda los ficheros con la extensin .mp3, y permite configurar el nivel de compresin, consiguindose calidades similares a las del formato WAVE pero con hasta 10 veces menos tamao de fichero. Es soportado directamente slo por Internet Explorer 5.5 y superiores. MOD especie de mezcla entre el formato MIDI y el formato WAV, ya que por un lado almacena el sonido en forma de instrucciones para la tarjeta de sonido, pero por otro puede almacenar tambin sonidos de dintrumentos musicales digitalizados, pudiendo ser interpretados por cualquier tarjeta de sonido de 8 bits. No es un formato estndar de Windows, por lo que su uso es ms indicado para sistemas Mac, Amiga o Linux. La extensin de los ficheros es .mod -Law Format de calidad similar al formato WAV, es original de las mquinas NeXt, y guarda sus ficheros con la extensin .au Real Audio de calidad media, aunque permite ficheros muy comprimidos, que guarda con extensin .rmp o .ra. Para su reproduccin hace falta tener instalado el plugin Real Audio.A la hora de trabajar con estos formatos de sonido, deberemos tener en cuenta las limitaciones en su uso, ya que muchos de ellos no pueden ser reproducidos ms que en sistemas operativos concretos, y an as, con plugins o programas especficos.En busca de la compatibilidad, si usamos Windows como sistema operativo conviene usar para ficheros musicales a reproducir directamente en el navegador los formatos WAV y MIDI, que son los ms compatibles. En cambio, si lo que deseamos es poder brindar a nuestros visitantes la opcin de navegar con msica ejecutable desde un programa externo, lo mejor es usar ficheros en formato MP3, ya que en la actualidad la mayora de los navegantes tienen instalado en su equipo algn programa reproductor adecuado, pudiendo valer desde software incluido en Windows, como Windows Media Player, hasta aplicaciones esternas, como Winamp. En este caso, bsata colocar un enlace normal en nuestras pginas, apuntando al fichero de sonido.Como ejemplo, si queremos enlazar en nuestra pgina un fichero MP3, bastara con escribir: Pincha aqu para oir la msica. Que nos da:Pincha aqu para oir la msicaCon esto, al pinchar el usuario el enlace, se lanzar la aplicacin que tenga asociada con el tipo de fichero MP3, que depender de la configuracin interna de cada navegador y usuario. Un caso especial es Netscape 6x. Casi no admite directamente ningn tipo de formato de sonido incrustado en la pgina, al no venir configuradas por defecto las aplicaciones o plugins necesarios. Y en el caso de ficheros enlazados, Nestscape 6x suele lanzar su propio reproductor, que suele ser de la casa AOL, precisando para la ejecucin una serie de pasos para darse de alta en esa compaia como usuario del software.Resumiendocada usuario tendr configurada su mquina de forma particular, soliendo prevalecer el ltimo software de sonido instalado, ya que estos programas suelen aduearse de ciertos tipos de ficheros para su ejecucin automtica. Entre las apliaciones posibles de ejecucin de ficheros de audio, bien de forma directa o en forma de plugina para los navegadores, destacan Windos Media Player, Real Player, Winamp, Quick time, etc.En este captulo veremos la manera de incluir los archivos de msica en el HTML.Por Luciano MorenoAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.En este artculo vamos a seguir tratando temas relacionados con el sonido en pginas web, viendo la etiqueta BGSOUND (sonido de fondo) y EMBED (propietaria del antiguo navegador Netscape para embeber distintos contenidos multimedia). Veremos algunos ejemplos de ambas formas de aadir un sonido, ya sea msica o cualquier otro tipo de sample en una pgina web.Antes de empezar, permitirme recordar que estas cosas se tienen que utilizar con cuidado, porque no a todo el mundo le gusta que las pginas web emitan sonidos durante su visita y tampoco todos los tipos de pginas son adecuadas para tener una banda sonora.Incluir sonidos en la webUna vez elegidos nuestros ficheros de sonido, es hora de incluirlos en nuestra pgina web. Lgicamente, para que un fichero de audio pueda ser reproducido por un navegador es necesario que su mquina tenga incluida una tarjeta de sonido y un par de altavoces.Existen diversas formas de incluir un fichero de audio en una pgina, formas que dependen del tipo de fichero y del navegador usado, y podemos usar diferentes etiquetas para cada una de ellas. BGSOUNDLa etiqueta bgsound incorpora sonidos de fondo en una pgina web, sonidos que se ejecutan automticamente al cargarse la pgina. Es una etiqueta propietaria de Microsoft, por lo que slo es interpretada por Internet Explorer, admitiendo los formatos de audio MID y WAV, aunque generalmente tambin acepta AU y MP3, en versiones actuales del nevagador o mediante plugins de uso general.Su sintaxis general, con sus atributos ms importantes, es del tipo:Donde: src="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del servidor web o una URL completa que localice el fichero en Internet. loop="l" determina el nmero de veces (l) que se debe ejecutar el fichero de audio. Si le damos el valor infinite, el fichero se reproducir indefinidamente. balance="b" determina el balance del sonido entre los dos altavoces del equipo, es decir, la potencia o intensidad con que se oir en cada uno de ellos (derecho e izquierdo). Sus valores pueden estar entre -10,000 y +10,000, correspondiendo el valor 0 a un balance equilibrado entre los dos altavoces. volume="v" fija el volumen al que se oir el sonido, y sus valores pueden variar entre -10,000 (mnimo) y 0 (mximo). No es soportado por los equipos MAC.Ejemplo:La etiqueta bgsound admite muchas ms propiedades (disabled, delay, id, class, controls, etc.). Asmismo, esta etiqueta es accesible en Internet Explorer mediante cdigo JavaScript, pudiendo modificar en tiempo real sus propiedades balance, loop, src, y volume, aunque sta ltima slo es accesible en plataformas PC. Para una informacin completa sobre todas las propiedades y funcionalidades de este etiqueta podis visitar la pgina correspondiente de Microsoft:http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/bgsound.aspEMBEDNestcape Navigator implement la etiqueta embed para incorporar ficheros de audio. Es sta una etiqueta de caracter general, que se usa para la inclusin en las pginas web de todos aquellos archivos ajenos al navegador y que necesitan por lo tanto la ejecucin de algn plugin para su interpretacin.Paradjicamente, Internet Explorer asumi despus el uso de esta etiqueta para la inclusin de ficheros de audio, para llegar a interpretarla mejor y ampliarla con ms atributos y propiedades, de tal forma que la ejecucin de sonidos con embed es actualmente ms cmoda con este navegador, al incorporar la suite de Microsoft sus propios plugins para la interpretacin de los diferentes formatos de audio. En cambio, si usamos Netscape Navigator nos encontraremos en muchos casos con un fallo en la reproduccin o con un engorroso mensaje de necesidad de algn plugin especial (sobre todo en las versiones 6x), lo que nos obligar a visitar la pgina de Netscape para su descarga e instalacin, que muchas veces no ser efectiva.Sea como sea, hay que indicar que esta etiqueta nos va a incluir en la pgina web un objeto especial, una especie de consola de mando, denominada Crescendo, que consta de tres botones, similares al de cualquier reproductor de audio: un botn Play, para comenzar la reproduccin (si no est establecida a automtica), un botn Pause, para detenerla momentneamente y un botn Stop, para detenerla definitivamente (puesta a cero). Esta consola es diferente segn el navegador usado; en el caso de Internet Explorer se muestra la tpica consola de Windows Media, cuyo tamao podemos configurar, mientras que en Netscape se muestra una consola propia, de tamao fijo definido.La sintaxis general de la etiqueta embed es del tipo:Y en el caso que nos ocupa, de la inclusin de ficheros de audio, los atributos podemos dividirlos en dos tipos:1. Atributos referentes al sonido: src="ruta_fichero", que fija la ruta en la que se encuentra el fichero de audio a reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del servidor web o una URL completa que localice le fichero en Internet. loop="l/true/false", que determina el nmero de veces que se debe ejecutar el fichero de audio. Los valores admitidos son l (nmero entero de veces), true (infinitas veces) y false (slo una vez). Slo es reconocida por Netscape Navigator. playcount="n", que define el nmero de veces (n) que se debe ejecutar en fichero de audio en el caso de Internet Explorer. type="tipo_fichero", atributo importante, que declara el tipo de fichero de audio que estamos usando, con lo que el navegador web puede ejecutar el programa o plugin adecuado para la reproduccin del fichero. Puede ser audio/midi, audio/wav, etc. autostart="true/false", que determina si el fichero de audio debe empezar a reproducirse por s slo al cargarse la pgina o si por el contrario ser preciso la actuacin del usuario (o de cdigo de script) para que comience la audicin. pluginspage="URL", que establece, en caso de ser necesario un plugin especial para reproducir el fichero, la pgina web donde se puede descragar el mismo. Slo se activa en el caso de que el navegador no sea capaz de reproducir el fichero por s mismo, y es soportada tan slo por Netscape Navigator. name="nombre", que asigna un nombre identificador (debe ser nico en la pgina) a una etiqueta embed determinada, con objeto de ser accedida luego por lenguajes de script. volume="v", que determina el volumen de reproduccin del sonido, y que puede variar entre 0 y 100. Es slo soportada por Netscape Navigator, que en la consola muestra el valor establecido en su indicador de volumen, siendo su valor por defecto 50. En en caso de Internet Explorer, el valor del volumen por defecto es 50 en plataformas PC, y 75 en MAC, siendo necesario actuar sobre el control de volumen de la consola para modificarlo.2. Atributos referentes a la consola: hidden="true/false", que establece si la consola va a ser visible (false) o no (true). Es ste un aspecto polmico, ya que si ocultamos la consola obligamos al usuario a oir nuestro fichero, sin posibilidad de detenerlo ni de modificar el volumen, y si la mostramos estaremos incrustando en la pantalla un objeto que muchas veces nos romper el esquema de diseo de nuestra pgina. Queda determinar su uso en cada caso concreto. width="w", que determina el ancho visible de la consola, en pixels. height="h", que determina el alto visible de la consola, en pixels. Estos atributos son tambin muy importantes, caso de que hayamos establecido hidden= "false", ya que de su valor va a depender la correcta visulazacin de la consola. En el caso de Internet Explorer, que muestra un logo de Windows Media sobre los controles, el tamao mnimo aceptable debe ser de 140x100 pixels, ya que si no la consola saldr deformada en exceso o recortada. Y en el caso de Netscape Navigator, deberemos asignar unos valores de 145x60 pixels, que es lo que ocupa la consola; si ponemos un tamao menor, la consola ser recortada, perdiendo funcionalidades, y si asignamos un tamao mayor, aparecern espacios grises alrededor de la consola, afeando el aspecto de la pgina. Si no especificamos estos atributos y tampoco hidden, nos aparecern en la pgina tan slo los mandos de la consola, sin logotipos aadidos (Internet Explorer) o la consola recortada (Netscape Navigator). align="top/bottom/center/baseline/left/right/texttop/middle/absmiddle/absbotom", anlogo al de la etiqueta IMG, define la alineacin horizontal o vertical de la consola respecto de los elementos de la pgina. hspace="hs", que establece la separacin horizontal, vspace="vs", que establece la separacin vertical, en pixels, entre la consola y los elementos de la pgina que la redean. Anloga a sus equivelentes de la etiqueta IMG.Estos son los atributos principales, aunque podemos encontrar referencias de otros admitidos, aunque no suelen ser operativos en la realidad, ya que no suelen funcionar de forma correcta o son especficos de Nestcape (como toda la serie de atributos que configuran los controles de la consola.Ejemplo sin consola:Ejemplo con consola:En este captulo veremos el potencil de la etiqueta OBJECT.Por Luciano MorenoAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.La etiqueta OBJECTCon objeto de normalizar la inclusin de ficheros no nativos en los navegadores web se decidi sustituir las diferentes etiquetas que realizaban este papel (APPLET, BGSOUND, EMBED, etc.), y que no pertenecan a los estndares web, por una etiqueta general, que fuera capaz de incrustar en el navegador todo tipo de ficheros. La etiqueta elegida en el estndar HTML 4.0 fu OBJECT, a la que se dot de suficientes atributos y flexibilidad para poder realizar correctamente su trabajo. Debido a esto, la propuesta ha sido usar la etiqueta object tambin para incluir ficheros de audio de todo tipo en las pginas web.Ahora bien, la aceptacin e implementacin que la misma a tenido vara segn el navegador en particular, as como en funcin del objeto a incrustar. De este forma, Internet Explorer a realizado su propia implementacin de la etiqueta object, incluyendo en ella referencias a filtros y componentes ActiveX especficos para los ficheros de audio. Por su lado, los navegadores Netscape no soportan correctamente este etiqueta para ficheros de este tipo.Restringindonos a Internet Explorer, la polmica sigue, ya que en diferentes manuales nos encontraremos diferentes formas de incrustar sonidos mediante object, unas que funcionan bien, y otras que no. Porqu sucede esto?. Yo creo que porque Microsoft ha ido usando la etiqueta object para implementar todo un grn conjunto de componentes propios, que adems han ido adaptndose a las diferentes versiones de Internet Explorer.Como regla general, vlida no slo para incrustar ficheros de sonido, sino tambin para otros tipos, la etiqueta object va a definir un objeto o componente externo encargado de la reproduccin del fichero, que en el caso de Internet Explorer suele ser algn tipo de control ActiveX. Mediante object se instancia el objeto, se declara su URL y sus principales propiedades generales, y mediante un conjunto de etiquetas especiales, PARAM, se le van pasando los valores que necesita para su correcto funcionamiento o para su configuracin deseada.La sintaxis general de la etiqueta object, para el caso de ficheros de sonido, es del tipo:...Los principales atributos de object, en referencia a ficheros de audio, son: classid="identificador_objeto", que fija la URL del objeto o componenteexterno necesario para reproducir el fichero de audio, y la implementacin CLSID de los controles ActiveX necesarios. type="tipo_fichero", atributo importante, que declara el tipo de fichero de audio que estamos usando. width="w", que determina el ancho visible de la consola, en pixels. height="h", que determina el alto visible de la consola, en pixels. align="top/bottom/center/baseline/left/right /texttop/middle/absmiddle/absbotom", anlogo al de la etiqueta IMG, define la alineacin horizontal o vertical de la consola respecto de los elementos de la pgina. hspace="hs", que establece la separacin horizontal, vspace="vs", que establece la separacin vertical, en pixels, entre la consola y los elementos de la pgina que la redean. Anloga a sus equivelentes de la etiqueta IMG. autostart="true/false", que determina si el fichero de audio debe empezar a reproducirse por s slo al cargarse la pgina o si por el contrario ser preciso la actuacin del usuario (o de cdigo de script) para que comience la audicin. standby="mensaje", que presenta en pantalla un mensaje al usuario mientras el fichero se carga. En cuanto a los elementos param, los ms importantes son: param name="FileName" value="ruta_fichero", determina la ruta o URL del fichero de audio a reproducir. No es necesario utilizar slo ficheros WAV o MID, pudiendo reproducirse tambin ficheros MP3 o Real Audio. El reproductor del primero lo incluye Explorer en ActiveMovie (componente de Windows Media). param name="autostart" value="true/false", indica al navegador si se debe empezar a reproducir el sonido automticamente al cargar la pgina o si por el contrario ser preciso que el usuario pulse el botn Play para ello.No son estos todos los atributos y parmetros posibles. Es ms, en cuanto nos metemos en componentes Microsoft, podemos encontrarnos multitud de configuraciones posibles, que nos van a permitir fijar muchos aspectos de los mismos. Dejo a cada uno la posibilidad de profundizar en el estudio de aquellos componentes y propiedades que necesite, pero sabiendo que con los elementos vistos arriba tenemos ms que suficiente para presentar un fichero de audio en nuestra pgina web.xEjemplo: >Que podis ver funcionando en esta ventana (slo Internet Explorer).La etiqueta ASi hasta ahora hemos visto cmo podemos incluir en nuestras pginas sonidos de fondo o inicializados por el usuario mediante interaccin con la consola Crescendo, vamos a ver ahora cmo podemos implementar audio mediante el uso de una de las etiquetas ms polivalentes en HTML: la etiqueta A.Efectivamente, los enlaces son la base del hipertexto, base a su vez de la web, y dentro de sus mltiples usos podemos considerar el enlace a ficheros de audio. El fichero enlazado puede ser interpretado directamente por el navegador (porque sea de reproduccin directa o se tenga instalado el plugin adecuado) o puede ser ejecutado por un programa independiente que se abra automticamente (Winamp, Real Audio, etc.), siendo este el caso ms comn. Si el usuario no dispone del programa o plugin adecuado, se le abrir una ventana de descarga del fichero, con lo que podr guardarlo hasta disponer de la aplicacin necesaria para su reproduccin.La sintaxis general en este caso ser del tipo:MensajeEjemplo de fichero MID:Msica para tQue podemos ver en funcionamiento en esta ventana.Ejemplo de fichero MP3:MadonnaQue tenemos en esta otra ventana.Qu es el Doctype en los documentos HTML y XHTML. Vemos distintos tipos de Doctype disponibles.Por Miguel Angel AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.Dentro del marco de nuestro manual de HTML y en lneas generales, podemos decir que el DOCTYPE es una declaracin del DTD usado al construir un documento HTML o XHTML. Sin embargo, para ser un poco ms estrictos, debemos aclarar que el Doctype es propio de documentos XML y SGML, y por tanto los lenguajes HTML o XHTML son unos simples herederos de algo que ya se vena utilizando.Habra que aclarar tambin que DTD significa Definition Type Document y es una declaracin en un metalenguaje para definir otro lenguaje. Dicho de otra manera, el DTD marca las reglas para la definicin de lenguajes como el HTML. Podemos conocer ms lo que es un DTD en el artculo del manualmanual de XML de DesarrolloWeb.com: DTD y XML Schema.As, volviendo atrs, podramos decir que los documentos HTML o XHTML estn escritos en un lenguaje y con el Doctype especificamos este lenguaje y la versin del mismo. Los navegadores leern esta declaracin de doctype e interpretarn la pgina atendiendo a las reglas definidas en ese lenguaje. Nota: Para los navegadores es importante conocer el doctype de la pgina web, porque de ese modo pueden mostrar la pgina web con la versin exacta del lenguaje HTML o XHTML con la que fue construida. Si no tienen una declaracin de doctype, interpretarn la pgina en lo que se llama "quirks mode", un modo que procura maximizar la compatibilidad de la pgina con versiones anteriores del lenguaje HTML.De modo que la utilizacin de la etiqueta es necesaria si deseamos cumplir un estndar de HTML o XHTML, para especificar qu versin o lenguaje utilizamos y que el browser renderice la pgina conforme a dicho estndar.El DOCTYPE tiene una forma como sigue:El doctype debe incluirse en la primera lnea del cdigo HTML de la pgina.Por explicar de alguna manera esta etiqueta, que suena un poco a chino, dice que es un DOCTYPE de un documento HTML y nos da dos datos adicionales. Con el texto "-//W3C//DTD XHTML 1.0 Transitional//EN" indicamos que este documento se tiene que validar con la especificacin de XHTML 1.0 y que el tipo de documento es Transitional. Por otra parte, http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd es la URL del DTD que sirve para validar el cigo HTML de la pgina.El tipo de documento, que habamos sealado como Transitional en el doctype expresado antes, quiere decir el documento utiliza un abanico ms amplio de etiquetas HTML y atributos, incluso algunos que puedan haberse quedado obsoletos. Hay otros dos tipos de documentos. Por un lado tenemos strict, que indica que el cdigo es HTML o XHTML estricto, sin incluir atributos y etiquetas en deshuso. El otro tipo de documento que falta es el frameset, que se utiliza cuando estamos realizando una declaracin de frames o frameset.As que, dependiendo de nuestra pgina y el cdigo que utilicemos, tendremos que declarar uno u otro doctype. Existen diversos Doctype que abarcan una gran gama de posibilidades, configurando distintas versiones de HTML o XHTML y distintos tipos de documento, strict, transitional o frameset. Este artculo de desarrollo web .com se completa ahora con una lista de algunos de estos doctype ms utilizados en la actualidad:Doctype XHTML 1.0 strictDoctype XHTML 1.0 transitionalDoctype XHTML 1.0 framesetDoctype HTML 4.01 strict Doctype HTML 4.01 transitional Doctype HTML 4.01 frameset Explicacin de la etiqueta META robots y diferentes posibilidades de configuracin.Por Miguel Angel AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.Mediante las diferentes etiquetas META que podemos colocar en un sitio web disponemos de una variedad amplia de metainformaciones para comunicar a cualquier sistema que lea nuestra pgina web. En este artculo vamos a presentar una etiqueta interesante para definir cmo se tienen que comportar los motores de bsqueda a la hora de visitar nuestra pgina y mostrarla entre los resultados de bsquedas realizados en el buscador. Se trata la etiqueta meta de robots.La etiqueta META de Robots sirve para personalizar el comportamiento de robots de indexacin, tipo Google, a la hora de procesar nuestra pgina web. Cada una de las pginas de nuestro sitio puede tener una declaracin de la etiqueta meta de robots distinta, con lo que podemos incluso definir de manera independiente cmo deseamos que se trate cada una de las pginas que componen el web.En DesarrolloWeb.com hemos publicado anteriormente informaciones acerca de distintas etiquetas META en artculos dispersos. Adems, tenemos un Generador de Etiquetas Meta que tambin puede resultar de inters para los lectores.Etiqueta ROBOTS de META TagsComo hemos dicho, la etiqueta robots, dentro de las posibles etiquetas con Metainformaciones acerca de un documento web, sirve para llevar un control exhaustivo de lo que puede o no puede hacer un robot de indexacin cuando visita nuestro sitio web. Los comportamientos ms tpicos que podemos definir son permitir o no indexar una pgina y seguir o no sus enlaces.Nota: Conviene recordar que tambin se puede definir el comportamiento de los robots de bsqueda con nuestro sitio, a la hora por ejemplo de permitir o no indexar las distintas pginas, mediante el archivo robots.txt. Ahora veamos cmo se define esta etiqueta META de robots.Como se puede ver, se define el etiqueta META y se acompaa de dos atributos esenciales:Name: que para la etiqueta META que controla los comportamientos en motores de indexacin el valor es "robots".Content: se indica las directivas que queremos que apliquen los motores de indexacin cuando visitan la pgina.Valores posibles de la etiqueta META ROBOTSEn el atributo Content de la etiqueta meta debemos colocar las directrices que deseemos para buscadores, tantas como deseemos, separadas por comas. Las distintas directrices a aplicar son las siguientes:INDEX / NOINDEXSirve para indicar si se desea o no permitir la indexacin de la pgina por los motores de bsqueda.FOLLOW / NOFOLLOWCon esta directriz se indica si se debe o no permitir a los motores de bsqueda recorrer o seguir recorriendo la web a travs de los enlaces que encuentre en el cuerpo del documento.ARCHIVE / NOARCHIVEEsto permite decir si deseamos o no que el motor de bsqueda archive el contenido del sitio web en su cach interna. Como habremos podido ver, buscadores como Google tienen una cach y podemos ver las pginas web tal como las tiene cacheadas el buscador. Para ello, en los resultados de las bsquedas aparece un enlace que pone cach. Si decimos que no archive la pgina, no debera mostrar ese enlace de cach. Esto en realidad, segn Google, no evita que se guarde en cach la pgina, sino que no permite verla a los usuarios del buscador y por lo tanto no muestra el enlace.SNIPPET / NOSNIPPETEsta directriz en principio no resulta muy til, al menos a primera vista. Sirve para que el motor de bsqueda no muestre ninguna descripcin de un sitio, slo su ttulo. Si utilizas NOSNIPPET automticamente defines un NOARCHIVE, por lo que la pgina tampoco se mostrar en cach.ODP / NOODPSirve para decirle al buscador que debe, o no, mostrar el ttulo y descripcin de la pgina iguales a los que se encuentra en el Open Directory Project. En algunos casos, algunos buscadores muestran como ttulo y descripcin de una web los que se han publicado en el ODP (ENLACE A http://www.dmoz.org/). YDIR / NOYDIREs bsicamente lo mismo que ODP / NOODP, con la diferencia que es para que no se pueda, o si, mostrar la descripcin y ttulo que aparece en el directorio de Yahoo.Cuando no existe esta etiqueta los buscadores interpretan las condiciones ms favorables para ellos, es decir, que pueden hacer todo lo que suelen hacer con otras pginas a la nuestra, como indexarla, seguir sus enlaces, archivarla, etc.Ejemplos de etiquetas META ROBOTSA la hora de utilizar la META ROBOTS bsicamente lo que podemos hacer es restringir las posibilidades de los motores de bsqueda, puesto que las posibilidades por defecto son las menos restrictivas.Esto quiere decir que una etiqueta como la siguiente es irrelevante, porque el buscador siempre va a indexar la pgina y seguir sus enlaces de manera predeterminada:Podemos definir entonces casos ms restrictivos como estos:Para indicar que se desea que se indexe la pgina, pero no se sigan los enlaces. Dada que la opcin INDEX es la que se sobreentiende por defecto, esta etiqueta tendra el mismo valor que la siguiente:Para indicar que no queremos que se sigan los enlaces de la pgina.Para indicar que no queremos que se indexe la pgina ni se sigan los enlaces que pueda contener.Lo nico que indicamos es que no se muestre el enlace para ver la pgina en la cach del buscador.Con esta restrictiva etiqueta forzamos para que no se indexe la pgina, no se sigan los enlaces, no se muestre el link de cach, no se muestre el ttulo y descipcin del Open Directory Project y slo se muestre el ttulo de la pgina en los resultados de las bsquedas.HTML 5 es una tecnologa creada para modernizar la web y el desarrollo de aplicaciones web, online y offline, que aun tiene bastante camino por recorrer para ser una realidad.Por Miguel Angel AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.En el momento de escribir este artculo, la especificacin de HTML 5 est todava en fase de borrador, no obstante, en algunos navegadores, recientemente se estn poniendo en marcha, de forma experimental, algunas de las caractersticas que traer consigo este nuevo estndar. Paralelamente, van surgiendo nuevas informaciones y referencias que explican qu es HTML 5, lo que hace que nos sintamos cada vez ms impacientes por conocer bien las nuevas particularidades del lenguaje y sobre todo, por comenzarlas a aplicar en nuestros desarrollos. Este artculo de DesarrolloWeb.com pretender ofrecer algunas pistas para conocer el camino que actualmente est recorriendo el lenguaje de marcacin para convertirse en una realidad, a la vez que explicar un poco cules son las novedades ms importantes que estn por venir.Por qu se crea HTML 5Los que nos dedicamos a hacer pginas web sabemos que un sitio web es como un puzzle de tecnologas que operan entre si. Para hacer una pgina, en principio, se necesita simplemente HTML, pero esta afirmacin hoy tiene poco que ver con la realidad y las necesidades de los desarrolladores para crear una rica experiencia de usuario.Es que hoy pocos sitios web se basan nicamente en HTML. Quien ms quien menos utiliza CSS para definir el aspecto de la pgina, algn tipo de script del lado del cliente, en Javascript, vdeos en diversos formatos o Flash para realizar alguna animacin o interaccin con el usuario. Para poder beneficiarse e integrar todas estas tecnologas, existen multitud de etiquetas que se han ido creando al paso, segn se iban necesitando, y las cuales no han pasado por el filtro de los normalizadores de tecnologas como el W3C.Por tanto, ms de 10 aos despus que se publicase la ltima especificacin del HTML, resulta primordial para el futuro de la web la creacin de un nuevo estndar que recoja y solucione de alguna manera, las necesidades de los desarrolladores que se han ido creando a lo largo de todo este tiempo. Esfuerzos en diversas vertientes para la creacin de HTML 5Sin duda ya hace tiempo que se necesitaba esta nueva especificacin, que hoy todava est en fase de borrador y podramos preguntarnos por qu ha pasado tanto tiempo sin publicarse esta nueva versin del lenguaje? La respuesta es que HTML 5 se ha convertido en un proyecto muy ambicioso, donde hay muchas personas, empresas e instituciones que tienen mucho que opinar. Es de vital importancia, por tanto, coordinar a todos los implicados para crear un nico frente comn, que asegure esta vez un xito de la tecnologa como un estndar.En principio, los encargados de regular los estndares de Internet son los integrantes del W3C, que han estado trabajando durante bastante tiempo en otros lenguajes como XML. No se puede decir que hayan dejado de lado HTML, pero de alguna manera estaban creando otros estndares ms rgidos que sustituyesen al lenguaje. Ante esta falta de inters en HTML y las necesidades reales de los desarrolladores de webs por parte del W3C, se cre en 2004 una comunidad de personas interesadas en mejorar y modernizar el lenguaje de marcacin. Este nuevo grupo, llamado WHATWG (Web Hypertext Application Technology Working Group), se cre a raz de una conferencia del W3C con personas integrantes de los equipos de desarrollo de Apple, la Fundacin Mozilla y Opera, a la que se han ido agregando personal de Microsoft y otras empresas implicadas en el mundo web.El WHATWG, que funciona de manera independiente del W3C, tiene como objetivo principal trabajar en la nueva especificacin del HTML 5 y a ellos debemos muchas de los avances que estn por llegar con relacin al lenguaje. Es una organizacin abierta, donde cualquiera puede participar libre gratuitamente. De hecho, segn comentan en su web, estn realmente interesados en las opiniones e intereses de las personas que trabajan con el desarrollo web, para crear unas especificaciones que respondan a las necesidades reales de los profesionales de Internet.Enlaces relacionadosPara la documentacin de los lectores, publicamos los enlaces a los borradores de especificaciones del HTML 5 y las organizaciones que trabajan en ellos:W3C HTML Working Group:http://www.w3.org/html/WHATWG http://www.whatwg.orgltima versin publicada del borrador de HTML 5http://www.w3.org/TR/html5/Borrador del HTML 5 por la WHATWGhttp://www.whatwg.org/specs/web-apps/current-work/multipage/ConclusinHemos podido comprobar que existen numerosos esfuerzos para la creacin de las nuevas especificaciones del HTML 5, llevados a cabo por distintas organizaciones, independientes, pero que trabajan en un frente comn. En el siguiente artculo veremos qu es HTML 5, cundo estar listo y cules son las principales novedades que traer.Veremos qu es HTML 5, su previsin de tiempo para convertirse en una especificacin recomendada y las novedades ms significativas que proporcionar. Por Miguel Angel AlvarezAtencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.En el artculo anterior publicado en DesarrolloWeb.com, "El futuro del desarrollo web: HTML 5" explicamos las razones por las que es verdaderamente importante esta nueva versin del lenguaje de marcacin HTML y vimos quines son los que estn llevando a cabo su especificacin. Ahora convendra explicar qu es exactamente HTML 5, ya que no es simplemente una nueva versin del lenguaje de marcacin HTML, sino una agrupacin de diversas especificaciones concernientes a el desarrollo web. Es decir, HTML 5 no se limita slo a crear nuevas etiquetas, atributos y eliminar aquellas marcas que estn en desuso o se utilizan inadecuadamente, sino que va mucho ms all.As pues, HTML 5 es una nueva versin de diversas especificaciones, entre las que se encuentran: HTML 4 XHTML 1 DOM Nivel 2 (DOM = Document Objetc Model)A la par, HTML 5 pretende proporcionar una plataforma con la que desarrollar aplicaciones web ms parecidas a las aplicaciones de escritorio, donde su ejecucin dentro de un navegador no implique falta de recursos o facilidades para resolver las necesidades reales de los desarrolladores. Para ello se estn creando unas APIs que permitan trabajar con cualquiera de los elementos de la pgina y realizar acciones que hasta hoy era necesario realizar por medio de tecnologas accesorias.Estas API, que tendrn que ser implementadas por los distintos navegadores del mercado, se estn documentando con minuciosidad, para que todos los Browsers, creados por cualquier compaa las soporten tal cual se han diseado. Esto se hace con la intencin que no ocurra lo que viene sucediendo en el pasado, que cada navegador hace la guerra por su parte y los que acaban pagndolo son los desarrolladores y a la postre los usuarios, que tienen muchas posibilidades de acceder a webs que no son compatibles con su navegador preferido.Cundo estar listo HTML 5Segn informan en la pgina de la organizacin WHATWG, HTML 5 se prev est listo como especificacin de implementacin recomendada en el 2012. Quiere esto decir que vamos a tener que esperar hasta 2012 para aprovechar las ventajas de HTML 5? realmente no es justamente as, puesto que algunos navegadores ya implementan muchas de las caractersticas del moderno lenguaje. Resulta que HTML 5 est formado por muchos mdulos d