HTML y CSS

Diseñar y construir sitios web

Jon DuCkeTT

JoHn WiLey & SonS, inC.

inC.
HTML y CSS
DISEÑAR Y CONSTRUIR SITIOS WEB

Publicado por © 2011 por JohnWiley & Sons, Inc., Indianápolis, Indiana
JohnWiley & Sons, Inc.10475 ISBN: 978-1-118-00818-8
Crosspoint Boulevard Fabricado en los Estados Unidos de América
Indianapolis, IN 46256 Publicado simultáneamente en Canadá
www.wiley.com 10 9 8 7 6 5 4 3 2 1

Ninguna parte de esta publicación puede ser reproducida, almacenada en un sistema de recuperación o t ransmitida en cualquier forma o por cualquier medio,
electrónico, mecánico, fotocopiado, grabación, escaneo o de otro tipo, excepto según lo permitido por las Secciones 107 o 108 de los Derechos de Autor de los
Estados Unidos de 1976. Actuar, sin el permiso previo por escrito del editor, o la autorización mediante el pago de la tarifa correspondiente por copia al Copyright
Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646 -8600. Las solicitudes de permiso al Editor deben dirigirse al
Departamento de Permisos, JohnWiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-
6011, fax (201) 748-6008 o en línea en http://www.wiley.com/go/permissions.

Límite de responsabilidad / Renuncia de garantía: El editor y el autor no hacen declaraciones o garantías con respecto a la precisión o integridad
del contenido de este trabajo y específicamente renuncian a todas las garantías, incluidas, entre otras, las garantías de idoneidad para un propósito particular.
No se puede crear ni ampliar garantía mediante ventas o materiales promocionales. Los consejos y estrategias aquí contenidos pueden no ser adecuados para
todas las situaciones. Este trabajo se vende con el entendimiento de que el editor no se dedica a prestar servicios legales, contables u otros servicios
profesionales. Si se requiere asistencia profesional, se deben buscar los servicios de una persona profesional competente. Ni el editor ni el autor serán
responsables de los daños que se deriven del mismo. El hecho de que en este trabajo se haga referencia a una organización o sitio web como una cita y / o una
fuente potencial de información adicional no significa que el autor o el editor respalden la información que la organización o el sitio web pueden proporcionar
o las recomendaciones que pueden hacer. Además, los lectores deben tener en cuenta que los sitios web de Internet enumerados en este trabajo pueden
haber cambiado o desaparecido entre el momento en que se escribió y el momento en que se leyó.

Para obtener información general sobre nuestros otros productos y servicios, comuníquese con nuestro Departamento de Atención al Cliente dentro de los Estados Unidos al

(877) 762-2974, fuera de los Estados Unidos al (317) 572-3993 o envíe un fax al (317) 572-4002.

Wiley también publica sus libros en una variedad de formatos electrónicos. Es posible que parte del contenido que aparece impreso no esté disponible en libros electrónicos.

Número de control de la Biblioteca del Congreso: 2011932082

Marcas comerciales: Wiley y el logotipo de Wiley son marcas comerciales o marcas comerciales registradas de JohnWiley & Sons, Inc. y / o sus
afiliadas, en los Estados Unidos y otros países, y no se pueden usar sin permiso por escrito. Todas las demás marcas comerciales son propiedad de
sus respectivos dueños. JohnWiley & Sons,
S ons, Inc. no está asociado con ningún producto o proveedor mencionado en este libro.
 CreDiTos

Para JohnWiley & Sons, Inc.

Editor ejecutivo Autor Fotografía

