Scribd
Cargar
232 vistas41 páginas

Ejemplo de Código HTML

El documento proporciona información sobre códigos de colores HTML. Explica que los colores HTML se construyen usando valores hexadecimales para rojo, verde y azul y cómo estos valores pueden variarse para cambiar el tono del color. También incluye un mapa de colores con ejemplos comunes.

Cargado por

oswaldo mora
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
232 vistas41 páginas

Ejemplo de Código HTML

El documento proporciona información sobre códigos de colores HTML. Explica que los colores HTML se construyen usando valores hexadecimales para rojo, verde y azul y cómo estos valores pueden variarse para cambiar el tono del color. También incluye un mapa de colores con ejemplos comunes.

Cargado por

oswaldo mora
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 41

Ejemplo de código HTML

<HTML>

<HEAD>

<TITLE>Un Titulo para el Browser de turno </TITLE>

</HEAD>

<BODY>

<!-- Aqui va todo lo chachi -->

<H1>Otro t&iacute;tulo, esta vez m&aacute;s largo. </H1>

<P> <IMG SRC= "./felix.gif "ALIGN= "MIDDLE " ALT= "EL Gato


Felix ">Hoola.

<P>Esto es un parrafo con informacion

super importante. Notese que las lineas salen pegadas aun dejando

espacios, saltos de linea, etc. <BR> &#161 Si pongo esto

si <STRONG>cambia </STRONG> de linea!

<P>Otro parrafo, esto ya es un poco rollo.

<H3>Pongamos un subtítulo<H3>

<P>Por cierto, &#191 que paso con las <A HREF= "#pepe ">anclas</A>?

<HR>

<UL>

<LI> Esto es una lista no ordenada.

<LI> Las listas quedan mejor si tienen varios elementos.

</UL>
Me voy al <A HREF= "http://www.iac.es/home.html ">IAC</A>.

<P>Vamos a crear un <EM>ancla </EM>, o lo que es lo mismo, un <A


NAME="pepe">anchor.</A>

.....................................................

.....................................................

</BODY>

</HTML>

Tu visualizador lo vería así.

El HTML se basa en una serie de etiquetas (``tags''), que casi siempre hay una al


principio y otra al final. Lo que si es común a todas es que están englobadas en
los símbolos em mayor que y menor que, de forma: <etiqueta>. Veamos las del
ejemplo en detalle:

¿Cómo utilizar los códigos de color?

Con los códigos de color puedes fijar el color del fondo del Web site, el color de
fuentes, las células en tablas y mucho más.

Usar los códigos de color para el color del fondo del Web site:

<body bgcolor="#80BFFF">

Usando los códigos de color para fijar color de la fuente:

<font color="#80BFFF">

Usar los códigos de color para el color del fondo de la tabla:

<table bgcolor="#80BFFF">
Usar el código de color para el color del acoplamiento:

<a style="color:#80BFFF">

En este artículo veremos las etiquetas del código html más importantes:

