CARIBBEAN INTERNATIONAL UNIVERSITY

Maestra en Educacin a Distancia E-Learning

Herramientas de Autora y Diseo de Entornos Virtuales
Prof. Saturno Silva M

Breve revisin del Lenguaje Html

Aaron Tescari
C.I 7955070

Noviembre 2014

INTRODUCCIN

El origen de HTML se remonta a 1980, cuando el fsico Tim Berners-Lee, trabajador

del CERN (Organizacin Europea para la Investigacin Nuclear) propuso un nuevo sistema
de "hipertexto" para compartir documentos.
Los sistemas de "hipertexto" haban sido desarrollados aos antes. En el mbito de la
informtica, el hipertexto" permita que los usuarios accedieran a la informacin relacionada
con los documentos electrnicos que estaban visualizando. De cierta manera, los primitivos
sistemas de "hipertexto"podran asimilarse a los enlaces de las pginas web actuales.
Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo present a una
convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet. Despus
de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta
ganadora llamadaWorldWideWeb (W3).
El primer documento formal con la descripcin de HTML se public en 1991 bajo el
nombre HTML Tags (Etiquetas HTML) y todava hoy puede ser consultado online a modo
de reliquia informtica.

EL HTML Y SU EVOLUCIN

La primera propuesta oficial para convertir HTML en un estndar se realiz en 1993 por
parte del organismo IETF (Internet Engineering Task Force). Aunque se consiguieron
avances significativos (en esta poca se definieron las etiquetas para imgenes, tablas y
formularios) ninguna de las dos propuestas de estndar, llamadas HTML y HTML+
consiguieron convertirse en estndar oficial.
En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el
22 de septiembre de ese mismo ao, el estndar HTML 2.0. A pesar de su nombre, HTML
2.0 es el primer estndar oficial de HTML.

A partir de 1996, los estndares de HTML los publica otro organismo de estandarizacin
llamadoW3C (World Wide Web Consortium). La versin HTML 3.2 se public el 14 de
Enero de 1997 y es la primera recomendacin de HTML publicada por el W3C. Esta revisin
incorpora los ltimos avances de las pginas web desarrolladas hasta 1996, como applets de
Java y texto que fluye alrededor de las imgenes.
HTML 4.0 se public el 24 de Abril de 1998 (siendo una versin corregida de la publicacin
original del 18 de Diciembre de 1997) y supone un gran salto desde las versiones anteriores.
Entre sus novedades ms destacadas se encuentran las hojas de estilos CSS, la posibilidad de
incluir pequeos programas o scripts en las pginas web, mejora de la accesibilidad de las
pginas diseadas, tablas complejas y mejoras en los formularios.
La ltima especificacin oficial de HTML se public el 24 de diciembre de 1999 y se
denomina HTML 4.01. Se trata de una revisin y actualizacin de la versin HTML 4.0, por
lo que no incluye novedades significativas.
Desde la publicacin de HTML 4.01, la actividad de estandarizacin de HTML se detuvo y
el W3C se centr en el desarrollo del estndar XHTML. Por este motivo, en el ao 2004, las
empresas Apple, Mozilla y Opera mostraron su preocupacin por la falta de inters del W3C
en HTML y decidieron organizarse en una nueva asociacin llamada WHATWG (Web
Hypertext Application Technology Working Group).
La actividad actual del WHATWG se centra en el futuro estndar HTML 5, cuyo primer
borrador oficial se public el 22 de enero de 2008. Debido a la fuerza de las empresas que
forman el grupo WHATWG y a la publicacin de los borradores de HTML 5.0, en marzo de
2007 el W3C decidi retomar la actividad estandarizadora de HTML.
De forma paralela a su actividad con HTML, W3C ha continuado con la estandarizacin de
XHTML, una versin avanzada de HTML y basada en XML. La primera versin de XHTML
se denomina XHTML 1.0 y se public el 26 de Enero de 2000 (y posteriormente se revis el
1 de Agosto de 2002).
XHTML 1.0 es una adaptacin de HTML 4.01 al lenguaje XML, por lo que mantiene casi
todas sus etiquetas y caractersticas, pero aade algunas restricciones y elementos propios de
XML. La versin XHTML 1.1 ya ha sido publicada en forma de borrador y pretende

