Programación Web

PROGRAMACIN WEB
Introduccin a las aplicaciones web
Internet, la red de redes, nace

a mediados de la dcada de
los setenta, bajo los auspicios
de DARPA, la Agencia de
Proyectos avanzados para la
Defensa de Estados Unidos.
DARPA inici un programa de

investigacin de tcnicas y
tecnologas para unir diversas
redes de conmutacin de
paquetes.
Permitiendo as a los
ordenadores conectados
a
estas
redes
comunicarse entre s de
forma
fcil
y
transparente.
De estos proyectos naci un

protocolo de comunicaciones de
datos, IP o Internet Protocol, que
permita a ordenadores diversos
comunicarse a travs de una red,
Internet,
formada
por
la
interconexin de diversas redes.
La WWW como servicio de Internet
La WWW (World Wide Web) o, de

forma ms coloquial, la web, se
ha convertido, junto con el correo
electrnico, en el principal caballo
de batalla de Internet.
sta ha dejado de ser una

inmensa biblioteca de pginas
estticas para convertirse en un
servicio que permite acceder a
multitud
de
prestaciones
y
funciones, as como a infinidad de
servicios, programas, tiendas, etc.
El
xito espectacular de la web

se basa en dos puntales
fundamentales:
El protocolo HTTP y el lenguaje

HTML.
HTTP
permite
una
implementacin
simple
y
sencilla de un sistema de
comunicaciones
que
nos
permite enviar cualquier tipo
de ficheros de una forma
fcil.
Simplificando el funcionamiento
del servidor y permitiendo que
servidores
poco
potentes
atiendan miles de peticiones y
reduzcan
los
costes
de
despliegue.
El
HTML nos proporciona un

mecanismo de composicin
de pginas enlazadas simple
y fcil, altamente eficiente y
de uso muy simple.
Las aplicaciones web son aquellas

cuya
interfaz
se
construye
utilizando pginas web. Dichas
pginas son documentos de texto
a los que se les aaden etiquetas
que nos permiten visualizar el
texto de distintas formas y
establecer enlaces entre una
pgina y otra.
La capacidad de enlazar
un texto con otro para
crear un hipertexto es la
caracterstica
ms
destacable de las pginas
web.
El protocolo HTTP
El
protocolo HTTP (hypertext

tranfer protocol) es el protocolo
base de la WWW. Se trata de un
protocolo simple, orientado a
conexin y sin estado. Es decir
que
no
guarda
ninguna
informacin sobre conexiones
anteriores.
La
razn de que est

orientado a conexin es que
emplea
para
su
funcionamiento un protocolo
de
comunicaciones
(TCP,
transport control protocol) de
modo conectado.
Un
protocolo que establece

un canal de comunicaciones
de extremo a extremo (entre
el cliente y el servidor) por el
que pasa el flujo de bytes que
constituyen los datos que hay
que transferir.
El
propsito del protocolo HTTP es

permitir la transferencia de archivos
(principalmente en formato HTML,
entre el navegador y el cliente) y un
servidor web (denominado entre
otros
como
httpd).
Localizado
mediante una cadena de caracteres
denominado URL.
HTTP utiliza el puerto 80

(equivalente de alguna forma
al identificador de conexin o
de servicio TCP) para todas las
conexiones
por
defecto
(podemos
utilizar
otros
puertos diferentes del 80).
Arquitectura de las aplicaciones

Web.
Arquitectura de un nivel
Arquitectura de las aplicaciones

Web.
Arquitectura de dos niveles:
Es la ms simple, se tiene el nivel del Cliente y el nivel
del Servidor.
Arquitectura Web de tres niveles:
El
primer nivel consiste en la

capa de presentacin que
incluye no slo el navegador,
sino tambin el servidor web
que es el responsable de dar
a los datos un formato
adecuado.
El
segundo nivel est referido

habitualmente a algn tipo
de
programa
o
script.
Finalmente, el tercer nivel
proporciona al segundo los
datos necesarios para su
ejecucin.
Lenguajes de programacin del

lado del cliente.
Los
programas del lado del

cliente estn incluidos dentro
de la pgina HTML, se
descargan del servidor junto
con este.
Los
programas se ejecutan
dentro del mbito del browser.
Tecnologas y lenguajes del lado del cliente.
Navegadores para Web.