Tags Básicos
<html></html>
Crea un documento HTML
<head></head>
Stea el título y otra información que no se visualizará en la página
web
<body></body>
Setea la parte visible de la página
Header Tags
<title></title>
Pone el nombre del documento en la barra del título
Atributos del Body
<body bgcolor=?>
Setea el color de fondo, usando nombres o valores hex
<body text=?>
Setea el color del texto, usando nombres o valores hex
<body link=?>
Setea el color de los enlaces, usando nombres o valores hex
<body vlink=?>
Setea el color de los enlaces visitados, usando nombres o valores hex
<body alink=?>
Setea el color de los enlaces al ser presionados, usando nombres o
valores hex
Tags de texto
<pre></pre>
Crea texto preformateado
<hl></hl>
Crea un título grande
<h6></h6>
Crea un título pequeño
<b></b>
Crea texto en negritas
<i></i>
Crea texto en itálicas
<tt></tt>
Crea texto teletipo
<cite></cite>
Crea una cita, usando itálicas
<em></em>
Enfatiza una palabra
<strong></strong> 
Enfatiza una palabra (con itálicas or negritas)
<font size=?></font>
Setea el cuerpo de la fuente de 1 a 7
<font color=?></font>
Setea el color de la fuente, usando nombres o valores hex
Enlaces
<a href="URL"></a>
Crea un hipervínculo
<a href="mailto:EMAIL"></a>
Crea un enlace de email
<a name="NAME"></a>
Crea un enlace dentro del documento
<a href="#NAME"></a>
Vincula a ese target dentro del documento
Formatting
<p></p>
Crea un párrafo nuevo
<p align=?>
Alinea un párrafa (izquierda, centro, derecha)
<br>
Inserta un salto de línea
<blockquote>
</blockquote> 
Justifica el texto a ambos lados
<dl></dl>
Crea un lista de definición
<dt>
Precede cada término de definición
<dd>
Precede cada definición
<ol></ol>
Crea un lista numerada
<li></li>
Precede cada ítem de una lista y le agrega un número
<ul></ul>
Crea una lista con puntos
<div align=?>
Un tag genérico utilizado para formatear grandes bloques de HTML,
también usado para stylesheets
Elementos Gráficos
<img src="name">
Agrega una imagen
<img src="name" align=?>
Alinea una imagen an image
<img src="name" border=?>
Setea el grosor del borde de la imagen
<hr>
Inserta una linea horizontal
<hr size=?>
Setea la altura de una linea
<hr width=?>
Setea el ancho de la linea, en porcentaje o números absolutos
<hr noshade>
Inserta una linea horizontal sin sombra
Tablas
<table></table>
Crea una tabla
<tr></tr>
Setea cada row de la tabla
<td></td>
Setea cada celda de la tabla
<th></th>
Setea el header de la tabla (una celda normal, con texto centrado y
resaltado)
Atributos de las Tablas
<table border=#>
Setea el grosor del borde de la tabla
<table cellspacing=#>
Setea la cantidad de espacio entre las celdas
<table cellpadding=#>
Setea la cantidad de espacio entre el borde de las celdas y su
contenido
<table width=# or %>
Setea el ancho de la tabla - en pixel o en porcentaje de acuerdo al
ancho del documento
<tr align=?> or <td align=?>
Setea la alineación delas celdas (izquierda, centro, derecha)
<tr valign=?> or <td valign=?>
Setea la alineación vertical de las celdas (arriba, nedio, abajo)
<td colspan=#>
Setea la cantidad de columnas dentro de una celda
<td rowspan=#>
Setea la cantidad de rows que una celda despliega (por defecto=1)
<td nowrap>
Previene que se rompa una linea dentro de la celda
Frames
<frameset></frameset>
tag dentro de un documento de frames
<frameset rows="value,value">
Define las filas de un frame, usando números o porcentaje para
definir el largo
<frameset cols="value,value">
Define las columnas de un frame, usando números o porcentaje para
definir el largo
<frame>
Define un solo frame - o región - dentro de frameset
<noframes></noframes>
Define lo que aparecerá en navegadores que no soporten frames
Atributos de los Frames
<frame src="URL">
Especifica que documento html será desplegado
<frame name="name">
Nombra al frame or región, para que pueda ser llamado desde otro
frame
<frame marginwidth=#>
Define los márgenes derecho e izquierdo del frame; debe ser igual o
mayor a 1
<frame marginheight=#>
Define los márgenes de arriba y abajo del frame; debe ser igual o
mayor a 1
<frame scrolling=VALUE>
Setea si el frame tendrá barra de desplazamiento o no; el valor debe
ser "yes," "no," o "auto. " El default es "auto".
<frame noresize>
Previeve al usuario de cambiar el tamaño del frame
Formularios
Para forms funcionales, deberá correr un script de CGI. El HTML sólo
crea la apariencia del formulario.
<form></form>
Crea el formulario
<select multiple name="NAME" size=?></select>
Crea un menú de desplazamiento. Size setea el número de ítems
visibles antes de tener que desplazarse.
<option>
Setea cada ítem del menú
<select name="NAME"></select>
Crea un menú desplegable
<textarea name="NAME" cols=40 rows=8></textarea>
Crea una área de texto.
<input type="checkbox" name="NAME">
Crea una checkbox.
<input type="radio" name="NAME" value="x">
Crea un radio button.
<input type=text name="foo" size=20>
Crea un área de texto de una sola línea. Size setea el largo en
caracteres.
<input type="submit" value="NAME">
Crea un botón de envio.
<input type="image" border=0 name="NAME" src="name.gif">
Crea un botón de envio utilizando una imagen.