modularizar XHTML. Tambin ha sido publicado el borrador de XHTML 2.0, que supondr
un cambio muy importante respecto de las anteriores versiones de XHTML.

HTML Y CSS

Originalmente, las pginas HTML slo incluan informacin sobre sus contenidos de texto e
imgenes. Con el desarrollo del estndar HTML, las pginas empezaron a incluir tambin
informacin sobre el aspecto de sus contenidos: tipos de letra, colores y mrgenes.

La posterior aparicin de tecnologas como JavaScript, provocaron que las pginas HTML
tambin incluyeran el cdigo de las aplicaciones (scripts) que se utilizan para crear pginas
web dinmicas.

Incluir en una misma pgina HTML los contenidos, el diseo y la programacin complica en
exceso su mantenimiento. Normalmente, los contenidos y el diseo de la pgina web son
responsabilidad de diferentes personas, por lo que es adecuado separarlos.

CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el
aspecto que deben presentar esos contenidos:

ESTRUCTURA DE UN DOCUMENTO HTML.

Otra ventaja de la separacin de los contenidos y su presentacin es que los documentos

XHTML creados son ms flexibles, ya que se adaptan mejor a las diferentes plataformas:
pantallas de ordenador, pantallas de dispositivos mviles, impresoras y dispositivos
utilizados por personas discapacitadas.

De esta forma, utilizando exclusivamente XHTML se crean pginas web "feas" pero
correctas. Aplicando CSS, se pueden crear pginas "bonitas" a partir de las pginas XHTML
correctas.

LENGUAJES DE ETIQUETAS

Uno de los retos iniciales a los que se tuvo que enfrentar la informtica fue el de cmo
almacenar la informacin en los archivos digitales.

La solucin que se emplea para guardar la informacin con formato es sencilla: el archivo
electrnico almacena tanto los contenidos como la informacin sobre el formato de esos
contenidos. Si por ejemplo se quiere dividir el texto en prrafos y se desea dar especial
importancia a algunas palabras, se podra indicar de la siguiente manera:
<parrafo>
Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma
especial.
</parrafo>
El principio de un prrafo se indica mediante la palabra <parrafo> y el final de un prrafo se
indica mediante la palabra </parrafo>. De la misma manera, para enfatizar ciertas palabras
del texto, se encierran entre <importante> e </importante>.

El proceso de indicar las diferentes partes que componen la informacin se denomina marcar
(markup en ingls). Cada una de las palabras que se emplean para marcar el inicio y el final
de una seccin se denominan etiquetas.

Aunque existen algunas excepciones, en general las etiquetas se indican por pares y se forman
de la siguiente manera:

Etiqueta de apertura: carcter <, seguido del nombre de la etiqueta (sin espacios en blanco)
y terminado con el carcter > Etiqueta de cierre: carcter <, seguido del carcter /, seguido
del nombre de la etiqueta (sin espacios en blanco) y terminado con el carcter >.

As, la estructura tpica de las etiquetas HTML es:

<nombre_etiqueta> ... </nombre_etiqueta>
HTML es un lenguaje de etiquetas (tambin llamado lenguaje de marcas) y las pginas web
habituales estn formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML"
de la sigla HTML significan markup language, que es como se denominan en ingls a los
lenguajes de marcas. Adems de HTML, existen muchos otros lenguajes de etiquetas como
XML, SGML, DocBook y MathML.

La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir
por parte de las personas y de los sistemas electrnicos. La principal desventaja es que pueden
aumentar mucho el tamao del documento, por lo que en general se utilizan etiquetas con
nombres muy cortos.

MARCAS Y ATRIBUTOS.