HTML.
Javascript y Vbscript.
Applets en Java.
Flash (lenguaje ActionScript) (oficialmente Muerto).
XML.
PDF.
AJAX, acrnimo de Asynchronous JavaScript And
XML (JavaScript asncrono y XML).
JQuery
Algunos navegadores Web.
Amaya
Epiphany
Galeon
Internet Explorer(oficialmente Muerto)
Konqueror
Lynx
Google Chrome
Mozilla Firefox
Netscape Navigator
Opera
Safari
Shiira
Maik Navigator
Tecnologas y lenguajes del lado del cliente.
Algunos
de estos lenguajes y
tecnologas requieren de un
programa especial (plug-in)
instalado en la computadora
del usuario. Ejemplo: Adobe
Flash Player.
Un
complemento (o plug-in en
ingls) es una aplicacin que se
relaciona con otra para aportarle
una funcin nueva y generalmente
muy especifica. Esta aplicacin
adicional es ejecutada por la
aplicacin principal e interactan
por medio de la API.

lado del servidor.
Se
ejecutan en el servidor de Web y

son dependientes de la plataforma
del servidor.
Se
usan para acceder a

recursos del servidor, como
bases de datos y generacin
de contenido dinmico para
las pginas.

lado del servidor.
Por ejemplo, el mbito de ejecucin de una

pgina ASP.NET.

lado del servidor.
Algunos ejemplos de lenguajes del lado del
servidor:
ASP, ASP.NET (son tecnologas, soportan

diferentes lenguajes como VB, C#, C++, etc.).
PHP.
JSP.
Perl.
Ruby.
Python.
XML.
Servidor Web
Un servidor web es un programa que

implementa el protocolo HTTP ). Este
protocolo pertenece a la capa de
aplicacin del modelo OSI y est diseado
para transferir lo que se llama hipertextos,
pginas web o pginas HTML: textos
complejos
con
enlaces,
figuras,
formularios, botones y objetos incrustados
como animaciones o reproductores de
msica.
Servidor Web.
Algunos ejemplos:
CERN httpd
Apache (Libre, servidor ms usado del mundo)
IIS (Microsoft)
Resin
Tomcat (Libre, del proyecto Jakarta de Apache
)
Geronimo (Libre, orientado a J2EE, del
proyecto Jakarta de Apache, actualmente se
encuentra en desarrollo)
JBoss
JOnAS
Cherokee
Ambientes para el desarrollo de

aplicaciones Web.
Los IDE (ambientes integrados de desarrollo)

para aplicaciones Web son muy numerosos.
Considerar los que permitan trabajar con los

diferentes lenguajes para Web.
Algunos son especficos para lenguajes del

lado del servidor. Por ejemplo, Visual Studio
solo soporta ASP.NET del lado del servidor.
Existen IDEs de buena cantidad, libres y
gratuitos de buena calidad.
Ambientes para el desarrollo de

aplicaciones Web.
Algunos ejemplos de IDE para Web:
Microsoft Visual Studio.

Microsoft Web Developer Express.
Mono (para ASP.NET).
NetBeans.
Jbuilder.
Eclipse.
Blue Fish
Aspectos de seguridad.
Las aplicaciones Web estn ms expuestas

a ataques.
Se pueden tener ataques en tres niveles:

A la computadora del usuario.
Al servidor.
A la informacin en trnsito.
La seguridad en Web tiene 3 etapas

primarias:
Seguridad de la computadora del usuario.
Seguridad del servidor Web y de los datos
almacenados ah.
Seguridad de la informacin que viaja entre
el servidor Web y el usuario.
Seguridad de la computadora del usuario
Los usuarios deben contar con navegadores

y plataformas seguras, libres de virus y
vulnerabilidades.
Tambin
debe
garantizarse la privacidad de los datos del
usuario.
Seguridad del servidor Web y de los

datos almacenados ah
Se debe garantizar la operacin continua
del servidor, que los datos no sean
modificados sin autorizacin (integridad) y
que la informacin slo sea distribuida a las
personas autorizadas (control de acceso).
Seguridad de la informacin que viaja

entre el servidor Web y el usuario.
Garantizar que la informacin en trnsito no sea

leda (confidencialidad), modificada o destruida
por terceros. Tambin es importante asegurar
que el enlace entre cliente y servidor no pueda
interrumpirse fcilmente (disponibilidad).
Recomendaciones: Asegurar el servidor

Se
deben
considerar
los
siguientes
puntos:
Asegurar
el
servidor
en
una
forma
fundamental: el sistema operativo, ya sea por
medio de actualizaciones (parches) y
habilitando los mecanismos propios de la
plataforma.
Garantizar la seguridad del servidor Web