#F4F4F4
Fondo: 
#FFBF00
Primer encabezado: 
#555555
Primer párrafo: 
#FFBF00
Segundo encabezado: 
#555555
Segundo párrafo: 
#99CCFF
Fondo del panel derecho: 
#007FFF
Borde del panel derecho: 
#FFFFFF
Título del panel derecho: 
#555555
Texto del panel derecho: 

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.

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.

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 si 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 cualquier URL dada:

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

File

Protocol Domain name Directories


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.
 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
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 HTMLpueden 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.

Lista de tags HTML

Tag Vacío Descripción corta

<!-- --> Inserta comentarios ocultos


<!DOCTYPE> Establece el tipo de documento
<a>   Inserta vínculos o marcadores
<abbr>   Explica abreviaciones
<acronym>   Explica acrónimos
<address>   Provee información de contacto
<applet>   Inserta un applet (scripts)
<area> Define sectores para mapas de imagen
<b>   Texto en negrita
<base> URI base para resolver URIs relativas
<basefont> Tamaño de la fuente predeterminado
<bdo>   Suprime el algoritmo bidireccional
<big>   Texto en tamaño "grande".
<blockquote>   Citar párrafos
<body>   Contiene los elementos a mostrar
<br> Fuerza un quiebre de línea
<button>   Crea un botón
<caption>   Establece un título para una tabla
<center>   Centra su contenido
<cite>   Inserta una cita o referencia
<code>   Representa texto de computadora
<col> Da atributos a columnas en una tabla
<colgroup>   Agrupa columnas en una tabla
<dd>   Define descripciones en una lista
<del>   Indica texto eliminado
<dfn>   Asigna una definición a un término
<dir>   Inserta una lista de directorios (árbol)
<div>   Define un bloque de contenido
<dl>   Define una lista
<dt>   Inserta un término en una lista
<em>   Indica énfasis
<fieldset>   Agrupa controles en un formulario
<font>   Establece el estilo de fuente
<form>   Inserta un formulario
<frame> Inserta un marco
<frameset>   Inserta un grupo de frames
<h1>   Encabezado de nivel 1
<h2>   Encabezado de nivel 2
<h3>   Encabezado de nivel 3
<h4>   Encabezado de nivel 4
<h5>   Encabezado de nivel 5
<h6>   Encabezado de nivel 6
<head>   Define el bloque de encabezado
<hr> Dibuja una línea o regla horizontal
<html>   Contiene al documento
<i>   Muestra texto en itálica
<iframe>   Inserta un marco dentro del documento
<img> Inserta una imagen
<input> Muestra controles de entrada
<ins>   Indica texto insertado
<isindex> Entrada de línea simple
<kbd>   Indica texto a ingresarse por el usuario
<label>   Establece una etiqueta para un control
<legend>   Asigna un título a un "fieldset"
<li>   Define un artículo en una lista
<link> Ofrece informacón relacional
<map>   Define un mapa de imagen
<menu>   Lista menú
<meta> Da información sobre el documento
<noframes>   Contenido alternativo para marcos
<noscript>   Contenido alternativo para scripts
<object>   Ejecuta aplicaciones externas
<ol>   Inserta una lista ordenada
<optgroup>   Agrupa opciones en un control select
<option>   Define una opción en un control select
<p>   Define un párrafo
<param> Da un parámetro para un objeto
<pre>   Bloque de texto preformateado
<q>   Inserta una cita en una línea
<s>   Muestra texto tachado
<samp>   Representa texto de programas
<script>   Contiene scripts
<select>   Crea un control select
<small>   Muestra texto en letra "pequeña"
<span>   Asigna atributos al texto en líneas
<strike>   Muestra texto tachado
<strong>   Indica énfasis fuerte
<style>   Define atributos visuales (hojas estilo)
<sub>   Define texto en sub-índice
<sup>   Define texto en super-índice
<table>   Inserta una tabla
<tbody>   Define un cuerpo en una tabla
<td>   Celda regular de una tabla
<textarea>   Entrada de texto de líneas múltiples
<tfoot>   Define un pie en una tabla
<th>   Celda de encabezado de una tabla
<thead>   Define un encabezado de tabla
<title>   Define el título del documento
<tr>   Inserta una fila en una tabla
<tt>   Muestra texto en "teletype"
<u>   Muestra texto subrayado
<ul>   Inserta una lista sin orden
<var>   Indica una instancia de una variable

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]
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 decodificació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.
 +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.
 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.

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]
Ver la Definición de  URI  y  URL . 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í.