Carol Long Jon Duckett John Stewardson
johnstewardson.com
johnstewardson.com
MARKETINgMANAgER Diseñador de la portada
Ashley Zurcher Emme Stone FOTOGRAFÍA ADICIONAL
occidental
Jefe de producción DISEÑO Y DISEÑO Joe Robertson
Tim Tate Jon Duckett flickr.com/photos/mindfire
Emme Stone Jules Clancy
EDITOR DE PRODUCCIÓN thestonesoup.com
Daniel Scribner EDITOR TÉCNICO fuelle de kylie
Chris Mills gusset.net
VICEPRESIDENTE Y Michael Stillwell
EDITOR EJECUTIVO DEL GRUPO REVISORES TÉCNICOS beebo.org
Richard Swadley Andy Stone
Angela Shimell
VICEPRESIDENTE Y DonnaWatson
EDITOR EJECUTIVO Martín Callanan
Barry Pruett Rob Jacoby
Tony Berry
EDITOR ASOCIADO
JimMinatel

COBERTURA DE PRODUCCIÓN,
CUBIERTA
Katie Crocker
Pruebe y descargue todo el código de este libro en línea en:
http://www.htmlandcssbook.com/code/
 Contenido

Introducción 2
Capítulo 1: Estructura 12
Capítulo 2: Texto 40
Capítulo 3: Listas 62
Capítulo 4: Enlaces 74
Capítulo 5: Imágenes 94
Capítulo 6: Tablas 126
Capítulo 7: Formularios 144
Capítulo 8: Marcado adicional 176
Capítulo 9: Flash, video y audio 200
Capítulo 10: Introducción a CSS 226
Capítulo 11: Color 246
Capítulo 12: Texto 264
Capítulo 13: Cajas 300
Capítulo 14: Listas, tablas y formularios 330
Capítulo 15: Imágenes
Capítulo 16: Diseño 358
406
Capítulo 17: Diseño HTML5 Capítulo 428
18: Proceso y diseño Capítulo 19: 452
Índice de información práctica 476
493
 Introducción

X Sobre este libro

X Como funciona la web
X Aprendiendo de otras páginas
 En primer lugar, gracias por tomar este
libro. Ha sido escrito pensando en dos
tipos de personas muy diferentes:

●
Aquellos
web desdeque quieran aprender a diseñar y construir sitios
cero.

● Cualquiera que tenga un sitio web (que puede crearse mediante un

sistema de gestión de contenido, software de blogs o una
plataforma de comercio electrónico) y desee tener más control sobre
la apariencia de sus páginas

Lo único que necesita para usar este libro es una

computadora con un navegador web y un editor de texto
(como el Bloc de notas, que viene con Windows, o TextEdit,
que viene con Macs).

3 INTRODUCCIÓN
 Introducción las páginas vienen al principio de cada Referencia las páginas presentan piezas clave de código HTML
capítulo. Presentan los temas clave sobre los que y CSS. El código HTML se muestra en azul y el código CSS
aprenderá

Fondo las páginas aparecen en blanco; explican el Diagrama y las páginas de infografías se muestran sobre
contexto de los temas tratados que se discuten en cada un fondo oscuro. Proporcionan una referencia visual simple

Ejemplo Las páginas reúnen los temas que ha Resumen las páginas vienen al final de cada capítulo.
aprendido y demuestran cómo se pueden aplicar en Le recuerdan los temas clave que se trataron en cada
cada uno. capítulo.

INTRODUCCIÓN 4

¿Es difícil de aprender?

 Muchos libros que enseñan HTML y CSS parecen Me he centrado en el código que
necesita usar el 90% del tiempo y
manuales aburridos. Para que le resulte más fácil omití el código que rara vez verá,
aprender, descartamos la plantilla tradicional incluso si escribir sitios web es su

utilizada por los editores y la rediseñamos trabajo de tiempo completo. Al final

del libro, si te encuentras con el otro
este libro desde cero. 10%, podrás buscarlo en Google para
descubrir lo que significa rápida y
fácilmente.