propiamente (IIS, Apache, etc.)
Auditar las aplicaciones que interactan en
las
dos capas anteriores (mdulos,
bibliotecas).
Recomendaciones: Asegurar la
informacin en trnsito
Esto se puede lograr por diversos medios:
Asegurando la red fsicamente (switches en

lugar de hubs).
Esconder la informacin (esteganografa).

Cifrar la informacin (criptografa) por medio
de algoritmos diversos (SSL, VPNs).
Recomendaciones: Asegurar el equipo del

usuario
Vulnerar el equipo del usuario quizs no tenga

el impacto de vulnerar el servidor, sin embargo
es un problema ms difcil de erradicar (1
servidor, 5000 clientes):
Aplicar actualizaciones (parches) al sistema
operativo.
Uso de antivirus, firewalls personales.
Educacin de los usuarios.
Planificacin de aplicaciones
web
1. Planificar el futuro
Puede sonar un poco duro que nos tengamos
planear el futuro de algo que an no
existe pero es as, que pasa si en un futuro
tuvieramos problemas de escalabilidad, y s
tuvieramos que migrar las bases de datos de
MySql
a
Oracle,
de
una
buena
planificacin depende la dificultad en un
futuro de realizar cambios en la
plataforma
que
sostiene
nuestra
aplicacin.
2. Documentacin
Documenta todo lo que puedas tu

aplicacin en especial aquellas partes de la
misma que hayan requerido un mayor
tiempo de desarrollo, en un futuro cercano
te librar de ms de un quebradero de
cabeza.
3. No empieces por los pequeos detalles
A menudo es ms sencillo plantearse el

desarrollo de pequeos servicios cmo
pueden ser los RSS o una galera de
imgenes, pero es fundamental comenzar
por lo que vendr a ser la base de nuestra
aplicacin, de este modo podremos ir
completando nuestra aplicacin en un
orden lgico, primero los cimientos
4.
Es
Diseo de la interfaz
importante conseguir un
buen diseo para nuestra
interfaz,
es
importante
conseguir un interfaz que se
atractivo y til para la gran
mayora de los usuarios.
Lo ms importante es llegar a conectar con

el usuario y la mejor manera es ofrecerle la
mayor cantidad de informacin posible para
que se llegue a sentir parte del proyecto
pero todo esto muchas veces no lo llegamos
a conseguir por una mala eleccin en la
combinacin de los colores que se integran
en nuestra interfaz.
5.
Evita
construirte
libreras
o
frameworks innecesarios
Muchas personas siempre sostienen que es
mejor que cada desarrollador utilize sus
propias libreras, pero la realidad es que en
muchas ocasiones esto supone una gran
prdida de tiempo, es mejor buscar una
librera o framework que se parezca lo ms
posible a lo deseado que desarrollarlo
por ti mismo.
6. Ten un plan de proyecto
Asegrate de que cada desarrollador que

trabaje en el proyecto sepa qu es lo que
debe de hacer y cundo tiene que hacerlo,
teniendo todo esto redactado en un
documento te ayudar a identificar
problemas.
7. Elige el lenguaje adecuado
Ya sabes que hay numerosas discusiones

sobre
Cal
es el mejor lenguaje de programacin?, la
respuesta a menudo es que depende de
para que quieras utilizarlo, por eso
asegrate de escoger el lenguaje
adecuado.
8. Evita las distracciones
Optimiza
tu
tiempo,
cuando
ests
trabajando que nada te distraiga, ni
llamadas
telefnicas,
ni
clientes
de
mensajeras instantneas, proponte un
buen nmero de horas al da de trabajo
aislado dedicado al proyecto.
9. Sigue un buen control de calidad
Muchas veces nos equivocamos al planificar

los tiempos de proyecto y esto lleva a
menudo a los desarrolladores a tener que
escribir cdigo sucio, esta es una buena
opcin si lo que quieres es una demo de la
aplicacin funcionando pero esa actitud te
traer problemas en el futuro.
10. Plantate los pasos

despus del desarrollo
seguir
Ten en cuenta que est fase de desarrollo

algn da deber acabar, estudia con qu
frecuencia se deber actualizar y que se
necesita para que este funcione.
Lenguaje de marcado
HTML
es un lenguaje esttico
para el desarrollo de sitios web
(hypertext, markup language,
lenguaje
de
marcas
hipertextuales). Desarrollado por
el world wide web consortium
(w3c). Los archivos pueden tener
las extensiones (htm, xhtml).
Qu es HTML?
Definindolo
de forma sencilla,
"HTML es lo que se utiliza para
crear todas las pginas web de
Internet". Ms concretamente,
HTML es el lenguaje con el que
se "escriben" la mayora de
pginas web.
Los
diseadores utilizan el lenguaje