El lenguaje HTML se estructura utilizando marcas o etiquetas o comandos (a partir de ahora

utilizaremos indistintamente uno de 3 trminos para denominar a los elementos que se
estructura HTML). La forma general de una marca es la de un comando HTML encerrado
entre dos signos de menor y mayor como a continuacin se muestra:

<marca [atributos]> ......................................[</marca>]

El mecanismo de funcionamiento de estas marcas es muy sencillo. Cuando el visualizador

encuentra el signo menor (<), examina todos los caracteres hasta que encuentra el final de la
marca - el smbolo mayor (>). Entonces, interpreta el contenido de la marca, y aplica esa
propiedad al texto que viene a continuacin.

Hay marcas que se aplican a todo el documento HTML, o slo desde el punto en que son
insertadas hasta el final del documento. Otras se aplican exclusivamente a un fragmento del
texto. En ese caso, el final de la aplicacin se especifica con la misma marca precedida de la
barra inclinada hacia atrs (/).

Las marcas pueden contener de forma opcional u obligatoria, lo que se denominan atributos
o modificadores. Los atributos matizan el significado de la marca, y que se expresan de la
siguiente forma:

<marca atrib1=valor1 atrib2=valor2..............>

El valor de los atributos se expresan encerrados entre comillas.

En la mayor parte de los visualizadores es posible omitir las comillas y colocar directamente
el valor del atributo. Esta prctica. a pesar de estar extendida, no es muy aconsejable ya que
no est normalizada, y no esta soportada por la totalidad de los visualizadores.

Algunos atributos slo viene definidos por su nombre (no tienen valor); son los atributos
llamados compactos.

En HTML existen algunos caracteres que son especiales porque juegan un papel dentro del
mecanismo del funcionamiento de HTML, como sucede con los smbolos mayor que (>) y

menor que (<), y otros porque en los primeros tiempos de HTML, no formaban parte del
juego de caracteres internacionales del alfabeto, como sucede con los acentos.

Sea por los motivos que fuere, el caso es que existen ciertos smbolos que no pueden
escribirse directamente, sino que deben sustituirse por una cadena de caracteres que el
visualizador interpretar de forma correcta. Estas cadenas de caracteres comienzan siempre
por el smbolo (&) seguido de una combinacin de caracteres alfabticos que tienen un
significado especial en HTML. En la siguiente tabla se muestra cmo escribir algunos de
estos caracteres:

Carcter especial

Transcripcin HTML

Comentario

Los acentos

&<vocal a acentuar> acute; En la actualidad la mayora

de los browsers los soportan

Smbolo menor que (<)

&lt:

Smbolo mayor que (>)

&gt;

La ee

&ntilde;

En la actualidad la mayora
de los browsers la soportan

Espacios en blanco

&nbsp; (non breaking space) HTML slo reconoce un

espacio en blanco entre
palabras

Un documento HTML, no es ms que el texto definido entre las marcas:

<HTML>
.....................
</HTML>
Un documento HTML siempre se compone de las siguientes 2 partes:

<HTML>

<HEAD> Cabecera del documento

</HEAD>

<BODY> Contenido del documento

</BODY>

</HTML>

Cabecera: Se inicia mediante el comando <HEAD> y se termina con </HEAD>. Dentro

de la cabecera hay informacin del documento, que no se ve en la pantalla principal, y
que precisa las caractersticas del documento, principalmente el ttulo del documento.
El ttulo del documento se declara entre las etiquetas <TITLE> y </TITLE>. El ttulo
debe ser breve y descriptivo de su contenido, pues ser lo que vean los dems cuando
aadan nuestra pgina a su bookmark (o agenda de direcciones favoritas).

Cuerpo: se inicia mediante el comando <BODY> y se termina con el comando

</BODY>. Este comando acepta numerosos modificadores. Dentro del cuerpo del
documento se incluye cualquier carcter imprimible.

En la prctica algunos visualizadores no necesitan las etiquetas de comienzo y cierre de