En el trabajo, cuando la gente mira mi Comprender HTML y CSS puede ayudar También agregué información práctica
pantalla y la ve llena de código, no es a cualquiera que trabaje con la web; los sobre temas que me preguntan
inusual recibir un comentario sobre el diseñadores pueden crear sitios más comúnmente, como cómo preparar
aspecto muy complicado o lo atractivos y utilizables, los editores de imágenes, audio y video para la web,
inteligente que debo ser para sitios web pueden crear mejor cómo abordar el diseño y construcción
entenderlo. La verdad es que no es contenido, los especialistas en de un nuevo sitio, cómo mejorar su
tan difícil aprender a escribir páginas marketing pueden comunicarse con su clasificación en los motores de
web y leer el código utilizado para audiencia de manera más efectiva y los búsqueda (SEO ) y cómo utilizar Google
crearlas; ciertamente no tiene que ser gerentes pueden encargar mejores Analytics para obtener información
un "programador". sitios y sacar lo mejor de sus equipos. sobre los visitantes de su sitio.

5 INTRODUCCIÓN

la estructura de
 este libro

Para enseñarle cómo crear páginas web,

este libro se divide en tres secciones:

1: htML 2: css 3: PRÁCTICO

Dedicaremos el primer capítulo a Comenzamos esta sección con un Terminamos con información
analizar cómo se utiliza HTML para capítulo que explica cómo CSS usa útil que lo ayudará a crear
crear páginas
comienzas web. Verás
escribiendo lasque
palabras reglas
estilo ypara permitirle
el diseño de lascontrolar
páginas el mejores sitios web.
que quieres que aparezcan en tu web. Luego pasamos a ver la Observamos algunas etiquetas
página. Luego, agrega etiquetas o amplia variedad de propiedades nuevas que se introducirán en
elementos a las palabras para que el CSS que puede usar en sus reglas HTML5 para ayudar a describir la
navegador sepa qué es un CSS. Estas propiedades estructura de sus páginas. HTML5 es
encabezado, dónde comienza y generalmente se dividen en una de la última versión de HTML (aún en
termina un párrafo, etc. dos categorías: desarrollo en el momento de escribir
este artículo). Antes de aprender
El resto de esta sección presenta las Presentación: Cómo controlar acerca de estos elementos, necesita
etiquetas que tiene a su disposición cosas como el color del texto, las comprender bien cómo se usa CSS
para crear páginas web, agrupadas fuentes que desea usar y el tamaño para controlar el diseño de páginas
en capítulos
capítulos sobre: texto, listas, de esas fuentes, cómo agregar web. Hay un capítulo que le explica
enlaces, imágenes, tablas, colores de fondo a las páginas (o un proceso de diseño que le gustaría
formularios, video, audio y flash, y partes de una página) y cómo seguir al crear un nuevo sitio web.
elementos varios. agregar imágenes de fondo.

Debo advertirles que los ejemplos de Diseño: Cómo controlar dónde se Finalmente, terminamos analizando
los primeros nueve capítulos no son colocan los diferentes elementos en temas que lo ayudarán una vez que
emocionantes de ver, sin embargo, la pantalla. También aprenderá haya creado su sitio, como ponerlo
son la base de cada página web. Los varias técnicas que utilizan los en la web, optimización de motores
siguientes capítulos sobre CSS le profesionales para hacer más de búsqueda (SEO) y usar software
mostrarán cómo hacer que sus atractivas sus páginas. de análisis para rastrear quién llega a
páginas se vean mucho más su sitio y qué están mirando. .
interesantes.

INTRODUCCIÓN 6

como la gente
 acceder a la web

Antes de analizar el código utilizado para crear sitios

web, es importante considerar las diferentes formas
en que las personas acceden a la web y aclarar algo
de terminología.

Navegadores servidores web lectores de pantalla

Las personas acceden a sitios web mediante Cuando le pide a su navegador una Lectores de pantalla son programas
un software llamado navegador web. página web, la solicitud se envía a que leen el contenido de la pantalla de
Los ejemplos populares incluyen través de Internet a una computadora una computadora a un usuario. Son

Firefox, Internet Explorer, especial conocida como Servidor web comúnmente utilizados por personas
Safari, Chrome y Opera. que aloja el sitio web. con discapacidad visual.