Lista de tipos MIME

Tipo MIME Extensión

application/acad .dwg
application/arj .arj
application/base64 .mm
application/base64 .mme
application/binhex .hqx
application/binhex4 .hqx
application/book .boo
application/book .book
application/cdf .cdf
application/clariscad .ccad
Tipo MIME Extensión

application/commonground .dp
application/drafting .drw
application/dsptype .tsp
application/dxf .dxf
application/envoy .evy
application/excel .xl
application/excel .xla
application/excel .xlb
application/excel .xlc
application/excel .xld
application/excel .xlk
application/excel .xll
application/excel .xlm
application/excel .xls
application/excel .xlt
application/excel .xlv
application/excel .xlw
application/fractals .fif
application/freeloader .frl
application/futuresplash .spl
application/gnutar .tgz
application/groupwise .vew
application/hlp .hlp
application/hta .hta
application/i-deas .unv
application/iges .iges
application/iges .igs
application/inf .inf
Tipo MIME Extensión

application/java .clas
application/java-byte-code .clas
application/lha .lha
application/lzx .lzx
application/mac-binary .bin
application/mac-binhex .hqx
application/mac-binhex40 .hqx
application/mac-compactpro .cpt
application/macbinary .bin
application/marc .mrc
application/mbedlet .mbd
application/mcad .mcd
application/mime .aps
application/mspowerpoint .pot
application/mspowerpoint .pps
application/mspowerpoint .ppt
application/mspowerpoint .ppz
application/msword .doc
application/msword .dot
application/msword .w6w
application/msword .wiz
application/msword .word
application/mswrite .wri
application/netmc .mcp
application/octet-stream .a
application/octet-stream .arc
application/octet-stream .arj
application/octet-stream .bin
Tipo MIME Extensión

application/octet-stream .com
application/octet-stream .dump
application/octet-stream .exe
application/octet-stream .lha
application/octet-stream .lhx
application/octet-stream .lzh
application/octet-stream .lzx
application/octet-stream .o
application/octet-stream .psd
application/octet-stream .save
application/octet-stream .uu
application/octet-stream .zoo
application/oda .oda
application/pdf .pdf
application/pkcs-12 .p12
application/pkcs-crl .crl
application/pkcs10 .p10
application/pkcs7-mime .p7c
application/pkcs7-mime .p7m
application/pkcs7-signature .p7s
application/pkix-cert .cer
application/pkix-cert .crt
application/pkix-crl .crl
application/plain .text
application/postscript .ai
application/postscript .eps
application/postscript .ps
application/powerpoint .ppt
Tipo MIME Extensión

application/pro_eng .part
application/pro_eng .prt
application/ringing-tones .rng
application/rtf .rtf
application/rtf .rtx
application/sdp .sdp
application/sea .sea
application/set .set
application/sla .stl
application/smil .smi
application/smil .smil
application/solids .sol
application/sounder .sdr
application/step .step
application/step .stp
application/streamingmedia .ssm
application/toolbook .tbk
application/vda .vda
application/vnd.fdf .fdf
application/vnd.hp-hpgl .hgl
application/vnd.hp-hpgl .hpg
application/vnd.hp-hpgl .hpgl
application/vnd.hp-pcl .pcl
application/vnd.ms-excel .xlb
application/vnd.ms-excel .xlc
application/vnd.ms-excel .xll
application/vnd.ms-excel .xlm
application/vnd.ms-excel .xls
Tipo MIME Extensión

