Contenido

PRIMERAS ESPECIFICACIONES...........................................................................................3
MARCADO HTML...................................................................................................................3
ELEMENTOS.......................................................................................................................3
ATRIBUTOS........................................................................................................................4
CÓDIGOS HTML BÁSICOS...................................................................................................4
NOCIONES BÁSICAS DE HTML............................................................................................6
SABER MÁS........................................................................................................................7
HISTORIA DEL ESTÁNDAR..................................................................................................7
ACCESIBILIDAD WEB..........................................................................................................8
ENTIDADES HTML..............................................................................................................8
REFERENCIA HTML.............................................................................................................9
CODIFICACIÓN DE CARACTERES.....................................................................................9
CÓDIGOS DE COLORES HTML..........................................................................................10
Mapa de colores..............................................................................................................11
CÓDIGOS DE COLORES HTML..........................................................................................11
Cambiando tonos.........................................................................................................11
Mapa de colores...........................................................................................................11
CÓDIGOS DE LENGUAJE...................................................................................................11
CÓDIGOS DE PAÍS...............................................................................................................12
EVENTOS EN HTML..........................................................................................................12
LISTA DE EVENTOS.......................................................................................................12
DEFINICIÓN DE URI Y URL................................................................................................13
REFERENCIA DE ENTIDAD DE CARACTERES (CHARACTER ENTITY REFERENCE)..............13
Tag HTML.........................................................................................................................14
Tags y atributos desaprobados en HTML.........................................................................14
TIPOS EN HTML................................................................................................................15
LISTA DE TIPOS.............................................................................................................15
REFERENCIA DE CASE-SENSITIVITY..................................................................................18
TIPOS MIME......................................................................................................................18
Bibliografía..........................................................................................................................20
Error: Reference source not found

1
 HTML

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es

el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para

2
describir la estructura y el contenido en forma de texto, así como para complementar el
texto con objetos tales como imágenes. 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.
HTML también es usado 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).

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 comprendiendo 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, reflejando la filosofía del IETF de basar estándares
en prototipos con éxito. [] Similarmente, el boceto competidor de Dave Raggett HTML+
(Hypertext Markup Format) (Formato de marcaje de hipertexto), de 1993 tardío, sugería,
estandarizar características ya implementadas tales como tablas.[]

