TODO SOBRE HTML
HTML
HTML, siglas de HyperText Markup Language («lenguaje de
marcado de hipertexto»), es el lenguaje de marcadopredominante para la
elaboración de pagina web. Es usado para describir la estructura y el contenido
en forma de texto, así como para complementar el texto con objetos tales como
imágenes. El HTML se escribe en forma de «etiquetas», rodeadas por corchetes
angulares (<,>). HTML también puede describir, hasta un cierto
punto, la apariencia de un documento, y puede incluir un script (por
ejemplo JavaScrips), el cual puede afectar el comportamiento de
navegador web y otros procesadores de HTML.1
HTML también es usado para referirse al contenido del tipo MME text/html o
todavía más ampliamente como un término genérico para el HTML, ya sea en forma
descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida
directamente de SGML (como HTML 4.01 y anteriores).
Verciones de HTML
El HTML fue desarrollado
originalmente por Tim Bernes-Lee en el CERN (Centro Europeo de Física de
Partículas), y fue popularizado por el navegador Mosaic desarrollado
por la NCSA (National Center for Supercomputing Applications). Pero debido al
rápido crecimiento de la web, surgió la necesidad de crear un
estándar para que tanto los autores como los navegadores pudieran reconocer
cualquier versión de HTML.
Los estándares HTML son el HTML 2.0,
el HTML 3.2, el HTML 4.0 y el HTML 4.01., algunos creen que el HTML ya no tiene
futuro porque existe el XHTML que es mejor pero el navagedor más popular (el de
la letra e azul) no lo soporta por lo que otros piensan que el futuro está en el HTML
5.
Actualmente a versión de HTML más
utilizada es la 4.01 y el XHTML 1.0 estás 2 versiones fueron definidas por
la W3C hace
7 y 8 años. ahora se preparan nuevas versiones que son el HTML 5 y el XHTML 2.
Además de cada versión, cada una
tiene variantes que siempre se tienen que definir en el documento HTML,
las variantes del HTML 4.01 son:
§ HTML 4.01 Strict: el normal, donde se pueden usar
etiquetas HTML 4.01, pero no se aceptan etiquetas obsoletas.
§ HTML 4.01 Transitional: este permite usar todo tipo de
etiquetas de todas las versiones de HTML, no es recomendable.
§ HTML 4.01 Frameset: Tiene soporte para frames, muy
anticuado.
Compatibilidad con los navegadores
La perfecta
compatibilidad de los documentos HTML con Netscape Communicator y Microsoft
Internet Explorer es una de las cuestiones más controvertidas de la creación de
sitios. Y lo es no sólo por razones técnicas o de oportunidad, sino también por
razones generales de política comercial y desarrollo del web. Los juicios sobre
este último aspecto los dejamos a la opinión de nuestros lectores. Nuestra
misión es bien distinta: mostrar si y cómo es aún posible crear sitios
crossbrowser, es decir sitios compatibles con los dos navegadores de mayor
difusión en el mercado Internet.
HTML 4 es el último estándar en orden cronológico que el W3C ha recomendado
para regir las suertes de este sistema de marcado. Ya desde hace años, sibilas
cada vez más convencidas del carácter obsoleto de HTML prevén el final del
sistema de marcado. No será así, al menos a corto plazo, y HTML regirá con toda
probabilidad la suerte del publishing aún por mucho tiempo.
En cualquier caso, no podemos negar que HTML ha experimentado un desarrollo vinculado
con demasiada frecuencia a los caprichos de una u otra software house, más
interesada en imponer la normalización de su tecnología que en armonizar el
desarrollo del sistema de marcado. Aún hoy en día, si bien existe un estándar y
es operativo, Netscape y Microsoft continúan proponiendo tecnologías diferentes
para cuestiones fundamentales (Netscape, por ejemplo, reconoce sólo en parte
las hojas de estilo previstas por HTML 4). Esta falta de armonización es la
consecuencia primera de la actual incompatibilidad de los navegadores.
Pero ¿a qué debemos prestar atención para hacer que un sitio sea perfectamente
visible tanto con Netscape como con Msie? Esta pregunta tiene varias respuestas
según la tecnología que apliquemos.
Dynamic HTML
Si piensar introducir efectos de HTML dinámico en tu sitio, ármate de paciencia
y prepárate para una infinidad de elementos incompatibles. También en este caso
la diferente manera de abordar el DHTML por parte de Netscape y Microsoft hace
que sean compatibles tan solo los efectos creados con sendos códigos, cada uno
de ellos escrito para un navegador. Existen demo Dynamic HTML crossbrowser pero
no una definición de lenguaje unívoca. En la sección Dynamic HTML de
HTMLpoint puedes encontrar numerosos ejemplos crossbrowser.
Xml
Sirve cuanto dicho anteriormente para DHTML. Si Microsoft ha proyectado un
experimento XML con los archivos CDF (Channel Definition Format), Netscape ha
respondido con una tecnología propia RDF (Resource Description Format). Ninguna
de las dos tecnologías ha tenido mucho éxito y esperemos que la labor de
concienciación del W3C pueda armonizar lo antes posible el futuro desarrollo
del XML.
Para más información al respecto, visita la sección específica de HTMLpoint.
Javascript
Si en las anteriores versiones de los dos navegadores las incompatibilidades
parecían insuperables, a partir de la cuarta versión parecen atenuarse a favor
de una mayor integración. Persisten, sin embargo, fuertes limitaciones de
compatibilidad por lo que te aconsejamos que verifiques tus páginas con ambos
navegadores.
Para ejemplos Javascript visita la sección específica de HTMLpoint.
Hojas de estilo
Internet Explorer versiones 4 y 5 interpretan a la perfección las CSS. Desde la
versión 3 el navegador de Microsoft implementa las hojas de estilo y gran parte
de las recomendaciones del W3C relativas a estos instrumentos son ya
característica de MS.
Netscape soporta plenamente una tecnología alternativa a las CSS, las hojas de
estilo Javascript. Netscape 3 es totalmente incompatible con las
especificaciones de CSS1 y CSS2, mientras la versión 4 de este navegador
soporta sólo en parte las hojas de estilo. Una compatibilidad casi absoluta es
la que se refiere a la colocación dinámica, mientras existen ciertas
dificultades de visualización con las especificaciones del background y del
color de fondo, atributos márgenes y alineación, atributos de estilo para el
texto y efectos en el texto y enlaces.
No soporta ni siquiera parcialmente: los controles del cursor, los efectos de
transición, los filtros en las imágenes y los efectos en los formularios.
Para mayor información al respecto, visita la sección específica de HTMLpoint.
Applet Java
Afortunadamente Java queda al margen de lógicas de compatibilidad gracias a su
característica de lenguaje multiplataforma. Los apliques (applet) Java, por
tanto, son perfectamente compatibles con ambos navegadores.
Macromedia Flash
Como para Java, tampoco para Flash se plantean problemas de compatibilidad, si
bien en este caso es necesario instalar en el propio ordenador el programa
suministrado por Macromedia para la lectura de los archivos de Flash.
Además de las anteriores, existen otras muchas pequeñas incompatibilidades:
· Los
active Channel (tecnología CDF) funcionan sólo con MsIe desde la cuarta
versión;
· La
propiedad bgproperties="fixed" de la marca body funciona sólo con
MsIe;
· Sólo
MsIe4 prevé la posibilidad de agregar la página actual a favoritos y de
convertir la misma en la página por defecto del navegador.
· Para
los archivos sonoros de fondo: <BGSOUND> funciona sólo
con MSIE pero no con Navigator.
Vamos
a hablar en este artículo sobre los editores de HTML, los programas que nos
sirven para crear páginas web con el lenguaje HTML.
Los editores de HTML pueden ser de dos tipos, como
veremos, unos permiten codificar las páginas utilizando el propio lenguaje
HTML, a base de etiquetas y otros nos permiten diseñar una página web, como si
estuviésemos escribiendo con un editor de texto avanzado, sin tener que
escribir el código con las etiquetas. Esta última vertiente, que podemos llamar
editores en modo diseño, presenta una facilidad adicional para las personas que
no deseen complicarse la vida con el lenguaje HTML, porque no tengan tiempo de
aprenderlo o porque se sientan incapaces de hacerlo. Los editores en modo
diseño nos permiten crear la página como si estuviéramos escribiendo un
documento con un editor del tipo de Word. El editor de HTML es el encargado de
vérselas con el lenguaje y programar internamente la página con el código HTML,
según lo que nosotros estamos diseñando.
Con el editor HTML en vista diseño podemos colocar
imágenes, definir estilos, utilizar negritas o cursivas, etc. sin preocuparnos
de las etiquetas correspondientes a cada estilo o elemento. Es el editor el que
conoce estas etiquetas y las utiliza convenientemente. Este tipo de editores
HTML en modo diseño se denominan, en lenguaje técnico WYSIWYG (What You See Is
What You Get) porque cuando trabajas con ellos lo que ves que estás creando con
el editor es lo que obtienes luego cuando grabas la página.
Existen dos tendencias, por tanto, entre los
desarrolladores que se dedican a realizar páginas web. Por un lado tenemos a
las personas que prefieren crear las páginas programando el HTML y por otro las
personas que utilizan editores HTML en modo diseño. Algunas diferencias entre
hacerlo de un modo u otro son las siguientes:
Escribiendo el HTML
|
Con un editor WYSIWYG
|
Dominas con mayor precisión el
código de la página, queda más limpio. Si dominas bien el HTML nunca tendrás
ningún problema para hacer lo que deseas.
|
El código de la página tiene peor
calidad, incluso puede llegar a tener errores, más o menos visibles, que
cuestan arreglar. Es la máquina la que domina el trabajo.
|
Es más complicado el aprendizaje,
más lento y cuando se llega a un nivel avanzado también se hace
considerablemente más difícil
|
El aprendizaje es muy sencillo,
tal como puede ser trabajar en Word. Solo se trata de manejar un programa
más.
|
Hacer una página cuesta más
trabajo y tiempo.
|
Es muy rápido.
|
Cada uno debe escoger el camino que más le convenga o el que le parezca más
atractivo. De todos modos siempre se puede empezar de un modo y luego pasar al
otro modo sin ningún tipo de problema. Incluso, por adelantarnos a los
acontecimientos, diríamos que cuando una persona profundiza en el diseño de
páginas web llega un momento en el que le hace falta conocer las dos maneras de
construir webs. A los programadores en HTML les hará falta aprender un editor
porque eso aumentará su productividad y los que utilizan editores necesitarán
aprender un poco de HTML para arreglar alguna cosa que el editor ha hecho mal o
realizar alguna cosa que el editor no puede hacer.
Este manual está escrito por una persona que aprendió
a realizar sus primeras webs con el Block de notas y algunas veces
puede verse mi mayor inclinación a escribir el código HTML uno mismo. Aunque mi
consejo es aprender HTML, estoy seguro que muchos preferirán que un editor en
modo diseño haga las cosas más sencillas. Si el editor HTML WYSIWYG es bueno y
lo dominamos perfectamente se pueden obtener perfectos resultados.
Editores HTML
modo diseño WYSIWYG
En
el mercado existen multitud de editores de HTML WYSIWYG, es importante elegir
un editor bueno porque nuestros trabajos van a depender de sus resultados.
Actualmente el rey de los editores y el que os aconsejaríamos sin duda es el Dreamweaver,
fabricado por Adobe.
Otras posibilidades son editores como
Editores de
texto preparados para escribir código HTML
Las
personas que después de estas líneas han decidido aprender el lenguaje HTML
también tienen herramientas muy interesantes para aumentar su productividad sin
dejar de escribir ellos mismos el HTML que desean. Se trata de unos editores de
texto, como cualquier otro, que están preparados para escribir HTML y por lo
tanto ofrecen multitud de ayudas a los diseñadores:
- Pueden tener abiertos y editar varios ficheros a la vez
- Colorean los códigos de las páginas para hacerlos más comprensibles
- Suelen soportar otros lenguajes de programación con los que podemos
llegar a trabajar en el desarrollo de páginas web.
- Ofrecen ayudas a la programación, que muchas veces son contextuales y
se activan a medida que vamos realizando las páginas.
- Y además muchos de ellos tienen herramientas integradas para hacer
cosas tan variadas como la generación de código, asistentes, módulos de
conexión por FTP con el servidor, etc.
Dependiendo
del programa escogido tendremos unas herramientas y ayudas u otras. Simplemente
es elegir el que más se adapte a nuestras necesidades. Algunos ejemplos son:
- Notepad++,
gratuito y código libre.
- Home Site,
que estaba bien, aunque Adobe hace años que no lo actualiza.
- UltraEdit,
que es un editor para programadores de los más populares.
- Arachnophilia,
que funciona en todos los sistemas operativos.
Si
nos decidimos por escribir el código fuente en HTML será muy recomendable
utilizar cualquiera de estos programas, para sentirnos más a gusto al programar
las páginas y poder hacerlas más rápido. No obstante cabe recordar que
cualquier editor de textos serviría para hacer páginas web, incluso el Block de notas, que es el editor más
sencillo que existe para texto plano, pero utilizar un programa de estos será
imprescindible con el tiempo.
En la sección de programas de desarrolloweb tenemos
descripciones de algunos editores de HTML,
tanto en modo diseño como escribiendo el código.
Estructura
de una página HTML
Estructura básica
- Cada página comienza con: < HTML > .
- A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > .
- Después, el comando < BODY >, que indica
el comienzo del cuerpo de la página. Las instrucciones HTML se escribirán
a continuación, y finalizarán con <
/BODY >.
- La página acabará con < /HTML > .
Es decir:
<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>
Cabecera
La cabecera de un documento está delimitada por
las etiquetas < HEAD > y </HEAD > Sus componentes son opcionales. El más importante es <TITLE> , que permite escribir el
título del documento. El título no se muestra en la página, sino en la parte
superior de la ventana del visualizador, como identificador en los bookmarks y en la history list. Se utiliza de la siguiente forma:
<HEAD>
<TITLE>Título del documento
HTML</TITLE>
</HEAD>
Cuerpo
Es la parte delimitada por <BODY> y < /BODY > . Puede llevar los
siguientes atributos:
- BACKGROUND="imagen": define el fondo. Más adelante
veremos más sobre imágenes.
- BGCOLOR="######": color del fondo (sólo si no se define una
imagen de fondo, o si ésta imagen no puede obtenerse.. Más adelante
veremos más sobre colores.
Por ahora nos basta saber que para los colores básicos se puede utilizar
su nombre en inglés: white, blue, red, green ...
- TEXT="######": color del texto. Por defecto será negro.
- LINK="######": color de los links. Por defecto será azul.
- VLINK="######": color de los links visitados. Por defecto será
violeta.
Ejemplos
<body background=
"fondo.gif">
|
El documento tendrá como fondo la
imagen indicada.
|
<body
bgcolor="white" text="blue" link="red"
vlink="red">
|
El fondo será blanco, el texto
azul, y todos los links (visitados o no) serán rojos
|
Netscape
Si pones esta etiqueta, las versiones más recientes del Explorer (desde la 4.0) también la interpretan correctamente, salvo LOOP. El Explorer lee el fichero una vez para LOOP=0 y lo repite indefinidamente para N igual a otro valor cualquiera.
Explorer