Para ver una página web, los Los servidores web son computadoras De la misma manera que muchos países
usuarios pueden escribir una especiales que están constantemente tienen legislaciones que requieren que
dirección web en su navegador, conectadas a Internet y están los edificios públicos sean accesibles para
seguir un enlace de otro sitio o usar optimizadas para enviar páginas web a las personas con discapacidades, también
un marcador. las personas que las soliciten. se han aprobado muchas leyes que
requieren que los sitios web sean
Fabricantes de software Algunas grandes empresas tienen sus accesibles para las personas con
lanzan regularmente nuevas versiones de propios servidores web, pero es más discapacidades.
navegadores con nuevas funciones y común utilizar los servicios de un
admiten nuevas incorporaciones a los alojamiento web empresa que cobra A lo largo de este libro, verá varias
idiomas. Sin embargo, es importante una tarifa para alojar su sitio. referencias a lectores de pantalla.
recordar que muchos propietarios de Estas notas ayudarán a garantizar
computadoras no ejecutarán las últimas que los sitios que cree sean
dispositivos
versiones de estos navegadores. Por lo accesibles para las personas que
tanto, no puede confiar en que todos los Las personas acceden a sitios web en utilicen dicho software.
visitantes de su sitio puedan utilizar la una gama cada vez mayor de
última funcionalidad que se ofrece en dispositivos, incluidos ordenadores de Es interesante observar que
todos los navegadores. sobremesa, portátiles, tabletas y tecnologías similares a las empleadas
teléfonos móviles. Es importante por los lectores de pantalla también se
recuerde que varios dispositivos tienen están utilizando en otras áreas donde
Aprenderá a saber qué navegadores diferentes tamaños de pantalla y las personas no pueden leer una
utilizan los visitantes para acceder a algunos tienen conexiones más rápidas pantalla, como cuando conducen o

su sitio web en el Capítulo 19. a la web que otros. hacen jogging.

7 INTRODUCCIÓN

HowweBsItes
son creados
 Todos los sitios web usan HTML y CSS, pero los sistemas de
administración de contenido, el software de blogs y las
plataformas de comercio electrónico a menudo agregan
algunas tecnologías más a la mezcla.

lo que ves como se crea htML5 y css3

Cuando está mirando un sitio Los sitios web pequeños a menudo se Desde que se creó la web, ha
web, lo más probable es que escriben usando HTML y CSS. habido varias versiones de
su navegador reciba HTML y HTML y CSS, cada una
CSS
alojadel servidor
el sitio. web que
El navegador
Los sitios web más grandes, en
particular los que se actualizan
pretende ser una mejora con
respecto a la versión anterior.
web interpreta el código regularmente y utilizan un sistema de
HTML y CSS para crear la gestión de contenido (CMS), En el momento de escribir este
página que ve. herramientas de blogs o software de libro, HTML5 y CSS3 aún se
comercio electrónico, a menudo utilizan estaban desarrollando. Aunque no
La mayoría de las páginas web tecnologías más complejas en el se habían finalizado, muchos
también incluyen contenido adicional servidor web, pero estas tecnologías se navegadores ya eran compatibles
como imágenes, audio, video o utilizan en realidad para producir HTML. con algunas funciones de estos
animaciones, y este libro le enseñará y CSS que luego se envía al navegador. lenguajes y mucha gente estaba
cómo prepararlas para su uso en la Por lo tanto, si su sitio utiliza estas usando el código más reciente en
web y luego cómo insertarlas en sus tecnologías, podrá utilizar sus nuevos sus sitios web. Por tanto, he
páginas web. conocimientos de HTML y CSS para optado por enseñarles estas
tener más control sobre el aspecto de últimas versiones.
Algunos sitios también envían su sitio.
JavaScript o Flash a su Debido a que HTML5 y CSS3 se basan en
navegador, y verá cómo agregar Los sitios más grandes y complejos versiones anteriores de estos lenguajes,
JavaScript y Flash en sus páginas como estos pueden usar una base de aprenderlos significa que también podrá
web. Ambas tecnologías son datos para almacenar datos y lenguajes comprender las versiones anteriores de
temas avanzados sobre los que de programación como PHP, ASP.Net, ellos. He agregado notas claras cuando
puede aprender más una vez Java o Ruby en el servidor web, pero no el código es nuevo y también cuando
que domine HTML y CSS, si lo es necesario que conozca estas puede que no funcione en navegadores
desea. tecnologías para mejorar lo que ve el más antiguos.
usuario. . Las habilidades que aprenderá
en este libro deberían ser suficientes
para ayudarle en ese camino.