application/vnd.ms-excel .xlw
application/vnd.ms-pki.certstore .sst
application/vnd.ms-pki.pko .pko
application/vnd.ms-pki.seccat .cat
application/vnd.ms-pki.stl .stl
application/vnd.ms-powerpoint .pot
application/vnd.ms-powerpoint .ppa
application/vnd.ms-powerpoint .pps
application/vnd.ms-powerpoint .ppt
application/vnd.ms-powerpoint .pwz
application/vnd.ms-project .mpp
application/vnd.nokia.configuration-message .ncm
application/vnd.nokia.ringing-tone .rng
application/vnd.rn-realmedia .rm
application/vnd.rn-realplayer .rnx
application/vnd.wap.wmlc .wmlc
application/vnd.wap.wmlscriptc .wmls
application/vnd.xara .web
application/vocaltec-media-desc .vmd
application/vocaltec-media-file .vmf
application/wordperfect .wp
application/wordperfect .wp5
application/wordperfect .wp6
application/wordperfect .wpd
application/wordperfect6.0 .w60
application/wordperfect6.0 .wp5
application/wordperfect6.1 .w61
application/x-123 .wk1
Tipo MIME Extensión

application/x-aim .aim
application/x-authorware-bin .aab
application/x-authorware-map .aam
application/x-authorware-seg .aas
application/x-bcpio .bcpi
application/x-binary .bin
application/x-binhex40 .hqx
application/x-bsh .bsh
application/x-bsh .sh
application/x-bsh .shar
application/x-bytecode.elisp .elc
application/x-bytecode.python .pyc
application/x-bzip .bz
application/x-bzip2 .boz
application/x-bzip2 .bz2
application/x-cdf .cdf
application/x-cdlink .vcd
application/x-chat .cha
application/x-chat .chat
application/x-cmu-raster .ras
application/x-cocoa .cco
application/x-compactpro .cpt
application/x-compress .z
application/x-compressed .gz
application/x-compressed .tgz
application/x-compressed .z
application/x-compressed .zip
application/x-conference .nsc
Tipo MIME Extensión

application/x-cpio .cpio
application/x-cpt .cpt
application/x-csh .csh
application/x-deepv .deep
application/x-director .dcr
application/x-director .dir
application/x-director .dxr
application/x-dvi .dvi
application/x-elc .elc
application/x-envoy .env
application/x-envoy .evy
application/x-esrehber .es
application/x-excel .xla
application/x-excel .xlb
application/x-excel .xlc
application/x-excel .xld
application/x-excel .xlk
application/x-excel .xll
application/x-excel .xlm
application/x-excel .xls
application/x-excel .xlt
application/x-excel .xlv
application/x-excel .xlw
application/x-frame .mif
application/x-freelance .pre
application/x-gsp .gsp
application/x-gss .gss
application/x-gtar .gtar
Tipo MIME Extensión

application/x-gzip .gz
application/x-gzip .gzip
application/x-hdf .hdf
application/x-helpfile .help
application/x-helpfile .hlp
application/x-httpd-imap .imap
application/x-ima .ima
application/x-internett-signup .ins
application/x-inventor .iv
application/x-ip2 .ip
application/x-java-class .clas
application/x-java-commerce .jcm
application/x-javascript .js
application/x-koan .skd
application/x-koan .skm
application/x-koan .skp
application/x-koan .skt
application/x-ksh .ksh
application/x-latex .late
application/x-latex .ltx
application/x-lha .lha
application/x-lisp .lsp
application/x-livescreen .ivy
application/x-lotus .wq1
application/x-lotusscreencam .scm
application/x-lzh .lzh
application/x-lzx .lzx
application/x-mac-binhex40 .hqx
Tipo MIME Extensión