<HTML>, <HEAD>, y <BODY> para interpretar un documento HTML. Sin embargo,
cuando diseemos un pgina Web debemos tener en cuenta a la mayora de usuarios posibles,
por lo que es muy recomendable incluir estas marcas.

MAQUETACIN

Cuando nos disponemos a desarrollar una pgina web una de las primeras tareas que
realizamos es definir la estructura de la pgina. Bsicamente hay 2 formas de hacerla: usando
tablas o CSS. Hace poco tiempo, la forma ms utilizada era hacindolo con tablas, aunque
por suerte esta tendencia se va eliminando.
Maquetar con tablas no es una buena opcin por diversas razones:

Las tablas no fueron diseadas para otra cosa que para mostrar datos, en ningn momento
fueron pensadas para maquetar.

Maquetar sin tablas mejora la separacin entre el contenido de la presentacin, pudiendo

mantener los estilos en ficheros separados.

Modificar un diseo hecho con tablas es complicado.

La aparicin de las capas proporcion nuevas formas de maquetado distintas al maquetado
con tablas, aunque a pesar de todo esto, la maquetacin con css tampoco es sencilla , por lo
que surgen diversos frameworks CSS con el nico cometido de maquetar, de los cuales
vamos a ver como funciona uno de ellos 960 Grid System. Actualmente se trabaja
activamente en la definicin dentro del estndar css3 de un sistema nativo de maquetado en
rejilla sin necesidad de de usar frameworks (Grid layout).
A continuacin vemos unos ejemplos de maquetacin haciendo uso de tablas, css, y css con
framework 960 Grid System.
Maquetado con tablas

Maquetado con css

Maquetado con framework css 960 Grid System
Maquetacin con 960 Grid System
En esta seccin aprenderemos a maquetar una pgina con el framework 960 Grid System,
este framework nos permitir de una forma mucho ms sencilla que con tablas o css puro
maquetar nuestras pginas.
Con manejar tan solo 7 conceptos de este framework podremos maquetar cualquier diseo
que deseemos.
En 960Grid nuestra unidad de medida son las columnas definimos cada parte del diseo
en base al nmero de columnas de ancho que tiene.
Partimos con una capa a la que le asignamos una clase llamada container_16 (en el caso de
que el grid sea de 16 columnas, en otro caso el numero sera otro), dentro de esta vamos
poniendo capas que tienen como una de sus clases grid_x donde x es el nmero de columnas
que tiene de ancho. Hasta 16 columnas (en el caso de que sean 16 columnas el ancho total)
podemos tener de ancho repartidas en 1 o ms bloques no debiendo sumar entre todas mas
de el total. Cuando ya hemos completado una fila debemos colocar <div
class="clear"> </div> esto cancela la flotacin de las capas lo que permite que la siguiente
capa escrita en el cdigo caiga en la siguiente fila.
Adems de la clase grid_X (grid_1, grid_2 ...) a las capas podemos aadir 6 tipos de clases
ms, estas son:

alpha: Elimina el margen izquierdo.

omega: Elimina el margen derecho.

prefix_x: Deja x huecos antes de colocar la capa por lo que estas se posicionar despus.

sufix_x: Deja x huecos despus de colocar la capa por lo que la siguiente capa se posicionar
despus.

push_x: Nos permite mover libremente x columnas la capa hacia la derecha, sin que esto
afecte al resto de capas.

pull_x: Nos permite mover libremente x columnas la capa hacia la izquierda, sin que esto
afecte al resto de capas.
Adems podemos anidar capas unas dentro de otras como podemos ver en los ejemplos
de abajo ( capa con fondo azul), pero debemos tener en cuenta que los mrgenes izquierdos
y derechos se suman por lo que si sumamos los del contenedor y los de las capas de dentro
sobrepasamos el ancho mximo y el bloque se nos va abajo, para evitar esto slo tenemos
que eliminar el margen izquierdo del primer elemento contenido con alpha y el margen
derecho del ltimo elemento contenido con omega.
EJEMPLO DE MAQUETADO 1