HTML para crear sus pginas web,
los programas que utilizan los
diseadores
generan
pginas
escritas en HTML y los navegadores
que utilizamos los usuarios muestran
las pginas web despus de leer su
contenido HTML.
Aunque
HTML es un lenguaje
que utilizan las computadoras
y los programas de diseo, es
muy fcil de aprender y
escribir por parte de las
personas.
El lenguaje HTML es un estndar

reconocido en todo el mundo y
cuyas
normas
define
un
organismo sin nimo de lucro
llamado
World
Wide
Web
Consortium (http://www.w3.org/) ,
ms conocido como W3C.
Como se trata de un estndar

reconocido
por
todas
las
empresas relacionadas con el
mundo de Internet, una misma
pgina HTML se visualiza de
forma muy similar en cualquier
navegador de cualquier sistema
operativo.
HTML y XHTML
El
lenguaje XHTML es
muy similar al lenguaje
HTML. De hecho, XHTML
no es ms que una
adaptacin de HTML al
lenguaje XML.
Tcnicamente, HTML es
descendiente directo del
lenguaje SGML, mientras
que XHTML lo es del XML
(que a su vez, tambin es
descendiente de SGML).
Esquema de la evolucin de HTML y

XHTML
Las
pginas y documentos
creados con XHTML son
muy
similares
a
las
pginas
y
documentos
HTML.
Actualmente,
entre HTML
4.01 y XHTML 1.0, la
mayora de diseadores
escogen XHTML.
En
un futuro cercano, si
los diseadores deben
elegir entre HTML 5 y
XHTML 1.1 o XHTML 2.0,
quizs la eleccin sea
diferente.
HTML y CSS
Originalmente,
las
pginas HTML slo
incluan informacin
sobre sus contenidos
de texto e imagenes.
Con
el
desarrollo
del
estndar HTML, las pginas
empezaron a incluir tambin
informacin sobre el aspecto
de sus contenidos: tipos de
letra, colores y mrgenes.
El primer 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.
Esquema de las partes que forman

un documento HTML
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).
<html>
<head>
<title>El
primer
documento
HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan
sencillo</strong> que prcticamente
se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>
</html>
Es
importante conocer
las
tres
etiquetas
principales
de
un
documento
HTML
(<html>,
<head>,
<body>):
<html>:
indica el comienzo y el
final de un documento HTML.
Ninguna etiqueta o contenido
puede colocarse antes o despus
de la etiqueta <html> (con una
sola excepcin que se ver ms
adelante).
En
el interior de la etiqueta
<html> se definen la
cabecera y el cuerpo del
documento HTML y todo lo
que se coloque fuera de la
etiqueta <html> se ignora.
<head>: delimita la parte de

la cabecera del documento. La
cabecera contiene informacin
sobre el propio documento
HTML, como por ejemplo su
ttulo y el idioma de la pgina.
Los
contenidos indicados
en la cabecera no son
visibles para el usuario,
con la excepcin de la
etiqueta <title>
Que
se utiliza para indicar

el ttulo del documento y
que los navegadores lo
visualizan en la parte
superior izquierda de la
ventana del navegador.
<body>:
delimita el cuerpo
del documento HTML. El
cuerpo encierra todos los
contenidos que se muestran
al usuario (prrafos de
texto, imgenes, tablas).
En
general, el <body> de
un documento contiene
cientos
de
etiquetas
HTML, mientras que el
<head> no contiene ms
que unas pocas.
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.
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.
La
etiqueta <a> por ejemplo

se emplea para incluir un
enlace
en
una
pgina.
Utilizando slo la etiqueta
<a> no es posible establecer
la direccin a la que apunta
cada enlace.
Como
no es viable crear una

etiqueta por cada enlace
diferente,
la
solucin
consiste en personalizar las
etiquetas HTML mediante
cierta informacin adicional
llamada atributos.
De
esta forma, se utiliza la

misma etiqueta <a> para
todos los enlaces de la
pgina y se utilizan los
atributos para indicar la
direccin a la que apunta
cada enlace.
<html>
<head>
<title>Ejemplo de atributos en las etiquetas</title>
</head>
<body>
<p>
Los enlaces son muy fciles de indicar:
<a>Soy un enlace incompleto, porque no tengo direccin de
destino</a>.
<a href="http://www.google.com">Este otro enlace apunta a
la pgina de Google</a>.
</p>
</body>
</html>
El
primer enlace del