application/x-macbinary .bin
application/x-magic-cap-package-1.0 .mc$
application/x-mathcad .mcd
application/x-meme .mm
application/x-midi .mid
application/x-midi .midi
application/x-mif .mif
application/x-mix-transfer .nix
application/x-mplayer2 .asx
application/x-msexcel .xla
application/x-msexcel .xls
application/x-msexcel .xlw
application/x-mspowerpoint .ppt
application/x-navi-animation .ani
application/x-navidoc .nvd
application/x-navimap .map
application/x-navistyle .stl
application/x-netcdf .cdf
application/x-netcdf .nc
application/x-newton-compatible-pkg .pkg
application/x-nokia-9000-communicator-add-on-softw .aos
application/x-omc .omc
application/x-omcdatamaker .omcd
application/x-omcregerator .omcr
application/x-pagemaker .pm4
application/x-pagemaker .pm5
application/x-pcl .pcl
application/x-pixclscript .plx
Tipo MIME Extensión

application/x-pkcs10 .p10
application/x-pkcs12 .p12
application/x-pkcs7-certificates .spc
application/x-pkcs7-certreqresp .p7r
application/x-pkcs7-mime .p7c
application/x-pkcs7-mime .p7m
application/x-pkcs7-signature .p7a
application/x-pointplus .css
application/x-portable-anymap .pnm
application/x-project .mpc
application/x-project .mpt
application/x-project .mpv
application/x-project .mpx
application/x-qpro .wb1
application/x-rtf .rtf
application/x-sdp .sdp
application/x-sea .sea
application/x-seelogo .sl
application/x-sh .sh
application/x-shar .sh
application/x-shar .shar
application/x-shockwave-flash .swf
application/x-sit .sit
application/x-sprite .spr
application/x-sprite .spri
application/x-stuffit .sit
application/x-sv4cpio .sv4c
application/x-sv4crc .sv4c
Tipo MIME Extensión

application/x-tar .tar
application/x-tbook .sbk
application/x-tbook .tbk
application/x-tcl .tcl
application/x-tex .tex
application/x-texinfo .texi
application/x-troff .roff
application/x-troff .t
application/x-troff .tr
application/x-troff-man .man
application/x-troff-me .me
application/x-troff-ms .ms
application/x-troff-msvideo .avi
application/x-ustar .usta
application/x-visio .vsd
application/x-visio .vst
application/x-visio .vsw
application/x-vnd.audioexplosion.mzz .mzz
application/x-vnd.ls-xpix .xpix
application/x-vrml .vrml
application/x-wais-source .src
application/x-wais-source .wsrc
application/x-winhelp .hlp
application/x-wintalk .wtk
application/x-world .svr
application/x-world .wrl
application/x-wpwin .wpd
application/x-wri .wri
Tipo MIME Extensión

application/x-x509-ca-cert .cer
application/x-x509-ca-cert .crt
application/x-x509-ca-cert .der
application/x-x509-user-cert .crt
application/x-zip-compressed .zip
application/xml .xml
application/zip .zip
audio/aiff .aif
audio/aiff .aifc
audio/aiff .aiff
audio/basic .au
audio/basic .snd
audio/it .it
audio/make .funk
audio/make .my
audio/make .pfun
audio/make.my.funk .pfun
audio/mid .rmi
audio/midi .kar
audio/midi .mid
audio/midi .midi
audio/mod .mod
audio/mpeg .m2a
audio/mpeg .mp2
audio/mpeg .mpa
audio/mpeg .mpg
audio/mpeg .mpga
audio/mpeg3 .mp3
Tipo MIME Extensión

audio/nspaudio .la
audio/nspaudio .lma
audio/s3m .s3m
audio/tsp-audio .tsi
audio/tsplayer .tsp
audio/vnd.qcelp .qcp
audio/voc .voc
audio/voxware .vox
audio/wav .wav
audio/x-adpcm .snd
audio/x-aiff .aif
audio/x-aiff .aifc
audio/x-aiff .aiff
audio/x-au .au
audio/x-gsm .gsd
audio/x-gsm .gsm
audio/x-jam .jam
audio/x-liveaudio .lam
audio/x-mid .mid
audio/x-mid .midi
audio/x-midi .mid
audio/x-midi .midi
audio/x-mod .mod
audio/x-mpeg .mp2
audio/x-mpeg-3 .mp3
audio/x-mpequrl .m3u
audio/x-nspaudio .la
audio/x-nspaudio .lma
Tipo MIME Extensión

