3. introducción a html
Post on 26-Sep-2015
222 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related