ejemplo anterior no est
completamente definido,
ya que no apunta a
ninguna direccin.
El
segundo enlace, utiliza la

misma etiqueta <a>, pero
aade informacin adicional
mediante un atributo llamado
href. Los atributos se incluyen
dentro de la etiqueta de
apertura.
No
todos los atributos se

pueden utilizar en todas
las etiquetas. Por ello,
cada etiqueta define su
propia lista de atributos
disponibles.
Adems,
cada
atributo
tambin indica el tipo de
valor que se le puede
asignar. Si el valor de un
atributo no es vlido, el
navegador
ignora
ese
atributo.
Aunque
cada una de las

etiquetas HTML define sus
propios atributos, algunos
de
los
atributos
son
comunes a muchas o casi
todas las etiquetas.
Los
atributos comunes
se dividen en cuatro
grupos
segn
su
funcionalidad:
1) Atributos bsicos: se pueden utilizar

prcticamente en todas las etiquetas HTML.
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.
Respecto
al valor de los
atributos id y class, slo
pueden contener guiones
medios (-), guiones bajos
(_), letras y/o nmeros, pero
no pueden empezar por
nmeros.
Adems,
los
navegadores
distinguen
maysculas
de
minsculas y no se recomienda
utilizar letras como y acentos,
ya que no es seguro que
funcionen
correctamente
en
todas las versiones de todos los
navegadores.
2)
Atributos
para
internacionalizacin: los utilizan
las pginas que muestran sus
contenidos en varios idiomas o
aquellas que quieren indicar de
forma explcita el idioma de sus
contenidos:
3)
Atributos de eventos: slo se

utilizan
en
las
pginas
web
dinmicas creadas con JavaScript.
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.
El
siguiente
esquema
muestra
un
elemento
HTML, formado por una
etiqueta <p>, atributos y
contenidos de texto:
Esquema de las partes que componen un elemento

HTML
La
estructura mostrada en el
esquema anterior es un
elemento
HTML
ya
que
comienza con una etiqueta
de apertura (<p>), contiene
cero
o
ms
atributos
(class="normal"),
Dispone
de un contenido
de texto (Esto es un
prrafo) y finaliza con
una etiqueta de cierre
(</p>).
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.
<html>
<head>
<title>Ejemplo de elementos en lnea y
elementos de bloque</title>
</head>
<body>
<p>Los
prrafos
son
elementos
de
bloque.</p>
<a
href="http://www.google.com">Los
enlaces son elementos en lnea</a>
<p>Dentro
de
un
prrafo,
<a
href="http://www.google.com">los
enlaces</a>
siguen siendo elementos en lnea.</p>
</body>
</html>
La
mayora
de
elementos de bloque
pueden contener en su
interior elementos en
lnea y otros elementos
de bloque.
Los
elementos en lnea slo

pueden contener texto u
otros elementos en lnea. En
otras palabras, un elemento
de
bloque
no
puede
aparecer dentro de un
elemento en lnea.
En
cambio, un elemento
en lnea puede aparecer
dentro de un elemento
de bloque y dentro de
otro elemento en lnea.
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.
Sintaxis de las
etiquetas XHTML
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.
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:
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>
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>
4) Los atributos no se pueden

comprimir:
Ejemplo correcto en XHTML:
<dl compact="compact">...</dl>
Ejemplo incorrecto en XHTML (pero correcto

en HTML):
<dl compact>...</dl>
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>.
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.
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,
como se muestra en la
siguiente imagen:
Estructurar
La
forma ms sencilla de
estructurar un texto consiste
en separarlo por prrafos.
Adems, HTML permite incluir
ttulos que delimitan cada
una de las secciones.
Prrafos
Una
de las etiquetas ms
utilizadas de HTML es la
etiqueta <p>, que permite
definir los prrafos que
forman el texto de una
pgina.
Secciones
Las
pginas
HTML
habituales suelen tener
una
estructura
ms
compleja que la que se
puede crear solamente
mediante prrafos.
De
hecho, es habitual
que las pginas se
dividan en diferentes
secciones jerrquicas.
Los
ttulos de seccin se
utilizan para delimitar el
comienzo de cada seccin
de la pgina. HTML permite
crear secciones de hasta
seis niveles de importancia.
De
esta forma, aunque