audio/x-pn-realaudio .ra
audio/x-pn-realaudio .ram
audio/x-pn-realaudio .rm
audio/x-pn-realaudio .rmm
audio/x-pn-realaudio .rmp
audio/x-pn-realaudio-plugin .ra
audio/x-pn-realaudio-plugin .rmp
audio/x-pn-realaudio-plugin .rpm
audio/x-psid .sid
audio/x-realaudio .ra
audio/x-twinvq .vqf
audio/x-twinvq-plugin .vqe
audio/x-twinvq-plugin .vql
audio/x-vnd.audioexplosion.mjuicemediafile .mjf
audio/x-voc .voc
audio/x-wav .wav
audio/xm .xm
chemical/x-pdb .pdb
chemical/x-pdb .xyz
drawing/x-dwf .dwf
i-world/i-vrml .ivr
image/bmp .bm
image/bmp .bmp
image/cmu-raster .ras
image/cmu-raster .rast
image/fif .fif
image/florian .flo
image/florian .turb
Tipo MIME Extensión

image/g3fax .g3
image/gif .gif
image/ief .ief
image/ief .iefs
image/jpeg .jfif
image/jpeg .jpe
image/jpeg .jpeg
image/jpeg .jpg
image/jutvision .jut
image/naplps .nap
image/naplps .napl
image/pict .pic
image/pict .pict
image/pjpeg .jfif
image/pjpeg .jpe
image/pjpeg .jpeg
image/pjpeg .jpg
image/png .png
image/png .x-pn
image/tiff .tif
image/tiff .tiff
image/vasa .mcf
image/vnd.dwg .dwg
image/vnd.dwg .dxf
image/vnd.dwg .svf
image/vnd.fpx .fpx
image/vnd.net-fpx .fpx
image/vnd.rn-realflash .rf
Tipo MIME Extensión

image/vnd.rn-realpix .rp
image/vnd.wap.wbmp .wbmp
image/vnd.xiff .xif
image/x-cmu-raster .ras
image/x-dwg .dwg
image/x-dwg .dxf
image/x-dwg .svf
image/x-icon .ico
image/x-jg .art
image/x-jps .jps
image/x-niff .nif
image/x-niff .niff
image/x-pcx .pcx
image/x-pict .pct
image/x-portable-anymap .pnm
image/x-portable-bitmap .pbm
image/x-portable-graymap .pgm
image/x-portable-greymap .pgm
image/x-portable-pixmap .ppm
image/x-quicktime .qif
image/x-quicktime .qti
image/x-quicktime .qtif
image/x-rgb .rgb
image/x-tiff .tif
image/x-tiff .tiff
image/x-windows-bmp .bmp
image/x-xbitmap .xbm
image/x-xbm .xbm
Tipo MIME Extensión

image/x-xpixmap .pm
image/x-xpixmap .xpm
image/x-xwd .xwd
image/x-xwindowdump .xwd
image/xbm .xbm
image/xpm .xpm
message/rfc822 .mht
message/rfc822 .mhtm
message/rfc822 .mime
model/iges .iges
model/iges .igs
model/vnd.dwf .dwf
model/vrml .vrml
model/vrml .wrl
model/vrml .wrz
model/x-pov .pov
multipart/x-gzip .gzip
multipart/x-ustar .usta
multipart/x-zip .zip
music/crescendo .mid
music/crescendo .midi
music/x-karaoke .kar
paleovu/x-pv .pvu
text/asp .asp
text/css .css
text/html .acgi
text/html .htm
text/html .html
Tipo MIME Extensión

text/html .htx
text/html .shtm
text/mcf .mcf
text/pascal .pas
text/plain .c
text/plain .c++
text/plain .cc
text/plain .com
text/plain .conf
text/plain .cxx
text/plain .def
text/plain .f
text/plain .f90
text/plain .for
text/plain .g
text/plain .h
text/plain .hh
text/plain .idc
text/plain .jav
text/plain .java
text/plain .list
text/plain .log
text/plain .lst
text/plain .m
text/plain .mar
text/plain .pl
text/plain .sdml
text/plain .text
Tipo MIME Extensión

