7/21/2019 Diseo Web con HTML y CSS.pdf
1/196
7/21/2019 Diseo Web con HTML y CSS.pdf
2/196
CONCTESE CON LOS MEJORESLIBROS DE COMPUTACIN
>>INTERNET / HOME>>352 PGINAS>>ISBN 978-987-1773-18-3
>>INTERNET / HOME>>352 PGINAS>>ISBN 978-987-1347-96-4
>>DESARROLLO>>320 PGINAS>>ISBN 978-987-1773-79-4
>>PHP / INTERNET>>368 PGINAS>>ISBN 978-987-663-039-9
> INTERNET> 352 PGIN> SBN 78-
INTERNET>> 352 PGIN>> SBN 978-
> DESARROL> 320 PGIN> ISBN 978-
> PHP / INTE>> 368 PGIN>> ISBN 978-
GUA PRCTICAPARA LA CREACINDE BLOGSPROFESIONALES
CREACIN,EXPANSIN YMONETIZACIN DEBLOGS ATRACTIVOS
ENTIENDAEL CAMBIO,APROVECHE SUPOTENCIAL
APRENDA A CREARSITIOS DINMICOSCON EL LENGUAJEMS ROBUSTO
MS INFORMACIN / CONTCTENOS
mailto:[email protected]://usershop.redusers.com/7/21/2019 Diseo Web con HTML y CSS.pdf
3/196
Diseo Web con
HTML&CSS
Creacin de sitios atractivosy profesionales
7/21/2019 Diseo Web con HTML y CSS.pdf
4/196
TTULO:Diseo web con HTML y CSS
COLECCIN:Desde Cero
FORMATO:15 x 19 cm
PGINAS:192
Diseo web con HTML y CSS / coordinado por Gustavo Carballeiro. -1a ed. - Buenos Aires : Fox Andina; Dalaga, 2012.
v. 26, 192 p. ; 19x15 cm. - (Desde cero)
ISBN 978-987-1857-66-1
1. Informtica. I. Carballeiro, Gustavo, coord.
CDD 005.3
Copyright MMXII. Es una publicacin de Fox Andina en coedicin con DALAGA S.A.
Hecho el depsito que marca la ley 11.723. Todos los derechos reservados. Esta pu-
blicacin no puede ser reproducida ni en todo ni en parte, por ningn medio actual o
futuro sin el permiso previo y por escrito de Fox Andina S.A. Su infraccin est penada por
las leyes 11.723 y 25.446. La editorial no asume responsabilidad alguna por cualquier
consecuencia derivada de la fabricacin, funcionamiento y/o utilizacin de los servicios y
productos que se describen y/o analizan. Todas las marcas mencionadas en este libro son
propiedad exclusiva de sus respectivos dueos. Impreso en Argentina. Libro de edicin
argentina. Primera impresin realizada en Sevagraf, Costa Rica 5226, Grand Bourg,
Malvinas Argentinas, Pcia. de Buenos Aires en VIII, de MMXII.
ISBN 978-987-1857-66-1
7/21/2019 Diseo Web con HTML y CSS.pdf
5/196
Prlo
Prlogo
al contenido
A medida que Internet creci, los usuarios se fueron
convirtiendo en expertos navegantes que comenza-
ron a demandar cada vez una mayor cantidad de so-
luciones basadas en la Web.
Estos requerimientos de los internautas generaron
oportunidades de trabajo que fueron aprovechadas,
en un comienzo, solo por profesionales con estu-
dios relacionados con la programacin. Sin embar-
go, cuando la apariencia de los sitios cobr casi tan-
ta importancia como su funcionalidad, esos tcnicos
se quedaron sin respuestas para dar a los clientes, y
entonces recurrieron a los diseadores grcos.
Las herramientas de desarrollo y de diseo crecieron
hasta permitir la creacin de sitios con amplias fun-
cionalidades, y con aspecto sobresaliente y llamativo
para los navegantes.
En este nuevo mundo, podremos crecer profesion
mente sin realizar ms inversin que la de nuest
capital intelectual. Para eso, deberemos adquirir l
conocimientos tcnicos que se convertirn en un n
gocio rentable cuando les sumemos una cuota
nuestra propia creatividad y buenas ideas.
A pesar de esta evolucin, sin dudas, la base en to
diseo web hace referencia al conocimiento y man
jo de HTML. En este sentido, esta obra permite a
quirir todos esos conocimientos, ya que propone
aprendizaje guiado a travs de los distintos conce
tos y prcticas que debemos manejar para convert
nos en expertos en HTML.
Comencemos, entonces, el fascinante recorrido h
cia el xito en el desarrollo de sitios profesionale
suerte en el camino.
7/21/2019 Diseo Web con HTML y CSS.pdf
6/196
El libro de un vistazo
Esta obra rene todos los conocimientos tericos y prcticos necesarios para apoyar la tarea de creacin de si-
tios web. Revisaremos en profundidad el uso y el potencial de HTML y CSS, aprendiendo su manejo en diver-
sas situaciones prcticas.
CAPTULO 1PRIMEROS PASOS
Aqu repasaremos las caractersticas principales del
diseo web, conoceremos su historia y evolucin, as
como tambin, la estructura bsica de un sitio y al-
gunos consejos que debemos tener en cuenta para
que nuestras creaciones sean exitosas.
CAPTULO 2DEL DISEO AL HTML
Este captulo nos acompaar a travs de la imple-
mentacin de la estructura HTML que necesitamos
para plasmar una idea de diseo. Conoceremos las
herramientas que intervienen en este proceso y crea-
remos nuestro primer documento HTML.
CAPTULO 3ESTRUCTURA DEL SITIO
Esta seccin nos introducir en los conceptos bsi-
cos y avanzados relacionados con la estructura de
un sitio web. Revisaremos las tendencias en diseo
web, incorporaremos bordes y armaremos la estruc-
tura de un sitio.
CAPTULO 4TEXTOS
En esta etapa profundizaremos en los conceptos re-
lacionados con la incorporacin de textos en la es-
tructura de un sitio web. Aprenderemos a crear t-
tulos, y nos familiarizaremos con los prrafos y el
marcado bsico. Tambin daremos los primeros pa-
sos en la aplicacin de estilos CSS.
CAPTULO 5IMAGENEl uso de imgenes es fundamental para lograr que
un sitio web sea atractivo. En este captulo conocere-
mos los detalles necesarios para trabajar con las pro-
piedades de imagen, realizar mapas de imgenes y
optimizarlas para usar en la Web.
Preliminares
4
7/21/2019 Diseo Web con HTML y CSS.pdf
7/196
CAPTULO 7
LISTASEn este captulo podremos conocer y aprender a ulizar las listas, veremos ejemplos de uso y aprend
remos a generarlas. Conoceremos el procedimien
adecuado para personalizar listas con CSS y crear
mos mens de navegacin.
CAPTULO 8FORMULARIOSLos formularios son importantes para establec
contacto con nuestros visitantes. Por eso, en este c
ptulo conoceremos los detalles en torno a su cre
cin y uso. Adems, nos dedicaremos a crear un fo
mulario completo utilizando el lenguaje PHP.
CAPTULO 6
ENLACESLos enlaces sern analizados en detalle a lo largo deeste captulo. Conoceremos su denicin y clasica-
cin, as como tambin aprenderemos a crear enla-
ces dentro de la herramienta que usamos para dise-
ar el sitio web.
El libro de un vista
7/21/2019 Diseo Web con HTML y CSS.pdf
8/196
6
Prlogo al contenido 003
El libro de un vistazo 004Introduccin 010
CAPTULO 1PRIMEROS PASOS 011
El diseador web 012
Las herramientas de trabajo 012
Las habilidades del diseador 013
Tareas del diseador 013
Evolucin del diseo web 014
Un recorrido por la
historia del diseo web 014
Primeros pasos 015
Creacin del Word Wide
Web Consortium (W3C) 016
Iconos, botones y banners 016
La irrupcin de Flash 018
El diseo web actual 018
Tipologa de los sitios web 020
Sitios dinmicos 020
Aplicaciones web 021
Intercambio y alojamiento
de archivos 022
Sitios estticos 022
Tecnologas de los sitios web 023Lenguajes de ejecucin
del lado del usuario 023
Almacenamiento de datos 025
Lenguajes de ejecucin
del lado del servidor 025
Aplicacin de estas tecnologas 026
La estructura de las pginas 026
La forma de navegacin 026
Qu es la estructura? 028
Encabezado o header 028
Contenido 031
Barra lateral o sidebar 032
Pie de pgina o footer 032
Multiple choice 034
CAPTULO 2DEL DISEO AL HTML 035
Herramientas para desarrollar HTML 36
Herramientas para generar
cdigo HTML y CSS 36
Notepad++ 36
TopStyle Pro 37
Por qu Dreamweaver? 38
Adobe Dreamweaver CS5 38
El rea de trabajo 39
Nuevas caractersticas 40
Prestar atencin al cdigo 41
Qu es HTML? 41
XHTML 42
Diferencias entre HTML y XHTML 43
Benecios de XHTML 43
Estructura bsica de una pgina 44
El head 44El body 45
Etiquetas y atributos: denicin 46
Denir las etiquetas 46
Los atributos 46
Elementos HTML 47
Un repaso por los principales elementos 47
Contenido del libro
Preliminares
7/21/2019 Diseo Web con HTML y CSS.pdf
9/196
Clasicacin de elementos 47
Tipos de elementos 48
Primer documento HTML
en Dreamweaver 49Atributos 53
Los cuatro grupos de atributos 53
Los atributos ms frecuentes: bsicos 53
Los atributos de idioma 54
Los atributos dinmicos 54
Los atributos de seleccin 55
Primeras etiquetas HTML 56
Multiple choice 60
CAPTULO 3ESTRUCTURA DEL SITIO 061
Tendencias en el diseo de fondos 062
Relacin del fondo con los elementos 064
Propiedades y aplicacin de fondos 066
Background-color 066
Background-image 066
Background-repeat 067
Background-attachment 068
Background-position 069
El background de un sitio 069
Bordes (CSS) 073
Ancho de bordes 073
Color de los bordes 074Estilo de los bordes 075
Tableless 077
Por qu dejamos de lado las tablas? 077
Tableless 078
Posicionamiento de elementos 079
Posicionamiento normal o esttico 080
Contenido del lib
Posicionamiento relativo 081
Posicionamiento absoluto 082
Posicionamiento jo 083
Posicionamiento otante 083
Comportamiento de las cajas otantes 084
Clearx 085
Multiple choice 086
CAPTULO 4TEXTOS 087
Texto: prrafos y ttulos 088
Estructuracin del texto 088
Prrafos 088
Ttulos 089
Espacios en blanco y saltos de lnea 090
Espacios 091
Marcado bsico
y caracteres especiales 092
Etiqueta 092
7/21/2019 Diseo Web con HTML y CSS.pdf
10/196
Optimizacin de imgenes
para la Web 111
JPG vs. GIF 111
Propiedades de las imgenesen CSS 112
Propiedades CSS 112
CSS sprites 114
Qu son los sprites de imgenes? 114
Cmo se utilizan
los sprites de imgenes? 115
Ventajas de esta tcnica 115
Mapa de imgenes 117
Multiple choice 120
CAPTULO 6ENLACES 121
Enlaces o hipertextos 122
Origen del concepto de hipertexto 122
Enlaces bsicos 123
Enlaces relativos y absolutos 125
Enlaces en Dreamweaver 127
Unidades de medida 131
Unidades relativas 131
Porcentajes 133
Unidades absolutas 134
Recomendaciones 135
Propiedades de tamao 135Ancho (width) 135
Alto (height) 135
Layout lquidos 137
Enlaces bsicos y avanzados 138
Propiedades en los estados del enlace 139
Multiple choice 140
Etiqueta 092
Etiquetas y 093
Etiquetas 094
Codicacin de caracteres 095
CSS (Cascading Style Sheets) 097
Cmo aplicar CSS a nuestras pginas? 098
Sintaxis de atributos
y propiedades en CSS 100
Selectores 100
Selector universal 100
Selector de tipo o etiqueta 101
Selector descendente 102
Selector de clase 102
Selector de ID 103
Multiple choice 104
CAPTULO 5IMAGEN 105
Imgenes en HTML 106
Atributos obligatorios
de la etiqueta 106
Atributos opcionales 107
Tipos de imgenes 109
GIF 109
JPG 110
PNG 110
8
Preliminares
7/21/2019 Diseo Web con HTML y CSS.pdf
11/196
CAPTULO 7LISTAS 141
Listas: denicin 142Tres motivos para utilizar listas 143
Listas ordenadas y no ordenadas 144
Listas ordenadas 145
Listas no ordenadas 146
Listas anidadas 147
Dnde utilizamos listas? 148
Listas estndar 148
Listas con imgenes 148
Listas en men de navegacin 151
Personalizar listas 152
Creacin de mens de navegacin 155
Creacin de un men
de navegacin vertical 156
Creacin de un men
de navegacin horizontal 157
Crear un men de navegacin 158
Multiple choice 164
CAPTULO 8FORMULARIOS 165
Formularios 166
Captcha 168
Composicin de un formulario 168XForm 169
El cliente y el servidor 169
Elementos de los formularios 169
Etiqueta input 171
Texto oculto 172
Etiqueta radio o botn radio 172
Checkbox o caja
de seleccin o validacin 173
Botn Submit o
de envo de formulario 174
Botn Reset o
de borrado de formulario 174
Botn File o de archivos adjuntos 174
Campo hidden o datos ocultos 174
Botn Image 175
Type Button o botn comn 175
Etiqueta para texto largo 175
Lista de opciones 176
Bloques de elementos 177
Etiquetas Fieldset y Legend 177
Etiqueta label 178
Introduccin a PHP 178
Lenguajes de servidor 179
Lenguajes de cliente 179
Proceso de ejecucin en PHP 179
Variables 181
Variables denidas 181
Estructuras de control 182
Includes 182
Vectores 183
Funciones 183
Variables entre pginas 184
Concatenar 185
Multiple choice 186
SERVICIOSAL LECTOR 187
ndice temtico 18
Catlogo 19
Contenido del lib
7/21/2019 Diseo Web con HTML y CSS.pdf
12/196
10
Preliminares
10
Como sabemos, la era digital gener nuevas y fas-
cinantes oportunidades de trabajo. Esta obra es la
puerta de acceso a una de las reas que ms posibi-
lidades y satisfacciones brindan en el mbito web: el
desarrollo de sitios. En este libro, los mejores conse-
jos y contenidos son expuestos al lector, junto a los
fundamentos de este arte y, al mismo tiempo, todos
los secretos para que triunfemos ante cualquier de-
safo que nos toque encarar, convirtindonos en ex-
celentes profesionales de la Web.
A travs de cada uno de sus captulos, podremos co-
nocer y dominar HTML, as como tambin las princi-
pales tecnologas relacionadas. En sus pginas en-
contraremos un recorrido por todos los elementos
tericos fundamentales en esta profesin y veremos
la forma de llevar estos conceptos a la prctica ayu-
dados por detalladas explicaciones paso a paso.
Sin dudas, este aprendizaje sentar bases slidas, y
nos llevar a disear y desarrollar sitios web profe-
sionales que resalten nuestro trabajo.
Los contenidos expuestos en esta obra estn dirig
dos a todos aquellos que quieran desarrollar sitio
incluso a quienes no cuentan con educacin form
previa en la materia.
Por un lado, los desarrolladores web aumentarn
oferta de servicios, y se convertirn en profesion
les con conocimientos avanzados de HTML. Por ot
parte, los estudiantes de Diseo Grco sern tr
bajadores mucho ms completos cuando nalic
sus estudios, ya que lograrn implementar sitios c
buen diseo, alta funcionalidad y cdigos optimiz
dos. Finalmente, los acionados a la Web tendrn
posibilidad de participar en ella de forma activa m
diante la creacin de sus propios sitios, y sern cap
ces de disearlos tambin para terceros, con lo cu
transformarn el objeto de su devocin en una tar
rentable y productiva.
En suma, el material que tienen delante de usted
es una obra imperdible para todo tipo de usuario
quedan en buenas manos.
Introduccin a
Diseo web con HTML y CSS
7/21/2019 Diseo Web con HTML y CSS.pdf
13/196
Captulo 1
Aqu analizaremos los primeros pasospara iniciarnos en el desarrollo de sitiosweb utilizando HTML.
Primeros pasos
7/21/2019 Diseo Web con HTML y CSS.pdf
14/196
12
1. Primeros pasos
El diseador web
Actualmente, es imposible referirse a un solo tipo de
perl de diseador web, y mucho menos, a un solo
tipo de persona. La creacin de sitios web se ha con-
vertido en una disciplina en la que se plantean pro-
yectos que requieren de una conjuncin de conoci-
mientos tcnicos(como lenguajes de programacin
y servidores, entre otros), conceptuales(usabilidad y
accesibilidad, entre otros) y tambin estticos(como
percepcin y legibilidad).
Atrs qued la poca en la que para realizar un sitio
web completo alcanzaba con tener un mnimo co-
nocimiento de HTML y del tratamiento de imgenes.
Ahora es importante que un diseador sepa cmo
planicar un sitio web y que tenga presentes los as-
pectos tcnicos de diagramacin y de estructura al
momento de ponerse a disear.
LAS HERRAMIENTAS DE TRABAJOPara realizar su trabajo, un profesional del diseo yel desarrollo de sitios web necesita contar con herra-
mientas de software, que debe utilizar con criterio
para sacar el mximo provecho de ellas, adems de
conocer los fundamentos de su tarea.
Debe ser un usuario intermedio de PC o Mac, utili-
zar los navegadores web y el correo electrnico, y es-
tar al tanto de la existencia y el funcionamiento de
las redes sociales.
Si bien existen muchas herramientas de diseo en el
mercado, lo cierto es que hay un estndar bien de-
nido de lo que se usa. Basta con echar una mirada
a las solicitudes de trabajo que aparecen en los me-
dios para saber qu es lo que se pretende hoy en da
de un diseador web.
Un diseador web tiene que saber HTML y CSS, y
tiene que trabajar con Dreamweaver para armar
los sitios en forma correcta. Debe utilizar las herra-
mientas principales de diseo, como Photoshop,
Illustrator y Fireworks, que permiten trabajar en
forma profesional y con la mejor calidad. Adems,
resultan importantes los conocimientos de diseo y
animacin con Flash, as como tambin la programa-
cin en ActionScript 3.
FIGURA 1.La suite de programas ms famosos
para disear sitios, Adobe CS5, est disponible
para Windows y para Mac OSX.
7/21/2019 Diseo Web con HTML y CSS.pdf
15/196
LAS HABILIDADES DEL DISEADORAunque es posible decir que un buen diseador web
es aquel que sabe utilizar las herramientas con las
que desarrolla sus proyectos, este es solo un aspecto
tcnico que no resulta fundamental para tener xi-
to. La buena fortuna de un diseador web depen-
de, en gran medida, de sus conocimientos estticos
y conceptuales.
Tambin tiene que estar inmerso en el mundo virtual
de Internet, y conocer las ltimas tendencias y tec-
nologas aunque no las aplique por s mismo, ya que
as podr comunicarse para solicitar su implementa-
cin e interactuar con otros profesionales.
Como vemos, la tarea ms difcil de un buen dise-
ador web no radica en aprender a utilizar una apli-
cacin, sino en saber utilizarla con criterio y estar al
tanto de todo lo que inuye en su medio de traba-
jo, como la aparicin de nuevas tcnicas de diseo,
cambios en las tendencias y en los estilos, o nuevos
dispositivos y utilidades que simpliquen su trabajo.
En este sentido, debe saber utilizar los program
ms conocidos de diseo pero, sobre todo, saber d
terminar en qu momento conviene aplicar una
otra herramienta segn lo que requieran los proye
tos web en los que est involucrado.
TAREAS DEL DISEADORPara denir de forma ms clara el perl del dise
dor web, podemos realizar una divisin de sus tare
sobre la base de las diferentes etapas en las que
podra ver involucrado dentro de la realizacin de
proyecto web.
Si pensamos en la concepcin del diseo de un
tio, es inevitable que sea capaz de realizar un res
meno briefde trabajo en donde pueda determin
El xito de un diseadorweb depende de sus
conocimientos tcnicos,estticos y conceptuales.
FIGURA 2.Es muy
importante que visitemos
sitios donde encontremos
informacin sobre las ltimas
tendencias y novedades.
El diseador w
7/21/2019 Diseo Web con HTML y CSS.pdf
16/196
14
1. Primeros pasos
las necesidades estticas y tcnicas del proyecto, y
segn esto, comenzar a disear. En este momento,
ser preciso que disponga de herramientas para con-
feccionar el diseo. Si el sitio es HTML, puede traba-
jar con una aplicacin como Photoshop, Illustrator o
Fireworks, que ya mencionamos. En cambio, si el si-
tio es en Flash, deber determinar la mejor forma de
crear un diseo optimizado, utilizar las herramientas
grcas del programa y conocer su lenguaje de pro-
gramacin, ActionScript.
Para las etapas posteriores al diseo de los sitios, es
necesario que sepa maquetar en HTML y utilizar CSS,
y para estas tareas, Dreamweaver resulta una herra-
mienta esencial.
Por ltimo, es importante que tenga conocimien-
tos sobre la forma de alojar un sitio en un servidor,
ya sea por medio de Dreamweaver o mediante un
programa especial para FTP(File Transfer Protocol),
como, por ejemplo, FileZilla.
Un diseador necesita contar con muchos conoci-
mientos para poder crear un sitio de calidad. En esta
obra, veremos todas esas herramientas e, incluso,
obtendremos los mejores consejos que nos brinda la
experiencia de los expertos que investigaron y escri-
bieron sobre este tema.
Evolucin
del diseo web
Como usuarios de Internet, navegamos decenas
de sitios por da con el objetivo de revisar nuestro
correo, informarnos, compartir imgenes, comprar
productos, contar lo que estamos haciendo o, sim-
plemente, divertirnos. Hemos aprendido a utilizar
estos sitios casi sin darnos cuenta, haciendo uso
de interfaces que, en general, podemos entender y
dominar sin grandes dosis de esfuerzo o atencin.
Los elementos que hoy componen una pgina web
y su diseo han evolucionado a travs del tiempo.
En sus comienzos, surgieron gracias al uso de me-
tforas basadas en el cine, la televisin, los libros o
las galeras de arte, del mismo modo en que ante-
riormente los sistemas operativos tomaron la met-
fora del escritorio. El uso de estos recursos ayud
a los usuarios a familiarizarse con las funcionalida-
des de estos productos interactivos y marc el ini-
cio de una disciplina que, tiempo ms tarde, se con-
vertira en un trabajo interdisciplinario, frentico y
lleno de inventiva.
UN RECORRIDO POR LAHISTORIA DEL DISEO WEBEl diseo web comenz a dar sus primeros pasos en
la dcada del 90, y hoy, a casi 20 aos de su na-cimiento, podemos decir que es una disciplina que
ha tenido un crecimiento agitado, colmado de cam-
bios, posibilidades, bsquedas e innovaciones. Esta
metamorfosis fue la respuesta al ritmo vertiginoso
de las necesidades y las tendencias que fueron mos-
trando los usuarios de Internet y a la evolucin de
7/21/2019 Diseo Web con HTML y CSS.pdf
17/196
los factores tecnolgicos que atraves el medio web,
entre los que podemos mencionar los siguientes:
Avances en la velocidad y el tipo de conexin a
Internet.
Evolucin del hardware: monitores, tarjetas de vi-
deo y procesadores, entre otros componentes.
Crecimiento del software, principalmente, el que
entrega para su uso libre.
Estandarizacin de los lenguajes segn las normas
W3C (World Wide Web).
Masicacin en el uso de los buscadores.
Aparicin de herramientas y aplicaciones web que
ayudan a mejorar los procesos, los tiempos y la cali-
dad de produccin.
A partir de ahora, delinearemos los diferentes pero-
dos del diseo web y analizaremos algunos ejemplos
caractersticos de cada uno.
PRIMEROS PASOSEn 1991, Tim Berners-Lee public la primera pgi-na web. Su contenido estaba conformado nicamen-
te por textoe hipervnculosque hacan posible la
navegacin entre pginas. Esta era una pequea
ferencia sobre qu era la World Wide Weby qu
poda hacer en ella, y en menos de un ao, recib
dos millones de visitas.
FIGURA 3.La evolucin del hardware incide
en el avance de otras tecnologas. Un monito
monocromo no nos permite disfrutar de
imgenes, por ejemplo.
FIGURA 4.La primera pgina web, publicada en
1991 por Tim Berners-Lee, estaba compuesta sol
por texto e hipervnculos.
En esta primera etapa, el foco estaba puesto en
tarea de enviar o recibir datos. Las pginas solan s
hechas por programadores, y se caracterizaban p
tener una interfaz lineal y limitada. Su diseo esta
generalmente diagramado a una sola columna y
se observaba el uso de cuadrculas que ayudaran
organizar la informacin.
Evolucin del diseo w
7/21/2019 Diseo Web con HTML y CSS.pdf
18/196
16
1. Primeros pasos
El acceso a Internet se efectuaba, principalmente, a
travs de conexiones dial-up, con una velocidad de
navegacin muy lenta, factor limitante del peso que
podan tener los archivos. Por eso, las pginas de esa
poca contenan muy pocas imgenes, en general,
dispuestas en orden consecutivo.
CREACIN DEL WORD WIDEWEB CONSORTIUM (W3C)En 1994, el fsico ingls Tim Berners-Lee fund el
consorcio W3C, organismo destinado a establecer
reglas y pautas que ayudaran a unicar criterios y a
denir el futuro del diseo web.
En 1995 se public el estndar 2.0 de HTML
(HyperText Markup Language), que a pesar de
su nombre, es el primer estndar ocial de ese
lenguaje. Las primeras versiones de HTML solo per-
mitan dar a un texto el formato de encabezado, de
prrafo y de hipervnculo (mediante etiquetasbsi-
cas). En las versiones posteriores, se incorpor el uso
de imgenes y de tablas, y de la mano de estos avan-
ces, fueron apareciendo varios navegadores web.
ICONOS, BOTONES Y BANNERSEl perodo en el cual aparecieron estos elementos co-
menz alrededor del ao 1996, momento en el que
sucedieron varias cosas simultneamente; veamos:
Desarrollo de nuevos recursos grcos: ico-
nos que reemplazan palabras, banners que con-
forman cabeceras, botones con volumen que in-
vitan a la interactividad y fondos que invaden las
pginas. En el afn de experimentar y aprovechar
los nuevos recursos, los desarrolladores web, co-
nocidos en esa poca como webmasters, empe-
zaron a incluirlos de manera excesiva en sus di-
seos, lo que dio origen a pginas recargadas.
HTML
HTML (HyperText Markup Language) es el lenguaje bsico con el que se escribe la mayora de las
pginas web actuales. Est compuesto por etiquetas delimitadas por parntesis angulares (),
que se encargan de describir la estructura y el contenido.
FIGURA 5.Logo del W3C (www.w3c.org), que an hoy
es de gran importancia para el diseo web.
El diseo web seconvirti en un trabajo
interdisciplinario, frenticoy lleno de inventiva.
http://www.w3c.org/http://www.w3c.org/http://www.w3c.org/7/21/2019 Diseo Web con HTML y CSS.pdf
19/196
Para ordenar la informacin, comenz a implemen-
tarse el uso de tablas, uno de los elementos ms po-
lmicos de HTML. Con este elemento, la diagrama-
cin de las pginas se enriqueci sobre las bases del
diseo editorial (libros y revistas) e hizo uso de m
tiples columnas. Aparecieron las primeras aplicac
nes web basadas en el uso de tablas para la creaci
de pginas, lo que foment la adopcin de la tcni
por parte de los diseadores. Si bien algunos des
rrolladores la siguen utilizando, se trata de una t
nica obsoleta y nada recomendable, concebida orig
nalmente para mostrar informacin tabular.
Esta tambin fue la era del spacer.gif, una im
gen transparente e invisible conformada por un px
cuadrado. Su uso gan popularidad rpidamente
permitir forzar y controlar los espacios vacos dent
de una tabla, necesarios para separar los contenido
En el terreno del hardware, se avanz en trmin
de resolucin y denicin del color, tanto en los m
nitores como en las tarjetas grcas. Esto trajo i
portantes mejoras en la calidad del diseo web.
Comenz a vislumbrarse lo que posteriormente
conocera como guerra de los navegadores, c
FIGURA 6.Pgina principal del buscador AltaVista,
lanzado en 1995. Fue el primero que permiti rea-
lizar bsquedas de texto sobre una base de datos.
Gracias a la denicin de estndares HTML, se die-
ron los primeros pasos hacia la escritura de cdigo
semntico, compuesto por etiquetas bien estructura-
das que describen el contenido.
CSS
Aunque lo conoceremos y utilizaremos ms adelante en esta obra, vale aclarar que CSS es el
lenguaje de hojas de estilo en cascada creado para controlar el aspecto visual de los documen-
tos HTML. Es la mejor forma de separar los contenidos y su presentacin.
Evolucin del diseo w
7/21/2019 Diseo Web con HTML y CSS.pdf
20/196
18
1. Primeros pasos
las primeras diferencias en la adaptacin de los es-
tndares por parte de los dos principales browsers:
Internet Explorer y Netscape Navigator.
A nales de 1996, W3C public la primera reco-
mendacin ocial de CSS (Cascading Style Sheets),
conocida como CSS nivel 1, cuya adopcin formal se
produjo ms adelante.
LA IRRUPCIN DE FLASHUnos aos ms tarde, una aplicacin surgida con el
nombre FutureSplash Animator(hoy Adobe Flash)
gan popularidad entre los desarrolladores. Este
software, que naci con una interfaz sencilla com-
puesta por una lnea de tiempoy herramientas muy
bsicas, progres hasta convertirse en una aplica-
cin que permiti controlar el diseo y animar p-
ginas web sin las limitaciones del cdigo HTML de
la poca.
La versatilidad de Flashpermiti crear pginas do-
tadas de animacin e interactividad, gracias a la
edicin de fotogramasy a la manipulacin de ob-
jetos por separado. Hay quienes opinan que esta he-
rramienta contribuy a la evolucin del diseo web,
aunque muchos desarrolladores tambin sostienen
que su uso desmedido no hizo ms que degenerarlo.
En 1998 se public la segunda recomendacin o-
cial de CSS, conocida como CSS nivel 2. La versin
de CSS que utilizan los navegadores actuales es
CSS 2.1, una revisin de CSS 2 que an se est ela-
borando. La siguiente recomendacin de CSS, de-
nominada CSS nivel 3, contina en desarrollo des-
de 1998, y hasta el momento solo se han publicado
borradores.
EL DISEO WEB ACTUALA partir de la aparicin de nuevos navegadores, de
las mejoras en los existentes, de la evolucin en la
velocidad de las conexiones y del desarrollo de nue-
vos dispositivos de navegacin (celulares, PDA y con-
solas de juegos, entre otros), surgi una nueva gene-
racin de desarrolladores que deben tener en cuenta
FIGURA 7.Interfazde FutureSplash Animator
(el precursor de Flash),
utilizado para crear
animaciones sencillas
basadas en el uso de
vectores.
7/21/2019 Diseo Web con HTML y CSS.pdf
21/196
tanto las restricciones como las mltiples posibilida-
des existentes a la hora de crear sitios.
La necesidad de reproducir los contenidos en los
nuevos dispositivos y los avances constantes en los
estndares web produjeron un nuevo impulso de si-
tios basados en XHTML (HTML y XML) combina-
do con CSSpara separar cada vez ms el diseodel
contenido.
Por otro lado, la adopcin de JavaScript(un lengua-
je de programacin sencillo capaz de crear conteni-
dos interactivos) para la creacin de transicionesre-
leg el uso de Flash a sitios de animacin cada vez
ms especcos o al uso puntual de la tecnologa enelementos como reproductores de video o banners.
A lo largo de los aos, los webmasters fueron reem-
plazados por equipos interdisciplinarios de trabajo
compuestos por programadores, arquitectos de la in-
formacin, maquetadores y diseadores web. Todos
ellos construyen sitios basndose en las mejor
prcticas, que tambin evolucionan continuament
La colaboracin uida entre pares, el acceso a tecn
logas web de cdigo abierto (gestores de conte
dos), la disponibilidad de recursos grcos en lne
y la incorporacin de herramientas de testeo y
desarrollo modicaron el trabajo del diseador we
y elevaron a un nivel muy superior la calidad de l
productos nales.
FIGURA 8.Pgina principal
de uno de los sitios realizado
en Flash ms populares de l
poca: EYE4U.
En la actualidad, vemos
que el trabajo realizadopor el diseador webalcanz un nivel muyelevado y mejor la calidade los productos nales.
Evolucin del diseo w
7/21/2019 Diseo Web con HTML y CSS.pdf
22/196
20
1. Primeros pasos
Tipologa
de los sitios web
Producto del avance tecnolgico y del creciente n-
mero de personas que acceden a Internet, aparecie-
ron variadas herramientas y servicios que es posible
utilizar online. Gracias a esto, muchos aspectos de
nuestra vida cotidiana se ven directamente inuen-
ciados por la proliferacin de los sistemas web, como
nuestros hbitos de compra, de pago de servicios o
de comunicacin, entre otros.
Para ofrecer estas utilidades, existen diversos tipos
de sitios, que conoceremos a continuacin.
SITIOS DINMICOSAunque podramos pensar que un sitio dinmico es
aquel que tiene animaciones o que es veloz en algn
aspecto, este concepto se reere al sitio en el que, al
hacer clic para acceder a una pgina, esta se arma
segn nuestro pedido. En los sitios estticos, en cam-
bio, las pginas estn armadas, esperando que al-
guien acceda a ellas.
El armado a pedidoes realizado por dos partes: el
motor de armado y la informacin con la que este
genera la pgina. El motor de armadoest creado
con un lenguaje de programacin, y la informacin
suele provenir de una base de datos. Las principales
ventajas de un sitio dinmico son la facilidad de ac-
tualizacin y carga de datos.
Encontramos sitios dinmicos en los casos que men-
cionamos a continuacin:
Foros: plataformas donde los usuarios escriben
consultas, comentarios y respuestas que son alma-
cenados en la base de datos.
Blogs y microblogs: sistemas que nos permiten
tener un espacio personal, a partir de una planti-
lla prediseada, en el que podemos compartir y co-
mentar informacin como msica (www.myspa-
ce.com), videos (www.youtube.com), imgenes
WORDPRESS
Dentro del listado de blogs y microblogs que analizamos, WordPress merece una mencin ex-
tra, ya que ofrece, en forma gratuita, los archivos fuente que conforman el blog para descargar,
instalar y personalizarlos completamente, y as utilizar el blog en cualquier dominio y hosting.
http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.youtube.com/http://www.youtube.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.youtube.com/http://www.myspa-ce.com/http://www.myspa-ce.com/http://www.myspa-ce.com/7/21/2019 Diseo Web con HTML y CSS.pdf
23/196
(www.fotolog.com y www.ickr.com), textos y
multimedia (www.blogspot.com y http://word-
press.com), y textos reducidos (http://twitter.com).
Wikis: plataformas de creacin de contenidos en
forma participativa, como la enciclopedia http://wi-
kipedia.org o http://commons.wikimedia.org, un
repositorio de archivos de uso gratuito.
Portales de noticias: sitios con contenidos gene-
rados, comnmente, por peridicos de edicin im-
presa. En este caso, los usuarios no pueden encar-
garse de editar los contenidos, pero s podrn dejar
comentarios en algunas noticias.
E-commerce: sitios como www.ticketek.com y
www.amazon.comofrecen entradas a espectculos
o productos como libros y pelculas en sus pginas,
donde el usuario puede elegir, entre otros detalles, la
cantidad y el tipo de artculo, la forma de envo y la
de pago, que suele ser mediante tarjeta de crdito.
Redes sociales: plataformas en las que podemos
generar un perl con datos personales, interese
profesin y educacin. A partir de l, es posible co
tactarnos con personas que tengan intereses simi
res o nuestra misma profesin, por ejemplo. Tambi
permiten agregar lbumes de fotos, videos, links
comentarios, estos ltimos, tanto en el perl prop
como en el de los contactos.
APLICACIONES WEBMuchos sitios ofrecen aplicaciones onlineen fo
ma gratuita, entre las que encontramos editores
texto, de sonido y de imgenes; planillas de clc
lo y agenda. La ltima tendencia es que las aplic
ciones no estn instaladas en nuestras comput
doras sino disponibles como un servicio online.
ejemplo ms referencial es Gmail.com, que ofre
muchos de estos servicios y, adems, permite pe
sonalizar colores, logos, fondos y la disposicin
las interfaces.
Tipologa de los sitios w
http://www.fotolog.comywww.flickr.com/http://www.fotolog.comywww.flickr.com/http://www.fotolog.comywww.flickr.com/http://www.fotolog.comywww.flickr.com/http://www.fotolog.comywww.flickr.com/http://word-press.com/http://word-press.com/http://word-press.com/http://word-press.com/http://word-press.com/http://word-press.com/http://word-press.com/http://twitter.com/http://twitter.com/http://wi-kipedia.org/http://wi-kipedia.org/http://wi-kipedia.org/http://wi-kipedia.org/http://commons.wikimedia.org/http://commons.wikimedia.org/http://wi-kipedia.org/http://www.ticketek.com/http://www.ticketek.com/http://www.amazon.com/http://www.amazon.com/http://www.amazon.com/http://www.ticketek.com/http://commons.wikimedia.org/http://wi-kipedia.org/http://wi-kipedia.org/http://wi-kipedia.org/http://twitter.com/http://word-press.com/http://word-press.com/http://word-press.com/http://www.blogspot.comy/http://www.fotolog.comywww.flickr.com/7/21/2019 Diseo Web con HTML y CSS.pdf
24/196
22
1. Primeros pasos
INTERCAMBIO Y ALOJAMIENTODE ARCHIVOSLa calidad de las imgenes, los videos y el audio dis-
ponibles en las computadoras ha aumentado, lo que
provoca cambios en el modo de distribuir y trans-
ferir estos archivos, cada vez ms pesados. Sitios
como www.rapidshare.com, www.dropbox.com
o www.yousendit.com nos permiten almacenar y
enviar archivos de gran tamao.
SITIOS ESTTICOSSon sitios donde los usuarios no pueden crear ni edi-
tar los contenidos. Los casos ms comunes de este
tipo son los siguientes:
Sitios experimentales: en estos casos se busca
generar nuevas experiencias de navegacin para el
usuario, al producir interacciones no convencionales
(http://dontclick.it), recorridos 3D (www.vatican.
va/various/cappelle/sistina_vr/index.html) o na-
vegacin mediante la cmara web (www.davidlind-
seywade.com/#/portfolio/portfolio/19).
Newsletters y yers: son minisitios publicitarios
que estn alojados en un servidor y son enviados
por e-mail con el n de promover algn producto
o servicio.
FIGURA 9.En este portfolio de fotografas, podemos ir navegando de una imagen a otra interactuando con
la cmara web conectada a nuestra computadora.
Los avances de latecnologa generan
nuevos modos detransmitir archivos ynovedosos serviciospara los usuarios.
http://www.rapidshare.com/http://www.rapidshare.com/http://www.dropbox.com/http://www.dropbox.com/http://www.yousendit.com/http://www.yousendit.com/http://dontclick.it/http://www.vatican.va/various/cappelle/sistina_vr/index.htmlhttp://www.vatican.va/various/cappelle/sistina_vr/index.htmlhttp://www.vatican.va/various/cappelle/sistina_vr/index.htmlhttp://www.davidlind-seywade.com/#/portfolio/portfolio/19http://www.davidlind-seywade.com/#/portfolio/portfolio/19http://www.davidlind-seywade.com/#/portfolio/portfolio/19http://www.davidlind-seywade.com/#/portfolio/portfolio/19http://dontclick.it/http://www.davidlind-seywade.com/#/portfolio/portfolio/19http://www.davidlind-seywade.com/#/portfolio/portfolio/19http://www.davidlind-seywade.com/#/portfolio/portfolio/19http://www.vatican.va/various/cappelle/sistina_vr/index.htmlhttp://www.vatican.va/various/cappelle/sistina_vr/index.htmlhttp://dontclick.it/http://www.yousendit.com/http://www.dropbox.com/http://www.rapidshare.com/7/21/2019 Diseo Web con HTML y CSS.pdf
25/196
Tecnologas
de los sitios web
Es habitual que a diario naveguemos por diversos
sitios para revisar nuestro correo electrnico, leer
las noticias, o hacer alguna compra o pago virtual.
A simple vista, todos los sitios que encontramos pa-
recieran estar hechos de la misma manera, aunque
si hacemos un anlisis en detalle, descubriremos
que en ellos intervienen diversas tecnologas que se
combinan de diferentes modos para lograr las fun-
cionalidades y prestaciones que brindan al usuario.
Conozcamos las principales.
LENGUAJES DE EJECUCINDEL LADO DEL USUARIOEn estos sitios, cuando el usuario accede a una p
gina, los archivos que la componen son descarg
dose interpretadosdirectamente por el navegad
(Firefox o Internet Explorer). Pueden estar cread
con las siguientes tecnologas:
HTML y XHTML: la mayora de los sitios por los q
navegamos se crean con estos lenguajes. Estas p
ginas se componen por una estructura de etiquet
que tienen signicados semnticos (ttulos impo
tantes, prrafos o imgenes) para que los buscad
res (como Google o Bing, por ejemplo) vinculen
HTML vs. XHTML
Aunque lo veremos en detalle ms adelante, la diferencia entre HTML y XHTML radica, funda-
mentalmente, en que el ltimo requiere una sintaxis ms estricta en comparacin con el prime-
ro, en el que pueden omitirse las etiquetas de cierre, por ejemplo, sin que esto provoque fallas.
FIGURA 1O.Aqu se ve el cdigo con el que est conformada parte de una pgina, con etiquetas que indica
ttulos principales, prrafos, links e imgenes.
Tecnologas de los sitios w
7/21/2019 Diseo Web con HTML y CSS.pdf
26/196
24
1. Primeros pasos
determinado texto existente en la pgina al signi-
cado semntico que le da la etiqueta que lo contiene.
JavaScript/AJAX: es un lenguaje de programacin
usado para generar interfaces de usuario mejora-
das, con ms interactividad. Las sentencias y fun-
ciones de este cdigo pueden estar en el mismo
archivo HTML o en un archivo externo.
AJAX es una tcnica que se usa vinculando
JavaScript a XML. JavaScript requiere la informa-
cin alojada en el servidor en formato XML para
generar cambios o agregar ms funcionalidades en
la pgina, sin interferir con su visualizacin ni
comportamiento.
Flash y ActionScript: Flash se asom al mundo de
Internet como un programa destinado a generar
vistosas animaciones vectoriales que se podran in-
corporar en las pginas. En su evolucin, desarro-
ll un potente leguaje de programacin que, hoy en
da, permite crear sitios y aplicaciones web dinmi-
cas, con conectividad hacia otros lenguajes y pla-
taformas. Tambin brinda la posibilidad de generar
entornos con gran interactividad e impacto visual,
adems de manejar audio y video.
FIGURA 11.Gmail permite adjuntar un archivo, ver la progresin de la carga y escribir en el cuerpo del co-
rreo al mismo tiempo que se produce un autoguardado del mensaje en borradores. Todo facilitado por AJAX.
FIGURA 12.Este sitio
de alto impacto visual
permite tener interactividad
tanto con el mouse como
con el teclado.
7/21/2019 Diseo Web con HTML y CSS.pdf
27/196
ALMACENAMIENTO DE DATOSCuando se genera un sitio dinmico, es necesario
contar con un repositorio de informacin. Para esto,
disponemos de algunas alternativas que menciona-
mos a continuacin:
XML(Extensible Markup Language): es un lenguaje
de sintaxis similar a HTML, pero no tiene etiquetas
predenidas con signicados particulares, sino que
estas son establecidas por el usuario de acuerdo con
la informacin que necesite almacenar. Suele usarse
vinculado a Flash y ActionScript.
Bases de datos: una base de datos es un conjun-
to de datos pertenecientes a un mismo contexto
y almacenados sistemticamente para su poste-
rior uso. En el entorno web, las bases ms utiliza-
das son SQL (SQL Server pertenece a Microsoft) y
MySQL (Open Source). Se las usa para almacenar
los datos que componen un sitio web, tales como
textos e imgenes, entre otros. Suelen utilizarse
vinculadas a ASP y PHP.
LENGUAJES DE EJECUCINDEL LADO DEL SERVIDORSon lenguajes que ejecuta el servidor para crear u
pgina cuando el usuario accede a un sitio. Es d
cir, buscan la informacin en una base de datos
tomndola como referencia, generan archivos HTM
que sern nalmente visualizados por el usuar
Conozcamos las alternativas ms difundidas:
PHP: es un lenguaje de programacin al que pu
den agregarse diversas libreras para otorgarle fu
cionalidades y usarse sin costo alguno. Es compa
ble con la mayora de los servidores web y sistem
operativos, aunque suele implementarse en entorn
Linux y con bases de datos MySQL, lo cual evita p
completo los costos de licencias.
ASP: es un lenguaje de programacin cre
do por Microsoft, que se ejecuta solo en servid
res Windows. Su funcionamiento es igual al de PH
pero se utiliza, en general, vinculado a bases de d
tos SQL. La desventaja que presenta es que no
FIGURA 13.Wikipedia es unentorno colaborativo creado
en PHP, donde los usuarios
crean la informacin, que es
almacenada en base de datos y,
luego, mostrada ante el
requerimiento de cada persona.
Tecnologas de los sitios w
7/21/2019 Diseo Web con HTML y CSS.pdf
28/196
26
1. Primeros pasos
gratuito y que debe implementarse en un entorno
100% Windows, que tambin tiene un costo.
APLICACIN DE ESTAS TECNOLOGASUn caso en el que podemos ver muchas de estas
tecnologas vinculadas es YouTube. En l se utili-
za un reproductor con funciones especiales de vi-
deo, creado en Flash, y en la interfaz de la pgina
se pueden postear nuevos videos, crear perles y de-
jar comentarios.
Por su parte, en los sitios experimentales que ge-
neran nuevas situaciones de interaccin y de expe-
riencia con el usuario, al mismo tiempo que buscan
un gran impacto visual sin limitaciones en cuanto
al diseo, tanto la interfaz como las situaciones in-
teractivas son creadas en Flash y ActionScript de
forma esttica. Claro que Flash tambin puede leer
lenguajes de marcado y bases de datos para gene-
rar sitios dinmicos.
La estructura
de las pginas
Es hora de comenzar a presentar los aspectos rela-
cionados con los elementos que conforman una in-
terfaz, la manera en la que estos se estructuran, y
los criterios que debemos seguir para realizar una
pgina atractiva y funcional.
Cada sitio web tiene un objetivo comunicacional
y, debido a eso, todos sus aspectos visuales y la ar-
ticulacin de sus elementos deben garantizar que se
cumpla ese objetivo.
Es necesario que el internauta comprenda el obje-
tivo del sitio en pocos segundos. El tiempo es tira-
no, y el navegante est expuesto a una innumera-
ble cantidad de sitios, una avalancha de informacin
que hace imprescindibles la claridad del mensaje y la
buena legibilidad.
LA FORMA DE NAVEGACINA la hora de disear un sitio, tenemos la libertad de
elegir qu forma de navegacin utilizaremos, pero
debemos hacerlo con criterio y adecundonos a cada
caso en particular. Veamos, a continuacin, algunos
YOUTUBE
En YouTube podemos ver que el reproductor de video y sus controles estn creados con Flash y
ActionScript. El resto del entorno visual es HTML, pero tanto la informacin de los videos relacio-
nados como los comentarios dejados por los usuarios estn almacenados en una base de datos,
lo que indica que se trata de un sitio creado con PHP o ASP.
Si hacemos un anlisisen detalle, descubriremosque en un sitio intervienendiversas tecnologas.
7/21/2019 Diseo Web con HTML y CSS.pdf
29/196
sitios que proponen formas novedosas de navega-
cin, con intervenciones poco comunes por parte de
los usuarios.
Navegacin sin clics: www.dontclick.it propo-
ne una navegacin sin clics, haciendo la eleccin
de lo que deseamos con solo aguardar unos se-
gundos sobre el elemento al que queremos acceder.
Navegacin vertical: todo el contenido se pre-
senta en una sola pgina, que se mueve hacia arri-
ba o hacia abajo segn las opciones que vaya-
mos eligiendo. Podemos ver ejemplos en www.
volll.com, www.kitfolio.com y www.pojeta.cz.
Navegacin original: en http://doorstepdairy.
comencontramos que la navegacin se realiza me-
diante el movimiento de un elemento, en este caso, un
pequeo camin que debe arrastrarse con el mouse.
Si imaginamos una interfaz de navegacin con movi-
miento vertical para un sitio con muchas secciones y
que ofrezca varios productos, el largo necesario para
la pgina sera excesivo. Si nos moviramos del lti-
mo producto al comienzo, la sensacin al ver pasar
palabras, imgenes y colores a gran velocidad quizs
resultara desagradable. Esto nos demuestra que no
todos los recursos disponibles son aplicables a cual-
quier sitio, y si a pesar de eso los utilizamos, tal vez
el usuario no tenga una buena percepcin de nues-
tra propuesta.
FIGURA 14.Todo el contenido del sitio est ubica
en una sola pgina muy larga, que se muestra po
partes en la ventana del navegador.
La estructura de las pgin
http://www.dontclick.it/http://www.dontclick.it/http://www.volll.com/http://www.volll.com/http://www.volll.com/http://www.kitfolio.com/http://www.kitfolio.com/http://www.pojeta.cz/http://www.pojeta.cz/http://doorstepdairy/http://doorstepdairy/http://www.pojeta.cz/http://www.kitfolio.com/http://www.volll.com/http://www.volll.com/http://www.dontclick.it/7/21/2019 Diseo Web con HTML y CSS.pdf
30/196
28
1. Primeros pasos
QU ES LA ESTRUCTURA?Nadie espera encontrar un men en el medio de un
prrafo, ni tampoco un buscador o un logo en el pie
de la pgina. Aunque sea de forma inconsciente, to-
dos esperamos que los elementos estn dispuestos
de cierta manera, donde los buscamos en primer lu-
gar cuando accedemos al sitio.
Un usuario tiene la capacidad de predecir el sitio,
buscando de forma rpida lo que le interesa. Luego
de reconocer la disposicin de los elementos en la
pgina de inicio, los seguir buscando en el mis-
mo lugar dentro de las diferentes secciones. Poreso, necesitamos mantener estndares de estruc-
tura para darle una coherencia visual a la distri-
bucin del contenido en todas las pginas. Por su-
puesto que tambin podremos tomarnos pequeas
libertades de diseo para darle un ritmo especial a
la navegacin.
ENCABEZADO O HEADEREl headeres uno de los aspectos principales que en-
contramos en un sitio web, ya que es lo primero que
vemos. Ocupa todo el ancho superior del sitio y es
uno de los elementos que se mantienen casi sin nin-
guna variacin dentro de todas las pginas. Veamos,
a continuacin, los elementos que pueden estar pre-
sentes dentro del header de un site:
FIGURA 15.En este sitio
aparecen diversas
opciones a medida que
arrastramos el pequeo
camin con el mouse.
7/21/2019 Diseo Web con HTML y CSS.pdf
31/196
Logo: dentro del header se sita el logotipo, es de-
cir, la identidad grca, el sello distintivo de una em-
presa. Como es fundamental diferenciarse, el logo
ocupa un lugar protagnico en el extremo superior
izquierdo. Esto no es casual: est comprobado me-
diante estudios que este es el primer lugar donde los
usuarios dirigen su mirada.
Adems de ser un elemento grco importante, al
logo se le otorga una funcionalidad extra: posee un
enlace al inicio del sitio, convirtindose en un ata-
jo para que el usuario pueda volver a la pgina
principal.
Men: en el header tambin encontramos la bar
de navegacin, que contiene los enlaces para acc
der a las diferentes secciones del sitio. Los eleme
tos del men deben estar expuestos de modo sen
llo, intuitivo y bien visible para que el usuario ten
acceso rpido a la informacin y siempre encuent
lo que busca.
Cuando un sitio tiene pocos enlaces, todos pued
estar en el men principal. En cambio, en uno m
complejo (de ms de seis o siete pginas), aparece
men principalpara navegar por las secciones m
importantes y, luego, submenspara moverse de
tro de cada una. Estos submens deben manten
coherencia temtica y lgica en su agrupacin. P
FIGURA 16.Cada vez
son ms los sitios con
diseos de vanguardia que le
otorgan un papel
protagnico al header.
Todos los elementos ylos aspectos visuales de un
sitio deben garantizar quese cumpla la comunicacin
La estructura de las pgin
7/21/2019 Diseo Web con HTML y CSS.pdf
32/196
7/21/2019 Diseo Web con HTML y CSS.pdf
33/196
mirada por su movimiento e interactividad, mostran-
do un mensaje de forma simple, rpida y ecaz. Para
hacerlo, se valen de iconos, colores e informacin
bien jerarquizada, con un diseo simple y atractivo.
Buscadores internos:en sitios grandes, estos bu
cadores suelen ubicarse arriba a la derecha o en l
sidebars. Sirven para encontrar de forma rpida al
puntual. Esto quiere decir que no se accede a la
formacin a partir de la navegacin, sino que se i
gresa una palabra exacta o aproximada a lo que
desea encontrar y se presiona el botnusc rBuscaro
milar para obtener los resultados.
CONTENIDOComo mencionamos, est comprobado que el rec
rrido visual que realiza el visitante comienza por
extremo superior izquierdo (donde es usual que e
contremos el logo) y luego se ja en el centro de
pgina, donde est el contenido principal.
Aunque la organizacin vara entre diseos, verem
denominadores comunes para jerarquizar los dif
rentes tipos de informacin. El uso de destacad
es un gran punto de tensin, as como tambin l
FIGURA 18.Modernos, prcticos y muy utilizados,
los sliders dan dinamismo y transmiten mensajes
claros de una manera efectiva.
UN BUEN DISEADOR
Aunque es posible decir que un buen diseador web es aquel que sabe utilizar las herramien-Aunque es posible decir que un buen diseador web es aquel que sabe utilizar las herramien-
tas con las que desarrolla sus proyectos este es solo un aspecto tcnico que no resulta funda-tas con las que desarrolla sus proyectos, este es solo un aspecto tcnico que no resulta funda-
mental para tener xito. La buena fortuna de un diseador web depende de sus conocimientos.mental para tener xito. La buena fortuna de un diseador web depende de sus conocimientos.
La estructura de las pgin
7/21/2019 Diseo Web con HTML y CSS.pdf
34/196
32
1. Primeros pasos
ttulos, que son resaltados mediante el uso de fon-
dos, bullets, iconos, u otros elementos, para luego
continuar por la lectura de prrafos o de informa-
cin secundaria.
BARRA LATERAL O SIDEBAREste elemento grco sirve para organizar conte-
nidos importantes del sitio. Se puede ubicar a la
derecha del cuerpo principal, a la izquierda o en
ambos lados. Contiene enlaces externos e internos,
informacin adicional organizada por categoras y,
actualmente, se utiliza tambin para incluir publici-
dades (banners, links, etctera).
PIE DE PGINA O FOOTERAs como los headers han dado un salto de lo tradi-
cional a lo vanguardista, los footers tambin siguie-
ron esos pasos. Pasaron de contener informacin
como polticas de privacidad de uso y derechos de
autor, a ser contenedores de elementos relevantes,
como enlaces, mapas de sitios (para ayudar a la in-
dexacin en Google), informacin y formularios de
contacto, y los infaltables links a las redes sociales,
que nos invitan a unirnos, compartir, ver perles y
hasta visualizar los ltimos posts de Twitter.
Todos los elementos mencionados determinan lo
que llamamos una interfaz web. Los contenidos, la
forma de navegacin, los elementos de identica-
cin y las acciones que podemos generar dentro deun sitio son parte de su interfaz.
Al crear una interfaz, es importante que, para trans-
mitir un mensaje claro, rpido y de forma sencilla,
respetemos ciertas convenciones de estructura e in-
novemos desde el diseo y las tecnologas.
FIGURA 19.Los sidebars son infaltables en las re-
des sociales y en los blogs, donde su rol es clara-
mente organizativo, debido a la gran cantidad de in-
formacin que se necesita comunicar.
7/21/2019 Diseo Web con HTML y CSS.pdf
35/196
FIGURA 20.Actualmente, los
footers son algo ms que un
buen cierre para el sitio.
Su uso y actualizacin marca
tendencia.
CONOCIMIENTOS
Como vemos, un diseador necesita contar con muchos conocimientos para poder crear un si-
tio de calidad. En esta obra, veremos todas esas herramientas e, incluso, obtendremos los me-
jores consejos que nos brindarn la experiencia que necesitamos.
La tarea ms difcil de un buen diseador web no
radica en aprender a utilizar una aplicacin, sino
en saber utilizarla con criterio y estar al tanto de
todo lo que inuye en su medio de trabajo, como la
aparicin de nuevas tcnicas de diseo, cambios en
las tendencias y en los estilos, o nuevos dispositi-
vos y utilidades que simpliquen su tarea. Debe sa-
ber utilizar los programas ms conocidos de diseo
y determinar en qu momento conviene uno u otro.
La estructura de las pgin
7/21/2019 Diseo Web con HTML y CSS.pdf
36/196
34
1. Primeros pasos
Multiple choice
Qu conocimientos debe manejar un dise-ador web?
a-Estticos.
b-Estticos, conceptuales y tcnicos.
c-Estticos, conceptuales y de diagramacin.
d-Conceptuales y tcnicos.
Qu signica W3C?
a-Word Wide Web Consortium.
b-Word Wide Web.
c-Consortium Web.
d-Word Wide Consortium.
Qu es el spacer.gif?
a-Una imagen transparente con forma redonda.
b-Una imagen de color negro.
c-Una imagen con forma redonda.
d-Una imagen transparente e invisible.
Qu caracteriza a un sitio dinmico?a-Qu su contenido se actualiza cada cierto
tiempo.
b-Que posee videos.
c-Al acceder a una pgina, esta se arma segn
nuestro pedido.
d-Que contiene animaciones.
Qu es un sitio esttico?
a-Donde los usuarios no pueden crear ni editar
contenidos.
b-Donde los contenidos no se actualizan en for-
ma constante.
c- Sitios que no poseen animaciones.
d-Sitios que solo poseen texto.
Qu espacio utiliza el header de un sitio?
a-Utiliza todo el ancho superior del sitio.
b-Usa el ancho inferior del sitio.
c-Hace uso de la zona central del sitio.
d-Utiliza la columna lateral izquierda del sitio.
1 4
25
3
6
Respuestas:1-b,2-a,3-d,4-c,5-a,6-a
7/21/2019 Diseo Web con HTML y CSS.pdf
37/196
Captulo 2
En este captulo conoceremos de qu formapodemos plasmar un diseo de sitio webutilizando el lenguaje HTML.
Del diseo al HTML
7/21/2019 Diseo Web con HTML y CSS.pdf
38/196
2. Del diseo al HTML
36
el cdigo de forma diferente. Si nos aseguramos de
que nuestro sitio sea compatible con los siete na-
vegadores mencionados, el 96% de los usuarios de
Internet podr ver sin problemas el trabajo que es-
tamos desarrollando.
HERRAMIENTAS PARA GENERARCDIGO HTML Y CSSLa aplicacin ms potente del mercado para gene-
rar cdigo HTML es Adobe Dreamweaver CS5, que
comenzaremos a estudiar en las prximas pginas.
Sin embargo, adems de ella, existen otras que po-
demos utilizar para redactar y generar cdigo CSS y
HTML para nuestros sitios.
Si bien es cierto que cualquier editor de texto pla-
no, como el Bloc de notas de Windows, es su-
ficiente para redactar cdigo HTML y CSS, nos
convendr recurrir a programas diseados espe-
cialmente para tal fin, ya que en ellos tendremos
ayudas visuales (como el uso de distintos colo-
res para el texto) que nos orientarn en la tarea y
simplificarn el trabajo.
NOTEPAD++Notepad++ (http://notepad-plus-plus.org) es
una aplicacin que bien podramos denir como
una versin muy mejorada del editor de texto o
el Bloc de notas incluido en todos los sistemas
Windows. Si no estamos acostumbrados a redac-tar cdigo de programacin web a ciegas, no ser
conveniente utilizarlo, ya que su principal desven-
taja es que no cuenta con un preview incorporado.
De todas maneras, desde un simple atajo de tecla-
do, podemos visualizar el HTML en los navegadores
de Internet que tengamos instalados.
Herramientas para
desarrollar HTML
El proceso de crear pginas se denomina, en la jer-
ga, maquetacin, y da como resultado tener nues-
tro diseo convertido en un sitio navegable. Luego,
en caso de que el proyecto lo requiera, faltar la adi-
cin de cdigo JavaScript, AJAX, ASP o PHP para ha-
cer que las pginas dinmicas obtengan contenido
de las bases de datos.
Un problema que suele presentarse al desarrollar
HTML es lograr que el diseo sea visualizado de
igual forma en la mayora de los navegadores de
Internet. Este inconveniente se debe, principalmen-
te, a que algunos fabricantes no han incorporado en
sus productos los estndares que determinan la es-
tructura de la Web. En consecuencia, tendremos que
aplicar parchesen el cdigo CSS y HTML para que
la maqueta sea compatible con los navegadores ms
frecuentes: Internet Explorer 6, 7 y 8; Mozilla Firefox
3.5 y 3.6; Chrome 5.0 y Safari 4.0. Esta prctica se
denomina cross-browsing.
Es importante distinguir entre las distintas versio-
nes de cada navegador, ya que cada uno interpreta
La maquetacin serexitosa si el cdigorespeta los estndaresCSS de la W3C sin alterarel diseo original
http://notepad-plus-plus.org/http://notepad-plus-plus.org/http://notepad-plus-plus.org/7/21/2019 Diseo Web con HTML y CSS.pdf
39/196
pesados (por ejemplo, logs de acceso a servidore
sin perder estabilidad.
TOPSTYLE PROTopStyle Pro (www.topstyle4.com) es uno de l
mejores editores de cdigo CSS y, en general, es r
comendable utilizarlo como complemento del e
tor de HTML principal que empleemos para trabaj
Entre sus principales ventajas podemos menciona
Entre los principales puntos a favor de esta aplica-
cin encontramos los siguientes:
Es gratuita.
Sintaxis coloreada.
Numeracin de lnea.
Muy liviana, consume pocos recursos del sistema.
Cdigo autocompletableen diferentes lenguajes.
Es posible abrir y gestionar archivos de texto
FIGURA 1.Interfaz de Notepad++,
donde vemos como ejemplo el
cdigo de una pgina escrita en PH
FIGURA 2.rea de trabajo de
TopStyle Pro. El panel CSS Palett
Editor, ubicado a la izquierda,
muestra los colores utilizados en
nuestra hoja de estilos y cuntas
veces aparece cada uno.
Herramientas para desarrollar HM
http://www.topstyle4.com/http://www.topstyle4.com/http://www.topstyle4.com/7/21/2019 Diseo Web con HTML y CSS.pdf
40/196
7/21/2019 Diseo Web con HTML y CSS.pdf
41/196
EL REA DE TRABAJOCuando abrimos un documento (o creamos uno nu
vo, como veremos ms adelante), por defecto ap
rece la pantalla dividida en dos zonas principale
CdigoCdigoy DiseoDiseo.
Como su nombre lo indica, en el rea denomina
CdigoCdigo, la cual se ubica en la parte superior, ver
mos el cdigo HTMLque corresponde a la pgin
Aqu tambin podremos escribir cualquier otro c
digo de programacin web que necesitemos (com
ASP, PHP, JavaScript, etctera). Por su parte, en
seccin DiseoDiseo, que se encuentra en la parte inf
rior, se muestra la previsualizacin (preview) del c
digo interpretado.
El resto de la pantalla se compone de la siguien
manera: en la parte superior encontraremos el me
y la barra de herramientas; en la derecha, la barra
ventanas; y en la parte inferior, la barra de propied
des HTML y CSS. Veremos estas secciones en deta
en las prximas pginas, donde nos encargarem
de conocer las partes ms importantes que presen
la interfaz del programa.
Luego de iniciar Dreamweaver por primera vez, es
recomendable denir la distribucin del espacio de
trabajo. Esto determinar la ubicacin de los distin-
tos mens y opciones dentro de la aplicacin, y es
una seleccin que quedar registrada para las prxi-
mas veces que lo usemos. Para hacerlo, nos dirigi-
mos al menVentana/Diseo del espacio de
Ventana/Diseo del espacio de
trabajotrabajo.
La distribucin llamada ClsicoClsico es sumamente
exible e intuitiva, y resulta familiar para quienes
vienen trabajando con versiones anteriores de este
programa. Sin embargo, cada usuario elegir la que
le resulte ms adecuada.
FIGURA 4.La primera
vez que ejecutamos
Dreamweaver, debemos
denir si ser el editor
predeterminado para los tip
de archivo que soporta.
Adobe Dreamweaver C
7/21/2019 Diseo Web con HTML y CSS.pdf
42/196
7/21/2019 Diseo Web con HTML y CSS.pdf
43/196
utilizan para indicarle al navegador el uso de alg
nos smbolos o palabras especiales.
Qu es HTML?Toda pgina web est conformada por un cdigo e
tructurado, denominado HTML (HyperText Mark
Language). Bsicamente, este cuenta con una se
de instrucciones para indicarle al navegador que e
temos utilizando la manera en que la pgina de
ser visualizada y representada.
Una de las caractersticas de este lenguaje es su simplicidad, dado que para crear un documento HTM
lo nico que necesitamos es un editor de texto com
WordPad o el Bloc de notas de Windows. Con e
tas dos sencillas herramientas, es posible estruct
rar una pgina web por medio de la inclusin de
etiquetas(tags) propias del lenguaje. Estas indic
PRESTAR ATENCIN AL CDIGOAunque podemos trabajar exclusivamente en la vis-
ta DiseoDiseo, es conveniente utilizar la pantalla dividi-
da de Dreamweaver. De esta forma, a medida que
hagamos el diseo de una pgina, tambin veremos
el cdigo que se va generando. En etapas de apren-
dizaje, esto nos ayudar a familiarizarnos con la sin-
taxis HTML y a relacionar cada uno de los elementos
que insertemos con sus etiquetas y atributos HTML
(veremos estos temas sobre el nal de la clase). Ms
adelante, cuando tengamos ms conocimientos, ver
el cdigo nos permitir cuidar que este cumpla con
los estndares denidos por la W3C (www.w3.org).
Si bien este es un tema que veremos en detalle en
la prxima clase, cabe adelantar que, al trabajar con
la interfaz dividida, encontraremos que algunas pa-
labras comienzan con el signo & (ampersand).
Tendremos que familiarizarnos con estos caracte-
res para poder leer HTML con naturalidad, ya que se
FIGURA 6.Luego de seleccionar u
estilo, buscamos la propiedad que
queremos modicar y elegimos e
nuevo valor que deseemos darle.
Qu es HTM
http://www.w3.org/http://www.w3.org/http://www.w3.org/7/21/2019 Diseo Web con HTML y CSS.pdf
44/196
2. Del diseo al HTML
42
los de dispositivos porttiles, como PDAs y telfonos
celulares, entre otros.
Gracias a XHTML, el mismo documento es til para
todos los soportes; es decir, no es necesario desarro-
llar un documento para navegadores web y otro di-
ferente para contenido mvil, por ejemplo.
Adems, los elementos correspondientes al diseo
(como colores, tipos de fuente o fondos, entre otros)
se representan en hojas de estilo en cascada (CSS)
por separado; de esta forma, podemos tener un c-
digo mucho ms limpio y de menor tamao, el cual
puede ser seguido con ms facilidad.
el comienzo y el nal de los elementos que integran
el documento, desde las caractersticas de los textos
hasta los elementos multimedia, como imgenes, vi-
deos y sonidos.
Aunque HTML es un lenguaje, no lo es de programa-
cin, sino que es un lenguaje de marcado. Se trata
de un sistema de etiquetas que indica al navegador,
por ejemplo, cundo subrayar un ttulo, cmo de-
nir el color del texto o dnde insertar una imagen. Si
el navegador detectara algn error en el cdigo que
debe representar, mostrara el documento tal como
lo hubiera interpretado.
XHTMLLa sigla proviene de EXtensible Hypertext Markup
Language, y es un lenguaje que cuenta con un eti-
quetado ms estricto que HTML, con lo cual permite
una correcta interpretacin del contenido del docu-
mento. Posee una mayor exibilidad, ya que logra ser
representado por todos los navegadores, incluyendo
HTML es un lenguaje demarcado con etiquetas que
le indican al navegador loque debe mostrar
FIGURA 7.
El cdigo XHTML tiene unamenor cantidad de errores
de compatibilidad y una
mayor integracin con las
diferentes plataformas
de visualizacin
de contenidos web.
7/21/2019 Diseo Web con HTML y CSS.pdf
45/196
7/21/2019 Diseo Web con HTML y CSS.pdf
46/196
7/21/2019 Diseo Web con HTML y CSS.pdf
47/196
EL BODYEl elemento body, cuya apertura es y su c
rre , se introduce luego del cierre de la e
queta . Le indica al navegador los eleme
tos que debe incluir, as como tambin la manera
hacerlo, es decir, su organizacin en el espacio de
pgina web. Luego del tag de cierre del contenid
aparece la etiqueta , que corresponde al
nal de la pgina.
En este ejemplo, observamos la denicin del tipo de
documento en la etiqueta DOCTYPEDOCTYPE. Aunque no es
obligatoria y puede ser omitida, debemos saber que
su falta puede dar lugar a imperfecciones en la inter-
pretacin por parte del navegador. A continuacin, la
pgina est contenida entre las etiquetas y
como apertura y cierre de su cdigo fuente.
Luego, aparece la apertura del encabezado a travs
de la etiqueta y el ttulo que ser visualiza-
do en la barra de ttulo del navegador, denido entre
las etiquetas y . Le siguen la des-
cripcin del sitio 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 el otro,
a una funcin JavaScript.
< DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
Ttulo de la Pgina WebTtulo de la Pgina Web
ETIQUETAS Y POSICIONAMIENTO
Es muy importante denir correctamente las meta etiquetas DESCRIPTIONy KEYWORDSjunto con
el ttulo de la pgina web. Estos tres factores son considerados indispensables para la adecuada
categorizacin de los buscadores y, por lo tanto, fundamentales para el posicionamiento en ellos.
El elemento body seintroduce luego del cierrede la etiqueta
Estructura bsica de una pgi
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd%E2%80%9Dhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd%E2%80%9Dhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd%E2%80%9D7/21/2019 Diseo Web con HTML y CSS.pdf
48/196
2. Del diseo al HTML
46
en el cdigo fuente. Son introducidos en las etique-
tas con el objeto de otorgar algunas caractersticas
puntuales, como el alto, el ancho, un borde, etctera.
Un atributo puede denir desde valores numricos,
como la altura de un determinado bloque, hasta co-
lores y estilos de letra.
Todo atributo contiene un valor, que debe estar en-
cerrado entre comillas.
Por ejemplo:
Aqu el enlace
Siempre debemos recordar que las etiquetas deben
llevar una apertura y un cierre, porque as lograre-
mos informar cul es el contenido que debe ser re-
presentado a travs de las declaraciones que hace-
mos en ellas.
Cuando declaramos por completo la etiqueta, po-
demos observar, entonces, cuatro interventores: la
etiqueta propiamente dicha, los atributos, los va-
lores de los atributos y el contenido en cuestin,
como en el siguiente ejemplo:
Contenido
Etiquetas y atributos:
denicin
El HTML est integrado por elementos que, en con-
junto, forman la base de su estructura. De esta ma-
nera, cuando denimos una etiqueta, estamos indi-
cando que, en funcin de ella, se represente algo,
que puede ser visible al usuario o no.
DEFINIR LAS ETIQUETASPara denir una etiqueta, debemos realizar una
apertura y un cierre. Entre ambos, tendremos el
contenido que se adaptar a las condiciones que
ella disponga. Por ejemplo, para subrayar un texto,
utilizaramos la siguiente lnea de cdigo:
Texto SubrayadoTexto Subrayado
Existen 93 etiquetas estndar que tienen una re-
presentacin especca, lo que nos facilita la rea-
lizacin de un documento si las utilizamos como
herramientas para introducir la informacin que de-
seamos mostrar.
LOS ATRIBUTOSLos atributos son directivas que nos permiten de-
nir valores para cada una de las etiquetas agregadas
ETIQUETAS OBSOLETAS
Aunque podemos utilizar cualquiera de las etiquetas disponibles en HTML, en este caso reco-
mendamos no emplear algunas en particular, ya que se consideran obsoletas. Entre ellas, pode-
mos mencionar applet, basefont, center, dir, font, isindex, menu, s, strike, u.
7/21/2019 Diseo Web con HTML y CSS.pdf
49/196
7/21/2019 Diseo Web con HTML y CSS.pdf
50/196
7/21/2019 Diseo Web con HTML y CSS.pdf
51/196
Primer documento
HTML en
Dreamweaver
En este apartado, realizaremos, a travs de
paso a paso detallado, un nuevo documento
HTML utilizando Dreamweaver como aplicacin.
Adobe Dreamweaver brinda la posibilidad de cre
documentos en una gran variedad de formatos,
mismo tiempo que permite abrir todo tipo de a
chivos basados en texto; como ejemplo podem
mencionar ASP, PHP, JavaScript y hojas de est
en cascada (CSS), aunque no hayan sido cread
utilizando este programa. Adems, tengamos
cuenta que podemos abrir y editar archivos de c
digo fuente Visual Basic, Java y C#. De esta form
se ampla el rango de accin y las opciones de es
aplicacin, haciendo mucho ms eciente las tare
efectuadas por el desarrollador.
Figura 11.Los elementos permiten ver fcilmente-
las partes del cdigo y mejoran la posterior visuali-
zacin en los navegadores.
Primer documento HTML en Dreamweav
7/21/2019 Diseo Web con HTML y CSS.pdf
52/196
2. Del diseo al HTML
50
Para crear un documento HTML,
puede hacer clic en la opcin HTMLHTML
que aparece en la
seccin Crear nuevoCrear nuevo, del
cuadro de bienvenida del
programa. Otra alternativa, si ya
tiene el programa
abierto, es dirigirse al men
Archivo/NuevoArchivo/Nuevo.
Desde el cuadro que se
presenta, puede escoger entre
una gran cantidad de formatos y,
al crear un documento nuevo,
optar por alguno de los diseos
de pgina predenidos o tomar
un documento basado en una
plantilla existente. En este caso,
dentro de la pestaa Pgina enPgina en
blancoblanco, elija HTMLHTMLen elrecuadro Tipo de pginaTipo de pgina. En
la seccin DiseoDiseoseleccione
NingunoNingunoy presione CrearCrear.
PASO A PASO /1Crear un documento HTML
7/21/2019 Diseo Web con HTML y CSS.pdf
53/196
7/21/2019 Diseo Web con HTML y CSS.pdf
54/196
7/21/2019 Diseo Web con HTML y CSS.pdf
55/196
7/21/2019 Diseo Web con HTML y CSS.pdf
56/196
2. Del diseo al HTML
54
LOS ATRIBUTOS DINMICOSEncontramos dentro de este grupo muchos atribu-
tos, debido a que son los encargados de exhibir los
efectos y las animaciones de las pginas que in-
cluyen lenguaje JavaScript. Veamos, a continuacin,
cules son estos atributos:
OnclickOnclick:establece la accin que se va a realizar
cuando se haga un clic sobre el elemento.
Cabe aclarar que los atributos idid y classclass pueden
contener letras, nmeros y guiones medios y bajos
como valor, pero no pueden empezar con nmeros.
Como recomendacin, no se deberan utilizar letras
como la , ya que podran no funcionar en algunos
navegadores.
LOS ATRIBUTOS DE IDIOMASon utilizados para denir y adaptar los elementos
insertados en el documento a un idioma especco.
Se los emplea en pginas que muestran su contenido
en varios idiomas o en aquellas que quieren especi-
car en qu idioma est su documento. En este grupo
encontramos los siguientes tres atributos:
LangLang:indica el idioma del elemento.
Xml:LangXml:Lang: indica el idioma del elemento, aunque
en este caso tiene ms prioridad que el atributo ante-
rior; es decir, prevalece este atributo por sobre LangLang.
DirDir: indica la direccin del texto. Se lo utiliza al
trabajar con idiomas que no se escriben de izquier-
da a derecha.
i18n
lang dir
xml:lang
Figura 12.A este grupo de
atributos tambin se lodenomina i18n, que es la
abreviatura de la palabra
internacionalizacin, utilizando
el nmero de letras que tiene
el trmino entre la i inicial
y la n nal.
7/21/2019 Diseo Web con HTML y CSS.pdf
57/196
LOS ATRIBUTOS DE SELECCINEl foco aparece durante la interaccin del visitan
en el sitio. Estos atributos nos permiten asignar a
ciones que se realizarn en cada caso. Cuando n
referimos a detectar o perder el foco, estamos h
blando de que el usuario ha seleccionado o ha d
seleccionado el elemento. Por ejemplo, si tenem
un formulario web, diramos que cuando el usu
rio est escribiendo en uno de sus campos, este e
mento tiene el foco. Cuando contina hacia ot
campo, el elemento anterior ha perdido el foco,
que lo tiene el elemento actual que est usand
Veamos cules son los atributos de foco:
AccessKeyAccessKey:establece una tecla de acceso rpi
a un determinado elemento.
TabIndexTabIndex: establece el orden de tabulaci
del documento; su valor est entre 0 y 32.76
OnFocusOnFocus:se ejecuta la accin cuando se detec
OndblclickOndblclick: establece la accin que se realiza
cuando se hace un doble clic sobre el elemento.
OnmousedownOnmousedown:se ejecuta la accin cuando se de-
tecta el botn del mouse presionado.
OnmouseupOnmouseup: se ejecuta la accin cuando se detec-
ta que el botn fue soltado.
OnmouseoverOnmouseover:establece la accin cuando se de-
tecta que el cursor se sita sobre el elemento.
OnmousemoveOnmousemove:establece la accin cuando se de-
tecta que el cursor se encuentra en movimiento so-
bre el elemento.
OnmouseoutOnmouseout:se ejecuta la accin cuando el cur-
sor abandona el elemento.
OnkeypressOnkeypress:se ejecuta la accin cuando se pre-
siona una tecla del teclado.
OnkeydownOnkeydown: se ejecuta la accin cuando se detec-
ta que est pulsada la tecla del teclado.
OnkeyupOnkeyup: se ejecuta la accin cuando la tecla del
teclado fue soltada.
El grupo de atributos de eventos solo es utilizado
cuando el documento HTML incorpora el lenguaje
JavaScript, ya que a travs de ellos, es posible lo-
grar que el sitio web responda ante la interaccin
del usuario. Por ejemplo, podemos verlos en accin
y descubrir su potencial al visitar sitios en los que se
emplean mens de navegacin JavaScript, los cuales
despliegan su lista de elementos cuando nos situa-
mos sobre cada uno de los botones.
FIGURA 13.Los atributos de eventos son muy im
portantes para las aplicaciones web actuales. En
www.cisco.com podemos verlos en accin.
Junto a JavaScript, losatributos de evento ayudana dar interaccin a losdocumentos HTML
Atribut
http://www.cisco.com/http://www.cisco.com/7/21/2019 Diseo Web con HTML y CSS.pdf
58/196
7/21/2019 Diseo Web con HTML y CSS.pdf
59/196
7/21/2019 Diseo Web con HTML y CSS.pdf
60/196
2. Del diseo al HTML
58
4
Dentro de la etiqueta bodybody,
presione la tecla
y comience a escribir la
primera etiqueta, que puede
ser cualquiera de las
existentes. En este caso,
ser .
Las etiquetas llevan una
apertura y un cierre, lo que
signica que, cuando abra
una etiqueta, debe
cerrarla. Para cerrar ,
escriba .
Este cierre debe aparecer
al nal del contenido
de la etiqueta; es decir,
el contenido tiene queir entre la apertura y el cierre.
3
PASO A PASO /2(Cont.)
7/21/2019 Diseo Web con HTML y CSS.pdf
61/196
7/21/2019 Diseo Web con HTML y CSS.pdf
62/196
7/21/2019 Diseo Web con HTML y CSS.pdf
63/196
Captulo 3
Aqu veremos las partes que componen laestructura de un sitio web, su descripcin ylos elementos que contienen.
Estructura del sitio
7/21/2019 Diseo Web con HTML y CSS.pdf
64/196
7/21/2019 Diseo Web con HTML y CSS.pdf
65/196
Ilustraciones: los fondos creados a partir de ilu
traciones suelen tener un toque de personalidad
originalidad. Sin embargo, esta tcnica en gen
ral transmite un espritu algo infantil, que no siem
pre resulta apropiado. Como sabemos, las ilustr
ciones pueden aplicarse como patrones y tambi
como imgenes de fondo y, a diferencia de las f
tografas, estn compuestas por pocos colores, p
lo que pueden ser optimizadas con formato GIFGIF
PNGPNG, de peso reducido.
Fotografas: si encontramos una fotografa apro-
piada, podemos lograr un ambiente muy realista al
utilizarla como fondo. Habitualmente, la foto utili-
zada recibe un importante retoque y se aplica de
manera ja a travs de la propiedad background-background-
attachmentattachment. Los contenidos quedarn por encima
de ella y, al hacer scroll, se deslizarn independien-
temente del fondo. Recordemos que no es aconseja-
ble aplicar una fotografa a modo de patrn, porque
su repeticin genera saltos visuales.
FIGURA 2.El uso de
texturas enriquece el
lenguaje grco,
transmitiendo diferentes
conceptos o ideas. En
www.gomammoth.co.uk
encontramos un ejemplo
de uso de textura.
FIGURA 3.Las fotografas
crean un entorno realista,
difcil de lograr mediante
otras tcnicas. Encontramos
un gran ejemplo en
www.alexarts.ru/en.
Tendencias en el diseo de fond
http://www.gomammoth.co.uk/http://www.gomammoth.co.uk/http://www.alexarts.ru/enhttp://www.alexarts.ru/enhttp://www.alexarts.ru/enhttp://www.gomammoth.co.uk/7/21/2019 Diseo Web con HTML y CSS.pdf
66/196
7/21/2019 Diseo Web con HTML y CSS.pdf
67/196
para el cabezal y un color pleno u otra imagen com
fondo para el cuerpo. As se logra un corte visual e
tre ambos sectores.
general, el trabajo de implementacin del fondo se
realiza con mayor cuidado, dado que el riesgo de
que los elementos queden desfasados es ms noto-
rio que en la implementacin de fondos ubicados en
diferentes planos.
Fondos compuestos por varios fondos:aqu se
aprovecha el fondo para separar los contenidos. De
esta manera, se utiliza, por ejemplo, una ilustracin
FIGURA 5.
Enwww.pixelimagedubai.com
vemos un sitio cuyo fondo
acta como marco de los
contenidos principales.
FIGURA 6.The Blizzards
(www.theblizzards.ie)
presenta un fondo que se
integra a los contenidos
principales, lo que disminuy
el nivel de profundidad.
En los fondos compuestosse aprovecha el fondo para
separar los contenidos
Tendencias en el diseo de fond
http://www.pixelimagedubai.com/http://www.pixelimagedubai.com/http://www.pixelimagedubai.com/http://www.theblizzards.ie/http://www.theblizzards.ie/http://www.theblizzards.ie/http://www.pixelimagedubai.com/7/21/2019 Diseo Web con HTML y CSS.pdf
68/196
7/21/2019 Diseo Web con HTML y CSS.pdf
69/196
7/21/2019 Diseo Web con HTML y CSS.pdf
70/196
3. Estructura del sitio
68
BACKGROUND-ATTACHMENTEsta propiedad no es muy utilizada. Su efecto es
mantener ja la imagen de fondo de un elemento
mientras el contenido se desplaza por delante de ella
cuando nos movemos con el scroll.
en el eje X y, luego, un color pleno. Esto es comn
en sitios que son muy largos, ya que es posible usar
una imagen vistosa o un gradiente y luego, si el con-
tenido es muy extenso, solo se visualizar el color
de fondo.
FIGURA 8.Arriba, podemos ver una imagen
repitindose en ambos ejes del contenedor.
A la derecha, solo se repite en el eje X.
FIGURA 9.Enwww.anthonynolan.org,la imagen
del degrad se repite en la
parte