una pgina puede definir
cualquier nmero de
secciones, slo puede
incluir
seis
niveles
jerrquicos.
Las
etiquetas que
definen los ttulos de
seccin son <h1>,
<h2>, <h3>, <h4>,
<h5> y <h6>.
La
etiqueta <h1> es la
de mayor importancia y
por tanto se utiliza para
definir los titulares de la
pgina.
La
importancia del resto de

etiquetas es descendiente,
de forma que la etiqueta
<h6> es la que se utiliza
para delimitar las secciones
menos importantes de la
pgina.
<html>
<head>
<title>Ejemplo de texto estructurado
con secciones</title>
</head>
<body>
<h1>Titular de la pgina</h1>
<p>Prrafo de introduccin...</p>
<h2>La primera sub-seccin</h2>
<p>Prrafo de contenido...</p>
<h2>Otra subseccin</h2>
<p>Ms prrafos de contenido...</p>
</body>
</html>
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.
Entre
las etiquetas ms
utilizadas para marcar
texto
se
encuentran
<em> y <strong>.
La
etiqueta <em> marca un

texto
indicando
que
su
importancia es mayor que la del
resto del texto. La etiqueta
<strong>
indica
que
un
determinado texto es de la
mayor importancia dentro de la
pgina. Ejemplo:
<html>
<head>
<title>Ejemplo
de etiqueta em y
strong</title>
</head>
<body>
<p>El lenguaje HTML permite marcar
algunos segmentos de texto
como <em>muy importantes</em> y
otros segmentos como <strong>los
ms importantes</strong>.</p>
</body>
</html>
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:
<html>
<head><title>Ejemplo de etiqueta ins y
del</title></head>
<body>
<h3>Ejemplo de etiqueta ins y del</h3>
<p>El HTML, acrnimo ingls de Hyper Text Markup
Language (lenguaje de
<del datetime="20091025"
cite="http://www.librosweb.es/mas_informacion.html">m
arcado de hipertexto</del> <ins datetime="20091026"
cite="http://www.librosweb.es/mas_informacion.html">
marcas hipertextuales</ins>) es un lenguaje de
marcacin diseado para estructurar textos y
presentarlos en forma de hipertexto.</p>
</body>
</html>
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:
<html>
<head><title>Ejemplo de etiqueta
blockquote</title></head>
<body>
<p>Segn el W3C, el valor del
atributo <em>cite</em> en las etiquetas
<strong>blockquote</strong> tiene el
siguiente significado:</p>
<blockquote
cite="http://www.w3.org/TR/html401/struct/te
xt.html">"El valor de este atributo es una
direccin URL que indica el documento
original de la cita."</blockquote>
</body>
</html>
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:
<html>
<head>
<title>Ejemplo de etiqueta acronym</title>
</head>
<body>
<p>El lenguaje <abbr title="HyperText
Markup Language">HTML</abbr> es
Estandarizado por el <acronym title="World
Wide Web consortium">W3C</acronym>.
</p>
</body>
</html>
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.
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).
<html>
p</title></head>
<body>
<p>Este primer prrafo no contiene saltos
de lnea ni otro tipo de espaciado.</p>
<p>Este segundo prrafo s que contiene
saltos
de
lnea
y otro tipo de espaciado.</p>
</body>
</html>
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.
<html>
<head>
<title>Ejemplo de etiqueta br</title>
</head>
<body>
saltos <br/>
de <br/>
lnea <br/>
y otro tipo de espaciado.</p>
</body>
</html>
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).
<html>
<head>
<title>Ejemplo de entidad </title>
</head>
<body>
saltos <br/>
de <br/>
lnea <br/>
y otro tipo de
espaciado.</p>
</body>
</html>
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.
National Aeronautics and Space Administration,

Laboratorio de Propulsin a Chorro
Texto preformateado
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:
<html>
<head><title>Ejemplo de etiqueta pre</title></head>
<body>
<pre>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
est escrito
</pre>
<p>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
est escrito
</p>
</body>
</html>
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:
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
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:
<p>Este
párrafo
contiene caracteres
acentuados y se almacena
en formato UTF-8</p>
En la Wikipedia se puede consultar la lista

completa de las 252 entidades HTML
definidas (http://en.wikipedia.org/wiki/
List_of_XML_and_HTML_character_entity_ref
erences) .
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.
URL
Antes
de empezar a crear
enlaces,
es
necesario
comprender
y
dominar
el
concepto de URL. El acrnimo
URL (del ingls Uniform Resource
Locator) hace referencia al
identificador nico de cada
recurso disponible en Internet.
Las
URL son esenciales