INTRODUCCIÓN 8

CÓMO FUNCIONA LA WEB

 Cuando visita un sitio web, el servidor web que aloja ese
sitio podría estar en cualquier parte del mundo. Para
que pueda encontrar la ubicación del servidor web, su
navegador se conectará primero a un servidor del
Sistema de nombres de dominio (DNS).

En esta página puede ver ejemplos que ● Visita de un usuario en Barcelona

B arcelona A la derecha puede ver lo que sucede
demuestran cómo el servidor web que sony.jp en tokio cuando un usuario web en Inglaterra
aloja el sitio web que está visitando quiere ver el sitio web de la galería
● Visita de un usuario en Nueva York
puede estar en cualquier parte del de arte del Louvre en Francia, que se
google.com en San Francisco
mundo. Son los servidores DNS los que encuentra en
le dicen a su navegador cómo encontrar ● Visita de un usuario en Estocolmo www.louvre.fr. En primer lugar, el

el sitio web. qantas.com.au En Sydney navegador de Cambridge se pone en

contacto con un servidor DNS en Londres.
● Visita de un usuario en Vancouver
El servidor DNS luego le dice al
airindia.in en Bangalore
navegador la ubicación del servidor

web que aloja el sitio en París.

9 INTRODUCCIÓN

2
 Su computadora se pone en contacto
con una red de servidores
denominada servidores del Sistema
1 de nombres de dominio (DNS). Estos
Cuando se conecta a la web, lo hace a actúan como guías telefónicas; le
través de un proveedor de servicios de dicen a su computadora la dirección
Internet (ISP). Escribes un IP asociada con el nombre de
nombre de dominio o dirección dominio solicitado. Una dirección IP
web en su navegador para visitar es un número de hasta 12 dígitos
un sitio; por ejemplo: google.com, separados por puntos / puntos. Cada
bbc.co.uk, microsoft.com. dispositivo conectado a la web tiene
una dirección IP única; es como el
número de teléfono de esa
computadora.

Cambridge

3
LONDRES
El número único que el servidor DNS

devuelve a su computadora permite

que su navegador se comunique con el
servidor web que aloja el sitio web que
solicitó. Un servidor web es una
computadora que está constantemente
conectada a la web y está configurada PARÍS
especialmente para enviar páginas web
a los usuarios.
4

Luego, el servidor web envía la

página que solicitó a su
navegador web.
 Estructura
1
X Comprender la estructura
X Aprendiendo sobre el marcado
X Etiquetas y elementos
 Nos encontramos con todo tipo de documentos
todos los días de nuestra vida. Periódicos,
formularios de seguros, catálogos de tiendas ... la
lista continúa.

Muchas páginas web actúan como versiones electrónicas de estos

documentos. Por ejemplo, los periódicos muestran las mismas historias
impresas que en los sitios web; puede solicitar un seguro a través de la web;
y las tiendas tienen catálogos en línea y servicios de comercio electrónico.

En todo tipo de documentos, la estructura es muy importante para

ayudar a los lectores a comprender los mensajes que está tratando de
transmitir y navegar por el documento. Entonces, para aprender a
escribir páginas web, es muy importante comprender cómo estructurar
documentos. En este capítulo usted:

● Vea cómo HTML describe la estructura de una página web

● Aprenda cómo se agregan etiquetas o elementos a su documento

● Escribe tu primera página web

13 ESTRUCTURA