2. CONCEPTO
HTML, siglas de HyperText Markup Language («lenguaje de marcado de
hipertexto»), hace referencia al lenguaje de marcado predominante para la
elaboración de páginas web que se utiliza 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 JavaScript), el cual puede afectar el comportamiento de
navegadores web y otros procesadores de HTML.1
HTML también sirve para referirse al contenido del tipo de MIME 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).
3. Historia de HTML
Primeras especificaciones
La primera descripción de HTML disponible públicamente fue un
documento llamado HTML Tags (Etiquetas HTML), publicado por
primera vez en Internet por Tim Berners-Lee en 1991.Describe 22
elementos que incluyen el diseño inicial y relativamente simple de
HTML. Trece de estos elementos todavía existen en HTML 4.
Berners-Lee consideraba a HTML una ampliación de SGML, pero no
fue formalmente reconocida como tal hasta la publicación de
mediados de 1993, por la IETF, de una primera proposición para una
especificación de HTML: el boceto Hypertext Markup Language de
Berners-Lee y Dan Connolly, el cual incluía una Definición de Tipo de
Documento SGML para definir la gramática.El boceto expiró luego de
seis meses, pero fue notable por su reconocimiento de la etiqueta
propia del navegador Mosaic usada para insertar imágenes sin cambio
de línea, que reflejaba la filosofía del IETF de basar estándares en
prototipos con éxito. De la misma manera, el boceto competidor de
Dave Raggett HTML+ (Hypertext Markup Format) (Formato de
Marcaje de Hipertexto), de finales de 1993, sugería estandarizar
características ya implementadas, como las tablas.
4. Elementos
Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas:
atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere
válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (por ejemplo,
<nombre-de-elemento>) y una etiqueta de cierre (por ejemplo, </nombre-de-elemento>). Los atributos
del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos
etiquetas (por ejemplo, <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>).
Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se
listan varios tipos de elementos de marcado usados en HTML.
Estructura general de una línea de código en el lenguaje de etiquetas HTML.
El marcado estructural describe el propósito del texto. Por ejemplo, <h2>Golf</h2> establece «Golf»
como un encabezamiento de segundo nivel, el cual se mostraría en un navegador de una manera similar al
título «Marcado HTML» al principio de esta sección. El marcado estructural no define cómo se verá el
elemento, pero la mayoría de los navegadores web han estandarizado el formato de los elementos.
Puede aplicarse un formato específico al texto por medio de hojas de estilo en cascada.
5. Códigos HTML
relevancia.
<table>: define una tabla.
<tr>: fila de una tabla.
<td>: celda de una tabla (debe estar dentro de una fila).
básicos
<a>: hipervínculo o enlace, dentro o fuera del sitio web. Debe
definirse el parámetro de pasada por medio del atributo href. Por
ejemplo: <a href="http://www.wikipedia.org" title="Wikipedia"
<html>: define el inicio del documento HTML, le indica al navegador target="_blank" tabindex="1">Wikipedia</a> se representa como
que lo que viene a continuación debe ser interpretado como código Wikipedia).
HTML. Esto es así de facto, ya que en teoría lo que define el tipo de <div>: división de la página. Se recomienda, junto con css, en vez de
documento es el DOCTYPE, que significa la palabra justo tras <table> cuando se desea alinear contenido.
DOCTYPE el tag de raíz, por ejemplo: <img>: imagen. Requiere del atributo src, que indica la ruta en la que
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" se encuentra la imagen. Por ejemplo: <img
"http://www.w3.org/TR/html4/strict.dtd"> src="./imágenes/mifoto.jpg" />. Es conveniente, por accesibilidad,
<script>: incrusta un script en una web, o llama a uno mediante poner un atributo alt="texto alternativo".
src="url del script". Se recomienda incluir el tipo MIME en el <li><ol><ul>: etiquetas para listas.
atributo type, en el caso de JavaScript text/javascript. <b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la
<head>: define la cabecera del documento HTML; esta cabecera etiqueta <strong>).
suele contener información sobre el documento que no se muestra <i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la
directamente al usuario como, por ejemplo, el título de la ventana del etiqueta <em>).
navegador. Dentro de la cabecera <head> es posible encontrar: <s>: texto tachado (etiqueta desaprobada. Se recomienda usar la
Un ejemplo de código HTML con coloreado de sintaxis. etiqueta <del>).
<title>: define el título de la página. Por lo general, el título aparece <u>: texto subrayado.
en la barra de título encima de la ventana. La mayoría de etiquetas deben cerrarse como se abren, pero con una
<link>: para vincular el sitio a hojas de estilo o iconos. Por barra («/») tal como se muestra en los siguientes ejemplos:
ejemplo:<link rel="stylesheet" href="/style.css" type="text/css">. <table><tr><td>Contenido de una celda</td></tr></table>.
<style>: para colocar el estilo interno de la página; ya sea usando CSS <script>Código de un [[script]] integrado en la página</script>.
u otros lenguajes similares. No es necesario colocarlo si se va a
vincular a un archivo externo usando la etiqueta <link>.
<meta>: para metadatos como la autoría o la licencia, incluso para
indicar parámetros http (mediante http-equiv="") cuando no se
pueden modificar por no estar disponible la configuración o por
dificultades con server-side scripting.
<body>: define el contenido principal o cuerpo del documento. Esta es
la parte del documento html que se muestra en el navegador; dentro
de esta etiqueta pueden definirse propiedades comunes a toda la
página, como color de fondo y márgenes. Dentro del cuerpo <body> es
posible encontrar numerosas etiquetas. A continuación se indican
algunas a modo de ejemplo:
<h1> a <h6>: encabezados o títulos del documento con diferente
6. Nociones básicas de sitio que buscar la opción en el programa mismo.
Existe otro tipo de editores HTML llamados
HTML WYSIWYM que dan más importancia al contenido y al
significado que a la apariencia visual. Entre los
El lenguaje HTML puede ser creado y editado con objetivos que tienen estos editores es la separación
cualquier editor de textos básico, como puede ser del contenido y la presentación, fundamental en el
Gedit en Linux, el Bloc de notas de Windows, diseño web.
TextWrangler en mac, o cualquier otro editor que HTML utiliza etiquetas o marcas, que consisten en
admita texto sin formato como GNU Emacs, breves instrucciones de comienzo y final, mediante las
Microsoft Wordpad, TextPad, Notepad++, entre cuales se determina la forma en la que debe aparecer
otros. en su navegador el texto, así como también las
Existen, además, otros editores para la realización de imágenes y los demás elementos, en la pantalla del
sitios web con características WYSIWYG (What You ordenador.
See Is What You Get, o en español: «lo que ves es lo Toda etiqueta se identifica porque está encerrada
que obtienes»). Estos editores permiten ver el entre los signos menor que y mayor que (<>), y algunas
resultado de lo que se está editando en tiempo real. tienen atributos que pueden tomar algún valor. En
Ahora bien, esto no significa una manera distinta de general las etiquetas se aplicarán de dos formas
realizar sitios web, sino que una forma un tanto más especiales:
simple, ya que estos programas, además de tener la Se abren y se cierran, como por ejemplo:
opción de trabajar con la vista preliminar, tiene su <b>negrita</b>, que se vería en su navegador web como
propia sección HTML, la cual va generando todo el negrita.
código a medida que se va trabajando. Algunos No pueden abrirse y cerrarse, como <hr />, que se
ejemplos de editores WYSIWYG son KompoZer, vería en su navegador web como una línea horizontal.
Microsoft FrontPage o Adobe Dreamweaver. Otras que pueden abrirse y cerrarse, como por
Combinar estos dos métodos resulta muy interesante, ejemplo <p>.
ya que de alguna manera se ayudan entre sí. Por Las etiquetas básicas o mínimas son:
ejemplo, si se edita todo en HTML y de pronto se <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
olvida algún código o etiqueta, simplemente me dirijo 4.01//EN"
al editor visual o WYSIWYG y se continúa ahí la "http://www.w3.org/TR/html4/strict.dtd"> <html
edición o viceversa, ya que hay casos en que resulta lang="es"> <head> <title>Ejemplo</title> </head> <body>
más rápido y fácil escribir directamente el código de <p>ejemplo</p> </body> </html>
alguna característica que el usuario desea adherir al
7. Extensible Markup Language
Extensible Markup Language (XML) Desarrollador World Wide Web Consortium Información
general Extensión de archivo .xml Tipo de MIME application/xml, text/xml Tipo de formato
Lenguaje de marcado Estándar(es) 1.0 (Fourth Edition)
1.1 (Second Edition) Formato abierto ? XML, siglas en inglés de eXtensible Markup Language
('lenguaje de marcas extensible'), es un lenguaje de marcas desarrollado por el World Wide
Web Consortium (W3C). Deriva del lenguaje SGML y permite definir la gramática de lenguajes
específicos (de la misma manera que HTML es a su vez un lenguaje definido por SGML)para
estructurar documentos grandes. A diferencia de otros lenguajes XML da soporte a bases de
datos, siendo útil cuándo varias aplicaciones se deben comunicar entre sí o integrar
información. (Bases de datos Silberschatz).
XML no ha nacido sólo para su aplicación en Internet, sino que se propone como un estándar
para el intercambio de información estructurada entre diferentes plataformas. Se puede usar
en bases de datos, editores de texto, hojas de cálculo y casi cualquier cosa imaginable.
XML es una tecnología sencilla que tiene a su alrededor otras que la complementan y la hacen
mucho más grande y con unas posibilidades mucho mayores. Tiene un papel muy importante en
la actualidad ya que permite la compatibilidad entre sistemas para compartir la información de
una manera segura, fiable y fácil.
8. Historia
XML proviene de un lenguaje inventado por IBM en los años setenta, llamado GML (Generalized
Markup Language), que surgió por la necesidad que tenía la empresa de almacenar grandes
cantidades de información. Este lenguaje gustó a la ISO, por lo que en 1986 trabajaron para
normalizarlo, creando SGML (Standard Generalized Markup Language), capaz de adaptarse a
un gran abanico de problemas. A partir de él se han creado otros sistemas para almacenar
información.1
En el año 1989 Tim Berners Lee creó la web, y junto con ella el lenguaje HTML. Este lenguaje
se definió en el marco de SGML y fue de lejos la aplicación más conocida de este estándar. Los
navegadores web sin embargo siempre han puesto pocas exigencias al código HTML que
interpretan y así las páginas web son caóticas y no cumplen con la sintaxis. Estas páginas web
dependen fuertemente de una forma específica de lidiar con los errores y las ambigüedades, lo
que hace a las páginas más frágiles y a los navegadores más complejos.
Otra limitación del HTML es que cada documento pertenece a un vocabulario fijo, establecido
por el DTD. No se pueden combinar elementos de diferentes vocabularios. Asimismo es
imposible para un intérprete (por ejemplo un navegador) analizar el documento sin tener
conocimiento de su gramática (del DTD). Por ejemplo, el navegador sabe que antes de una
etiqueta <div> debe haberse cerrado cualquier <p> previamente abierto. Los navegadores
resolvieron esto incluyendo lógica ad hoc para el HTML, en vez de incluir un analizador
genérico. Ambas opciones, de todos modos, son muy complejas para los navegadores.
Se buscó entonces definir un subconjunto del SGML que permita:
Mezclar elementos de diferentes lenguajes. Es decir que los lenguajes sean extensibles.
La creación de analizadores simples, sin ninguna lógica especial para cada lenguaje.
Empezar de cero y hacer hincapié en que no se acepte nunca un documento con errores de
sintaxis.
9. Ventajas del XML
Es extensible: Después de diseñado y puesto en producción, es posible
extender XML con la adición de nuevas etiquetas, de modo que se pueda
continuar utilizando sin complicación alguna.
El analizador es un componente estándar, no es necesario crear un analizador
específico para cada versión de lenguaje XML. Esto posibilita el empleo de
cualquiera de los analizadores disponibles. De esta manera se evitan bugs y se
acelera el desarrollo de aplicaciones.
Si un tercero decide usar un documento creado en XML, es sencillo entender
su estructura y procesarla. Mejora la compatibilidad entre aplicaciones.
Podemos comunicar aplicaciones de distintas plataformas, sin que importe el
origen de los datos, es decir, podríamos tener una aplicación en Linux con una
base de datos Postgres y comunicarla con otra aplicación en Windows y Base
de Datos MS-SQL Server.
Transformamos datos en información, pues se le añade un significado
concreto y los asociamos a un contexto, con lo cual tenemos flexibilidad para
estructurar documentos.