FRRfllUIIFNTA!

HTM
Comoya
sabemos,
el cdigo
esInternet
elbsico
HTML,depor lo que una vez
que tengamos
diseado,
sitionuestra
esetransferir
necesitramos
diseo a lneas
de cdigointerpretadas
puedan
que
sernavegadores
usuarios.
pordeloslos

I proceso

d ecrear

pginas

se

denomina,

e n laj e r g a , m a q u e -

tacin,

dac o m o r e s u l t a d o t e -

ner n u e s t r o diseoconvertido

en

un sitio navegable. Luego, en casode que

el proyecto lo requiera, faltarla adicin
cdigo JavaScript,

AJAX,

de

ASP

Interfaz de N o t e p a d + + ,

PHP
para

donde vemos c o m o ejemplo

leceaa[.];?>">

hacer que las pginas dinmicasobtengan

el cdigo de u n a pgina

contenido de las basesde datos.

Un problema que suele presentarse
desarrollar HTMLes lograr que el

escrita en PHP.

ai

sea visualizado de igual forma en la

diseo

-:dlv

mayora

Este inconveniente se debe, principalmen-

te, a que algunos fabricantes no han incor-

! SCHC}

porado en sus productos los estndares

^div

<div 3 t y l ^ * ' c o l o r ; 6 l > 6 F T l ; JLine-heigtit:

l ^ x ; barder-bot toM: 2VM
o l i43]a3S.d
ldth:100%:
3 - y l 3 = ' w i d t h : 1 0 0 % : border-bottOM:
2pM
o i 4J3a38;->
d
< d i v ^ I a 3 3 * * c e n t >
<dlv i d " " l a b e i > < ? ' l f o r a i ; ?>f.:/dlv><dv><iaput
n
* * r e 't y p-ei3s-C
s' st7^
ei 'e
nC"fJ' B Il V O '

y HTML
para que

<div

dores ms frecuentes: Internet Explorer 6,

y3.6; Chrome 5.0

paddUg-hott;

r.ame

!3*-Cimf>

i d * " l a b e X - > < ? = S f o r [ i ] ;?></dlv>dlv>itipar.

</div>
<dv c a ;

la maqueta sea compatible con los navega7 y 8; Mozilla Firefox 3.5

>

cia33='fDE*wlario-

En consecuencia, tendremos que aplicar

CSS

loat;nonp;

?>

que determinan la estructura de la Web.

parches en el cdigo

3^7ie"*palding-top:
>
Hpjt^

c!la33*"zocaio"

<cllv id='te>rti= 3 t 7 l s " ' w i d t h : I 0 0 * ;

de los navegadores de Internet.

ryp^'-t

Safar 4.0. Esta prcticase denomina crossbrowsing. Es importante

distinguirentre
ya que cada una interpreta el

cdigo

cdigo HTML

navegadores mencionados, el 9 6 %

tal fin, ya que en ellos tendremos ayudas

sin problemas el trabajo que

visuales (como el uso de

distintoscolores

estamos desarrollando.

para el texto) que nos orientarnen la tarea

HERRAMIENTAS
m
GENERAR CODIGO

HTML

La aplicacin ms potente del mercado

para generar cdigo HTMLes Adobe Dreamweaver CSS, que comenzaremos a estu-

Es gratuita.

Sintaxis coloreada.

org) es una aplicacinque bien

oel Blocde notas

inclui-

estamos acostumbrados a redactar

Entre los principales puntos

a favor de esta aplicacin

Notepad-i~i- (http://notepad-plus-plus.
podramos

cdigo

de

Internet que tengamos instalados.

NOTEPAD++
YCSS

do en todos los sistemas Windows. Si

cdigo

el HTML en los navegadores

encontramos los siguientes:

del editor detexto

adems de ella, existen otras que podemos

atajo de teclado, podemos visualizar

y simplificarnel trabajo.

definir c o m o una versinm u y mejorada

diar en las prximas pginas.Sin embargo,

ygenerar

De todas maneras, desde un simple

yCSS, nos convendr

recurrir

a programas diseadosespecialmente para

de los usuarios de Internet podrver

no

cuenta con un preview incorporado.

de Windows, es suficiente para redactar

nuestrositio sea compatible con los siete

aciegas,

no ser conveniente
utilizarlo,ya que

Si bien es cierto que cualquier editor

de
de texto plano, c o m o el Blocde notas

forma diferente.Si nos aseguramos de que

utilizar para redactar

de programacinw e b

CSS y HTML para nuestros

sitios.

las distintas versiones de cada navegador,

Numeracinde lnea.

Muy liviana, consume

pocos recursos del sistema.

no Cdigo autocompletable
en diferentes lenguajes.

redusers.com

ii-,ei:iaipaopscicy-SO)
-inoz-ofi6cityiO,5i
-kh^ml-cpacityi
0.5;
p a c i t y i O.Sj

ocssi
liMfllBlOpKJ

ocsH

of

0*9