text/plain .txt
text/richtext .rt
text/richtext .rtf
text/richtext .rtx
text/scriplet .wsc
text/sgml .sgm
text/sgml .sgml
text/tab-separated-values .tsv
text/uri-list .uni
text/uri-list .unis
text/uri-list .uri
text/uri-list .uris
text/vnd.abc .abc
text/vnd.fmi.flexstor .flx
text/vnd.rn-realtext .rt
text/vnd.wap.wml .wml
text/vnd.wap.wmlscript .wmls
text/webviewhtml .htt
text/x-asm .asm
text/x-asm .s
text/x-audiosoft-intra .aip
text/x-c .c
text/x-c .cc
text/x-c .cpp
text/x-component .htc
text/x-fortran .f
text/x-fortran .f77
text/x-fortran .f90
Tipo MIME Extensión

text/x-fortran .for
text/x-h .h
text/x-h .hh
text/x-java-source .jav
text/x-java-source .java
text/x-la-asf .lsx
text/x-m .m
text/x-pascal .p
text/x-script .hlb
text/x-script.csh .csh
text/x-script.elisp .el
text/x-script.guile .scm
text/x-script.ksh .ksh
text/x-script.lisp .lsp
text/x-script.perl .pl
text/x-script.perl-module .pm
text/x-script.phyton .py
text/x-script.rexx .rexx
text/x-script.scheme .scm
text/x-script.sh .sh
text/x-script.tcl .tcl
text/x-script.tcsh .tcsh
text/x-script.zsh .zsh
text/x-server-parsed-html .shtm
text/x-server-parsed-html .ssi
text/x-setext .etx
text/x-sgml .sgm
text/x-sgml .sgml
Tipo MIME Extensión

text/x-speech .spc
text/x-speech .talk
text/x-uil .uil
text/x-uuencode .uu
text/x-uuencode .uue
text/x-vcalendar .vcs
text/xml .xml
video/animaflex .afl
video/avi .avi
video/avs-video .avs
video/dl .dl
video/fli .fli
video/gl .gl
video/mpeg .m1v
video/mpeg .m2v
video/mpeg .mp2
video/mpeg .mp3
video/mpeg .mpa
video/mpeg .mpe
video/mpeg .mpeg
video/mpeg .mpg
video/msvideo .avi
video/quicktime .moov
video/quicktime .mov
video/quicktime .qt
video/vdo .vdo
video/vivo .viv
video/vivo .vivo
Tipo MIME Extensión

video/vnd.rn-realvideo .rv
video/vnd.vivo .viv
video/vnd.vivo .vivo
video/vosaic .vos
video/x-amt-demorun .xdr
video/x-amt-showrun .xsr
video/x-atomic3d-feature .fmf
video/x-dl .dl
video/x-dv .dif
video/x-dv .dv
video/x-fli .fli
video/x-gl .gl
video/x-isvideo .isu
video/x-motion-jpeg .mjpg
video/x-mpeg .mp2
video/x-mpeg .mp3
video/x-mpeq2a .mp2
video/x-ms-asf .asf
video/x-ms-asf .asx
video/x-ms-asf-plugin .asx
video/x-msvideo .avi
video/x-qtc .qtc
video/x-scm .scm
video/x-sgi-movie .movi
video/x-sgi-movie .mv
windows/metafile .wmf
www/mime .mime
x-conference/x-cooltalk .ice
Tipo MIME Extensión

x-music/x-midi .mid
x-music/x-midi .midi
x-world/x-3dmf .3dm
x-world/x-3dmf .3dmf
x-world/x-3dmf .qd3
x-world/x-3dmf .qd3d
x-world/x-svr .svr
x-world/x-vrml .vrml
x-world/x-vrml .wrl
x-world/x-vrml .wrz
x-world/x-vrt .vrt
xgl/drawing .xgz
xgl/movie .xmz

También podría gustarte