Está en la página 1de 28

TRABAJO INDIVIDUAL

DIEGO FERNANDO CASTRO HERNANDEZ


INGENIERIA DE SISTEMAS

CORPORACIOPN UNIFICADA NACIONAL DE EDUCACION SUPERIOR CUN


ELECTIVA DE FORMACION INTEGRAL III
IBAGUE TOLIMA
AO 2015

TALLER 1
1. QUE ES HTML?
HTML es el lenguaje que se emplea para el desarrollo de pginas de internet. Est
compuesto por una sere de etiquetas que el navegador interpreta y da forma en la
pantalla. HTML dispone de etiquetas para imgenes, hipervnculos que nos permiten
dirigirnos a otras pginas, saltos de lnea, listas, tablas, etc.
Podramos decir que HTML sirve para crear pginas web, darles estructura y contenido.
Es un lenguaje de programacin que se utiliza para el desarrollo de pginas de Internet.
Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de
Marcas de Hipertexto, que podra ser traducido como Lenguaje de Formato de
Documentos para Hipertexto.
El HTML se cre en un principio con objetivos divulgativos de informacin con texto y
algunas imgenes. No se pens que llegara a ser utilizado para crear rea de ocio y
consulta con carcter multimedia (lo que es actualmente la web), de modo que, el HTML
se cre sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los
colectivos de gente que lo utilizaran en un futuro.

2. ASPECTOS DE HTML
Una etiqueta HTML es un trmino rodeado por un signo de menor y otro de mayor; por
ejemplo:
<strong>
El conjunto de las dos etiquetas y el texto contenido en su interior conformaran un
elemento HTML.
Algunos elementos requieren esa apertura y cierre, mientras que en otros casos slo
necesitaremos una etiqueta, ya que reflejamos un elemento puntual o con un contenido
vaco. Por ejemplo:
<hr/>
Hace que en el documento aparezca una lnea separando el texto anterior del siguiente.
Como se puede observar, cuando un elemento no va a tener una etiqueta de cierre (no
existe un), </hr> el indicador de fin se aade en la propia etiqueta inicial.
Otra caracterstica importante de las etiquetas es que son anidables, por lo que podemos
definir un prrafo (mediante las etiquetas <p> y </p> y en su interior incluir una lista de
elementos, imgenes, texto destacado, etc. empleando diferentes etiquetas. Veremos
muchos ejemplos al respecto.

Parmetros de las etiquetas


Muchas etiquetas HTML necesitan contar con parmetros para funcionar correctamente.
stos son modificadores que se introducen entre los signos de apertura y cierre para
definir algn matiz concreto del elemento HTML.
Por ejemplo, la etiqueta <img/> se emplea para insertar una imagen en la pgina web,
pero por si sola no funciona correctamente. Necesita que le incorporemos un parmetro
en el que indiquemos qu imagen ser la que se muestre. Quedara as:
<img src=fotodelgrupo.jpg />
En el ejemplo siguiente, adems de indicar qu imagen se mostrar, establecemos el
tamao que ocupar en la pantalla:
<img src=fotodelgrupo.jpg widh=300px height=150px/>
Los parmetros se identifican por un trmino, seguido de un signo de igual y a
continuacin, entre comillas, el valor que le queramos asignar.
Cuando un visualizador recibe un fichero, antes de mostrarlo necesita saber el tipo de
contenido que ste tiene, a fin de procesarlo adecuadamente. No es lo mismo recibir un
documento de texto que una fotografa en formato GIF, o un vdeo en formato MPG, o si lo
que estamos intentando es transferir un fichero.
En cada caso, el visualizador pondr en juego distintas habilidades, de las muchas que
posee.
Si el fichero procede de un servidor http remoto, (es decir un servidor web; http es el
nombre del protocolo que utilizar el servicio invocado), ste se encargar de decirle al
visualizador cuanto necesite saber, pero si lo que hay que procesar es un fichero local, la
nica forma de saberlo es por la extensin del fichero.
La extensin de un fichero son las tres o cuatro letras (depende del sistema operativo con
el que se trabaje) que hay despus del nombre del fichero y que estn separadas del
mismo por un punto.
Por ejemplo, esta pgina se llama estruc.htm. Las tres letras que hay despus del punto
(htm) son la extensin del fichero. Las otras, las que estn delante del punto, son
el nombre del fichero.
Las extensiones de 4 o ms letras son tpicas de sistemas operativos como UNIX o
LINUX y las de 3 o menos de Windows, que ha mantenido esta costumbre por herencia
de los tiempos del DOS, ya que puede trabajar perfectamente con extensiones de ms de
3 letras. Por ejemplo, la extensin .html funciona en Windows igual que la .htm
Estas son algunas de las extensiones stndard ms comunes y sus contenidos.
La primera de ellas suele utilizarse en sistemas UNIX-LINUX y la segunda en Windows:
.html o .htm
Documento HTML. Contine texto e instrucciones HTML que sern interpretadas.
.text o .txt

Contiene texto plano. El visualizador presentar todo el fichero como si fuera un nico
bloque de texto y no interpretar ninguna instruccin HTML que pudiera llevar. Esto lo
har con cualquier fichero que lleve una extensin desconocida o simplemente no lleve
ninguna.

.gif: Contiene un fichero de imagen en formato GIF.


.npg: Contiene un fichero de imagen en formato NPG.
.xbm: Contiene un fichero de imagen en formato X-Bitmap (blanco y negro).
.xpm: Contiene un fichero de imagen en formato X-Pixmap (color).
.jpeg o .jpg: Contiene un fichero de imagen en formato codificado jpeg.
.mpeg o .mpg: Contiene un fichero de imagen de video o cine (en movimiento).
.au: Contiene un fichero de audio (sonido) codificado en aiff-encoded.
.mid: Contiene un fichero de audio (sonido) generado con secuenciadores midi
tpicos de Windows.
.avi: Contiene un fichero con video y sonido tpico de Windows.
.mp3: Contiene un fichero con sonido tpico de Windows y otros sistemas.
.exe: Contiene un fichero binario ejecutable en DOS o Windows.
.hqx: Contiene un fichero binario ejecutable en Macintosh.
.Z o .zip: Contiene un (o varios) fichero/s comprimido/s de cualquier clase. Para
poder utilizarlo hay que indicarle al visualizador una herramienta de compresindescompresin.
.pdf: Contiene un fichero de imagen de cualquier documento generado con Acrobat
Writer.
.doc: Contiene un fichero de documento generado por Microsoft Word

En el entorno web se utilizan los MIME types (Multipurpose Internet Mail Extension) para
definir el tipo de un fichero transferido. El visualizador determina desde el MIME type
cmo hay que tratar cada fichero.
3. HISTORIA DEL HTML
HTML 1.0 - 2.0
1989 - 1991
Estos son los primeros pasos del HTML, las pginas no eran muy bonitas que digamos
pero por lo menos tenan hipertexto.
HTML 3
1995
Estos son los das de la larga guerra de los navegadores (Browser wars), Netscape y
Microsoft competan por tener un navegador con ms funciones (y as ganar mercado),
hasta inventaban sus propias etiquetas. En el medio de esta guerra estaba el pobre
desarrollador web, que tena que estar al tanto de ambos navegadores.
Por ejemplo Internet Explorer tena la etiqueta <marquee> y Netscape la etiqueta<blink>.
Esa era la poca en que veas el tpico "best seen on Internet Explorer". En esos das
hubieras tenido que escribir 2 pginas diferentes, una para Netscape y otra para Internet
Explorer.

HTML 4
1998
Por fin termin la guerra de los navegadores y lleg al rescate el Wold Wide Web
Consortium (W3C para los amigos) creando una sola versin de HTML.
HTML 4.01
1999
El buen HTML 4.01, es la versin ms actual de HTML y seguramente la ms usada, por
fin se poda escribir tranquilamente un slo cdigo estando seguro que la mayora de
navegadores lo interpretara bien.
Por supuesto que esta versin tampoco es perfecta, pero est muy cerca de serlo, nada
de qu preocuparse. Con HTML 4.01 puedes estar seguro que la gran mayora de
navegadores mostrarn tu contenido de la forma correcta.
XHTML 1.0
2000
Las cosas cambiaron. HTML y otro lenguaje de marcado conocido como XML se juntaron
y naci el XHTML 1.0.
Es un lenguaje genial, que combina la popularidad y la capacidad de verse correctamente
en todos los navegadores del HTML con la capacidad de extensin del XML.
Actualizacin:
HTML 2
HTML 3.2
HTML 4
HTML 4.01
XHTML 1
XHTML 2
HTML 5
4. ESTRUSCTURA DE UN DOCUMENTO HTML
Todos los documentos Html tienen la estructura que se muesta a continuacin, aunque la
etiqueta <body> puede ser sustituida por <frameset>para un tipo de pginas que dividen
la ventana del navegador en varios cuadros (frames).
<HTML>
<HEAD>
<TITLE>Ttulo de la pgina</TITLE>
...
</HEAD>
<BODY>
Aqu ira el contenido de la pgina
</BODY>
</HTML>
Vamos a analizar ms detenidamente las distintas secciones que componen la pgina
Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por
ejemplo:

<meta name="description" content="Informacin sobre el Centro, las enseanzas que se


pueden cursar, los departamentos didcticos">
<meta name="keywords" content="educacin, enseanza, instituto, profesores, alumnos">
En este caso las etiquetas le indican a los buscadores el contenido de nuestras pginas
(description) y algunas palabras clave (keywords) para su localizacin.
La cabecera es la seccin comprendida entre <head> y </head>. En ella se encuentra
necesariamente el ttulo (entre las etiquetas <title> y </title>).
El
ttulo
de
la
pgina
debe
describir
su
contenido
por
<TITLE>Colegio Pblico de Villaman - mbito de Influencia - </TITLE>

ejemplo:

No valdra en cambio
<TITLE>Pgina de Inicio</TITLE> ya que esto no dice nada por si solo
Dentro de la cabecera tambin se suele incluir cdigo en JavaScript, que se reconoce
porque va comprendido entre las etiquetas
<script language="JavaScript">
Aqu ira el cdigo
//
-->
</SCRIPT>
El cuerpo (body) del documento html es normalmente lo ms importante. Es aqu donde
debemos colocar el contenido de nuestra pgina: texto, fotos, etc.
El cuerpo est delimitado por las etiquetas <body> y </body> La etiqueta <body> suele
contener algunos atributos, a saber:
BGCOLOR parmetro usado para especificar el color de fondo de la pgina. El color se
define como una terna de nmeros (#rrggbb) en base hexadecimal en el orden rojo,
verde, azul (Red, Green, Blue). Tambin se puede usar el nombre en ingls de los colores
predefinidos en los navegadores.
Sintaxis: <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>
Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar
en: Paleta de Colores
TEXT, parmetro usado para definir el color del texto por omisin. Su formato es el mismo
que el de BGCOLOR. Si no se pone nada es negro.
LINK, VLINK, ALINK, parmetros usados para especificar el color por omisin de: texto
con enlace, enlace ya visitado y enlace activo.
Los colores por omisin son LINK=blue, VLINK=purple y ALINK=red. El formato es el
mismo que BGCOLOR.
BACKGROUND, parmetro usado para especfica la ruta y nombre de archivo (URL) de
la imagen que ser usanda como fondo del documento. Esta se ver como mosaico para
cubrir toda la ventana si es pequea (lo habitual).

Sintaxis: <BODY BACKGROUND="ruta/archivo.gif">


Es conveniente especificar la ruta de modo relativo, esto quiere decir que si cambiamos el
directorio completo donde estn nuestras pginas, desde C:\a C:\webs por ejemplo, la
ruta especificada debe seguir siendo vlida.
Por ejemplo si la pgina desde la que hacemos el enlace se encuentra en el
directorio Aprendiendo Html y queremos poner como fondo la imagen fondo.gif, que se
encuentra en gifs, se debe poner:
<BODY BACKGROUND="gifs/fondo.gif">
Si la pgina estuviese en ejemplos se pondra:
<BODY BACKGROUND="../gifs/fondo.gif">
El texto del documento se puede modificar de muchas formas, vamos a ver las ms
usuales:
Ttulos
Los ttulos o encabezamientos se emplean al comienzo de una seccin. Las etiquetas que
se usan son:
Etiqueta
<h1> Ttulo </h1>
<h2> Ttulo </h2>
<h3> Ttulo </h3>
<h4> Ttulo </h4>
<h5> Ttulo </h5>
<h6> Ttulo </h6>

Se ve
Ttulo
Ttulo
Ttulo
Ttulo
Ttulo
Ttulo

Estilos de fuentes
Como ves en la tabla es muy sencillo conseguir los efectos deseados, solamente tienes
que colocar el texto entre las etiquetas adecuadas.
Etiqueta
<B>Texto en Negrita</b>
<I>Itlica</i>
<B><I>Negrita e Itlica</i></b>
<U>Subrayado</u>
<EM>Enfatizado</em>
<STRONG>Fuerte</strong>
<CODE>Code Texto</code>
<CITE> Citation Text</cite>
<KBD>Keyboard Text</kbd>
<SAMP>Sample Text</samp>
<TT>Teletype Text</tt>
<VAR>Variable Element Text</var>
<BIG>Texto grande</big>
<SMALL>Texto pequeo</small>

Se ve
Texto en Negrita
Itlica
Negrita e Itlica
Subrayado Solo Explorer
Enfatizado
Fuerte
Code Texto
Citation Text
Keyboard Text
Sample Text
Teletype Text
Variable Element Text
Texto grande
Texto pequeo

<SUB>Subindice</SUB>
<SUP>Superndice</SUP>
<BLINK> Texto intermitente</blink>
<STRIKE>Texto tachado</STRIKE>

Solo Explorer
Solo Explorer
Texto intermitente Solo Netscape
Texto tachado
Subndice
Superndice

Tamao de fuentes
El tamao de las fuentes se puede especificar de dos maneras, una de ellas por medio de
un nmero del 1 al 7 (de ms pequeo a ms grande) del siguiente modo
<font size=1> Esta es la letra ms pequea que se puede conseguir </font>
Que se ver como
Esta es la letra ms pequea que se puede conseguir
Otra forma es por medio de una referencia relativa:
<font size="+1"> Esto es igual que poner size=4 </font>
Que se ve como
Esto es igual que poner size=4
El tamao por defecto es el 3
Tipos de fuentes
El tipo de fuente es un atributo de FONT y tiene
<font face="Courier">Eso se ver en la fuente Courier</font>

la

siguiente

sintaxis

Que se ve como:
Eso se ver en la fuente Courier
Color de las fuentes
Es otro atributo de FONT. Mira en la pgina de colores para saber cmo se especifican
los colores. La sintaxis es la siguiente:
<font size=2 face="MS Sans Serif" color="navy">Como ves se pueden poner varios
Atributos separados por un espacio</font>
Que se ver as:
Como ves se pueden poner varios atributos separados por un espacio
Prrafos y bloques
Para definir y separar bloques de texto se emplean una serie de etiquetas que definen los
prrafos, texto pre formateado o bloques con significado especial como direcciones o
citas.
Etiquetas de bloques:

<P> Se utiliza para que los prrafos queden separados por una lnea en blanco. Si solo
quieres escribir un punto y aparte debes usar <BR>. Las marcas inicial y final
son <P> y</P>. La etiqueta <P> admite los atributos:
ALIGN="left, ALIGN="right" , ALIGN="center" y ALIGN="justify" para alinearlo a la
izquierda, a la derecha, centrarlo o justificarlo totalmente. Por defecto est alineado a la
izquierda.
<PRE> El texto insertado entre las marcas <PRE> y </PRE> ser visualizado por el
navegador respetando el formato con el que fue escrito en el fichero fuente HTML. Esta
etiqueta es muy til para escribir ms de un espacio o para hacer pequeas tablas
<ADDRESS> empleada para indicar que un texto representa una direccin o una firma.
Generalmente se presenta en cursiva y tabulado.
<BLOCKQUOTE> Se representa con tabulaciones a la izquierda y derecha. Toda los
prrafos de esta pgina estn entre las etiquetas <BLOCKQUOTE> y </BLOCKQUOTE>,
De ese modo se consigue que el texto se presente con mrgenes a ambos lados.
<BR> Este elemento slo tiene marca inicial e indica un salto de lnea, es decir un punto y
aparte sin separar el prrafo. Esta etiqueta no tiene su correspondiente de cierre
<HR> Se emplea para representar una lnea horizontal. Tampoco tiene pareja de
cierre. Se pueden emplear los atributos
ALIGN="left, ALIGN="right" , para alinearla a la izquierda o a la derecha. Por defecto
aparece centrada
WIDTH="66%" SIZE="3", para especificar el ancho en % y el alto en pxels
COLOR="#0000FF, para especificar el color.
5. LA SINTAXIS DE HTML
El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que
llamamos etiqueta. A travs de las etiquetas vamos definiendo los elementos del
documento, como enlaces, prrafos, imgenes, etc. As pues, un documento HTML estar
constituido por texto y un conjunto de etiquetas para definir la forma con la que se tendr
que presentar el texto y otros elementos en la pgina.
La etiqueta presenta frecuentemente dos partes:
Una apertura
De forma general <etiqueta>
Un cierre de tipo </etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que caracterizan a
esta etiqueta. As por ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML
escribimos una frase con el siguiente cdigo:
<b>Esto est en negrita</b>
El resultado Ser:
Esto est en negrita

Las etiquetas <p> y </p> definen un prrafo. Si en nuestro documento HTML


escribiramos:
<p>Hola, estamos en el prrafo 1</p>
<p>Ahora hemos cambiado de prrafo</p>
El resultado sera:
Hola, estamos en el prrafo 1
Ahora hemos cambiado de prrafo
Partes de un documento HTML
Adems de todo esto, un documento HTML ha de estar delimitado por la etiqueta
<html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes
principales:
El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de
ndole informativo como por ejemplo el ttulo de nuestra pgina.
El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde
colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas como las
que hemos visto.
El resultado es un documento con la siguiente estructura:
<Html>
<Head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla:
Ttulo, palabras clave,...
</Head>
<Body>
Etiquetas y contenidos del cuerpo
Parte del documento que ser mostrada por el navegador: Texto e imgenes
</body>
</Html>
6. ELEMENTOS DE BLOQUE Y EN LINEA
En HTML los elementos pueden ser clasificados de varias maneras, por ejemplo:
Segn el doctype, segn su estructura, segn su funcin, entre otras.
Por ahora slo vamos a mencionar que segn su estructura pueden sub-dividirse en
otros 3 grupos: bsicos, de cabecera y de cuerpo.
Los bsicos son aquellos que conforman primariamente el HTML. Sin stos no existe el
HTML como tal, por ejemplo para un documento normal son: html, head, body.

Los de cabecera son aquellos que estn dentro de la etiqueta <head> y contienen
informacin relevante para el funcionamiento del documento, por ejemplo: title, base,
meta, link, style, script, object, entre otros.
Los de cuerpo son aquellos que estn dentro de la etiqueta <body> y estructuran el
contenido de un documento. Estos pueden dividirse principalmente en elementos en
bloque (block elements) y en elementos en lnea (inline elements). (Existen elementos
que tienen dobles clasificaciones, as tambin existen elementos que son subordinados).
La diferencia entre ambos est dada por el Modelo de contenido, por el Formato y
la Direccionalidad, en esta resea nos vamos a centrar en las dos primeras:
Modelo de contenido: los elementos en bloque pueden contener elementos en lnea y a
otros elementos en bloque. A su vez los elementos en lnea pueden contener otros datos y
elementos en lnea, pero no elementos en bloque. En esta distincin est relacionada la
idea de que los elementos en bloque crean estructuras ms grandes que los elementos
en lnea.
Formato: Los elementos en bloque tienen por defecto un formato diferente que el de los
elementos en lnea. Generalmente, los elementos en bloque comienzan en una nueva
lnea, y los elementos en lnea no. Es decir, cada vez que existe un elemento en bloque,
existe un salto de lnea asociado a l.

Los elementos en lnea son:


a

define un anchor (anclaje) (o hipervnculo)

abbr

define una forma abreviada de una palabra o de


una frase

acrony
m

una abreviatura que incluye las letras iniciales de


una frase

se desaconseja el
uso

Indica que el texto debe ser representado con


bold (o negrita).

basefo
nt

desaprobado

permite cambiar algunas propiedades del texto


bi-directional override anulacin del algoritmo
bidireccional (en referencia a la direccin de la
escritura).

bdo

big
br

se desaconseja el
uso

Muestra el texto marcado con un tamao de


fuente ms grande.
line Break Ruptura (o salto) de lnea

cite

Marca una referencia a una fuente, o el autor de


un texto citado.

code

Sirve para marcar el cdigo de un programa.

dfn

Sirve para marcar el trmino que se quiere definir.

em

emphasis nfasis

font

desaprobado

Indica el tamao, color, o fuente del texto que


contiene.

se desaconseja el
uso

Muestra el texto marcado con un estilo en cursiva


o itlica (no tiene un uso semntico, slo visual).

img

imagen

input

Elemento que se utiliza para capturar la


informacin del usuario (dependiendo del contexto
vara).

kbd

Marca el texto que debe introducir el usuario.

label

El elemento label (etiqueta) asocia un rtulo o


etiqueta a un campo de un formulario.

(Short quotations) cita corta.

desaprobado

(strike-through) tachado (no tiene un uso


semntico, slo visual).

samp

Sirve identificar una muestra de los caracteres


que forman la salida o el resultado de algn
proceso (por ejemplo de un programa de
computacin).

select

Crea un contenedor mediante el cual los usuarios


pueden seleccionar de una lista de opciones.

small
span

se desaconseja el
uso

Aplica al texto marcado un tamao de fuente ms


pequeo.
(Abarcar). Es un contenedor genrico en lnea.

Sirve para para aplicar estilo al texto o agrupar


elementos en lnea

strike

desaprobado

Muestra el texto tachado con una linea horizontal.

strong

Sirve para marcar con especial nfasis las partes


ms importantes de un texto.

sub

Crea un subndice posicionando el texto marcado


por debajo de la linea.

sup

Crea un superndice posicionando el texto


marcado por encima de la linea.

textare
a

Similar a input crea un control de entrada de texto


multilnea.

tt

se desaconseja el
uso

Sirve para representar como texto de teletipo


(teletype) o ancho fijo.

desaprobado

Muestra el texto subrayado.

var

Marca variables de programas y similares.

Los elementos en bloque son:


address

Es el elemento encargado de contener la informacin de


contacto con los autores del documento.

blockquot
e

(Cita en bloque). Crea citas en bloque, marca las citas a


otros autores o documentos.

center

desaprobad
o

El elemento center (centro) crea una caja en bloque con


el contenido centrado. En realidad es equivalente a un
div con align=center.

dir

desaprobad
o

El elemento DIR fue diseado para crear listas


multicolumna de directorios.

div

(De division divisin). Es un elemento en bloque


genrico y sirve para crear secciones o agrupar
contenidos.

dl

(De definition list lista de definicin). Crea una lista de

definiciones.

fieldset

El elemento fieldset (grupo de campos) permite


organizar en grupos los campos de un formulario.

form

Acta como contenedor de controles.

h1

Crea un encabezado o ttulo de primer nivel para una


seccin del documento.

h2

Crea un encabezado o ttulo de segundo nivel para una


seccin del documento.

h3

Crea un encabezado o ttulo de tercer nivel para una


seccin del documento.

h4

Crea un encabezado o ttulo de cuarto nivel para una


seccin del documento.

h5

Crea un encabezado o ttulo de quinto nivel para una


seccin del documento.

h6

Crea un encabezado o ttulo de sexto nivel para una


seccin del documento.

hr

Crea una linea de separacin horizontal.

isindex

desaprobad
o

Este elemento crea un control de entrada de texto de


una lnea.

menu

desaprobad
o

En su origen fue pensado para crear mens.

noframes

(De sin marcos). Aporta contenidos alternativos a los


marcos. Las aplicaciones de usuario que no soporten
marcos, o que estn configuradas para no mostrarlos,
deben mostrar en su lugar el contenido de este
elemento.

noscript

Contenedor de contenido alternativo para la


representacin no basada en scripts.

ol

(Lista ordenada). Crea una lista ordenada.

prrafo

pre

(preformateado). Permite que el texto conserve el


formato y sea mostrado tal cual.

table

tabla

ul

(De unordered list, lista no ordenada). Crea una lista no


ordenada.

7. REFERENCIAS DE CARACTERES EN HTML


Una referencia de caracteres es una pequea pieza de cdigo usada para representar
ciertos caracteres en documentos HTML. Principalmente usada para insertar smbolos
que no pertenecen al juego de caracteres (o en muchos casos, smbolos difciles de
ingresar), las referencias de caracteres pueden insertarse utilizando una expresin
regular. De hecho, cada referencia de caracteres puede insertarse de tres formas
diferentes:
Por su nombre de entidad: Cada referencia de caracteres tiene una entidad asignada. El
formato apra insertar un smbolo por su nombre de entidad est compuesto por un
smbolo "&" seguido de su nombre de entidad y un punto y coma (";"). Por ejemplo, el
smbolo de la libra esterlina ("") puede ser insertado como "& pound;".
Por su valor decimal: Tal como con las entidades, un nmero nico es asociado con cada
referencia de caracteres. El formato es compuesto por un smbolo "&" seguido de un
signo numeral ("#"), el nmero asociado y un punto y coma (";"). Por ejemplo, el smbolo
de la libra esterlina ("") puede ser insertado como "&#163;".
Por su valor hexadecimal: Este mtodo funciona exactamente como el del valor decimal
con la diferencia que el nmero se escribe en formato hexadecimal y una "x" (en
minscula) se agrega a continuacin del signo numeral ("#"). Las letras en el nmero
hexadecimal deben ir en maysculas. Por ejemplo, el smbolo de la libra esterlina ("")
puede ser insertado como "&#xA3;".
Muchos navegadores no proveen soporte para todas las entidades de caracteres y
usualmente representan un cuadrado blanco ("") o un signo de pregunta ("?" "") en
su lugar. Por otra parte, la notacin hexadecimal para referencias de caracteres tampoco
es soportada por muchos navegadores, lo que la hace una forma poco fiable de
reproducir smbolos. Dicho esto, queda claro que la mejor forma de representar
referencias de caracteres es a travs de la noracin decimal.
Tablas de referencia de caracteres
A continuacin hay tres tablas de referencias de caracteres que muestran las tres
notaciones y su representacin, para cada smbolo disponible para documentos HTML.

Los documentos XHTML incluyen el smbolo de apstrofe, referido como "&apos;" (por su
nombre de entidad), "&#39;" (por su valor decimal) y "&#x27" (por su valor hexadecimal).
Nota que, como esta referencia de caracteres ha sido recientemente introducidad,
muchos navegadores todava no pueden procesarla por su nombre de entidad, por lo que
es recomendable usar la notacin decimal.

Marcado y caracteres de internacionalizacin


Nombre

Decimal

Hexa

Carcter

&quot;

&#34;

&#x22;

"

&amp;

&#38;

&#x26;

&

&lt;

&#60;

&#x3C;

<

&gt;

&#62;

&#x3E;

>

&OElig;

&#338;

&#x152;

&oelig;

&#339;

&#x153;

&Scaron;

&#352;

&#x160;

&scaron;

&#353;

&#x161;

&Yuml;

&#376;

&#x178;

&circ;

&#710;

&#x2C6;

&tilde;

&#732;

&#x2DC;

&ensp;

&#8194; &#x2002;

&emsp;

&#8195; &#x2003;

&thinsp;

&#8201; &#x2009;

&zwnj;

&#8204; &#x200C;

&zwj;

&#8205; &#x200D;

&lrm;

&#8206; &#x200E;

&rlm;

&#8207; &#x200F;

&ndash;

&#8211; &#x2013;

&mdash;

&#8212; &#x2014;

Nombre

Decimal

Hexa

Carcter

&lsquo;

&#8216; &#x2018;

&rsquo;

&#8217; &#x2019;

&sbquo;

&#8218; &#x201A;

&ldquo;

&#8220; &#x201C;

&rdquo;

&#8221; &#x201D;

&bdquo;

&#8222; &#x201E;

&dagger;

&#8224; &#x2020;

&Dagger;

&#8225; &#x2021;

&permil;

&#8240; &#x2030;

&lsaquo;

&#8249; &#x2039;

&rsaquo;

&#8250; &#x203A;

&euro;

&#8364; &#x20AC;

ISO 8859-1 (Latin 1)


ISO 8859-1 characters (Latin 1)">
Nombre

Decimal

Hexa

Carcter

&nbsp;

&#160;

&#xA0;

&iexcl;

&#161;

&#xA1;

&cent;

&#162;

&#xA2;

&pound;

&#163;

&#xA3;

&curren;

&#164;

&#xA4;

&yen;

&#165;

&#xA5;

&brvbar;

&#166;

&#xA6;

&sect;

&#167;

&#xA7;

&uml;

&#168;

&#xA8;

&copy;

&#169;

&#xA9;

Nombre

Decimal

Hexa

Carcter

&ordf;

&#170;

&#xAA;

&laquo;

&#171;

&#xAB;

&not;

&#172;

&#xAC;

&shy;

&#173;

&#xAD;

&reg;

&#174;

&#xAE;

&macr;

&#175;

&#xAF;

&deg;

&#176;

&#xB0;

&plusmn;

&#177;

&#xB1;

&sup2;

&#178;

&#xB2;

&sup3;

&#179;

&#xB3;

&acute;

&#180;

&#xB4;

&micro;

&#181;

&#xB5;

&para;

&#182;

&#xB6;

&middot;

&#183;

&#xB7;

&cedil;

&#184;

&#xB8;

&sup1;

&#185;

&#xB9;

&ordm;

&#186;

&#xBA;

&raquo;

&#187;

&#xBB;

&frac14;

&#188;

&#xBC;

&frac12;

&#189;

&#xBD;

&frac34;

&#190;

&#xBE;

&iquest;

&#191;

&#xBF;

&Agrave;

&#192;

&#xC0;

&Aacute;

&#193;

&#xC1;

&Acirc;

&#194;

&#xC2;

Nombre

Decimal

Hexa

Carcter

&Atilde;

&#195;

&#xC3;

&Auml;

&#196;

&#xC4;

&Aring;

&#197;

&#xC5;

&AElig;

&#198;

&#xC6;

&Ccedil;

&#199;

&#xC7;

&Egrave;

&#200;

&#xC8;

&Eacute;

&#201;

&#xC9;

&Ecirc;

&#202;

&#xCA;

&Euml;

&#203;

&#xCB;

&Igrave;

&#204;

&#xCC;

&Iacute;

&#205;

&#xCD;

&Icirc;

&#206;

&#xCE;

&Iuml;

&#207;

&#xCF;

&ETH;

&#208;

&#xD0;

&Ntilde;

&#209;

&#xD1;

&Ograve;

&#210;

&#xD2;

&Oacute;

&#211;

&#xD3;

&Ocirc;

&#212;

&#xD4;

&Otilde;

&#213;

&#xD5;

&Ouml;

&#214;

&#xD6;

&times;

&#215;

&#xD7;

&Oslash;

&#216;

&#xD8;

&Ugrave;

&#217;

&#xD9;

&Uacute;

&#218;

&#xDA;

&Ucirc;

&#219;

&#xDB;

Nombre

Decimal

Hexa

Carcter

&Uuml;

&#220;

&#xDC;

&Yacute;

&#221;

&#xDD;

&THORN;

&#222;

&#xDE;

&szlig;

&#223;

&#xDF;

&agrave;

&#224;

&#xE0;

&aacute;

&#225;

&#xE1;

&acirc;

&#226;

&#xE2;

&atilde;

&#227;

&#xE3;

&auml;

&#228;

&#xE4;

&aring;

&#229;

&#xE5;

&aelig;

&#230;

&#xE6;

&ccedil;

&#231;

&#xE7;

&egrave;

&#232;

&#xE8;

&eacute;

&#233;

&#xE9;

&ecirc;

&#234;

&#xEA;

&euml;

&#235;

&#xEB;

&igrave;

&#236;

&#xEC;

&iacute;

&#237;

&#xED;

&icirc;

&#238;

&#xEE;

&iuml;

&#239;

&#xEF;

&eth;

&#240;

&#xF0;

&ntilde;

&#241;

&#xF1;

&ograve;

&#242;

&#xF2;

&oacute;

&#243;

&#xF3;

&ocirc;

&#244;

&#xF4;

Nombre

Decimal

Hexa

Carcter

&otilde;

&#245;

&#xF5;

&ouml;

&#246;

&#xF6;

&divide;

&#247;

&#xF7;

&oslash;

&#248;

&#xF8;

&ugrave;

&#249;

&#xF9;

&uacute;

&#250;

&#xFA;

&ucirc;

&#251;

&#xFB;

&uuml;

&#252;

&#xFC;

&yacute;

&#253;

&#xFD;

&thorn;

&#254;

&#xFE;

&yuml;

&#255;

&#xFF;

Smbolos, smbolos matemticos, y letras griegas


Nombre

Decimal Hexa

Carcter

&fnof;

&#402;

&#x192;

&Alpha;

&#913;

&#x391;

&Beta;

&#914;

&#x392;

&Gamma;

&#915;

&#x393;

&Delta;

&#916;

&#x394;

&Epsilon;

&#917;

&#x395;

&Zeta;

&#918;

&#x396;

&Eta;

&#919;

&#x397;

&Theta;

&#920;

&#x398;

&Iota;

&#921;

&#x399;

&Kappa;

&#922;

&#x39A;

&Lambda;

&#923;

&#x39B;

Nombre

Decimal Hexa

Carcter

&Mu;

&#924;

&#x39C;

&Nu;

&#925;

&#x39D;

&Xi;

&#926;

&#x39E;

&Omicron;

&#927;

&#x39F;

&Pi;

&#928;

&#x3A0;

&Rho;

&#929;

&#x3A1;

&Sigma;

&#931;

&#x3A3;

&Tau;

&#932;

&#x3A4;

&Upsilon;

&#933;

&#x3A5;

&Phi;

&#934;

&#x3A6;

&Chi;

&#935;

&#x3A7;

&Psi;

&#936;

&#x3A8;

&Omega;

&#937;

&#x3A9;

&alpha;

&#945;

&#x3B1;

&beta;

&#946;

&#x3B2;

&gamma;

&#947;

&#x3B3;

&delta;

&#948;

&#x3B4;

&epsilon;

&#949;

&#x3B5;

&zeta;

&#950;

&#x3B6;

&eta;

&#951;

&#x3B7;

&theta;

&#952;

&#x3B8;

&iota;

&#953;

&#x3B9;

&kappa;

&#954;

&#x3BA;

&lambda;

&#955;

&#x3BB;

&mu;

&#956;

&#x3BC;

Nombre

Decimal Hexa

Carcter

&nu;

&#957;

&#x3BD;

&xi;

&#958;

&#x3BE;

&omicron;

&#959;

&#x3BF;

&pi;

&#960;

&#x3C0;

&rho;

&#961;

&#x3C1;

&sigmaf;

&#962;

&#x3C2;

&sigma;

&#963;

&#x3C3;

&tau;

&#964;

&#x3C4;

&upsilon;

&#965;

&#x3C5;

&phi;

&#966;

&#x3C6;

&chi;

&#967;

&#x3C7;

&psi;

&#968;

&#x3C8;

&omega;

&#969;

&#x3C9;

&thetasym; &#977;

&#x3D1;

&upsih;

&#978;

&#x3D2;

&piv;

&#982;

&#x3D6;

&bull;

&#8226; &#x2022;

&hellip;

&#8230; &#x2026;

&prime;

&#8242; &#x2032;

&Prime;

&#8243; &#x2033;

&oline;

&#8254; &#x203E;

&frasl;

&#8260; &#x2044;

&weierp;

&#8472; &#x2118;

&image;

&#8465; &#x2111;

&real;

&#8476; &#x211C;

Nombre

Decimal Hexa

Carcter

&trade;

&#8482; &#x2122;

&alefsym;

&#8501; &#x2135;

&larr;

&#8592; &#x2190;

&uarr;

&#8593; &#x2191;

&rarr;

&#8594; &#x2192;

&darr;

&#8595; &#x2193;

&harr;

&#8596; &#x2194;

&crarr;

&#8629; &#x21B5;

&lArr;

&#8656; &#x21D0;

&uArr;

&#8657; &#x21D1;

&rArr;

&#8658; &#x21D2;

&dArr;

&#8659; &#x21D3;

&hArr;

&#8660; &#x21D4;

&forall;

&#8704; &#x2200;

&part;

&#8706; &#x2202;

&exist;

&#8707; &#x2203;

&empty;

&#8709; &#x2205;

&nabla;

&#8711; &#x2207;

&isin;

&#8712; &#x2208;

&notin;

&#8713; &#x2209;

&ni;

&#8715; &#x220B;

&prod;

&#8719; &#x220F;

&sum;

&#8721; &#x2211;

&minus;

&#8722; &#x2212;

&lowast;

&#8727; &#x2217;

Nombre

Decimal Hexa

Carcter

&radic;

&#8730; &#x221A;

&prop;

&#8733; &#x221D;

&infin;

&#8734; &#x221E;

&ang;

&#8736; &#x2220;

&and;

&#8743; &#x2227;

&or;

&#8744; &#x2228;

&cap;

&#8745; &#x2229;

&cup;

&#8746; &#x222A;

&int;

&#8747; &#x222B;

&there4;

&#8756; &#x2234;

&sim;

&#8764; &#x223C;

&cong;

&#8773; &#x2245;

&asymp;

&#8776; &#x2248;

&ne;

&#8800; &#x2260;

&equiv;

&#8801; &#x2261;

&le;

&#8804; &#x2264;

&ge;

&#8805; &#x2265;

&sub;

&#8834; &#x2282;

&sup;

&#8835; &#x2283;

&nsub;

&#8836; &#x2284;

&sube;

&#8838; &#x2286;

&supe;

&#8839; &#x2287;

&oplus;

&#8853; &#x2295;

&otimes;

&#8855; &#x2297;

&perp;

&#8869; &#x22A5;

Nombre

Decimal Hexa

&sdot;

&#8901; &#x22C5;

&lceil;

&#8968; &#x2308;

&rceil;

&#8969; &#x2309;

&lfloor;

&#8970; &#x230A;

&rfloor;

&#8971; &#x230B;

&lang;

&#9001; &#x2329;

&rang;

&#9002; &#x232A;

&loz;

&#9674; &#x25CA;

&spades;

&#9824; &#x2660;

&clubs;

&#9827; &#x2663;

&hearts;

&#9829; &#x2665;

&diams;

&#9830; &#x2666;

Carcter

i http://librosweb.es/www.uv.es
http://platea.pntic.mec.es/