idthlOO'.)
CSSSilteUr*

)MlCtouiStui:l(../ini(/ondo,JP(J

4: # 4 3 i t

centt

top i
" O.lmg

mienta (CSS)cuenta con una

funcionalidad
muy destacable: el asistente de codificacin inteligente. Su funcin
optimizar
es
la velocidad de escritura de cdigo,
dado que el programa reconoce
sugiere
y
Strings de cdigoen diferentes lenguajes
de programacin. Estassugerencias
aparecentantoen funciones predefinidas
del lenguaje c o m o en otras personalizadas
que hayamos usado en el mismo desarrollo. Porotrolado,con Adobe Dreamweaver
tenemos una ventaja simple pero
fundamentalsobre otros editores
de HTML: podemos
insertartags
corriendo sloun c o m a n d o del
programa,c o m o [Insertar/Imagen].
Veremos ms detalles de la aplicacin

El panel [CSS P a l e t t e Editor] (TopStyle

Pro), muestra los colores utilizados
en la hoja d eestilos
y cuntas
veces
aparece c a d a uno.

Esposible abrir

medida que avancemos en la coleccin.

ygestionar

(por ejemplo,logs de acceso

ADOBE DREAMWEAVER

CSS

TOPSTYLEPRO
TopStyle Pro

(www.topstyle4.com)

es uno de los mejores editores de cdigo

CSS y, engeneral,es recomendable
utilizarlo c o m ocomplementodel
editorde HTML
principal que empleemos para trabajar.
Entre susprincipalesventajas podemos
mencionar:
Preview del cdigoescrito
en tiempo real.
Validador de estilos

;.

<!MCTYP ntiHl PUBLIC

Mttp://mw..3.org/T/i
^^^^^^^^^^^^^^^^
html xalrit.."http://i'wvr.H3lHilliillHiili^^
" Contnc-Type" cont n t - " t e l l M i ^ l B P l i W I W " ' P W W l e > MHwn
<n
er\di
/ t i t l e x U n k href-"ossets/SpryAssets/5pryMenuBorHO!-i2ontot,css"
reU'stylesheet" tyoe"tBS(t/css" / x l i n k href.'assets/csi/ertdten,css"
rel-'stylesheet"type-'text/css"
/>ssc-ipi src-"ossets/SDryAssets/
Spr>enuBor.js" type^'text/javoscrpt"
</scri(>t></heiil><bod> class-''hoie">
fliv class-"contaiier"><aiv
class'"leafler nOiv class-"inner"'>

- - o nref-"blo9/\nciEx.pnp"
Locol VoiM'/oxdiv ciass."Bran(lng"><n Hrf"">\.fflg src"as5ets/%/10BO.png" io~'logo" olt-"lOCa1 tnogazine" ividtn-"2
ieigrt-"73"/></><a i)."sijBscrH)e" href-""><Spon>Jon
l
SuBierlb ond buy bocii lsgeK/sponx/a></d\v><ul tl."N
class.'MenuBorHortzontol"><ltid--hoie"><n nref-'lfidex.htal'i
H w - t / o x / U x l i id-"co\umns'>
o c;o-"HenuBorIteBSiJt)enu"
nref>')'">C9luwt</'a>
<ulxti>

0U ES DftEAMWEAVER?
.HOVEDAOES
tMFORUiCINDCTaLUOA
PARA CEHTES DEL
SECTO EOyCATIVO
A5ISTENCU VFOflMAClH

CSS.

Sintaxisautocompletabledel

cdigo que estamos escribiendo.

PORQU DREAMWEAVER?
La eleccinde Adobe Dreamweaver c o m o
principal herramienta de trabajo
se debe a que es una aplicacin
muy
potente para desarrollar
sitiosw e b
respetandolos estndares
CSS HTML.
y
Con ella, podemos disear
sitios
de
forma visual odirectamentesobre
el cdigo, ytenemos posibilidad
la
de trabajar con
distintosentornos
de programacin, c o m o XHTML,
CSS,
XML,
JavaScript, AJAX, PHP
yASP.
Dreamweaver nos
permite
configurar
sitios
y de esta manera,
definirun mbito
de
desarrollo ytesteo para los diseos
aplicay
ciones web que generemos, sin necesidad
de usar un programa externo para tal
fin.
Adems, esta nueva versin
de la herra-

LOCAL

Diseo.

Desarrolo. Comprobacn

Dreamweaver
es
la aplicacin d e la
suite A d o b e W e b
Premium especialmente
desarrollada para
la
creacin d esitios w e b .

archivosdetexto pesados

a servidores) sin perder

estabilidad.

publicacin.
y
Ms r ( ^ .

Ailub^Disa'Tiw?
C.>'>
p-riiitR
Un
lieBatofes
a
y
dtsanoIMuies cfr
cm UXtania
tUlKrs
l)-E^>p^bina^W0(iclwi(il>
rain
olca^.dvswiAe
pd^n con
selsriiKilRgmMnfc
l<^.>;3
\3 '.iXTipabCiMxl
ir
pedas
l>a rtK^n ci
IIUHD
Adobe
CS
SnnnBUb.
lKai
n>fe MAH
1 I " L M 39rt&5*!:r.tfiv<i<reatas
ManteanUrnviinAAi Ver nueSEas
MMdnln

m
basados
KlHlD<i

redusers.com

JUtJtU^D

MWEAVER
Esta aplicacin
fuerte
combina
desarrollo
unafunciones
de
herramienta
con visual
y edicin deahora,
cdigo
nuestros
decomenzaremos
de
a partir
dar
programacin. A
jrimeros
pasos con ladeversin
pginas
Adobe,
editorCS5
webdedeeste
Inlidad es una de las
l a l i d a d e s ms destacadas de
Dreamweaver. Esta aplicacin
puede ser usada por aquellas
personas que tengan poca experiencia
en el armado de una pginaHTML,
porque al insertar elementos desde
los mens,el programa se encarga de
redactar a la perfeccin
el cdigo HTML
y CSS. Tambines tilpara usuarios
avanzados, ya que permite manipular
manualmente los tags con asistencias de
edicin excepcionales, que aceleran el
proceso de redaccin
de cdigo.
Luego
de iniciar Dreamweaver por primera vez,
es recomendable definir la distribucin
del espacio d e trabajo. Esto
determinar la ubicacinde los distintos mens
y opciones dentro de la aplicacin,
y es
una seleccinque quedar
registrada
para las prximas veces
q u e lo usemos.
Para hacerlo, nos dirigimos al men
[Ventana/Diseodel e s p a c i o de t r a bajo]. La distribucinllamada [Clsico]
es sumamente flexibleintuitiva,
e
y
resulta familiar para quienes vienen
trabajando con versiones anteriores de este
programa.Sin embargo, cada usuario elegir la que le resulte ms adecuada.

y [Diseo]. C o m o su n o m b r e lo indica,
en el rea [Cdigo],ubicada en la parte
superior,veremos el cdi go HTML
de la
pgina. Aqu tambinp o d r e m o s escribir
cualquierotro cdigode programacin
w e b que necesitemos (como ASR PHR
JavaScript, etctera).Por su parte, en la
seccin [Diseo],que se encuentra en la
parte inferior,se muestra la previsualizacin (preview)del cdigo
interpretado.
El resto de la pantalla se c o m p o n e de la
siguiente manera: en la parte superior
estn el meny la barra de herramientas;
en la derecha, la barra de ventanas;
y en la parteinferior,la barra pde
ropiedades HTMLy CSS. Veremos estas
secciones en detalle en las prximas
pginas,d o n d e conoceremos las partes
de la interfaz del programa.

NUEVAS CARACTERSTICAS
Adobe Dreamweaver CSS incluye
mejoras respecto a su antecesor;
las ms destacadas son las siguientes:

Inspeccinde hojas de estilo:

se pueden cambiar las propiedades CSS

sin necesidad de escribir cdigo,
simplemente,desde un panel ubicado
a la derecha del reade trabajo.

Integracincon Adobe
BrowserLab: stees un servicio en

lnea de Adobe que permite probar

y comparar nuestro desarrollo en
diferentesnavegadores de Internet.

Aunque trabajaremos con CSS ms adelante, vale destacar en este caso la nueva caractersticade Dreamweaver CSS que realiza la
inspeccinde CSS en t i e mreal.
p o Gracias
a estafuncionalidad,es posible cambiar las
propiedades de una hoja de estilos sin necesidad deinterpretar cdigo.
Desde el panel
[EstilosCSS], podremos modificar colores y
otros parmetrosde manera muy sencilla.

[Editor predeterminado
Adobe Dreamweaver
C S 5 se establecer como editorpredeterminado
para los siguientes
tipos de archivo:
fV] Active Server Pages(asp)

g]

Cuando abrimos un d o c u m e n t o
(o creamos uno nuevo, c o m o veremos ms
adelante), por defecto aparece la pantalla
dividida en dos zonas principales: [Cdigo]

12] Hojasde estilos en cascada (css)

Java Server Pages(sp)

los tipos de archivoq u e soporta.

JavaScript(s)

1 3 ColdFusion (cfm, efe)

|Vl Lenguajede formato

extensible (xml)

A S P . N E T (aspx, ascx)

PHP

Hojasde estilo XSL (xsl, xsit]

(php, php3, php4)

Seleccionar todo

Dreamw/eaver, d e b e m o s definir
si
ser el editor p r e d e t e r m i n a d o para

'

Sugerencias de cdigoPHP
personalizado: se trata de un asistente
para escribir sintaxis adecuada de
nuestras fundones personalizadas de PHP

EL REA DE TRABAJO

La primeravez que e j e c u t a m o s

'

[ jAceptar

Anular todaslas selecciones

redusers.com

.07

Dw
liDOBE

D R E A M W E A V E R ' CSS

Abrir un e l e m e n t o
L )

reciente

Crear

nuevo

**

ColdFusion
PHP
ASP

destacados

Moo deinspeccin de C S S

HTML

Abrir...

Elementos

VBScript

X S L T (pgina completa)
CSS
JavaScript

Activ./desactlv. de C S S
A r c h i v o s relac. dinmicamente
Navegacin de vista en vivo
Integracin de B r o w s e r L a b

mi
Sitio de D r e a m w e a v e r . . .
Q

Comenzar a trabajar

Nuevas funciones

Q
A

Ms...

Recursos
Dreamweaver Exchange

PRESTAR
ATENCION AL

CODIGO

Aunque p o d e m o strabajar
exclusivamente en lavista jDiseo], es
convenienteutilizar la
pantalla
dividida de Dreamw/eaver.
De estaforma, amedida que hagamos
el diseo de una pgina, tambin veremos el cdigo que se va generando.
En etapas deaprendizaje,esto nos
ayudar afamiliarizarnosconsintaxis
la
HTML y relacionar cada u n o de los
elementos queinsertemoscon
e t isus
quetas yatributos HTML (veremos estos
temas sobre el
final de la clase). Ms
adelante, cuando t e n g a m o s ms
conocimientos, ver el cdigo nos
permitir cuidar que ste
cumpla
con los estndaresdefinidospor el W3C
(www.w3.org). Sibien ste es un
tema
que veremos endetalle en la prxima
clase, cabe adelantar que, trabajar
al
con lainterfazdividida,encontraremos
que algunas palabras comienzan
con el signo &
[ampersand).
Tendremos que
familiarizarnoscon
estos caracteres para
poder leer HTML
con naturalidad, ya que utilizan
se
para indicarle al navegador el uso de
algunos smbolos o palabras especiales.
Hasta aqu, hemos hecho un
primer
contacto con A d o b e Dreamweaver CSS;
a medida que avancemos en las clases,
remos descubriendo nuevas
caractersticas yvirtudes de
nuestro
editor de HTML y CSS
preferido.A

L u e g o de seleccionar un estilo, b u s c a m o s la propiedad que q u e r e m o s modificar

y elegimos el nuevo valor que d e s e a m o s darle.

om

DREAMWEAVER

CSS

Antes de comenzar a trabajar, haremos un repaso de la ventana principal

de Dreamweaver para conocer dnde estn ubicadas las principales
utilidades
que nos brinda esta aplicacin.

d o b e Dreamweaver posee
que

nos da

la
posibilidad

archivos quec o m p o n e n sitio

un
sencilla

una
interfaz fcil

y cmoda. Conocerla

t i e m p o cuando e m p e c e m o s

utilizar,
de

de
manipular
distintos
los
forma
de

muy

nos permitir
ahorrar

aarmar nuestras pginas.

Edicin

Archivtj
Untltled-2

OStSgo

>^

Ver

Jnjertsr

Modific,

Formato

Comsodo

^
Vfl^a e nvivo

; D r v i d DlseAo
Direccin:
< ' D O C T v T ehtml

PUBLIC

"-/
4../
OUSCZ/PTO XHTML

Tcajisit.ion-Hi
//Eli"
<heati>
<Beca hccp-equiv="Content:-Type" conCent-'*cxt/lical;
clatset,=ut-8"
/>
<ckcl>DocuMnt
s i nt i c u l K / t l c l O
</head>

Barra d e mens,

q u e es Live. Nos d a
las la o p o r t u n i d a d
funciones del p r o g r a m a .
de c o n e c t a r n o s
al sitio d e A d o b e
d e f o r m a directa.
1

</hciil>

contiene t o d a s

Barra del d o c u m e n t o ,

en donde colocamos

ttulo d e nuestro sitio.

C3

m.
el

Paneles d e s d e d o n d e
p o d e m o s agregar,
cambiar
o eliminar
distintas p r o p i e d a d e s
de los d o c u m e n t o s
Vista d e pantalla e l e g i d a .
Podemos c a m b i a r l a
d e (nos permitir d e s d e
a c u e r d o c o n el rol crear u n archivo
n u e v o h a s t a eliminar
q u e t e n e m o s alutilizar
el p r o g r a m a . Pore j e m p l o , una clase e n CSS).
diseador, desarrollador
o programador, entre
otras o p c i o n e s
Propiedades
generales
1
del d o c u m e n t o :
d e s d e el t a m a o
C u a d r o d e bsqueda
hasta el U T F
q u e nos permite localizar
texto o sintaxis d e e n el q u e est
generado
programacin dentro
el archivo.
del d o c u m e n t o abierto.

<body>i

'*^**'^**^~EZZZ

Z38i

dase

Nirtgis\a

tes de ta pagina

redusers.com

i jg 1

Panel [Propiedades], d o n d e
podemos

verlas p r o p i e d a d e s

de u n a etiqueta

e nparticular.

Vista previa para

la posicin
de los objetos
de unsitio. sta
es una previsualizacin del sitio,
q u e nos permite ubicar los o b j e t o s
en el espacio d e la pgina.

Permite c a m b i a r entre
p r o p i e d a d e s HTML

del d o c u m e n t o

c o n f i g u r a d o p a r a a c c e d e r al servidor.

Seccin

Barra q u e p e r m i t e elegir c m o ver

la pantalla d eD r e a m w e a v e r .
Esm u y
prctica p o r q u e p o d e m o s
v e rslo
diseo, el cdigo
oa m b o s (la f o r m a
ms utilizada
e s la ltima).

y CSS

e n ejecucin.

Dnc*fk>r

OociJfrt&o

d e lapantalla d e s t i n a d a

a ver el cdigo del sitio.

Barra d e programacin. Nos p e r m i t e

d e s d e contraer
elcdigo del sitio
hasta o r d e n a r l o p a r a o b t e n e r
una lectura fcil
y rpida.

las

Ayuda

Tftuio:

Muestra las e t i q u e t a s definidas.

Si h u b i e s e u n a e t i q u e<p>,
ta
la
mostrara a continuacin
d<eb o d y >,
y a q u e esta ltima c o n t i e n e
a la
anterior. Pore j e m p l o<body><p>.
,

"

Barra d o n d e se m u e s t r a

nuestro sitio, si t e n e m o s

(del archivo HTML, PHP, etctera).

i ntitulo

Actual
la s*lcciB

r n g u n a d e tas p r o p i e d a d e s C S S s e apJKa a
la s a l e c c k ^ a c t u a l . S e l e c c i o n e u n
elemento
c o n estSospar^
ver c u l e s
soo las
IMTfMsdades
C S S ap&cafales.

No x apfica n i n g u n a r e ^ C S S a la t i q u e t a
salecctonada.

AdminsTar

sitios

iTam-lTlDC
m m

escritorio

ri06%
tS

Titulo
oe$E^

Slx731^

IKjls

Equipo
'iiu'f

R-
EIcnertos

Unicode(UTF-8)

de

ase...

de

elp r o g r a m a

N o m b r e del d o c u m e n t o

e :

Todo

laURL

el

.10,,

redusera.com

QUES HTML?
Ahoraque ya conocemos
deinterfaz
Adobe la
Ireamweaver,
veremos los aspectos bsicos de
lenguaje
HTML,
como
tambin
principales
as las
caractersticas de XHTML, Con esta informacin,
comprenderemos
mejor la creacin de pginas,

oda pginaw e b estconformada

por un cdigoestructurado, d e n o minado HTML
{HyperText
Language). Bsicamente, ste
cuenta con una serie de instrucciones
para indicarle al navegador que estemos
utilizandola manera en que la pgina
debe ser visualizada
representada.
y
Una de las caractersticas
deeste
lenguaje es su simplicidad, d a d o que para
crear un d o c u m e n t o HTIVIL,
lo nico
que
necesitamos es un editortexto,
de c o m o
WordPad oel Bloc
de notas de Windows.
Con estasdos sencillas herramientas,
posible estructurar una pgina
w e b por
medio de la inclusin
de las e t i q u e t a s
(tags) propias del lenguaje. stas
indican
el comienzo
y
el final de los elementos
que integran el d o c u m e n t o , desde
las caractersticas
de los textos hasta
los elementos multimedia, c o m o

HTML ES n LENGUAJ

DE MARCA CON
ETIQUETAS
Markup

XHTML
La sigla proviene de

HyperText

Markup

EXtensible

Language,

es u
y

lenguaje q u e cuenta con un e t i q u e t a d o

ms estricto q u e HTfVlL, con lo cual
p e r m i t e una correcta interpretacin
del c o n t e n i d o del d o c u m e n t o . Posee
una mayorflexibilidad,
ya q u e logra ser
representado p o r t o d o s los n a v e g a d o res, i n c l u y e n d o los de dispositivos p o r ttiles,c o m o PDAs
y telfonos
celulares,
entre otros. Gracias
a XHTML,
el m i s m o
d o c u m e n t o es til
para t o d o s los
imgenes,videos
sonidos.
y
esA u n q u e HTIVILes un lenguaje, no lo
es soportes; es decir, n o es necesario
desarrollar un d o c u m e n t o para nade programacin,
sino que es un l e n vegadores w e b
oy
t rdiferente
o
para
guaje de marcado.
Se
trata de un sistec o n t e n i d o mvil,p o r e j e m p l o . Adems,
ma de etiquetas que indica al navegador,
los e l e m e n t o s c o r r e s p o n d i e n t e s
al
por ejemplo, cundo
subrayar un ttulo,
diseo- c o m o colores, t i p o s de f u e n t e
cmo definir el color del
texto
o dnde
o f o n d o s - se representan enh o j a s
de
insertar una imagen. Si el navegador
e s t i l o en c a s c a d a (CSS) por separado,
detectara algnerror en el cdigo
que
lo q u e p e r m i t e tener un cdigo
mucho
d e b e representar, mostrara
el d o c u m e n ms l i m p i o
yde m e n o r tamao.
to tal c o m o lo hubiera interpretado.

QUE LE

ALNAVEGADOR

D E B EM O S T R A R .

DIFERENCIAS ENTRE

HTML
Y

Hasta aquhemos analizadocada

lenguaje de marcado por separado.
En esta seccin,los detallaremos con
ms p r o f u n d i d a d
analizaremos
y
prinlas
cipales caractersticas
decada
uno, para
c o m p r e n d e r mejor sus diferencias.

El cdigo X H T M L tiene
una menor
cantidadde errores
de compatibilidad
y una mayor integracin
con las
diferentes plataformas
d e visualizacin
de contenidosweb.

XHTML

redusers.com

La evolucinde HTML
ha sido compleja,
y avanzsobre diferentes temticas,
que
cambiaron aspectos del lenguaje ao
tras ao hasta llegar a la versin
actual
(HTML 4.0). staincluye elementos q u e
en el pasado no estaban integrados y
que fueron surgiendo gracias distina los
tos fabricantes de navegadores w e b .
Sin embargo, hoy en da no se navega
por la Web nicamente
desde una c o m putadora,sino que cada vez se utilizan
ms los dispositivos mviles
y otro
de
tipo. Debido a esto, se hizo necesario
crear un mecanismo que permitiera
manejar la informacin
de manera ms
estandarizada y para que fuera universalmente accesible.
XHTML es el nuevo lenguaje estndar
generalizado para la Web desde el ao
2000. C o m o estbasado en XML

[Extensible

Markup

Language),
es

posible considerarlo c o m o una

combinacinentre HTML
y XML.

BENEFICIOSDE

XHTML

Los principales beneficios de

XHTMLfrente a otros lenguajes

son los siguientes:

Tambin p o d e m o s navegar
por sitios HTMLd e snuestros
de
telfonosmviles.

^ C o m p a t i b i l i d a dcon n a v e g a d o r e s
a n t i g u o s : XHTMLfue diseado
con el
objetivo de cumplir con los r e q u e r i m i e n tos de t o d o s ios browsers.
Reduccinde errores: c o m o
m e n c i o n a m os anteriormente,
al ser ms estricto, elimina una gran
cantidad de errores propios de HTML.

Contenidos
+
Presentacin

Muchas
herramientas
de diseo producen
cdigo
wcompletamente
e b an
XHTIVIL
no
vlido,dedr,
escumpla
quecon los estndares
publicar de
del W3C.
antes
Es por eso que,
unapgina wInternet,
e bdebemos
realizar
en
su ofidal
comprobacin
sitio
en el
delW3C
{http://validator.w3.org),
existensi indicar
errores
que nos
y nos sugerir
corregirlos.
manera
de
la

Facilidadde edicin:
por ser un cdigo
ms estructurado -que, adems,
separa
los elementos del diseo
en hojas
de estilo-,es ms legible para editar.
^ C o m p a t i b i l i d a dcon estndares
w e b : es c o m p a t i b l e con los nuevos
estndaressugeridos por el W3C

{World

CSS

(Presentacin)

WideWeb

Consortium).
4

HTML incluyelos
contenidosy la forma
d e presentacin.
XHTML slo tratacon
contenidos, q u e se
representan segnlo
indicadoen CSS.

. 1 5

Enestaseccin
conoceremos
partes
dos
estructura
fundamentales
de la
delXHTML,
elementos
armado
esenciales
de una
deproceso
pgina
en el
web,Veamos
los sectores
bsicos
cualquier
pgina.de

or su estructura,
las pginas
web
pueden dividirse en dos partes:
head (cabecera)
y body
(cuerpo).
El head es el encargado determide
nar eltipode documento
sus
y propiedades, ademsde otras caractersticas
no
visibles para el usuario que visita la pgina.
Por su parte, el body es el responsable
de
darle a la pginalos elementos visibles,
es decir, eltexto,las imgenes,
las animaciones Flash yt o d o lo que el usuario
puede observar en pantalla.
. ..

Fi HEAD
Esta seccincontiene directivas
que el navegador necesita para leer el
documentocorrectamente. Entre estos
elementos,encontramos el ttulo
de la
pgina,las meta etiquetas, las funciones
JavaScript ylos enlaces de referencia.

El d o c u m e n t o
HTML le c o m u n i c a
al navegador c m o
d e b e mostrar
la
informacin q u e
contiene.

'.'iitmi
Podemos mencionar siete etiquetas
principalesen la cabecera, presentes
en
casi todas las pginas
web: DOCTYPE,
html, title,meta DESCRIPTION,
meta
KEYWORDS, linka hojas de estilo
en
cascada (CSS) y link
externo a funciones
JavaScript.Un encabezado bsico estara
conformadoc o m o1indica.
el Cdigo
En este ejemplo, observamos la definicin

CDIGO 1
<!DOCTYPE html

PUBLIC "-//W3C//DTD

XHTML

1.0

Strict//EN"
"http://www.w3.org/TR/xhtnill/DTD/xhtmll-strict.dtd">
<html>
<head>
<title>Tntulo

EL BODY

de l a P g i n a W e b < / t i t l e >

El elemento body, cuya apertura

de l a
es <body> ysu cierre </body>,
se
de 70
introduceluego del cierre de la etiqueta

<meta n a m e = " D E S C R I P T I O N " c o n t e n t = " D e s c r i p c i n mnima

Pgina

Web que debe c o n t e n e r p r e f e r e n t e m e n t e a l r e d e d o r

caracteres.">

</head>.

<meta name="KEYWORDS"c o n t e n t = " p a l a b r a s ,

claves,

identifican,

p ocoma">
r,

<link

a , l a , w e bs,e p a r a d a s ,

href="estilos.css"

<script

del tipo de d o c u m e n t o en la etiqueta

DOCTYPE. Aunque no obligatoria
es
y
puede seromitida,su falta puede dar lugar
a imperfecciones en la interpretacin
por
parte del navegador.
Acontinuacin,
la
pgina estcontenida entre las etiquetas
<html> y</html> c o m o apertura
cierre
y
de su cdigofuente.Luego, aparece la
apertura del encabezado a travs
de la
etiqueta <head>
el
y ttulo
que ser
visualizado en la barra de ttulo
del navegador,
definidoentre las etiquetas <title>
y
</title>. Le siguen la descripcin
sitio
del
y
las palabras clave que determinan su temtica, y despus,los enlaces a las referencias:
por un lado, a las hojas de estilo
(CSS),
y por elotro,a una fundn JavaScript

rel="stylesheet"

type="text/javascript"

que,

type="text/css"

src="script.js"x/script>

</head>

Leindica al navegador los

elementos que debe

incluir,
as c o m o

tambinla manera de hacerlo, es decir,

su organizacinen el espado de la pgina

/ > web. Luego del tag de cierre del contenido,
aparece la etiqueta </html>, que
corresponde al
finalde la pgina.

redusers.com

ETIQUETAS
ATRIBUTOS
Y

I
:s momento
abordar
de
profundamente
ms
lenguaje
HTML,
el
Entraremos
en peldaos
detalle
de
atributos,
dos
travs
las etiquetas
ay
que nos
permitirn
mostrar nuestro sitio de la forma en que deseamos.
I HTML esti n t e g r a d o por eleto contiene un valorque debe estar encementos que, en
conjunto,
forman
rrado entrecomillas.
Veamos el ejemplo del
la base desu estructura.
De
esta
Cdigo2. Siempre debemos recordar que
f manera, cuando definimos una
las etiquetas deben llevar una apertura
uny
etiqueta,estamos indicando que,
en
cierre, porque as lograremos
informar cul
funcin deella, se
represente algo,
que es el contenido que debe ser representado
puede ser visible al usuario
no.
o
-

a travsde las declaraciones que hacemos

en ellas. Cuando declaramos por completo la etiqueta, podemos observar, cuatro
interventores:la etiqueta propiamente dicha,
los atributos,los valores de atributos
los
ely
contenidoen cuestin,
3.el como
Cdigo
en

LAS ETIQUETAS
Para definir una etiqueta, d e b e m o s realizar una apertura y
un cierre. Entre ambos,
tendremosel contenido que
se adaptar
a las condiciones que ella disponga.
Por ejemplo, para subrayartexto,
un
utilizaramos lasiguiente lnea
de cdigo:

<u>Texto

<'VOCrCtL hXMl PUBLIC"-//V3C//tTD XHTUL

1.0
TtensltlonalZ/nT
< b m xmDS-"http://inr.w3.or5/1999/xhcal">
<head>
<keca htcp-equlv-'Xontent-Tviie" conMnc-"text/hci;
chai:set-utf-8"
<tlcle>DocuMnto
s i n ttlo</titie>
</head>

"http://w(
/>

</bas>
D r e a m w e a v e r muestra,
con diferentescolores,
las distintas partes
del cdigo.

Subrayaclo</u>

CODIGO 2
Existen 93 etiquetas estndar
que tienen
una representacin especfica,
lo que nos
facilita la realizacin
de
un d o c u m e n t o
si las utilizamos c o m o herramientas para
introducir la informacin
por mostrar.

LOS ATRIBUTOS
Los atributos son directivas que
nos permiten
definirvalores para
cada una delas etiquetas agregadas
en el cdigofuente.Son introducidos
en las etiquetas con
el
objeto de otorgar
algunas caractersticas
puntuales, c o m o
el alto, el ancho, un borde, etctera.
Un atributo puede definir desde
valores numricos,c o m o la altura
de un determinado bloque, hasta
colores yestilos de tipografas.
Todo
atribu-

<a

href="enlace"

el

enface">Aqu

re1="de

qu s e t r a t a r

el e n l a c e < / a >

CDIGO 3
<etiqueta

atributol="numrico"

atributo2="alfanumrico">

C o n t e n d o < / e t iq u e t a >

OBSOLETAS
Aunque podemos
utilizar
cualquiera de las etiquetasHTML,
disponibles en

en estecaso
recomendamos no emplear algunas en particular, ya que se consideran obsoletas

Entreellas, podemos mencionar applet,

basefont, ccnter, dir, font,
isindex, men, s, strike,

.141

redusers.com

AMWEAVER,
A continuacin, r e i
un nuevo docunieno en HTM
eamweaver
como
editor,'

PASOPASO
A
[,Archiwp j Edicin

Ver

Insertar

Nuevo,,,
Abrir,,
HTM

Examinar en Bridge.,.

FHariaa HTML
Eterr>ento de biblotecs

Abrir reciente

XSLT (fragmento)
XSLT (pgina completa)

A b r i r enrnarco...

ActlonScript

5 columna fija, centrada

I columna fija, centrada, ancabeiado y pit
I columna flotante, centrada
1 cokjmna flotante, centrada, encabezado

<No hay vista prevla>

2 columnas jas, barra iateral derecha

Z cc^mnas jas, barra lateral derecha, en
2 columnas fi)as, barra lateral Izquierda

Cerrar

2 columnas fijas, barra lateral

Hqulera,

2 columnas flotantes, barra lateral

Cerrar t o d o s

tPJavaScrpt

ASP VBScript

A5P.C#
NET

^ ASPN
. ET VB

Compartir mi pantalla

ConporwrtedeColdFuA

Guardar

sr

derech

2 columnas flotantes, barra lateral derechi

2 columnas notantes, barra lateral Inquiere

dQHTH.

2 columnas flotantes, barra lateral izqJercDocumento

3 columnas jas
3 columnas Fi)as, er^abezado y pie
3 columnas flotantes
3 columnas flotarles, ervabezado y pte

GENERACION DEL DOCUMENTO

T^

de documento:

l.OTrartsItiand

IJHTM

Adjuntar archtwCSSi
r :Actf mCcn'eit Ed-tma
Ampliar inf onracion sobre BUSH

'Continuar c o nn u e s t r oa p r e n d i z a j e

PASOl

en una gran variedad de

formatos, m
ali s m
t ioe m p o

[Crear nuevo], delcuadro debienvenida

Dreamweaverbrinda la
posibilidad d ecrear
documentos

que

Paara crear und o c u m e n t o HTML,

e i n t r o d u c i r n o s e n la prctica de HTML,A d o b e

permiteabrirt o dtoi p o dearchivos basados

texto,
entales

c o m o ASP, PHP, JavaScript yhojas de

estilo

aunque n o hayansido creados

utilizando

en cascada

este
programa.

Adems, p o d e m o sabrir editar

y
archivos de cdigo
fuente Visual Basic,

Java y C#.

(CSS),

p o d e m o s hacerclic en la opcin

[HTML] q u e aparece en la seccin

del
programa.

Otra alternativa, si yat e n e m o s el

program
abierto,
a
es dirigirnos al men [Archivo/Nuevo...].

PASO
I 02

Desde el cuadro q u e sepresenta,

p o d e m o s escogerentre una
gran

cantidad deformatos y, alcrear un

d o c u m e n t o nuevo,optar por
alguno

de los diseos de

pgina predefinidos o
t o m a r udno c u m e n t obasado

en

unaplantillaexistente. En este caso,

dentro

d e la pestaa

[Pgina e n blanco],elegimos [HTML] en el

recuadro

[Tipo d e pgina]. En la seccin [Diseo]seleccionamos

[Ninguno] y,luego,presionamos el botn [Crear].

Archivo

redusers.com

Edicin

Ver Insertar

' "^o^QO Dmdr | Diseo

U

Modificar

Ccgoenvivo

formato

Comandos

Stbo

Ventana

Vista en vivo Inspecdonar fjjjl^ ^^,

Drecon:

<!DOCTypEh t m lP U B L I C '-/,'U3C//DTTi :arn;L

1.0

it io n a l , / / E N "

Tr: a n s

" h t t p : //TJW.w3.orgy'TRy'xhtiiilly'DTD/>:hciiili-CEan3icionai.dtd">
< h t ] B x i i i l i i 3 = " h t t p : / / w w . OT3

o r g y.' 1 9 9 9 / x h t i i i l " >

<head>
Cueca h c c p - e q u i v = " C o n c e n t . - T y pceo" n c e n c = " c e > : c / h t a l ;
char3ec=ut-8"

/>

< t i t i o^^^l^S^^^HpBSBMyc
t i t i e> /

</head>

^^^^ </bodY>
</htJ>

INCLUIR TITULO

HTML

Q W ArchivoVMEhicitv
dicin Modicar Fonmto Commios Sitio Ventana Ayuda
\

Drvkfc
j

Dsiea

StasoVV
I O Inspecoorat

<>DOCTYPE h t a l PUBLIC

/UC/,-DTD .-aiTIlL

^ TfaJo;^eisWebOs^

l.G

"iitcp; //in.n.aS. cg/TR/xhtfflll/LiTlJ.'Xhuall-tiQ.'-.Sit-.ioni,

<htJl xttln3-"hti:i://iJin(.u3.0Eg/ly99/)thtial">
<head>
o i e c a htcp-eciuw-"Coiicent-Type" c o n t e n f ' c e x t / h c j i l ;
charset-utt-S"
/>
<title>D3eEa BebD e s i g i K / c i c l o
'"'authoi:" coiicenC"*'03er3">
'"copycighc" conceiic-"tcopy; 2010 U3eES
CoEp,">
'"kff^ots"
CDncenc-"Beb,de3gn,diseo,3lclo">
"dece" concenc-"210-?-20T08:!37+00:00":^

0^

Edicin

Archivo

Cago

ver

Insertar

Modificar

htJJl

Comandos

F4

C&ioenvivo

<!DOCTYPE

Formato

PUBLIC "-//W3C//DTt'

Sitio

META TAGS

ventana

staenvivo
Z- conMnt--2010-07-3CrTfle

XHTIIL

Inspecdonar

5i.

i.O

Transitionaiy/EH"
//TJWW.wS.org/TR/xhUQll/DTD./xhutill-trans

"http:

t
r

<htiiii

t i nal.dtd">

u
Ptub
m

xiiiin3="http: //wwu.u3.org/1999/xhtial">

<head>
<meta h t t p - e c i u i v = " C o n t e n t - T y p e " c o n t : e n t = " c e x t / h t i i l ;
charsec=ucf-6"
<citle>Docnimeiito

/>
sin

titulo</title>

</head>
<body:^

</bodY>
</html>

GUARDAR EL TRABAJO

PASO 103

Aparece enpantallanuestro
d o c u m e n t obajo el
nombre
"Untitled-1". Podemos
elegir
cmo lovisualizaremos desde los b o t o n e s [Cdigo],
[Dividir]
o[Diseo], segn
loq u e d e s e e m o s ver.
En este caso,recurriremos
a vista
dividida
la
para
apreciar ms fcilmente los c a m b i o s q u e h a g a m o s
durante eltrabajo.
Al c o m e n z a r a preparar el n u e v o
d o c u m e n t o , revisamos
elcdigo
de laizquierda hasta
identificar
la etiqueta <title>. Para colocar el ttulo
sitio,
del
escribimos,entre las etiquetas <title>
y</title>,
el t e x t o q u e figurar
en laventana del navegador.
En este caso,escribimos"Users
W Design".
eb

PASO 104

PASO 105esenciales para

Tambin p o d e m o s crear
otrasetiquetas
elheader, c o m o las

descripcin,autor, etctera.

ingresamos el
siguientecdigo antes del tag

PASO 106

de

Eneste caso,

de
cierre </head>:

Por ltimo, almacenamos delo c u m e n t o

en nuestro disco atravs del men
[Archivo/Guardar como...].

En el cuadro que aparece, colocamos n oelm b r e

le daremos
ypresionamos
elbotn [Guardar].

que

RESUMEN
Hasta aqu, liemos establecido los aspectos iniciales
de
configuracin d enuestro d o c u m e n t o HTIVIL.
A
medida
avancemos con nuestro aprendizaje, seremos capaces
de
incorporar textos, imgenes
y
otros elementos

ret

Enestas
pginas,
realizaremos
sntesis
una
de los principalesyelementos
su
HTML de
aplicacin
losensitios web. Ms adelante,
cuando comencemos
los
trabajar,
utilizaremos
a
sabremos ms detalles sobre ellos.

,
nlo que respecta
al
lenguaje
r' :> _ HTML, se
considera
los
a elementos
c o m o las indicaciones
partes
o
que el navegador interpretar
ms adelante. Durante
la programacin
de un sitio w e b , encontraremos varios
tipos deelementos que nos permitirn
modelarlo anuestro gusto.

Es muy interesantediferentes
observar
cmo maneras
pueden de
hacer
cdigo
introducir
variar snel
tamao
en cuanto a lneas, del
sin sitio
modificar
esttica
web. Siempre
la
es aconsejable que nuestro
sitiow e b tengacdigo
validado
su
sea ste
liviano,
que
por elpara
W3C
deinterpretacin
yacelerar
los
la
navegadores. En este sentido, ms adelante veremos que, paraesttica,
determinar cuestiones dey forma
es conveniente utilizar CSS en vez de i n d u i r todas las Indicadones dentro del d o c u m e n t o

HMl.

UN REPASO POR LOS

PRINCIPALES ELEMENTOS
Si bien hay una gran cantidad
elementos,

de

a continuacin
citaremos

algunos delos ms utilizados:

<p>: permite dividir un t e x t o en prrafos. Sipreferimos realizar un salto

de lnea
en vez de comenzar un nuevo prrafo,
recurrimosal elemento <br>.
<ul>: corresponde una
a lista
no
numerada. En
ella, cada elemento debe
estar identificado con
etiqueta
la <li>.
<ol>: en este caso, corresponde
a
una lista n u m e r a d a
y tambin
se
acompaa acada elemento
delista
la
con laetiqueta
<li>.
<h1>,<h2>,.. .,<h6>:
identifican
los e n c a b e z a d o s del sitio w e b .

Su tamao eimportancia vara;

1 esel mayor y 6 es
el menor.

<a>: esta etiqueta indica

referencia
la
a algn recurso, y
es acompaada
por el atributo "href",
que sirve para
definir la direccindel vnculo.

diagonal

Podemosdistinguirtres tipos

dtee x t o

una frase aparezca resaltada

ingresamos

en
donde

losiguiente:

negrita,
en

<p>Aquuna lneade texto

CLASIFICACIN
ELEMENTOS:
DE
LLENOS,
VACIOS Y CON
ARGUMENTOS
tos en ellenguaje HTML:

(/). Por
ejemplo, si queremos

agregar una lnea

<b>con una parteresaltada

en negrita</b></p>

de
elemen-

Llenos: estos elementos cuentan

con
una apertura yun cierre.
cierre
El
idnes
tico a laapertura pero tiene una barra

M i
V '

13

<e

redusers.coin

Vacos: eneste
caso, los elementos
no
requieren d eun cierre.
Un
ejemplo
de
este t i p o es la
etiqueta <br>, que da
la
posibilidad de
realizar un salto
delnea.
C o n a r g u m e n t o s : aqu
se encuentran
los elementos que poseen atributos
definidos;por ejemplo:

<body>

<tablew i d t h = " 7 0 0 p x " > U n a t a b l a

d e 7 0 0 pxeles

d ea n c h o < / t a b l e >

CLASIFJCACIN
ELEMENTOS:
DE
EN LINEA YDE BLOQUE
El lenguaje HTMLclasifica los elementos
en dos grandes grupos: en lnea (iniine)
y de b l o q u e (block).
La
diferencia entre
ambos radica en la posicin
que abarcan
sobre el e s p a c i odisponible en
la pgina.
Los elementos de bloque
siempre c o mienzan en una lnea nueva,
m
deo d o
que ocupan t o d o el espacio disponible
de ella, hasta final.
el Por su parte,
los
elementos en lnea
ocupan nicamente
el espacio necesario para su visualizacin.
Otra diferencia entre ambos grupos
es su contenido: mientras que los
de
b l o q u e admiten en su
interior otros elementos deb l o q u e en
y lnea,
los
elementos en lnea
no admiten
a los
de bloque en su contenido. Esto
significa
que un elemento
dbel o q u e slo
puede
aparecer contenido en
otro
elemento
de bloque, pero uno en lnea
puede
aparecer en otros en lnea
as c o m o
tambin enlos de
bloque,
i

Los e l e m e n t o s permiten
ver fcilmente
las partes
del cdigo

y mejoran

laposterior visualizacin

IL
TIPO DE ELEMENTO

ELEMENTO
a, abbr, acronym, b, basefont, bdo, big, br, cite,

Elementos
en
lnea

code, dfn, e m , font, i, i m g , input, kbd, label,s, q,

samp, select, small, span, strike, strong, sub, sup,

textarea,tt,u,var

address, blockquote, center, d d , dt, dir, div, di,

Elementos
en bloque

fieidset,f o frame-set,
r mh2,
h, 1 ,h3, h4, hS, h6, hr,

isindex,
li,men,
noframes, nos-cript,
pre, ol,

table,tbody,
tfoot,
td,t h , thead, tr, ul.
Elementos
que pueden ser considerados
en lnea
o de bloque
caso
el
segn

button,
del, iframe, ins, map, object, script

losnean
vegadores.

redusers.com

:n este
apartado abordaremos de forma detallada los atributos,
descubriremos qu
podemos
nos
cmo
permiten
incluirlosyrealizar
en laspginas
de nuestra sitio web,

o r n o yah e m o s visto,
cada d o c u m e n t o HTML
es e s t r u c t u r a d o p o r los
e l e m e n t o s , q u e le
indican
al n a v e g a d o r d e qu
manera
debera verse el
sitio w e b q u e
est a b r i e n d o . C u a n d o
se
precisa
ms informacin e n los
elementos,
e n t r a n e nj u e g o los
denominados
a t r i b u t o s ,q u e aaden
datos
extra para seri n t e r p r e t a d o s
por los navegadores.

A COMBINACION
QUETASY ATRIBUTOS
S PERMITE LOGRAR
DISTINTAS VISUALiZACIONES

DEU NS I T I O

REPASO
Los atributos se
incluyen siempre
en lasetiquetas de
apertura
d e los
e l e m e n t o s , y la
f o r m a di net r o d u c i r l o s
es la siguiente:
<img s r c = " 1 o g o . j p g "
alt="Logo"></img>

C o m o p o d e m o s observar
e neel
jemplo
anterior, lop r i m e r o q u e aparece
en el
a t r i b u t o es su
n o m b r e , s e g u i d o por
el
carcterigual (=) y,
por ltimo, valor
el
del a t r i b u t o i n c l u i d o entre comillas.
En
este caso, h e m o s d e f i n i d o
una
i m a g e n con la
etiqueta [img]
y, en sup r o p i e d a d [ser], especificamos
el n o m b r e del archivo
di m
e agen.
La combinacinentre las
distintas
etiquetas ylos diferentes atributos
nos abre u ngran abanico
de
posibilidades en
cuanto
a las
opciones
d e visualizacin d e sitio.
un
As, p o d e m o s m o d i f i c a r caractersticas
visuales r e c u r r i e n d o exclusivamente
al cdigof u e n t e , sin q u e
sea
necesaria
la inclusin d e pesadas imgenes
q u e haranretrasar la
carga
d e la pgina en elnavegador.

A este g r u p o
lo d e n o m i n a

d e atributos tambin
se
i18n, q u e es laabreviatura

de lapalabra internacionalizacin,

utilizando el nmero d eletras

q u e tiene
el trmino entre la iinicial
y la nfinal.

redusers.com

.19

LOSCUATRO
GRUPOS
DE ATRIBUTOS

DE LOSTAGS

Si bien cadaetiqueta HTML

cuenta
con susposibles atributos definidos,
ya
p o d e m o s distinguir algunos
q u e son
c o m u n e s en casi
todas ellas.
Es
por
esto q u e HTMLdivide los atributos
en cuatro grupos diferenciados
por
sus funcionalidades: bsicos,
para
internacionalizacin, deventos
e
y d efoco. Apartir de
ahora,
conoceremos en
detalle los
correspondientes
acada
grupo.

LOSJTRIBUTOS
MAS FRECUENTES:

BASICOS

Estosatributos son los que se presentan

en el cdigofuente de los documentos
HTMLcon mayor frecuencia,
la yrazn
es bien clara: se utilizan en la mayora
de las etiquetas existentes.
En el grupo de los atributos bsicos
podemos encontrar los siguientes:
Id: identifica de
manera nica
a cada elemento dentro de
documento HTML

Class: determina la clase

que afectaral elemento.

un
CSS

Style:determina de
manera directa
las
propiedades CSS
que afectarn
al elemento.

En general, un tagtagpuede
e,otro
incluso,
contener
Sinpartes
embargo,
HTML.
de documentos
algunos tags no puedenpueden
contener
slo
contener
a otrosdeterminados
o
tags. Aunque hay
excepdones, los elementos de bloque
elementos
pueden
de contener
bloque,
lnea
y
elementos de
aunque sucede
nolo m i s m o conque
los no
elementos
lnea,
pueden contener
de
elementos de bloque.

a u ni d i o m a especfico.
Se los emplea en pginas
q u e muestran su
contenido
en
varios
o eaquellas
n
que
su idiomas
q u i e r e n especificar e n q ui di o m a
est sud o c u m e n t o .
En este g r u p o e n c o n t r a m o s
los siguientes tres a t r i b u t o s :

Title: aade u n ttulo eal

lemento.
Esto es d eutilidad para mejorar
la
accesibilidad del d o c u m e n t o ,
ya q u e
n o m b r e esvisualizado situar
al
el cursor sobre el
elemento.
Cabe aclarar q u e los atributos
[id]
y [class] p u e d e n c o n t e n e r letras,
nmeros yg u i o n e s m e d i o s
bajos
y
c o m o valor, pero npou e d e n e m p e z a r
c o n nmeros.C o m o recomendacin,
n o se deberan
utilizar
letras c o m o
la , ya q u e podran nfo
uncionar
en algunos navegadores.

L a n g : indica

LOSATRIBUTOS DE IDIOMA;
PARA INTERNACIONALIZACION
Son utilizados para definir
elementos insertados

en

adaptar
y

el
idioma

del
elemento.

X m h L a n g :indica
iel
dioma
del e l e m e n t o , a u n q u e
e neste
caso tiene ms
prioridad q u e
el
a t r i b u t o anterior;
es
decir, prevalece
este a t r i b u t o por sobre Lang.

los

del
ocumento

Dir:indica
la direccin texto.
del
Se loutiliza altrabajar c o n idiomas
q u e n o seescriben
dizquierda
e
a derecha.

LOSAIRIBUTOS DINAMICOS:
DE EVENTOS

Onmouseup:

seejecuta

la accin c u a n d o

sedetecta

Encontramos d e n t r o

q u e el botn fue soltado.

deeste

'^rupo m u c h o satributos,d e b i d o
i. que son los encargados
los e f e c t o s

O n m o u s e o v e r : establece

deexhibir

y las a n i m a c i o n e s

la accin c u a n d o

de

las pginas que incluyen lenguaje

JavaScript. Veamos,

sedetecta

el cursor se sita sobre

que

elelemento.

O n m o u s e m o v e : establece

a continuacin,

accin c u a n d o

cules son estos atributos:

la

sed e t e c t a que

cursor seencuentra

el

e nm o v i m i e n t o

sobre el elemento.
Onclick: establece

que se va a realizar c u a n d o
haga unclic sobre

que se realiza c u a n d o

c:;u a n d o

se hace

un

el

la

accin

ele l e m e n t o .

seejecuta

la

accin

se presiona una tecla del teclado.

Onkeydown:
cuando

seejecuta

sedetecta

seejecuta

elcursor abandona

Onkeypress:

la accin

ele l e m e n t o .

Onmousedown:
accin c u a n d o

cuando

se

ele l e m e n t o .

O n d b i c l i c k : establece
d o b l e clic sobre

Onmouseout:

la accin

seejecuta

sedetecta q u e

la

accin

estpulsada

la tecla del teclado.

la
botn

Onkeyup:

del mouse presionado.

cuando

seejecuta

la

accin

latecla del teclado fue soltada.

,,;nange)

CISCO
Support

Product & Servcss

Arcnitectures

Solutions

BorderlessNetvvofks
C o!iabofaron
Data CenterVirtualization
Business Video
Solutions

Training &Events

Partner Central

IncJustries
Education
Government
MediaandEnterlainment
(Cisco Eos)
> All indusnes

For

Enerpnse
Small Business
Serv'ceProvider
Home
.AJ Solutions

Latest Nev;s

FollowUs

< > Cisco

introduces
f.!o!;ile
Coilaboration
Business T3Dle-29
2010 Jun

i fe

S e e How V i d e o
Boosts C o m m u n

,1

T r y Show
a n d Share
free for 30 davs.

N9W partnrs and

( ^ ''
locatioris woridwtdo'

About CISCO

InvestorReiaticns
Corporate Social Responsibity
ErrvronmentalSustaina&ity
Human NetwerR
CarerOpportunities

News & Alerts

r4ews@Cisco
Sgcurity'.Advisortes
Newsleters
F t e i d Notices
Bio5<

i-ii-ri
:;tl(_:t
h:i

Communittes
Collaooratin

OsveloperNetwork
LearningNetwork
SuppoflNePrc:
Support

Otfers
SpeciaiOffers
FinancingOptions
Contacts
Contad Cisco
Fin 3 Resellar

Documentatioii

1 t S 2 4 e i C t\&CB Syslsm
IR?.Ajnghtt

Los atributos

r^s^r-.-^

d eeventos son muy importantes para las aplicaciones w e b actuales. En

www.cisco.com
p o d e m o s verlos en accin.

mtiu

Ei g r u p o deatributos
de
everttos sio
es utilizado cuando el
d o c u m e n t o HTML
incorpora ellenguaje JavaScript,
ya
que
a travs deellos, es
posible lograr q u e
el
sitio w e b responda ante
la interaccin
del
usuario. Porejemplo, p o d e m o s verlos
en
accin ydescubrir su potencial
visitar
al
sitios enlos que se
emplean mens
de
navegacin JavaScript,
los cuales despliegan sulista de
elementos cuando
nos
situamos sobre cada u n o
de
los botones.

LOSATRIBUIOS DE
SELECCION: DE FOCO

PINCELESFILTROS
Y
En HTML,
los eventos son acciones con
que los
sirven
scripts
HTIVIL
paraque
asociar
contiene
tags el
documento.
Un script es un programamediante
del lado del
los eventos,
diente
y
cuando el usuario
realiza una determinada
(como
acdnpasar
porelejemplo),
mouse
botn,sobre
se realiza
un una
llamada al script, ser,
que
podra
(como
por
ejecuta
funcin
ejemplo,
su la carga de una imagen).
La sintaxis para definir un evento es similar
de atributos
a la que
definicin
y selosemplea en la
eventos disponibles dependen del tag utilizado en cada caso.

JUNTO A JAVASCRIPT,

LOS ATRIBUTOS DE
EVENTO AYUDAN A

El f o c o aparecedurante
la interaccin
del visitante ensitio.
ei Estos
atributos
nos p e r m i t e n asignar acciones
que
se
realizarn encada caso. C u a n d o
nos
referimos adetectar
perder
o
fo
elc o ,
estamos h a b l a n d o
de que
usuario
el
ha seleccionado
o
ha
deseleccionado
el elemento. Por
e j e m p l o , tsi
enemos
un f o r m u l a r i o w e b , diramos
que
c u a n d o elusuario estescribiendo
en u n o d e susc a m p o s , este e l e m e n t o
y, p o r ltimo.Opera
interpreta
la
t i e n e elf o c o . Cuando
el
usuario
a travs d e la combinacin
contina hacia o t r o c a m p o ,
el
<Shift + E s o . Esto
quiere decir
e l e m e n t o anterior
ha
perdido
foco,
el
q u e el acceso a
cada p a r te
de
una
ya q u e lotiene ele l e m e n t o
pgina u t i l i z a n d o las
teclas d e p e n d e ,
actual q u e estutilizando.
exclusivamente, del n a v e g a d o r
Veamos, a continuacin, cules
q u e t e n g a elusuario.
aElt r i b u t o
son los atributos dfeo c o :
t a b l n d e x ,por su
parte, e x h i b e

DAR INTERACCIN A
os DOCUMENTOS HTML

su mayor f u n c i o n a l i d a d c u a n d o
estamos m a n e j a n d o , p o r e j e m p l o ,
los formularios d leo g i n
o
registro.
de
Cuando u nusuario
se
enfrenta
a
a u nd e t e r m i n a d o e l e m e n t o .
sus
T a b l n d e x : establece
oelr d e n
d e la f o r m u l a r i o en el q udee b e ingresar
utilizar
al
tabulacin del
documento,
y valor
su datos e ndiferentes c a m p o s ,
la tecla <Tab> para m o v e r s e e n t r e ellos,
est c o m p r e n d i d o entre O
32.767.
y
lo har en elo r d e n i n d i c a d o m e d i a n t e
O n F o c u s : se
ejecuta
la accin
cuaneste atributo. Parad e c i r l o
dotra
e
d o sed e t e c t a el
f o c o sobre
eel
lemena t r i b u t ot a b l n d e x
to, loq u e significa q u e acta
cuando
el manera, aldefinir el
de cada e l e m e n t o , estaremos d e f i n i e n e l e m e n t o esseleccionado.
d o lasecuencia
e n la q u e
usuario
el
O n B l u r : se
ejecuta
la accin
si nrecurre
o
cuando sed e t e c t a q u e
eel
lemento
haentrar e ncada c a m p o
al mouse, esdecir,
si
pasa
de un
perdido elfoco; es
decir, acta
cuando
c a m p o ao t r o p u l s a n d o <Tab>.
4
el elemento se had e s e l e c c i o n a d o .

A c c e s s K e y : establece
una tecla d e acceso rpido

El atributo a c c e s s K e y asigna teclas

d e acceso rpido los
a elementos
de
un sitio w e b , lo
cual t i e n e
upn
roblema
implcito: losnavegadores. Este
inconveniente consiste
en
que, bsii e n HTML
define quteclas
se
d e b e n presionar
para acceder ale l e m e n t o
e ncuestin,
Internet Explorer interpreta
alacceso
rpido a travs de la
tecla <Alt>,
mientras q u eMozilla Firefox interpreta
esta tecla a travs
de la combinacin
<Alt +Shift>, el
navegador Safari
realiza la accin a travs
d etecla
la
<Ctrl>

un

redusers.com

tIUESTRAS

PRIMER

Wirinft i iontrnuacin, cmo

W $ M
cdigo en
Dreamweaver
os cambios que se
^^Gcin de diseo

"^AS- "'ASA
Archivo

CdKto

Drvid

Edicin

Vtt

Insertsi
:

Comsndoi
Foi

Modificar

Stio Ventana

Ayuda

Disefto

Archivo

Ctrl*Mayus*0

Ajuttartado

Dividir

Dividir cdigo

i y

Dividir verbclmtote

'

Alternar vitai
Actualizar vista dedieo

CU

Diseo

Direccin:

Diefto
Cdigo ydiilo

Ver

Insertar

Modificar

Formato

Comandos

Sitio

Acercar
Cdigo

Cdigo
: V

Edicion

CtriAlt*MayitO

Ajutr ancho

ESCRIBIR ETIQUETAS

"^'i'DOCTYPFhc
Transicionai/
"hztp:

//wm.v.

<hcml xmlns"
<head>
<meta h t t p - e c
charset=utf-6
<title>Docume
</head>
<bodv5|
</body>
</html>

Ventana

Ayuda

CtrU-t-

Alejar

Ctrl+-

Aumentar

y reducir
CtrkA!t*0
Ctrl+Mays+O

Ajustartodo

Ctrl+Alt+Mays+0

Ajustar ancho
Cdigo
Dividir cdigo
Diseo
Cdigo

y diseo

Dividirverticalmente
Vista Diseo

a la izquieraa

Alternarvistas

i
- j ^ n q u e yacreamos
m
y o d i f i c a m o s algunas
' ' e t i q u e t a s enDreamweaver para configurar

el ttulo de la pgina
agregar
y
tags descriptivos,
an n o hemos g e n e r a d o modificaciones
en el c o n t e n i d o d e
la pgina, ya q u e
no
incorporamostextos ni imgenes.
^

Para escribir etiquetas

en
Dreamweaver desde el cdigo,
seleccionamos en
la
barra de
vistas
de la interfaz la q u e
dice [Dividir].
Otra forma
hacerlo
de
es ir al men [Ver]
y all
elegir [Cdigo
y diseo].

PASOl

PASO 102

Luego, para q u e no se
corten
lneas d e cdigo

las

y el
trabajo resulte

ms cmodo, en

el
mismo men

hacemos clic en [Dividir vertcalmente], m

d eo d o

que la divisin

d e lapantalla horizontal.
sea

PASO 103

y comenzamos
cualquiera

Dentro

d e lae t i q u e t a [ b o d y ] ,

presionamos

a
escribir

d e las
existentes.

la
tecla < E n t e r >

pla
r i m e r a e t i q u e t a , qpuu e d e ser
En
este caso, ser
<div>.

redusers.com

|<^U%>DotmeiitQ

|</ha>

ETAS
HTML

thflvo

CAU^A

^DM*_^:ea*te

APERTURAY CIERRE

^ftf

&Utffbr

MdtfA^M

FwTVtfto

OMowiw>
r-4. i iwpettan
4 1 . ^ 0

: ttean:

tiYici</ciUf

lisoa>

04|

s i n

Cdigo ^Dividir

Covtwk^^

SKM

ifctK
tojwmt(tdte

'-M*:

' Dbste '^'"m^tin^^"^^^''"

Ws^-^^']^^

<head>
<title>Docuaento
</heacl>

^Esta

s ti int u l c K / C i t l O
;

; i

en s
u e s t cpar i m e r a etijiet^C/ilv^^

</hi3kl>
PRIMER ETIQUETA

I
CIERRE FINAL

PASOl

Cuando t e r m i n e m o s de escribir
Las etiquetas llevan una apertura
y un cierre, lo q u e significa que,
J
el c o n t e n i d o de la etiqueta,
cuando abrimos una etiqueta,
bastarcon escribir [</] para
debemos cerrarla. Para
cerrar <div>, d e b e m o s escribir </div>.
que Dreamweaver
cierre la etiqueta automticamente
Este cierre debe aparecer
al final del c o n t e n i d o de la etiqueta;
con su utilidad de a u t o c o m p l e t a d o . Luego, p o d r e m o s
es decir, el contenido tiene que ir entre la apertura
el cierre.
y ver el c o n t e n i d o que hayamos
incorporado en la pgina.

PASOl

Dreamweavernos da

PASO 105 la posibilidad deutilizar

un gestor de etiquetas. Esto

nos facilita la escritura
nos
y da ms rapidez a
hora de armar un
sitio. Este
gestoraparece
cuando
colocamos el signo < para abrir una e t i q u e t a .
Seleccionamosla etiqueta en el gestor,
ayudados por el mouse
loso cursores de
direccin,
y
una vez h e c h o esto, presionamos
la tecla < E n t e r >
escribimos
y
el signo >.

la

RESUMEN
Con este pasoa paso h e m o s visto cmo
escribiretiquetas
en el cdigode Dreamweaver.
En los prximos fascculos
conoceremoslas distintas etiquetas
que p o d e m o s
incorporara nuestrosdocumentos,
laforma
en
y la
que p o d e m o s utilizar
ymodificar
cada
una de ellas.
Con cada clase seremos
ms profesionales!

|06

Vttittti^