para crear los enlaces,
pero tambin se utilizan
en otros elementos HTML
como las imgenes y los
formularios.
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.
Si
se accede a la pgina principal de

Google, la direccin que muestra el
navegador es:
http://www.google.com
La
cadena
de
texto
http://www.google.com es la URL
completa de la pgina principal de
Google.
La
URL
de
las
pginas
es
imprescindible
para
crear
los
enlaces, ya que permite distinguir
una pgina de otra.
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. Si por ejemplo se
considera la siguiente URL:
http://www.librosweb.es/xhtml/
capitulo4.html
Las
partes
componen
la
anterior son:
que
URL
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.
La
mayora de URL
sencillas como la URL
anteriormente.
No
existen URL complejas
por ms partes.
son tan
mostrada
obstante,
formadas
http://www.alistapart.com/comme
nts/webstandards2008?
page=5#42
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 #
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:
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 da click
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.
Con la definicin anterior, para crear

un enlace que apunte a la pgina
principal de Google solamente habra
que incluir lo siguiente en un
documento HTML:
<a
href="http://www.google.com">Pgin
a principal de Google</a>
Como
el atributo href indica una

URL, un enlace puede apuntar a
cualquier tipo de recurso al que
pueda acceder el navegador. El
siguiente enlace apunta a una
imagen, que se mostrar en el
navegador cuando el usuario
pinche sobre el enlace:
<a href = "http://www.ejemplo.com/

fondo_escritorio.jpg">Imagen
interesante
para
un
fondo
de
escritorio</a>
De la misma forma, los enlaces pueden

apuntar directamente a documentos PDF,
Word, etc.
<a href ="http://www.ejemplo.com/
informe.pdf">Descargar informe completo
[PDF]</a>
<a href="http://www.ejemplo.com/
informe.doc">Descargar informe completo
[DOC]</a>
Un
truco muy til con los enlaces

es el uso de URL relativas para
poder volver al inicio del sitio
web desde cualquier pgina web
interior:
<a href="/">Volver al inicio</a>
El
otro atributo bsico de la

etiqueta <a> es name, que
permite definir enlaces dentro de
una misma pgina web. Si una
pgina es muy larga, puede ser
til mostrar enlaces de tipo "Saltar
hasta la segunda seccin", "Volver
al principio de la pgina", etc.
Este
tipo de enlaces son

especiales, ya que la URL de
la pgina siempre es la
misma
para
todas
las
secciones y por tanto, debe
aadirse otra parte a las URL
para identificar cada seccin.
<a
name="primera_seccion"></a>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Mauris
id ligula eu felis adipiscing ultrices.
Duis gravida leo ut lectus. Praesent
condimentum mattis ligula.</p>
<a
name="segunda_seccion"></a>
<p>Pellentesque malesuada. In in
lacus. Phasellus erat erat, lacinia a,
convallis eu, nonummy et, odio.
Aenean urna elit, ultrices id, placerat
varius, facilisis eget, dolor.</p>
El
atributo name permite

crear "enlaces vacos" que
hacen
referencia
a
secciones dentro de una
misma pgina.
Una vez definidos los "enlaces

vacos", es posible crear un enlace
que apunte directamente a una
seccin concreta de una pgina:


pagina1.html">Enlace a la pgina
1</a>

pagina1.html#segunda_seccion">Enl
ace a la seccin 2 de la pgina
1</a>
La
sintaxis que se utiliza

con estos enlaces es la
misma que con los enlaces
normales, salvo que se
aade el smbolo # seguido
del nombre de la seccin a
la que se apunta.
Cuando
el usuario pincha
sobre uno de estos enlaces,
el navegador accede a la
pgina apuntada por la URL y
baja
directamente
a
la
seccin cuyo nombre se
indica despus del smbolo #.
A partir de la estructura de directorios y

archivos indicada en la siguiente imagen:
1)
Crear la siguiente pgina

llamada indice.html que sirva
como pgina principal del
sitio:
2) Crear la pgina de ndice del portfolio:
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.
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.
Ejemplo sencillo para incluir

una imagen:
<img src="logotipo.gif"
alt="Logotipo de Mi Sitio" />
La recomendacin es utilizar
uno de los tres siguientes
formatos
grficos
que
entienden
todos
los
navegadores modernos: GIF,
JPG y PNG.
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.
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.
El siguiente cdigo HTML muestra un ejemplo

sencillo de lista no ordenada:
<html>
<head><title>Ejemplo de etiqueta UL
</title></head>
<body>
<h1>Men</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artculos</li>
<li>Contacto</li>
</ul>
</body>
</html>
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.
<html>
OL</title></head>
<body>
<h1>Instrucciones</h1>
<ol>
<li>Enchufar correctamente</li>
<li>Comprobar conexiones</li>
<li>Encender el aparato</li>
</ol>
</body>
</html>
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.
Tablas
Desde
sus primeras versiones,

HTML incluy el soporte para
crear tablas de datos en las
pginas web. Adems de ser
sencillo, el modelo definido por
HTML es muy flexible y
bastante completo.
Las
tablas en HTML utilizan

los mismos conceptos de
filas, columnas, cabeceras y
ttulos que los que se
utilizan en cualquier otro
entorno de publicacin de
documentos:
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.
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.
<html>
<head><title>Ejemplo de tabla sencilla</title></head>
<body>
<h1>Listado de cursos</h1>
<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>
<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>HTML</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td>60</td>
<td>16:00 - 20:00</td>
</tr>
</table>
</body>
</html>
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.
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.
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>.
Ejercicio
Determinar
el cdigo HTML
necesario para crear la
tabla que se muestra en la
siguiente imagen:
Las
tablas
complejas
suelen
disponer
de
una
estructura
irregular que junta varias columnas
para formar una columna ancha o
une varias filas para formar una fila
ms alta que las dems. Para
fusionar filas o columnas, se
utilizan los atributos rowspan y
colspan respectivamente.
La siguiente imagen
muestra una tabla compleja
que ha fusionado dos
columnas simples para
formar una columna ms
ancha:
Para obtener una tabla como la de la imagen

anterior, se debe utilizar el siguiente cdigo:
<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
La primera fila de la tabla est formada slo por una columna,

mientras que la segunda fila est
formada por dos columnas. En principio, podra pensarse en
utilizar el siguiente cdigo HTML
para definir la tabla:
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
El cdigo HTML que se debe utilizar para obtener

la tabla de la imagen anterior es:
<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>

Programación Web

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Programación Web

Încărcat de

Drepturi de autor:

Formate disponibile

PROGRAMACIN WEB

Introduccin a las aplicaciones web

Internet, la red de redes, nace

DARPA inici un programa de

De estos proyectos naci un

La WWW como servicio de Internet

La WWW (World Wide Web) o, de

sta ha dejado de ser una

xito espectacular de la web

El protocolo HTTP y el lenguaje

HTML nos proporciona un

Las aplicaciones web son aquellas

protocolo HTTP (hypertext

razn de que est

protocolo que establece

propsito del protocolo HTTP es

HTTP utiliza el puerto 80

Arquitectura de las aplicaciones

Arquitectura de las aplicaciones

Arquitectura Web de tres niveles:

primer nivel consiste en la

segundo nivel est referido

Lenguajes de programacin del

programas del lado del

Tecnologas y lenguajes del lado del cliente.

Navegadores para Web.

Algunos navegadores Web.

Tecnologas y lenguajes del lado del cliente.

Lenguajes de programacin del

ejecutan en el servidor de Web y

usan para acceder a

Lenguajes de programacin del

Por ejemplo, el mbito de ejecucin de una

Lenguajes de programacin del

ASP, ASP.NET (son tecnologas, soportan

Un servidor web es un programa que

Ambientes para el desarrollo de

Los IDE (ambientes integrados de desarrollo)

Considerar los que permitan trabajar con los

Algunos son especficos para lenguajes del

Ambientes para el desarrollo de

Algunos ejemplos de IDE para Web:

Microsoft Visual Studio.

Las aplicaciones Web estn ms expuestas

Se pueden tener ataques en tres niveles:

La seguridad en Web tiene 3 etapas

Seguridad de la computadora del usuario

Los usuarios deben contar con navegadores

Seguridad del servidor Web y de los

Seguridad de la informacin que viaja

Garantizar que la informacin en trnsito no sea

Recomendaciones: Asegurar el servidor

Garantizar la seguridad del servidor Web

Asegurando la red fsicamente (switches en

Esconder la informacin (esteganografa).

Recomendaciones: Asegurar el equipo del

Vulnerar el equipo del usuario quizs no tenga

Documenta todo lo que puedas tu

3. No empieces por los pequeos detalles

A menudo es ms sencillo plantearse el

Lo ms importante es llegar a conectar con

6. Ten un plan de proyecto

Asegrate de que cada desarrollador que

7. Elige el lenguaje adecuado