MARCADO HTML
HTML consta de varios componentes vitales, incluyendo elementos y sus atributos, tipos
de data, y la declaración de tipo de documento.

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 (p.ej. <nombre-de-elemento>) y una etiqueta
de cierre (p.ej. </nombre-de-elemento>). Los
atributos del elemento están contenidos en la
etiqueta de inicio y el contenido está ubicado
entre las dos etiquetas (p.ej. <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.

3
El marcado estructural describe el propósito del texto. Por ejemplo, <h2>Golf</h2>
establece a "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. Un formato específico
puede ser aplicado al texto por medio de hojas de estilo en cascada.
El marcado presentacional describe la apariencia del texto, sin importar su función. Por
ejemplo, <b>negrita</b> indica que los navegadores web visuales deben mostrar el texto
en negrita, pero no indica qué deben hacer los navegadores web que muestran el
contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En el caso de
<b>negrita</b> e <i>itálica</i>, existen elementos que se ven de la misma manera pero
tienen una naturaleza más semántica: <strong>enfásis fuerte</strong> y <em>énfasis</em>. Es
fácil ver cómo un lector de pantalla debería interpretar estos dos elementos. Sin embargo,
son equivalentes a sus correspondientes elementos presentacionales: un lector de
pantalla no debería decir más fuerte el nombre de un libro, aunque éste esté en itálicas en
una pantalla. La mayoría del marcado presentacional ha sido desechada con HTML 4.0, en
favor de Hojas de estilo en cascada.
El marcado hipertextual se utiliza para enlazar partes del documento con otros
documentos o con otras partes del mismo documento. Para crear un enlace es necesario
utilizar la etiqueta de ancla <a> junto con el atributo href, que establecerá la dirección URL
a la que apunta el enlace. Por ejemplo, un enlace a la Wikipedia sería de la forma <a
href=”es.wikipedia.org”>Wikipedia</a>. También se pueden crear enlaces sobre otros objetos,
tales como imágenes <a href=”enlace”><img src=”imagen” /></a>.

ATRIBUTOS
La mayoría de los atributos de un elemento son pares nombre-valor, separados por un
signo de igual "=" y escritos en la etiqueta de comienzo de un elemento, después del
nombre de éste. El valor puede estar rodeado por comillas dobles o simples, aunque
ciertos tipos de valores pueden estar sin comillas en HTML (pero no en XHTML). [] De todas
maneras, dejar los valores sin comillas es considerado poco seguro. [] En contraste con los
pares nombre-elemento, hay algunos atributos que afectan al elemento simplemente por
su presencia (tal como el atributo ismap para el elemento img).[]

CÓDIGOS HTML BÁSICOS

• <html>: define el inicio del documento HTML, le indica al navegador que lo
que viene a continuación debe ser interpretado como código HTML. Esto es
así de facto, ya que en teoría lo que define el tipo de documento es el
DOCTYPE, significando la palabra justo tras DOCTYPE el tag de raíz, por
ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
• <script>: incrusta un script en una
web, o se llama a uno mediante
src="uri del script" Se recomienda
incluir el tipo MIME en el atributo
type, en el caso de JavaScript
text/javascript.

4
 • <head>: define la cabecera del documento HTML, esta cabecera suele
contener información sobre el documento que no se muestra directamente al
usuario. Como por ejemplo el título de la ventana del navegador. Dentro de la
cabecera <head> podemos encontrar:

• Un ejemplo de código HTML con coloreado de sintaxis.

• <title>: define el título de la página. Por lo general, el título aparece en la barra de
título encima de la ventana
<link>: para vincular el sitio a hojas de estilo o iconos Por ejemplo:<link rel="stylesheet"
href="/style.css"

• type="text/css">
• <style>: para colocar el estilo interno de la página; ya sea usando CSS, 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> podemos encontrar numerosas etiquetas. A
continuación se indican algunas a modo de ejemplo:
• <h1> a <h6>: encabezados o títulos del documento con diferente relevancia.
• <table>: define una tabla
• <tr>: fila de una tabla
• <td>: columna de de una tabla
• <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">Wikipedia</a> se representa como Wikipedia)
• <div>: división de la página. Se recomienda, junto con css, en vez de <table>
cuando se desea alinear contenido
• <img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra
la imagen. Por ejemplo: <img src="./imagenes/mifoto.jpg" />. Es conveniente, por
accesibilidad, poner un atributo alt="texto alternativo".
• <li><ol><ul>: Etiquetas para listas.
• <b>: texto en negrita (Etiqueta desaprobada. Se recomienda usar la etiqueta
<strong>)
• <i>: texto en cursiva (Etiqueta desaprobada. Se recomienda usar la etiqueta
<em>)
• <s>: texto tachado (Etiqueta desaprobada. Se recomienda usar la etiqueta <del>)
• <u>: texto subrayado
La mayoría de etiquetas deben cerrarse como se abren, pero con una barra ("/") tal como
se muestra en los siguientes ejemplos:
• <table><tr><td>Contenido de una celda</td></tr></table>
• <script>Código de un [[script]] integrado en la página</script>.

5
 NOCIONES BÁSICAS DE HTML
El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como
puede ser Gedit en Linux, el Bloc de Notas de Windows, o cualquier otro editor que admita
texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, entre
otros.
Existen además, otros editores para la realización de sitios Web con características
WYSIWYG (What You See Is What You Get, o en español: “lo que ves es lo que obtienes”).
Estos editores permiten ver el resultado de lo que se está editando en tiempo real, a
medida que se va desarrollando el documento. Ahora bien, esto no significa una manera
distinta de realizar sitios web, sino que una forma un tanto más simple ya que estos
programas, además de tener la opción de trabajar con la vista preliminar, tiene su propia
sección HTML la cual va generando todo el código a medida que se va trabajando. Algunos
ejemplos de editores WYSIWIG son Macromedia Dreamweaver, o Microsoft FrontPage.
Combinar estos dos métodos resulta muy interesante, ya que de alguna manera se
ayudan entre sí. Por ejemplo; si se edita todo en HTML y de pronto se olvida algún código
o etiqueta, simplemente me dirijo al editor visual o WYSIWYG y se continúa ahí la edición,
o viceversa, ya que hay casos en que sale más rápido y fácil escribir directamente el
código de alguna característica que queramos adherirle al sitio, que buscar la opción en el
programa mismo.
Existe otro tipo de editores HTML llamados WYSIWYM (Lo que ves es lo que quieres decir)
que dan más importancia al contenido y al significado que a la apariencia visual. Entre los
objetivos que tienen estos editores es la separación del contenido y la presentación,
fundamental en el diseño Web.
HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y
final, mediante las cuales se determina la forma en la que debe aparecer en su navegador
el texto, así como también las imágenes y los demás elementos, en la pantalla del
ordenador.
Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor que
(<>), y algunas tienen atributos que pueden tomar algún valor. En general las etiquetas
se aplicarán de dos formas especiales:
• Se abren y se cierran, como por ejemplo: <b>negrita</b> que se vería en su navegador
web como negrita.
• No pueden abrirse y cerrarse, como <hr> que se vería en su navegador web como una línea
horizontal.
• Otras que pueden abrirse y cerrarse, como por ejemplo <p>.
• Las etiquetas básicas o mínimas son:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Ejemplo</title>
</head>
<body>
<p>ejemplo</p>
</body>
</html>

6
 SABER MÁS
Seleccionando la opción Ver código fuente en el navegador, se puede ver realmente la
información que está recibiendo éste y cómo la está interpretando. Por ejemplo: en
Internet Explorer o en Firefox, simplemente hay que desplegar el menú Ver y luego elegir
Código fuente. De esta forma, se abrirá el editor de texto configurado como
predeterminado en el sistema con el código fuente de la página que se esté viendo en ese
momento en el explorador. Otra forma más rápida consiste en hacer clic con el botón
derecho del ratón en cualquier punto del área donde el navegador muestra la página web
y elegir Ver código fuente.
Para el navegador Firefox existe el plugin FireBug, un depurador que permite entre otras
cosas visualizar el código HTML de la página que estamos visualizando de forma dinámica,
y que incluso resalta el trozo de código por el que está pasando el ratón en cada
momento, por lo que es una herramienta muy útil para aprender diversos conceptos de
este lenguaje.

HISTORIA DEL ESTÁNDAR

En 1989 existían dos técnicas que permitían vincular documentos electrónicos, por un lado
los hipervínculos (links) y por otro lado un poderoso lenguaje de etiquetas denominado
SGML. Por entonces, Tim Berners-Lee da a conocer a la prensa que estaba trabajando en
un sistema que permitirá acceder a ficheros en línea, funcionando sobre redes de
computadoras o máquinas electrónicas basadas en el protocolo TCP/IP.
A principios de 1990, Tim Berners-Lee define por fin el HTML como un subconjunto del
conocido SGML y crea algo más valioso aún, el World Wide Web. En 1991, Tim Berners-Lee
crea el primer navegador web, que funcionaría en modo texto y sobre un sistema
operativo UNIX.
Los trabajos para crear un sucesor del HTML, denominado HTML +, comenzaron a finales
de 1993. HTML+ se diseñó originalmente para ser un superconjunto del HTML que
permitiera evolucionar gradualmente desde el formato HTML anterior. A la primera
especificación formal de HTML+ se le dio, por lo tanto, el número de versión 2 para
distinguirla de las propuestas no oficiales previas. Los trabajos sobre HTML+ continuaron,
pero nunca se convirtió en un estándar, a pesar de ser la base formalmente más parecida
al aspecto compositivo de las especificaciones actuales.
El borrador del estándar HTML 3.0 fue propuesto por el recién formado W3C en marzo de
1995. Con él se introdujeron muchas nuevas capacidades, tales como facilidades para
crear tablas, hacer que el texto fluyese alrededor de las figuras y mostrar elementos
matemáticos complejos. Aunque se diseñó para ser compatible con HTML 2.0, era
demasiado complejo para ser implementado con la tecnología de la época y, cuando el
borrador del estándar expiró en septiembre de 1995, se abandonó debido a la carencia de
apoyos de los fabricantes de navegadores web. El HTML 3.1 nunca llegó a ser propuesto
oficialmente, y el estándar siguiente fue el HTML 3.2, que abandonaba la mayoría de las
nuevas características del HTML 3.0 y, a cambio, adoptaba muchos elementos
desarrollados inicialmente por los navegadores web Netscape y Mosaic. La posibilidad de
trabajar con fórmulas matemáticas que se había propuesto en el HTML 3.0 pasó a quedar
integrada en un estándar distinto llamado MathML.
El HTML 4.0 también adoptó muchos elementos específicos desarrollados inicialmente
para un navegador web concreto, pero al mismo tiempo comenzó a limpiar el HTML
señalando algunos de ellos como «desaprobados» o deprecated en inglés.

7
ACCESIBILIDAD WEB
El diseño en HTML aparte de cumplir con las especificaciones propias del lenguaje debe
respetar unos criterios de accesibilidad web, siguiendo unas pautas, o las normativas y
leyes vigentes en los países donde se
regule dicho concepto. Se encuentra
Carácter Entidad HTML Carácter Entidad HTML disponible y desarrollado por el W3C a
través de las Pautas de Accesibilidad al
Contenido Web 1.0 WCAG (actualizadas
á &aacute; Á &Aacute; recientemente con la especificación 2.0[12] ),
aunque muchos países tienen
especificaciones propias, como es el caso
é &eacute; É &Eacute; de España con la Norma UNE 139803.

ENTIDADES HTML
í &iacute; Í &Iacute;
Los caracteres especiales como signo de
puntuación, letras con tilde o diéresis, o
símbolos del lenguaje; se deben convertir
ó &oacute; Ó &Oacute; en entidad HTML para mostrarse en un
navegador. La siguiente es una lista de
caracteres españoles y su correspondiente
ú &uacute; Ú &Uacute; entidad HTML:

ü &uuml; Ü &Uuml;

ñ &ntilde; Ñ &Ntilde;

¡ &iexcl; ¿ &iquest;

8
REFERENCIA HTML
Referencia HTML (lenguaje de marcas hipertextual) es un conjunto de recursos diseñados
por HTMLQuick.com para servir como guía a autores de documentos HTML, sin importar si
son principiantes o avanzados en el uso del código HTML. Los principiantes pueden usar
esta referencia en conjunto con los tutoriales HTML para comenzar a desarrollar y probar
sus primeras páginas mientras que los autores avanzados pueden usarla para recurrir a
ella cada vez que olvidan alguna característica o cuando tienen dudas acerca de algún
aspecto del código HTML.
Esta referencia HTML, así como todo el sitio, alienta a los autores a hacer uso de las
"buenas técnicas" de programación, lo cual brindará al final algunos beneficios que
solamente pueden ser logrados al escribir el código HTML manualmente. Estas "buenas
técnicas" no solo ayudarán a los autores a escribir un código más limpio y fácil de
comprender, sino que también reducirán el tamaño de los archivos, evitarán
ambigüedades (muy importante para crear páginas compatibles con todos los
navegadores), y proporcionarán información extra a los navegadores y motores de
búsqueda, lo cual resulta de gran ayuda en la promoción de sitios. Por esta razón nuestra
primera recomendación es escribir código XHTML (lenguaje de marcas hipertextual
extensible), el cual es una variación de HTML 4.01 (con pequeñas diferencias) que hace a
una página web disponible para otras plataformas como PDAs (asistente personal digital)
o teléfonos celulares (estimados a ser ampliamente utilizados en un futuro).
El recurso más importante de nuestra referencia HTML es la sección de tags (etiquetas)
HTML, la cual provee vínculos a páginas con descripciones y ejemplos para cada tag del
estándar HTML 4.01. Otros recursos útiles para escribir documentos HTML son listados a
continuación. Recuerda que siempre buscamos agregar todos los recursos que un autor de
documentos HTML pueda necesitar, de modo que no dudes en escribirnos con
recomendaciones, propuestas y correcciones acerca de estos recursos.
• Codificación de caracteres
• Códigos de colores HTML
• Códigos de lenguaje
• Códigos de país
• Definición de URI y URL
• Eventos en HTML
• Referencia de entidad de caracteres (character entity reference)
• Tag HTML
• Tags y atributos desaprobados en HTML
• Tipos en HTML
• Tipos MIME []

9
 CODIFICACIÓN DE CARACTERES
Si pudieras ver una conversación entre computadoras, esta probablemente se vería algo
así: "010110111011101011010010110...". Esta es la forma que las computadoras utilizan
para comunicarse entre sí. La razón de la existencia de la codificación de caracteres es
que sería muy difícil para nosotros comprender este lenguaje de ceros y unos (bits).
Lo que una codificación de caracteres de n-bits hace, es separar este código de bits en
grupos de n bits cada uno, y asignar el símbolo que corresponde a esa secuencia
ordenada. En una forma más sencilla, una codificación de caracteres o set de caracteres
puede ser considerada como una tabla de traducción, donde cada grupo de bits está
relacionado con un solo carácter. Por ejemplo, un set de caracteres de 8 bits podría
representar a la secuencia "10010101" con una letra "a", a la secuencia "01101100" como
el símbolo "&", y así sucesivamente.
Las codificaciones de caracteres son ampliamente utilizadas (aun cuando no nos damos
cuenta de ello) entre sistemas operativos así como también en documentos HTML
(lenguaje de marcas hipertextual). Nacieron con las computadoras desde que hubo una
necesitad de traducir códigos de computadora a texto legible para humanos. En el
comienzo, las codificaciones de caracteres fueron creadas o utilizadas por vendedores de
equipos y diseñadas para llenar las necesidades de cada uno de ellos así como del
lenguaje al que apuntaban sus ventas. Esto creó un efecto de expansión que dio como
resultado un gran número de codificaciones de caracteres, cada una de ellas dando
soporte a caracteres de distintos lenguajes o para diferentes usos.
El Estándard Industrial Unicode (Unicode Industrial Standard) tiene por objetivo
reemplazar y unificar las codificaciones de caracteres existentes con el fin de reducir su
número y mejorar su efectividad (resolviendo carencias de otras codificaciones). El
estándar Unicode codifica caracteres usando diferentes esquemas llamados Formatos de
Transformación Unicode (UTF).
El UTF-8 es un set de caracteres de 8-bits de longitud variable para Unicode que está
volviéndose muy popular para Internet debido a su capacidad para representar todos los
caracteres universales aún siendo compatible con ASCII (código estándar americano para
intercambio de información). UTF-8 usa de 1 a 4 bytes para codificar un carácter simple (8
a 32 bits) dependiendo del símbolo Unicode.
Un documento HTML utilizando el set de caracteres UTF-8 debería contener una
declaración en su encabezado realizada mediante el tag HTML meta (por ejemplo, <meta
http-equiv="content-type" content="text/html; charset=ISO-8859-1">). Los símbolos
pueden ser insertados en este tipo de documentos usando un código simple que se asocia
a un carácter específico, como por ejemplo &#931; (notación decimal), o &#x3A3;
(notación hexadecimal) el cual mostrará la letra griega mayúscula "Sigma" ("Σ"). La
graficación de símbolos Unicode depende del tipo de fuente utilizada por el navegador, y
la mayoría de ellas no da soporte para todos los caracteres en el estándar Unicode (los
caracteres no soportados son mostrados como cuadrados o signos de interrogación).

CÓDIGOS DE COLORES HTML

Los colores en HTML son construidos usando una combinación de tres colores básicos:
rojo, verde y azul. Cada uno de estos colores toma un valor entre 0 y 255 y son
representados en notación hexadecimal (00 a FF). De esta forma, un color está compuesto
por seis caracteres donde los dos primeros representan el valor para el rojo, los dos

10
segundos representan el valor para el verde y los dos terceros representan el valor para el
azul (por ejemplo, el rojo tiene FF para el valor rojo y 00 para el resto: "FF0000").
Al mezclar estos colores se mezclan los colores, de modo que puedes hacer un amarillo
mezclando el rojo y el verde (por ejemplo, "FFFF00"), violeta mezclando el rojo y el azul
(por ejemplo, "FF00FF") o cyan mezclando verde y azul (por ejemplo, "00FFFF"). Esto
funciona exactamente como la paleta de un pintor.
El tono del color también puede ser variado incrementando (por ejemplo, violeta claro
"FF66FF") o decrementando (por ejemplo, violeta oscuro "AA00AA") los tres valores
proporcionalmente.
Nota: por la naturaleza de esta página, los no videntes pueden encontrar el siguiente
mapa de colores escasamente útil.

Mapa de colores
Este mapa de colores muestra un amplio conjunto de colores HTML que pueden ser usados en
documentos HTML. El propósito de este mapa es simplemente mostrar algunos colores disponibles.
La funcionalidad extra está solamente disponible en navegadores que soporten JavaScript, y
permite a los usuarios hacer una vista previa de una determinada selección de colores en un
documento ejemplo.
Principio del formulario

Fondo: #F4F4F4

Primer encabezado: #FFBF00

Primer párrafo: #555555

Segundo encabezado: #FFBF00

Segundo párrafo: #555555

Fondo del panel derecho: #99CCFF

Borde del panel derecho: #007FFF

Título del panel derecho: #FFFFFF

Texto del panel derecho: #555555

CÓDIGOS DE COLORES HTML

Cambiando tonos
El tono
del color también puede ser variado incrementando (por ejemplo, violeta claro "FF66FF") o
decrementando (por ejemplo, violeta oscuro "AA00AA") los tres valores proporcionalmente.

11
Los colores en HTML son construidos usando una combinación de tres colores básicos:
rojo, verde y azul. Cada uno de estos colores toma un valor entre 0 y 255 y son
representados en notación hexadecimal (00 a FF). De esta forma, un color está compuesto
por seis caracteres donde los dos primeros representan el valor para el rojo, los dos
segundos representan el valor para el verde y los dos terceros representan el valor para el
azul (por ejemplo, el rojo tiene FF para el valor rojo y 00 para el resto: "FF0000").
Mapa de colores
Este mapa de colores muestra un amplio conjunto de colores HTML que pueden ser
usados en documentos HTML. El propósito de este mapa es simplemente mostrar algunos
colores disponibles. La funcionalidad extra está solamente disponible en navegadores que
soporten JavaScript, y permite a los usuarios hacer una vista previa de una determinada
selección de colores en un documento ejemplo.

CÓDIGOS DE LENGUAJE
Los códigos de lenguaje son ampliamente utilizados en los atributos HTML (lenguaje de
marcas hipertextual), y usualmente definen el lenguaje del contenido al cual refieren.
Algunas veces, los códigos de lenguaje son también asociados a un lenguaje regional
específico en la forma "CódigoLenguaje-CódigoPaís" (por ejemplo, en-us para el inglés
estadounidense).

CÓDIGOS DE PAÍS
Los códigos de país son ampliamente usados en los atributos HTML (lenguaje de marcas
hipertextual), y usualmente especifican el país para el cual el contenido referido ha sido
diseñado. Algunas veces los códigos de lenguaje son también asociados a un lenguaje
regional específico en la forma "CódigoLenguaje-CódigoPaís" (por ejemplo, en-us para el
inglés estadounidense).

EVENTOS EN HTML
Así como los atributos, los eventos pueden ser definidos en tags HTML (lenguaje de
marcas hipertextual). Los eventos, en lugar de dar valores a los elementos como lo hacen
los atributos, ejecutan acciones cuando ocurren. Estas acciones son definidas por un script
del "lado cliente", que son programas escritos para realizar cierta acción en un lenguaje
específico (por ejemplo, JavaScript, VBScript, etc.). Existen diferentes eventos que se
disparan en diferentes instancias de acuerdo con las acciones de los usuarios o
navegadores.

LISTA DE EVENTOS
A continuación hay una lista de eventos disponibles para el estándar HTML 4.01.
• onload: El evento onload ocurre cuando el agente de usuario termina de cargar la
ventana o todos los marcos en una página de marcos.
• onunload: El evento onunload ocurre cuando el agente de usuario quita un
documento de una ventana o marco.
• onclick: El evento onclick es disparado cuando el botón del mouse es presionado y
soltado (click) sobre el elemento.
• ondblclick: El evento ondblclick ocurre cuando el botón del puntero es presionado
dos veces (doble click) sobre un elemento.
• onmousedown: El evento onmousedown es disparado cuando el botón del mouse
es presionado sobre el elemento.

12
 • onmouseup: El evento onmouseup ocurre cuando el botón del puntero es soltado
sobre un elemento.
• onmouseover: El evento onmouseover es disparado cuando el mouse se mueve
sobre el elemento (desde afuera).
• onmousemove: El evento onmousemove ocurre cuando el puntero es movido
mientras está sobre un elemento.
• onmouseout: El evento onmouseout es disparado cuando el mouse es movido
hacia afuera de un elemento.
• onfocus: El evento onfocus ocurre cuando un elemento recibe el enfoque sea con
el puntero o con la tecla tab.
• onblur: El evento onblur es disparado cuando un elemento pierde el enfoque sea
con el puntero o con la tecla tab.
• onkeypress: El evento onkeypress ocurre cuando una tecla es presionada y
soltada sobre un elemento.
• onkeydown: El evento onkeydown se dispara cuando una tecla es presionada
sobre el elemento.
• onkeyup: El evento onkeyup ocurre cuando una tecla es soltada sobre un
elemento.
• onsubmit: El evento onsubmit es disparado cuando un formulario es enviado.
• onreset: El evento onreset ocurre cuando un formulario es reseteado.
• onselect: El evento onselect es disparado cuando un usuario selecciona un texto
en un campo de texto.
• onchange: El evento onchange ocurre cuando un control pierde el enfoque y su
valor ha sido modificado desde que recibió el enfoque.

DEFINICIÓN DE URI Y URL

Internet puede ser concebida como un gran grupo de recursos o contenidos ubicados en
diferentes computadoras alrededor del mundo. Estos contenidos pueden ser encontrados
y enlazarse unos a otros mediante URIs. Como su nombre lo describe, identifica recursos
asignando una dirección en una red dada.
URL (localizador de recursos uniforme), es un tipo de URI que se utiliza para describir la
ubicación de un documento específico. Una URL no define por sí sola el tipo de contenido
al que refiere (textos, imágenes, videos, etc.), simplemente dice dónde y cómo
encontrarlo. Una URL común está compuesta por cuatro partes:
• Protocolo: También llamado esquema URL, especifica que protocolo es utilizado
para acceder al documento.
• Nombre de computadora: Especifica el nombre de la computadora (usualmente
un nombre de dominio o una dirección IP) donde el contenido está alojado.
• Directorios: Secuencia de directorios separados por barras ("/") que define la ruta
a seguir para llegar al documento.
• Archivo: El nombre del archivo donde el recurso se encuentra ubicado.

De esta forma, podemos analizar www.htmlquick.co

http:// /reference/ uris.html
cualquier URL dada: m

Protocol Domain name Directories File

13
REFERENCIA DE ENTIDAD DE CARACTERES (CHARACTER ENTITY
REFERENCE)
Una entidad de carácter es un código utilizado para representar caracteres que no son
soportados por el set de caracteres de un documento. Existen tres formas de escribir una
entidad de carácter, y todas ellas comienzan con un símbolo "&" y terminan con un punto
y coma ";":
• Nombre de la entidad: El nombre asignado (por ejemplo, &aacute; para á)
• Decimal: Su valor decimal (por ejemplo, &225; para á)
• Hexadecimal: Su valor hexadecimal (por ejemplo, &#xE1; para á)
Muchos navegadores no proveen soporte para todas las entidades de caracteres y
usualmente muestran un cuadrado blanco en su lugar. Otro problema existente con
respecto a la compatibilidad de los navegadores es que algunos de ellos fallan en
interpretar una o más de las formas disponibles para escribirlos (por ejemplo, por su valor
hexadecimal).

Tag HTML
A continuación, encontrarás una lista de todos los tags HTML (lenguaje de marcas
hipertextual) para el estándar HTML 4.01, que también pertenecen al estándar XHTML
(lenguaje de marcas hipertextual extensible) con la excepción de aquellos desaprobados.
Junto a cada tag encontrarás un símbolo indicando si el tag es vacío o no, lo que podría
ayudarte en la labor de escribir código XHTML, el cual representa una mejor opción no tan
difícil de lograr. Recomendamos fuertemente usar XHTML en lugar de HTML, debido a los
beneficios y a las pequeñas diferencias.
El color rojo se ha usado para marcar tags desaprobados, cuyo uso no es recomendado.
Esto se debe a que han sido reemplazados por otros tags (por ejemplo, el tag applet ha
sido reemplazado por el tag object) o porque las hojas de estilos se han convertido en la
forma preferida de lograr sus mismos efectos. Nota, que los tags y atributos desaprobados
en HTML pueden no ser soportados por futuras versiones (por ejemplo, XHTML 1.0). Esta
es una buena razón para dejar de usarlos.
Nota: Si no sabes lo que es un tag y/o cómo se debe utilizar, te recomendamos que leas
nuestro tutorial "tags y atributos HTML" que puedes encontrar en nuestra sección de
tutoriales HTML.

Tags y atributos desaprobados en HTML

Los tags y atributos desaprobados son parte del estándar HTML (lenguaje de marcas
hipertextual) cuyo uso ya no es recomendado. Esto sucede debido a que el estándar HTML
es actualizado regularmente (por ejemplo, de la versión 3.0 a la 4.0) y algunos tags o
características del lenguaje son agregados y otros removidos o desaprobados. Como
consecuencia de esto, los autores de documentos HTML son provistos con más
herramientas cuando un nuevo elemento o atributo es agregado, así como también
advertidos de desechar aquellos que han sido reemplazados o se han vuelto obsoletos. La
decisión de utilizar o no tags y/o atributos desaprobados es dejada a consideración de
cada autor. Muchos navegadores ofrecen soporte para elementos desaprobados, pero en
un futuro no muy lejano esto podría cambiar. La recomendación general es intentar
utilizar otras formas de lograr sus efectos.
Los tags desaprobados en HTML 4.01 son fácilmente identificables. A continuación,
mostramos una lista de los diez tags desaprobados:

14
 • applet: Reemplazado por el tag HTML object.
• dir: Reemplazado por el tag HTML ul.
• isindex: Reemplazado por el tag HTML input.
• menu: Reemplazado por el tag HTML ul.
Tags desaprobados en favor de las hojas de estilo:
• basefont
• center
• font
• s
• strike
• u
Los atributos desaprobados varían de tag en tag. La mayoría de ellos son atributos de
presentación y han sido desaprobados en favor de las hojas de estilo. Esto significa que su
mismo efecto puede ser logrado usando el atributo "id", "style" o "class" en conjunto con
hojas de estilo. En los ejemplos que a continuación se muestran, definimos dos trozos de
código que lograrán el mismo efecto utilizando diferentes métodos.
Ejemplo desaprobado usando el tag HTML font: <html>
<head>
<title>Ejemplo desaprobado para el tag HTML font</title>
</head>
<body>
...<font face="Arial,helvetica" color="#0000FF">trozo de texto en azul</font>...
</body>
</html>Comienzo del códigoFin del código
Ejemplo utilizando el atributo "style":
Comienzo del código<html>
<head>
<title>Ejemplo utilizando el atributo "style"</title>
</head>
<body>
...<span style="font-family: arial,helvetica; color: #0000FF">trozo de texto en azul</span>...
</body>
</html>Fin del código
Ejemplo utilizando clases con el tag HTML style:
Comienzo del código<html>
<head>
<title>Ejemplo utilizando clases con el tag HTML style</title>
<style type="text/css">
span.bluetext {font-family: arial,helvetica; color: #0000FF}
</style>
</head>
<body>
...<span class="bluetext">trozo de texto en azul</span>...
</body>
</html>

TIPOS EN HTML

LISTA DE TIPOS
cdata [CS]
Secuencia de caracteres del set de caracteres del documento que pueden incluir
entidades de caracteres.
character [CN]

15
Un solo carácter del set de caracteres del documento. Caracteres simples pueden ser
especificados con una referencia de entidad de caracteres (por ejemplo, "&").
charset [CI]
Una codificación de caracteres de acuerdo con la lista de codificación de caracteres

color [CI]
Un valor de color puede o bien ser un número hexadecimal (precedido por un carácter
numeral) o uno de los siguientes dieciséis nombres de colores. Los nombres de colores
son case-insensitive.
• Black = "#000000"
• Green = "#008000"
• Silver = "#C0C0C0"
• Lime = "#00FF00"
• Gray = "#808080"
• Olive = "#808000"
• White = "#FFFFFF"
• Yellow = "#FFFF00"
• Maroon = "#800000"
• Navy = "#000080"
• Red = "#FF0000"
• Blue = "#0000FF"
• Purple = "#800080"
• Teal = "#008080"
• Fuchsia = "#FF00FF"
• Aqua = "#00FFFF"
Los números hexadecimales son construidos con el formato RGB (rojo, verde, azul), esto
significa que los dos primeros caracteres describen el valor para el color rojo, los dos
segundos para el verde y los dos terceros para el azul.
content-type [CI]
Un valor de la lista de tipos MIME.
datetime [CS]
Designa un punto en la línea de tiempo. El formato es el siguiente:
YYYY-MM-DDThh:mm:ssTZD
Donde:
• YYYY = año de cuatro dígitos
• MM = mes de dos dígitos (01=Enero, etc.)
• DD = día del mes de dos dígitos (01 a 31)
• hh = hora de dos dígitos (00 a 23) (am/pm NO permitido)
• mm = minutos de dos dígitos (00 a 59)
• ss = segundos de dos dígitos (00 a 59)
• TZD = designador de zona horaria
El valor para el designador de zona horaria (TZD) debe ser uno de los siguientes:
• Z = Indica el UTC (Tiempo Universal Coordinado) y debe ser todo en mayúsculas.

16
 • +hh:mm = Indica una hora local la cual está hh horas y mm minutos adelante de
UTC.
• -hh:mm = Indica una hora local la cual está hh horas y mm minutos detrás de UTC.
• frame-target [CI]
Los nombres de marcos deben comenzar con una letra ([A-Z] ó [a-z]). Los nombres
especificados a continuación son reservados y tienen significados especiales.
• _blank: abre el documento en una nueva ventana.
• _self: abre el documento en el mismo marco que el elemento referente.
• _parent: abre el documento en el marco "padre" del marco actual. si no hay un
marco "padre" funciona igual que "_self".
• _top: Abre el documento en la ventana del elemento referente, rompiendo la
estructura de marcos actual. Si no hay estructura de marcos funciona igual que
"_self".
idref [CS]
El tipo idref es una referencia a un ID definido en otros atributos.
langcode [CI]

Un código refiriéndose a un lenguaje específico de acuerdo con la tabla de códigos

de lenguaje.

length [CA]

Puede ser medido en número de píxeles o como porcentaje del espacio disponible.

link-types [CI]

Un valor de la siguiente lista:

• Alternate: Designa versiones sustitutas del documento actual. Usada

conjuntamente con el atributo "lang" implica una versión traducida del documento.
Usada conjuntamente con el atributo "media" implica una versión diseñada para un
medio diferente.
• Stylesheet: Una hoja de estilos externa. Puede ser usado conjuntamente con el
tipo de vínculo "Alternate" para hojas de estilos seleccionables.
• Start: El primer documento en una colección. Indica a los motores de búsqueda
qué documento es considerado el punto de partida por el autor.
• Next: El próximo documento en una secuencia lineal de documentos.
• Prev: El documento anterior en una serie ordenada de documentos.
• Contents: Un documento sirviendo como tabla de contenidos.
• Index: Un documento proporcionando un índice para el documento actual.
• Glossary: Un documento proporcionando un glosario de términos que pertenecen
al documento actual.
• Copyright: Una declaración de derechos de copia para el documento actual.
• Chapter: Un documento sirviendo como capítulo en una colección de documentos.
• Section: Un documento sirviendo como sección en una colección de documentos.

17
 • Subsection: Un documento sirviendo como subsección en una colección de
documentos.
• Appendix: Un documento sirviendo de apéndice en una colección de documentos.
• Help: Un documento ofreciendo ayuda (más información, enlaces a otros recursos,
etc.).
• Bookmark: Un bookmark (señalador). Es un enlace a un punto clave de un
documento.
media-descriptor [CI]

Un valor de la siguiente lista:

• screen: Pensado para pantallas de computadoras.

• tty: Pensado para medios usando una grilla de caracteres como los teletypes,
terminales, o dispositivos portables con capacidades de graficación limitadas.
• tv: Pensado para dispositivos tipo televisión (baja resolución o color, sin
desplazamiento).
• projection: Pensado para proyectores.
• handheld: Pensado para dispositivos de mano (pantalla pequeña, monocromáticos,
etc.).
• print: Pensado para paginados y para documentos vistos en pantalla en vista
previa de impresión.
• braille: Pensado para dispositivos táctiles Braille.
• aural: Pensado para sintetizadores de voz.
• all: Aplicable a cualquier dispositivo.
multi-length [CN]

El valor puede ser un length o un relative length. Un relative length funciona exactamente
como los valores de porcentaje pero solo sobre el espacio restante. Esto significa que el
navegador primero asigna el espacio para todos los valores length y luego divide el
sobrante entre los relative lengths. La notación para este valor es "i*", donde i es un
entero. La suma de todos los valores "i" es equivalente al 100%.

name [CS]

Debe comenzar con una letra ([A-Z] ó [a-z]) y puede continuar con letras, dígitos ([0-9]),
guiones ("-"), guiones bajos ("_"), dos puntos (":"), y puntos (".").

number [CA]

Debe contener al menos un dígito ([0-9]).

pixels [CN]

Un entero representando un número de píxeles.

18
style [CN]

La información de hojas de estilos es un tipo específico no evaluado por navegadores

como código HTML.

text [CS]

Las cadenas de texto suponen ser "legibles para humanos", mayormente usadas para ser
mostradas en algún lugar del navegador.

uri [CT]

En general son case-sensitive. Pueden existir URIs, o partes de ellas, donde el case no
influya (como en los nombres de máquinas), pero identificar estos casos puede no ser
tarea fácil. Se recomienda considerarlas como case-sensitives para evitar errores.

REFERENCIA DE CASE-SENSITIVITY
Aquí está la referencia de case-sensitivity de cada tipo. Esto te ayudará a entender cómo
los navegadores leerán los valores que usas para cada atributo.
• CS: El valor es sensible a mayúsculas/minúsculas. El navegador interpreta "a" y "A"
como valores diferentes.
• CI: El valor no es sensible a mayúsculas/minúsculas. El navegador interpreta "a" y
"A" como valores iguales.
• CN: El valor no está sujeto a cambios mayúsculas/minúsculas.
• CA: La definición del elemento o atributo ofrece información sobre
mayúsculas/minúsculas.
• CT: Consulta la definición del tipo para detalles acerca de mayúsculas/minúsculas.

TIPOS MIME
MIME (extensiones de correo de internet multipropósito), es un estándar que clasifica
recursos y provee información a programas acerca de cómo manejarlos. Esto permite a los
navegadores abrir correctamente un archivo .txt como un recurso de texto plano y no
como un archivo de video o algún otro tipo. Cuando un tipo MIME no es especificado para
un recurso, el programa que lo procese puede "suponer" su tipo por la extensión del
recurso (por ejemplo, un archivo .bmp supone contener una imagen de mapa de bits).
Se recomienda proveer información sobre tipos MIME en todos los lugares en que sea
posible hacerlo (atributo type en tag HTML script y tag HTML link, atributo enctype para el
tag HTML form y en el tag HTML meta cuando se define el content-type del documento).
Esto puede ayudar a lograr una mayor compatibilidad con los navegadores y al correcto
funcionamiento del documento en sí.

19
Bibliografía
http://es.wikipedia.org/wiki/HTML

http://www.htmlquick.com/es/reference.html

http://www.htmlquick.com/es/reference/character-encoding.html

http://www.htmlquick.com/es/reference/language-codes.html

http://www.htmlquick.com/es/reference/country-codes.html

http://www.htmlquick.com/es/reference/uri-url.html

20
http://www.htmlquick.com/es/reference/events.html

http://www.htmlquick.com/es/reference/character-entity-reference.html

http://www.htmlquick.com/es/reference/tags.html

http://www.htmlquick.com/es/reference/deprecated.html

http://www.htmlquick.com/es/reference/mime-types.html

http://www.htmlquick.com/es/reference/types.html

21