En este primer ejemplo creamos una capa de 6 columnas de ancho colocada a la derecha del
grid, esto lo hemos conseguido aadiendole las clase css grid_6 y prefix_10, grid_6 por el
ancho de 6 columnas , prefiz_10 por las 10 columnas sin nada que quedan a la izquierda de
esta capa. En esta capa podriamos colocar un formulario de bsqueda o de login por ejemplo.
Ahora colocamos una cabecera que ocupe todo el ancho del grid, para ello le ponemos la
clase grid_16 sin nada ms. Recordad que cada vez que completemos una fila debemos aadir
una capa con la clase clear para cancelar la flotacin.
Colocamos la seccin de contenido de nuestra web a la izquierda con un ancho de 10
columnas ( Una relacin de ~ 2/3 entre la anchura del contenido y la barra lateral) para lo
cual le asignamos la clase grid_10. Luego definimos la barra lateral de 6 columnas (grid_6).
En el pie nos encontramos con el problema de las capas anidades que al sumar sus anchos y
margenes superan el mximo y se desbordan. Fjese cmo lo solucionamos aadiendo a la
primera capa la clase alpha y a la ltima capa la clase omega.
Finalmente colocamos una capa de 16 columnas en las que colocaremos la informacin del
copiright.
En este ejemplo no se ha hecho uso ni de sufix_x ni de pull_x y push_x. Podriamos probar
por ejemplo a intercambiar la posicion de las secciones de contenido y barra lateral con las

clases pull_x y push_x, concretamente pondramos grid_6 pull_10 a la barra lateral y grid_10
push_6 a la seccin de contenido.

container_16

// Contenedor principal

grid_6 prefix_10 // Buscar

clear

grid_16

// Cabecera

clear

grid_10

// Seccin de contenido

grid_6

// Barra lateral

clear

grid_16
grid_10 alpha
grid_3
grid_3 omega

// Seccin de links del pie de pgina

// Subcol 1
// Subcol 2

clear
clear

grid_16
clear

// Informacin de copiright

CONCLUSIONES

El html es el lenguaje nativo, sin el, no existira el Internet tal y como lo conocemos, si no
se hubiera inventado, seguiramos con el aburrido FTP (Protocolo de Transferencia de
Ficheros) mandndonos o bajando archivos que a veces ni sabamos lo que eran, sin tener la
posibilidad de visualizarlo antes. Ahora por medio de una pgina llena de colores y botones
por la cual se puede navegar, se puede tener acceso a bastante informacin y archivos.
El lenguaje de HTML abri una puerta al mundo permitindole a las personas expresar sus
ideas por medio de pginas y mostrrselas a todas las personas de todos los pases.
Con

el

HTML

se

logr

un

gran movimiento econmico

ya

que

muchsimas empresas publican, venden, y ofrecen sus productos, sus servicios y sus ofertas
atrayendo a mayor cantidad de personas. Tambin gracias al HTML nacieron muchas
empresas que ofrecen diversos servicios.
Infinitas son las posibilidades que te brindan las pginas WEB ya que no solo te dan la
posibilidad de pasar el tiempo navegando, sino que tambin hasta se puede comprar un auto
por Internet, solo basta con llenar un formulario con los datos personales y
el nmero de tarjeta de crdito

y en ocho das lo tenemos en nuestra casa.

Todo el universo de Internet se lo debemos al HTML, ya que todas las pginas con las que
se compone la World Wide Web estn hechas con el lenguaje de programacin HTML.

REVISIN BIBLIOGRFICA
Calderoni, Jos Pacheco, Edith . Red Revista Latinoamericana de Estudios Educativos.
El hipertexto como nuevo recurso didctico [en lnea]; Disponible en:
http://site.ebrary.com/lib/bibliociuvirtualsp/docDetail.action?docID=10117094&p00=lengu
aje+hypertexto
Html y CSS http://librosweb.es/css/
Curso de Html http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf