Informe de Aplicaciones Web

CARACTERSTICAS DEL LENGUAJE HTML
HTML es un lenguaje de etiquetas (tambin llamado lenguaje de marcado) y las

pginas web habituales estn formadas por cientos o miles de pares de etiquetas.
De hecho, las letras "ML" de la sigla HTML significan "markup language", que es
como se denominan en ingls a los lenguajes de marcado. Adems de HTML,
existen muchos otros lenguajes de etiquetas como XML, SGML, DocBook y
MathML.
La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer
y escribir por parte de las personas y de los sistemas electrnicos. La principal
desventaja es que pueden aumentar mucho el tamao del documento, por lo que
en general se utilizan etiquetas con nombres muy cortos.
ESTRUCTURA DEL DOCUMENTO HTML
Las pginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera

incluye informacin sobre la propia pgina, como por ejemplo su ttulo y su idioma.
El cuerpo de la pgina incluye todos sus contenidos, como prrafos de texto e
imgenes. El cuerpo (llamado body en ingls) contiene todo lo que el usuario ve
en su pantalla y la cabecera (llamada head en ingls) contiene todo lo que no se
ve (con la nica excepcin del ttulo de la pgina, que los navegadores muestran
como ttulo de sus ventanas).
ETIQUETAS Y ATRIBUTOS
HTML define 91 etiquetas que los diseadores pueden utilizar para marcar los
diferentes elementos que componen una pgina:
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote,
body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl,
dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i,
iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta,
noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script,
select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot,
th, thead, title, tr, tt, u, ul, var.
De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se

pueden utilizar: applet, basefont, center, dir, font, isindex, menu, s, strike, u.
A pesar de que se trata de un nmero de etiquetas muy grande, no es suficiente

para crear pginas complejas. Algunos elementos como las imgenes y los
enlaces requieren cierta informacin adicional para estar completamente definidos.
ATRIBUTOS BSICOS
Los siguientes cuatro atributos bsicos se pueden aplicar prcticamente a todas

las etiquetas HTML:
Atributo Descripcin
id = Establece un identificador nico a cada elemento dentro de una
"texto" pgina HTML
class = Establece la clase CSS que se aplica a los estilos del elemento
"texto"
style = Establece de forma directa los estilos CSS de un elemento
"texto"
title = Establece el ttulo a un elemento (mejora la accesibilidad y los
"texto" navegadores lo muestran cuando el usuario pasa el ratn por encima
del elemento)
La mayora de pginas web actuales utilizan los atributos id y class de forma
masiva. Sin embargo, estos atributos slo son realmente tiles cuando se trabaja
con CSS y con Javascript.
ATRIBUTOS PARA INTERNACIONALIZACIN
Estos atributos son tiles para aquellas pginas que muestran sus contenidos en
varios idiomas y para aquellas que quieren indicar de forma expltica el idioma de
sus contenidos:
Atributo Descripcin
lang = "codigo de Indica el idioma del elemento mediante un cdigo
idioma" predefinido
xml:lang = "codigo de Indica el idioma del elemento mediante un cdigo
idioma" predefinido
Dir Indica la direccin del texto (til para los idiomas que
escriben de derecha a izquierda)
En las pginas XHTML, el atributo xml:lang tiene ms prioridad que lang y es
obligatorio incluirlo siempre que se incluye el atributo lang. Los idiomas se indican
mediante un cdigo estandarizado (es para espaol, en para ingls, etc.), tal y
como se explicar ms adelante en la seccin idioma del enlace del captulo 4.
Como la palabra internacionalizacin es muy larga, se suele sustituir por la

abreviatura i18n (el nmero 18 se refiere al nmero de letras que existen entre la
letra i y la letra n de la palabra internacionalizacin).
ATRIBUTOS DE EVENTOS
Estos atributos slo se utilizan en las pginas web que incluyen cdigo JavaScript
para realizar acciones dinmicas sobre los elementos de la pgina. Cada vez que
el usuario pulsa una tecla, mueve su ratn o pulsa cualquier botn del ratn, se
produce un evento dentro del navegador. Utilizando JavaScript y los siguientes
atributos, es posible responder de forma adecuada a cada evento.
Atributo Descripcin Elementos que pueden

usarlo
onblur Deseleccionar el elemento <button>, <input>, <label>,
<select>, <textarea>,
<body>
onchange Deseleccionar un elemento que <input>, <select>,
se ha modificado <textarea>
onclick Pinchar y soltar el ratn Todos los elementos
ondblclick Pinchar dos veces seguidas con Todos los elementos
el ratn
onfocus Seleccionar un elemento <button>, <input>, <label>,
<select>, <textarea>,
<body>
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y
<body>
onkeypress Pulsar una tecla Elementos de formulario y
<body>
onkeyup Soltar una tecla pulsada Elementos de formulario y
<body>
onload La pgina se ha cargado <body>
completamente
onmousedown Pulsar (sin soltar) un botn del Todos los elementos
ratn
onmousemove Mover el ratn Todos los elementos
onmouseout El ratn "sale" del elemento (pasa Todos los elementos
por encima de otro elemento)
onmouseover El ratn "entra" en el elemento Todos los elementos
(pasa por encima del elemento)
onmouseup Soltar el botn que estaba Todos los elementos
pulsado en el ratn
onreset Inicializar el formulario (borrar <form>
todos sus datos)
onresize Se ha modificado el tamao de la <body>
ventana del navegador

onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
onunload Se abandona la pgina (por <body>
ejemplo al cerrar el navegador)
ATRIBUTOS DE FOCO
Cuando el usuario selecciona un elemento en una aplicacin, se dice que "el

elemento tiene el foco del programa". Si por ejemplo un usuario pincha con su
ratn sobre un cuadro de texto y comienza a escribir, ese cuadro de texto tiene el
foco del programa, llamado "focus" en ingls. Si el usuario selecciona despus
otro elemento, el elemento original pierde el foco y el nuevo elemento es el que
tiene el foco del programa.
Los elementos de las pginas web tambin pueden obtener el foco de la

aplicacin (en este caso, el foco del navegador) y HTML define algunos atributos
especficos para controlar cmo se seleccionan los elementos.
Atributo Descripcin
accesskey = Establece una tecla de acceso rpido a un elemento HTML
"letra"
tabindex = Establece la posicin del elemento en el orden de tabulacin de
"numero" la pgina. Su valor debe estar comprendido entre 0 y 32.767
onfocus, Controlan los eventos JavaScript que se ejecutan cuando el
onblur elemento obtiene o pierde el foco
ELEMENTOS HTML
Adems de etiquetas y atributos, HTML define el trmino elemento para referirse

a las partes que componen los documentos HTML.
Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en

realidad un elemento HTML es mucho ms que una etiqueta, ya que est formado
por:
Una etiqueta de apertura.

Cero o ms atributos.
Texto encerrado por la etiqueta.
Una etiqueta de cierre.
El texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de HTML
no pueden encerrar ningn texto.
Por tanto, si una pgina web tiene dos prrafos de texto, la pgina contiene dos
elementos y cuatro etiquetas (dos etiquetas <p> de apertura y dos etiquetas </p>
de cierre). De todas formas, aunque estrictamente no son lo mismo, es habitual
intercambiar las palabras "elemento" y "etiqueta".
Por otra parte, el lenguaje HTML clasifica a todos los elementos en dos grupos:
elementos en lnea (inline elements en ingls) y elementos de bloque (block
elements en ingls).
La principal diferencia entre los dos tipos de elementos es la forma en la que

ocupan el espacio disponible en la pgina. Los elementos de bloque siempre
empiezan en una nueva lnea y ocupan todo el espacio disponible hasta el final de
la lnea, aunque sus contenidos no lleguen hasta el final de la lnea. Por su parte,
los elementos en lnea slo ocupan el espacio necesario para mostrar sus
contenidos.
Los elementos en lnea definidos por HTML son: a, abbr, acronym, b, basefont,
bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select,
small, span, strike, strong, sub, sup, textarea, tt, u, var.
Los elementos de bloque definidos por HTML son: address, blockquote, center,
dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-
cript, ol, p, pre, table, ul.
Los siguientes elementos tambin se considera que son de bloque: dd, dt, frame-
set, li, tbody, td, tfoot, th, thead, tr.
Los siguientes elementos pueden ser en lnea y de bloque segn las

circunstancias: button, del, iframe, ins, map, object, script.
SINTAXIS DE LAS ETIQUETAS HTML
El lenguaje HTML original era muy permisivo en su sintaxis, por lo que era posible
escribir sus etiquetas y atributos de muchas formas diferentes. Las etiquetas por
ejemplo podan escribirse en maysculas, en minsculas e incluso combinando
maysculas y minsculas. El valor de los atributos de las etiquetas se podan
indicar con y sin comillas ("). Adems, el orden en el que se abran y cerraban las
etiquetas no era importante.
La flexibilidad de HTML puede parecer un aspecto positivo, pero el resultado final

son pginas con un cdigo HTML desordenado, difcil de mantener y muy poco
profesional. Afortunadamente, XHTML soluciona estos problemas aadiendo
ciertas normas en la forma de escribir las etiquetas y atributos.
A continuacin se muestran las cinco restricciones bsicas que introduce XHTML

respecto a HTML en la sintaxis de sus etiquetas:
1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:
Ejemplo correcto en XHTML:
<p>Este es un prrafo con <a>un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<p>Este es un prrafo con <a>un enlace</p></a>
2) Los nombres de las etiquetas y atributos siempre se escriben en

minsculas:
<p>Este es un prrafo con <a href="http://www.google.com">un enlace</a></p>

<P>Este es un prrafo con <A HREF="http://www.google.com">un
enlace</A></P>
3) El valor de los atributos siempre se encierra con comillas:
<p>Este es un prrafo con <a href="http://www.google.com">un enlace</a></p>
<p>Este es un prrafo con <a href=http://www.google.com>un enlace</a></p>

4) Los atributos no se pueden comprimir:
<dl compact="compact">...</dl>
<dl compact>...</dl>
Este tipo de atributos en los que el nombre coincide con su valor no son muy
habituales.
5) Todas las etiquetas deben cerrarse siempre:
La mayora de etiquetas HTML encierran un contenido de texto entre la etiqueta

de apertura y la etiqueta de cierre. Sin embargo, algunas etiquetas especiales
llamadas "etiquetas vacas" no necesitan encerrar ningn texto.
La etiqueta <br> por ejemplo, se utiliza para indicar el comienzo de una nueva
lnea, tal y como se ver ms adelante. Por sus caractersticas, la etiqueta <br>
nunca encierra ningn contenido de texto.
Como el estndar XHTML obliga a cerrar todas las etiquetas abiertas, siempre que
se incluya la etiqueta <br> se debera cerrar de forma seguida: <br></br>. Para
que el cdigo resulte ms cmodo de escribir, XHTML permite en estos casos
escribir de forma abreviada una etiqueta que se abre y se cierra de forma
consecutiva.
En lugar de abrir y cerrar de forma consecutiva la etiqueta (<br></br>) se puede

utilizar la sintaxis <br/> para indicar que es una etiqueta vaca que se abre y se
cierra en ese mismo punto. En la forma compacta es habitual equivocarse con la
posicin del carcter /.
Adems de estas cinco restricciones bsicas, XHTML incluye otros cambios ms

avanzados respecto a HTML:
1. Antes de acceder al valor de un atributo, se eliminan todos los espacios en blanco

que se encuentran antes y despus del valor. Adems, se eliminan todos los
espacios en blanco sobrantes dentro del valor de un atributo. En otras palabras, si
en el interior de un atributo se incluyen varios espacios en blanco seguidos, se
eliminan todos salvo un nico espacio en blanco utilizado para separar las
diferentes palabras.
2. Como se explicar ms adelante al hablar de la etiqueta <script>, el cdigo
JavaScript debe encerrarse entre unas etiquetas especiales (<![CDATA[ y ]]>) para
evitar que el navegador interprete de forma errnea caracteres como & y <.
3. Las pginas XHTML deben prescindir del atributo name para identificar de forma
nica a los elementos. En su lugar, siempre debe utilizarse el atributo id. De
hecho, en la versin 1.0 del estndar XHTML, el atributo name se ha declarado
obsoleto para las etiquetas a, applet, form, frame, iframe, img y map.
ETIQUETAS DEL HTML PARA TEXTO
La mayor parte del contenido de las pginas HTML habituales est formado por
texto, llegando a ser ms del 90% del cdigo de la pgina. Por este motivo, es
muy importante conocer los elementos y etiquetas que define HTML para el
manejo del texto.
El lenguaje HTML incorpora al tratamiento del texto muchas de las ideas y normas
establecidas en otros entornos de publicacin de contenidos. De esta forma,
HTML define etiquetas para estructurar el contenido en secciones y prrafos y
define otras etiquetas para marcar elementos importantes dentro del texto.
La tarea inicial del editor de contenidos HTML consiste en estructurar el texto

original definiendo sus prrafos, titulares y ttulos de seccin.
El proceso de estructurar un texto simple consiste en indicar las diferentes zonas o

secciones que componen el texto. De esta forma, los textos estructurados utilizan
etiquetas para delimitar cada prrafo y ttulos de seccin para delimitar cada una
de las secciones que forman el texto.
Una vez definida la estructura bsica de los contenidos de la pgina, el siguiente

paso consiste en marcar los diferentes elementos dentro del propio texto:
definiciones, abreviaturas, textos importantes, textos modificados, citas a otras
referencias, etc.
MARCADO BSICO DE TEXTO
Una vez estructurado el texto en prrafos y secciones, el siguiente paso es el

marcado de los elementos que componen el texto. Los textos habituales estn
formados por elementos como palabras en negrita o cursiva, anotaciones y
correcciones, citas a otros documentos externos, etc. HTML proporciona varias
etiquetas para marcar cada uno de los diferentes tipos de texto.
Entre las etiquetas ms utilizadas para marcar texto se encuentran <em> y

<strong>. La definicin formal de estas dos etiquetas se muestra a continuacin:
Etiqueta <em>
Atributos comunes bsicos, internacionalizacin y eventos
Atributos propios -
Tipo de elemento En lnea
Descripcin Realza la importancia del texto que encierra
Etiqueta <strong>
Atributos propios -
Descripcin Realza con la mxima importancia el texto que encierra
HTML tambin permite marcar de forma adecuada las modificaciones realizadas

en el contenido de una pgina. En otras palabras, HTML permite indicar de forma
clara el texto que ha sido eliminado y el texto que ha sido aadido a un
determinado texto original. Las etiquetas utilizadas son <ins> y <del>, cuya
definicin formal es la siguiente:
Etiqueta <ins>
Atributos bsicos, internacionalizacin y eventos
comunes
Atributos cite = "url" - Indica la URL de la pgina en la que se puede
propios obtener ms informacin sobre el motivo por el que se
realiz la modificacin.
datetime = "fecha" - Especifica la fecha y hora en la que
se realiz el cambio
Tipo de Bloque y en lnea

elemento
Descripcin Se emplea para marcar una modificacin en los contenidos
originales consistente en la insercin de un nuevo contenido
Etiqueta <del>
comunes
Atributos cite = "url" - Indica la URL de la pgina en la que se puede
propios obtener ms informacin sobre el motivo por el que se
realiz la modificacin.
datetime = "fecha" - Especifica la fecha y hora en la que
se realiz el cambio

elemento
Descripcin Se emplea para marcar una modificacin en los contenidos
originales consistente en el borrado de cierto contenido
Las dos etiquetas cuentan con los mismos atributos especficos, que
opcionalmente se pueden aadir para proporcionar ms informacin sobre los
cambios realizados. El atributo cite se emplea para indicar la direccin de un
documento externo en el que se puede encontrar ms informacin relacionada con
la insercin o el borrado de texto. El atributo datetime puede utilizarse para indicar
la fecha y la hora en la que se realiz cada cambio.
Por defecto, el texto eliminado (marcado con la etiqueta <del>) se muestra

tachado de forma que el usuario pueda identificarlo fcilmente como un texto que
formaba parte del texto original y que ya no tiene validez. El texto insertado
(marcado con la etiqueta <ins>) se muestra subrayado, de forma que el usuario
pueda identificarlo como un texto nuevo que no formaba parte del texto original.
Por otra parte, en muchos tipos de pginas (artculos, noticias) es habitual citar
literalmente un texto externo. HTML define la etiqueta <blockquote> para incluir
citas textuales en las pginas web. La definicin de la etiqueta HTML con el
nombre ms largo se muestra a continuacin:
Etiqueta <blockquote>
comunes
Atributos cite = "url" - Indica la direccin de la pgina web original
propios de la que se extrae la cita
Tipo de Bloque
elemento
Descripcin Se emplea para indicar que el texto que encierra es una cita
textual de otro texto externo
Al igual que <ins> y <del>, la etiqueta <blockquote> permite indicar mediante el

atributo cite la direccin de un documento del que se ha extrado la cita.
Para indicar de forma clara que el texto es una cita externa, los navegadores
muestran por defecto el texto del elemento <blockquote> con un gran margen en
la parte izquierda.
MARCADO AVANZADO DE TEXTO
Las pginas y documentos ms avanzados suelen incluir otros elementos

importantes que se deben marcar de forma adecuada. Por ello, HTML incluye
muchas otras etiquetas que permiten marcar ms elementos del texto.
La etiqueta <abbr> marca las abreviaturas de un texto y la etiqueta <acronym> se

emplea para marcar las siglas o acrnimos del texto. Su definicin es la siguiente:
Etiqueta <abbr>
comunes
Atributos title = "texto" - Indica el significado completo de la
propios abreviatura
Tipo de En lnea
elemento
Descripcin Se emplea para marcar las abreviaturas del texto y
proporcionar el significado de esas abreviaturas
Etiqueta <acronym>
comunes
Atributos title = "texto" - Indica el significado completo del
propios acrnimo o sigla
Tipo de En lnea
elemento
Descripcin Se emplea para marcar las siglas o acrnimos del texto y
proporcionar el significado de esas siglas
En ambos casos, el atributo title se puede utilizar para incluir el significado

completo de la abreviatura o sigla.
La mayora de navegadores muestran por defecto un borde inferior punteado para

todos los elementos <abbr> y <acronym>. Al posicionar el puntero del ratn sobre
la palabra subrayada, el navegador muestra un pequeo recuadro (llamado tooltip
en ingls) con el valor del atributo title.
Por otra parte, en ocasiones resulta til incluir la definicin de una palabra extraa
o cuyo uso est restringido a un entorno muy determinado. HTML incluye la
etiqueta <dfn> para proporcionar al usuario la definicin de todas las palabras para
las que se considere apropiado. La definicin formal de esta etiqueta se muestra a
continuacin:
Etiqueta <dfn>
comunes
Atributos title = "texto" - Indica el significado completo del trmino
propios
Tipo de En lnea
elemento
Descripcin Se emplea para marcar las definiciones de ciertos trminos y
proporcionar el significado de esos trminos
Por ltimo, HTML incluye una etiqueta que se puede utilizar para marcar un texto
como una citacin:
Etiqueta <cite>
comunes
Atributos propios -
Descripcin Se emplea para marcar una cita o una referencia a otras
fuentes
En ocasiones, no est clara la diferencia entre <cite> y <blockquote>. El elemento

<cite> marca el autor de la cita (persona, documento, etc.) y <blockquote> marca
el contenido de la propia cita.
ESPACIOS EN BLANCO Y NUEVAS LNEAS
El aspecto ms sorprendente del lenguaje HTML cuando se desarrollan los

primeros documentos es el tratamiento especial de los "espacios en blanco" del
texto. HTML considera espacio en blanco a los espacios en blanco, los
tabuladores, los retornos de carro y el carcter de nueva lnea (ENTER o Intro).
Los dos prrafos de la imagen anterior se ven idnticos, aunque el segundo

prrafo incluye varios espacios en blanco y est escrito en varias lneas diferentes.
La razn de este comportamiento es que HTML ignora todos los espacios en
blanco sobrantes, es decir, todos los espacios en blanco que no son el espacio en
blanco que separa las palabras.
No obstante, HTML proporciona varias alternativas para poder incluir tantos
espacios en blanco y tantas nuevas lneas como sean necesarias dentro del
contenido textual de las pginas.
NUEVAS LNEAS
Para incluir una nueva lnea en un punto y forzar a que el texto que sigue se
muestre en la lnea inferior, se utiliza la etiqueta <br>. En cierta manera, insertar la
etiqueta <br> en un determinado punto del texto equivale a presionar la tecla
ENTER (o Intro) en ese mismo punto.
La definicin formal de <br> se muestra a continuacin:
Etiqueta <br>
Atributos comunes bsicos
Atributos propios -
Tipo de elemento En lnea y etiqueta vaca
Descripcin Fuerza al navegador a insertar una nueva lnea
La etiqueta <br> es una de las pocas etiquetas especiales de HTML. La

particularidad de <br> es que es una etiqueta vaca, es decir, no encierra ningn
texto. De esta forma, la etiqueta debe abrirse y cerrarse de forma consecutiva:
<br></br>.
En estos casos, HTML permite utilizar un atajo para indicar que una etiqueta se
est abriendo y cerrando de forma consecutiva: <br/> (tambin se puede escribir
como <br />).
ESPACIOS EN BLANCO
La solucin al problema de los espacios en blanco no es tan sencilla como el de

las nuevas lneas. Para incluir espacios en blanco adicionales, se debe sustituir
cada nuevo espacio en blanco por el texto (es importante incluir el smbolo
& al principio y el smbolo ; al final).
Cada texto solamente equivale a un espacio en blanco, por lo que se
deben escribir tantos seguidos como espacios en blanco seguidos existan
en el texto.
Ms adelante se profundiza en el origen de y se comprender por qu es

necesario incluir esa sucesin tan extraa de caracteres cada vez que se quiere
incluir un espacio en blanco adicional.
TEXTO PRE FORMATEADO
En ocasiones, es necesario mostrar los espacios en blanco de un texto que no se

puede modificar. Se trata de un caso habitual cuando una pgina web debe
mostrar directamente el texto generado por alguna aplicacin.
En estos casos, se puede utiliza la etiqueta <pre>, que muestra el texto tal y como
se ha escrito, respetando todos los espacios en blanco y todas las nuevas lneas.
La definicin formal de la etiqueta se muestra a continuacin:
Etiqueta <pre>
comunes
Atributos -
propios
Tipo de Bloque
elemento
Descripcin Muestra el texto que encierra tal y como est escrito
(respetando los espacios en blanco)
El primer texto se ve en pantalla tal y como se ha escrito, respetando todos los

espacios en blanco y todas las nuevas lneas. El segundo texto se ve como un
prrafo normal, ya que HTML ha eliminado todos los espacios en blanco
sobrantes.
Los elementos <pre> son especiales, ya que los navegadores les aplican las
siguientes reglas:
Mantienen todos los espacios en blanco (tabuladores, espacios y nuevas

lneas)
Muestra el texto con un tipo de letra especial, denominado "de ancho fijo",
ya que todas sus letras son de la misma anchura
No se ajusta la longitud de las lneas (las lneas largas producen un scroll
horizontal en la ventana del navegador)
Esta ltima caracterstica diferencia por completo a los prrafos de los elementos
<pre>. Como se ha visto, los navegadores ajustan la anchura de los prrafos de
texto para que ocupen todo el tamao de la ventana. Sin embargo, los elementos
<pre> se muestran tal y como son originalmente, por lo que una lnea muy larga
dentro de un elemento <pre> provoca que la anchura de la pgina sea superior a
la anchura de la ventana del navegador.
Si en el ejemplo anterior se aade ms texto al final de la segunda lnea (para

producir una lnea larga), el navegador muestra un scroll horizontal ya que el texto
completo no cabe en el tamao de la ventana y las lneas de los elementos <pre>
nunca se ajustan.
Otra etiqueta relacionada con <pre> es la etiqueta <code>, que se utiliza para
mostrar cdigo fuente de cualquier lenguaje de programacin. La definicin formal
de <code> es la siguiente:
Etiqueta <code>
Atributos propios -
Descripcin Delimita el texto considerado un fragmento de cdigo fuente
En la mayora de pginas web, no tiene sentido utilizar la etiqueta <code>. Sin
embargo, en muchas pginas web tcnicas que incluyen listados de programas,
trozos de cdigo o etiquetas HTML, lo correcto es emplear la etiqueta <code>.
Al igual que sucede con los elementos <pre>, el texto encerrado por la etiqueta
<code> se muestra con un tipo de letra especial de ancho fijo. Por el contrario, el
elemento <code> no respeta los espacios en blanco ni las lneas, por lo que su
comportamiento es similar a la etiqueta <p>. La ltima diferencia es que <code>
es un elemento en lnea, mientras que <pre> es un elemento de bloque.
CODIFICACIN DE CARACTERES
Una consideracin importante directamente relacionada con el texto de las

pginas HTML es la codificacin de los caracteres y la insercin de caracteres
especiales. Algunos de los caracteres que se utilizan habitualmente en los textos
no se pueden incluir directamente en las pginas web:
Los caracteres que utiliza HTML para definir sus etiquetas (<, > y ") no se
pueden utilizar libremente.
Los caracteres propios de los idiomas que no son el ingls (, , , , ,
etc.) pueden ser problemticos dependiendo de la codificacin de
caracteres utilizada.
La solucin a la primera limitacin consiste en sustituir los caracteres reservados

de HTML por unas expresiones llamadas entidades HTML y que representan a
cada carcter:
Entidad Carcter Descripcin Traduccin

< < less than signo de menor que
> > more than signo de mayor que
& & ampersand ampersand
" " quotation mark comillas
(espacio en blanco) non-breaking space espacio en blanco
' ' apostrophe apstrofo
De esta forma, si se considera el siguiente texto:
Los caracteres <, >, " y & pueden dar problemas con los textos en HTML
Para mostrar correctamente el texto anterior en una pgina HTML, se debe

sustituir cada carcter especial por su entidad HTML:
<p>Los caracteres <, >, " y & pueden dar problemas con los textos
en HTML</p>
Por otra parte, los caracteres propios de los idiomas diferentes al ingls tambin
pueden ser problemticos. El motivo es que desde que se crea una pgina web
hasta que llega al navegador del usuario, intervienen numerosos procesos:
El diseador crea la pgina web con su editor HTML (por ejemplo

Dreamweaver).
Si se trata de una aplicacin dinmica, el programador recorta la pgina
HTML del diseador y la mezcla con el resto del cdigo de la aplicacin (por
ejemplo PHP).
El servidor web almacena las pginas HTML estticas o el cdigo de la
aplicacin web y sirve las pginas solicitadas por los usuarios.
El usuario solicita y visualiza las pginas web a travs de su navegador.
Si en todos los procesos anteriores se utiliza la misma codificacin de caracteres,

los caracteres propios de los idiomas se pueden escribir directamente:
<p>Este prrafo contiene caracteres acentuados y se almacena en formato UTF-

8</p>
La palabra prrafo del ejemplo anterior incluye la letra . Si el editor HTML del
diseador utiliza la codificacin UTF-8, el entorno de desarrollo del programador
tambin utiliza UTF-8, el servidor web sirve las pginas con esa codificacin y el
navegador del usuario es capaz de visualizar las pginas con formato UTF-8, el
texto anterior se ver correctamente en el navegador del usuario.
Sin embargo, muchas veces no es posible que todos los procesos involucrados
utilicen la misma codificacin de caracteres. Por limitaciones tcnicas o por
decisiones de los diseadores y programadores, los textos pueden pasar de
codificacin UTF-8 a codificacin ISO-8859 en cualquier momento. Si se produce
este cambio sin realizar una conversin correcta, el navegador del usuario
mostrar caracteres extraos en todos los acentos y en todas las letras como la .
La solucin ms sencilla para asegurar que todos estos caracteres potencialmente

problemticos se van a visualizar correctamente en el navegador del usuario
consiste en sustituir cada carcter problemtico por su entidad HTML:
Entidad Carcter Descripcin oficial

ñ latin letter n with tilde
Ñ latin capital n letter with tilde
á a acute
é e acute
í i acute
ó o acute
ú u acute
Á A acute
É E acute
Í I acute
Ó O acute
Ú U acute
€ euro
As, el prrafo de texto del ejemplo anterior, se podra escribir de la siguiente

manera:
<p>Este párrafo contiene caracteres acentuados y se almacena en formato
UTF-8</p>
Si se utilizan las entidades HTML en vez de los caracteres problemticos, es

indiferente pasar de una codificacin de caracteres a otra diferente.
ETIQUETAS DEL HTML PARA ENLACES
El lenguaje de marcado HTML se defini teniendo en cuenta algunas de las

caractersticas que existan en ese momento para la publicacin digital de
contenidos. Entre los conceptos utilizados en su creacin, se encuentra el
mecanismo de "hipertexto".
De hecho, las letras "HT" de la sigla HTML significan "hipertexto" (hypertext en

ingls), por lo que el significado completo de HTML podra traducirse como
"lenguaje de marcado para hipertexto".
La incorporacin del hipertexto fue una de las claves del xito del lenguaje HTML,
ya que permiti crear documentos interactivos que proporcionan informacin
adicional cuando se solicita. El elemento principal del hipertexto es el
"hiperenlace", tambin llamado "enlace web" o simplemente "enlace".
Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la
mayora de enlaces relacionan pginas web, tambin es posible enlazar otros
recursos como imgenes, documentos y archivos.
Una caracterstica que no se suele tener en cuenta en los enlaces es que estn
formados por dos extremos y un sentido. En otras palabras, el enlace comienza en
un recurso y apunta hacia otro recurso. Cada uno de los dos extremos se llaman
"anchors" en ingls, que se puede traducir literalmente como "anclas".
URL
La URL de un recurso tiene dos objetivos principales:

Identificar de forma nica a ese recurso
Permitir localizar de forma eficiente ese recurso
En primer lugar, las URL permiten que cada pgina HTML publicada en Internet
tenga un nombre nico que permita diferenciarla de las dems. De esta forma es
posible crear enlaces que apunten de forma inequvoca a una determinada pgina.
El segundo objetivo de las URL es el de permitir la localizacin eficiente de cada

recurso de Internet. Para ello es necesario comprender las diferentes partes que
forman las URL. Una URL sencilla siempre est formada por las mismas tres
partes.
Las partes que componen la URL anterior son:
Protocolo (http://): el mecanismo que debe utilizar el navegador para

acceder a ese recurso. Todas las pginas web utilizan http://. Las pginas
web seguras (por ejemplo las de los bancos y las de los servicios de email)
utilizan https:// (se aade una letra s).
Servidor (www.librosweb.es): simplificando mucho su explicacin, se trata
del ordenador en el que se encuentra guardada la pgina que se quiere
acceder. Los navegadores son capaces de obtener la direccin de cada
servidor a partir de su nombre.
Ruta (/xhtml/capitulo4.html): camino que se debe seguir, una vez que se ha
llegado al servidor, para localizar el recurso especfico que se quiere
acceder.
Por tanto, las URL no slo identifican de forma nica a cada recurso de Internet,
sino que tambin proporcionan a los navegadores la informacin necesaria para
poder llegar hasta ese recurso.
Las cinco partes que forman la URL anterior son:
Protocolo (http://)
Servidor (www.alistapart.com)
Ruta (/comments/webstandards2008)
Consulta (?page=5): informacin adicional necesaria para que el servidor
localice correctamente el recurso que se quiere acceder. Siempre comienza
con el carcter ? y contiene una sucesin de palabras separadas por = y &
Seccin (#42): permite que el navegador se posicione automticamente en
una seccin de la pgina web. Siempre comienza con el caracter #
Como las URL utilizan los caracteres :, =, & y / para separar sus partes, estos
caracteres estn reservados y no se pueden utilizar libremente. Adems, algunos
caracteres no estn reservados pero pueden ser problemticos si se utilizan en la
propia URL.
Si es necesario incluir estos caracteres reservados y especiales en una URL, se

sustituyen por combinaciones de caracteres seguros. Esta sustitucin se
denomina codificacin de caracteres y el servidor realiza el proceso inverso
(decodificacin) cuando le llega una URL con los caracteres codificados.
A continuacin se muestra la tabla para codificar los caracteres ms comunes:
Carcter original Carcter Carcter Carcter

codificado original codificado
/ %2F ? %3F
: %3A @ %40
= %3D & %26
" %22 \ %5C
' %60 ~ %7E
(espacio en %20 # %23
blanco)
Por otra parte, aunque desde hace tiempo ya es posible incluir en las URL
caracteres de otros idiomas que no sean el ingls, an no es completamente
seguro utilizar estos caracteres en las URL. Si se utilizan letras como , , o ,
es posible que algunos navegadores no las interpreten de forma correcta.
La solucin consiste en codificar todos los caracteres que no existen en ingls. La
siguiente tabla muestra la codificacin de los caracteres ms utilizados:
Carcter Carcter Carcter Carcter

original codificado original codificado
%F1 %D1
%E1 %C1
%E9 %C9
%ED %CD
%F3 %D3
%FA %DA
%E7 %C7
ENLACES RELATIVOS Y ABSOLUTOS
Estos enlaces se conocen como "enlaces externos". Sin embargo, la mayora de

enlaces de un sitio web apuntan a pginas del propio sitio web, por lo que se
denominan "enlaces internos".
Adems de internos/externos, la otra caracterstica que diferencia a los enlaces (y

por tanto, tambin a las URL) es si el enlace es absoluto o relativo. Las URL
absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo
que no se necesita ms informacin para obtener el recurso enlazado.
Las URL relativas prescinden de algunas partes de las URL para hacerlas ms
breves. Como se trata de URL incompletas, es necesario disponer de informacin
adicional para obtener el recurso enlazado. En concreto, para que una URL
relativa sea til es imprescindible conocer la URL del origen del enlace.
Las URL relativas se construyen a partir de las URL absolutas y prescinden de la
parte del protocolo, del nombre del servidor e incluso de parte o toda la ruta del
recurso enlazado. Aunque las URL relativas pueden ser difciles de entender para
los que comienzan con HTML, son tan tiles que todos los sitios web las utilizan.
ENLACES BSICOS
Los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del
ingls "anchor", literalmente traducido como "ancla"). A continuacin se muestra la
definicin simplificada de <a> y ms adelante se muestra su definicin completa:
Etiqueta <a>
Atributos bsicos, internacionalizacin, eventos y foco
comunes
Atributos name = "texto" - Permite nombrar al enlace para que se
propios pueda acceder desde otros enlaces
href = "url" - Indica la URL del recurso que se quiere
enlazar
Tipo de En lnea
elemento
Descripcin Se emplea para enlazar todo tipo de recursos
El atributo ms importante de la etiqueta <a> es href, que se utiliza para indicar la

URL a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el
navegador se dirige a la URL del recurso indicado mediante href. Las URL de los
enlaces pueden ser absolutas, relativas, internas y externas.
ENLACES AVANZADOS
Incluir enlaces bsicos mediante la etiqueta <a> es muy sencillo. Sin embargo, la
definicin completa de <a> es muy compleja, ya que dispone de varios atributos
especficos importantes. A continuacin se muestra la definicin completa de <a>:
Etiqueta <a>
comunes
Atributos name = "texto" - Permite nombrar al enlace para que se
propios pueda acceder desde otros enlaces
href = "url" - Indica la URL del recurso que se quiere
enlazar
hreflang = "codigo_idioma" - Idioma del recurso enlazado
type = "tipo_de_contenido" - Permite "avisar" al navegador
sobre el tipo de contenido que se enlaza (imgenes,
archivos, etc.) para que pueda preparase en caso de que
no entienda ese contenido
rel = "tipo_de_relacion" - Describe la relacin del
documento actual con el recurso enlazado
rev = "tipo_de_relacion" - Describe la relacin del recurso
enlazado con el documento actual
charset = "tipo_de_charset" - Describe la codificacin del
recurso enlazado
Tipo de En lnea
elemento
Descripcin Se emplea para enlazar todo tipo de recursos
IDIOMA DEL ENLACE (HREFLANG)
El enlace puede indicar al navegador el idioma del recurso que se enlaza. Para
establecer el valor del idioma, se utiliza un cdigo estandarizado de dos letras.
Adems del idioma genrico, tambin se puede indicar una variacin idiomtica.
Ejemplo de cdigos de idioma ms utilizados:
Cdigo Idioma Variacin idiomtica

en Ingls -
en-AU Ingls Australia
en-US Ingls Estados Unidos
es Espaol -
es-AR Espaol Argentina
es-ES Espaol Espaa
es-MX Espaol Mxico
Otros cdigos utilizados son: fr (francs), de (alemn), it (italiano), nl (holands), el

(griego), pt (portugus), ar (rabe), he (hebreo), ru (ruso), zh (chino), ja (japons).
TIPO DE CONTENIDO (TYPE)
Se utiliza para notificar al navegador sobre el tipo de contenido que se enlaza. Se

indica mediante una cadena de texto cuyos posibles valores tambin estn
estandarizados. Los valores de los contenidos ms utilizados son los siguientes:
"text/html" (pginas HTML), "image/png" (imgenes con formato PNG), "image/gif"
(imgenes con formato GIF), "text/css" (hojas de estilo CSS), "application/rss+xml"
(archivos RSS).
Tipo de relacin (rel y rev)
Los enlaces pueden proporcionar informacin adicional muy til para los
navegadores y para los motores de bsqueda como Google. Los atributos rel y rev
permiten indicar la relacin que la pgina actual tiene con la pgina a la que se
enlaza (atributo rel) y la relacin que tiene la pgina enlazada con la pgina actual
(atributo rev).
Los tipos de relacin definidos son los siguientes:
alternate Indica que es una versin alternativa al documento actual

(puede ser una versin en otro idioma o una versin preparada para otro
medio, como una impresora o un dispositivo mvil)
stylesheet Indica que se ha enlazado una hoja de estilos
start Indica que se trata del primer documento de una coleccin de
documentos (por ejemplo el primer captulo de un libro)
next Indica que es el documento que sigue al actual dentro de una
secuencia lgica de documentos (por ejemplo, los captulos de un libro)
prev - Indica que es el documento que precede al actual dentro de una
secuencia lgica de documentos (por ejemplo, los captulos de un libro)
contents Indica que el recurso enlazado es el documento que contiene la
tabla de contenidos de la coleccin de documentos (por ejemplo, el ndice
de un libro).
bookmark Establece el enlace actual como un "marcador" o "favorito". Un
marcador es un enlace que constituye un punto de entrada muy importante
dentro del documento.
Codificacin de caracteres (charset)
Adems del idioma, tipo de contenido y relacin del recurso que se enlaza, los
enlaces tambin pueden indicar la codificacin de caracteres que utiliza la pgina
web enlazada.
Los valores que se pueden utilizar tambin estn estandarizados y las

codificaciones ms utilizadas son UTF-8 y ISO-8859-1, aunque existen decenas
de cdigos definidos (ISO-10646-UCS-2, IBM852, Big5-HKSCS, windows-1252,
HZ-GB-2312).
OTROS TIPOS DE ENLACES
Los enlaces mostrados en las secciones anteriores son los ms utilizados por las
pginas web. Los enlaces creados con la etiqueta <a> permiten enlazar cualquier
tipo de recurso desde cualquier pgina. La caracterstica ms importante de estos
enlaces es que el usuario debe activar la carga de los recursos. En otras palabras,
el navegador no carga ningn recurso enlazado con la etiqueta <a> a menos que
el usuario pinche sobre el enlace.
HTML define las etiquetas <script> y <link> para enlazar recursos que se deben
cargar automticamente. Cuando el navegador encuentra alguna de estas dos
etiquetas, descarga los recursos enlazados y los aplica a la pgina web.
La etiqueta <script> tiene dos modos de funcionamiento, ya que se emplea tanto

para insertar un bloque de cdigo JavaScript en la pgina como para enlazar un
archivo JavaScript externo.
Etiqueta <script>
Atributos -
comunes
Atributos src = "url" - Indica la direccin del archivo que contiene el
propios cdigo
type = "tipo_de_contenido" - Permite "avisar" al
navegador sobre el tipo de cdigo que se incluye
(normalmente JavaScript)
defer = "defer" - El cdigo no va a modificar el contenido
de la pgina web
charset = "tipo_de_charset" - Describe la codificacin del
cdigo enlazado
Tipo de Bloque y en lnea (tambin puede ser una etiqueta vaca)

elemento
Descripcin Se emplea para enlazar o definir un bloque de cdigo
(normalmente JavaScript)
Cuando se incluye cdigo JavaScript en la propia pgina XHTML, se debe insertar

dentro de una seccin especial llamada CDATA. Para ello, el cdigo JavaScript se
debe encerrar entre <![CDATA[ y ]]>. Cuando el navegador encuentra una seccin
de este tipo, no procesa su contenido como si fuera XHTML y por tanto no tiene en
cuenta los posibles errores de validacin de XHTML.
De esta forma, se pueden construir pginas XHTML vlidas y cdigo JavaScript
correcto. En los captulos posteriores se profundiza en el concepto de validacin
de pginas XHTML. Los caracteres // al comienzo y al final de la seccin CDATA
son necesarios para los navegadores que no son capaces de procesar
correctamente estas secciones.
La etiqueta <script> (tanto cuando enlaza, como cuando incluye directamente el

cdigo) puede aparecer en cualquier parte del documento HTML, aunque
normalmente se incluye dentro de la cabecera de la pgina (<head>...</head>).
La segunda etiqueta de XHTML para enlazar recursos es <link>, que permite

enlazar y relacionar la pgina con otros recursos externos.
Etiqueta <link>
comunes
Atributos Los siguientes con el mismo significado que para la
propios etiqueta "a": charset, href, hreflang, type, rel y rev
media = "tipo_de_medio" - Indica el medio para el que
debe aplicarse la relacin
Tipo de Etiqueta vaca

elemento
Descripcin Se emplea para enlazar y establecer relaciones entre el
documento y otros recursos
Al contrario que <script>, la etiqueta <link> solamente se puede incluir dentro de la

cabecera del documento. Se pueden aadir tantas etiquetas <link> como sean
necesarias, pero siempre dentro de <head>...</head>.
El atributo media hace referencia al medio para el que es vlida la relacin con el
recurso enlazado. Los medios disponibles tambin estn estandarizados, siendo
los ms comunes screen para los contenidos mostrados en pantalla, print para las
impresoras y handheld para los dispositivos mviles.
En este caso, es habitual establecer los atributos rel y type para indicar el tipo de
recurso enlazado y su relacin con la pgina web. La URL del recurso enlazado se
indica en el atributo href, que admite tanto URL absolutas como relativas.
ETIQUETAS DE HTML PARA LISTAS
En ocasiones, es posible agrupar determinadas palabras o frases en un conjunto

de elementos que tienen ms significado de forma conjunta. El men de
navegacin de un sitio web por ejemplo est formado por un grupo de palabras.
Aunque cada palabra por separado tiene sentido, de forma conjunta constituyen el
men de navegacin de la pgina, por lo que su significado conjunto es mayor que
por separado.
El lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos:
listas no ordenadas (se trata de una coleccin simple de elementos en la que no
importa su orden), listas ordenadas (similar a la anterior, pero los elementos estn
numerados y por tanto, importa su orden) y listas de definicin (un conjunto de
trminos y definiciones similar a un diccionario).
LISTAS NO ORDENADAS
Las listas no ordenadas son las ms sencillas y las que ms se utilizan. Una lista
no ordenada es un conjunto de elementos relacionados entre s pero para los que
no se indica un orden o secuencia determinados. La etiqueta <ul> encierra todos
los elementos de la lista y la etiqueta <li> cada uno de sus elementos.
Etiqueta <ul>
comunes
Atributos -
propios
Tipo de Bloque
elemento
Descripcin Se emplea para definir listas no ordenadas
Etiqueta <li>
comunes
Atributos -
propios
Tipo de Bloque
elemento
Descripcin Se emplea para definir los elementos de las listas (ordenadas
y no ordenadas)
El navegador por defecto muestra los elementos de la lista tabulados y con una
pequea vieta formada por un crculo negro. Como ya se sabe, el aspecto con el
que se muestran los elementos de las listas se puede modificar mediante las hojas
de estilos CSS.
LISTAS ORDENADAS
Las listas ordenadas son casi idnticas a las listas no ordenadas, salvo que en
este caso los elementos relacionados se muestran siguiendo un orden
determinado. Cuando se crea por ejemplo una lista con las instrucciones de un
producto, es importante el orden en el que se realiza cada paso. Cuando se
muestra un ndice o tabla de contenidos en un libro, es importante el orden de
cada elemento del ndice.
En todos estos casos, la lista ms adecuada es la lista ordenada, que se define
mediante la etiqueta <ol>. Los elementos de la lista se definen mediante la
etiqueta <li>, la misma que se utiliza en las listas no ordenadas.
Etiqueta <ol>
Atributos propios -
Tipo de elemento Bloque
Descripcin Se emplea para definir listas ordenadas
El navegador muestra la lista de forma muy parecida a las listas no ordenadas,

salvo que en este caso no se emplean vietas grficas en los elementos, sino que
se numeran de forma consecutiva. El tipo de numeracin empleada tambin se
puede modificar aplicando hojas de estilos CSS a los elementos de la lista.
LISTAS DE DEFINICIN
Las listas de definicin apenas se utilizan en la mayora de pginas HTML. Su

funcionamiento es similar al de un diccionario, ya que cada elemento de la lista
est formado por trminos y definiciones. La etiqueta <dl> crea la lista de
definicin y las etiquetas <dt> y <dd> definen respectivamente el trmino y la
descripcin de cada elemento de la lista.
Etiqueta <dl>
comunes
Atributos -
propios
Tipo de Bloque
elemento
Descripcin Se emplea para definir listas de definicin
Etiqueta <dt>
comunes
Atributos -
propios
Tipo de Bloque
elemento
Descripcin Se emplea para definir los trminos de los elementos de una
lista de definicin
Etiqueta <dd>
comunes
Atributos -
propios
Tipo de Bloque
elemento
Descripcin Se emplea para indicar las definiciones de los elementos de
una lista de definicin
Los navegadores formatean las listas de definicin de forma similar a las otras
listas, tabulando la definicin y alineando a la izquierda los trminos. Aunque no es
habitual, cada trmino puede tener asociada ms de una definicin y cada
definicin puede tener asociada varios trminos.
ETIQUETAS DE HTML PARA IMGENES Y OBJETOS
Las imgenes son uno de los elementos ms importantes de las pginas web. De
hecho, prcticamente todas las pginas web contienen alguna imagen y la
mayora incluyen decenas de imgenes. Dentro de las imgenes que se pueden
incluir en una pgina HTML se deben distinguir dos tipos: las imgenes de
contenido y las imgenes de adorno.
Las imgenes de contenido son las que proporcionan informacin y complementan
la informacin textual. Las imgenes de adorno son las que se utilizan para hacer
bordes redondeados, para mostrar pequeos iconos en las listas de elementos,
para mostrar fondos de pgina, etc. Las imgenes de contenido se incluyen
directamente en el cdigo HTML mediante la etiqueta <img> y las imgenes de
adorno no se deberan incluir en el cdigo HTML, sino que deberan emplearse
hojas de estilos CSS para mostrarlas.
A continuacin se muestra la definicin de la etiqueta <img>, utilizada para incluir

las imgenes en las pginas HTML:
Etiqueta <img>
comunes
Atributos src = "url" - Indica la URL de la imagen que se muestra
propios alt = "texto" - Descripcin corta de la imagen
longdesc = "url" - Indica una URL en la que puede
encontrarse una descripcin ms detallada de la imagen
name = "texto" - Nombre del elemento imagen
height = "unidad_de_medida" - Indica la altura con la que
se debe mostrar la imagen (no es obligatorio que coincida
con la altura original de la imagen)
width = "unidad_de_medida" - Indica la anchura con la que
se debe mostrar la imagen (no es obligatorio que coincida
con la anchura original de la imagen)
Tipo de En lnea y etiqueta vaca

elemento
Descripcin Se emplea para incluir imgenes en los documentos
Los dos atributos requeridos son src y alt. El atributo src es similar al atributo href
de los enlaces, ya que establece la URL de la imagen que se va a mostrar en la
pgina. Las URL indicadas pueden ser absolutas o relativas. El atributo alt permite
describir el contenido de la imagen mediante un texto breve. Las descripciones
deben tener una longitud inferior a 1024 caracteres y son tiles para las personas
y dispositivos discapacitados que no pueden acceder a las imgenes.
MAPAS DE IMAGEN
Aunque el uso de los mapas de imagen se ha reducido drsticamente en los

ltimos aos, an se utilizan en algunos sitios especializados. Muchas agencias
de viaje y sitios relacionados utilizan mapas geogrficos para seleccionar el
destino del viaje. La mayora de mapas se realiza hoy en da mediante Flash,
aunque algunos sitios siguen recurriendo a los mapas de imagen.
Un mapa de imagen permite definir diferentes zonas "pinchables" dentro de una

imagen. El usuario puede pinchar sobre cada una de las zonas definidas y cada
una de ellas puede apuntar a una URL diferente. Siguiendo el ejemplo anterior,
una sola imagen que muestre un mapa de todos los continentes puede definir una
zona diferente para cada continente. De esta forma, el usuario puede pinchar
sobre la zona correspondiente a cada continente para que el navegador muestre
la pgina que contiene los viajes disponibles a ese destino.
Las zonas o regiones que se pueden definir en una imagen se crean mediante
rectngulos, crculos y polgonos. Para crear un mapa de imagen, en primer lugar
se inserta la imagen original mediante la etiqueta <img>. A continuacin, se utiliza
la etiqueta <map> para definir las zonas o regiones de la imagen. Cada zona se
define mediante la etiqueta <area>.
Etiqueta <map>
comunes
Atributos name = "texto" - Nombre que identifica de forma nica al
propios mapa definido (es obligatorio indicar un nombre nico)
elemento
Descripcin Se emplea para definir mapas de imagen
Etiqueta <area>
comunes
Atributos href = "url" - URL a la que se accede al pinchar sobre el
propios rea
nohref = "nohref" - Se emplea para las reas que no son
seleccionables
shape = "default | rect | circle | poly" - Indica el tipo de rea
que se define (toda la imagen, rectangular, circular o
poligonal)
coords = "lista de nmeros" - Se trata de una lista de
nmeros separados por comas que representan las
coordenadas del rea. Rectangular = X1,Y1,X2,Y2
(coordenadas X e Y del vrtice superior izquierdo y
coordenadas X e Y del vrtice inferior derecho). Circular =
X1,Y1,R (coordenadas X e Y del centro y radio del crculo).
Poligonal = X1,Y1,X2,Y2,...,XnYn (coordenadas de los
vrtices del polgono. Si las ltimas coordenadas no son
iguales que las primeras, se cierra automticamente el
polgono uniendo ambos vrtices)
Tipo de Etiqueta vaca

elemento
Descripcin Se emplea para definir las distintas reas que forman un mapa de
imagen
Si una imagen utiliza un mapa de imagen, debe indicarlo mediante el atributo

usemap.
OBJETOS
Adems de las imgenes, HTML permite incluir en las pginas web otros
elementos mucho ms complejos, como applets de Java y vdeos en formato
QuickTime o Flash. La mayora de este tipo de contenidos no los interpreta el
navegador directamente, sino que hace uso de pequeos programas llamados
plugins y que se encargan de tratar con este tipo de elementos complejos.
La etiqueta <object> es la que permite "embeber" o incluir en las pginas HTML

cualquier tipo de contenido complejo:
Etiqueta <object>
comunes
Atributos data = "url" - Indica la URL de los datos que utiliza el
propios objeto
classid, codebase, codetype - Informacin especfica
que depende del tipo de objeto
type - Indica el tipo de contenido de los datos
height = "unidad_de_medida" - Indica la altura con la
que se debe mostrar el objeto
width = "unidad_de_medida" - Indica la anchura con la

elemento
Descripcin Se emplea para embeber objetos en los documentos
El atributo data se emplea para indicar la URL del recurso que se va a incluir. El
atributo type indica el tipo de contenido de los datos del objeto. Los posibles
valores de type estn estandarizados y coinciden con los del atributo type de la
etiqueta <a> que se explic anteriormente.
A los objetos tambin se les puede pasar informacin adicional en forma de
parmetros mediante la etiqueta <param>:
Etiqueta <param>
Atributos comunes id
Atributos propios name = "texto" - Indica el nombre del parmetro
value = "texto" - Indica el valor del parmetro
Tipo de elemento Etiqueta vaca

Descripcin Se emplea para indicar el valor de los parmetros del objeto
El elemento anterior es correcto desde el punto de vista tcnico, pero provoca que
algunos navegadores como Internet Explorer no visualicen el vdeo hasta que se
ha descargado completamente. Si se trata de un vdeo largo, esta solucin no es
vlida para el usuario.
Por este motivo, se utiliza una solucin alternativa para incluir vdeos Flash en las
pginas HTML: el uso de la etiqueta <embed>. Aunque esta solucin funciona
correctamente, no se trata de una solucin vlida desde el punto de vista del
estndar de XHTML, por lo que las pginas que incluyan esta solucin no pasarn
correctamente el proceso de validacin.
Etiqueta <embed>
comunes
Atributos src = "url" - Indica la URL del archivo u objeto que se
propios incluye en la pgina
type = "tipo_de_contenido" - Indica el tipo de contenido
del objeto (flash, quicktime, java, etc.)
height = "unidad_de_medida" - Indica la altura con la que
se debe mostrar el objeto
width = "unidad_de_medida" - Indica la anchura con la
Tipo de Bloque
elemento
Descripcin Se emplea para embeber objetos en los documentos
Una vez ms, se debe tener en cuenta que la solucin anterior de utilizar la
etiqueta <embed> es correcta desde el punto de vista del usuario (no tiene que
esperar a que el vdeo se descargue completamente para poder verlo) pero no es
una solucin tcnicamente vlida, ya que la etiqueta <embed> no es parte del
estndar XHTML.
ETIQUETAS DEL HTML PARA TABLAS
Las tablas de HTML puede contener elementos simples, agrupaciones de filas y

de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras mltiples y otros
elementos complejos.
A pesar de que las tablas HTML son fciles de comprender y utilizar, son uno de
los elementos ms polmicos de HTML. El problema de las tablas es que no
siempre se utilizan adecuadamente. Aunque parezca obvio, las tablas se deben
utilizar para mostrar informacin tabular.
Hasta hace unos aos, las tablas tambin se utilizaban para definir la estructura
de las pginas web. La cabecera de la pgina era una fila de una gran tabla, el pie
de pgina era otra fila de esta tabla y la zona de contenidos estaba formada por
varias columnas dentro de esa gran tabla.
TABLAS BSICAS
Las tablas ms sencillas de HTML se definen con tres etiquetas: <table> para
crear la tabla, <tr> para crear cada fila y <td> para crear cada columna.
La etiqueta <table> encierra todas las filas y columnas de la tabla. Las etiquetas
<tr> (del ingls "table row") definen cada fila de la tabla y encierran todas las
columnas. Por ltimo, la etiqueta <td> (del ingls "table data cell") define cada una
de las columnas de las filas, aunque realmente HTML no define columnas sino
celdas de datos.
Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a
continuacin en las columnas. El motivo es que HTML procesa primero las filas y
por eso las etiquetas <tr> aparecen antes que las etiquetas <td>.
Etiqueta <table>
comunes
Atributos summary = "texto" - Permite describir el contenido de la
propios tabla (lo utilizan los buscadores y las personas
discapacitadas)
Tipo de Bloque
elemento
Descripcin Se emplea para definir tablas de datos
Etiqueta <tr>
comunes
Atributos -
propios
Tipo de Bloque
elemento
Descripcin Se emplea para definir cada fila de las tablas de datos
Etiqueta <td>
comunes
Atributos abbr = "texto" - Permite describir el contenido de la celda
propios (empleado sobre todo en los navegadores utilizados por
personas discapacitadas)
headers = "lista_de_id" - Indica las celdas que actan
como cabeceras para esta celda (los ttulos de las
columnas y filas). Se indica como una lista de valores del
atributo "id" de celdas
scope = "col, row, colgroup, rowgroup" - Indica las celdas
para las que esta celda ser su cabecera. Ej: scope="col"
indica que esta celda es la cabecera de todas las dems
celdas que estn en la misma columna
colspan = "numero" - Nmero de columnas que ocupa esta
celda
rowspan = "numero" - Nmero de filas que ocupa esta
celda
Tipo de Bloque
elemento
Descripcin Se emplea para definir cada una de las celdas que forman las
filas de una tabla, es decir, las columnas de la tabla
De todos los atributos disponibles para las celdas, los ms utilizados son rowspan
y colspan, que se emplean para construir tablas complejas como las que se ven
ms adelante. Entre los dems atributos, slo se utiliza de forma habitual el
atributo scope, sobre todo con las celdas de cabecera que se ven a continuacin.
Normalmente, algunas de las celdas de la tabla se utilizan como cabecera de las

dems celdas de la fila o de la columna. En este caso, HTML define la etiqueta
<th> (del ingls "table header cell") para indicar que una celda es cabecera de
otras celdas.
Etiqueta <th>
comunes
Atributos abbr = "texto" - Permite describir el contenido de la celda
propios (empleado sobre todo en los navegadores utilizados por
personas discapacitadas)
headers = "lista_de_id" - Indica las celdas que actan
como cabeceras para esta celda (los ttulos de las
columnas y filas). Se indica como una lista de ID de celdas
scope = "col, row, colgroup, rowgroup" - Indica las celdas
para las que esta celda ser su cabecera. Ej: scope="col"
indica que esta celda es la cabecera de todas las dems
celdas que estn en la misma columna
colspan = "numero" - Nmero de columnas que ocupa esta
celda
rowspan = "numero" - Nmero de filas que ocupa esta
celda
Tipo de Bloque
elemento
Descripcin Se emplea para definir las celdas que son cabecera de una fila o
de una columna de la tabla
Los atributos de la etiqueta <th> son idnticos que los atributos definidos para la
etiqueta <td>. En este caso, el atributo ms utilizado es scope, que permite indicar
si la celda es cabecera de la fila o de la columna (<th scope="row"> y <th
scope="col"> respectivamente).
Por otra parte, HTML define la etiqueta <caption> para establecer la leyenda o
ttulo de una tabla. La etiqueta debe colocarse inmediatamente despus de la
etiqueta <table> y cada tabla slo puede incluir una etiqueta <caption>.
Etiqueta <caption>
Atributos propios -
Descripcin Se emplea para definir la leyenda o ttulo de una tabla
TABLAS AVANZADAS
Algunas tablas complejas estn formadas por ms elementos que filas y celdas de
datos. As, es comn que las tablas ms avanzadas dispongan de una seccin de
cabecera, una seccin de pie y varias secciones de datos. Adems, tambin es
posible agrupar varias columnas de forma lgica para poder aplicar estilos
similares a un determinado grupo de columnas.
Las partes que componen las tablas complejas se definen mediante las etiquetas
<thead>, <tbody> y <tfoot>. La cabecera de la tabla se define con la etiqueta
<thead>, el pie de la tabla se define mediante <tfoot> y cada seccin de datos se
define con una etiqueta <tbody>.
Etiquetas <thead> <tbody> <tfoot>

comunes
Atributos -
propios
Tipo de Bloque
elemento
Descripcin Se emplean para agrupar varias filas en una cabecera (thead)
un pie (tfoot) o una seccin (tbody) de una tabla
Cada tabla puede contener solamente una cabecera y un pie, pero puede incluir
un nmero ilimitado de secciones. Si se define una cabecera y/o un pie, las
etiquetas <thead> y/o <tfoot> deben colocarse inmediatamente antes que
cualquier etiqueta <tbody>.
Aunque al principio resulta extrao, el elemento <tfoot> siempre se escribe antes

que cualquier elemento <tbody> en el cdigo HTML. De hecho, si la etiqueta
<tfoot> aparece despus de un elemento <tbody>, la pgina no se considera
vlida.
La etiqueta <tbody> permite realizar agrupaciones de filas, pero en ocasiones se

necesitan agrupar columnas. Aunque su uso no es muy comn, HTML define dos
etiquetas similares para agrupar columnas: <col> y <colgroup>.
La etiqueta <col> se utiliza para asignar los mismos atributos a varias columnas de
forma simultnea. De esta forma, la etiqueta <col> no agrupa columnas, sino que
slo asigna atributos comunes a varias columnas.
Por otra parte, la etiqueta <colgroup> se emplea para agrupar de forma estructural
varias columnas de la tabla. La forma habitual de indicar el nmero de columnas
que abarca la agrupacin es utilizar el atributo span, que establece el nmero de
columnas de cada agrupacin. El uso de las etiquetas <col> y <colgroup> no est
muy extendido, debido a que la mayora de navegadores no soportan muchas de
sus funcionalidades.
ETIQUETAS DEL HTML PARA FORMULARIOS
HTML es un lenguaje de marcado cuyo propsito principal consiste en estructurar

los contenidos de los documentos y pginas web. Sin embargo, HTML tambin
incluye elementos para crear aplicaciones web. El estndar HTML/XHTML permite
crear formularios para que los usuarios interacten con las aplicaciones web.
Los aos transcurridos desde la publicacin de los estndares de HTML y XHTML

ha provocado que no estn disponibles todos los elementos utilizados por los
formularios ms avanzados y modernos. No obstante, HTML/XHTML incluye los
suficientes elementos de formulario para crear desde los formularios sencillos que
utilizan los buscadores hasta los formularios complejos de las aplicaciones ms
avanzadas.
FORMULARIO BSICO
Los formularios ms sencillos se pueden crear utilizando solamente dos etiquetas:

<form> y <input>.
La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros
de texto, listas desplegables) y la etiqueta <input> permite definir varios tipos
diferentes de elementos (botones y cuadros de texto).
Etiqueta <form>
comunes
Atributos action = "url" - Indica la URL que se encarga de procesar
propios los datos del formulario
method = "POST o GET" - Mtodo HTTP empleado al
enviar el formulario
enctype = "application/x-www-form-urlencoded o
multipart/form-data" - Tipo de codificacin empleada al
enviar el formulario al servidor (slo se indica de forma
explcita en los formularios que permiten adjuntar archivos)
accept = "tipo_de_contenido" - Lista separada por comas
de todos los tipos de archivos aceptados por el servidor
(slo para los formularios que permiten adjuntar archivos)
Otros: accept-charset, onsubmit, onreset
Tipo de Bloque
elemento
Descripcin Se emplea para insertar un formulario en la pgina
La mayora de formularios utilizan slo los atributos action y method. El atributo
action indica la URL de la aplicacin del servidor que se encarga de procesar los
datos introducidos por los usuarios. Esta aplicacin tambin se encarga de
generar la respuesta que muestra el navegador.
El atributo method establece la forma en la que se envian los datos del formulario
al servidor. Este atributo hace referencia al mtodo HTTP, por lo que no es algo
propio de HTML. Los dos valores que se utilizan en los formularios son GET y
POST. De esta forma, casi todos los formularios incluyen el atributo method="get"
o el atributo method="post".
Al margen de otras diferencias tcnicas, el mtodo POST permite el envo de

mucha ms informacin que el mtodo GET. En general, el mtodo GET admite
como mximo el envo de unos 500 bytes de informacin. La otra gran limitacin
del mtodo GET es que no permite el envo de archivos adjuntos con el formulario.
Adems, los datos enviados mediante GET se ven en la barra de direcciones del
navegador (se aaden al final de la URL de la pgina), mientras que los datos
enviados mediante POST no se pueden ver tan fcilmente.
Si no sabes que mtodo elegir para un formulario, existe una regla general que
dice que el mtodo GET se debe utilizar en los formularios que no modifican la
informacin (por ejemplo en un formulario de bsqueda). Por su parte, el mtodo
POST se debera utilizar cuando el formulario modifica la informacin original
(insertar, modificar o borrar alguna informacin).
El ejemplo ms comn de formulario con mtodo GET es el de los buscadores. Si

realizas una bsqueda con tu buscador favorito, vers que las palabras que has
introducido en tu bsqueda aparecen como parte de la URL de la pgina de
resultados.
Del resto de atributos de la etiqueta <form>, el nico que se utiliza ocasionalmente

es enctype. Como se explica ms adelante, este atributo es imprescindible en los
formularios que permiten adjuntar archivos.
ELEMENTOS DEL FORMULARIO
Los elementos de formulario como botones y cuadros de texto tambin se

denominan "campos de formulario" y "controles de formulario". La mayora de
controles se crean con la etiqueta <input>, por lo que su definicin formal y su lista
de atributos es muy extensa:
Etiqueta <input>
comunes
Atributos type = "text | password | checkbox | radio | submit | reset |
propios file | hidden | image | button" - Indica el tipo de control que
se incluye en el formulario
name = "texto" - Asigna un nombre al control (es
imprescindible para que el servidor pueda procesar el
formulario)
value = "texto" - Valor inicial del control
size = "unidad_de_medida" - Tamao inicial del control
(para los campos de texto y de password se refiere al
nmero de caracteres, en el resto de controles se refiere a
su tamao en pxel)
maxlength = "numero" - Mximo nmero de caracteres
para los controles de texto y de password
checked = "checked" - Para los controles checkbox y
radiobutton permite indicar qu opcin aparece
preseleccionada
disabled = "disabled" - El control aparece deshabilitado y
su valor no se enva al servidor junto con el resto de datos
readonly = "readonly" - El contenido del control no se
puede modificar
src = "url" - Para el control que permite crear botones con
imgenes, indica la URL de la imagen que se emplea
como botn de formulario
alt = "texto" - Descripcin del control
Tipo de En lnea y etiqueta vaca

elemento
Descripcin Se emplean para insertar un control en un formulario
FORMULARIO AVANZADO
Utilizando solamente las etiquetas <form> y <input> es posible disear la mayora

de formularios de las aplicaciones web. No obstante, HTML define algunos
elementos adicionales para mejorar la estructura de los formularios creados.
La etiqueta <fieldset> agrupa campos del formulario y la etiqueta <legend> asigna

un nombre a cada grupo.
Etiqueta <fieldset>
comunes
Atributos -
propios
Tipo de Bloque
elemento
Descripcin Se emplea para agrupar de forma lgica varios campos de un
formulario
Etiqueta <legend>
comunes
Atributos -
propios
Tipo de En lnea
elemento
Descripcin Se emplea para definir el ttulo o leyenda de un conjunto de
campos de formulario agrupados con la etiqueta fieldset
Por otra parte, todos los controles de formulario salvo los botones presentan una
carencia muy importante: no disponen de la opcin de establecer el ttulo o texto
que se muestra junto al control. En el cdigo HTML del ejemplo anterior, el nombre
de cada campo se incluye en forma de texto normal, sin ninguna relacin con el
campo al que hace referencia.
Afortunadamente, el lenguaje HTML incluye una etiqueta denominada <label> y

que se utiliza para establecer el ttulo de cada campo del formulario. Su definicin
formal es la siguiente:
Etiqueta <label>
comunes
Atributos for = "id_de_elemento" - Indica el ID del campo del
propios formulario para el que este elemento es su ttulo
Otros: accesskey, onfocus y onblur
Tipo de En lnea
elemento
Descripcin Se emplea para definir el ttulo o leyenda de los campos
definidos en un formulario
El nico atributo que suele utilizarse con la etiqueta <label> es for, que indica el
identificador (atributo id) del campo de formulario para el que esta etiqueta hace
de ttulo.
OTROS ELEMENTOS DEL FORMULARIO

La etiqueta <input> permite crear diez tipos diferentes de controles de formulario.
Sin embargo, algunas aplicaciones web utilizan otros elementos de formulario que
no se pueden crear con <input>. Las listas deplegables y las reas de texto
disponen de sus propias etiquetas (<select> y <textarea> respectivamente).
La definicin formal de la etiqueta <textarea> es:
Etiqueta <textarea>
comunes
Atributos rows = "numero" - Nmero de filas de texto que
propios mostrar el textarea
cols = "numero" - Nmero de caracteres que se
muestran en cada fila del textarea
Otros: name, disabled, readonly, onselect, onchange,
onfocus, onblur
Tipo de En lnea
elemento
Descripcin Se emplea para incluir un rea de texto en un formulario
Los tres tipos de listas desplegables se definen con la misma etiqueta <select> y
cada elemento de la lista se define mediante la etiqueta <option>:
Etiqueta <select>
comunes
Atributos size = "numero" - Nmero de filas que se muestran de la
propios lista (por defecto slo se muestra una)
multiple = "multiple" - Si se incluye, se permite
seleccionar ms de un elemento
Otros: name, disabled, onchange, onfocus, onblur
Tipo de En lnea
elemento
Descripcin Se emplea para incluir una lista desplegable en un formulario
Etiqueta <option>
comunes
Atributos selected = "selected" - Indica si el elemento aparece
propios seleccionado por defecto al cargarse la pgina
value = "texto" - El valor que se enva al servidor cuando
el usuario elige esa opcin
Otros: label, disabled
Tipo de -
elemento
Descripcin Se emplea para definir cada elemento de una lista desplegable
La etiqueta <optgroup> permite agrupar opciones relacionadas dentro de una lista

desplegable. Su definicin formal se muestra a continuacin:
Etiqueta <optgroup>
comunes
Atributos label = "texto" - Texto que se muestra como ttulo de la
propios agrupacin de opciones
Otros: disabled, selected
Tipo de -
elemento
Descripcin Se emplea para definir una agrupacin lgica de opciones de
una lista desplegable
El nico atributo que suele utilizarse con la etiqueta <optgroup> es label, que
indica el nombre de cada agrupacin. Los navegadores muestran de forma
destacada el ttulo de cada agrupacin, de forma que el usuario pueda localizar
ms fcilmente la opcin deseada.
OTRAS ETIQUETAS DEL HTML
Comentarios
Al igual que la mayora de lenguajes de marcado, HTML permite incluir

comentarios dentro de su cdigo para aadir informacin que no se debe mostrar
por pantalla.
Normalmente, los diseadores y programadores incluyen comentarios para marcar

el comienzo y el final de las secciones de las pginas, para incluir avisos y notas
para otros diseadores o para incluir explicaciones sobre la forma en la que se ha
creado el cdigo HTML.
Aunque los comentarios no se muestran por pantalla y por tanto son invisibles
para los usuarios, s que se descargan con el cdigo HTML de la pgina. Por este
motivo, nunca debe incluirse informacin sensible o confidencial en los
comentarios.
La sintaxis de los comentarios es la siguiente:
Apertura del comentario: 
Los comentarios de HTML puede ocupar tantas lneas como sea necesario. Sin
embargo, los comentarios no se pueden anidar, es decir, no se puede incluir un
comentario dentro de otro comentario.
JAVA SCRIPT
la etiqueta <script> se utiliza para enlazar archivos JavaScript externos y para

incluir bloques de cdigo JavaScript en las pginas. Sin embargo, algunos
navegadores no disponen de soporte completo de JavaScript, otros navegadores
permiten bloquearlo parcialmente e incluso algunos usuarios bloquean
completamente el uso de JavaScript porque creen que as navegan de forma ms
segura.
Si JavaScript est bloqueado o deshabilitado y la pgina web requiere su uso para

un correcto funcionamiento, es habitual incluir un mensaje de aviso al usuario
indicndole que debera activar JavaScript para disfrutar completamente de la
pgina.
HTML define la etiqueta <noscript> para incluir un mensaje que los navegadores
muestran cuando JavaScript se encuentra bloqueado o deshabilitado.
Etiqueta <noscript>
comunes
Atributos -
propios
Tipo de Bloque
elemento
Descripcin Define un mensaje alternativo que se muestra al usuario cuando
su navegador no soporta la ejecucin de scripts
De esta forma, incluir un mensaje de aviso que solamente sea visible en los
navegadores que tienen bloqueado JavaScript es tan sencillo como incluir la
etiqueta <noscript> dentro del <body>.
CSS
Algunos de los atributos ms utilizados en la creacin de pginas web son id,

class y style. Los tres atributos estn muy relacionados con CSS, sobre todo class
y style.
El atributo id se emplea para asignar un identificador nico a cada elemento de la

pgina, lo que es til tanto para aplicar estilos CSS a ese elemento como para
programar aplicaciones con JavaScript.
Por otra parte, el atributo class se emplea para definir la clase CSS que se aplica a
un elemento. La clase CSS es el nombre de un conjunto de estilos que se definen
en la hoja de estilos y que se quieren aplicar a un elemento:
<p class="resumen">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Maecenas at diam id enim viverra semper. Nulla id urna. Donec sodales.</p>
El prrafo del ejemplo anterior se muestra por pantalla con el aspecto definido por
el conjunto de estilos llamado resumen y que se define en la hoja de estilos CSS
enlazada por la pgina web.
El atributo style se emplea para definir estilos CSS directamente sobre los
elementos HTML. No se debe confundir el atributo style con la etiqueta <style>
que se explic anteriormente. La etiqueta <style> se utiliza para incluir bloques de
cdigo CSS.
Elaborado por:
LUIS MIGUEL GUERRA SUAREZ
C.I. 21.281.831

Informe de Aplicaciones Web

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Informe de Aplicaciones Web

Cargado por

Copyright:

Formatos disponibles

CARACTERSTICAS DEL LENGUAJE HTML

HTML es un lenguaje de etiquetas (tambin llamado lenguaje de marcado) y las

ESTRUCTURA DEL DOCUMENTO HTML

Las pginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera

De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se

A pesar de que se trata de un nmero de etiquetas muy grande, no es suficiente

Los siguientes cuatro atributos bsicos se pueden aplicar prcticamente a todas

ATRIBUTOS PARA INTERNACIONALIZACIN

Como la palabra internacionalizacin es muy larga, se suele sustituir por la

Atributo Descripcin Elementos que pueden

ventana del navegador

Cuando el usuario selecciona un elemento en una aplicacin, se dice que "el

Los elementos de las pginas web tambin pueden obtener el foco de la

Adems de etiquetas y atributos, HTML define el trmino elemento para referirse

Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en

Una etiqueta de apertura.

La principal diferencia entre los dos tipos de elementos es la forma en la que

Los siguientes elementos pueden ser en lnea y de bloque segn las

La flexibilidad de HTML puede parecer un aspecto positivo, pero el resultado final

A continuacin se muestran las cinco restricciones bsicas que introduce XHTML

1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:

Ejemplo correcto en XHTML:

<p>Este es un prrafo con <a>un enlace</a></p>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

<p>Este es un prrafo con <a>un enlace</p></a>

2) Los nombres de las etiquetas y atributos siempre se escriben en

Ejemplo correcto en XHTML:

<p>Este es un prrafo con <a href="http://www.google.com">un enlace</a></p>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

3) El valor de los atributos siempre se encierra con comillas:

Ejemplo correcto en XHTML:

<p>Este es un prrafo con <a href="http://www.google.com">un enlace</a></p>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

<p>Este es un prrafo con <a href=http://www.google.com>un enlace</a></p>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

5) Todas las etiquetas deben cerrarse siempre:

La mayora de etiquetas HTML encierran un contenido de texto entre la etiqueta

En lugar de abrir y cerrar de forma consecutiva la etiqueta (<br></br>) se puede

Adems de estas cinco restricciones bsicas, XHTML incluye otros cambios ms

1. Antes de acceder al valor de un atributo, se eliminan todos los espacios en blanco

ETIQUETAS DEL HTML PARA TEXTO

La tarea inicial del editor de contenidos HTML consiste en estructurar el texto

El proceso de estructurar un texto simple consiste en indicar las diferentes zonas o

Una vez definida la estructura bsica de los contenidos de la pgina, el siguiente

MARCADO BSICO DE TEXTO

Una vez estructurado el texto en prrafos y secciones, el siguiente paso es el

Entre las etiquetas ms utilizadas para marcar texto se encuentran <em> y

HTML tambin permite marcar de forma adecuada las modificaciones realizadas

Tipo de Bloque y en lnea

Tipo de Bloque y en lnea

Por defecto, el texto eliminado (marcado con la etiqueta <del>) se muestra

Al igual que <ins> y <del>, la etiqueta <blockquote> permite indicar mediante el

MARCADO AVANZADO DE TEXTO

Las pginas y documentos ms avanzados suelen incluir otros elementos

La etiqueta <abbr> marca las abreviaturas de un texto y la etiqueta <acronym> se

En ambos casos, el atributo title se puede utilizar para incluir el significado

La mayora de navegadores muestran por defecto un borde inferior punteado para

En ocasiones, no est clara la diferencia entre <cite> y <blockquote>. El elemento

ESPACIOS EN BLANCO Y NUEVAS LNEAS

El aspecto ms sorprendente del lenguaje HTML cuando se desarrollan los

Los dos prrafos de la imagen anterior se ven idnticos, aunque el segundo

La definicin formal de <br> se muestra a continuacin:

La etiqueta <br> es una de las pocas etiquetas especiales de HTML. La

La solucin al problema de los espacios en blanco no es tan sencilla como el de

Ms adelante se profundiza en el origen de y se comprender por qu es