HTML y CSS

Diseñar y construir sitios web

Jon DuCkeTT

JoHn WiLey & SonS, 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 transmitida 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, 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
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: Diseño 358
Capítulo 16: Imágenes 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 que quieran aprender a diseñar y construir sitios

web desde 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
trabajo de tiempo completo. Al final
utilizada por los editores y la rediseñamos
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 web. Verás que reglas para permitirle controlar el mejores sitios web.
comienzas escribiendo las palabras estilo y el diseño de las páginas
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 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 del servidor web que Los sitios web más grandes, en pretende ser una mejora con
aloja el sitio. El navegador particular los que se actualizan 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 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

1 denominada servidores del Sistema

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
ESTRUCTURA 14
 CÓMO UTILIZAN LAS PÁGINAS
Estructura

Piense en las historias que lee en La estructura es muy similar Ahora piense en un tipo de
un periódico: para cada historia, cuando se ve una noticia en línea documento muy diferente: un
habrá un titular, algo de texto y (aunque también puede incluir formulario de seguro. Los formularios de

posiblemente algunas imágenes. audio o video). Esto se ilustra a la seguros a menudo tienen títulos para

Si el artículo es extenso, puede derecha con una copia de un diferentes secciones, y cada sección contiene

haber subtítulos que dividan la periódico junto con el artículo una lista de preguntas con áreas para que

historia en secciones separadas o correspondiente en su sitio web. usted complete los detalles o casillas de

citas de los involucrados. La verificación para marcar. Nuevamente, la

estructura ayuda a los lectores a estructura es muy similar en línea.

comprender las historias del

periódico.

15 ESTRUCTURA
ESTRUCTURA dieciséis
 Palabra estructurante
documentos

El uso de títulos y subtítulos en Esto podría ampliarse en los subtítulos A la derecha, puede ver un documento
cualquier documento a menudo que se encuentran más abajo en la simple en Microsoft Word. Los
refleja una jerarquía de página. Cuando usamos un procesador diferentes estilos del documento,
información. Por ejemplo, un de texto para crear un documento, como los diferentes niveles de
documento puede comenzar con separamos el texto para darle encabezado, se muestran en el cuadro
un encabezado grande, seguido estructura. Cada tema puede tener un desplegable. Si usa Word con
de una introducción o la nuevo párrafo y cada sección puede regularidad, es posible que también
información más importante. tener un encabezado para describir lo haya usado la barra de herramientas
que cubre. de formato o la paleta para hacer esto.

17 ESTRUCTURA
ESTRUCTURA 18
 En la página anterior, vio cómo se
agregó la estructura a un documento
de Word para que sea más fácil de
entender. Usamos la estructura de la
misma manera cuando escribimos
páginas web.

19 ESTRUCTURA
 DescribeS de htmL
la estructura
de paginas
En la ventana del navegador puede ver una página web que presenta exactamente el mismo
contenido que el documento Word que conoció en la página 18. Para describir la estructura de
una página web, agregamos código a las palabras que queremos que aparezcan en la página.

Puede ver el código HTML de esta página a continuación. No se preocupe por lo que
significa el código todavía. Empezamos a verlo con más detalle en la página siguiente.
Tenga en cuenta que el código HTML está en azul y el texto que ve en la pantalla está en
negro.

<html>
<cuerpo>

<h1>Este es el encabezado principal</h1> <p>Este texto puede ser

una introducción al resto de
la página. Y si la página es larga, puede dividirse en varios
subtítulos.<p> <h2>Este es un subtítulo</h2> <p>Muchos artículos
largos tienen subtítulos para ayudar

sigues la estructura de lo que se está escribiendo. Incluso puede

haber sub-subtítulos (o títulos de nivel inferior).</p>

<h2>Otro subtítulo</h2> <p>Aquí puede ver otro subtítulo.

</p> </body>

</html>

El código HTML (en azul) está formado por caracteres que viven entre paréntesis
angulares; estos se denominan HTML elementos. Los elementos suelen estar formados
por dos etiquetas: una etiqueta de apertura y una etiqueta de cierre. (La etiqueta de
cierre tiene una barra diagonal adicional). Cada elemento HTML le dice al navegador algo
sobre la información que se encuentra entre sus etiquetas de apertura y cierre.

ESTRUCTURA 20
 HtmL UTILIZA ELEMENTOS
para describir el
Estructura de las páginas
Veamos más de cerca el código de la última página. Hay
varios elementos diferentes. Cada elemento tiene una
etiqueta de apertura y una etiqueta de cierre.

Código

<html>

<cuerpo>

<h1>Este es el encabezado principal</h1>

<p>Este texto puede ser una introducción al resto de

la página. Y si la página es larga, puede dividirse en varios
subtítulos.<p>

<h2>Este es un subtítulo</h2>

<p>Muchos artículos largos tienen subtítulos para ayudar

sigues la estructura de lo que se está escribiendo. Incluso
puede haber sub-subtítulos (o títulos de nivel inferior).</p>

<h2>Otro subtítulo</h2>

<p>Aquí puede ver otro subtítulo.</p>

</body>

</html>

21 ESTRUCTURA
 Las etiquetas actúan como contenedores. Te dicen
algo sobre la información que se encuentra entre
sus etiquetas de apertura y cierre.

descripción

La apertura <html> indica que cualquier cosa entre ella y un cierre </html> la etiqueta es código HTML.

El <cuerpo> la etiqueta indica que cualquier cosa entre ella y el cierre

</body> La etiqueta debe mostrarse dentro de la ventana principal del navegador.

Palabras entre <h1> y </h1> son un encabezado principal.

Aparece un párrafo de texto entre estos <p> y </p> etiquetas.

Palabras entre <h2> y </h2> formar un subtítulo.

Aquí hay otro párrafo entre apertura <p> y cerrando </p> etiquetas.

Otro subtítulo dentro <h2> y </h2> etiquetas.

Otro párrafo dentro <p> y </p> etiquetas.

El cierre </cuerpo> La etiqueta indica el final de lo que debería aparecer en la ventana principal del navegador.

El cierre </html> La etiqueta indica que es el final del código HTML.

ESTRUCTURA 22
 UNA MIRADA DE CLASE EN LAS ETIQUETAS

<pag
Personaje>

Sujetador en ángulo recto

(Signo de más que)
Sujetador en ángulo izquierdo
(signo menor que)

etiqueta de apertura

Los caracteres entre paréntesis Por ejemplo, en las etiquetas La etiqueta de cierre tiene una barra
indican el propósito de la etiqueta. sobre el pag significa párrafo. inclinada después del símbolo <.

23 ESTRUCTURA
 Personaje>

</pag Sujetador en ángulo recto

(Signo de más que)
Sujetador en ángulo izquierdo
(signo menor que)

barra inclinada

Etiqueta de cierre

Los términos "etiqueta" y "elemento" Estrictamente hablando, sin embargo, etiqueta y la etiqueta de cierre y cualquier
se utilizan a menudo indistintamente. un elemento comprende la abertura contenido que se encuentre entre ellos.

ESTRUCTURA 24
 Atributos teLL uS
más sobre eLementS

Los atributos proporcionan información adicional

sobre el contenido de un elemento. Aparecen en la
etiqueta de apertura del elemento y se componen de
dos partes: unanombre y un valor, separados por un
signo igual.

atributo
nombre

<p lang= "en-nosotros"> Párrafo en inglés </p>

atributo
Valor

El atributo nombre indica qué El valor es la información o Aquí un atributo llamado lang se utiliza
tipo de información adicional configuración del atributo. Debe para indicar el idioma utilizado en este
está proporcionando sobre el colocarse entre comillas dobles. Los elemento. El valor de este atributo en
contenido del elemento. Debe diferentes atributos pueden tener esta página especifica que está en
escribirse en minúsculas. diferentes valores. inglés de EE. UU.

25 ESTRUCTURA
 HTML5 le permite usar nombres
de atributos en mayúsculas y
omitir las comillas, pero esto no
se recomienda.

atributo
nombre

<p lang= "fr"> Paragraphe en Français </p>

atributo
Valor

La mayoría de los atributos solo La mayoría de los valores de los El valor de la lang atributo es
se pueden usar en ciertos atributos están predefinidos o siguen un una forma abreviada de
elementos, aunque algunos formato estipulado. Observaremos los especificando qué idioma se usa
atributos (como lang) valores permitidos a medida que dentro del elemento que todos
puede aparecer en cualquier elemento. introducimos cada nuevo atributo. los navegadores entienden.

ESTRUCTURA 26
 cuerpo, cabeza y título

<cuerpo> /chapter-01/body-head-title.html HTML

<html>
Conociste al <cuerpo> elemento en el <cabeza>
primer ejemplo que creamos. Todo lo que <título>Este es el título de la página</título> </head>
hay dentro de este elemento se muestra
dentro de la ventana principal del <cuerpo>
navegador. <h1>Este es el cuerpo de la página</h1> <p>Todo lo que
esté dentro del cuerpo de una página web se muestra en la
ventana principal del navegador.</p> </body>

<cabeza> </html>

Antes del <cuerpo> elemento que a

menudo verá un <cabeza> elemento.
Esto contiene información Resultado
acerca de la página (en lugar de la
información que se muestra dentro de
la parte principal de la ventana del
navegador que está resaltada en azul
en la página opuesta). Por lo general,
encontrará un <título>
elemento dentro del <cabeza>
elemento.

<título>
El contenido del <título>
Los elementos se muestran en la parte
superior del navegador, arriba de
donde normalmente escribe la URL de
la página que desea visitar, o en la
pestaña de esa página (si su navegador
usa pestañas para permitirle ver varias
páginas al mismo tiempo ).

27 ESTRUCTURA
 Cualquier cosa escrita entre
<título> Las etiquetas aparecerán en la barra

de título (o pestañas) en la parte superior de la

ventana del navegador, resaltadas en naranja

aquí.

Cualquier cosa escrita entre el <

cuerpo> Las etiquetas aparecerán

en la ventana principal del

navegador, resaltadas en azul aquí.

Es posible que sepa que HTML son las página a otra de forma rápida y página, agregamos código alrededor del

siglas de HyperText Markup sencilla. Un lenguaje de marcado le texto original que queremos mostrar y el

Language. La parte de hipertexto se permite anotar texto, y estas navegador luego usa el código para

refiere al hecho de que HTML le anotaciones proporcionan un mostrar la página correctamente.

permite crear enlaces que permiten a significado adicional al contenido de Entonces, las etiquetas que agregamos son

los visitantes pasar de una un documento. Si piensas en una web el marcado.

ESTRUCTURA 28
 crear una página web en
una PC
Para crear su primera página web en
una PC, inicie el Bloc de notas. Puede
11
encontrar esto yendo a:

Comienzo

Todos los programas (o

programas) Accesorios
Bloc

También te puede interesar descargar

un editor gratuito llamado Notepad ++
de notepad-plus-plus.org.

Escriba el código que se muestra a la

derecha.
2

29 ESTRUCTURA
 artículo

Vaya al menú Archivo y seleccione

Guardar como... Deberá guardar
3
el archivo en algún lugar que
pueda recordar. Si lo desea,
puede crear una carpeta para los
ejemplos que pruebe de este libro.

Guarde este archivo como primer examen.

html.Asegúrese de que el Guardar como

tipo desplegable tiene Todos los archivos

seleccionado.

Inicie su navegador web. Ve a la

Archivo menú y seleccione Abierto.
4
Busque el archivo que acaba de
crear, selecciónelo y haga clic en el
Abierto botón. El resultado
debería parecerse a la captura de
pantalla de la izquierda.

Si no se ve así, busque el archivo que

acaba de crear en su computadora y
asegúrese de que tenga la extensión
de archivo.htmlsi esto es .TXT luego
debe volver al Bloc de notas y
guardar el archivo nuevamente, pero
esta vez coloque comillas alrededor
del nombre "firsttest.html ").

STR
TRUCTU
URm
E i 30
Connecticut
 crear una página web en
una mac
Para crear su primera página web
en una Mac, inicie TextEdit. Esto
11
debería estar en tuAplicaciones
carpeta.

También puede descargar un editor

de texto gratuito para crear páginas
web llamado TextWrangler que está
disponible en
barebones.com.

Escriba el código que se muestra a la

derecha.
2

31 ESTRUCTURA
 artículo

Ahora ve al Archivo menú y seleccione

Guardar como... Deberá guardar el
3
archivo en algún lugar que pueda
recordar.

Si lo desea, puede crear una carpeta

para los ejemplos que pruebe de
este libro. Guarde este archivo como
first-test.html. Probablemente verá

una ventana como la captura de

pantalla a la izquierda.

Quieres seleccionar el Utilice .html

botón.

A continuación, inicie su navegador web,

vaya a la Archivo menú y seleccione
4
Abierto. Debe buscar el archivo que
acaba de crear, seleccionarlo y hacer
clic en el Abierto botón. El resultado
debería parecerse a la captura de
pantalla de la izquierda.

Si no se ve así, es posible que

deba cambiar una de las
configuraciones en TextEdit. Vaya
al menú TextEdit y seleccione
Preferencias Luego, en las
preferencias de Abrir y guardar,
marque la casilla que dice Ignore los comandos de

texto enriquecido en archivos HTML.

Ahora intente guardar el archivo nuevamente.

STR
TRUCTU
URm
E i 32
Connecticut
 código en un sistema de
gestión de contenido

Si está trabajando con un sistema de que le permite ingresar un título system podría usar la misma
gestión de contenido, una plataforma de para la página, otro cuadro para el plantilla para mostrar todos sus
blogs o un comercio electrónico artículo principal, una forma de productos). La información que
aplicación, probablemente iniciará sesión ingresar una fecha de publicación y proporcione se colocará en las
en una sección de administración especial algo para indicar a qué sección del plantillas.
del sitio web para controlarla. Las sitio pertenece esta página.
herramientas proporcionadas en las La ventaja de este enfoque es que las
secciones de administración de estos sitios Para una tienda de comercio electrónico, personas que no saben cómo
generalmente le permiten editar partes de es posible que tenga casillas que le escribir páginas web pueden agregar
la página en lugar de la página completa, permitan ingresar un título para el información a un sitio web y también
lo que significa que rara vez verá el < producto, una descripción del producto, su es posible cambiar la presentación
html>, <head>, o <cuerpo> elementos. precio y la cantidad disponible. de algo en la plantilla, y
automáticamente actualizará cada
Eso se debe a que utilizan una única página que use esa plantilla. Si
Mirando el sistema de "plantilla" para controlar todas las imagina una tienda de comercio
administración de contenido en la páginas de una sección del sitio. (Por electrónico con 1,000 artículos a la
página opuesta, tiene un cuadro ejemplo, un comercio electrónico venta, simplemente

33 ESTRUCTURA
alterar una plantilla es mucho más fácil están agregando código HTML a su podría tener un botón (que a menudo
que cambiar la página para cada texto, al igual que el código que ha muestra corchetes angulares) para
producto individual. En sistemas como visto anteriormente en este indicar cómo acceder al código.
este, cuando tiene un gran bloque de capítulo. Muchos de estos editores
texto que puede editar, como un tendrán una opción que le permitirá Algunos sistemas de gestión de
artículo de noticias, una entrada de blog ver (y editar) el código que contenido ofrecen herramientas que
o la descripción de un producto en una producen. también le permiten editar los
tienda de comercio electrónico, a archivos de plantilla. Si intenta editar
menudo verá un editor de texto. Una vez que sepa cómo leer y archivos de plantilla, debe consultar
editar este código, puede tener la documentación de su CMS, ya que
más control sobre estas secciones todos difieren entre sí. Debe tener
Los editores de texto generalmente tienen de su sitio web. cuidado al editar archivos de plantilla
controles un poco como los de su procesador porque si elimina el código incorrecto
de texto, lo que le brinda diferentes opciones En el ejemplo anterior, puede ver que el o agrega algo en el lugar incorrecto,
para aplicar estilo al texto, agregar enlaces o editor de texto tiene una pestaña para el sitio puede dejar de funcionar por
insertar imágenes. Detrás de escena estos vistas Visual / HTML de lo que ingresa el completo.
editores usuario. Otros sistemas

ESTRUCTURA 34
 Mirando cómo otros
LOS SITIOS ESTÁN CONSTRUIDOS

Cuando la web despegó por primera Una vez que haya abierto esta Al principio, este código puede
vez, una de las formas más comunes página, puede buscar el Vista parecer complicado, pero no se
de aprender sobre HTML y descubrir menú en su navegador, y seleccione desanime. Cuando haya
nuevos consejos y técnicas era mirar la opción que dice Fuente o terminado el siguiente capítulo
el código fuente que formaba las Ver fuente. (El título cambia de este libro, podrá
páginas web. según el navegador que esté comprenderlo.
utilizando).
En estos días hay muchos más libros Todos los ejemplos de este libro se
y tutoriales en línea que enseñan Debería ver aparecer una nueva encuentran en el sitio web y puede
HTML, pero aún puede ver el código ventana, que contendrá el código utilizar esta sencilla técnica en
que le envía un servidor web. Para fuente que se utilizó para crear cualquiera de las páginas de ejemplo
probar esto por sí mismo, esta página. para ver cómo funcionan.
simplemente vaya al código de
muestra de este capítulo, en Puedes ver este resultado en la También puede descargar todo el
www.htmlandcssbook.com/ code / y fotografía de la derecha. La página código de este libro desde el mismo
haga clic en el enlace llamado "Ver que ve es la ventana en la parte sitio web haciendo clic en el enlace
código fuente". superior; el código está debajo. "Descargar".

35 ESTRUCTURA
ESTRUCTURA 36
 Resumen
Estructura

X Las páginas HTML son documentos de texto.

X HTML usa etiquetas (caracteres que se ubican entre paréntesis

angulares) para dar a la información que rodean un significado
especial.

X Las etiquetas a menudo se denominan elementos.

X Las etiquetas suelen venir en pares. La etiqueta de apertura

denota el inicio de un contenido; la etiqueta de cierre denota
el final.

X Las etiquetas de apertura pueden llevar atributos, que nos dicen

más sobre el contenido de ese elemento.

X Los atributos requieren un nombre y un valor.

X Para aprender HTML, necesita saber qué etiquetas están

disponibles para su uso, qué hacen y adónde pueden ir.
 2
Texto

X Encabezados y párrafos
X Negrita, cursiva, énfasis
X Marcado estructural y semántico
 Al crear una página web, agrega etiquetas
(conocidas como marcado) al contenido de la página.
Estas etiquetas proporcionan un significado
adicional y permiten a los navegadores mostrar a los
usuarios la estructura adecuada para la página.

En este capítulo nos enfocamos en cómo agregar marcas al texto que

aparece en sus páginas. Aprenderás sobre:

● Marcado estructural: los elementos que puede utilizar para

describir tanto los encabezados como los párrafos

● Marcado semántico: que proporciona información

adicional; como dónde se pone el énfasis en una oración,
que algo que ha escrito es una cita (y quién lo dijo), el
significado de las siglas, etc.

41 TEXTO
TEXTO 42
 Encabezados

<h1> capítulo-02 / encabezados.html HtMl

<h1>Este es un encabezado principal</h1>

<h2> <h2>Este es un título de nivel 2</h2> <h3>

Este es un título de nivel 3</h3> <h4>Este es

<h3> un título de nivel 4</h4> <h5>Este es un título

de nivel 5</h5> <h6>Este es un título de nivel
6</h6>

<h4>
<h5>
<h6>
Resultado
HTML tiene seis "niveles"
de títulos:

<h1> se utiliza para los títulos principales

<h2> se utiliza para subpartidas

Si hay más secciones bajo los

subtítulos, entonces el
<h3> se utiliza el elemento, y así

sucesivamente ...

Los navegadores muestran el contenido

de los títulos en diferentes tamaños. El
contenido de un <h1> elemento es el
más grande, y el contenido de un <h6>
elemento es el más pequeño. El tamaño
exacto en el que cada navegador
muestra los títulos puede variar
ligeramente. Los usuarios también
pueden ajustar el tamaño del texto en
su navegador. Verá cómo controlar el
tamaño del texto, su color y las fuentes
utilizadas cuando veamos CSS.

43 TEXTO
 Para gramo rTaiP
cHles

Ht M
Mll capítulo-02 / párrafoss.html
<p>
<p
ht>Amlpag
>aragraph consta de una o más oraciones
que forman una unidad autónoma de discurso. El comienzo de un Para crear un párrafo, rodee las
párrafo se indica con una nueva línea.</p> palabras que componen el
párrafo con una apertura <p>
<p>El texto es más fácil de entender cuando está dividido etiqueta y cierre </p> etiqueta.

en unidades de texto. Por ejemplo, un libro puede tener

capítulos. Los capítulos pueden tener subtítulos. Debajo de cada De forma predeterminada, un
encabezado habrá uno o más navegador mostrará cada párrafo en
párrafos.</p> una nueva línea con algo de espacio
entre él y los párrafos posteriores.

Resultado

TE XT 44
 Negrita cursiva

<b> capítulo-02 / bold.html HtMl

<p>Así es como hacemos aparecer una palabra <b>audaz.</b>
Incluyendo palabras en las etiquetas </p>
<b> y </b> podemos hacer que los <p>Dentro de la descripción de un producto, es posible que vea algunos
caracteres aparezcan en negrita. <b>características clave</b> en negrita.</p>

El <b> El elemento también

representa una sección de texto que
se presentaría de una manera
visualmente diferente (por ejemplo,
Resultado
palabras clave en un párrafo) aunque
el uso de <b> elemento no implica
ningún significado adicional.

<i> capítulo-02 / italic.html HtMl

<p>Así es como hacemos aparecer una palabra <yo>itálico</yo>.
Incluyendo palabras en las etiquetas </p>
<i> y </yo> podemos hacer que los <p>Es una papa <yo>Solanum teberosum</yo>.</p> <p>El
caracteres aparezcan en cursiva. Capitán Cook navegó hacia Australia en el
<i>Esfuerzo</yo>.</p>
El <yo> El elemento también representa
una sección de texto que se diría de una
manera diferente al contenido
circundante, como términos técnicos,
Resultado
nombres de barcos, palabras
extranjeras, pensamientos u otros
términos que normalmente estarían en
cursiva.

45 TEXTO
 suPersacrrTiPicTl m
y i
subíndice

HtMl capítulo-02 / superscript-and-subscript.html

<sup>
<p>En el 4^th de septiembre aprenderás
acerca de E = MC².</p> <p>La cantidad de CO< El <sup> El elemento se usa para
sub>2</sub> en la atmósfera contener caracteres que deben ser
creció 2 ppm en 2009₁.</p> superíndices, como los sufijos de
fechas o conceptos matemáticos
como elevar un número a una
potencia como 22.

Resultado
<sub>
El <sub> El elemento se utiliza para
contener caracteres que deben ser
subíndices. Se usa comúnmente con
notas al pie o fórmulas químicas
como H 0. 2

TE XT 46
 ESPACIO BLANCO

Para facilitar la lectura del código, los

capítulo-02 / espacio-blanco.html HtMl
autores de páginas web a menudo agregan

espacios adicionales o comienzan algunos <p>La luna se aleja de la Tierra.</p>

elementos en nuevas líneas. <p>La luna se está alejando de la Tierra.</p>
<p>La luna se aleja de
Cuando el navegador se encuentra con
dos o más espacios uno al lado del otro, Tierra.</p>
solo muestra un espacio. Del mismo
modo, si se encuentra con un salto de
línea, también lo trata como un espacio
único. Esto se conoce como
Resultado
colapso del espacio en blanco.

A menudo verá que los autores de

páginas web aprovechan el colapso de
los espacios en blanco para sangrar su
código para que sea más fácil de seguir.

47 TEXTO
 línea Br Aera
Tkicsl m
y i
Reglas de HorizonTal

HtMl capítulo-02 / saltos de línea.html

<br />
<p>La tierra<br />se vuelve cien toneladas más pesado
todos los días<br />debido a la caída de polvo espacial.</p> Como ya ha visto, el navegador
mostrará automáticamente cada
nuevo párrafo o encabezado en una
nueva línea. Pero si desea agregar
un salto de línea dentro de la mitad
de un párrafo, puede usar la
etiqueta de salto de línea <br />.

Resultado

<h />
Para crear una pausa entre los temas,
como un cambio de tema en un libro o
una nueva escena en una obra de
HtMl capítulo-02 / horizontal-rules.html
teatro, puede agregar una regla
<p>Venus es el único planeta que gira horizontal entre las secciones usando el
agujas del reloj.</p> <hr /> etiqueta.
<h />
<p>Júpiter es más grande que todos los demás planetas. Hay algunos elementos que no
conjunto.</p> tienen palabras entre una etiqueta
de apertura y una de cierre. Son
conocidos comoelementos vacíos
y están escritos de manera diferente.

Resultado
Por lo general, un elemento vacío
solo tiene una etiqueta. Antes del
corchete en ángulo de cierre de un
elemento vacío, a menudo habrá un
espacio y un carácter de barra
diagonal. Algunos autores de páginas
web se pierden esto, pero es un buen
hábito.

TE XT 48
 EdiTores visuales y
SUS VISTAS DE CÓDIGO

Los sistemas de gestión de contenido y los editores HTML como Dreamweaver

suelen tener dos vistas de la página que está creando: un editor visual y un
vista de código.

Editores visuales a menudo se parecen Si copia y pega texto de un Vistas de código mostrarle el código
a los procesadores de texto. Aunque programa que le permite formatear creado por el editor visual para que
cada editor diferirá ligeramente, hay texto (como Word) en un editor pueda editarlo manualmente, o para
algunas características que son visual, puede agregar un marcado que pueda ingresar el nuevo código
comunes a la mayoría de los editores y adicional. Para evitar esto, primero usted mismo. A menudo se activa
que le permiten controlar la copie el texto en un editor de texto mediante un botón con un icono que
presentación del texto. sin formato (como el Bloc de notas dice HTML o tiene corchetes
en una PC o TextEdit en una Mac) y angulares. El editor puede agregar
luego cópielo de ese programa y espacios en blanco al código
● Los encabezados se crean resaltando el
péguelo
texto y luego usando un cuadro
desplegable para seleccionar un
encabezado.

● El texto en negrita y cursiva se

crea resaltando un texto y
presionando un B o I
botón.
● Los nuevos párrafos se crean
utilizando la tecla de retorno o la
tecla enter.

● Los saltos de línea se crean

presionando la tecla Mayús y la
tecla Retorno al mismo tiempo.

● Las reglas horizontales se crean

mediante un botón con una línea
recta.

49 TEXTO
 MARCO SEMÁNTICO

Hay algunos elementos de texto que no tienen la intención de afectar la

estructura de sus páginas web, pero agregan información adicional a la
páginas: se conocen como marcado semántico.

En el resto del capítulo Los navegadores suelen mostrar La razón para utilizar estos
encontrarás algunos elementos el contenido de estos elementos elementos es que otros programas,
más que te ayudarán cuando de forma diferente. Por ejemplo, como lectores de pantalla o motores
agregues texto a páginas web. el contenido del <em> de búsqueda, pueden utilizar esta
Por ejemplo, vas a conocer el < El elemento se muestra en cursiva información adicional. Por ejemplo,
em> elemento que le permite y un <blockquote> suele tener la voz de un lector de pantalla puede
indicar dónde se debe poner sangría. Pero no debe usarlos agregar énfasis a las palabras dentro
énfasis en las palabras para cambiar la apariencia de su del <em> o un motor de búsqueda
seleccionadas y el <blockquote> texto; su propósito es describir el puede registrar que su página
elemento que indica que un contenido de sus páginas web con incluye una cita si usa el <blockquote>
bloque de texto es una cita. mayor precisión. elemento.

TEXTO 50
 FUERZA Y EMFASIS

<strong> capítulo-02 / strong.html HtMl

<p> <strong>Tener cuidado:</fuerte> Los carteristas operan en
El uso de la <fuerte> esta área.</p> <p>Este juguete tiene muchas piezas pequeñas y es
elemento indica que su contenido <fuerte>no
tiene gran importancia. Por Apto para niños menores de cinco años.
ejemplo, las palabras </strong> </p>
contenido en este elemento
podría decirse con gran énfasis.

De forma predeterminada, los navegadores

Resultado
mostrarán el contenido de un <fuerte>

elemento en negrita.

<em> capítulo-02 / énfasis.html HtMl

<p>I <em>pensar</em> Ivy fue la primera.</p> <p>creo
El <em> elemento indica énfasis <em>Hiedra</em> fue el primero.</p> <p>Creo que Ivy
que cambia sutilmente el fue la <em>primero</em>.</p>
significado de una oración.

Por defecto, los navegadores mostrarán el

contenido de un <em> elemento en cursiva.

Resultado

51 TEXTO
 QuoT cnles
rTTiio
Automóvil club británico

Hay dos elementos que se

HtMl capítulo-02 / quotations.html
utilizan comúnmente para
<blockquote cite = "http://en.wikipedia.org/wiki/ marcar citas:
Winnie-the-Pooh ">
<p>¿Alguna vez te detuviste a pensar y te olvidaste de empezar?
¿de nuevo?</p>

</blockquote>
<blockquote>
<p>Como dijo AA Milne, <q>Algunas personas hablan con
El <blockquote> El elemento se utiliza
animales. Sin embargo, no muchos escuchan. Ese es el
para citas más largas que ocupan un
problema.</q> </p>
párrafo completo. Tenga en cuenta
cómo el <p> el elemento todavía se usa
dentro del <blockquote>
elemento.

Resultado Los navegadores tienden a sangrar

el contenido del <blockquote>
elemento, sin embargo, no debe usar
este elemento solo para sangrar un
fragmento de texto, sino que debe
lograr este efecto usando CSS.

<q>
El <q> El elemento se utiliza para citas

más cortas que se encuentran dentro de

un párrafo. Se supone que los

navegadores deben poner comillas

alrededor del <q> elemento, pero

Internet Explorer no lo hace, por lo tanto,

muchas personas evitan el uso de <q>

elemento.

Ambos elementos pueden utilizar

el citar atributo para indicar de
dónde es la cotización. Su valor
debe ser una URL que tenga más
información sobre la fuente de la
cotización.

TE XT 52
 ABREVIATURAS Y
acrónimos

<abbr> capítulo-02 / abbreviations.html HtMl

<p> <abbr title = "Profesor">Profe</abbr> Stephen
Si usa una abreviatura o un Hawking es un físico teórico y cosmólogo.</p>
acrónimo, entonces el <abbr>
se puede utilizar el elemento. Atítulo <p> <acronym title = "Aeronáutica y espacio nacionales
El atributo en la etiqueta de apertura se usa Administración ">NASA</acrónimo> hacer algunas cosas
para especificar el término completo. locas del espacio.</p>

En HTML 4 había un
<acrónimo> elemento para
acrónimos. Para deletrear la forma
completa del acrónimo, eltítulo
se utilizó el atributo (como con el
<abbr> elemento de arriba).
Resultado
HTML5 solo usa el <abbr>
elemento para abreviaturas y
acrónimos.

53 TEXTO
 ciTaaTrioTennesse
icsl my i
Definiciones

HtMl capítulo-02 / citations.html

<cite>
<p> <cite>Una breve historia del tiempo</citar> por Stephen
Hawking ha vendido más de diez millones de copias. Cuando se hace referencia a un
en todo el mundo.</p> trabajo como un libro, una película
o un trabajo de investigación, el
<cite> El elemento se puede
utilizar para indicar de dónde es
la cita.

En HTML5, <citar> realmente no debería

Resultado
usarse para el nombre de una persona,
pero estaba permitido en HTML 4, por
lo que es probable que la mayoría de la
gente continúe usándolo.

Los navegadores mostrarán el contenido

de un <citar> elemento en cursiva.

HtMl capítulo-02 / definitions.html

<dfn>
<p>A <dfn>calabozo</dfn> es una región del espacio de
del que nada, ni siquiera la luz, puede escapar.</p> La primera vez que explica alguna
terminología nueva (tal vez un
concepto académico o alguna jerga)
en un documento, se conoce como la
instancia definitoria de la misma.

El <dfn> El elemento se utiliza para

Resultado
indicar la instancia definitoria de un
nuevo término.

Algunos navegadores muestran el

contenido del <dfn> elemento en
cursiva. Safari y Chrome no cambian
su apariencia.

TE XT 54
 DETALLES DEL AUTOR

<dirección> capítulo-02 / dirección.html HtMl

<dirección>
El <dirección> El elemento tiene un uso <p> <a href="mailto: [email protected] ">
bastante específico: contener los datos [email protected]</a> </p> <p>742 Evergreen
de contacto del autor de la página. Terrace, Springfield.</p> </dirección>

Puede contener una dirección física, pero

no es necesario. Por ejemplo, también
puede contener un número de teléfono o
una dirección de correo electrónico.

Los navegadores suelen mostrar

el contenido de <dirección>
Resultado
elemento en cursiva.

También puede estar interesado

en algo llamado microformato
hCard para agregar información
de dirección física a su marcado.

exTra en línea:
Puede obtener más información
sobre las hCards en el sitio web.
que acompaña a este libro.

55 TEXTO
 Cambia a ca o nTTiecnleT

HtMl capítulo-02 / insertar-y-eliminar.html

<ins>
<p>Era el <del>peor</del> <ins>mejor</ins> ocurrencia
que alguna vez había tenido.</p>
<del>
El <ins> El elemento se puede utilizar
para mostrar el contenido que se ha
insertado en un documento, mientras
que el <del> El elemento puede mostrar
texto que se ha eliminado de él.

Resultado
El contenido de un <ins> El elemento suele

estar subrayado, mientras que el contenido

de un <del> El elemento generalmente tiene

una línea que lo atraviesa.

HtMl capítulo-02 / tachado.html

<s>
<p>Ordenador portátil:</p>
<p> <s>Era $ 995</s> </p> <p> El <s> elemento indica algo
Ahora solo $ 375</p> que ya no es preciso o
relevante (pero que no
debe eliminarse).

Visualmente el contenido de un <s>

El elemento normalmente se mostrará con
una línea que atraviesa el centro.
Resultado

Las versiones anteriores de HTML tenían un

<u> elemento para el contenido que estaba

subrayado, pero se está eliminando
gradualmente.

TE XT 56
57 TEXTO
 ejemplo
Texto

Esta es una página HTML muy simple que

muestra el marcado de texto.

El marcado estructural incluye elementos como <h1>, <h2>, y <p>.

La información semántica se transporta en elementos como <citar> y <em>.

<html>
<cabeza>

<título>Texto</título> </
head>
<cuerpo>

<h1>La historia en el libro</h1> <h2>Capítulo 1</h2> <p>Molly había

estado mirando por la ventana durante aproximadamente

una hora ahora. En su escritorio, tendida entre las copias de<yo>

Naturaleza</yo>, <i>Científico nuevo</yo>, y todas las otras
revistas científicas en las que había aparecido su trabajo, era una
copia bien pulida de <citar>En la carretera</citar>. Había sido el
libro favorito de Molly desde la universidad, y cuanto más pasaba
en estas cuatro paredes, más sentía que necesitaba ser libre.</p>

<p>Ella había pasado los últimos diez años en esta habitación,

sentado debajo de un cartel con una cita de Oscar Wilde
proclamando que <q>El trabajo es el refugio de personas que no
tienen nada mejor que hacer</q>. Aunque muchos consideraron su
trabajo pionero, desentrañar los secretos de la llama <abbr title =
"Ácido desoxirribonucleico">ADN</abbr>, para ser un logro
sobresaliente, Molly <em>hizo</em> creo que tenía algo mejor que
hacer.</p> </body>

</html>

TEXTO 58
 resumen
Texto

X Los elementos HTML se utilizan para describir la estructura de

la página (por ejemplo, títulos, subtítulos, párrafos).

X También proporcionan información semántica (por ejemplo,

dónde se debe poner énfasis, la definición de cualquier
acrónimo utilizado, cuando el texto dado es una cita).
 3
Liza

X Listas numeradas
X Listas de viñetas

X Listas de definiciones
 Hay muchas ocasiones en las que
necesitamos usar listas. HTML nos
proporciona tres tipos diferentes:

● Listas ordenadas son listas en las que cada elemento de la lista está
numerado. Por ejemplo, la lista puede ser un conjunto de pasos para una
receta que se debe realizar en orden, o un contrato legal donde cada
punto debe identificarse con un número de sección.

● Listas desordenadas son listas que comienzan con una

viñeta (en lugar de caracteres que indican un orden).

● Listas de definiciones se componen de un conjunto de términos junto con las

definiciones de cada uno de esos términos.

63 LIZA
LISTAS 64
 Listas ordenadas

<ol> capítulo-03 / listas-ordenadas.html HtMl

<ol>
<li>Picar las papas en cuartos</li> <li>Cocine a
La lista ordenada se crea con
fuego lento en agua con sal durante 15-20
el <ol> elemento.
minutos hasta que estén tiernos</li> <li>
Calentar la leche, la mantequilla y la nuez moscada.</

<li> li> <li>Escurrir las patatas y triturar</li> <li>Incorpora

la mezcla de leche.</li> </ol>

Cada elemento de la lista se coloca

entre una apertura <li> etiqueta y un
cierre </li> etiqueta. (Elli
significa elemento de lista.)

Resultado
Los navegadores sangran las listas de forma predeterminada.

A veces puede ver un escribe

atributo usado con el <ol>
elemento para especificar el
tipo de numeración (números,
letras, números romanos, etc.).
Es mejor usar CSStipo de lista
propiedad cubierta en las
páginas 333-335.

LIZA
sesenta y cinco
 UnOrdere Anuncio rtLiic
sLtes

HtMl capítulo-03 / listas-desordenadas.html

<ul>
<ul>
<li>1 kg de patatas King Edward</li>
La lista desordenada se crea
<li>100 ml de leche</li>
con <ul> elemento.
<li>50 g de mantequilla salada</li> <li>Nuez
moscada recién rallada</li> <li>Sal y
pimienta para probar</li> </ul>
<li>
Cada elemento de la lista se coloca
entre una apertura <li> etiqueta y un
cierre </li> etiqueta. (Elli
significa elemento de lista.)

Resultado
Los navegadores sangran las listas de forma predeterminada.

A veces puede ver un escribe

atributo usado con el <ul>
elemento para especificar el tipo
de viñeta (círculos, cuadrados,
diamantes, etc.). Es mejor usar CSS
tipo de estilo de lista propiedad
cubierta en las páginas 333-335.

STS
LLIISTS 66
 LISTAS DE DEFINICIÓN

<dl> capítulo-03 / definicion-listas.html HtMl

<dl>
La lista de definiciones se crea con el <dt>Sashimi</dt> <dd>Pescado crudo en rodajas
<dl> elemento y generalmente que se sirve con
consta de una serie de términos y condimentos como rábano daikon rallado o raíz de
sus definiciones. jengibre, wasabi y salsa de soja</dd> <dt>Escala</dt> <dd>Un
dispositivo utilizado para medir con precisión la
Dentro del <dl> elemento
normalmente verá pares de <dt> y peso de los ingredientes</dd> <dd>Una técnica mediante
<dd> elementos. la cual se eliminan las escamas.
de la piel de un pez</dd> <dt>Scamorze</dt> <dt>
Scamorzo</dt> <dd>Un queso italiano generalmente

<dt> elaborado con

leche de vaca (aunque tradicionalmente se elaboraba con

Se utiliza para contener el término que se
leche de búfala)</dd>
está definiendo (el término de definición).
</dl>

<dd> Resultado

Esto se usa para contener la

definición.

A veces, es posible que vea una lista en

la que se utilizan dos términos para la
misma definición o dos definiciones
diferentes para el mismo término.

67 LIZA
 neste rtLiic
Anuncio sLtes

Puede poner una segunda lista dentro

HtMl capítulo-03 / listas-anidadas.html
de un <li> elemento para crear una
<ul> sublista o lista anidada.
<li>Mousses</li> <li>
Pasteles Los navegadores muestran listas
<ul> anidadas con más sangría que la lista
<li>Cuerno</li> principal. En las listas desordenadas
<li>Milhojas</li> <li>Palmier anidadas, el navegador generalmente
</li> <li>Profiterole</li> </ul> también cambiará el estilo de la viñeta.

</li>
<li>tartas</li> </
ul>

Resultado

LLIISSTS
TS 68
69 LIZA
 ejemplo
Liza

Aquí puede ver un encabezado principal seguido de

un párrafo introductorio. Se usa una lista
desordenada para delinear los ingredientes y una lista
ordenada se usa para describir los pasos.

<html>
<cabeza>

<título>Liza</título> </
head>
<cuerpo>

<h1>Huevos revueltos</h1> <p>Los huevos son una de mis

comidas favoritas. Aquí hay un
receta de huevos revueltos deliciosamente ricos.</p> <h2>
Ingredientes</h2> <ul>

<li>2 huevos</li> <li>1 cucharada

de mantequilla</li> <li>2

cucharadas de crema</li> </ul>

<h2>Método</h2>
<ol>
<li>Derretir la mantequilla en una sartén a fuego medio.
calor</li>
<li>Mezcle suavemente los huevos y la nata en un bol.</li> <li>Una
vez que la mantequilla se haya derretido, agregue la nata y los
huevos.</li> <li>Con una espátula, doble los huevos desde el borde
la sartén al centro cada 20 segundos (como si estuvieras
haciendo una tortilla)</li> <li>Cuando los huevos aún estén
húmedos, retírelos del
calor (seguirá cocinando en el plato hasta que se sirva)</li>

</ol>
</body>
</html>

LIZA 70
 resumen
Liza

X Hay tres tipos de listas HTML: ordenadas,

desordenadas y definidas.

X Las listas ordenadas usan números.

X Las listas desordenadas usan viñetas.

X Las listas de definiciones se utilizan para definir la terminología.

X Las listas se pueden anidar unas dentro de otras.

 4
Enlaces

X Creando enlaces entre páginas

X Vinculación a otros sitios
X Vínculos de correo electrónico
 Los enlaces son la característica definitoria
de la web porque le permiten pasar de una
página web a otra, lo que permite la idea
misma de navegar o navegar.

Normalmente se encontrará con los siguientes tipos de enlaces:

● Enlaces de un sitio web a otro

● Enlaces de una página a otra en el mismo sitio web

● Enlaces de una parte de una página web a otra parte de la

misma página

● Enlaces que se abren en una nueva ventana del navegador

● Enlaces que inician su programa de correo electrónico y envían un nuevo correo

electrónico a alguien

75 ENLACES
ENLACES 76
 Enlaces de escritura

Los enlaces se crean utilizando el <a> elemento. Los usuarios pueden hacer clic en
cualquier cosa entre la apertura <a> etiqueta y el cierre </a> etiqueta. Usted
especifica a qué página desea vincular mediante elhref atributo.

Esta es la página Este es el Texto El

Enlace Te lleva a el usuario hace clic en

<a href = "http://www.imdb.com">IMDB</a>

etiqueta de enlace de apertura clausura
etiqueta de enlace

77 ENLACES
El texto entre la apertura Muchas personas navegan por sitios web Para escribir un buen texto de enlace,
<a> etiqueta y cierre </a> La etiqueta se escaneando el texto en busca de enlaces. puede pensar en palabras que la
conoce como texto de enlace. Siempre El texto del enlace claro puede ayudar a gente podría usar al buscar la página
que sea posible, el texto del enlace debe los visitantes a encontrar lo que buscan. a la que está enlazando. (Por
explicar a dónde se dirigirá a los Esto les dará una impresión más positiva ejemplo, en lugar de escribir "lugares
visitantes si hacen clic en él (en lugar de de su sitio y puede animarlos a visitarlo para quedarse", podría usar algo más
simplemente decir "haga clic aquí"). A por más tiempo. (También ayuda a las específico, como "hoteles en Nueva
continuación puede ver el enlace a personas que utilizan software de lectura York").
IMDB que se creó en la página anterior. de pantalla).

ENLACES 78
 Vinculación a otros sitios

<a> capítulo-04 / vinculación-a-otros-sitios.html HtMl

<p>Críticas de cine:
Los enlaces se crean utilizando el <a> <ul>
elemento que tiene un atributo <li> <a href="http://www.empireonline.com">
llamado href. El valor de la Imperio</a> </li>
href El atributo es la página a la que <li> <a href="http://www.metacritic.com">
desea que las personas vayan cuando Metacrítico</a> </li>
hagan clic en el enlace. <li> <a href="http://www.rottentomatoes.com">
Tomates podridos</a> </li>
Los usuarios pueden hacer clic en cualquier <li> <a href="http://www.variety.com">
cosa que aparezca entre la apertura Variedad</a> </li>
<a> etiqueta y el cierre </a> </ul>
etiqueta y será llevado a la página </p>
especificada en el href atributo.

Cuando se vincula a un sitio

Resultado
web diferente, el valor de la href
El atributo será la dirección
web completa del sitio, que se
conoce como absoluto URL.

Los navegadores muestran enlaces en azul con un

subrayado de forma predeterminada.

URL absolutas
URL son las siglas de Uniform Una URL absoluta comienza con el
Resource Locator. Cada página web nombre de dominio de ese sitio y puede
tiene su propia URL. Esta es la ir seguida de la ruta a una página
dirección web que escribiría en un específica. Si no se especifica ninguna
navegador si quisiera visitar esa página, el sitio mostrará la página de
página específica. inicio.

79 ENLACES
 PtAig
Vinculando a otro Arkansas ceLes
en el mismo sitio

HtMl capítulo-04 / vinculación-a-otras-páginas.html

<a>
<p>
<ul> Cuando está enlazando a otras
<li> <a href="index.html">Casa</a> </li> <li> <a páginas dentro del mismo sitio, no
href="about-us.html">Acerca de</a> </li> <li> <a necesita especificar el nombre de
href="movies.html">Películas</a> </li> <li> <a dominio en la URL. Puede utilizar
href="contact.html">Contacto</a> </li> una abreviatura conocida como
</ul> relativo URL.
</p>
Si todas las páginas del sitio están
en la misma carpeta, entonces el
valor de la href atributo es solo el
nombre del archivo.

Si tiene diferentes páginas de un

sitio en diferentes carpetas, puede
Resultado
usar una sintaxis un poco más
compleja para indicar dónde está la
página en relación con la página
actual. Aprenderá más sobre estos
en las páginas 81-84.

Si observa el código de
descarga de cada capítulo, verá
que el index.html El archivo
contiene enlaces que utilizan
URL relativas.

URL RELATIVAS
Al vincular a otras páginas dentro Examinaremos más de cerca las URL Las URL relativas ayudan a crear un
del mismo sitio, puede utilizar relativas en las páginas 83-84, ya que sitio en su computadora porque
URL relativas. Son como una hay varios atajos útiles que puede puede crear enlaces entre páginas sin
versión abreviada de URL utilizar para escribir enlaces a otras tener que configurar su nombre de
absolutas porque no es necesario páginas en su propio sitio web. dominio o alojamiento.
especificar el nombre de dominio.

NKS
LLIIN Kansas 80
 Estructura de directorios

En sitios web más grandes, es una buena idea organizar su código colocando las
páginas de cada sección diferente del sitio en una nueva carpeta. Las carpetas de
un sitio web a veces se denominan directorios.

estructura RELACIONES páginas de inicio

El diagrama de la derecha muestra la La relación entre archivos y carpetas La página de inicio principal de un sitio
estructura de directorios de un sitio en un sitio web se describe utilizando escrito en HTML (y las páginas de inicio de
web de listados de entretenimiento la misma terminología que un árbol cada sección en una carpeta secundaria)
ficticio llamado ExampleArts. genealógico. se llama index.html.

La carpeta de nivel superior se conoce En el diagrama de la derecha, Los servidores web suelen estar configurados para

como raíz carpeta. (En este ejemplo, la puede ver que se han dibujado devolver el index.html archivo si no se especifica

carpeta raíz se llama algunas relaciones. un nombre de archivo.

examplearts.) La carpeta raíz

contiene todos los demás archivos y El ejemplo de arte carpeta es un Por tanto, si entra
carpetas de un sitio web. padre de la peliculas, musica examplearts.com volverá
y teatro carpetas. Y el examplearts.com/index
Cada sección del sitio se coloca en una peliculas, musica y teatro . html,y examplearts.com/
carpeta separada; esto ayuda a carpetas son hijos de la música volverá ejemplo de arte
organizar los archivos. ejemplo de arte carpeta. . com / music / index.html.

Si está trabajando con un sistema de En cambio, estos sistemas suelen utilizar La edición del archivo de plantilla
administración de contenido, software de un archivo de plantilla para cada tipo cambiaría todas las páginas que
blogs o un sistema de comercio diferente de página (como artículos de usan esa plantilla. No cambie
electrónico, es posible que no tenga noticias, publicaciones de blogs o ningún código que no sea HTML o
archivos individuales para cada página del productos). puede romper la página.
sitio web.

81 ENLACES
 ejemplo de arte
Padre abuelo
index.html
El ejemplo de arte carpeta es El ejemplo de arte carpeta es un
imagenes
un padre de la música carpeta. abuelo del DVD carpeta.
logo.gif
películas
cine
index.html
listados.html
reviews.html
DVD nieto
index.html El DVD carpeta es un nieto del
reviews.html ejemplo de arte carpeta.
index.html
niño música
El música carpeta es un hijo index.html
de la ejemplo de arte carpeta. listados.html
reviews.html
teatro
index.html
listados.html
reviews.html

Cada página y cada imagen de un La ruta a la página de inicio de este Utiliza URL cuando se vincula a
sitio web tiene un uRl (o localizador sitio es www.examplearts otras páginas web y cuando incluye
uniforme de recursos). La URL está . com / index.html.La ruta al imágenes en su propio sitio. En la
formada por el nombre de dominio logotipo del sitio es página siguiente, encontrará una
seguido delsendero a esa página o examplearts.com/images/ forma abreviada de vincular
imagen. logo.gif. archivos en su propio sitio.

La carpeta raíz contiene: Cada subdirectorio contiene: La sección de películas contiene:

● Un archivo llamado index.html que ● Un archivo llamado index.html cuál ● Una carpeta llamada cine
es la página de inicio de todo el es la página de inicio de esa sección
● Una carpeta llamada DVD.
sitio

● Carpetas individuales para las ● Una página de reseñas llamada críticas

secciones de películas, . html
música y teatro del sitio.
● Una página de listados llamada listados
. htmlexcepto la sección
de DVD)

ENLACES 82
 URL RELATIVAS

Las URL relativas se pueden utilizar al vincular a páginas dentro de su propio sitio
web. Proporcionan una forma abreviada de decirle al navegador dónde
encuentra tus archivos.

Cuando está enlazando a una página Si todos los archivos de su sitio están en

en su propio sitio web, no necesita una carpeta, simplemente use el nombre

especificar el nombre de dominio. de archivo para esa página.

Puedes usarURL relativas

que son una forma abreviada de decirle al Si su sitio está organizado en carpetas
navegador dónde se encuentra una página (o directorios) separados, debe
en relación con la página actual. indicarle al navegador cómo acceder a
la página en la que se encuentra.
Esto es especialmente útil al actualmente en a la pagina que estas
crear un nuevo sitio web o enlazando a.
aprender sobre HTML porque
puede crear enlaces entre Si enlaza a la misma página desde
páginas cuando solo están en su dos páginas diferentes, es posible
computadora personal (antes de que deba escribir dos URL
tener un nombre de dominio y relativas diferentes.
subirlos a la web).
Estos enlaces utilizan la misma
Debido a que no necesita repetir el terminología (tomada de la de los
nombre de dominio en cada enlace, árboles genealógicos) que conoció
también son más rápidos de escribir. en la página anterior, que presenta
la estructura del directorio.

83 ENLACES
TIPO DE VÍNCULO RELATIVO ejemplo (del diagrama de la página anterior)

mismo FoLDer
Para vincular a un archivo en la misma carpeta, simplemente use el Para vincular a reseñas de música desde la página de inicio de música:

nombre del archivo. (No se necesita nada más). <a href = "reviews.html">Reseñas</a>

PODADOR DE NIÑOS
Para una carpeta secundaria, use el nombre de la carpeta secundaria, Para vincular a listas de música desde la página de inicio:
seguido de una barra diagonal y luego el nombre del archivo. <a href = "música / listados.html">Listados</a>

FORMADOR DE GRANDES
Utilice el nombre de la carpeta secundaria, seguido de una Para vincular a reseñas de DVD desde la página de inicio:
barra inclinada, luego el nombre de la carpeta del nieto, <a href = "movies / dvd / reviews.html">
seguido de otra barra diagonal y luego el nombre del archivo. Reseñas</a>

Carpeta principal
Use ../ para indicar la carpeta sobre la actual, luego Para vincular a la página de inicio de las reseñas de música:
sígala con el nombre del archivo. <a href = "../index.html">Casa</a>

FoLDer GrAnDPArent
Repita ../ para indicar que desea subir dos Para vincular a la página de inicio de las reseñas de DVD:
carpetas (en lugar de una), luego siga con el <a href = "../../index.html">Casa</a>
nombre del archivo.

Cuando un sitio web está activo (es Por ejemplo, puede ver el nombre de Una barra inclinada devolverá la
decir, cargado en un servidor web), es una carpeta secundaria sin el nombre página de inicio de todo el sitio, y
posible que vea un par de otras de un archivo. En este caso, el una barra inclinada seguida de un
técnicas utilizadas que no funcionan servidor web normalmente intentará nombre de archivo devolverá ese
cuando los archivos están en su mostrar la página de inicio de esa archivo siempre que esté en el
computadora local. sección. directorio raíz.

ENLACES 84
 Vínculos emAiL

mailto: capítulo-04 / email-links.html HtMl

<a href="mailto: [email protected] ">Envíe un correo electrónico a Jon</a>

Para crear un enlace que inicie el programa de

correo electrónico del usuario y envíe un correo

electrónico a una dirección de correo

electrónico específica, utilice el <a>

elemento. Sin embargo, esta vez el valor de

Resultado
lahref el atributo comienza con mailto: y va
seguido de la dirección de correo
electrónico a la que desea que se envíe el
correo electrónico.

A la derecha puede ver que un enlace de

correo electrónico se ve como cualquier otro

enlace pero, cuando se hace clic en él, el

programa de correo electrónico del usuario

abrirá un nuevo mensaje de correo

electrónico y lo dirigirá a la persona

especificada en el enlace.

85 ENLACES
 cLin
abriendo unLirntkis mi
UNA NUEVA

HtMl capítulo-04 / abrir-enlaces-en-una-nueva-ventana.html

objetivo
<a href="http://www.imdb.com" target="_blank">
Base de datos de películas de Internet</a> (abre en una nueva ventana) Si desea que un enlace se abra en
una nueva ventana, puede usar el
objetivo atributo en la apertura
<a> etiqueta. El valor de este
atributo debe ser _blanco.
Resultado

Una de las razones más comunes

por las que el autor de una página
web puede querer que se abra un
enlace en una nueva ventana es si
apunta a otro sitio web. En tales
casos, esperan que el usuario
regrese a la ventana que contiene
su sitio después de terminar de
mirar el otro.

Por lo general, debe evitar abrir

enlaces en una nueva ventana, pero
si lo hace, se considera una buena
práctica informar a los usuarios que
el enlace abrirá una nueva ventana
antes de que hagan clic en él.

NKS
LLIIN Kansas 86
 ENLACE A UNA PARTE ESPECÍFICA
DE LA MISMA PÁGINA

En la parte superior de una página larga, es

capítulo-05 / vinculación-a-una-parte-específica.html HtMl
posible que desee agregar una lista de

contenido que enlace a las secciones

correspondientes más abajo. O es posible que <h1 id = "top">Términos de realización de películas</h1>

desee agregar un enlace desde la parte <a href="#arc_shot">Tiro de arco</a> <br /> <a
inferior de la página hasta la parte superior href="#interlude">Interludio</a> <br /> <a
para evitar que los usuarios tengan que href="#prologue">Prólogo</a> <br /> <br /> <h2 id =
desplazarse hacia la parte superior. "arc_shot">Tiro de arco</h2>
<p>Una toma en la que el sujeto es fotografiado por un
cámara circundante o en movimiento</p> <h2 id = "interludio">
Antes de que pueda vincular a una parte Interludio</h2> <p>Una breve escena o secuencia de película
específica de una página, debe intermedia, no
identificar los puntos de la página a los específicamente vinculado a la trama, que aparece dentro de
que irá el vínculo. Haces esto usando el una película</p> <h2 id = "prólogo">Prólogo</h2> <p>Un
identificación atributo (que se puede discurso, un prefacio, una introducción o una breve escena.
utilizar en todos los elementos HTML).
Puedes ver que el antes de la acción principal o la trama de una película; contraste
<h1> y <h2> los elementos en este con el epílogo</p> <p> <a href="#top">Cima</a> </p>
ejemplo se han dado identificación
atributos que identifican esas
secciones de la página.

El valor de la identificación El atributo

debe comenzar con una letra o un
guión bajo (no un número ni ningún
otro carácter) y, en una sola página, no
dos identificación los atributos deben
tener el mismo valor.

Para vincular a un elemento que usa un

identificación atributo que usa el <a>

elemento de nuevo, pero el valor de

la href El atributo comienza con el
símbolo #, seguido del valor del
identificación atributo del elemento
al que desea vincular. En este
ejemplo, <a href = "# top">
enlaces al <h1> elemento en la parte

superior de la página cuyo identificación

atributo tiene un valor de cima.

87 ENLACES
 mi
Vinculación a A sAPretciciFLic
PARTE DE OTRA PÁGINA
Si desea vincular a una parte específica
Resultado
de una página diferente (ya sea en su
propio sitio o en un sitio web diferente),
puede utilizar una técnica similar.

Siempre que la página a la que está

enlazando tenga identificación atributos
que identifican partes específicas de la
página, simplemente puede agregar la
misma sintaxis al final del enlace para
esa página.

Por lo tanto, la href El atributo

contendrá la dirección de la
página (ya sea una URL absoluta
o una URL relativa), seguida de la
# símbolo, seguido del valor del
identificación atributo que se utiliza en
el elemento al que se está vinculando.

Por ejemplo, para enlazar al

final de la página de inicio del
sitio web que acompaña a este
libro, escribiría:
<a href = "http: / www.
htmlandcssbookcom /
# fondo ">

NKS
LLIIN Kansas 88
89 ENLACES
 ejemplo
Enlaces

Este ejemplo es de una página web sobre cine.

El <h1> el elemento se usa con un identificación atributo en la parte superior de la página para
que se pueda agregar un enlace para llevar a los lectores de la parte inferior de la página a la
parte superior. Hay un enlace de correo electrónico que permite a los lectores ponerse en
contacto con el autor de la página web. También hay varios enlaces a URL calificadas. Estos se
vinculan a varios festivales de cine. Debajo de esta lista hay un enlace a una URL relativa que es
una página "acerca de" que vive en el mismo directorio.

<html>
<cabeza>

<título>Enlaces</título> </
head>
<cuerpo>
<h1 id = "top">Folk del cine</h1> <h2>Diario del
festival</h2> <p>Éstos son algunos de los festivales de
cine que
asistirá este año.<br />Por favor
<a href="mailto: [email protected] ">
contáctenos </a> si desea más información.</p>

<h3>enero</h3>
<p> <a href="http://www.sundance.org">
Festival de Cine de Sundance</a> <br />
Park City, Utah, EE. UU.<br />
20 a 30 de enero de 2011</p>
<h3>febrero</h3>
<p> <a href="http://www.tropfest.com">
Tropfest</a> <br />
Sydney, Australia<br />
20 de febrero de 2011</p> <! - contenido adicional -> <p>
<a href="about.html">Acerca de Film Folk</a> </p> <p> <a
href="#top">Parte superior de la página</a> </p> </body>

</html>

ENLACES 90
 resumen
Enlaces

X Los enlaces se crean utilizando el <a> elemento.

X El <a> elemento usa el href atributo para indicar la página

a la que está enlazando.

X Si está enlazando a una página dentro de su propio sitio, es

mejor usar enlaces relativos en lugar de URL calificadas.

X Puede crear enlaces para abrir programas de correo electrónico con una dirección

de correo electrónico en el campo "para".

X Puedes usar el identificación atributo a elementos de destino dentro de una

página a la que se puede vincular.

 5
Imagenes

X Cómo agregar imágenes a las páginas

X Elegir el formato correcto

X Optimización de imágenes para la web
 Hay muchas razones por las que es posible que desee

agregar una imagen a una página web: es posible que

desee incluir un logotipo, una fotografía, una

ilustración, un diagrama o un gráfico.

Hay varias cosas a considerar al seleccionar y preparar

imágenes para su sitio, pero tomarse el tiempo para
hacerlo bien hará que se vea más atractivo y profesional.
En este capítulo aprenderá a:

● Incluya una imagen en sus páginas web usando HTML

● Elija qué formato de imagen usar

● Muestre una imagen en el tamaño correcto

● Optimice una imagen para usar en la web para que las páginas se carguen
más rápido

También puede usar CSS para incluir imágenes en sus páginas usando el
imagen de fondo propiedad, que encontrará en las páginas
413-420.

95 IMAGENES
IMÁGENES 96
 ELEGIENDO IMÁGENES PARA
Tú sitio

Una imagen puede decir mil palabras, y las imágenes

excelentes ayudan a marcar la diferencia entre un sitio
de apariencia promedio y uno realmente atractivo.

Las imágenes se pueden utilizar para pagar para usar (hay una lista de sitios web Si tiene una página que muestra
establecer el tono de un sitio en de fotografías de archivo a continuación). varias imágenes (como fotografías
menos tiempo del que se tarda en Recuerde que todas las imágenes están de productos o miembros de un
leer una descripción. Si no tiene sujetas a derechos de autor y puede equipo), ponerlas en un fondo
fotografías para usar en su sitio web, meterse en problemas simplemente por simple y consistente ayuda a que se
hay empresas que vendenimágenes tomar fotografías de vean mejor como
de archivo; estas son imagenes tu otro sitio web. Un grupo.

Las imágenes deberían ... almacén de fotografías solo extra

Se relevante www.istockphoto.com Hemos proporcionado una galería en línea

Transmitir información www.gettyimages.com que le ayuda a elegir la imagen adecuada
Transmita el estado de ánimo adecuado www.veer.com para su sitio web. Puede encontrarlo en la
Sea reconocible al instante Se adapte a www.sxc.hu sección de herramientas del sitio que
la paleta de colores www.fotolia.com acompaña a este libro.

97 IMAGENES
 ALMACENAMIENTO DE IMÁGENES EN
Tú sitio

Si está creando un sitio desde cero, es una buena

práctica crear una carpeta para todas las imágenes.
el sitio utiliza.

A medida que crece un sitio web, En un sitio grande, es posible que desee Si está utilizando un sistema de administración

mantener las imágenes en una carpeta agregar subcarpetas dentro del imagenes de contenido o una plataforma de blogs,

separada le ayuda a comprender cómo carpeta. Por ejemplo, las imágenes como generalmente hay herramientas integradas en

está organizado el sitio. Aquí puede ver logotipos y botones pueden ubicarse en una el sitio de administración que le permiten

un ejemplo de los archivos de un sitio carpeta llamadainterfaz, Las fotografías de cargar imágenes, y el programa

web; todas las imágenes se almacenan en productos pueden ubicarse en una página probablemente ya tendrá una carpeta separada

una carpeta llamadaimágenes. llamada productos y las imágenes para archivos de imagen y cualquier otro

relacionadas con las noticias pueden estar en archivo.

una carpeta llamada noticias. otras cargas.

IMAGENES 98
 agregar imágenes

<img> capítulo-05 / añadiendo-imágenes.html HtMl

<img src = "images / quokka.jpg" alt = "Una familia de
Para agregar una imagen a la quokka "title =" El quokka es un marsupial
página, debe usar un <img> australiano de tamaño similar al gato doméstico. "/>
elemento. Este es un elemento vacío
(lo que significa que no hay etiqueta
de cierre). Debe tener los siguientes
dos atributos:
Resultado

src
Esto le dice al navegador dónde puede
encontrar el archivo de imagen. Por lo
general, será una URL relativa que apunta
a una imagen en su propio sitio. (Aquí
puede ver que las imágenes están en una
carpeta secundaria llamadaimagenes - las
URL relativas se trataron en las páginas
83-84).

alt
Esto proporciona una descripción de
texto de la imagen que describe la
imagen si no puede verla.

título
También puede utilizar el título El texto utilizado en el alt A menudo se hace Si la imagen es solo para hacer que una

atributo con el <img> elemento para referencia al atributo como texto alternativo. página parezca más atractiva (y no tiene

proporcionar información adicional sobre la Debe proporcionar una descripción precisa ningún significado, como una línea

imagen. La mayoría de los navegadores del contenido de la imagen para que divisoria gráfica), entonces el

mostrarán el contenido de este atributo en pueda ser entendido por el software lector alt El atributo aún debe usarse,
forma de punta cuando el usuario pase el de pantalla (utilizado por personas con pero las comillas deben dejarse
mouse sobre la imagen. discapacidad visual) y los motores de vacías.
búsqueda.

99 IMAGENES
 altura & WtIIdlhmi
Arkansas Connecticut

de imágenes
También verá a menudo un <img>
HtMl capítulo-05 / alto-y-ancho-de-imágenes.html
El elemento usa otros dos atributos que
<img src = "images / quokka.jpg" alt = "Una familia de especifican su tamaño:
quokka "ancho =" 600 "alto =" 450 "/>

altura
Esto especifica la altura de la
imagen en píxeles.

Resultado
ancho
Esto especifica el ancho de la
imagen en píxeles.

Las imágenes suelen tardar más en

cargarse que el código HTML que forma
el resto de la página. Por lo tanto, es
una buena idea especificar el tamaño de
la imagen para que el navegador pueda
representar el resto del texto en la
página y dejar la cantidad de espacio
adecuada para la imagen que aún se
está cargando.

El tamaño de las imágenes se especifica

cada vez más utilizando CSS en lugar de
HTML; consulte las páginas 409410 para
obtener más información al respecto.

IIM
MAMÁ
AG
GES 110
00
0
 DÓNDE COLOCAR LAS IMÁGENES
En tu código
El lugar donde se coloca una imagen en el
Chapter-05 / where-to-place-images.html HtMl
código afectará la forma en que se

muestra. A continuación, se muestran tres <img src = "images / bird.gif" alt = "Bird" width = "100"
ejemplos de ubicación de imágenes que altura = "100" />
producen resultados diferentes: <p>Hay alrededor de 10,000 especies de aves vivas.
que habitan en diferentes ecosistemas desde el Ártico hasta el
1: antes de un párrafo Antártico. Muchas especies realizan migraciones anuales de
El párrafo comienza en una nueva línea larga distancia y muchas más realizan viajes irregulares más
después de la imagen. cortos.</p> <h />

2: dentro del comienzo de un <p> <img src = "images / bird.gif" alt = "Bird" width = "100"
párrafo altura = "100" />Hay alrededor de 10,000 especies vivas de aves
La primera fila de texto se alinea con que habitan diferentes ecosistemas desde el Ártico hasta el
la parte inferior de la imagen. Antártico. Muchas especies realizan actividades anuales de larga
distancia.
3: en medio de un párrafo migraciones, y muchas más realizan viajes irregulares
más cortos.</p> <h />
La imagen se coloca entre las
palabras del párrafo en el que <p>Hay alrededor de 10,000 especies de aves vivas.
aparece. que habitan en diferentes ecosistemas desde el Ártico hasta el
Antártico.<img src = "images / bird.gif" alt = "Bird" width =
"100" height = "100" />Muchas especies realizan migraciones
anuales de larga distancia y muchas más realizan viajes
irregulares más cortos.</p>

101 IMAGENES
 artículo

El lugar donde coloque la imagen en el

Resultado
código es importante porque los
navegadores muestran elementos HTML
de una de estas dos formas:

Los elementos de bloque siempre

aparecen en una nueva línea. Ejemplos

de elementos de bloque incluyen <h1> y

<p> elementos.

Si el <img> va seguido de un elemento de

nivel de bloque (como un párrafo), el
elemento de nivel de bloque se ubicará
en una nueva línea después de la
imagen, como se muestra en el primer
ejemplo de esta página.

Los elementos en línea se ubican dentro

de un elemento a nivel de bloque y no

comienzan en una nueva línea. Ejemplos

de elementos en línea incluyen <b>, <em>,

y <img> elementos.

Si el <img> elemento está dentro de un

elemento de nivel de bloque, cualquier
texto u otros elementos en línea fluirán
alrededor de la imagen como se muestra
en el segundo y tercer ejemplo de esta
página.

Los elementos de bloque y en línea se

analizan con mayor profundidad en las
páginas 185-186.

IIM
MAMÁ
AG
GES 110
02
2
 código antiguo: alIngAr
Imágenes horIzontallY

alinear Chapter-05 / aligning-images-horizontally.html HtMl

El alinear El atributo se usaba
<p> <img src = "images / bird.gif" alt = "Bird" width = "100"
comúnmente para indicar cómo las
altura = "100" alinear = "izquierda" />Hay alrededor
otras partes de una página deberían
10,000 especies vivas de aves que habitan diferentes
fluir alrededor de una imagen. Se
ecosistemas desde el Ártico hasta el Antártico. Muchas especies
ha eliminado de HTML5.
realizan migraciones anuales de larga distancia y muchas más
y los sitios web nuevos deben usar CSS
realizan viajes irregulares más cortos.</p> <h />
para controlar la alineación de las
imágenes (como verá en las páginas
411-412).
<p> <img src = "images / bird.gif" alt = "Bird" width = "100"
altura = "100" alinear = "derecha" />Hay alrededor
Lo he discutido aquí porque es
10,000 especies vivas de aves que habitan diferentes
probable que lo encuentre si
ecosistemas desde el Ártico hasta el Antártico. Muchas especies
observa el código más antiguo y
realizan migraciones anuales de larga distancia y muchas más
porque algunos editores visuales
realizan viajes irregulares más cortos.</p>
aún insertan este atributo cuando
indica cómo debe alinearse una
imagen.

El alinear atributo puede tomar

estos valores horizontales:

izquierda
Esto alinea la imagen a la izquierda
(permitiendo que el texto fluya alrededor
de su lado derecho).

derecho
Esto alinea la imagen a la derecha
(permitiendo que el texto fluya alrededor
de su lado izquierdo).

103 IMAGENES
 artículo

Esto se ve mucho más ordenado

Resultado
que tener una línea de texto junto a
la imagen (como se muestra en el
ejemplo anterior).

Cuando le das el alinear

atribuir un valor de izquierda, la
imagen se coloca a la izquierda y el
texto fluye a su alrededor.

Cuando le das el alinear

atribuir un valor de derecho, la
imagen se coloca a la derecha y el
texto fluye a su alrededor.

Cuando el texto fluye hasta el

borde de una imagen, puede
dificultar la lectura. Aprenderá
cómo agregar un espacio entre el
texto y las imágenes en las páginas
313-314 usando CSSrelleno y
margen propiedades.

IIM
MAMÁ
AG
GES 110
04
4
 código antiguo: alIngAr
Imágenes VertICallY
Como vio en la última página, el
capítulo-05 / alineando-imágenes-verticalmente.html HtMl
alinear El atributo ya no se usa en
HTML5, pero se trata aquí porque es <p> <img src = "images / bird.gif" alt = "Bird" width = "100"
posible que vea que se usa en sitios height = "100" align = "top" />Hay alrededor
web más antiguos y todavía se usa en el 10,000 especies vivas de aves que habitan diferentes
código creado por algunos editores ecosistemas desde el Ártico hasta el Antártico. Muchas especies
visuales. realizan migraciones anuales de larga distancia y muchas más
realizan viajes irregulares más cortos.</p> <h />
Puede ver cómo usar CSS para
lograr los mismos efectos en las
páginas 285-286. <p> <img src = "images / bird.gif" alt = "Bird" width = "100"
altura = "100" alinear = "medio" />Hay alrededor
Hay tres valores que 10,000 especies vivas de aves que habitan diferentes
alinear El atributo puede tomar ese ecosistemas desde el Ártico hasta el Antártico. Muchas especies
control sobre cómo la imagen debe realizan migraciones anuales de larga distancia y muchas más
alinearse verticalmente con el texto realizan viajes irregulares más cortos.</p> <h />
que la rodea:

cima <p> <img src = "images / bird.gif" alt = "Bird" width = "100"
height = "100" align = "bottom" />Hay alrededor
Esto alinea la primera línea del texto
10,000 especies vivas de aves que habitan diferentes
circundante con la parte superior de la
ecosistemas desde el Ártico hasta el Antártico. Muchas especies
imagen.
realizan migraciones anuales de larga distancia y muchas más
realizan viajes irregulares más cortos.</p>
medio
Esto alinea la primera línea del
texto circundante con la mitad de
la imagen.

fondo
Esto alinea la primera línea del texto
circundante con la parte inferior de la
imagen.

105 IMAGENES
 artículo

El valor de cima coloca la primera línea de

Resultado
texto cerca de la parte superior de la
imagen y las siguientes líneas de texto
aparecen debajo de la imagen.

El valor de medio coloca la primera

línea de texto cerca del centro
vertical de la imagen y las siguientes
líneas de texto aparecen debajo de
la imagen.

El valor de fondo coloca la primera

línea de texto cerca de la parte inferior
de la imagen y las siguientes líneas de
texto debajo de la imagen.

Cuando el texto fluye hasta el

borde de una imagen, puede
dificultar la lectura. Aprenderá
cómo agregar un espacio entre el
texto y las imágenes en las páginas
313-314 usando CSSrelleno y
margen propiedades.

Si desea que todo el texto se

ajuste a la imagen (en lugar
de solo una línea de texto),
debe usar CSS flotador
propiedad discutida en las páginas
370-372.

En el código anterior, es posible que vea el

alinear atributo usado con los

valores izquierda o derecho para
lograr el mismo efecto (como se
describe en la página anterior),
aunque ya no se recomienda su uso.

IIM
MAMÁ
AG
GES 110
06
6
 tres reglas para
CREACIÓN DE IMÁGENES

Hay tres reglas que debe recordar al crear

imágenes para su sitio web que se resumen a
continuación. Entramos en más detalles sobre
cada tema en las próximas nueve páginas.

1 2 3
GUARDAR IMÁGENES EN GUARDAR IMÁGENES EN usar el CorreCt
el formato correcto el tamaño adecuado resolución
Los sitios web utilizan principalmente Debe guardar la imagen con el Las pantallas de las computadoras están

imágenes en formato jpeg, gif o png. Si mismo ancho y alto que formadas por puntos conocidos como píxeles.

eliges la imagen incorrecta aparecerá en el sitio web. Si Las imágenes que se utilizan en la web también

formato, es posible que la imagen no se la imagen es más pequeña que el están formadas por pequeños puntos. La

vea tan nítida como debería y puede ancho o alto que ha especificado, resolución se refiere al número de puntos por

hacer que la página web se cargue más la imagen se puede distorsionar y pulgada, y la mayoría de las pantallas de

lentamente. estirar. Si la imagen es más computadora solo muestran páginas web a 72

grande que el ancho y el alto si lo píxeles por pulgada. Por lo tanto, guardar

ha especificado, la imagen imágenes con una resolución más alta da como

tardará más en mostrarse en la resultado imágenes que son más grandes de lo

página. necesario y tardan más en descargarse.

107 IMAGENES
 HERRAMIENTAS PARA EDITAR
& GUARDAR IMÁGENES

Hay varias herramientas que puede utilizar para editar y

guardar imágenes y asegurarse de que tengan el tamaño, el

formato y la resolución correctos.

La herramienta más popular entre los

profesionales de la web es Adobe
Photoshop. (De hecho, los diseñadores
web profesionales suelen utilizar este
software para diseñar sitios completos). La
versión completa de Photoshop es cara,
pero existe una versión más económica
llamada Photoshop.
Elementos que se adaptan a las necesidades

de la mayoría de los principiantes.

otro software editores en línea solo extra

Adobe Fireworks www.photoshop.com Vea videos que demuestran cómo
Pixelmator www.pixlr.com cambiar el tamaño de las imágenes y
PaintShop Pro www.splashup.com guardarlas en el formato correcto
Paint.net www.ipiccy.com usando estas dos aplicaciones.

IMAGENES 108
 Formatos de imagen: Jpeg

Siempre que tenga muchos colores diferentes en una

imagen, debe usar un JPEG. Una fotografía que
muestra nieve o un cielo nublado puede parecer que
tiene áreas grandes que son solo blancas o grises,
pero la imagen generalmente se compone de muchos
colores diferentes que son sutilmente diferentes.
Formatos de imagen: gIf

R mSi
Si T
Tm
LD
B UI

CO
no
rt

C
e

mP
i AT
G
rte
noO
AM
GR I
D mSi
Utilice formato GIF o PNG
al guardar imágenes
con pocos colores o grandes
áreas del mismo color.

Cuando una imagen tiene un área que se rellena

exactamente con el mismo color, se conoce como color
plano. Los logotipos, las ilustraciones y los diagramas
suelen utilizar colores planos. (Tenga en cuenta que las
fotografías de nieve, cielo o césped no son colores planos,
están compuestas por muchos tonos sutilmente diferentes
del mismo color y no son tan adecuadas para el formato
GIF o PNG).
 Dimensiones de la imagen

Las imágenes que utiliza en su sitio web deben

guardarse con el mismo ancho y alto que desea
que aparezcan en la página.

Por ejemplo, si ha diseñado una página imagen. Al buscar imágenes, es solo extra
para incluir una imagen de 300 píxeles de importante comprender cómo se Visite la sección de herramientas del

ancho por 150 píxeles de alto, la imagen pueden alterar las dimensiones de sitio web que acompaña a este libro

que utilice debe ser de 300 x 150 píxeles. Es una imagen; Imagine que ha para ver una guía en video para cambiar

posible que deba utilizar herramientas de diseñado una página web para el tamaño de las imágenes en

edición de imágenes para cambiar el incluir una imagen de 300 píxeles de Photoshop y GIMP.

tamaño y recortar ancho por 150 píxeles de alto:

REDUCIR EL TAMAÑO DE LA IMAGEN AUMENTAR EL TAMAÑO DE LA IMAGEN Cambiando forma

Puede reducir el tamaño de las No puede aumentar el tamaño de Solo se pueden recortar algunas
imágenes para crear una versión las fotos de manera significativa sin imágenes sin perder información
más pequeña de la imagen. afectar la calidad de la imagen. valiosa (consulte la página siguiente).

ejemplo: Si su imagen tiene 600 ejemplo: Si su imagen tiene solo 100 ejemplo: Si su imagen tiene 300
píxeles de ancho y 300 píxeles de píxeles de ancho por 50 píxeles de alto, píxeles cuadrados, puede eliminar
alto, puede reducir el tamaño de la aumentar el tamaño en un 300% partes de ella, pero al hacerlo podría
imagen en un 50%. resultaría en una mala calidad. perder información valiosa.

Resultado: Esto creará una imagen que Resultado: La imagen se verá Resultado: Solo algunas imágenes se

será más rápida de descargar. borrosa o en bloques. pueden recortar y seguir teniendo sentido.

113 IMAGENES
 Recortar imágenes

Al recortar imágenes, es importante no perder

información valiosa. Es mejor obtener imágenes
que tengan la forma correcta si es posible.

retrato paisaje

Aquí puede ver una ilustración de Si nosotros cultivo esta ilustración Si nosotros agregar espacio extra
una jirafa que se adapta mejor a para hacerla paisaje perdemos la a la izquierda y a la derecha de la
aparecer en retrato. cabeza y los pies. ilustración, el fondo no continúa.

paisaje retrato

Aquí puede ver una ilustración de Si nosotros cultivo En esta ilustración para Si nosotros agregar espacio extra
un elefante que es más adecuado hacerla retrato perdemos el tronco y los en la parte superior e inferior de la
para aparecer en paisaje. cuartos traseros. ilustración, el fondo no continúa.

IMAGENES 114
 Resolución de imagen

Las imágenes creadas para la web deben guardarse con una

resolución de 72 ppp. Cuanto mayor sea la resolución de la
imagen, mayor será el tamaño del archivo.

JPG, GIF y PNG pertenecen a un tipo de Imágenes que aparecen en computadora Las computadoras muestran imágenes con

formato de imagen conocido como las pantallas están hechas de pequeños una resolución de 72 píxeles por pulgada

mapa de bits. Están formados por cuadrados llamados píxeles. Un pequeño (ppi). Imágenes enimprimir Los materiales

muchos cuadrados en miniatura. El segmento de esta fotografía se ha ampliado (como libros y revistas) están formados por

resolución de una imagen es el número de para mostrar cómo está formado por píxeles. pequeños círculos llamados

cuadrados que caben dentro de un área Los navegadores web en la mayoría de los puntos. Por lo general, estas imágenes

cuadrada de 1 pulgada x 1 pulgada. equipos de escritorio se imprimen con una resolución de 300
puntos por pulgada (dpi).

Para esta imagen:

JPEG a 300 ppp = 1526 kb
JPEG a 72 ppp = 368 kb

Debido al hecho de que las pantallas de las

computadoras están limitadas a una
resolución de 72 ppp, el uso de imágenes
en la web con una resolución más alta no
dará como resultado una mejor calidad de
imagen, solo en tamaños de archivo más
grandes, lo que aumentará el tiempo
necesario para cargarlos y, por lo tanto,
ralentizar la visualización de sus páginas
web.

115 IMAGENES
 Imágenes de VeCtor

Las imágenes vectoriales difieren de las imágenes de mapa de

bits y son independientes de la resolución. Las imágenes

vectoriales se crean comúnmente en programas como Adobe.

Ilustrador.

Cuando una imagen es un dibujo lineal Las imágenes vectoriales se crean La ventaja de crear dibujos
(como un logotipo, una ilustración o un colocando puntos en una cuadrícula lineales en formato vectorial es
diagrama), los diseñadores suelen y dibujando líneas entre esos que puedes aumentar las
crearlo en formato vectorial. puntos. Luego se puede agregar un dimensiones de la imagen sin
Las imágenes con formato vectorial son muy color para "completar" las líneas afectar la calidad de la misma.
diferentes a las imágenes de mapa de bits. que se han creado.

El método actual de usar imágenes

vectoriales para mostrarlas en sitios
web implica guardar una versión de
mapa de bits de la imagen vectorial
original y usarla.

Los gráficos vectoriales escalables (SVG)

son un formato relativamente nuevo que se
utiliza para mostrar imágenes vectoriales
directamente en la web (eliminando la
necesidad de crear versiones de mapas de
bits), sin embargo, su uso aún no está muy
extendido.

IMAGENES 116
 gIfs anImados

Los GIF animados muestran varios fotogramas de una imagen

en secuencia y, por lo tanto, se pueden utilizar para

crea animaciones simples .

A continuación puede ver los marcos Es importante recordar: Algunos diseñadores desaprueban los GIF

individuales que componen un animados porque recuerdan a muchos

GIF animado que muestra un punto diseñadores web aficionados que los

naranja que gira alrededor de un Cada fotograma adicional de la imagen usaban en exceso en la década de 1990.

círculo, como el tipo de animación que aumenta el tamaño del archivo y, por lo

puede ver cuando se carga una página tanto, puede aumentar el tiempo que tarda

web. una imagen en descargarse (y a los

usuarios de la web no les gusta esperar

Algunas aplicaciones de edición de mucho tiempo para que se descarguen las

imágenes como Adobe Photoshop imágenes).

le permiten crear GIF animados.

Hay varios tutoriales sobre cómo Debido a que los GIF no son un
hacer esto en la web. También hay formato ideal para mostrar
varios sitios web que le permiten fotografías, los GIF animados solo
cargar los gráficos para los son adecuados para ilustraciones
fotogramas individuales y crear el simples.
GIF animado para usted.

1 2 3 4 5 6 7 8

117 IMAGENES
 transparencia

Crear una imagen que sea parcialmente

transparente (o "transparente") para la web implica
seleccionar uno de dos formatos:

gIf transparente png

Si la parte transparente de la Si la parte transparente de la Los PNG transparentes no son totalmente

imagen tiene bordes rectos y es imagen tiene bordes diagonales compatibles con los navegadores más

100% transparente (es decir, no o redondeados o si desea una antiguos, sobre todo Internet Explorer 6

semiopaca), puede guardar la transparencia semiopaca o una (IE6). Hay algo de JavaScript que puede

imagen como GIF (con la opción de sombra, deberá guardarla como utilizar para solucionar este problema. Los

transparencia seleccionada). PNG. detalles de este script se pueden encontrar

en la sección de herramientas del sitio web
que acompaña a este libro.

derecho diagonal redondo semiopaco sombreado

IMAGENES 118
 Examen de imágenes
En la red

COMPROBACIÓN DEL TAMAÑO DE LAS IMÁGENES

Si está actualizando un sitio web, es posible que deba verificar el tamaño de una imagen A la izquierda puede ver cómo verificar el
existente antes de crear una nueva para reemplazarla. Esto se puede lograr haciendo clic tamaño de las imágenes y cómo
derecho en la imagen y haciendo una selección en el menú emergente que aparece. (Los descargarlas usando Safari. A continuación
usuarios de Mac deberán mantener presionada la tecla de control y hacer clic en lugar de se muestra una breve descripción general
hacer clic con el botón derecho). de qué seleccionar en el menú emergente
para realizar estas funciones en varios
navegadores.

Cromo
Tamaño: Abierta la imagen en una nueva pestaña

El tamaño aparece en una nueva pestaña

Descargar: Guardar imagen como

fIrefox
Tamaño: Ver información de la imagen

El tamaño aparece en la ventana emergente

Descargar: Guardar imagen como

Explorador de Internet
DESCARGA DE IMÁGENES
Tamaño: Propiedades

Si desea descargar imágenes de un sitio web, puede hacerlo accediendo al mismo El tamaño aparece en la ventana emergente

menú emergente. (Sin embargo, recuerde que todas las imágenes en línea están Descargar: guardar imagen

sujetas a derechos de autor y requieren permiso explícito para reutilizar

safari
Tamaño: Abierta la imagen en una nueva pestaña

El tamaño aparece en la barra de título

Descargar: guardar imagen como

119 IMAGENES
 mi
html5: fIguarreta ICnld
pie de figura

HtMl capítulo-05 / figura-y-figura-caption.html <figura>

<figura>
Las imágenes a menudo vienen con
<img src = "images / otters.jpg" alt = "Fotografía de
subtítulos. HTML5 ha introducido un
dos nutrias marinas flotando en el agua ">
nuevo <figura> elemento para contener
<br />
imágenes y su título para que los dos
<figcaption>Las nutrias marinas se dan la mano cuando
estén asociados.
dormir para que no se alejen el uno del otro.</
figcaption>
Puede tener más de una
</figure>
imagen dentro del <figura>
siempre que todos compartan
el mismo título.
Resultado

<figcaption>
El <figcaption> El elemento se ha
agregado a HTML5 para permitir que
los autores de páginas web agreguen
un título a una imagen.

Antes de que se crearan estos

elementos, no había forma de
asociar un <img> elemento con su
leyenda.

Los navegadores más antiguos que no

comprenden los elementos HTML5
simplemente ignoran los elementos
nuevos y muestran su contenido.

IIM
MAMÁ
AG
GES 112
20
0
 En este ejemplo, el logotipo es un El alt atributo en cada imagen proporciona Este ejemplo no usa el
GIF porque usa colores planos, una descripción para aquellos que utilizan anchura altura, o
mientras que las fotografías son lectores de pantalla y el título El atributo alinear atributos, ya que se están
JPEG. La foto principal se coloca proporciona información adicional. (Esto se eliminando gradualmente y se
dentro del HTML5 <figura> elemento muestra en la información sobre recomienda utilizar propiedades
y tiene su propio título. herramientas). CSS en su lugar.

121 IMAGENES
 ejemplo
Imagenes

<html>
<cabeza>

<título>Imagenes</título>
</head>
<cuerpo>

<h1>
<img src = "images / logo.gif"
alt = "De la A al calabacín" />
</h1>
<figura>
<img src = "images / chocolate-islands.jpg"
alt = "Islas del chocolate"
title = "Tortas individuales de las islas del chocolate" />
<p>
<figcaption>
¡Esta receta de pasteles de chocolate individuales
es tan simple y tan deliciosa!
</figcaption>
</p>
</figure>
<h4>Más recetas:</h4> <p>

<img src = "images / lemon-posset.jpg"

alt = "Posset de limón"
title = "Postre de limón con posset" />
<img src = "images / coles-de-Bruselas-asadas.jpg"
alt = "Coles de Bruselas asadas" title = "Guarnición de
coles de Bruselas asadas" /> <img src = "images / zucchini-
cake.jpg"
alt = "Pastel de calabacín"
title = "Pastel de calabacín sin glaseado" />
</p>
</body>
</html>

IMAGENES 122
 resumen
Imagenes

X El <img> El elemento se usa para agregar imágenes a un

Página web.

X Siempre debe especificar un src atributo para indicar el

fuente de una imagen y un alt atributo para describir el
contenido de una imagen.

X Debe guardar las imágenes en el tamaño que las

utilizará en la página web y en el formato apropiado.

X Es mejor guardar las fotografías como archivos JPEG; Las ilustraciones o

logotipos que utilizan colores planos se guardan mejor como GIF.

 Mesas
6
X Cómo crear tablas
X Qué información se adapta a las tablas
X Cómo representar datos complejos en tablas
 Hay varios tipos de información que deben
mostrarse en una cuadrícula o tabla. Por
ejemplo: resultados deportivos, informes de
existencias, horarios de trenes.

Al representar información en una tabla, debe pensar en términos

de una cuadrícula formada por filas y columnas (un poco como una
hoja de cálculo). En este capítulo aprenderá a:

● Utilice los cuatro elementos clave para crear tablas

● Representar datos complejos usando tablas

● Agregar subtítulos a las tablas

127 MESAS
MESAS 128
129 MESAS
¿Qué es una mesa?

Una tabla representa información en formato de cuadrícula. Los

ejemplos de tablas incluyen informes financieros, programas de

televisión y resultados deportivos.

Las cuadrículas nos permiten Cada bloque de la cuadrícula se

comprender datos complejos al hacer denomina celda de tabla. En HTML,
referencia a la información en dos ejes. una tabla se escribe fila por fila.

MESAS 130
 ESTRUCTURA BÁSICA DE LA MESA

<tabla> Chapter-06 / basic-table-structure.html HtMl

<tabla>
El <mesa> El elemento se utiliza <tr>
para crear una tabla. El <td>15</td>
contenido de la tabla se escribe <td>15</td>
fila por fila. <td>30</td>
</tr>
<tr>

<tr> <td>45</td>
<td>60</td>
<td>45</td>
Indicas el inicio de cada fila
</tr>
usando la apertura <tr> etiqueta.
<tr>
(Eltr representa la fila de la mesa).
<td>60</td>
<td>90</td>
Va seguido de uno o más
<td>90</td>
<td> elementos (uno para cada celda
</tr>
de esa fila).
</table>

Al final de la fila, usa un

cierre </tr> etiqueta.
Resultado

<td>
Cada celda de una tabla se

representa mediante un <td>

elemento. (Eltd significa datos
de la tabla).

Al final de cada celda, usa un

cierre </td> etiqueta.

Algunos navegadores dibujan

automáticamente líneas alrededor de
la tabla y / o las celdas individuales.
Aprenderá a controlar los bordes de
las tablas usando CSS en las páginas
309-312 y 337-340.

131 MESAS
 Escudo de mesacgles

HtMl capítulo-06 / table-headings.html

<th>
<tabla>
<tr> El <th> El elemento se usa como el
<th> </th> <td> elemento, pero su propósito
<th scope = "col">sábado</th> <th es representar el encabezado de
scope = "col">domingo</th> </tr> una columna o una fila. (Elth
representa el encabezado de la
<tr> tabla).
<th alcance = "fila">Entradas vendidas:</th>
<td>120</td> Incluso si una celda no tiene
<td>135</td> contenido, debe usar un <td> o
</tr> <th> elemento para representar la

<tr> presencia de una celda vacía, de lo

<th alcance = "fila">Ventas totales:</th> contrario, la tabla no se representará
<td>PS600</td> <td>PS675</td> </tr> correctamente. (La primera celda de
la primera fila de este ejemplo
muestra una celda vacía).
</table>
Usando <th> Los elementos para
encabezados ayudan a las personas
que usan lectores de pantalla, mejora
Resultado
la capacidad de los motores de
búsqueda para indexar sus páginas y
también le permite controlar mejor la
apariencia de las tablas cuando
comienza a usar CSS.

Puedes usar el alcance atributo en el <

th> elemento para indicar si es un

encabezado para una columna o una

fila. Puede tomar los valores:hilera para
indicar un encabezado para una fila o
columna para indicar un encabezado

para una columna.

Los navegadores suelen mostrar el

contenido de un <th> elemento en
negrita y en el medio de la celda.

TAB
BLLE
ES
S
ejército de reserva 113
32
2
 columnas que abarcan

A veces, es posible que necesite que las

capítulo-06 / spanning-columnas.html HtMl
entradas de una tabla se extiendan a lo
largo de más de una columna. <tabla>
<tr>
El colspan El atributo se puede <th> </th>
utilizar en un <th> o <td> elemento <th>9 a. M.</th>
e indica cuántas columnas debe <th>10 a. M.</th>
atravesar esa celda. <th>11 a. M.</th>
<th>12 a. M.</th>
En el ejemplo de la derecha puede </tr>
ver un horario con cinco columnas; la <tr>
primera columna contiene el <th>lunes</th> <td colspan = "2">
encabezado de esa fila (el día), las Geografía</td> <td>Matemáticas</td>
cuatro restantes representan franjas <td>Arte</td>
horarias de una hora.
</tr>
Si observa la celda de la tabla que <tr>
contiene las palabras 'Geografía', <th>martes</th> <td colspan = "3">
verá que el valor de la Gimnasio</td> <td>Economía
colspan atributo es 2, lo que indica doméstica</td> </tr>
que la celda debe tener dos
columnas. En la tercera fila, </table>
'Gimnasio' se encuentra en tres
columnas.

Resultado
Puede ver que la segunda y
tercera filas tienen menos
<td> elementos que hay columnas.

Esto se debe a que, cuando una

celda se extiende a lo largo de más
de una columna, el <td> o <th>
las celdas que habrían estado en el
lugar de las celdas más anchas no se
incluyen en el código.

Agregué algunos estilos CSS a este

ejemplo para que pueda ver cómo las
celdas abarcan más de una columna.
Aprenderá a hacer esto en las
páginas 250, 337-340.

133 MESAS
 icW
spannina grrTo les

También puede necesitar entradas en

HtMl capítulo-06 / spanning-rows.html
una tabla para extenderse hacia abajo

<tabla> en más de una fila.

<tr>
<th> </th> El rowpan El atributo se puede utilizar
<th>A B C</th> en un <th> o <td> elemento para indicar
<th>BBC</th> cuántas filas debe extenderse una celda
<th>CNN</th> a lo largo de la tabla.
</tr>
<tr> En el ejemplo de la izquierda, puede
<th>6:00 p. M. A 7:00 p. M.</th> ver que ABC muestra una película de
<td rowspan = "2">Película</td> 6 p.m. a 8 p.m., mientras que los
<td>Comedia</td> <td>Noticias</ canales de la BBC y CNN muestran
td> </tr> dos programas durante este período
de tiempo (cada uno de los cuales
<tr> dura una hora).
<th>7:00 p. M. A 8:00 p. M.</th>
<td>Deporte</td> <td>Asuntos Si miras el último <tr>
actuales</td> </tr> elemento, solo contiene tres elementos
aunque hay cuatro columnas en el
</table> resultado a continuación. Esto se debe
a que la película en el
<tr> elemento de arriba utiliza el
rowpan atributo para estirarse y
hacerse cargo de la celda de
Resultado
abajo.

He agregado algunos estilos CSS a

este ejemplo para que pueda ver
cómo las celdas abarcan más de
una fila. Aprenderá a aplicar estos
estilos CSS a tablas en las páginas
250, 337-340.

TAB
BLLE
ES
S 113
34
4
ejército de reserva
 tablas largas

Hay tres elementos que ayudan a

capítulo-06 / tablas-largas.html HtMl
distinguir entre el contenido
principal de la tabla y la primera y <tabla>
última fila (que pueden contener <thead>
contenido diferente). <tr>
<th>Fecha</th> <th>
Estos elementos ayudan a las personas Ingreso</th> <th>Gasto</
que usan lectores de pantalla y también th> </tr>
le permiten diseñar estas secciones de
una manera diferente al resto de la </thead>
tabla (como verá cuando aprenda sobre <tbody>
CSS). <tr>
<th>1 de enero</th> <td>
250</td>

<thead> </tr>
<td>36</td>

<tr>
Los encabezados de la tabla deben
<th>2 de enero</th> <td>
situarse dentro del <thead> elemento.
285</td>
<td>48</td>

<tbody>
</tr>
<! - filas adicionales como arriba -> <tr>

El cuerpo debe sentarse dentro del <th>31 de enero</th> <td>

<tbody> elemento. 129</td>
<td>64</td>
</tr>

<tfoot> </tbody>
<tfoot>
<tr>
El pie de página pertenece al interior del
<td> </td>
<tfoot> elemento.
<td>7824</td>
<td>1241</td> </
De forma predeterminada, los navegadores
tr>
rara vez tratan el contenido de estos
</tfoot>
elementos de forma diferente a otros
</table>
elementos, sin embargo, los
diseñadores suelen utilizar estilos CSS
para cambiar su apariencia.

135 MESAS
 artículo

Algunos de los editores de HTML que

Resultado
vienen en los sistemas de administración

de contenido ofrecen herramientas para

ayudar a dibujar tablas. Si la primera fila

de su tabla solo contiene <th>

entonces puede encontrar que
el editor inserta un <thead>
elemento automáticamente.

Parte de la razón para tener

separados <thead> y <tfoot>
elementos es de modo que, si tiene una
tabla que es más alta que la pantalla (o, si
está impresa, más de una página), el
navegador puede mantener el encabezado
y el pie de página visibles mientras se
desplaza el contenido de la tabla. Esto tiene
como objetivo que los usuarios vean más
fácilmente en qué columna se encuentran
los datos (sin embargo, esta funcionalidad
no está implementada de forma
predeterminada en ningún navegador
actual).

He agregado algunos estilos CSS a

este ejemplo para que pueda ver
el contenido de <thead>
y <tfoot> siendo tratado de
manera diferente al resto de las
filas. Aprenderá a aplicar estos
estilos CSS a tablas en las
páginas 309-312 y 337-340.

TAB
BLLE
ES
S 113
36
6
ejército de reserva
 código antiguo:
ANCHO Y ESPACIO
Hay algunos atributos obsoletos que
capítulo-06 / ancho-y-espaciado.html HtMl
no debe utilizar en sitios web
nuevos. Sin embargo, es posible que <table width = "400" cellpadding = "10" cellspacing = "5">
se encuentre con algunos de ellos al <tr>
ver el código más antiguo, por lo que <th width = "150"> </th>
los mencionaré aquí. Todos estos <th>Retirado</th> <th>Crédito</th>
atributos han sido reemplazados por <th ancho = "150">Equilibrio</th> </
el uso de CSS. tr>

El ancho atributo se utilizó en la <tr>

apertura <mesa> etiqueta para <th>enero</th> <td>
indicar qué tan ancha debe ser 250,00</td> <td>
esa mesa y en alguna abertura 660,50</td> <td>
<th> y <td> etiquetas para 410,50</td> </tr>
especificar el ancho de las celdas
individuales. El valor de este <tr>
atributo es el ancho de la tabla o <th>febrero</th> <td>
celda en píxeles. 135,55</td> <td>895.20
</td> <td>1170.15</
Las columnas de una tabla deben td> </tr>
formar una línea recta, por lo que a
menudo solo ve el ancho atributo en la </table>
primera fila (y todas las filas posteriores
usarían esa configuración).

Resultado
La apertura <mesa> La etiqueta
también podría usar la relleno celular
atributo para agregar espacio
dentro de cada celda de la tabla, y el
espacio celular atributo para crear
espacio entre cada celda de la tabla.
Los valores de estos atributos se
expresaron en píxeles.

Agregué estilos CSS a este ejemplo

para que pueda ver el ancho de las
celdas de la tabla con mayor claridad.
Si desea controlar el ancho o el
espaciado de las tablas y celdas, debe
usar CSS como se muestra en las
páginas 303, 337-340.

137 MESAS
 ola DrCTo
icDlmimi:
borde y fondo
El frontera El atributo se usó
HtMl capítulo-06 / borde-y-fondo.html
tanto en el <mesa> y <td>
<table border = "2" bgcolor = "# efefef"> elementos para indicar el ancho
<tr> del borde en píxeles.
<th width = "150"> </th>
<th>Retirado</th> <th> El bgcolor El atributo se utilizó para
Crédito</th> indicar los colores de fondo de la tabla
<th width = "150" bgcolor = "# cccccc">Equilibrio</th> </tr> completa o de las celdas de la tabla
individual. El valor suele ser un código
<tr> hexadecimal (que discutimos en las
<th>enero</th> <td> páginas 249-252).
250,00</td> <td>
660,50</td> Este ejemplo usa el HTML
<td bgcolor = "# cccccc">410,50</td> </tr> frontera y bgcolor atributos. En
este ejemplo no se utilizaron
<tr> atributos CSS.
<th>febrero</th> <td>
135,55</td> <td> Al crear un nuevo sitio web,
895.20</td> debe utilizar CSS para controlar
<td bgcolor = "# cccccc">1170.15</td> </tr> la apariencia de la tabla en lugar
de estos atributos. Solo se
</table> tratan aquí porque es posible
que los encuentre si observa el
código de sitios web más
antiguos.
Resultado

TAB
BLLE
ES
S 113
38
8
ejército de reserva
 Este ejemplo muestra una tabla para La celda vacía en la parte superior izquierda la alcance atributo para indicar si
que los clientes comparen paquetes todavía tiene un <th> elemento para son encabezados de una fila o
de alojamiento de sitios web. Hay representarlo. Cada celda de la tabla debe columna. La última fila usa el
títulos de tabla en la primera fila y la ser contabilizada por un <th> o <td> colspan atributo para distribuir
primera columna de la tabla. elemento. El <th> uso de elementos en las tres columnas.

139 MESAS
 ejemplo
Mesas

<html>
<cabeza>

<título>Mesas</título> </
head>
<cuerpo>

<tabla>
<thead>
<tr>
<th> </th>
<th scope = "col">Alojamiento para principiantes</th> <th
scope = "col">Alojamiento empresarial premium</th> </tr>

</thead>
<tbody>
<tr>
<th alcance = "fila">Espacio del disco</th>
<td>250 MB</td> <td> 1 GB </td>

</tr>
<tr>
<th alcance = "fila">Banda ancha</th>
<td>5gb por mes</td> <td>50gb por mes
</td> </tr>

<! - más filas como las dos de arriba aquí -> </tbody>

<tfoot>
<tr>
<td> </td>
<td colspan = "2">¡Regístrese ahora y ahorre un 10%!</td> </
tr>
</tfoot>
</table>
</body>
</html>

MESAS 140
 resumen
Mesas

X El <mesa> El elemento se utiliza para agregar tablas a una página

web.

X Se dibuja una tabla fila por fila. Cada fila se crea con
el <tr> elemento.

X Dentro de cada fila hay una serie de celdas

representadas por <td> elemento (o <th> si es un
encabezado).

X Puede hacer que las celdas de una tabla abarquen más de

una fila o columna usando el rowpan y colspan atributos.

X Para tablas largas, puede dividir la tabla en <thead>,

<tbody>, y <tfoot>.
 7
Formularios

X Cómo recopilar información de los visitantes

X Diferentes tipos de controles de formulario

X Nuevos controles de formulario HTML5

 Tradicionalmente, el término "formulario" se refiere a

un documento impreso que contiene espacios para

que usted complete la información.

HTML toma prestado el concepto de formulario para referirse a diferentes

elementos que le permiten recopilar información de los visitantes de su
sitio.

Ya sea que esté agregando un cuadro de búsqueda simple a su sitio web o

necesite crear aplicaciones de seguros más complicadas, los formularios
HTML le brindan un conjunto de elementos para recopilar datos de sus
usuarios. En este capítulo aprenderá:

● Cómo crear un formulario en su sitio web

● Las diferentes herramientas para recopilar datos

● Nuevos controles de formulario HTML5

145 FORMULARIOS
FORMAS 146
 ¿Por qué formularios?

El formulario más conocido en la web es probablemente el

cuadro de búsqueda que se encuentra justo en el medio de

Página de inicio de Google.

Además de permitir a los usuarios realizar al registrarse como miembro de un

búsquedas, los formularios también sitio web, al comprar en línea y al
permiten a los usuarios realizar otras suscribirse a boletines informativos
funciones en línea. Verás formularios o listas de correo.

147 FORMULARIOS
 Controles de formulario

Hay varios tipos de controles de formulario que puede

utilizar para recopilar información de los visitantes.
a su sitio.

AGREGAR TEXTO:

Entrada de texto (linea sola) Entrada de contraseña Área de texto (multilínea)

Se utiliza para una sola línea de texto, como Como un cuadro de texto de una sola línea, Para áreas de texto más extensas,
direcciones de correo electrónico y nombres. pero enmascara los caracteres ingresados. como mensajes y comentarios.

tomando decisiones:

Botones de radio Casillas de verificación Cuadros desplegables

Para usar cuando un usuario debe Cuando un usuario puede seleccionar y Cuando un usuario debe elegir una
seleccionar una de varias opciones. deseleccionar una o más opciones. de varias opciones de una lista.

ENVÍO DE FORMULARIOS: CARGA DE ARCHIVOS:

Enviar botones Botones de imagen Subir archivo

Para enviar datos de su Similar a los botones de envío, pero Permite a los usuarios cargar archivos (por

formulario a otra página web. te permiten usar una imagen. ejemplo, imágenes) a un sitio web.

FORMULARIOS 148
 CÓMO FUNCIONAN LOS FORMULARIOS

Un usuario completa un formulario y luego presiona un

botón para enviar la información al servidor.

1 El nombre de cada control de

formulario se envía al
servidor junto con el valor
VOTA POR TU MÚSICA DE JAZZ FAVORITA que el usuario ingresa o

DE TODOS LOS TIEMPOS selecciona.

2
Nombre de usuario: Hiedra

Yo voto por: Ella Fitzgerald

Herbie Hancock
3
John Coltrane
Miles Davis
El servidor procesa
Monje Thelonius
la información usando un
lenguaje de programación
Entregar como PHP, C #, VB.net o Java.
También puede almacenar la
información en un
base de datos.

¡Gracias, Ivy!
El servidor crea una nueva

Votaste por Herbie Hancock. página para enviar de vuelta al

navegador en función de la
información recibida.

149 FORMULARIOS
Un formulario puede tener varios controles de formulario,

cada uno de los cuales recopila información diferente. El

servidor necesita saber qué parte de los datos ingresados

se corresponde con qué elemento del formulario.

Nombre

nombre de usuario=Hiedra

Valor

Para diferenciar entre varios datos ingresados, la información se envía desde el

navegador al servidor utilizando pares de nombre / valor. En este ejemplo, el
formulario solicita el nombre de usuario del visitante y también su músico de
jazz favorito. Los pares de nombre / valor enviados al servidor son:

nombre de usuario=Hiedra votar=Herbie

Si el control de formulario permite al Si el control de formulario le permite elegir
usuario ingresar texto, entonces el valor entre un conjunto fijo de respuestas (por
del control de formulario es lo que el ejemplo, botones de radio, casillas de
usuario haya escrito. verificación o una lista desplegable), el
autor de la página web agregará un código
que le da a cada opción un valor
automático.

Nunca debe cambiar el nombre de un control de formulario en una página a

menos que sepa que el código del servidor comprenderá este nuevo valor.

FORMULARIOS 150
 ESTRUCTURA DE LA FORMA

capítulo-07 / form-structure.html HtMl

<formulario>
<acción del formulario = "http://www.example.com/subscribe.php"
Los controles de formulario viven dentro de un método = "obtener">

<formulario> elemento. Este elemento <p>Aquí es donde aparecerán los controles de formulario.
siempre debe llevar elacción </p>
atributo y normalmente tendrá un </form>
método y identificación atributo también.

acción
Cada <formulario> elemento Resultado
requiere un acción atributo. Suvalor
es la URL de la página en el
servidor que recibirá la
información en el formulario
cuando se envíe.

método
Los formularios se pueden enviar mediante

uno de dos métodos: obtener o correo.

Con el obtener método, los valores Con el correo método los valores se Si no se utiliza el atributo de método, los

del formulario se agregan al final envían en lo que se conoce como datos del formulario se enviarán

de la URL especificada en el acción encabezados HTTP. Como regla utilizando el obtener método.

atributo. Elobtener general, debe utilizar el

El método es ideal para: correo método si su forma:
identificación

● formularios cortos (como cuadros de ● permite a los usuarios cargar un archivo Miramos el identificación atributo en la
búsqueda) página 183, pero el valor se usa para
● es muy largo
identificar el formulario de manera
● cuando solo está recuperando
● contiene datos sensibles (por distinta a otros elementos de la página
datos del servidor web (no
ejemplo, contraseñas) (y a menudo lo usan los scripts, como
enviando información que debe
agregarse o eliminarse de una los que verifican que haya ingresado
● agrega información o elimina
base de datos) información en campos que requieren
información de una base de
valores).
datos

151 FORMULARIOS
 Cu
TexAtrItcortar lEt

HtMl capítulo-07 / text-input.html

<entrada>
<acción del formulario = "http://www.example.com/login.php">
<p>Nombre de usuario: El <entrada> El elemento se utiliza para
<input type = "text" name = "username" size = "15" crear varios controles de formulario
maxlength = "30" /> diferentes. El valor de laescribe
</p> El atributo determina qué
</form> tipo de entrada crearán.

tipo = "texto"
Resultado Cuando el escribe atributo tiene un valor
de texto, crea una entrada de texto de
una sola línea.

nombre
Cuando los usuarios ingresan
información en un formulario, el
servidor necesita saber en qué
formulario controla cada dato. (Por
ejemplo, en un formulario de inicio de
sesión, el servidor necesita saber qué se
Talla ha ingresado como nombre de usuario y
El Talla El atributo no debe usarse (aunque un usuario puede ingresar qué se ha dado como contraseña). Por lo
en formularios nuevos. Se usaba en más caracteres si lo desea). tanto, cada control de formulario
formas más antiguas para indicar el requiere unnombre atributo. El valor de
ancho de la entrada de texto En cualquier formulario nuevo que este atributo
(medido por el número de escriba, se debe usar CSS para controlar identifica el formulario de control y
caracteres que se verían). el ancho de los elementos del se envía junto con la información
formulario. ElTalla El atributo solo se que ingresan al servidor.
Por ejemplo, un valor de 3 crearía un menciona aquí porque puede
cuadro lo suficientemente ancho para encontrarlo al mirar un código más
longitud máxima
mostrar tres caracteres antiguo.
Puedes usar el longitud máxima
atributo para limitar la cantidad de
caracteres que un usuario puede
ingresar en el campo de texto. Su
valor es la cantidad de caracteres
que pueden ingresar. Por ejemplo, si
solicita un año, ellongitud máxima
El atributo podría tener un valor de 4.

FFO
ORMS milisegundo 115
52
2
 Entrada pAssWorD

<entrada> capítulo-07 / password-input.html HtMl

<acción del formulario = "http://www.example.com/login.php">
<p>Nombre de usuario:

type = "contraseña" <input type = "text" name = "username" size = "15"

Cuando el escribe atributo tiene un maxlength = "30" />
valor de clave crea un cuadro de texto </p>
que actúa como una entrada de texto <p>Clave:
de una sola línea, excepto que los <entrada tipo = "contraseña" nombre = "contraseña" tamaño = "15"
caracteres están bloqueados. Están maxlength = "30" />
ocultos de esta manera para que si </p>
alguien está mirando por encima del </form>
hombro del usuario, no pueda ver
datos confidenciales como
contraseñas.
Resultado

nombre
El nombre El atributo indica el
nombre de la contraseña ingresada,
que se envía al servidor con la
contraseña que ingresa el usuario.

tamaño, longitud máxima Aunque la contraseña está oculta en la Para una seguridad total, el servidor
También puede llevar el Talla y pantalla, esto no significa que los datos debe configurarse para comunicarse
longitud máxima atributos como la de un control de contraseña se envíen con los navegadores de los usuarios
entrada de texto de una sola línea. de forma segura al servidor. Nunca debe mediante Secure Sockets Layer (SSL). El
utilizarlos para enviar datos tema de SSL está más allá del alcance de
confidenciales, como números de este libro; sin embargo, hay enlaces
tarjetas de crédito. para obtener más información en el sitio
web adjunto.

153 FORMULARIOS
 tEXAtrAtIrCElA
mi

HtMl capítulo-07 / textarea.html

<textarea>
<acción del formulario = "http://www.example.com/comments.php">
<p>¿Qué te pareció este concierto?</p> <textarea name = El <textarea> El elemento se utiliza para

"comments" cols = "20" rows = "4">Ingresar crear una entrada de texto de varias líneas.

tus comentarios...</textarea> A diferencia de otros elementos de entrada,

</form> este no es un elemento vacío. Por lo tanto,

debe tener una etiqueta de apertura y
cierre.

Cualquier texto que aparezca entre la

apertura <textarea> y cierre </
textarea> Las etiquetas aparecerán en

el cuadro de texto cuando se cargue la

página.
Resultado

Si el usuario no elimina ningún texto

entre estas etiquetas, este mensaje
se enviará al servidor junto con lo
que haya escrito el usuario. (Algunos
sitios usan JavaScript para borrar
esta información cuando el usuario
hace clic en el área de texto).
Si está creando un nuevo El cols El atributo indica qué
formulario, debe usar CSS para tan ancho debe ser el área de
controlar el ancho y alto de un texto (medido en número de
<textarea>. Sin embargo, si está caracteres). Elfilas atributo
viendo un código más antiguo, es indica cuántas filas
posible que vea el cols y filas atributos el área de texto debe ocupar
utilizados con este elemento. verticalmente.

FFO
ORMS milisegundo 115
54
4
 boton de radio

<entrada> capítulo-07 / radio-button.html HtMl

<acción del formulario = "http://www.example.com/profile.php">

type = "radio" <p>Seleccione su género favorito:

<br />
Los botones de radio permiten a los
<input type = "radio" name = "genre" value = "rock"
usuarios elegir solo una de varias opciones.
comprobado = "comprobado" /> Rock

<input type = "radio" name = "genre" value = "pop" />

nombre Música pop

El nombre El atributo se envía al servidor <input type = "radio" name = "genre" value = "jazz" />
con el valor de la opción que selecciona Jazz
el usuario. Cuando una pregunta ofrece </p>
a los usuarios opciones de respuesta en </form>
forma de botones de opción, el valor de
lanombre El atributo debe ser el mismo
para todos los botones de opción
Resultado
utilizados para responder a esa
pregunta.

valor
El valor El atributo indica el valor
que se envía al servidor para la
opción seleccionada. El valor de Tenga en cuenta: Una vez que se ha opción y desea que puedan
cada uno de los botones de un seleccionado un botón de radio, no se deseleccionarla (por ejemplo, si están
grupo debe ser diferente (para puede deseleccionar. El usuario solo indicando que están de acuerdo con
que el servidor sepa qué opción puede seleccionar una opción diferente. los términos y condiciones), debe usar
ha seleccionado el usuario). Si solo le permite al usuario una una casilla de verificación en su lugar.

comprobado
El comprobado El atributo se puede
usar para indicar qué valor (si
corresponde) se debe seleccionar
cuando se carga la página. El valor de
este atributo escomprobado. Solo un
botón de radio de un grupo debe
utilizar este atributo.

155 FORMULARIOS
 ChACErktIbColXmi

HtMl capítulo-07 / checkbox.html

<entrada>
<acción del formulario = "http://www.example.com/profile.php">
<p>Seleccione su (s) servicio (s) de música favorito:
type = "casilla de verificación"
<br />
Las casillas de verificación permiten a los
<tipo de entrada = "casilla de verificación" nombre = "servicio"
usuarios seleccionar (y deseleccionar) una o
valor = "itunes" comprobado = "comprobado" /> iTunes
más opciones en respuesta a una pregunta.
<tipo de entrada = "casilla de verificación" nombre = "servicio"

value = "lastfm" /> Last FM

<tipo de entrada = "casilla de verificación" nombre = "servicio" nombre
valor = "spotify" /> Spotify El nombre El atributo se envía al
</p> servidor con el valor de las opciones que
</form> selecciona el usuario. Cuando una
pregunta ofrece a los usuarios opciones
de respuesta en forma de casillas de
verificación, el valor de la
Resultado
nombre El atributo debe ser el mismo
para todos los botones que
responden a esa pregunta.

valor
El valor El atributo indica el valor
enviado al servidor si esta casilla de
verificación está marcada.

comprobado
El comprobado El atributo indica que
esta casilla debe estar marcada
cuando se carga la página. Si se usa,
su valor debe sercomprobado.

FFO
ORMS milisegundo 115
56
6
 Suelta la caja de la lista

<seleccionar> Chapter-07 / drop-down-list-box.html HtMl

<acción del formulario = "http://www.example.com/profile.php">
Un cuadro de lista desplegable (también <p>¿En qué dispositivo escuchas música?</p> <seleccionar
conocido como cuadro de selección) permite a nombre = "dispositivos">
los usuarios seleccionar una opción de una lista <option value = "ipod">iPod</opción> <valor de
desplegable. opción = "radio">Radio</opción> <opción valor =
"computadora">Computadora</opción>
El <seleccionar> El elemento se utiliza para </select>
crear un cuadro de lista desplegable. </form>
Contiene dos o más <opción>
elementos.

Resultado
nombre
El nombre El atributo indica el
nombre del control de formulario
que se envía al servidor, junto con el
valor que seleccionó el usuario.

<opción>
El <opción> El elemento se utiliza seleccionado
para especificar las opciones que el El seleccionado El atributo se puede La función del cuadro de lista
usuario puede seleccionar. Las usar para indicar la opción que se desplegable es similar a la de los
palabras entre la apertura <opción> debe seleccionar cuando se carga botones de opción (en que solo
y cierre </opción> Las etiquetas se la página. El valor de este atributo se puede seleccionar una
mostrarán al usuario en el cuadro debe serseleccionado. opción). Hay dos factores clave
desplegable. para elegir cuál usar:
Si no se utiliza este atributo, la

valor primera opción se mostrará cuando

se cargue la página. Si el usuario no
1. Si los usuarios necesitan ver todas las

opciones de un vistazo, los botones de opción

El <opción> elemento usa el
selecciona una opción, el primer son más adecuados.
valor atributo para indicar el valor
elemento se enviará al servidor
que se envía al servidor junto con
como valor para este control. 2. Si hay una lista muy larga de
el nombre del control si se
opciones (como una lista de países), los
selecciona esta opción.
cuadros de lista desplegable funcionan
mejor.

157 FORMULARIOS
 SELLO MÚLTIPLEACrttIbColXmi

HtMl Chapter-07 / multiple-select-box.html

<seleccionar>
<acción del formulario = "http://www.example.com/profile.php">
<p>¿Tocas alguno de los siguientes instrumentos?
(Puede seleccionar más de una opción manteniendo presionado el Talla
control en una PC o la tecla de comando en una Mac mientras Puede convertir un cuadro de selección
selecciona diferentes opciones).</p> <seleccionar nombre = desplegable en un cuadro que muestre
"instrumentos" tamaño = "3" más de una opción agregando el
multiple = "multiple"> Talla atributo. Su valor debe ser el
<option value = "guitarra" seleccionada = "seleccionada"> número de opciones que desea
Guitarra</opción> mostrar a la vez. En el ejemplo,
<option value = "tambores">Batería</opción> puede ver que se muestran tres de
<valor de opción = "teclado" las cuatro opciones.
selected = "seleccionado">Teclado</opción>
<valor de opción = "bajo">Bajo</opción> </select> Desafortunadamente, la forma en
que los navegadores han
</form> implementado este atributo no es
perfecta, y debería probarse a fondo
si se usa (en particular en Firefox y
Safari en una Mac).
Resultado

múltiple
Puede permitir que los usuarios
seleccionen varias opciones de esta
lista agregando el múltiple atributo
con un valor de múltiple.

Es una buena idea decirles a los

usuarios si pueden seleccionar más
de una opción a la vez. También es
útil indicar que en una PC deben
mantener presionada lacontrol
mientras selecciona varias opciones y
en una Mac deben usar la mando
mientras selecciona las opciones.

FFO
ORMS milisegundo 115
58
8
 CAJA DE ENTRADA DE ARCHIVO

<entrada> capítulo-07 / archivo-input-box.html HtMl

<acción del formulario = "http://www.example.com/upload.php"
Si desea permitir que los usuarios método = "publicar">
carguen un archivo (por ejemplo, una <p>Sube tu canción en formato MP3:</p> <input type =
imagen, video, mp3 o un PDF), "file" name = "user-song" /> <br /> <input type = "submit"
necesitará usar un cuadro de entrada de value = "Upload" /> </form>
archivo.

type = "archivo"
Este tipo de entrada crea un cuadro Resultado
que parece una entrada de texto
seguida de una navegar botón.
Cuando el usuario hace clic en el
navegar , se abre una ventana
que les permite seleccionar un
archivo de su computadora para
cargarlo en el sitio web.

Cuando permite que los usuarios

carguen archivos, el método
atributo en el <formulario> el elemento
debe tener un valor de correo. (No
puede enviar archivos utilizando HTTP
obtener método.)

Cuando un usuario hace clic en el

navegar , la presentación de la
ventana que les permite buscar
el archivo que desean cargar
coincidirá con las ventanas del
sistema operativo del usuario.
No puede controlar la
apariencia de estas ventanas.

159 FORMULARIOS
 burttItColn
presentar una mi

HtMl Chapter-07 / submit-button.html

<entrada>
<acción del formulario = "http://www.example.com/subscribe.php">
<p>Suscríbase a nuestra lista de correo electrónico:</
p> <input type = "text" name = "email" /> <input
type = "enviar"
El botón enviar se utiliza para
type = "submit" name = "subscribe"
enviar un formulario al servidor.
value = "Suscribirse" />
</form>
nombre
Puede usar un nombre atributo
pero no necesita tener uno.
Resultado

valor
El valor El atributo se utiliza para
controlar el texto que aparece en un
botón. Es una buena idea especificar las
palabras que desea que aparezcan en
un botón porque el valor
predeterminado de los botones en
algunos navegadores es 'Enviar
consulta' y esto podría no ser apropiado
para todo tipo de formularios.

Los diferentes navegadores

mostrarán los botones de envío de
diferentes maneras y tienden a
adaptarse a la presentación visual
del navegador. Si desea controlar la
apariencia de un botón de envío,
puede usar CSS (como verá en la
página 343) o puede usar una
imagen para el botón.

FFO
ORMS
milisegundo 116
60
0
 Botón IMAGEN

<entrada> capítulo-07 / image-button.html HtMl

<form action = "http://www.example.org/subscribe.php">
<p>Suscríbase a nuestra lista de correo electrónico:
type = "imagen"
</p> <input type = "text" name = "email" />
Si desea utilizar una imagen para
<input type = "image" src = "images / subscribe.jpg"
el botón de envío, puede dar la
ancho = "100" alto = "20" /> </
escribe atribuir un valor de
form>
imagen. El src, ancho, alto,
y alt Los atributos funcionan igual
que cuando se utilizan con el
<img> elemento (que vimos en Resultado
las páginas 99-100).

161 FORMULARIOS
 botón y AhrID tID
CEen
mi
Control S

HtMl Chapter-07 / button-and-hidden-controls.html

<botón>
<form action = "http://www.example.com/add.php">
<botón> <img src = "images / add.gif" alt = "añadir" El <botón> El elemento se introdujo
ancho = "10" alto = "10" /> Agregar</botón> para permitir a los usuarios un mayor
<input type = "hidden" name = "bookmark" control sobre cómo aparecen sus
valor = "letras" /> botones y para permitir que
</form> aparezcan otros elementos dentro del
botón.

Esto significa que puede

Resultado
combinar texto e imágenes
entre la apertura <botón>
etiqueta y cierre </botón> etiqueta.

<entrada>

type = "oculto"
Este ejemplo también muestra un

oculto control de forma. Estos controles

de formulario no se muestran en la
página (aunque puede verlos si usa el
Ver fuente opción en el navegador).
Permiten a los autores de páginas web
agregar valores a los formularios que los
usuarios no pueden ver. Por ejemplo, el
autor de una página web puede usar un
campo oculto para indicar en qué
página se encontraba el usuario cuando
envió un formulario.

FFO
ORMS
milisegundo 116
62
2
 formulario de etiquetado
Control S

<etiqueta> capítulo-07 / labeling-form-controls.html HtMl

<etiqueta>Edad: <tipo de entrada = "texto" nombre = "edad" /> </label>
Al introducir controles de formulario, el <br/>
código se mantuvo simple al indicar el Género:
propósito de cada uno en el texto al lado. <input id = "female" type = "radio" name = "gender"
Sin embargo, cada control de formulario valor = "f">
debe tener su propio <etiqueta> elemento <etiqueta para = "mujer">Mujer</etiqueta>
ya que hace que el formulario sea accesible <input id = "male" type = "radio" name = "gender"
para usuarios con problemas de visión. valor = "m">
<etiqueta para = "hombre">Masculino</etiqueta>

El <etiqueta> El elemento se puede

utilizar de dos formas. Puede:
Resultado

1. Envuelva tanto la descripción del

texto como la entrada del formulario
(como se muestra en la primera línea
del ejemplo a su derecha).

2. Mantenerse separado del control

de formulario y utilizar el por
atributo para indicar para qué control de
formulario es una etiqueta (como se
muestra con los botones de opción).

por
El por el atributo indica a qué control de identificación los atributos se pueden utilizar en cualquier Como regla general, estos son los mejores

formulario pertenece la etiqueta. Tenga en control de formulario. Cuando un <etiqueta> lugares para colocar etiquetas en los

cuenta cómo los botones de opción utilizan El elemento se usa con una casilla de controles de formulario.

elidentificación atributo. El valor del verificación o un botón de radio, los usuarios

atributo id identifica de forma única un pueden hacer clic en el control de formulario o ARRIBA O A LA IZQUIERDA:
elemento de todos los demás elementos de en la etiqueta para seleccionar. El área ● Entradas de texto

una página. (Elidentificación El atributo se expandida en la que se puede hacer clic hace ● Áreas de texto

trata en la página 183.) que el formulario sea más fácil de usar. La ● Seleccionar cajas

posición de la etiqueta es muy importante. Si ● Cargas de archivos

El valor de la por atributo coincide con el los usuarios no saben dónde ingresar la

del identificación atributo en el control información o qué información ingresar, es A la derecha:

de formulario que está etiquetando. menos probable que utilicen el formulario ● Casillas de verificación individuales

Esta técnica usando elpor y correctamente. ● Botones de radio individuales

163 FORMULARIOS
 GroupInA GrFpara mi
ICrlm
Elementos

HtMl Chapter-07 / grouping-form-elements.html

<fieldset>
<fieldset>
<leyenda>Detalles de contacto</leyenda> <etiqueta> Puede agrupar los controles de

Correo electrónico:<br /> formulario relacionados dentro del

<input type = "text" name = "email" /> </label> <br /> <label> <fieldset> elemento. Esto es

Móvil:<br /> particularmente útil para

<input type = "text" name = "mobile" /> </label> <br /> <label> formularios más largos.
Teléfono:<br />
<input type = "text" name = "teléfono" /> </label> </ La mayoría de los navegadores mostrarán

fieldset> campo con una línea alrededor del

borde para mostrar cómo se
relacionan. La apariencia de estas
líneas se puede ajustar usando CSS.
Resultado

<leyenda>
El <leyenda> El elemento puede venir
directamente después de la apertura.

<fieldset> etiqueta y contiene un título

que ayuda a identificar el propósito de
ese grupo de controles de formulario.

FFO
ORMS
milisegundo 116
64
4
 html5: FORMULARIO DE VALIDACIÓN

Probablemente haya visto formularios en la

capítulo-07 / html5-form-validation.html HtMl
web que envían mensajes a los usuarios si el

control del formulario no se ha completado <acción del formulario = "http://www.example.com/login/"

correctamente; esto se conoce comovalidación método = "publicar">
de formularios. <etiqueta para = "nombre de usuario">Nombre de usuario:</etiqueta>

<tipo de entrada = "texto" nombre = "nombre de usuario"

Tradicionalmente, la validación de required = "required" /> </title> <br /> <etiqueta

formularios se ha realizado utilizando para = "contraseña">Clave:</etiqueta> <tipo de
JavaScript (que está más allá del entrada = "contraseña" nombre = "contraseña"
alcance de este libro). Pero HTML5 está required = "required" />
introduciendo la validación y dejando <input type = "submit" value = "Submit" />
el trabajo al navegador. </form>

La validación ayuda a garantizar que el

usuario ingrese información en un
Resultado
formulario que el servidor podrá
comprender cuando se envíe el
formulario. Validando el contenido del
formulario antes de que sea enviado al
servidor, las ayudas:

● Reducir la cantidad de trabajo que

tiene que hacer el servidor
● Permite a los usuarios ver si hay
problemas con el formulario En el momento de redactar este Un ejemplo de validación de
más rápido que si la validación documento, solo Chrome y Opera formulario HTML5 es el requerido
se realizara en el servidor. admitían la validación HTML5, aunque se atributo, que se puede usar en cualquier
espera que lo sigan otros navegadores. elemento de formulario que el usuario
Para admitir navegadores más antiguos deba completar. Este atributo HTML5 no
(que no entienden HTML5), es probable necesita un valor, pero en HTML 4 todos
que los autores de páginas web continúen los atributos deben tener un valor.
usando JavaScript para validar Entonces, algunas personas le dan a este
formularios. atributo un valor derequerido.

165 FORMULARIOS
 html5: datAErIt cortar Cu
lEt

HtMl capítulo-07 / html5-date-input.html

<entrada>
<formulario de acción = "http://www.example.com/bookings/"
método = "publicar"> Muchos formularios necesitan recopilar

<etiqueta para = "nombre de usuario">Fecha de salida:</etiqueta> información como fechas, direcciones de

<tipo de entrada = "fecha" nombre = "salida" /> correo electrónico y URL. Esto se ha hecho

<input type = "submit" value = "Submit" /> </ tradicionalmente mediante entradas de

form> texto.

HTML5 introduce nuevos controles de

formulario para estandarizar la forma en

que se recopila cierta información. Los

navegadores más antiguos que no

reconocen estas entradas simplemente las

tratarán como un cuadro de texto de una

Resultado
sola línea.

type = "fecha"

Si le está pidiendo una fecha al

usuario, puede usar un <entrada>
elemento y dar el escribe
atribuir un valor de fecha.
Esto creará una entrada de fecha en los
navegadores que admitan los nuevos
tipos de entrada HMTL5.

Este ejemplo muestra cómo se ve la

entrada de fecha en el navegador
Opera. La apariencia de la entrada de
fecha cambia en diferentes
navegadores.

FFO
ORMSmilisegundo 116
66
6
 html5: Entrada EmAIl y URL

<entrada> capítulo-07 / html5-email-input.html HtMl

<form action = "http://www.example.org/subscribe.php">
HTML5 también ha introducido entradas que <p>Por favor, introduzca su dirección de correo
permiten a los visitantes ingresar direcciones electrónico:</p> <input type = "email" name = "email" /
de correo electrónico y URL. Los navegadores > <input type = "submit" value = "Submit" /> </form>
que no admiten estos tipos de entrada

simplemente los tratarán como cuadros de

texto.

type = "correo electrónico" Resultado

Si le pide a un usuario una dirección de correo

electrónico, puede utilizar la entrada de correo

electrónico. Los navegadores que admiten la

validación de HTML5 comprobarán que el

usuario haya proporcionado información en el

formato correcto de una dirección de correo

electrónico. Algunos teléfonos inteligentes

también optimizan su teclado para mostrar las

teclas que es más probable que necesite al

ingresar una dirección de correo electrónico capítulo-07 / html5-url-input.html HtMl

(como el símbolo @).
<form action = "http://www.example.org/profile.php">
<p>Ingrese la dirección de su sitio web:</p> <input
type = "url" name = "website" /> <input type =
type = "url" "submit" value = "Submit" /> </form>
Se puede utilizar una entrada de URL
cuando le pide a un usuario la dirección de
una página web. Los navegadores que
admiten la validación de HTML5
comprobarán que el usuario haya
Resultado
proporcionado información en el formato
de una URL. Algunos teléfonos inteligentes
también optimizan su teclado para mostrar
las teclas que es más probable que
necesite al ingresar una URL.

167 FORMULARIOS
 html5: sEArCA hrItcortar
Cu lEt

HtMl capítulo-07 / html5-search-input.html

<entrada>
<form action = "http://www.example.org/search.php">
<p>Búsqueda:</p> Si desea crear un cuadro de texto de una
<input type = "search" name = "search" /> <input sola línea para consultas de búsqueda,

type = "submit" value = "Search" /> HTML5 proporciona un tipo especial de

</form> entrada para ese propósito.

type = "buscar"
Si desea crear un cuadro de texto de una sola

Resultado línea para consultas de búsqueda, HTML5

proporciona una entrada de búsqueda

especial.

Para crear el cuadro de búsqueda HTML5, el <

entrada> el elemento debe tener un escribe

atributo cuyo valor es búsqueda. Los

navegadores más antiguos simplemente lo

tratarán como un cuadro de texto de una sola

línea.

HtMl capítulo-07 / html5-placeholder.html

Los navegadores recientes agregan algunas
<form action = "http://www.example.org/search.php">
características que mejoran la usabilidad.
<p>Búsqueda:</p>
Por ejemplo, Safari en una Mac agrega una
<tipo de entrada = "buscar" nombre = "buscar"
cruz para borrar el cuadro de búsqueda
placeholder = "Ingrese palabra clave" />
cuando ha comenzado a ingresar
<input type = "submit" value = "Search" /> </form>
información. Safari también redondea
automáticamente las esquinas del campo
de entrada de búsqueda.

Resultado
marcador de posición
En cualquier entrada de texto, también

puede usar un atributo llamado

marcador de posición cuyo valor es el texto que

se mostrará en el cuadro de texto hasta que el

usuario haga clic en esa área. Los navegadores

más antiguos simplemente ignoran este

atributo.

FFO
ORMS milisegundo 116
68
8
169 FORMAS
 Ejemplo
Formularios

Este ejemplo muestra un formulario de suscripción a un boletín informativo

y comentarios. Utiliza una variedad de controles de formulario.

El <formulario> elemento usa el acción atributo para indicar la página a la que se envían los
datos. Cada uno de los controles de formulario se encuentra dentro del <formulario>
elemento. Los diferentes tipos de control de formulario son adecuados para recopilar
diferentes tipos de datos. El <fieldset> El elemento se utiliza para agrupar preguntas
relacionadas. El <etiqueta> elemento indica el propósito de cada control de formulario.

FORMULARIOS 170
 Ejemplo
Formularios

<html>
<cabeza>

<título>Formularios</
título> </head>
<cuerpo>

<form action = "http://www.example.com/review.php" method = "get">

<fieldset>
<leyenda>
Tus detalles:
</legend>
<etiqueta>

Nombre:

<input type = "text" name = "name" size = "30" maxlength = "100"> </
label>
<br />
<etiqueta>

Correo electrónico:

<input type = "email" name = "email" size = "30" maxlength = "100"> </
label>
<br />
</fieldset>
<br />
<fieldset>
<leyenda>
Tu reseña:
</legend>
<p>
<etiqueta para = "oír hablar">
¿Como supiste de nosotros?
</label>
<select name = "referrer" id = "escuchar sobre">
<option value = "google">Google</opción>
<valor de opción = "amigo">Amigo</opción>
<valor de opción = "anuncio">Propaganda</
opción> <valor de opción = "otro">Otro</opción>
</select>
</p>
<p>

171 FORMULARIOS
 Ejemplo
Formularios

¿Visitarías de nuevo?
<br />
<etiqueta>

<input type = "radio" name = "rating" value = "yes" />

sí
</label>
<etiqueta>

<input type = "radio" name = "rating" value = "no" />

No
</label>
<etiqueta>

<input type = "radio" name = "rating" value = "tal vez" />

Quizás
</label>
</p>
<p>
<etiqueta para = "comentarios">

Comentarios:
</label>
<br />
<textarea rows = "4" cols = "40" id = "comments"> </
textarea>
</p>
<etiqueta>

<input type = "checkbox" name = "subscribe" comprobado = "comprobado" />

Regístrese para recibir actualizaciones por correo electrónico

</label>
<br />
<input type = "submit" value = "Enviar revisión" /> </
fieldset>
</form>
</body>
</html>

FORMULARIOS 172
 resumen
Formularios

X Siempre que desee recopilar información de los visitantes,

necesitará un formulario, que se encuentra dentro de un

<formulario> elemento.

X La información de un formulario se envía en pares de nombre / valor.

XA cada control de formulario se le asigna un nombre y el texto que

escribe el usuario o los valores de las opciones que selecciona se
envían al servidor.

X HTML5 introduce nuevos elementos de formulario que facilitan a los

visitantes completar formularios.

 Extra
8
Margen

X Especificar diferentes versiones de HTML

X Identificar y agrupar elementos
X Comentarios, metainformación e iframes
 En este punto, hemos cubierto las etiquetas

principales que encajan perfectamente en grupos y

secciones.

En este capítulo, nos centraremos en algunos temas útiles que

no se agrupan fácilmente. Aprenderás sobre:

● Las diferentes versiones de HTML y cómo indicar qué

versión estás usando

● Cómo agregar comentarios a su código

● Atributos globales, que son atributos que se pueden usar en

cualquier elemento, incluido el clase y identificación atributos

● Elementos que se utilizan para agrupar partes de la página donde

ningún otro elemento es adecuado

● Cómo insertar una página dentro de una página usando iframes

● Cómo agregar información sobre la página web usando el

<meta> elemento

● Agregar caracteres como corchetes angulares y símbolos de derechos

de autor

177 EXTRAMARKUP
EXTRAMARKUP 178
 la evolución de htMl

Desde que se creó la web, ha habido

varias versiones diferentes de HTML.

htMl 4 xhtMl 1.0

publicado 1997 rElEasEd 2000

Cada nueva versión fue diseñada para Con la excepción de algunos En 1998, se publicó un lenguaje
ser una mejora con respecto a la elementos agregados en HTML5 llamado XML. Su propósito era
anterior (con nuevos elementos y (que se han resaltado), los permitir que las personas escribieran
atributos agregados y código anterior elementos que ha visto en este nuevos lenguajes de marcas. Dado
eliminado). libro estaban todos disponibles en que HTML era el lenguaje de
HTML 4. marcado más utilizado, se decidió
También se han utilizado varias que HTML 4 debería reformularse
versiones de cada navegador para ver Aunque HTML 4 tenía algunos para seguir las reglas de XML y se le
páginas web, cada una de las cuales elementos de presentación para cambió el nombre a XHTML. Esto
implementa código nuevo. Sin embargo, controlar la apariencia de las páginas, quiere decir eso
no todos los usuarios de la web tienen no se recomienda a los autores que los autores tenían que seguir algunas reglas

los últimos navegadores instalados en las utilicen más. (Los ejemplos nuevas y más estrictas sobre la escritura del

sus computadoras, lo que significa que incluyen el <centro> elemento para marcado. Por ejemplo:

no todos podrán ver todas las funciones centrar el contenido en una página, <
y el marcado más recientes. fuente> para controlar la apariencia ● Cada elemento necesitaba una
del texto, y etiqueta de cierre (excepto los
<golpe> para poner una línea a elementos vacíos como <img />).
Donde debería ser particularmente través del texto; todo esto se ● Los nombres de los atributos tenían que

consciente de los navegadores que no puede lograr con CSS). estar en minúsculas.

son compatibles con ciertas funciones, ● Todos los atributos requerían un valor y
he tomado nota de esto (como ha visto todos los valores debían colocarse entre
con algunos de los elementos HTML5 comillas dobles.
introducidos en el capítulo de ● Los elementos obsoletos ya
Formularios, y como verá en los no deben usarse.
capítulos de CSS). ● Cada elemento que se
abrió dentro de otro
El elemento debe estar cerrado
dentro de ese mismo elemento.

179 EXTRAMARKUP
 htMl5
rElEasEd 2000

Todos los ejemplos de este libro siguen La versión de transición de En HTML5, los autores de páginas web no

estas estrictas reglas de XML. XHTML se creó porque permitía a necesitan cerrar todas las etiquetas y se

los autores continuar siguiendo introducirán nuevos elementos y atributos.

Uno de los beneficios clave de este prácticas más antiguas (con una En el momento de redactar este

cambio fue que XHTML funciona a la sintaxis menos estricta) y usar documento, la especificación HTML5 no se

perfección con otros programas que algunos de los elementos y había completado, pero los principales

están escritos para crear y procesar atributos que se eliminarían de fabricantes de navegadores habían

documentos XML. futuras versiones de HTML. comenzado a implementar muchas de las

nuevas funciones y los autores de páginas

También se puede utilizar con otros También hubo una tercera versión web estaban adoptando rápidamente el

formatos de datos, como Scalable de XHTML 1.0 llamada XHTML nuevo formato.

Vector Graphics (SVG), un lenguaje 1.0 Conjunto de cuadros, lo que permitió a

gráfico escrito en XML, MathML los autores de páginas web dividir una A pesar de que HTML5 aún no está
(utilizado para marcar fórmulas ventana del navegador en varios "marcos", completo, puede aprovechar de
matemáticas) y CML (utilizado para cada uno de los cuales contendría una manera segura las nuevas
marcar fórmulas químicas). página HTML diferente. En estos días, los características del idioma siempre que
marcos se usan muy raramente y se están se esfuerce por asegurarse de que los
eliminando gradualmente. usuarios con navegadores más
Para ayudar a los autores de páginas antiguos puedan ver sus páginas
web a migrar a esta nueva sintaxis, se (aunque algunas de las características
crearon dos versiones principales de adicionales lo harán). no sea visible
XHTML 1.0: para ellos).
● Estricto XHTML 1.0, donde los autores
tenían que seguir las reglas al pie de la

letra
● XHTML 1.0 de transición,
donde los autores aún podrían
usar elementos de presentación
(como <centro> y <fuente>).

EXTRAMARKUP 180
 doCtYpEs

Debido a que ha habido varias

HTML5 HTML
versiones de HTML, cada página
web debe comenzar con una <! DOCTYPE html>
declaración DOCTYPE para indicarle
HTML 4
al navegador qué versión de HTML
está usando la página (aunque los <! DOCTYPE html PUBLIC
navegadores generalmente "- // W3C // DTD HTML 4.01 Transitional // ES"
muestran la página incluso si no "http://www.w3.org/TR/html4/loose.dtd">
está incluida). Por lo tanto,
XHTML 1.0 de transición
incluiremos uno en cada ejemplo
durante el resto del libro. <! DOCTYPE html PUBLIC
"- // W3C // DTD XHTML 1.0 Transitional // ES"
Como verá cuando veamos CSS y su "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-
modelo de caja en la página 316, el uso transitional.dtd">
de un DOCTYPE también puede ayudar
Estricto XHTML 1.0
al navegador a representar una página
correctamente. <! DOCTYPE html PUBLIC
"- // W3C // DTD XHTML 1.0 Strict // ES"
Debido a que XHTML se escribió "http://www.w3.org/TR/xhtml1/DTD/
en XML, a veces verá páginas que xhtml1-strict.dtd">
usan el DOCTYPE estricto de
Declaración XML
XHTML que comienzan con la
declaración XML opcional. Cuando <? xml version = "1.0"?>
se utilice, debería ser lo primero
en un documento. No debe haber
nada antes, ni siquiera un espacio.

181 EXTRAMARKUP
 CoMMEntsa inrtpegarCM
lEl

HTML capítulo-08 / comentarios-en-html.html

<! - ->
<! - comienzo de la introducción -> <h1>Exposiciones actuales</
h1> <h2>Olafur Eliasson</h2> <! - final de la introducción -> <! - Si desea agregar un comentario a
comienzo del texto principal -> <p>Olafur Eliasson nació en su código que no será visible en el
Copenhague, Dinamarca navegador del usuario, puede
agregar el texto entre estos
caracteres:
en 1967 a padres islandeses.</p> <p>Es conocido por
esculturas y a gran escala <! - el comentario va aquí ->
Arte de instalación que emplea materiales elementales como
luz, agua y temperatura del aire para mejorar la experiencia del Es una buena idea agregar
espectador.</p> <! - final del texto principal -> comentarios a su código porque, sin
importar qué tan familiarizado esté
<! - con la página en el momento de
<a href="mailto: [email protected] "> Contacto </a> escribirla, cuando vuelva a ella más
- -> tarde (o si alguien más necesita ver el
código), los comentarios hará que sea
mucho más fácil de entender.

Resultado

Aunque los comentarios no son

visibles para los usuarios en la
ventana principal del navegador,
cualquiera que vea el código fuente
detrás de la página puede verlos.

En una página larga, a menudo verá

comentarios que se usan para indicar
dónde comienzan o terminan las secciones
de la página, y para pasar notas para
ayudar a cualquiera que esté mirando el
código a entenderlo.

Los comentarios también se pueden usar

alrededor de bloques de código para evitar
que ese código se muestre en el navegador.
En el ejemplo de la izquierda, se ha
comentado el enlace del correo electrónico.

EX
mi
XT R SOY
MAMÁ
RK
KUPAG118
82
2
REAL ACADEMIA
Arkansas
DE BELLAS
ARRIBA
ARTES
 atributo de id

Cada elemento HTML puede llevar el

capítulo-08 / id-atributo.html HTML
identificación atributo. Se utiliza para

identificar de forma única ese <p>Agua y aire. Tan muy comunes son estos
elemento de otros elementos de la sustancias, apenas llaman la atención y, sin embargo, avalan
página. Su valor debe comenzar con nuestra propia existencia.</p> <p id = "pullquote">Cada vez que
una letra o un guión bajo (no un veo el mar siento
número ni ningún otro carácter). Es una relajante sensación de seguridad, como si visitara mi hogar
importante que no haya dos elementos ancestral; Me embarco en un viaje de ver.
en la misma página que tengan el </p>
mismo valor para suidentificación <p>Misterio de misterios, el agua y el aire tienen razón.
atributos (de lo contrario, el allí ante nosotros en el mar.</p>
valor ya no es único).

Como verá cuando vea CSS en la

siguiente sección, darle a un
Resultado
elemento una identidad única le
permite diseñarlo de manera
diferente a cualquier otra
instancia del mismo elemento en
la página. Por ejemplo,
es posible que desee asignar un
párrafo dentro de la página (tal vez
un párrafo que contenga una cita
extraíble) un estilo diferente al de
todos los demás párrafos. En el
ejemplo de la derecha, el párrafo con
elidentificación atributo cuyo valor es
pullquote se escribe en mayúsculas

usando CSS.

Si continúa aprendiendo sobre JavaScript

(un lenguaje que le permite agregar
interactividad a sus páginas), identificación
Los atributos se pueden utilizar para
permitir que el script funcione con ese
elemento en particular.

El identificación El atributo se conoce como

atributo global porque se puede

utilizar en cualquier elemento.

183 EXTRAMARKUP
 Att de claseArkansas
ritbiu lEmi
Connecticut

Cada elemento HTML también

HTML capítulo-08 / clase-atributo.html
puede llevar un clase atributo. A
<p class = "importante">Por un período de un año desde veces, en lugar de identificar de
En noviembre de 2010, el Museo de Arte Contemporáneo forma única un elemento dentro
Marugame Genichiro-Inokuma (MIMOCA) acogerá un ciclo de de un documento, querrá una
cuatro exposiciones de Hiroshi Sugimoto.</p> <p>Cada uno forma de identificar varios
exhibirá obras del artista. elementos como diferentes de los
contextualizados temáticamente bajo los títulos "Ciencia", otros elementos de la página. Por
"Arquitectura", "Historia" y "Religión" para presentar un panorama ejemplo, puede tener algunos
completo de la obra del artista.</p> <p class = "admisión párrafos de texto que contienen
importante">Horario: 10:00 - 18:00 información que es más
importante que otros y desea
(Prohibida la entrada después de las 17:30)</p> distinguir estos elementos, o
puede diferenciar entre enlaces
que apuntan a otras páginas de su
propio sitio y enlaces que apuntan
Resultado
a sitios externos. .

Para hacer esto, puede usar el

clase atributo. Su valor debe describir
la clase a la que pertenece. En el
ejemplo de la izquierda, los párrafos
clave tienen un
clase atributo cuyo valor es
importante.

El clase El atributo de cualquier

elemento puede compartir el mismo
valor. Entonces, en este ejemplo, el
valor deimportante también se puede
utilizar en encabezados y enlaces.

De forma predeterminada, el uso de En este ejemplo, se ha aplicado Si desea indicar que un elemento
estos atributos no afecta la CSS para crear elementos con pertenece a varias clases, puede
presentación de un elemento. Solo un clase atributo cuyo valor es separar los nombres de las clases
cambiará su apariencia si hay una importante mayúsculas y con un espacio, como puede ver
regla CSS que indique que debe elementos con clase atributo en el tercer párrafo del ejemplo
mostrarse de manera diferente. cuyo valor es entrada rojo. anterior.

EX
mi
XT R SOY
MAMÁ
RK
KUPAG118
84
REAL ACADEMIA4
Arkansas
DE BELLAS
ARRIBA
ARTES
 ELEMENTOS DEL BLOQUE

Algunos elementos siempre aparecerán

capítulo-08 / block-elements.html HTML
para comenzar en una nueva línea en la
ventana del navegador. Estos se conocen <h1>Hiroshi Sugimoto</h1>
comonivel de bloque elementos. <p>Las fechas de la exposición ORIGIN OF ART son las siguientes
sigue:</p>
<ul>
<li>Ciencia: 21 de noviembre - 20 de febrero de 2010/11</li>
<li>Arquitectura: 6 de marzo - 15 de mayo de 2011</li> <li>
Historia: 29 de mayo - 21 de agosto de 2011</li> <li>Religión:
28 de agosto - 6 de noviembre de 2011</li> </ul>

Ejemplos de elementos de bloque son

<h1>, <p>, <ul>, y <li>.

Resultado

185 EXTRAMARKUP
 inlinE Ela ErMtEin
CltEs

Algunos elementos siempre

HTML capítulo-08 / inline-elements.html
parecerán continuar en la misma
Programado para una sola revolución del planeta alrededor del sol línea que sus elementos vecinos.
con una inclinación de 23,4 grados que reproduce el ritmo de las Estos se conocen como
estaciones, este <em>Orígenes del arte</em> en línea elementos.

El ciclo se organiza en torno a cuatro temas: <b>ciencia,

arquitectura, historia</b> y <b>religión</b>.

Ejemplos de elementos en línea son

<a>, <b>, <em>, y <img>.

Resultado

EX
mi
XT R SOY
MAMÁ
RK
KUPAG118
REAL ACADEMIA 86
6
Arkansas
DE BELLAS
ARRIBA
ARTES
 Agrupando texto y
ELEMENTOS EN UN BLOQUE

<div> Chapter-08 / grouping-block-elements.html HTML

<div id = "header">
El <div> elemento le permite agrupar <img src = "images / logo.gif" alt = "Anish Kapoor" /> <ul>
un conjunto de elementos en un
cuadro a nivel de bloque. <li> <a href="index.html">Casa</a> </li> <li> <a
href="biography.html">Biografía</a> </li> <li> <a
Por ejemplo, puede crear un <div> href="works.html">Obras</a> </li> <li> <a
elemento para contener todos los href="contact.html">Contacto</a> </li> </ul>
elementos para el encabezado de
su sitio (el logotipo y la navegación), </div> <! - final del encabezado ->
o puede crear un <div> elemento
para contener comentarios de los
visitantes.

Resultado
En un navegador, el contenido del <
div> El elemento comenzará en una
nueva línea, pero aparte de esto, no
hará ninguna diferencia en la
presentación de la página.

Usando un identificación o clase

atributo en el <div> elemento, sin
embargo, significa que puede
crear reglas de estilo CSS para
indicar cuánto espacio el <div>
elemento debe ocupar en la
pantalla y cambiar la apariencia de
todos los elementos que contiene.

También puede facilitar el seguimiento Dado que puede haber varios otros Esto le permite ver claramente a qué
de su código si ha utilizado elementos dentro de un <div> etiqueta de apertura se supone que
<div> elementos para contener elemento, puede ser útil agregar un corresponde, como se muestra al
cada sección de la página. comentario después del cierre final del ejemplo aquí.
</div> etiqueta.

187 EXTRAMARKUP
 GroupinGat retxiCtl m
yi
ELEMENTOS EN LÍNEA

HTML capítulo-08 / grouping-inline-elements.html

<span>
<p>Anish Kapoor ganó el premio Turner en 1991 y
exhibido en el <span class = "galería">Tate Modern</ El <lapso> El elemento actúa como
lapso> Gallery en Londres en 2003.</p> un equivalente en línea de <div>
elemento. Se utiliza para:

1. Contener una sección de texto en la

que no haya ningún otro elemento
adecuado para diferenciarlo del texto
que lo rodea.

2. Contienen una serie de

elementos en línea

Resultado
La razón más común por la que la
gente usa <lapso> elements es
para que puedan controlar la
apariencia del contenido de estos
elementos usando CSS.

Por lo general, verá que un clase

o identificación el atributo se usa con

<span> elementos:

● Para explicar el propósito de este

<span> elemento

● Para que los estilos CSS se puedan

aplicar a elementos que tengan
valores específicos para estos
atributos

EX
mi
XT R SOY
MAMÁ
RK
KUPAG118
88
8
REAL ACADEMIA
Arkansas
DE BELLAS
ARRIBA
ARTES
 ifraMEs

<iframe> capítulo-08 / iframes.html HTML

<iframe
Un iframe es como una pequeña ancho = "450"
ventana que se ha cortado en su altura = "350"
página, y en esa ventana puede ver src = "http://maps.google.co.uk/maps?q=moma+new+york &
otra página. El término iframe es una amp; output = embed">
abreviatura de marco en línea. </iframe>

Un uso común de los iframes (que

puede haber visto en varios sitios web)
es incrustar un mapa de Google en una
Resultado
página. El contenido del iframe puede
ser cualquier página html (ya sea
ubicada en el mismo servidor o en
cualquier otro lugar de la web).

Se crea un iframe utilizando el

<iframe> elemento. Hay algunos
atributos que necesitará saber
para usarlo:

src
El src atributo especifica la URL de
la página que se mostrará en el
marco.

altura
El altura atributo especifica la
altura del iframe en píxeles.

ancho
El ancho atributo especifica el
ancho del iframe en píxeles.

189 EXTRAMARKUP
 artículo

HTML capítulo-08 / iframes-continuado.html desplazarse

El desplazarse El atributo no
<iframe
será compatible con HTML5.
src = "http://maps.google.co.uk/maps?q=moma+new+york &
En HTML 4 y XHTML, indica si
amp; output = embed"
el iframe debe
ancho = "450"
tienen barras de desplazamiento o no.
altura = "350"
Esto es importante si la página dentro
frameborder = "0"
del iframe es más grande que el espacio
scrolling = "no">
que le ha permitido (usando el
</iframe>
altura y ancho atributos). Las barras de

desplazamiento permiten al usuario

moverse por el marco para ver más

Resultado contenido. Puede tomar uno de tres valores:

sí (para mostrar barras de desplazamiento),

No (para ocultar las barras de desplazamiento) y auto

(para mostrarlos solo si es necesario).

Frontera del marco

El Frontera del marco El atributo
no será compatible con
HTML5. En HTML 4 y XHTML,
indica si el marco debe tener
un borde o no. Un valor de0
indica que no se debe mostrar
ningún borde. Un valor de1 indica
que se debe mostrar un borde.

sin costura
En HTML5, un nuevo atributo llamado
sin costura se puede aplicar a un

iframe donde no se desean barras de

desplazamiento. Elsin costura
atributo (como algunos otros
atributos HTML5 nuevos) no necesita
un valor, pero a menudo verá que los
autores le dan un valor de
sin costura. Los navegadores más antiguos

no son compatibles con sin costura

atributo.

EX
mi
XT R SOY
MAMÁ
RK
KUPAG119
90
0
REAL ACADEMIA
Arkansas
DE BELLAS
ARRIBA
ARTES
 Información sobre
Tus paginas

<meta>
El <meta> elemento vive dentro El valor de la nombre El atributo
del <cabeza> elemento y contiene puede ser cualquier cosa que desee.
información sobre esa página Algunos valores definidos para este
web. atributo que se utilizan
comúnmente son:
No es visible para los usuarios, pero
cumple una serie de propósitos,
como informar a los motores de
descripción
Contiene una descripción de la página.
búsqueda sobre su página, quién la
Esta descripción es comúnmente
creó y si es urgente o no. (Si la
utilizada por los motores de búsqueda
página es urgente, se puede
para comprender de qué se trata la
configurar para que caduque).
página y debe tener un máximo de 155
caracteres. A veces también se muestra
El <meta> El elemento es un elemento
en los resultados de los motores de
vacío, por lo que no tiene una etiqueta
búsqueda.
de cierre. Utiliza atributos para
transportar la información.
palabras clave
Los atributos más comunes Contiene una lista de palabras separadas

son los nombre y contenido por comas en las que un usuario puede
atributos, que tienden a usarse buscar para encontrar la página. En la

juntos. Estos atributos práctica, esto ya no tiene ningún efecto

especifican propiedades de toda notable en cómo los motores de búsqueda

la página. El valor de lanombre indexan su sitio.

atributo es la propiedad que está

estableciendo, y el valor del
contenido atributo es el
robots
Esto indica si los motores de búsqueda
valor que desea dar a esta
deben agregar esta página a sus
propiedad.
resultados de búsqueda o no. Un valor
denoindex se puede utilizar si no se debe
En la primera línea del ejemplo en
agregar esta página. Un valor deno
la página opuesta, puede ver un
seguir se puede usar si los motores de
<meta> elemento donde el nombre
búsqueda deben agregar esta página
El atributo indica la intención de
en sus resultados, pero no las páginas a
especificar una descripción para la
las que enlaza.
página. Elcontenido El atributo es
donde se especifica realmente esta
descripción.

191 EXTRAMARKUP
 artículo

El <meta> elemento también

HTML capítulo-08 / meta.html
utiliza el http-equiv y
<! DOCTYPE html> contenido atributos en pares. En
<html> nuestro ejemplo, puede ver tres
<cabeza> instancias delhttpequiv atributo.
<título>Información sobre sus páginas</título> <meta Cada uno tiene un propósito
nombre = "descripción" diferente:
content = "Un ensayo sobre el arte de la instalación" />
<meta name = "keywords"
content = "instalación, arte, opinión" /> <meta
autor
Esto define al autor de la
name = "robots"
página web.
content = "nofollow" />
<meta http-equiv = "autor"
content = "Jon Duckett" /> pragma
<meta http-equiv = "pragma" Esto evita que el navegador almacene la

content = "sin caché" /> página en caché. (Es decir, almacenarlo

<meta http-equiv = "expira" localmente para ahorrar tiempo

content = "Vie, 04 de abril de 2014 23:59:59 GMT" /> </ descargándolo en visitas posteriores).

head>
<cuerpo>

</body>
</html>
expira
Dado que los navegadores suelen almacenar en

caché el contenido de una página,

expira La opción se puede usar para indicar

cuándo la página debe caducar (y ya no

debe almacenarse en caché). Tenga en
cuenta que la fecha debe especificarse en el
formato que se muestra.

EX
mi
XT R SOY
MAMÁ
RK
KUPAG119
92
2
REAL ACADEMIA
Arkansas
DE BELLAS
ARRIBA
ARTES
 CARACTERÍSTICAS DE ESCAPE

Hay algunos caracteres que se utilizan y se reservan

en el código HTML. (Por ejemplo, los corchetes en
ángulo izquierdo y derecho).

Por lo tanto, si desea que estos También hay códigos especiales que Al usar caracteres de escape, es
caracteres aparezcan en su página, se pueden usar para mostrar importante verificar la página en su
debe utilizar los denominados símbolos como derechos de autor y navegador para asegurarse de que
caracteres de "escape" (también marcas comerciales, símbolos de aparezca el símbolo correcto. Esto
conocidos como códigos de escape o moneda, caracteres matemáticos y se debe a que algunas fuentes no
referencias de entidad). Por ejemplo, algunos signos de puntuación. Por admiten todos estos caracteres y,
para escribir un corchete en ángulo ejemplo, si desea incluir un símbolo por lo tanto, es posible que deba
izquierdo, puede usar &lt; o de copyright en una página web, especificar
& # 60 ;. Para un ampersand, puede utilizar &Copiar; o una fuente diferente para estos
puede usar &amperio; o 38 ;. & # 169 ;. caracteres en su código CSS.

Extra online
Puede encontrar una lista más
completa de códigos de escape en la
sección de herramientas del sitio web
que acompaña a este libro.

193 EXTRAMARKUP
< ¢ '
Signo de centavo Comilla simple izquierda

& lt; ¢avo; & lsquo;

Signo
& #menor
60; que & # 162; & # 8216;

> £ '
Signo mayor que Signo de Libra Comilla simple derecha

& gt; &libra; y rsquo;

&erio; & # 163; & # 8217;

Y "
Comillas dobles a la izquierda

&erio;
Ampersand
& # 38; ¥ ¥
&del
Signo # 165;
yen
& ldquo;
& # 8220;

" ¤ "
Comillas dobles a la derecha

& quot; € & rdquo;

Comillas
& # 34; signo euro
& # 8364; & # 8221;

×
Signo de multiplicación

© &Copiar;
& # 169;
símbolo de copyright
&veces;
& # 215;

® & reg;
Marca
& # 174; registrada ÷ &dividir;
Signo
& #de división
247;

™
&comercio;

& #comercial
Marca 8482;

EXTRAMARKUP 194
 Este ejemplo comienza con un contenido. Varios elementos utilizan Partes de la página se han
DOCTYPE para indicar que se trata elidentificación y clase atributos para agrupado usando <div> elementos,
de una página web HTML 4. En el identificar su propósito. El símbolo y se han agregado comentarios
cabeza, también puedes ver un <meta> de copyright se ha añadido mediante para indicar lo que el </div>
etiqueta que describe la página un código de escape. los elementos se están cerrando.

195 EXTRAMARKUP
 Ejemplo
Marcado adicional

<! DOCTYPE html PUBLIC

"- // W3C // DTD HTML 4.01 Transitional // ES"
"http://www.w3.org/TR/html4/loose.dtd"> <html>

<cabeza>

<meta name = "description" content = "Teléfono, correo electrónico

e indicaciones para llegar a The Art Bookshop, Londres, Reino Unido "/>
<title>Póngase en contacto con The Art Bookshop, Londres, Reino Unido</título> </
head>
<cuerpo>

<div id = "header">
<h1>La librería de arte</h1> <ul>

<li> <a href="index.html">casa</a> </li> <li> <a

href="index.html">nuevas publicaciones</a>
</li>
<li class = "página actual">
<a href="index.html">contacto</a> </li>
</ul>
</div> <! - encabezado final ->
<div id = "content">
<p>Charing Cross Road, Londres, WC2, Reino Unido</p>
<p> <span class = "contacto">Teléfono</lapso>
0207 946 0946</p> <p> <span class = "contacto">
Correo electrónico</lapso>
<a href="mailto: [email protected] ">
[email protected]</a> </p>
<iframe width = "425" height = "275" frameborder = "0"
scrolling = "no" marginheight = "0" marginwidth = "0" src =
"http://maps.google.co.uk/maps?f=q& source = s_q & amp;
hl = es & amp; geocode = & amp; q = charing + cross + road +
londres & amp; output = embed "> </iframe>

</div> <! - contenido final -> <p> &

copy; La librería de arte</p> </body>

</html>

EXTRAMARKUP 196
 resumen
Marcado adicional

X DOCTIPOS Indique a los navegadores qué versión de HTML está

utilizando.

X Puede agregar comentarios a su código entre los

<! - y -> marcadores.

X El identificación y clase Los atributos le permiten identificar

elementos particulares.

X El <div> y <lapso> Los elementos le permiten agrupar

elementos en línea y a nivel de bloque.

X <iframes> cortar ventanas en sus páginas web a través de

qué otras páginas se pueden mostrar.

X El <meta> La etiqueta le permite proporcionar todo tipo

de información sobre su página web.

X Los caracteres de escape se utilizan para incluir

caracteres especiales en sus páginas, como <,> y ©.
 Flash, Video
9
y audio

X Cómo agregar películas Flash a su sitio

X Cómo agregar video y audio a su sitio

X HTML5 <video> y <audio> elementos

 Flash es una tecnología muy popular que se
utiliza para agregar animaciones, video y audio a
sitios web. Este capítulo comienza analizando
cómo usarlo en sus páginas web.

Luego, nos enfocamos en cómo agregar video y audio a su sitio,

utilizando los nuevos elementos <video> y <audio> HTML5 o un
servicio alojado (como YouTube o SoundCloud). En este capítulo
aprenderá:

● Cómo utilizar Flash en sus páginas web

● Cómo utilizar HTML5 <video> y <audio> elementos

● Cuándo alojar su propio video y audio y cuándo usar un

servicio como YouTube

201 FLASH, VIDEO Y AUDIO

FLASH, VIDEO Y AUDIO 202
 cómo funciona Flash

Desde finales de la década de 1990, Flash ha sido una

herramienta muy popular para crear animaciones y, más

tarde, para reproducir audio y video en sitios web.

Ya sea que esté creando una Cuando crea un archivo Flash en el Para ver Flash, los navegadores deben
animación o un reproductor entorno de creación de Flash, se guarda utilizar un complemento (un software
multimedia en Flash, los archivos que con la extensión.fla extensión de adicional que se ejecuta en el
coloca en su sitio web se denominan archivo. Para utilizar este archivo en una navegador) llamado Flash Player. Las
Películas flash. página web, debe guardarse en un estadísticas suelen indicar que el 98%
formato diferente conocido como SWF. de los navegadores en
Si desea crear su propia (Tiene el.swf extensión de archivo.) Las computadoras de escritorio
película Flash, debe tienen instalado el complemento
adquirir el entorno de Flash. (El porcentaje de móviles y
creación Flash de Adobe. Cuando exporta la película a tablets con él es mucho menor).
formato SWF, Flash crea código
Sin embargo, hay varias empresas que que puede utilizar para incrustar No hay espacio en este libro para
ofrecen animaciones Flash y la película Flash en su página. enseñarle cómo crear películas
presentaciones de diapositivas, así Tradicionalmente, este código Flash (hay muchos libros
como reproductores de vídeo y audio usaba HTML <objeto> y <incrustar> dedicados a ese tema), pero este
que puede utilizar sin adquirir esta etiquetas. Sin embargo, ahora es capítulo le mostrará cómo
herramienta. más común usar JavaScript. agregar películas Flash a su sitio.

El entorno de creación de Flash se El .fla el archivo se exporta a.swf El .swf El archivo está incluido en su
utiliza para crear películas Flash. formato para usar en una página web. página web usando JavaScript.

203 FLASH, VIDEO Y AUDIO

 uso de flash

Desde 2005, una serie de factores han significado que

menos sitios web estén escritos en Flash o incluso
utilicen elementos de Flash en sus páginas.

Cuando se lanzó Flash por primera vez, Hay varias razones por las que Se han introducido leyes para
se desarrolló para crear animaciones. Sin menos sitios web utilizan Flash en garantizar que los sitios web sean
embargo, la tecnología evolucionó estos días, que incluyen: utilizables por personas con
rápidamente y la gente comenzó a usarla discapacidades visuales o físicas, y
para crear reproductores multimedia e En 2005-6, se lanzó un conjunto Flash ha sido criticado porque el
incluso sitios web completos. de bibliotecas de JavaScript contenido Flash no siempre cumple
(incluido Prototipo, con los requisitos de accesibilidad.
script.aculo.us y JQuery) que
Aunque Flash sigue siendo muy facilitó a las personas la creación En 2008, los navegadores comenzaron

popular, en los últimos años la gente ha de efectos animados utilizando a admitir HTML5 <video> y
sido más selectiva acerca de cuándo lo JavaScript. <audio> etiquetas. En el momento de

usa (y ahora rara vez se plantea la redactar este artículo, Flash sigue siendo
posibilidad de crear un sitio web Cuando Apple lanzó el una forma popular de reproducir vídeo y
completo en Flash). iPhone en 2007 y luego el audio en la web, pero cada vez más
iPad en 2010, tomaron la personas se están cambiando a HTML5.
A pesar de esto, Flash sí tiene decisión de no admitir Flash.
futuro en la web porque hay (Verá cómo utilizar estos elementos
algunas cosas que hace muy más adelante en el capítulo).
bien, como crear animaciones.

FLASH, VIDEO Y AUDIO 204

 Línea de tiempo:
Flash, video y audio

Las tecnologías web cambian rápidamente. Aquí puede ver

algunos de los cambios en la forma en que la animación,

el video y el audio se crean en la web.

1995 1996 1997 1998 1999 2000 2001 2002 2003

FutureSplash, precursor de Flash

Animación

Transmisión de audio RealAudio

Transmisión de audio Flash 4

Audio

Transmisión de video RealVideo

Transmisión de video RealVideo 8

Flash MX Video Flash

Video

En esta página puede ver los primeros En la página opuesta, puede ver
actores principales que proporcionaron algunas de las tecnologías y eventos
animación web, audio y video. que las reemplazan.

205 FLASH, VIDEO Y AUDIO

 Video compartiendo sitios de fer alternativas al autohospedaje

Lanzamiento de Vimeo

Lanzamiento de YouTube

YouTube lanza la aplicación para iPhone

Vimeo lanza reproductor HTML5

YouTube lanza reproductor HTML5

Vimeo lanza la aplicación para iPhone

2004 2005 2006 2007 2008 2009 2010 2011

Internet Explorer 9

Opera 9 .62

Firefox 3.5

Chrome 3

Safari 3.1

NAVEGADORES introducir HTML5 <video> y <audio> etiquetas

iPad
iPhone

manzana lanza dispositivos que no son compatibles con Flash

jQuery

script.aculo.us

Prototipo

JAVAScript las bibliotecas están escritas para crear efectos animados

FLASH, VIDEO Y AUDIO 206

 agregando un movimiento flash
A su página web
La forma más popular de
capítulo-09 / añadiendo-una-película-flash.html HTML
agregar Flash a una página
web es usar JavaScript. Hay <! DOCTYPE html>
varios scripts que le permiten <html>
hacer esto sin una <cabeza>
comprensión profunda del <título>Adición de una película Flash</título>
lenguaje JavaScript. <tipo de script = "texto / javascript"
src = "http://ajax.googleapis.com/ajax/libs/
El script que veremos aquí se swfobject / 2.2 / swfobject.js"> </script> <script type =
llama SWFObject. Puede "text / javascript">
obtener una copia gratis de swfobject.embedSWF ("flash / bird.swf", "pájaro",
Google, y puede ver cómo lo "400", "300", "8.0.0"); </script> </head>
usamos en la página siguiente.
<cuerpo>
Una ventaja de utilizar esta <div id = "pájaro"> <p>Una animación de un pájaro tomando
técnica es que permite a los una ducha</p> </div> </
navegadores mostrar contenido body>
alternativo para los usuarios </html>
cuyos navegadores no pueden
mostrar Flash.

Esta técnica utiliza un <div> El script SWFObject comprobará si el Si utiliza una descripción de texto
elemento para crear un espacio donde navegador del usuario puede como contenido alternativo, puede
debería situarse la película Flash. El <div> reproducir la película Flash. Si puede, lograr dos beneficios adicionales:
elemento tiene un identificación el script reemplazará el contenido del
atributo cuyo valor es utilizado por <div> con el .swf expediente. 1. Las personas con impedimentos
el script SWFObject. En este visuales y / o físicos que no puedan
ejemplo, el valor de laidentificación Para los usuarios que no pueden ver la interactuar con el archivo Flash
atributo es pájaro. película Flash, puede mostrar una pueden acceder al texto.
imagen fija de la película en su lugar.
Dentro del <div> elemento puede También puede considerar el uso de 2. Los motores de búsqueda pueden
colocar el contenido alternativo para una descripción de texto del archivo indexar el texto (que no son tan eficaces
los usuarios que no pueden jugar Flash. para indexar archivos SWF), lo que
Flash. aumenta las posibilidades de que se
encuentre su contenido.

207 FLASH, VIDEO Y AUDIO

 artículo

En este ejemplo, el script SWFObject

Resultado
está alojado en los servidores de
Google. Nosotrosincluir el script en
esta página web usando el primero de
los dos <guión> elementos.

El atributo de tipo se utiliza en el

<script> elemento para indicar que
el script en el interior está escrito
en JavaScript. Elsrc El atributo le
dice al navegador dónde encontrar
el script.

El segundo <guión> El elemento se

utiliza para informar al navegador
sobre la película Flash, así como qué
elemento debe reemplazar. Este
elemento en realidad le dice al script
SWFObjectcinco piezas de
información, que están entre
paréntesis:

1. El localización del .swf expediente:

flash / bird.swf

2. El elemento que debe tener la película

Flash reemplazar, especificado por el

valor del identificación atributo en el <div>

elemento:

pájaro

3. El ancho de la película Flash:

400 px

4. El altura de la película Flash:

300 px

5. El mínimo versión del Flash

Player necesario para ver la
película:
Flash Player 8

COMO
SH
FFLLAH ,, VIID
V EO O & AUDIIO
Delaware O 208
 Comprensión del video
Formatos y reproductores

Para agregar video a su sitio, hay dos cuestiones clave

que debe comprender: formatos de archivo y video
reproductores / complementos.

Formatos Reproductores / complementos Acercarse

Las películas están disponibles Inicialmente, los navegadores se La forma más fácil de agregar
en muchos formatos (BluRay, diseñaron para mostrar solo texto e videos a su sitio es utilizar un
DVD, VHS, por nombrar imágenes. Por esta razón, los navegadores servicio alojado como YouTube o
algunos). En línea, incluso hay creados antes de 2010 generalmente Vimeo.
más formatos de video (incluidos requerían que se instalara otro programa
AVI, Flash Video, H264, MPEG, llamado reproductor o complemento para Sin embargo, hay algunos casos
Ogg Theora, QuickTime, WebM y reproducir contenido de video. en los que el uso de estos
Windows Media). servicios no es apropiado (como
Estos reproductores y complementos solo verá en la página siguiente) y
Así como su reproductor de DVD no admitían ciertos formatos de video. querrá alojar el video en su
reproduce un casete VHS, los propio sitio.
navegadores difieren en los formatos Recientemente, los navegadores han
de video que admiten y los que no. evolucionado para admitir HTML5 <video> En el momento de redactar este artículo, para

etiqueta (que hace que los reproductores y los garantizar que la mayoría de las personas puedan

Para que los usuarios puedan ver complementos sean obsoletos). reproducir su contenido de video, se considera

su video en línea, es posible que una buena práctica utilizar HTML5

deba convertirlo a otro formato. Sin embargo, desafortunadamente, <video> elemento para navegadores
no puede confiar en que todos los que lo admitan, y también video
El proceso de convertir visitantes de su sitio web tengan un Flash para aquellos que no lo
un video a otro formato a navegador reciente que admita este admitan. Esto significa que deberá
veces se denomina nuevo elemento HTML5 y los cargar cualquier video que desee
"codificación" del video. navegadores que reconozcan el mostrar en al menos dos formatos
<video> El elemento requiere que el diferentes: WebM y MP4.
Hay varias aplicaciones video esté codificado en diferentes
disponibles en la web que le formatos.
permiten codificar videos (como
www. mirovideoconverter.com).

209 FLASH, VIDEO Y AUDIO

 usando hosTed
SERVICIOS DE VIDEO

La forma más fácil de agregar un video a su sitio

es subir el video a un sitio como YouTube o Vimeo
y usar las funciones provistas en su sitio para
incrustar el video en su página.

VENTAJAS Desventajas La alternativa

Los sitios de videos alojados (como Su video estará disponible en el sitio Si desea alojar un video en su propio
YouTube) proporcionan reproductores que del servicio alojado, por lo que si sitio, en lugar de un servicio alojado,
funcionan con la mayoría de los desea que el contenido esté se requiere mucho más trabajo para
navegadores web. disponible exclusivamente en su sitio configurar su sitio para reproducir el
(y no sea visible en otros sitios), debe video.
No necesita preocuparse por la alojar el video en su propio servidor
codificación de su video, ya que estos y agregar su propio reproductor. en Veremos dos formas diferentes
sitios le permiten cargar su contenido la página. en las que puede alojar sus
en una variedad de formatos. Una vez propios videos: utilizando Flash
cargados, convierten automáticamente Algunos servicios limitarán lo que Video y HTML5
su video a los diversos formatos se permite incluir en tu video. Por <video> elemento.
requeridos por los diferentes ejemplo, la mayoría prohíbe el
navegadores. uso de publicidad dentro del Para asegurarse de que el
video que sube (lo que le impide número máximo de visitantes de
Las empresas de alojamiento web a monetizar ese contenido). su sitio pueda ver el video,
menudo cobran más si usa mucho deberá utilizar una combinación
ancho de banda, y los archivos de video de ambas técnicas.
pueden ser bastante grandes. Por lo Algunos servicios alojados reproducirán
tanto, puede costarle más alojar los sus propios anuncios antes de que
videos en su propio sitio. Sin embargo, comience su video, o incluso los
si su video está alojado en un sitio superpondrán en la pantalla mientras se
como YouTube o Vimeo, no necesita reproduce su video. La calidad del video
pagar por el ancho de banda. en algunos servicios alojados también
puede ser limitada.

FLASH, VIDEO Y AUDIO 210

 Preparando un flash
Video para tu siTe

Hay tres pasos que debe seguir para agregar

un video Flash a su página web:

1 2 3
CONVERTIR SU VÍDEO ENCUENTRE UN REPRODUCTOR DE FLV INCLUYA EL REPRODUCTOR Y
inTo FLV FORMATO PARA REPRODUCIR EL VÍDEO EL VIDEO EN SU PÁGINA

Para reproducir un video Flash, Necesitarás un jugador escrito en Flash Puede incluir el reproductor en su
debe convertir su video a formato para reproducir el archivo FLV. Su página utilizando una técnica de
FLV. Desde Flash 6, el entorno de propósito es mantener la película FLV y JavaScript como SWFObject, que se
creación de Flash viene con un agregar controles como mencionó anteriormente en este
codificador de video Flash para reproducir pausar. Aquí hay dos sitios que capítulo.
convertir videos a formato FLV. ofrecen reproductores FLV:

También deberá indicarle al reproductor dónde

Algunos reproductores de video Flash www.osflv.com puede encontrar el archivo de video que desea

también admiten un formato llamado www.longtailvideo.com que se reproduzca. (Algunos reproductores

H264 (y algunos programas de edición tienen funciones avanzadas, como la capacidad

de video exportan video en este No necesita el entorno de de crear listas de reproducción de varios videos

formato). creación Flash para utilizar o agregar una imagen fija antes de que se

ninguno de estos en su sitio web. reproduzca el video).

Buscar en Google "Convertidores FLV o

H264" le permitirá encontrar software
de codificación alternativo.

Le proporcioné un archivo FLV de En el siguiente ejemplo, usaremos el En el siguiente ejemplo, también

muestra que puede usar con el código reproductor OS FLV, que es un usaremos la técnica de JavaScript
de descarga en el sitio web (está en una reproductor Flash Video gratuito y de SWFObject mencionada en las
carpeta separada porque los archivos de código abierto. Esto está incluido en el páginas 207-208.
video son grandes). código de descarga. Solo es compatible
con el formato FLV (no H264).

211 FLASH, VIDEO Y AUDIO

 agregando un FlasahrVTiidcelo
mi
A sus páginas
Este ejemplo usa el reproductor OS
HTML capítulo-09 / agregando-un-video-flash.html
FLV para mostrar un video llamado
<! DOCTYPE html> cachorro.flv, que ya se ha
<html> convertido en formato FLV.
<cabeza>

<título>Agregar un video Flash</título> <tipo Ya ha visto cómo utilizar SWFObject para

de script = "texto / javascript" incrustar una animación básica en una
src = "http://ajax.googleapis.com/ajax/libs/ página, pero a veces las películas Flash
swfobject / 2.2 / swfobject.js"> </script> <script type = necesitan información para que
"text / javascript"> funcionen. En este ejemplo, el
var flashvars = {}; reproductor de video necesita conocer la
var params = {película: "../ video / puppy.flv"}; ruta al video que tiene que reproducir,
swfobject.embedSWF ("flash / splayer.swf", "nieve", por lo que SWFObject usa variables de
"400", "320", "8.0.0", JavaScript para pasar esta información a
flashvars, params); </script> </ la película Flash. Estos se proporcionan
head> en las dos líneas de código que
<cuerpo> comienzan convar.
<div id = "nieve"> <p>Un video de un cachorro jugando en
la nieve</p> </div> </
body> Este jugador en particular no espera
</html> ninguna información en el
flashvars variable, por lo que se
deja vacía.

Resultado
La ruta a la película se proporciona
en la variable llamada params.

var params = {película: "../

videos/puppy.flv"};

La línea después de las variables

es la que le dice al script que
reemplace el elemento HTML con
el reproductor de video. Es muy
similar al que vio en el ejemplo
anterior que introdujo SWFObject.

Los diferentes reproductores de video generalmente requieren información como la ruta al video en formatos ligeramente diferentes,
pero generalmente vienen con ejemplos y documentación para ayudarlo a comprender cómo usarlos.

COMO
SH
FFLLAH ,, VIID
V EO O & AUDIIO
Delaware O 2112
2
 hTml5: Preparando el video
Para sus páginas

A pesar del HTML5 <video> siendo el elemento una adición

muy reciente, está gozando de un uso generalizado. Éstos
son algunos de los temas clave que se deben
conciente de:

apoyo Formatos control S

El nuevo HTML5 <video> No todos los navegadores admiten los El navegador proporciona sus propios
El elemento solo es compatible mismos formatos de video. Por lo controles para el reproductor, y estos
con navegadores recientes, por lo tanto, debe proporcionar su video en pueden variar de un navegador a otro.
que no puede usar esta técnica si más de un formato. Puede controlar la apariencia de estos
desea que todos puedan ver su controles usando JavaScript (pero eso
video (debe combinar este HTML5 Para llegar a tantos navegadores como está más allá del alcance de este libro).
con Flash Video). sea posible, debe proporcionar el video
en los siguientes formatos:
DERECHOS DIGITALES en el navegador
H264: IE y Safari
En el momento de escribir este artículo, el WebM: Android, Chrome, Uno de los problemas con los
<video> element no admite ningún Firefox, Opera reproductores como Flash Player es que
tipo de gestión de derechos pueden comportarse de manera
digitales (DRM, a veces Chrome, Firefox y Opera han indicado incoherente cuando elementos como
denominado protección de copia). que admitirán un formato llamado menús caen sobre ellos o la ventana se
Pero un pirata dedicado WebM. (Algunos reproductores Flash escala hacia arriba o hacia abajo. La
generalmente encontrará una también son compatibles con H264 y opción HTML5 resuelve estos problemas.
forma de evitar DRM. WebM, lo que ahorrará en el número de
conversiones).

En la página 222 verá cómo Le proporcioné un video de muestra en Si miras este ejemplo en Firefox
combinar esta técnica de video formato H264 y WebM para que lo y Opera, verás diferentes
HTML5 con Flash Video para pruebe con las descargas de código. controles cuando pasas el
lograr un alcance más amplio. cursor sobre el video.

213 FLASH, VIDEO Y AUDIO

 hTml5: addina grVTiidcelo
mi
A sus páginas

HTML capítulo-09 / agregando-html5-video.html

<video>
<! DOCTYPE html>
<html> El <video> El elemento tiene una serie
<cabeza> de atributos que le permiten
<título>Agregar video HTML5</título> </ controlar la reproducción de video:
head>
<cuerpo> src
<video src = "video / puppy.mp4" Este atributo especifica la ruta al
poster = "images / puppy.jpg" video. (El video de ejemplo está en
width = "400" height = "300" formato H264, por lo que solo
precarga funcionará en IE y Safari).
control S
bucle> póster
<p>Un video de un cachorro jugando en la nieve.</p> Este atributo le permite especificar una

</video> imagen para mostrar mientras se descarga

</body> el video o hasta que el usuario le dice al

</html> video que se reproduzca.

ancho, alto
En HTML5 no es necesario proporcionar precarga Estos atributos especifican el tamaño
valores para todos los atributos, como los Este atributo le dice al navegador del reproductor en píxeles.
controles, la reproducción automática y los qué hacer cuando se carga la
atributos de bucle utilizados. página. Puede tener uno de tres control S
con el <video> elemento. Estos valores: Cuando se usa, este atributo indica que
atributos son como interruptores el navegador debe proporcionar sus
de encendido / apagado. Si el ninguno propios controles para la reproducción.
atributo está presente, activa esa El navegador no debe cargar el video
opción. Si se omite el atributo, la hasta que el usuario presione reproducir.
opción se desactiva. auto-reproducción
Cuando se usa, este atributo especifica que
Si el navegador no es auto el archivo debe reproducirse
compatible con <video> El navegador debería descargar el automáticamente.

elemento o el formato de video video cuando se cargue la página.

utilizado, mostrará lo que esté lazo
entre la apertura <video> metadatos Cuando se usa, este atributo indica que el

y cierre </video> etiquetas. El navegador solo debe recopilar video debería comenzar a reproducirse

información como el tamaño, el nuevamente una vez que haya terminado.

primer fotograma, la lista de pistas y

duración.

COMO
SH
FFLLAH ,, VIID
V EO O & AUDIIO
Delaware O 2114
4
 hTml5: VÍDEO MÚLTIPLE
fuentes

<fuente> capítulo-09 / multiple-video-sources.html HTML

<! DOCTYPE html>
Para especificar la ubicación del archivo <html>
que se reproducirá, puede utilizar el <cabeza>
<fuente> elemento dentro del <título>Varias fuentes de video</título> </head>
<video> elemento. (Esto debería
reemplazar elsrc atributo en la <cuerpo>
apertura <video> etiqueta.) <video poster = "images / puppy.jpg" width = "400"
height = "320" bucle de controles de precarga>
También puede utilizar varios <source src = "video / puppy.mp4" type = 'video /
<fuente> elementos para especificar mp4; codecs = "avc1.42E01E, mp4a.40.2" '/> <source
que el video está disponible en src = "video / puppy.webm" type =' video /
diferentes formatos. webm; codecs = "vp8, vorbis" '/> <p>Un video de un
cachorro jugando en la nieve.</p> </video>
(Debido a un error en el iPad, debe
proporcionar el video MP4 como primer </body>
formato. De lo contrario, es posible que no </html>
se reproduzca).

src Resultado
Este atributo especifica la
ruta al video.

escribe
Debe usar este atributo para indicarle
al navegador qué formato tiene el
video. De lo contrario, descargará
parte del video para ver si puede
reproducir el archivo (lo que llevará
tiempo y ancho de banda).

códecs
El códec que se utilizó para codificar el Si el navegador no es compatible exTra en línea
video se proporciona dentro del con <video> elemento o el Hemos proporcionado enlaces a

escribe atributo. Tenga en cuenta el formato de video utilizado, herramientas que lo ayudan a codificar

uso de comillas simples, así como mostrará lo que esté entre la videos y audio en los formatos correctos

comillas dobles en el atributo de tipo, apertura <video> y cerrando en la sección Herramientas del sitio web.

cuando se proporciona. </video> etiquetas.

215 FLASH, VIDEO Y AUDIO

 hTml5: combinando Flash
& Video hTml5

Al ofrecer sus videos en formatos HTML5 y

Flash Video, se asegurará de que la mayoría
de los usuarios de su sitio puedan verlos.

Puede optar por ofrecer HTML5 Debido a que algunos de los Si comienza a trabajar con video
como primera opción y video reproductores de video integrados HTML5 en profundidad, también puede:
Flash como respaldo para las en Flash admiten la codificación
● Crea tus propios controles de
personas cuyo navegador no H264, si usa un reproductor que
reproducción
admite video HTML5. O puede admita este formato, solo
trabajar al revés. necesitará proporcionar el video en ● Proporcione diferentes versiones del

los formatos H264 y WebM. (No lo video para navegadores que tengan

necesitaría también en formato pantallas de diferentes tamaños (para

que pueda proporcionar contenido de
FLV). Verá esto demostrado en el
menor resolución para dispositivos
ejemplo al final del capítulo.
portátiles)

● Dile a las diferentes partes de una

página que cambien cuando el
video llegue a cierto punto

FLASH, VIDEO Y AUDIO 216

 agregando audio a
páginas web

Con mucho, el formato más popular para colocar

audio en páginas web es MP3. Al igual que con el
video, hay tres rutas que se toman comúnmente:

1 2 3
UTILICE UN SERVICIO ALOJADO usar Flash utilizar hTml5

Hay varios sitios que le permiten Hay varias películas Flash que le permiten HTML5 ha introducido una nueva
cargar su audio y proporcionan un reproducir archivos MP3; desde botones <audio> elemento. Los navegadores que

reproductor que puede incrustar simples que reproducen una pista hasta admiten este elemento proporcionan sus
en su página, como reproductores complejos que le permiten propios controles, al igual que lo hacen

SoundCloud.com y crear listas de reproducción y máquinas de para los archivos de video que acabamos

MySpace.com. discos. de ver.

Algunas personas preguntan cómo hacer En realidad, esto es bastante difícil Es por eso que algunos sitios ofrecen

que la música se reproduzca de manera de lograr y dependería de técnicas reproductores de audio en nuevas

constante incluso cuando los visitantes se como usar AJAX para cargar el ventanas, para que los oyentes no

mueven de una página a otra en un sitio web. contenido de la página o desarrollar interrumpido cuando se
todo el sitio en Flash. mueven entre páginas.

217 FLASH, VIDEO Y AUDIO

 agregando un PIEliacslhmi
Arkansas

reproductor de mp3

Hay muchos reproductores MP3 que

HTML capítulo-09 / agregar-un-reproductor-de-mp3-flash.html
ya se han escrito en Flash, como por
<! DOCTYPE html> ejemplo:
<html>
<cabeza> flash-mp3-player.net
<título>Agregar un reproductor MP3 Flash</título> musicplayer.sourceforge.net
<tipo de script = "texto / javascript" www.wimpyplayer.com
src = "http://ajax.googleapis.com/ajax/libs/
swfobject / 2.2 / swfobject.js"> </script> <script type = Cada uno de estos reproductores tiene

"text / javascript"> una funcionalidad diferente, así que

var flashvars = {}; verifique sus características antes de

var params = {mp3: "audio / test-audio.mp3"}; elegir uno para su sitio.

swfobject.embedSWF (
"flash / player_mp3_1.0.0.swf", "reproductor de Este ejemplo usa un reproductor
música", "200", "20", "8.0.0", flashvars, gratuito de flash-mp3-player.net
params); </script> que está incrustado en la página utilizando

</head> la técnica SWFObject que conocimos en las

<cuerpo> páginas 208-208. Al reproductor se le indica

<div id = "reproductor de música"> la ruta al archivo MP3 mediante un

<p>No puede escuchar esta pista porque esta parámetro llamadomp3.

El navegador no es compatible con nuestro reproductor de

música Flash.</p> Después del segundo <guión>
</div> etiqueta, puede ver que hemos
</body> creado dos variables de JavaScript;
</html> el primero llamadoflashvars, el
segundo llamado params. Aunque
no estemos usando el flashvars
variable, el script SWFObject lo
Resultado
espera antes de la params
variable, así que lo necesitamos allí.

var flashvars = {}; var

params = {
mp3: "música / ruido.mp3"};

Estas variables luego se

agregan al final de la línea que
incrusta el reproductor MP3 en la
página (justo antes del segundo
cierre <guión> etiqueta).

COMO
SH
FFLLAH ,, VIID
V EO O & AUDIIO
Delaware O 2118
8
 hTml5: agregando hTml5
audio a sus páginas

<audio> capítulo-09 / agregando-html5-audio.html HTML

<! DOCTYPE html>
HTML5 introdujo el <audio> <html>
elemento para incluir archivos de audio en <cabeza>
sus páginas. Al igual que con el video <title> Agregar audio HTML5 </title> </
HTML5, los navegadores esperan head>
diferentes formatos para el audio. <cuerpo>

<audio src = "audio / test-audio.ogg"

El <audio> El elemento tiene una serie controla la reproducción automática>

de atributos que le permiten <p>Este navegador no es compatible con nuestro audio

controlar la reproducción de audio: formato.</p>
</audio>

src </body>
</html>
Este atributo especifica la ruta al
archivo de audio.

control S
Resultado
Este atributo indica si el
jugador debe mostrar
control S. Si no usa este atributo, no
se mostrarán controles por defecto.
También puede especificar sus
propios controles usando JavaScript.

auto-reproducción precarga
La presencia de este atributo indica que el Este atributo indica lo que debe hacer el Este ejemplo solo funciona en
audio debería comenzar a reproducirse navegador si el reproductor no está navegadores que admiten el
automáticamente. (Se considera una configurado para auto-reproducción. Puede formato de audio Ogg Vorbis
mejor práctica permitir que los visitantes tener los mismos valores que vimos en la (Firefox, Chrome y Opera). Para
elijan reproducir audio). página 214 para el <video> elemento. que funcione en Safari 5 e IE 9, el
audio debe estar en formato

lazo MP3 (o usar el <fuente>

elemento cubierto en la página siguiente
Este atributo especifica que la pista de
para ofrecer diferentes formatos).
audio debería volver a reproducirse una
vez que haya terminado.

219 FLASH, VIDEO Y AUDIO

 hTml5: mulTiPla eraTúico
dliomi
fuentes

HTML capítulo-09 / multiple-audio-sources.html

<fuente>
<! DOCTYPE html>
<html> Es posible especificar más de un
<cabeza> archivo de audio usando el
<título>Varias fuentes de audio</título> </head> <fuente> elemento entre la
apertura <audio> y cerrando
<cuerpo> </audio> etiquetas (en lugar de las

<reproducción automática de controles de audio> src atributo en la apertura

<source src = "audio / test-audio.ogg" /> <source src = <audio> etiqueta).

"audio / test-audio.mp3" /> <p>Este navegador no es

compatible con nuestro audio Esto es importante porque los diferentes
formato.</p> navegadores admiten diferentes formatos

</audio> para archivos de audio.

</body>
</html> MP3: Safari 5 o superior, Chrome 6 o superior, IE9

Ogg Vorbis: Firefox 3.6, Chome

6, Opera 1.5, IE9
Resultado

Por lo tanto, necesitaría proporcionar dos

formatos de audio para obtener cobertura
en todos los navegadores recientes que
admiten <audio> elemento. También puede
proporcionar una alternativa de Flash para
los navegadores más antiguos que no son
compatibles con <audio>

src escribe
elemento.

El <fuente> elemento usa el En el momento de escribir este artículo, el escribe

El HTML5 <audio> La etiqueta no ha
src atributo para indicar dónde se El atributo no se usaba
ganado una adopción tan generalizada
encuentra el archivo de audio. comúnmente en el <fuente>
como <video> tag, y ha habido algunos
elemento de la misma manera que lo
problemas con la calidad del audio en
fue para el <video> elemento.
los primeros navegadores que lo
implementaron.

COMO
FFLLASH
H ,, VIID
V EO O & AUDIIO
Delaware O 220
221 FLASH, VIDEO Y AUDIO
 ejemplo
Flash, video y audio

Este ejemplo usa HTML5 para mostrar un video.

El video ha sido codificado en formatos H264 y WebM para llegar a tantos

navegadores como sea posible. Se ha agregado un reproductor Flash a la
página para los navegadores que no admiten video HTML5. El reproductor Flash
está incrustado mediante SWFObject. Si el navegador no es compatible con
video HTML5 o Flash, se mostrará al usuario un mensaje de texto sin formato.

<! DOCTYPE html>

<html>
<cabeza>

<título>Flash, video y audio</título> <tipo de

script = "texto / javascript"
src = "http://ajax.googleapis.com/ajax/libs/
swfobject / 2.2 / swfobject.js"> </script> <script type =
"text / javascript">
var flashvars = {};
var params = {película: "../video/puppy.flv"};
swfobject.embedSWF ("flash / osplayer.swf", "nieve", "400", "320",
"8.0.0", flashvars, params); </script> </head>

<cuerpo>

<video poster = "images / puppy.jpg" width = "400"

altura = "320" controles = "controles">
<fuente src = "video / puppy.mp4" type = 'video / mp4;
codecs = "avc1.42E01E, mp4a.40.2" '/>
<source src = "video / puppy.webm" type = 'video / webm;
codecs = "vp8, vorbis" '/> <div
id = "nieve">
<p>No puedes ver este video de un cachorro jugando
en la nieve porque este navegador no es compatible
con nuestros formatos de video.</p> </div>

</video>
</body>
</html>

FLASH, VIDEO Y AUDIO 222

 resumen
Flash, video y audio

X Flash le permite agregar animaciones, video y audio a

la web.

X Flash no es compatible con iPhone o iPad.

X HTML5 presenta nuevo <video> y <audio>

elementos para agregar video y audio a páginas web, pero estos
solo son compatibles con los navegadores más recientes.

X No todos los navegadores que admiten los elementos HTML5

admiten los mismos formatos de video y audio, por lo que debe
proporcionar sus archivos en diferentes formatos para asegurarse
de que todos puedan verlos / escucharlos.
 PRESENTAR
10
CSS

X Que hace CSS

X Cómo funciona CSS
X Reglas, propiedades y valores
 En este apartado veremos cómo hacer más
atractivas tus páginas web, controlando el
diseño de las mismas mediante CSS.

CSS le permite crear reglas que especifican cómo debe aparecer el

contenido de un elemento. Por ejemplo, puede especificar que el
fondo de la página sea crema, que todos los párrafos deben aparecer
en gris con el tipo de letra Arial, o que todos los encabezados del nivel
uno deben estar en azul, cursiva, tipo de letra Times.

Una vez que haya aprendido a escribir una regla CSS, aprender CSS implica
principalmente aprender las diferentes propiedades que puede utilizar.
Entonces este capítulo:

● Presentarle cómo funciona CSS

● Enseñarle a escribir reglas CSS

● Mostrarle cómo se aplican las reglas CSS a las páginas HTML.

Los capítulos restantes de esta sección analizarán todas las distintas

propiedades de CSS que puede utilizar.

227 PRESENTANDO CSS

PRESENTANDO CSS 228
 ENTENDIENDO EL CSS:
pensando dentro de la caja

La clave para comprender cómo funciona CSS es

imaginar que hay un cuadro invisible alrededor de
cada elemento HTML.

En esta página, puede ver una página

HTML básica.

En la página de la derecha, puede ver la

misma página HTML, pero he agregado
contornos a cada uno de los elementos
para que pueda ver cómo CSS tratará
cada elemento como si viviera dentro de
su propia caja.

ELEMENTOS EN BLANCO Y EN LÍNEA

Puede recordar de las páginas Los elementos de nivel de bloque Los elementos en línea fluyen dentro
185-186 que hay una diferencia parecen comenzar en una nueva del texto y no comienzan en una
entre el nivel de bloque y los línea. Los ejemplos incluyen el <h1> nueva línea. Los ejemplos incluyen <
elementos en línea y cómo los <h6>, <p> y <div> elementos. b>, <i>, <img>, <em> y <lapso>.
visualizan los navegadores.

229 PRESENTANDO CSS

 CSS le permite crear reglas que controlan la forma
en que se presenta cada cuadro individual (y el
contenido de ese cuadro).

En este ejemplo, los elementos de

nivel de bloque se muestran con
bordes rojos y los elementos en línea
tienen bordes verdes.

El <cuerpo> elemento crea el primer

cuadro, luego el <h1>, <h2>, <p>, <i>, y
<a> Cada uno de los elementos crea
sus propias cajas dentro de él.

Con CSS, puede agregar un borde

alrededor de cualquiera de los
cuadros, especificar su ancho y alto, o
agregar un color de fondo. También
puede controlar el texto dentro de un
cuadro, por ejemplo, su color, tamaño
y tipo de letra utilizado.

EJEMPLO DE ESTILOS
Cajas texto Específico

Anchura y altura Tipografía También hay formas específicas en

Bordes (color, ancho y estilo) Color Tamaño las que puede aplicar estilo a ciertos
de fondo e imágenes Posición en la Color elementos, como listas, tablas y
ventana del navegador. Cursiva, negrita, mayúscula, formularios.
minúscula, minúscula

PRESENTANDO CSS 230

 ESTILO ASOCIADO DE CSS
REGLAS CON HTML
elementos
CSS funciona asociando reglas con elementos HTML. Estas reglas gobiernan
cómo se debe mostrar el contenido de los elementos especificados. Una regla
CSS contiene dos partes: aselector y un declaración.

Selector

pag {

familia de fuentes: Arial;}

Declaración

Esta regla indica que todos <p> Selectores indicar a qué Declaraciones Indique cómo se debe

los elementos deben mostrarse en el elemento se aplica la regla. La aplicar estilo a los elementos a los que se

tipo de letra Arial. misma regla se puede aplicar a hace referencia en el selector. Las

más de un elemento si separa declaraciones se dividen en dos partes

los nombres de los elementos (una propiedad y un valor) y están

con comas. separadas por dos puntos.

231 PRESENTANDO CSS

 LAS PROPIEDADES DEL CSS Afectan
CÓMO SON LOS ELEMENTOS
desplegado
Las declaraciones CSS se encuentran entre corchetes y cada una se compone de dos
partes: a propiedad y un valor, separados por dos puntos. Puede especificar varias
propiedades en una declaración, cada una separada por un punto y coma.

h1, h2, h3 {
Familia tipográfica: Arial;
color: amarillo;}

Propiedad Valor

Esta regla indica que todos <h1>, Propiedades indique los aspectos Valores especifique la configuración
<h2> y <h3> Los elementos deben del elemento que desea cambiar. que desea utilizar para las
mostrarse en tipografía Arial, en Por ejemplo, color, fuente, ancho, propiedades elegidas. Por ejemplo,
color amarillo. alto y borde. si desea especificar una propiedad
de color, el valor es el color que
desea que tenga el texto de estos
elementos.

PRESENTANDO CSS 232

233 PRESENTANDO CSS
 ejemplo
PRESENTANDO CSS

Aquí puede ver una página web simple que está

diseñada con CSS.

Este ejemplo utiliza dos documentos: el archivo HTML (ejemplo.html)

y un archivo CSS separado (ejemplo.css). La quinta línea de HTML usa la
<enlace> elemento para indicar dónde se encuentra el archivo CSS.

En la página siguiente, verá cómo las reglas CSS también se pueden colocar en
sus páginas HTML y discutiremos cuándo es posible que desee hacer esto.

<! DOCTYPE html>

<html>
<cabeza>

<título>Introduciendo CSS</título>
<link href = "css / example.css" type = "text / css"
rel = "hoja de estilo" />
</head>
<cuerpo>

<h1>Del jardín al plato</h1> <p>A <yo>potager</yo> es

un término francés para un
hortalizas ornamentales o huerta ... </p> <h2>Que plantar</h2>
<p>Las plantas se eligen tanto por su funcionalidad.

en cuanto a su color y forma ... </p> </body>

</html>

cuerpo {
familia de fuentes: Arial, Verdana, sans-serif;} h1, h2
{
color: # ee3e80;}
pag {

color: # 665544;}

PRESENTANDO CSS 234

 UTILIZACIÓN DE CSS EXTERNO

<enlace> capítulo-10 / using-external-css.html HtMl

<! DOCTYPE html>
El <enlace> El elemento se puede utilizar <html>
en un documento HTML para indicarle al <cabeza>
navegador dónde encontrar el archivo <título>Usando CSS externo</título>
CSS utilizado para diseñar la página. Es <link href = "css / styles.css" type = "text / css"
un elemento vacío (lo que significa que rel = "hoja de estilo" />
no necesita una etiqueta de cierre) y vive </head>
dentro del <cabeza> elemento. Debe <cuerpo>
usar tres atributos: <h1>Patatas</h1> <p>Hay docenas de patatas
diferentes.

href variedades. Por lo general, se describen como

tempranos, segundos tempranos y maincrop.</p> </
Esto especifica la ruta al archivo CSS
body>
(que a menudo se coloca en una
</html>
carpeta llamada css o estilos).

escribe
capítulo-10 / styles.css CSS
Este atributo especifica el tipo de
documento al que se vincula. El cuerpo {
valor debe sertexto / css. familia de fuentes: arial;
color de fondo: rgb (185,179,175);}

rel h1 {
color: rgb (255,255,255);}
Esto especifica la relación entre
la página HTML y el archivo al
que está vinculada. El valor debe
serhoja de estilo al vincular a un Resultado
archivo CSS.

Una página HTML puede utilizar

más de una hoja de estilo CSS. Para
hacer esto, podría tener un <enlace>
elemento para cada archivo CSS que
utiliza. Por ejemplo, algunos autores
usan un archivo CSS para controlar la
presentación (como fuentes y colores) y
un segundo para controlar el diseño.

235 PRESENTANDO CSS

 rLticcL
pasante de usoAutomóvil SeS
club británico

HtMl + CSS capítulo-10 / using-internal-css.html

<estilo>
<! DOCTYPE html>
<html> También puede incluir reglas CSS dentro

<cabeza> de una página HTML colocándolas dentro

<título>Usando CSS interno</título> <style de un <estilo> elemento, que

type = "text / css"> normalmente se encuentra dentro del

cuerpo { <cabeza> elemento de la página.

familia de fuentes: arial;

color de fondo: rgb (185,179,175);} El <estilo> El elemento debe usar el
h1 { escribe atributo para indicar que los
color: rgb (255,255,255);} estilos están especificados en CSS.
</style> El valor debe sertexto / css.
</head>
<cuerpo>

<h1>Patatas</h1> <p>Hay docenas de patatas Al crear un sitio con más de una

diferentes. página, debe utilizar una hoja de
variedades. Por lo general, se describen como estilo CSS externa. Esta:
tempranos, segundos tempranos y maincrop.</p>
● Permite que todas las páginas utilicen
</body>
las mismas reglas de estilo (en lugar de
</html> repetirlas en cada página).

● Mantiene el contenido separado

del aspecto de la página.
Resultado
● Significa que puede cambiar los
estilos utilizados en todas las
páginas modificando solo un archivo
(en lugar de cada página individual).

En HTML 4 y XHTML transicional, que apareció dentro del valor del porque puede verlo usado en
también puede utilizar un estilo atributo solo se aplicaría a ese código más antiguo. Aquí hay un
atributo en la mayoría de los elemento. Debe evitar usar este ejemplo que cambia el color del
elementos que aparecen en el cuerpo atributo en cualquier sitio nuevo, texto en un solo párrafo rojo:
de una página. Las reglas de CSS pero lo menciono aquí. <p style = "color: red;">

IINTR
RODU
UCIIN
NG
GCCS
SS 236
Nuevo Testamento
sobredosis
 SeLectores cSS

Hay muchos tipos diferentes de

capítulo-10 / css-selectors.html HtMl
selectores de CSS que le permiten
orientar las reglas a elementos <! DOCTYPE html>
específicos en un documento HTML. <html>
<cabeza>
La tabla de la página opuesta <título>Selectores CSS</título> </
presenta los selectores de head>
CSS más utilizados. <cuerpo>

<h1 id = "top">Calendario de jardín de cocina</h1>

En esta página, hay un archivo <p id = "introducción">Aquí puedes leer nuestro
HTML para demostrar a qué guía práctica sobre qué hacer y cuándo.</p> <h2>
elementos se aplicarían estos Primavera</h2> <ul>
selectores CSS.
<li> <a href="mulch.html">
Los selectores de CSS distinguen entre mayúsculas y Camas de verduras con mantillo de primavera</a>
minúsculas, por lo que deben coincidir exactamente con </li> <li> <a href="potato.html">
los nombres de los elementos y los valores de los Plantar papas tempranas</a> </li> <li> <a
atributos. href="tomato.html">
Sembrar semillas de tomate</a>
Hay algunos selectores más </li> <li> <a href="beet.html">
avanzados que le permiten Sembrar semillas de remolacha</
seleccionar elementos basados a> </li> <li> <a href="zucchini.html">
en atributos y sus valores, que Sembrar semillas de calabacín</a>
verá en la página 292. </li> <li> <a href="rhubarb.html">
Flores de ruibarbo Deadhead</a> </li>
IE 7 fue la primera versión de IE que </ul>
admitió los dos últimos selectores de la <p class = "nota">
tabla (los selectores hermanos), por lo Esta página fue escrita por
que su uso es menos común que los <a href="mailto: [email protected] ">
otros selectores que se muestran aquí. [email protected]</a> por
<a href="http://www.example.org">Ejemplo</a>.
</p>
<p>
<a href="#top">Parte superior de la página</a> </

p>

</body>
</html>

237 PRESENTANDO CSS

Selector Sentido ejemplo

SELECTOR UNIVERSAL Se aplica a todos los elementos del * {}

documento. Apunta a todos los elementos de la página.

tipo SeLector Coincide con los nombres de los elementos h1, h2, h3 {}
Se dirige al <h1>, <h2> y <h3>
elementos

SELECTOR DE CLASES Coincide con un elemento cuyo . Nota {}

clase El atributo tiene un valor que Apunta a cualquier elemento cuyo clase

coincide con el especificado después atributo tiene un valor de Nota

del símbolo de punto (o punto) p.note {}
Solo objetivos <p> elementos
cuyos clase atributo tiene un
valor de Nota

Selector de Id. Coincide con un elemento cuyo # Introducción {}

identificación El atributo tiene un valor que Se dirige al elemento cuyo
coincide con el especificado después del identificación atributo tiene un valor de

símbolo de almohadilla o almohadilla. Introducción

SELECTOR DE NIÑOS Coincide con un elemento que li> a {}

es hijo directo de otro Se dirige a cualquier <a> elementos
que son hijos de un <li> elemento
(pero no otro <a> elementos en la
página)

Selector descendiente Coincide con un elemento que es pa {}

descendiente de otro elemento Se dirige a cualquier <a> elementos

especificado (no solo un hijo directo que se sientan dentro de un <p>

de ese elemento) elemento, incluso si hay otros

elementos anidados entre ellos

SIBLIng adyacente Coincide con un elemento que es el h1 + p {}

Selector próximo hermano de otro Se dirige al primer <p> elemento
después de cualquier <h1> elemento
(pero no otro <p> elementos)

HERMANOS GENERALES Coincide con un elemento que es h1 ~ p {}

Selector hermano de otro, aunque no Si tuvieras dos <p> elementos que
tiene que ser el elemento son hermanos de un <h1> elemento,
directamente anterior esta regla se aplicaría tanto a

PRESENTANDO CSS 238

 cómo gobierna la cSS la caScada

Si hay dos o más reglas que se

capítulo-10 / cascade.html HtMl
aplican al mismo elemento, es
importante comprender cuál <h1>Patatas</h1>
tendrá prioridad. <p id = "intro">Existen <yo>docenas</yo> de diferente
<b>patata</b> variedades.</p> <p>Por lo general, se describen
ÚLTIMA REGLA como temprano, segundo temprano
Si los dos selectores son y patatas de cultivo principal.</p>
idénticos, prevalecerá el último
de los dos. Aquí puedes ver el
segundoI selector tiene
CSS
prioridad sobre el primero.
*{
Especificidad familia de fuentes: Arial, Verdana, sans-serif;} h1 {
Si un selector es más específico
que los demás, la regla más font-family: "Courier New", monoespacio;} i {
específica prevalecerá sobre las
más generales. En este ejemplo: color verde;}
I{
color rojo;}
h1 es más específico que * B{
pb es más específico que pp # intro color rosa;}
es más específico que pag pb {
color: azul! importante;} pb {
Importante
Puedes añadir !importante después color: violeta;}
de cualquier valor de propiedad p # intro {
para indicar que debe considerarse tamaño de fuente: 100%;}
más importante que otras reglas pag {

que se aplican al mismo elemento. tamaño de fuente: 75%;}

Comprender cómo las reglas CSS se

combinan en cascada significa que puede
Resultado
escribir hojas de estilo más simples porque
puede crear reglas genéricas que se
aplican a la mayoría de los elementos y
luego anular las propiedades de los
elementos individuales que deben
aparecer de manera diferente.

239 PRESENTANDO CSS

 En su aire estaño
ejército ccreserva
de Lemi

Si especifica el Familia tipográfica

HtMl capítulo-10 / herencia.html
o color propiedades en el
<div class = "página"> <cuerpo> elemento, se aplicarán a la

<h1>Patatas</h1> mayoría de los elementos secundarios.

<p>Hay docenas de patatas diferentes. Esto se debe a que el valor de la

variedades.</p> Familia tipográfica la propiedad es

<p>Por lo general, se describen como primeros, segundos heredado por elementos secundarios.
patatas tempranas y de cultivo principal.</p> Le ahorra tener que aplicar estas
</div> propiedades a tantos elementos (y da
como resultado hojas de estilo más
simples).

CSS
Puedes comparar esto
cuerpo { con el color de fondo o
familia de fuentes: Arial, Verdana, sans-serif; color: frontera propiedades; ellos sonno

# 665544; heredado por elementos secundarios. Si

relleno: 10px;} estos fueran heredados por todos los

. página { elementos secundarios, la página podría

borde: 1px sólido # 665544; color verse bastante desordenada.

de fondo: #efefef; padding:

heredar;} Puede obligar a muchas propiedades a
heredar valores de sus elementos
principales utilizando
heredar por el valor de las
Resultado
propiedades. En este ejemplo, el
<div> elemento con un clase
llamada página hereda el tamaño de
relleno de la regla CSS que se aplica
al <cuerpo> elemento.

IINTR
RODU
UCIIN
NG
GCCS
SS 240
Nuevo Testamento
sobredosis
 POR QUÉ UTILIZAR EXTERNO
HOJAS DE ESTILO?

Al crear un sitio web, existen varias ventajas al colocar su

Reglas CSS en una hoja de estilo separada.

Todas sus páginas web pueden Por lo tanto, una vez que el usuario la única hoja de estilo CSS, en
compartir la misma hoja de estilo. haya descargado la hoja de estilo lugar de cambiar las reglas CSS en
Esto se logra usando el <enlace> CSS, el resto del sitio se cargará más cada página. El código HTML será
elemento en cada página HTML de su rápido. Si desea realizar un cambio más fácil de leer y editar porque
sitio para vincular al mismo documento en la apariencia de su sitio, solo no tiene muchas reglas CSS en el
CSS. Esto significa que no es necesario necesita editar el archivo CSS y se mismo documento. En general, se
repetir el mismo código en todas las actualizarán todas sus páginas. Por considera una buena práctica
páginas (lo que da como resultado ejemplo, puede cambiar el estilo de separar el contenido del sitio de
menos código y páginas HTML más cada <h1> elemento alterando las reglas que determinan su
pequeñas). apariencia.

A veces puede considerar colocar reglas CSS en la misma página que

su código HTML.

Si solo está creando una sola página, Si tiene una página que requiere algunas La mayoría de los ejemplos de este
puede decidir poner las reglas en el reglas adicionales (que no son utilizadas libro colocan las reglas CSS en el
mismo archivo para mantener todo en por el resto del sitio), podría considerar <cabeza> del documento (usando el <

un solo lugar. (Sin embargo, muchos usar CSS en la misma página. (Nuevamente, estilo> elemento) en lugar de un

autores considerarían una mejor la mayoría de los autores consideran que es documento separado. Esto es
práctica mantener el CSS en un una mejor práctica mantener todas las simplemente para evitar que tenga que
archivo separado). reglas CSS en un archivo separado). abrir dos archivos para ver cómo
funcionan los ejemplos de CSS.

241 PRESENTANDO CSS

 DIFERENTES VERSIONES DE
cSS y navegador

CSS1 fue lanzado en 1996 y CSS2 siguió dos años más tarde. El trabajo en CSS3 ha
estado en curso, pero los principales navegadores ya han comenzado a
Impleméntalo.

De la misma forma que ha habido Los navegadores no implementaron todas Esto se menciona cuando es probable

varias versiones de HTML, las funciones de CSS a la vez, por lo que que lo afecte, junto con notas en las que

también ha habido diferentes algunos navegadores más antiguos no las propiedades de CSS podrían no

versiones de CSS. admiten todas las propiedades. comportarse como se esperaba.

Cualquier usuario experimentado de CSS le dirá que algunos navegadores muestran

algunas de las propiedades de CSS de forma inesperada. Pero encontrar y aplastar
esos errores es fácil cuando sabes cómo ...

Antes de lanzar un sitio nuevo, es Con estas herramientas, es una buena En este libro se analizan algunos errores

importante probarlo en más de un idea consultar el sitio en diferentes comunes del navegador, pero hay muchos

navegador, porque puede haber pequeñas sistemas operativos (PC, Mac y Linux) y errores más pequeños que solo ocurren en

diferencias en la forma en que los en versiones anteriores de los situaciones raras o en navegadores

navegadores muestran las páginas. principales navegadores, así como en antiguos que pocas personas usan.

versiones recientes.
No necesita muchas computadoras Si encuentra un error de CSS, puede
para probar su sitio, ya que existen Cuando miras tu sitio en más usar su motor de búsqueda favorito
herramientas en línea para de un navegador, es posible para intentar encontrar una solución. O
mostrarle cómo se ve una página en que algunos elementos de tu puede consultar estos sitios:
varios navegadores: página no se vean como
esperabas. PositionIsEverything.net
BrowserCam.com QuirksMode.org
BrowserLab.Adobe.com Cuando una propiedad CSS no se
BrowserShots.org muestra como se esperaba,
CrossBrowserTesting.com generalmente se la conoce como
peculiaridad del navegador o Error de CSS.

PRESENTANDO CSS 242

 Resumen
PRESENTANDO CSS

X CSS trata cada elemento HTML como si apareciera dentro de

su propio cuadro y usa reglas para indicar cómo debe verse
ese elemento.

X Las reglas se componen de selectores (que especifican los

elementos a los que se aplica la regla) y declaraciones (que
indican cómo deberían verse estos elementos).

X Los diferentes tipos de selectores le permiten orientar sus

reglas a diferentes elementos.

X Las declaraciones se componen de dos partes: las

propiedades del elemento que desea cambiar y los valores
de esas propiedades. Por ejemplo, la propiedad font-family
establece la elección de la fuente y el valor arial especifica
Arial como el tipo de letra preferido.

X Las reglas CSS suelen aparecer en un documento separado,

aunque pueden aparecer dentro de una página HTML.
 11
Color

X Cómo especificar colores

X Terminología de color y contraste
X Color de fondo
 El color realmente puede dar vida a tus páginas.

En este capítulo veremos:

● Cómo especificar colores, ya que hay tres formas comunes en las

que puede indicar su elección de colores (además de formas
adicionales disponibles en CSS3)

● Terminología de color, ya que hay algunos términos que son

muy útiles de entender cuando se trata de elegir colores.

● Contraste y asegúrese de que su texto sea legible

● Colores de fondo para detrás de toda la página o partes de

una página

Lo que aprenderá sobre los colores en este capítulo se utilizará

en los capítulos siguientes cuando se trata de ver los colores
del texto y los cuadros en CSS.

247 COLOR
COLOR 248
 Color de primer plano
color

El color La propiedad le permite especificar

Chapter-11 / foreground-color.html CSS
el color del texto dentro de un elemento.
Puede especificar cualquier color en CSS de / * nombre del color * /
una de estas tres formas: h1 {
color: DarkCyan;}
valores rgb / * código hexadecimal * /

Estos expresan colores en h2 {

términos de cuánto rojo, verde y color: # ee3e80;}
azul se utilizan para componerlo. / * valor rgb * /
Por ejemplo:rgb (100,100,90) pag {

color: rgb (100,100,90);}

códigos hexadecimales

Estos son códigos de seis dígitos que

representan la cantidad de rojo, verde
Resultado
y azul en un color, precedidos por un
signo de almohadilla o almohadilla #.
Por ejemplo: #ee3e80

Nombres de colores
Hay 147 nombres de colores
predefinidos que son reconocidos
por los navegadores. Por ejemplo:
DarkCyan

Observamos estas tres formas

diferentes de especificar colores
en la siguiente página doble.

CSS3 también ha introducido otra Por encima de cada regla CSS en El uso de comentarios puede ayudarlo a
forma de especificar colores llamada este ejemplo, puede ver cómo CSS comprender un archivo CSS (y
HSLA, que encontrará cerca del final le permite agregar comentarios a organizarlo, dividiendo un documento
de este capítulo en la página 255-256. sus archivos CSS. Cualquier cosa largo en secciones). Aquí, hemos
entre los símbolos / * y los utilizado comentarios para indicar qué
símbolos * / no será interpretada método se utiliza para especificar cada
por el navegador. Se muestran en uno de los diferentes tipos de colores.
gris arriba.

249 COLOR
 baCkgroundaC rotilColrmi
color de fondo

CSS trata cada elemento HTML como

CSS capítulo-11 / background-color.html
si apareciera en un cuadro, y el
cuerpo { color de fondo La propiedad
color de fondo: rgb (200,200,200);} h1 { establece el color del fondo de
ese cuadro.
color de fondo: DarkCyan;} h2 {
Puede especificar su elección de color de

color de fondo: # ee3e80;} p { fondo de las mismas tres formas en que

puede especificar los colores de primer

color de fondo: blanco;} plano: valores RGB, códigos

hexadecimales y nombres de colores
(que se tratan en la página siguiente).

Resultado
Si no especifica un color
de fondo, el fondo es
transparente.

De forma predeterminada, la mayoría de las

ventanas del navegador tienen un fondo

blanco, pero los usuarios del navegador

pueden establecer un color de fondo para

sus ventanas, por lo que si desea asegurarse

de que el fondo sea blanco, puede usar el

color de fondo propiedad en el <

cuerpo> elemento.

También hemos utilizado el relleno

propiedad para separar el texto de los
bordes de los cuadros. Esto hace que
sea más fácil de leer y obtendrá más
información sobre esta propiedad en
la página 313.

COLLO
OR 250
 comprensión del color

Cada color en la pantalla de una computadora se crea mezclando cantidades de rojo,

verde y azul. Para encontrar el color que desea, puede utilizar un selector de color.

Los monitores de computadora

están formados por miles de
pequeños cuadrados llamados
píxeles (si miras muy de cerca tu
monitor, deberías poder verlos).

Cuando la pantalla no está

encendida, está negra porque no
emite luz. Cuando está encendido,
cada píxel puede ser de un color
diferente, creando una imagen.

El color de cada píxel de la pantalla

se expresa en términos de una
mezcla de rojo, verde y azul, como
en una pantalla de televisión.

Las herramientas de selección de color

están disponibles en programas de edición
de imágenes como Photoshop y GIMP.
Puede ver los valores RGB especificados
junto a los botones de opción que dicen R,
G, B.

El valor hexadecimal se proporciona

junto a la libra o el hash.

símbolo #. También hay una buena

herramienta de selección de color en:

colorschemedesigner.com

251 COLOR
Valores RGB Códigos hexadecimales Nombres de color

Los valores de rojo, verde y Los valores hexadecimales Los colores están representados por
azul se expresan como representan valores para rojo, verde y nombres predefinidos. Sin embargo,
números entre 0 y 255. azul en código hexadecimal. son muy limitados en número.

rgb (102,205,170) # 66cdaa MedioAquaMarine

Este color se compone de los El valor del rojo, 102, se expresa Hay 147 nombres de colores
siguientes valores: como 66 en código hexadecimal. El compatibles con los navegadores
102 rojo 205 del verde se expresa comoCD y (este color es MediumAquaMarine).
205 verdes el 170 del azul equivale a Automóvil La mayoría considera que se trata de
170 azul club británico. una paleta de colores limitada, y es
difícil recordar el nombre de cada uno
de los colores, por lo que (aparte del
blanco y el negro) no se usan
comúnmente.

Matiz saturación Brillo

Hue está cerca de la idea coloquial de La saturación se refiere a la El brillo (o "valor") se refiere a
color. Sin embargo, técnicamente cantidad de gris en un color. Con la cantidad de negro que hay
hablando, un color también puede la máxima saturación, no habría en un color. Con el brillo
tener saturación y brillo, así como gris en el color. Con una máximo, no habría negro en el
matiz. saturación mínima, el color sería color. Con un brillo mínimo, el
mayormente gris. color sería muy oscuro.

COLOR 252
 Contraste

Al elegir los colores de primer plano y de fondo,

es importante asegurarse de que haya
suficiente contraste para que el texto sea legible.

bajo elevado medio

Contraste Contraste Contraste

El texto es más difícil de leer El texto es más fácil de leer cuando Para tramos largos de texto, reducir
cuando hay poco contraste entre hay un mayor contraste entre los un poco el contraste mejora la
los colores de fondo y de primer colores de fondo y de primer plano. legibilidad.
plano.

La falta de contraste es particularmente Sin embargo, si desea que las Puede reducir el contraste
un problema para aquellos con personas lean mucho texto en su utilizando texto gris oscuro sobre
discapacidad visual y página, demasiado contraste un fondo blanco o un texto
daltonismo. también puede dificultar la lectura. blanquecino sobre un fondo oscuro.

También afecta a quienes tienen monitores

deficientes y luz solar en sus pantallas (lo Si el texto está invertido (un color claro sobre un fondo oscuro),
cual es cada vez más común a medida que puede aumentar la altura entre líneas y el grosor de la fuente
las personas usan dispositivos de mano al
para facilitar la lectura.
aire libre).

Para comprobar el contraste, hay una útil herramienta en línea en: www.snook.ca/technical/colour_contrast/colour.html

253 COLOR
 CSS3: oaprealtCiCitlymi
academia de bellas artes

opacidad, rgba

CSS3 presenta el opacidad

CSS capítulo-11 / opacity.html
propiedad que le permite especificar la
p.one { opacidad de un elemento y cualquiera
color de fondo: rgb (0,0,0); opacidad: de sus elementos secundarios. El valor
0,5;} es un número entre
p.two { 0.0 y 1,0 (entonces un valor de 0,5
color de fondo: rgb (0,0,0); color de fondo: es 50% de opacidad y 0,15 es 15% de
rgba (0,0,0,0.5);} opacidad).

El CSS3 rgba La propiedad le

permite especificar un color, tal
Resultado
como lo haría con un valor RGB,
pero agrega un cuarto valor para
indicar opacidad. Este valor se
conoce comoalfa valor y es un
número entre 0.0 y 1.0
(por lo que un valor de 0,5 es 50% de
opacidad y 0,15 es 15% de opacidad). El
rgba value solo afectará al
elemento en el que se aplica (no a
los elementos secundarios).

Debido a que algunos navegadores

no reconocerán los colores RGBA,
puede ofrecer un respaldo para que
muestren un color sólido. Si hay dos
RESULTADO EN NAVEGADOR ANTIGUO
reglas que se aplican al mismo
elemento, la última de las dos tendrá
prioridad. Para crear el respaldo,
puede especificar un color como
código hexadecimal, nombre de color
o valor RGB, seguido de la regla que
especifica un valor RGBA. Si el
navegador comprende los colores
RGBA, utilizará esa regla. Si no es así,
utilizará el valor RGB.

En el momento de escribir este artículo, el

opacidad y rgba Las propiedades solo

son compatibles con los navegadores
más recientes.

COLLO
OR 254
 Css3: colores hsl

CSS3 introduce una forma completamente nueva e

intuitiva de especificar colores usando tono, saturación,
y valores de ligereza.

Matiz saturación ligereza

Hue es la idea coloquial de color. En los La saturación es la cantidad de gris La claridad es la cantidad de blanco
colores HSL, el tono a menudo se en un color. La saturación se (claridad) o negro (oscuridad) en un
representa como un círculo de color representa como porcentaje. 100% color. La ligereza se representa
donde el ángulo representa el color, es saturación total y 0% es una como porcentaje. El 0% de
aunque también se puede mostrar sombra de gris. luminosidad es negro, el 100% de
como un control deslizante con valores luminosidad es blanco y el 50% de
de luminosidad es normal. La ligereza
a veces se denomina
luminosidad.

Tenga en cuenta que la luminosidad

es un concepto diferente al brillo. El
software de diseño gráfico (como
Photoshop y GIMP) tiene selectores
de color que usan tono, saturación y
brillo, pero el brillo solo agrega
negro, mientras que la luminosidad
ofrece tanto blanco como negro.

255 COLOR
 CSS3: hsla y rtsuCllami
hsl, hsla

El hsl La propiedad de color se ha

CSS capítulo-11 / hsla.html
introducido en CSS3 como una forma
cuerpo { alternativa de especificar colores. El
color de fondo: # C8C8C8; valor de la propiedad comienza con
color de fondo: hsl (0,0%, 78%);} p { las letras.hsl, seguido de valores
individuales entre paréntesis para:
color de fondo: #ffffff; color de fondo: hsla (0,100%,
100%, 0,5);}
matiz
Esto se expresa como un
ángulo (entre 0 y 360 grados).
Resultado

saturación
Esto se expresa como
porcentaje.

ligereza
Esto se expresa como un
porcentaje en el que el 0% es
blanco, el 50% es normal y el 100%
es negro.

El hsla La propiedad de color le permite

especificar las propiedades de color usando el

tono, la saturación y la luminosidad como se

indicó anteriormente, y agrega un cuarto

valor que representa la transparencia (al igual

Debido a que los navegadores más Esto proporciona una alternativa que el rgba

antiguos no reconocen los valores HSL y porque si hay dos reglas que se propiedad). Ela representa:
HSLA, es una buena idea agregar una regla aplican al mismo elemento en CSS, la
adicional que especifique el color usando última de las dos siempre tiene alfa
un código hexadecimal, un valor RGB o un prioridad. Esto significa que si el Esto se expresa como un
nombre de color. Esto debería aparecer navegador comprende los colores número entre 0 y 1.0.
antes de la regla que usa el HSL y HSLA, utilizará esa regla; y si Por ejemplo, 0,5 representa un
valor HSL o HSLA. no lo hace, utilizará la primera regla. 50% de transparencia, y 0,75
representa un 75% de transparencia.

COLLO
OR 256
257 COLOR
 ejemplo
Color

Este ejemplo muestra una escala de pH para demostrar las

diferentes formas en que los colores se pueden especificar

usando CSS (usando nombres de colores, códigos

hexadecimales, RGB y HSL).

La regla para el <cuerpo> El elemento establece un color predeterminado para todo el texto, así
como el color de fondo predeterminado para la página. Ambos usan nombres de colores.

La regla para el <h1> elemento establece el color del encabezado usando un

código hexadecimal. Hay dos valores paracolor de fondo propiedad de la
<h1> elemento. El primero proporciona un color de respaldo utilizando un código

hexadecimal y el segundo es un valor HSLA para los navegadores que admiten este método.

Luego, cada párrafo se muestra en un color diferente para representar los

diferentes niveles de acidez o alcalinidad, y estos se especifican mediante
valores RGB.

El ejemplo también usa una propiedad llamada margen para reducir el espacio
entre los cuadros de párrafo y una propiedad llamada relleno para crear un
espacio entre el borde de los cuadros y el texto dentro de ellos. (Estas
propiedades se tratan en las páginas 313-314).

COLOR 258
 ejemplo
Color

<! DOCTYPE html>

<html>
<cabeza>

<título>Color</título> <style
type = "text / css">
cuerpo {
color de fondo: plateado; color
blanco;
relleno: 20px;
familia de fuentes: Arial, Verdana, sans-serif;} h1 {

color de fondo: #ffffff; color de fondo: hsla (0,100%,

100%, 0,5); color: # 64645A;

padding: heredar;}
pag {

relleno: 5px;
margen: 0px;}
p.zero {
color de fondo: rgb (238,62,128);}
p.one {
color de fondo: rgb (244,90,139);}
p.two {
color de fondo: rgb (243,106,152);}
p.three {
color de fondo: rgb (244,123,166);}
p. cuatro {
color de fondo: rgb (245,140,178);}
p. cinco {
color de fondo: rgb (246,159,192);}
p.six {
color de fondo: rgb (245,176,204);}
p.seven {
color de fondo: rgb (0,187,136);}
p. ocho {
color de fondo: rgb (140,202,242);}
p.nine {
color de fondo: rgb (114,193,240);}

259 COLOR
 ejemplo
Color

p.ten {
color de fondo: rgb (84,182,237);}
p.eleven {
color de fondo: rgb (48,170,233);}
p.twelve {
color de fondo: rgb (0,160,230);}
p.thirteen {
color de fondo: rgb (0,149,226);}
p. catorce {
color de fondo: rgb (0,136,221);}
</style>
</head>
<cuerpo>

<h1>escala PH</h1> <p class = "catorce">14.0 MUY

ALCALINO</p> <p class = "trece">13,0</p> <p class =
"doce">12,0</p> <p class = "once">11,0</p> <p class =
"diez">10.0</p> <p class = "nueve">9.0</p> <p class =
"ocho">8.0</p> <p class = "siete">7.0 NEUTRO</p> <p
class = "seis">6.0</p> <p class = "cinco">5,0</p> <p
class = "cuatro">4.0</p> <p class = "tres">3,0</p> <p
class = "dos">2.0</p> <p class = "uno">1.0</p> <p class
= "cero">0.0 MUY ÁCIDO</p> </body>

</html>

COLOR 260
 resumen
Color

X El color no solo da vida a su sitio, sino que también ayuda a

transmitir el estado de ánimo y evoca reacciones.

X Hay tres formas de especificar colores en CSS: valores

RGB, códigos hexadecimales y nombres de colores.

X Los selectores de color pueden ayudarlo a encontrar el color que desea.

X Es importante asegurarse de que haya suficiente contraste

entre cualquier texto y el color de fondo (de lo contrario, las
personas no podrán leer su contenido).

X CSS3 ha introducido un valor adicional para los colores RGB para

indicar opacidad. Se conoce como RGBA.

X CSS3 también le permite especificar colores como valores HSL,

con un valor de opacidad opcional. Se conoce como HSLA.
 12 Texto

X Tamaño y tipo de letra del texto

X Negrita, cursiva, mayúsculas, subrayado
X Espaciado entre líneas, palabras y letras
 Las propiedades que le permiten controlar la
apariencia del texto se pueden dividir en dos
grupos:

● Aquellos que afectan directamente a la fuente y su apariencia

(incluido el tipo de letra, ya sea regular, negrita o cursiva, y el
tamaño del texto)

● Aquellos que tendrían el mismo efecto en el texto sin

importar qué fuente esté usando (incluido el color del
texto y el espacio entre palabras y letras)

El formato de su texto puede tener un efecto significativo en la

legibilidad de sus páginas. Mientras examinamos estas
propiedades, también le daré algunos consejos de diseño sobre
cómo mostrar su tipo.

265 TEXTO
TEXTO 266
 Terminología tipográfica

I
Serif SanS-Serif monoSpace

Serif las fuentes tienen detalles adicionales sobre Las fuentes Sans-serif tienen los extremos Cada letra en una fuente monoespaciada

metro
los extremos de los trazos principales rectos de las letras y, por lo tanto, tienen (o de ancho fijo) tiene el mismo ancho.
de las letras. Estos detalles son un diseño mucho más limpio. (Las fuentes que no son de espacio único
conocido como s erifs. tienen diferentes anchos).

estoy estoy
En la impresión, las fuentes serif se Las pantallas tienen una resolución más baja que la Las fuentes monoespaciadas se usan
usaban tradicionalmente para pasajes de impresión. Entonces, si el texto es pequeño, las comúnmente para el código porque se
largos de texto porque se fuentes sans-serif pueden ser más claras de leer. alinean bien, lo que hace que el texto sea
consideraban más fáciles de leer. más fácil de seguir.

267 TEXTO
 z
El Xy
ender abo ve la altura de la tapa
altura de la tapa parte superior de letras planas

x-height altura de la letra x

asc línea de base sobre la que se asientan las letras

descendiente por debajo de la línea de base

Peso Estilo Tramo

Luz Normal Condensado

Medio Itálico Regular
Audaz Oblicuo Extendido
Negro

El peso de la fuente no solo agrega Las fuentes en cursiva tienen un aspecto En las versiones condensadas (o

énfasis, sino que también puede afectar cursivo en algunas de las letras. Los estilos estrechas) de la fuente, las letras son

la cantidad de espacio en blanco y el de fuente oblicuos toman el estilo normal y más delgadas y están más juntas. En las

contraste en una página. lo colocan en ángulo. versiones expandidas, son más gruesas y
están más separadas.

TEXTO 268
 elegir un tipo de letra
para su WebSiTe

Al elegir Serif SanS-Serif

un tipo de letra, es
Las fuentes serif tienen detalles Las fuentes Sans-serif tienen extremos

es importante para adicionales al final de los trazos rectos en las letras y, por lo tanto,

entender que un principales de las letras. tienen un diseño mucho más limpio.

el navegador normalmente
EJEMPLOS: EJEMPLOS:
solo mostrarlo si está
instalado en ese Georgia Arial
computadora del usuario.
Veces Verdana
Times New Roman Helvética

Como resultado, los sitios a menudo utilizan un pequeño conjunto de tipos de letra que se
instalan en la mayoría de las computadoras (como se muestra arriba). Existen algunas
técnicas para sortear esta limitación (que se tratan en las páginas 271-272).

Es posible especificar más de un tipo de letra y crear un orden de

preferencia (en caso de que el usuario no tenga su primera opción de tipo
de letra instalada). Esto a veces se denominapila de fuentes.

269 TEXTO
monoSpace cursivo fantasía

Cada letra de un tipo de letra Las fuentes cursivas tienen Las fuentes de fantasía suelen ser
monoespacio tiene el mismo ancho. trazos de unión u otras fuentes decorativas y se utilizan a
(Las fuentes no monoespaciadas características cursivas, como menudo para títulos. No están
tienen diferentes anchos). estilos de escritura a mano. diseñados para textos extensos.

EJEMPLOS: EJEMPLOS: EJEMPLOS:

mensajero Comic Sans MS Impacto

Courier Nuevo Monotipo Corsiva Haettenschweiler

Se supone que los navegadores admiten al menos un tipo de letra de cada uno de los
grupos anteriores. Por esta razón, es común agregar el nombre de la fuente genérica
después de su elección de tipografía preferida.

Por ejemplo, si quisiera el tipo serif, podría escribir lo siguiente:

familia de fuentes: Georgia, Times, serif;

TEXTO 270
 TÉCNICAS QUE OFRECEMOS
una selección más amplia
de tipos de letra

Hay varias formas de utilizar fuentes distintas de las enumeradas en la página anterior.
Sin embargo, los tipos de letra están sujetos a derechos de autor, por lo que las
técnicas que puede elegir están limitadas por sus respectivas licencias.

Familia tipográfica Perfil delantero BASADO EN SERVICIO

Perfil delantero

La computadora del usuario necesita el tipo CSS especifica de dónde se puede Los servicios comerciales brindan a los

de letra instalado. CSS se utiliza para descargar una fuente si no está usuarios acceso a una gama más amplia de

especificar el tipo de letra. instalada en la computadora. fuentes utilizando @Perfil delantero.

cubierto en
Páginas 273-274 Páginas 277-278 Páginas 277-278

cuestiones

Hay una selección limitada de tipos de letra El usuario debe descargar el archivo Existe una tarifa continua para cubrir las

que la mayoría de los usuarios han instalado. de fuente, lo que puede ralentizar la licencias pagadas a las fundiciones de fuentes.

carga de la página web.

Licencia
No está distribuyendo el tipo de letra, La licencia para utilizar la fuente debe El servicio se ocupa de los
por lo que no hay problemas de licencia. permitir su distribución mediante problemas de licencia con las
@Perfil delantero. personas que hicieron la fuente.

elección de tipografías
Hay una opción limitada porque la La elección es limitada porque pocos Cada servicio ofrece una selección
fuente debe instalarse en las tipos de letra se pueden distribuir diferente de fuentes en función de sus
computadoras de los usuarios. libremente de esta manera. acuerdos con las fundiciones de fuentes.

ADECUADO PARA CUALQUIER LONGITUD DE T ext

271 TEXTO
Si diseña en una Mac, es importante comprobar cómo se ven los tipos de letra en una PC, ya
que las PC pueden procesar el tipo de letra con menos fluidez. Pero si tu diseñas
en una PC, entonces debería verse bien en una Mac.

IMÁGENES Sifr cufon

Puede crear un gráfico que contenga La fuente está incrustada en una Cufon ofrece una funcionalidad
el texto como desea que aparezca en película Flash y JavaScript reemplaza el similar a sIFR. Utiliza JavaScript
un tipo de letra diferente. texto HTML especificado con una para crear una versión SVG o VML
versión flash del mismo. del texto.

cubierto en
Páginas 99-100 y 109-113 Véase el sitio web para más detalles Véase el sitio web para más detalles

cuestiones

Las personas que usan lectores de Este método solo funciona si el Requiere que JavaScript esté habilitado.

pantalla confiarán en el alt texto para usuario tiene Flash y JavaScript Además, los usuarios no pueden seleccionar

saber lo que se dice. habilitados en su dispositivo. texto y el texto no puede cambiar cuando un

usuario pasa el mouse sobre él.

Licencia
Puede usar cualquier tipo de letra Muchos fabricantes comerciales de Al igual que con sIFR, algunos

que tenga una licencia para usar en tipos de letra permiten esta técnica, fabricantes de tipos de letra permiten el

su computadora (porque no está aunque es posible que deba pagar uso de sus fuentes con CUFON, pero es

distribuyendo el tipo de letra). una licencia de uso web adicional. necesario verificar la licencia.

elección de tipografías
Elección muy amplia porque puede Este método ofrece muchas Un poco menos de opciones que para sIFR, ya

utilizar cualquier tipo de letra para el opciones porque muchos de los que algunos fabricantes de tipos de letra no

que tenga una licencia. principales fabricantes de tipos de están tan interesados en esto.

letra permiten este tipo de uso. técnica.

no apto para pasajes largos de texto

TEXTO 272
 Especificación de tipografías
Familia tipográfica

El Familia tipográfica La propiedad le

capítulo-12 / font-family.html htMl + css
permite especificar el tipo de letra que
se debe usar para cualquier texto <! DOCTYPE html>
dentro de los elementos a los que se <html>
aplica una regla CSS. <cabeza>

<título>Familia tipográfica</
El valor de esta propiedad es el título> <style type = "text / css">
nombre del tipo de letra que desea cuerpo {
utilizar. familia de fuentes: Georgia, Times, serif;} h1,
h2 {
Las personas que visitan su sitio familia de fuentes: Arial, Verdana, sans-serif;}
necesitan el tipo de letra que ha . creditos {
especificado instalado en su familia de fuentes: "Courier New", Courier,
computadora para que se monoespacio;}
muestre. </style>
</head>
Puede especificar una lista de <cuerpo>
fuentes separadas por comas para <h1>Briards</h1> <p class = "créditos">por Ivy
que, si el usuario no tiene su primera Duckett</p> <p class = "intro">El <una clase =
opción de tipografía instalada, el "raza"
navegador puede intentar usar una href = "http://en.wikipedia.org/wiki/ Briard">briard</
fuente alternativa de la lista. a>, o berger de brie, es
una gran raza de perro tradicionalmente utilizada como
También es común terminar con un pastor y guardián de ovejas ...</p> </body>
nombre de fuente genérico para ese
tipo de fuente (que vio en las páginas </html>
269-270).

Si el nombre de una fuente se compone de

resultado
más de una palabra, debe escribirse entre
comillas dobles.

Los diseñadores sugieren que las páginas

generalmente se ven mejor si no usan más
de tres tipos de letra en una página.

Usaremos una versión extendida

del HTML que se muestra en esta
página para todos los ejemplos de
este capítulo.

273 TEXTO
 Talla oafrTTiy
cplemi
tamaño de fuente

El tamaño de fuente La propiedad le

css capítulo-12 / font-size.html
permite especificar un tamaño para la
cuerpo { fuente. Hay varias formas de especificar
familia de fuentes: Arial, Verdana, sans-serif; el tamaño de una fuente. Los más
tamaño de fuente: 12px;} comunes son:
h1 {
tamaño de fuente: 200%;} píxeles
h2 { Los píxeles se utilizan comúnmente
tamaño de fuente: 1.3em;} porque permiten a los diseñadores web
un control muy preciso sobre la
cantidad de espacio que ocupa su texto.
El número de píxeles va seguido de las
resultado
letras.px.

PORCENTAJES
El tamaño predeterminado del texto en
los navegadores es 16px. Entonces, un
tamaño del 75% sería el equivalente a 12
px, y el 200% sería de 32 px.

Si crea una regla para hacer que todo el

texto dentro del <cuerpo> elemento para
tener el 75% del tamaño predeterminado
(para que sea 12px), y luego especifique
otra regla que indique el contenido de un
elemento dentro del

<cuerpo> El elemento debe tener un tamaño

del 75%, será de 9 px (75% del tamaño de

fuente de 12 px).

emS
Una em equivale al ancho de
una letra m.

Veremos estas medidas con

mayor detalle en la página
siguiente.

TE XT 274
 Tipo ScaleS

Es posible que haya notado que programas como

Word, Photoshop e InDesign ofrecen lo mismo
tamaños de texto.

8pt
Esto se debe a que se establecen de El tamaño predeterminado del texto en

acuerdo con una escala o proporción un navegador es de 16 píxeles. Entonces,

9pt
que fue desarrollada por tipógrafos si usa porcentajes o ems, calcula el 10pt
europeos en el siglo XVI. tamaño del texto que desea en función 11pt
del tamaño predeterminado del texto
utilizado en los navegadores. Por
12pt
Se considera que esta escala de ejemplo, puede reducir la escala a 12 14pt
18pt
tipos es agradable a la vista y, píxeles para el texto del cuerpo y

por lo tanto, ha cambiado poco aumentar la escala a 24 píxeles para los

24pt
en los últimos 400 años. encabezados.

36pt
Por esta razón, cuando diseñe Recientemente, algunos diseñadores web

páginas, usar tamaños de esta han comenzado a dejar el cuerpo del

48pt
escala ayudará a que se vean texto en el tamaño predeterminado de 16

más atractivas. píxeles y ajustar los otros tamaños de

fuente usando una escala que mantiene

En la página siguiente, puede ver las proporciones relativas de este.

60pt
cómo lograr esta escala utilizando
píxeles, porcentajes y ems.
Cuando vea por primera vez el texto del

Los diseñadores de impresión a menudo se cuerpo a 16 píxeles, puede parecer bastante

72pt
refieren al tamaño del texto en términos de grande. Sin embargo, una vez que se

puntos en lugar de píxeles (de ahí el uso de acostumbre a la letra más grande, a la

pt en la escala de la derecha). Un píxel mayoría de las personas les resultará mucho

equivale aproximadamente a un punto más fácil de leer; y volver a una página donde

porque un punto el tipo principal es de 12 píxeles a menudo se

corresponde a 1/72 de pulgada y la verá bastante pequeño.

mayoría de las pantallas de computadora

tienen una resolución de 72 puntos por
pulgada.

275 TEXTO
 UNIDADES DE TAMAÑO DE TIPO

píxeles porcentajes emS

tWelve escala de píxeles

h1 1.5em
h1 24px h1 200%
h2 1.3em
h2 18px h2 150%
h3 14px
= h3 117%
= h3 1,17em
cuerpo 100%
cuerpo 12px cuerpo 75%
pag 0.75em

Escala de dieciséis píxeles

h1 2em
h1 32px h1 200%
h2 1.5em
h2 24px h2 150%
h3 18px
= h3 133%
= h3 1.125em
cuerpo 100%
cuerpo 16px cuerpo 100%
pag 1em

Establecer el tamaño de fuente en píxeles El tamaño predeterminado del texto en un Ems le permite cambiar el tamaño del texto

es la mejor manera de asegurarse de que navegador web es de 16 píxeles. Con los en relación con el tamaño del texto en el

el tipo aparezca en el tamaño deseado porcentajes de esta cantidad, puede crear una elemento principal. Dado que el tamaño

(porque es más probable que los escala en la que el tamaño de texto predeterminado del texto en los

porcentajes y ems varíen si un usuario ha predeterminado sea de 12 píxeles y el tamaño navegadores web es de 16 píxeles, puede

cambiado el tamaño predeterminado del de los encabezados se corresponda con este. usar reglas similares a las que se muestran

texto en su navegador). para los porcentajes.

Los píxeles son relativos a la resolución de Los usuarios pueden cambiar el Debido a que los usuarios pueden cambiar el

la pantalla, por lo que el mismo tamaño de tamaño predeterminado del texto en tamaño predeterminado del texto en su

letra se verá más grande cuando una sus navegadores web. Si lo han navegador, las fuentes pueden parecer más

pantalla tiene una resolución de 800x600 hecho, las fuentes se mostrarán a la grandes (o más pequeñas) de lo que

que cuando tiene una resolución de misma escala que el diseñador pretendía el diseñador.

1280x800. pretendía, pero a un tamaño mayor.

El extra pag La regla anterior es para

También puedes usar pt para tamaños ayudar a Internet Explorer 6 y 7 a mostrar

de puntos en lugar de px para píxeles, las fuentes en el tamaño correcto.

pero solo debe hacer esto cuando cree Sin esta regla adicional, IE6 e IE7
hojas de estilo para versiones de exageran los tamaños relativos de
páginas aptas para imprimir. otros textos.

TEXTO 276
 más opciones de fuentes
@Perfil delantero

@Perfil delantero le permite utilizar

capítulo-12 / font-face.html css
una fuente, incluso si no está
instalada en la computadora de la @Perfil delantero {
persona que navega, al permitirle familia de fuentes: 'ChunkFiveRegular';
especificar una ruta a una copia de la src: url ('fuentes / chunkfive.eot');} h1, h2 {
fuente, que se descargará si no está
en la máquina del usuario. familia de fuentes: ChunkFiveRegular, Georgia, serif;}

Debido a que esta técnica permite

descargar una versión de la fuente a
resultado
la computadora del usuario, es
importante que la licencia de la
fuente permita que se use de esta
manera.

Agrega la fuente a su hoja de

estilo usando la @Perfil delantero
regla, como se muestra a la derecha.

Familia tipográfica
Esto especifica el nombre de la fuente.
Este nombre se puede utilizar como un
valor de laFamilia tipográfica
propiedad en el resto de la hoja de
estilo (como se muestra en la regla Muchos fabricantes de tipos de letra no le Hay algunos sitios que le dan acceso
para el <h1> y <h2> elementos). permiten usar sus fuentes de esta para usar fuentes comerciales,
manera, pero hay fuentes de código porque negociaron el permiso para

src abierto que puede usar libremente.

Puede encontrar listas de ellos en:
permitir que sus clientes usen estas
fuentes por una tarifa:
Esto especifica la ruta a la fuente. Para
que esta técnica funcione en todos los
www.fontsquirrel.com www.typekit.com
navegadores, probablemente
www.fontex.org www.kernest.com
necesitará especificar rutas a algunas
www.openfontlibrary.org www.fontspring.com
versiones diferentes de la fuente, como
se muestra en la página siguiente.
Al buscar fuentes en estos sitios, es Google también proporciona fuentes de
importante verificar el acuerdo de código abierto. En lugar de agregar la @

formato licencia de la fuente porque algunas Perfil delantero regla a su propia hoja de

Esto especifica el formato en el que fuentes solo son gratuitas para uso estilo, enlaza a un archivo CSS y archivos de

se suministra la fuente (se analiza en personal (es decir, no para uso en fuentes en sus servidores:

detalle en la página siguiente). sitios web comerciales). www.google.com/webfonts

277 TEXTO
 bajoSTa Arkansas inlg
nTdic mi
FORMATOS DE FUENTE

Los diferentes navegadores admiten

css capítulo-12 / comprensión-de-fuentes-formatos.html
diferentes formatos de fuentes (de la
@Perfil delantero { misma manera que admiten diferentes
familia de fuentes: 'ChunkFiveRegular'; formatos de audio y video), por lo que
src: url ('fuentes / chunkfive.eot'); deberá proporcionar la fuente en
src: url ('fuentes / chunkfive.eot? #iefix') varias variaciones para llegar a todos
formato ('embedded-opentype'), url ('fonts / los navegadores.
chunkfive.woff') formato ('woff'), url ('fonts /
chunkfive.ttf') Si no tiene todos estos formatos
formato ('truetype'), para su fuente, puede subir la
url ('fuentes / chunkfive.svg # ChunkFiveRegular') fuente a un sitio web llamado
formato ('svg');} FontSquirrel donde la
convertirán por usted:

navegador formato www.fontsquirrel.com/

fontface / generador
eot woff ttf / otf svg

Chrome (todos) Font Squirrel también le

proporciona el código CSS para el
Chrome 6+
@Perfil delantero regla. Esto
Firefox 3.5 es muy útil porque, cuando
se trata de varios formatos
Firefox 3.6 o superior
de fuente, lasrc y formato
IE 5-8 propiedades de la @Perfil delantero
La regla puede volverse bastante complicada.
IE 9+

Opera 10+ Puedes ver un ejemplo de un @

más complicadoPerfil delantero
Safari 3.1+
gobernar a la izquierda.

iOS <4.2
Los distintos formatos de fuente deberían
iOS 4.2+
aparecer en su código en este orden:

Debido a que el navegador necesita minimizar este comportamiento es

1: eot
descargar el archivo de fuente para eliminar los glifos innecesarios de la
mostrarlo, los usuarios pueden ver fuente y / o alojar la fuente en una red 2: woff
algo conocido como Flash of Unstyled de entrega de contenido (un tipo
3: ttf / otf
Content (FOUC) o Flash of Unstyled especial de alojamiento web que ofrece
Text (FOUT). Dos cosas que puedes una entrega más rápida de archivos). 4: svg
hacer para intentar

TE XT 278
 audaz
peso de la fuente

El peso de la fuente La propiedad

capítulo-12 / font-weight.html css
le permite crear texto en negrita.
Hay dos valores que esta . creditos {
propiedad toma comúnmente: font-weight: bold;}

normal
Esto hace que el texto aparezca con resultado
un peso normal.

audaz
Esto hace que el texto aparezca en negrita.

En este ejemplo, puede ver

que el elemento cuyo clase
atributo tiene un valor de creditos
ha sido en negrita.

Quizás se pregunte por qué hay un

peso normal. Esto se debe a que si, por
ejemplo, creó una regla para el <cuerpo>
elemento que indica que todo el texto
dentro del cuerpo debe aparecer en
negrita, es posible que necesite una
opción que permita que el texto en
ciertos casos tenga un peso normal. Por
lo tanto, se usa esencialmente como un
"interruptor de apagado".

279 TEXTO
 ARITicílico
mi Ejército de reserva

Estilo de fuente

Si desea crear texto en cursiva,

css capítulo-12 / font-style.html
puede utilizar el Estilo de fuente
. creditos { propiedad. Hay tres valores que puede
estilo de fuente: cursiva;} tomar esta propiedad:

normal
resultado Esto hace que el texto aparezca en un
estilo normal (en lugar de cursiva u
oblicua).

itálico
Esto hace que el texto aparezca en cursiva.

oblicuo
Esto hace que el texto aparezca
oblicuo.

En este ejemplo, puede ver que

los créditos están en cursiva.

Las fuentes en cursiva eran versiones

tradicionalmente estilizadas de la fuente
basadas en la caligrafía, mientras que
una versión oblicua tomaría la versión
normal y la colocaría en ángulo.

No es inusual que el navegador no

encuentre una versión en cursiva de un tipo
de letra, en cuyo caso utilizará un algoritmo
para colocar la versión normal del tipo en
una inclinación, lo que significa que una
gran cantidad de texto en cursiva en línea
es en realidad oblicua. .

TE XT 280
 mayúscula y
minúsculas
transformación de texto
El transformación de texto La propiedad
capítulo-12 / text-transform.html css
se usa para cambiar el caso del texto
dándole uno de los siguientes valores: h1 {
text-transform: mayúsculas;} h2 {

transformación de texto: minúsculas;}

mayúsculas . creditos {
Esto hace que el texto aparezca en
text-transform: capitalize;}
mayúsculas.

minúscula
resultado
Esto hace que el texto aparezca en
minúsculas.

capitalizar
Esto hace que la primera letra de cada
palabra aparezca en mayúscula.

En este ejemplo, el <h1>

El elemento está en mayúsculas, el <h2>

El elemento está en minúsculas y los

créditos en mayúscula. En el HTML, la
palabrapor en los créditos tenia
minúsculas B.

Si utiliza la opción de mayúsculas,

vale la pena mirar la espaciado de
letras propiedad para aumentar el
espacio entre cada letra como se
muestra en la página
284. Esto ayudará a mejorar la
legibilidad.

281 TEXTO
 subrayado y aS rTTricik
lemi
decoración de texto

El decoración de texto propiedad

css capítulo-12 / text-decoration.html
le permite especificar el
. creditos { siguientes valores:
decoración de texto: subrayado;} a {

ninguno
decoración de texto: ninguna;}
Esto elimina cualquier
decoración ya aplicada al texto.

subrayar
Esto agrega una línea debajo del
resultado
texto.

overline
Esto agrega una línea sobre la parte

superior del texto.

line-through
Esto agrega una línea a través de las palabras.

parpadear
Esto anima el texto para que se
encienda y apague (sin embargo,
esto generalmente está mal visto, ya
que se considera bastante molesto).

En este ejemplo, los créditos se han

subrayado. Además, el nombre de la
raza (que es un enlace) no está
subrayado, que sería por defecto
porque es un enlace.

Los diseñadores suelen utilizar esta propiedad

para eliminar los subrayados que los

navegadores colocan debajo de los enlaces. Las

páginas 290 a 291 muestran cómo agregar o

eliminar un subrayado cuando un usuario pasa

el mouse sobre un enlace.

TE XT 282
 principal
altura de la línea

Leading (pronunciado ledding) es un

Chapter-12 / line-height.html css
término que los tipógrafos usan para
el espacio vertical entre líneas de texto. pag {

En un tipo de letra, la parte de una altura de línea: 1.4em;}

letra que cae por debajo de la línea de
base se llamadescendiente
mientras que el punto más alto de una
resultado
letra se llama ascendente. El adelanto
se mide desde la parte inferior del
descendente en una línea hasta la parte
superior del ascendente en la siguiente.

Hola
Hola
principal
tamaño de fuente altura de la línea

En CSS, el altura de la línea

La propiedad establece la altura de
una línea completa de texto, por lo
resultado menos css
que la diferencia entre tamaño de
fuente y el altura de la línea es
equivalente al líder (como se
muestra en el diagrama anterior).

Aumentando el altura de la línea

aumenta el espacio vertical entre
las líneas de texto.

Aumentar la cantidad predeterminada ayuda a que el ojo se mueva a lo largo de la navegador, el valor de la altura de la línea

de interlineado puede facilitar la lectura línea en lugar de hacia abajo. Un buen La propiedad se da mejor en ems, no en

del texto. El espacio vertical entre líneas ajuste inicial es alrededor de 1,4 a píxeles, de modo que el espacio entre las

debe ser mayor que el espacio entre 1.5em. Dado que los usuarios pueden ajustar líneas sea relativo al tamaño del texto que
cada palabra, ya que este el tamaño predeterminado del texto en su el usuario ha seleccionado.

283 TEXTO
 LETRA Y PALABRA SÁPTICAinlg
mi
espaciado entre letras, espaciado entre palabras

Interletrado es el término que los

css Chapter-12 / letter-and-word-spacing.html
tipógrafos usan para el espacio
h1, h2 { entre cada letra. Puede controlar el
transformación de texto: mayúsculas; espacio entre cada letra con el
espaciado entre letras: 0.2em;} espaciado de letras
. creditos { propiedad.
font-weight: negrita;
espaciado entre palabras: 1em;} Es particularmente útil aumentar
el kerning cuando el encabezado
o la oración están todos en
mayúsculas. Si su texto está en
resultado
mayúsculas y minúsculas (o
normal), aumentar o disminuir el
kerning puede dificultar la lectura.

También puede controlar el

espacio entre palabras usando el
espaciado entre palabras propiedad.

Cuando especifique un valor para

estas propiedades, se debe dar en
ems y se agregará sobre el valor
predeterminado especificado por
la fuente.
resultado menos css
El espacio predeterminado entre
palabras lo establece el tipo de letra (a
menudo alrededor de 0.25em), y es
poco probable que necesite cambiar
esta propiedad con regularidad. Si el
tipo de letra está en negrita o si ha
aumentado el espacio entre las letras,
un espacio mayor entre las palabras
puede aumentar la legibilidad.

TE XT 284
 alineación
texto alineado

El texto alineado La propiedad le

capítulo-12 / text-align.html css
permite controlar la alineación del texto.
La propiedad puede tomar uno de h1 {
cuatro valores: alineación de texto: izquierda;}

pag {

alinear texto: justificar;}

izquierda
. creditos {
Esto indica que el texto debe
alineación de texto: derecha;}
estar alineado a la izquierda.

derecho
resultado
Esto indica que el texto debe
estar alineado a la derecha.

centrar
Esto le permite centrar el texto.

justificar
Esto indica que cada línea de un
párrafo, excepto la última línea,
debe configurarse para ocupar todo
el ancho del cuadro contenedor.

Cuando tiene varios párrafos de

texto, se considera más fácil de leer
si el texto está alineado a la
izquierda.

El texto justificado examina las

palabras de cada línea individual y
crea un espacio igual entre esas
palabras. Puede parecer extraño si
termina con grandes espacios entre
algunas palabras y más pequeños
entre otras. Esto sucede a menudo
cuando sus líneas no son muy
anchas o cuando su texto contiene
palabras largas.

285 TEXTO
 alineación verticalun
rm cnleT
Corbata

alineación vertical

El alineación vertical la propiedad es

css capítulo-12 / vertical-align.html
una fuente común de confusión. Es
# seis meses { no destinado a permitirle alinear
vertical-align: text-top;} texto verticalmente en medio de
# un año { elementos de nivel de bloque, como
alineación vertical: línea de base;} <p> y <div>, aunque tiene este
# dos años { efecto cuando se usa con
vertical-align: text-bottom;} celdas de tabla (el <td> y <th>
elementos).

Se usa más comúnmente con

resultado
elementos en línea como <img>,
<em>, o <fuerte> elementos.
Cuando se usa con estos
elementos, realiza una tarea muy
similar al HTMLalinear atributo
utilizado en el <img> elemento, que
conoció en las páginas 103-106.
Los valores que puede tomar son:

base
sub
súper
cima
parte superior del texto

medio
fondo
fondo de texto

También puede tomar un largo (normalmente

especificado en píxeles o ems) o un

porcentaje de la altura de la línea.

TE XT 286
 indentificación de texto
guion de texto

El guion de texto La propiedad le

capítulo-12 / text-indent.html css
permite sangrar la primera línea de
texto dentro de un elemento. La h1 {
cantidad por la que desea que la línea background-image: url ("images / logo.gif");
tenga sangría se puede especificar de repetición de fondo: no repetición;
varias maneras, pero generalmente se sangría de texto: -9999px;}
da en píxeles o ems. . creditos {
sangría de texto: 20px;}
Puede tomar un valor negativo, lo que
significa que se puede usar para
eliminar texto de la ventana del
resultado
navegador. Puede ver esta técnica
utilizada en este ejemplo, donde el <
h1> El elemento utiliza una imagen de

fondo para representar el encabezado.

El texto se ha movido hacia la
izquierda, fuera de la pantalla. (Las
imágenes de fondo se tratan en las
páginas 413-418).

Aún queremos que el texto del

encabezado esté en la página (para los
motores de búsqueda y aquellos que
no pueden ver la imagen), pero no
podemos mostrarlo en la parte
superior del logotipo o será ilegible. Al
empujarlo 9,999 píxeles hacia la
izquierda, está fuera de la vista pero
aún en el código HTML.

La segunda regla de este ejemplo

sangra los créditos 20 píxeles a la
derecha.

287 TEXTO
 cSS3: soltar Sa hora olW
aTdic mi
sombra de texto

El sombra de texto La propiedad se ha

css capítulo-12 / text-shadow.html
vuelto de uso común a pesar de no ser
p.one { compatible con todos los navegadores.
color de fondo: #eeeeee; color: #
666666; Se utiliza para crear una sombra paralela,

sombra de texto: 1px 1px 0px # 000000;} que es una versión oscura de la palabra que

p.two { se encuentra justo detrás y ligeramente

color de fondo: #dddddd; color: # compensada. También se puede utilizar

666666; para crear un efecto de relieve añadiendo

sombra de texto: 1px 1px 3px # 666666;} una sombra ligeramente más clara que el

p.three { texto.

color de fondo: #cccccc; color:

#ffffff; El valor de esta propiedad es
sombra de texto: 2px 2px 7px # 111111;} bastante complicado porque puede
p. cuatro { tomar tres longitudes y un color para
color de fondo: #bbbbbb; color: la sombra paralela.
#cccccc;
sombra de texto: -1px -2px # 666666;} La primera longitud indica qué tan lejos hacia la

p. cinco { izquierda o hacia la derecha debe caer la

color de fondo: #aaaaaa; color: sombra.

#ffffff;
sombra de texto: -1px -1px # 666666;} El segundo valor indica la distancia
a la parte superior o inferior a la
que debe caer la sombra.

resultado
El tercer valor es opcional y
especifica la cantidad de desenfoque
que se debe aplicar a la sombra
paralela.

El cuarto valor es el color de la

sombra paralela.

El sombra de texto La propiedad se ha

vuelto muy popular, pero en el momento

de escribir este artículo no era compatible

con ninguna versión de Internet Explorer

(actualmente IE9). Otros fabricantes de

navegadores lo introdujeron en Firefox 3.1,

Safari
3, Chrome 2 y Opera 9.5.

TE XT 288
 PRIMERA LETRA O LÍNEA
: primera letra,: primera línea

Puede especificar diferentes valores para

capítulo-12 / primera-letra-y-línea.html css
la primera letra o la primera línea de texto
dentro de un elemento usando p.intro: first-letter {
:primera letra y tamaño de fuente: 200%;}

:primera linea. p.intro: first-line {

font-weight: bold;}
Técnicamente, estas no son
propiedades. Son conocidos como
pseudo-elementos.
resultado

Usted especifica el pseudo-elemento

al final del selector y luego especifica
las declaraciones como lo haría
normalmente para cualquier otro
elemento.

Vale la pena probar este ejemplo en su

navegador para que pueda ver cómo
primera linea El pseudoelemento solo
afectará a la primera línea de texto,
incluso si cambia el tamaño de la
ventana del navegador y aparecen
menos o más palabras en cada línea.
CSS introduce tanto pseudoelementos Una pseudoclase actúa como un
como pseudoclases. Un pseudo- valor extra para un clase
elemento actúa como si hubiera un atributo. En el caso de:visitó
elemento adicional en el código. En el pseudo-clase, que encontrará en la
caso de:primera letra página siguiente, le permite tener
y :primera linea pseudo elementos, es diferentes estilos para los enlaces que
como si hubiera un elemento extra se han visitado. Del mismo modo, el:
alrededor de la primera letra o la flotar La pseudoclase le permite diseñar

primera línea que puede tener sus elementos de manera diferente cuando
propios estilos aplicados. un usuario pasa el mouse sobre ellos.

289 TEXTO
 STylinagrl Tiin
ckleS
: enlace,: visitado

Los navegadores tienden a mostrar los

css capítulo-12 / enlace-visitado.html
enlaces en azul con un subrayado de

un enlace { forma predeterminada, y cambiarán el

color: deepink; color de los enlaces que se han visitado

text-decoration: none;} a: para ayudar a los usuarios a saber en qué

visitado { páginas han estado.

de color negro;}
a: hover { En CSS, hay dos pseudoclases que
color: deepink; le permiten establecer diferentes
decoración de texto: subrayado;} a: estilos para los enlaces que se han
activo { visitado y que todavía no se han
color: cian oscuro;} visitado.

:Enlace
resultado Esto le permite establecer estilos
para enlaces que aún no se han
visitado.

:visitó
Esto le permite establecer estilos para los
enlaces en los que se ha hecho clic.

Se utilizan comúnmente para

controlar los colores de los
enlaces y también si deben
aparecer subrayados o no.

A la izquierda, puede ver que los

enlaces visitados se muestran en un
color diferente para ayudar a los
visitantes a saber lo que ya han
visto.

A menudo, el:flotar y :activo

Las pseudoclases (que se tratan en la página

siguiente) se utilizan para alterar la apariencia

de un enlace cuando un usuario pasa el mouse

sobre él o hace clic en él.

TE XT 290
 RESPONDIENDO A LOS USUARIOS
: hover,: active,: focus

Hay tres pseudoclases que le

capítulo-12 / hover-active-focus.html css
permiten cambiar la apariencia
de los elementos cuando un aporte {
usuario interactúa con ellos. relleno: 6px 12px 6px 12px; borde:
1px sólido # 665544; color: #ffffff;}

:flotar input.submit: hover {

Esto se aplica cuando un usuario se
color de fondo: # 665544;}
desplaza sobre un elemento con un
input.submit: active {
dispositivo señalador, como un mouse.
color de fondo: chocolate;} input.text
Esto se ha utilizado comúnmente para
{
cambiar la apariencia de enlaces y
color: #cccccc;}
botones cuando un usuario coloca el
input.text: foco {
cursor sobre ellos. Vale la pena señalar
color: # 665544;}
que estos eventos no funcionan en
dispositivos que usan pantallas táctiles
(como el iPad) porque la pantalla no
puede saber cuándo alguien pasa el resultado
dedo sobre un elemento.

:activo
Esto se aplica cuando un usuario está
activando un elemento; por ejemplo,
cuando se presiona un botón o se hace
clic en un enlace. A veces, esto se usa
para hacer que un botón o enlace se
sienta más como si estuviera siendo
presionado cambiando ligeramente el
estilo o la posición del elemento.

El foco se produce cuando un navegador Es posible utilizar la tecla de

:atención descubre que está listo para interactuar tabulación del teclado para
Esto se aplica cuando un elemento tiene el con un elemento de la página. Por desplazarse por los elementos
foco. Cualquier elemento con el que pueda ejemplo, cuando el cursor está en una interactivos de una página. Cuando
interactuar, como un enlace en el que pueda entrada de formulario lista para aceptar se utilizan pseudoclases, deben
hacer clic o cualquier control de formulario, la escritura, se dice que ese elemento aparecer en este orden:link,:
puede tener el foco. tiene el foco. Tambien es visitado,: hover,: focus,: active.

291 TEXTO
 SELECTORES DE TRIBUTO

Conoció los selectores de CSS más populares en la página 238. También hay un
conjunto de selectores de atributos que le permiten crear reglas que se aplican a
los elementos que tienen un atributo con un valor específico.

Selector sentido ejemplo

existencia [] p [clase]
Coincide con un atributo Se dirige a cualquier <p> elemento con
específico (sea cual sea su valor) un atributo llamado clase

igualdad [=] p [class = "perro"]

Coincide con un atributo específico con Se dirige a cualquier <p> elemento con
un valor específico un atributo llamado clase cuyo valor es
perro

Espacio [~ =] p [clase ~ = "perro"]

Coincide con un atributo específico cuyo Se dirige a cualquier <p> elemento con un

valor aparece en una lista de palabras atributo llamado clase cuyo valor es una

separada por espacios lista de palabras separadas por espacios,

una de las cuales es perro

prefijo [̂ =] p [attr ^ "d"]

Coincide con un atributo Se dirige a cualquier <p> elemento
específico cuyo valor comienza con un atributo cuyo valor comienza
con una cadena específica con la letra "d"

SubSTring [* =] p [attr * "hacer"]

Coincide con un atributo específico Se dirige a cualquier <p> elemento
cuyo valor contiene una subcadena con un atributo cuyo valor contiene
específica las letras "hacer"

Sufijo [$ =] p [attr $ "g"]

Coincide con un atributo específico cuyo Se dirige a cualquier <p> elemento
valor termina con una cadena específica con un atributo cuyo valor termina
con la letra "g"

TEXTO 292
293 TEXTO
 ejemplo
Texto

Este ejemplo combina muchas de las técnicas que se

muestran en este capítulo.

Los tamaños de las fuentes se controlan mediante el tamaño de fuente propiedad.

Los títulos se cambian de negrita a normal usando elpeso de la fuente
propiedad. También hemos especificado diferentes opciones de fuente usando el
Familia tipográfica propiedad.

El <h1> elemento usa CSS3 sombra de texto propiedad para crear la sombra
paralela detrás de él. El <h2> El elemento se convierte a mayúsculas usando la
transformación de texto propiedad, y para que el texto en mayúsculas sea más
fácil de leer, hemos aumentado el espacio entre cada letra usando el espaciado
de letras propiedad.

Para el texto del cuerpo principal, hemos aumentado la altura de la línea

propiedad, por lo que hay un espacio mayor entre cada línea de texto, lo que
facilita la lectura. En el primer párrafo, elprimera linea pseudo-elemento nos
permite diseñar la primera línea de la introducción en negrita. Finalmente, el
crédito está en cursiva y alineado al lado derecho de la página.

TEXTO 294
 ejemplo
Texto

<! DOCTYPE html>

<html>
<cabeza>

<título>Texto</título> <style
type = "text / css">
cuerpo {
relleno: 20px;}
h1, h2, h3, a {
font-weight: normal;
color: # 0088dd;
margen: 0px;}
h1 {
familia de fuentes: Georgia, Times, serif;
tamaño de fuente: 250%;
sombra de texto: 2px 2px 3px # 666666;
padding-bottom: 10px;}
h2 {
familia de fuentes: "Gill Sans", Arial, sans-serif; tamaño
de fuente: 90%;
transformación de texto: mayúsculas;
espaciado entre letras: 0.2em;} h3 {

tamaño de fuente: 150%;}

pag {

familia de fuentes: Arial, Verdana, sans-serif;

altura de línea: 1.4em;
color: # 665544;}
p.intro: first-line {
font-weight: bold;}
. creditos {
estilo de fuente: cursiva;
alineación de texto: derecha;}

a{
decoración de texto: ninguna;}
a: hover {
decoración de texto: subrayado;}
</style>
</head>

295 TEXTO
 ejemplo
Texto

<cuerpo>

<h1>Briards</h1> <h2>Un corazón envuelto en piel</h2> <p class = "intro">El <una clase = "raza" href =
"http://en.wikipedia.org/wikiBriard">

briard</a>, o berger de brie, es una gran raza de perro tradicionalmente utilizada como pastor y guardián
de ovejas.</p> <h3>Historia de la raza</h3> <p>El briard, que se cree que se originó en Francia, ha sido
criado para

siglos para pastorear y proteger ovejas. La raza fue utilizada por el ejército francés como centinelas,
mensajeros y para buscar soldados heridos debido a su fino sentido.
de oír. Las zarzas se utilizaron en la Primera Guerra Mundial casi hasta el punto de la extinción.
Actualmente, la población de brezos se está recuperando lentamente. Carlomagno, Napoleón, Thomas
Jefferson y Lafayette eran dueños de briards.</p> <p class = "créditos">por Ivy Duckett</p> </body>

</html>

TEXTO 296
 Resumen
Texto

X Hay propiedades para controlar la elección de fuente,

tamaño, peso, estilo y espaciado.

X Hay una selección limitada de fuentes que puede suponer que la

mayoría de la gente habrá instalado.

X Si desea utilizar una gama más amplia de tipos de letra, existen

varias opciones, pero debe tener la licencia adecuada para
utilizarlas.

X Puede controlar el espacio entre líneas de texto, letras individuales y

palabras. El texto también se puede alinear a la izquierda, a la
derecha, al centro o justificado. También se puede sangrar.

X Puede utilizar pseudoclases para cambiar el estilo de un elemento

cuando un usuario pasa el cursor sobre el texto o hace clic en él, o
cuando ha visitado un enlace.
 13
Cajas

X Controlar el tamaño de las cajas

X Modelo de caja para bordes, margen y relleno.
X Mostrar y ocultar cajas
 Al comienzo de esta sección sobre CSS,
vio cómo CSS trata cada elemento HTML
como si viviera en su propia caja.

Puede establecer varias propiedades que afecten a la

apariencia de estos cuadros. En este capítulo verá cómo:

● Controla las dimensiones de tus cajas

● Crea bordes alrededor de las cajas

● Establecer márgenes y relleno para cajas

● Mostrar y ocultar cajas

Una vez que haya aprendido a controlar la apariencia de cada cuadro,

verá cómo colocar estos cuadros en sus páginas en el Capítulo 15
cuando analicemos el diseño de la página.

301 CAJAS
CAJAS 302
 BortxicDlim
A eensiones
ancho, alto

Por defecto, una caja tiene el tamaño

capítulo-13 / ancho-alto.html HtMl
suficiente para contener su contenido.

Para establecer sus propias dimensiones <div>

para una caja, puede usar elaltura y <p>La empresa Moog fue pionera en el comercio
ancho propiedades. fabricación de sistemas de sintetizadores analógicos
modulares controlados por voltaje a principios de la década
Las formas más populares de de 1950.</p>
especificar el tamaño de un cuadro son </div>
utilizar píxeles, porcentajes o ems.
Tradicionalmente, los píxeles han sido
el método más popular porque
permiten a los diseñadores controlar
con precisión su tamaño.

CSS
Cuando usa porcentajes, el tamaño
del cuadro es relativo al tamaño de la div.box {
ventana del navegador o, si el cuadro altura: 300px;
está dentro de otro cuadro, es un ancho: 300px;
porcentaje del tamaño del cuadro color de fondo: #bbbbaa;} p {
contenedor.
altura: 75%;
Cuando usa ems, el tamaño del ancho: 75%;
cuadro se basa en el tamaño del color de fondo: # 0088dd;}
texto que contiene. Los diseñadores
han comenzado recientemente a
usar porcentajes y ems más para las
Resultado
mediciones, ya que intentan crear
diseños que sean flexibles en
dispositivos que tienen pantallas de
diferentes tamaños.

En el ejemplo de la derecha,
puede ver que un contenido <div>
Se utiliza un elemento que tiene 300
píxeles de ancho por 300 píxeles de alto.
Dentro de esto hay un párrafo que es el
75% del ancho y alto del elemento
contenedor. Esto significa que el
tamaño del párrafo es de 225 píxeles de
ancho por 225 píxeles de alto.

303 BB
OUEY
XEES
 WtiiD
limitanteArkansas lhmi
Connecticut

ancho mínimo, ancho máximo

Algunos diseños de página se expanden y

HtMl Chapter-13 / min-width-max-width.html
encogen para adaptarse al tamaño de la

<tr> pantalla del usuario. En tales diseños, el

<td> <img src = "images / rhodes.jpg" width = "200" ancho mínimo La propiedad especifica el

height = "100" alt = "Fender Rhodes" /> </td> <td class tamaño más pequeño en el que se

= "description">El piano de Rhodes es un puede mostrar un cuadro cuando la

piano electromecánico, inventado por Harold Rhodes ventana del navegador es estrecha y la

durante los años cincuenta y más tarde anchura máxima La propiedad indica el

fabricado en varios modelos ...</td> <td>PS1400</td> </ ancho máximo que puede alcanzar un

tr> cuadro cuando la ventana del

navegador es amplia.

Estas son propiedades muy útiles para

garantizar que el contenido de las páginas

CSS
sea legible (especialmente en las pantallas

td.description { más pequeñas de los dispositivos

ancho mínimo: 450px; portátiles). Por ejemplo, puede utilizar el

ancho máximo: 650px; anchura máxima propiedad para asegurarse

alineación de texto: izquierda; de que las líneas de texto no aparezcan

relleno: 5px; demasiado anchas dentro de una gran

margen: 0px;} ventana del navegador y puede utilizar la

ancho mínimo propiedad para asegurarse

de que no parezcan demasiado estrechos.

Puede resultarle útil probar este

Resultado
ejemplo en su navegador para que
pueda ver lo que sucede cuando
aumenta o disminuye el tamaño de
la ventana del navegador.

Tenga en cuenta que estas propiedades se

admitieron por primera vez en IE7 y Firefox
2, por lo que no funcionarán en versiones
anteriores de estos navegadores.

BB
OUEY
XEES 304
 lirmtit
A icin
lge altura
altura mínima, altura máxima

De la misma manera que puede

Chapter-13 / min-height-max-height.html HtMl
querer limitar el ancho de un
cuadro en una página, también <h2>Guardabarros Mustang</h2>
puede querer limitar su altura. Esto <p>El Fender Mustang se introdujo en 1964 como el
se logra utilizando elaltura mínima base de un importante rediseño de Fender ...</p> <h2>Fender
y Altura máxima propiedades. Stratocaster</h2> <p>La Fender Stratocaster o "Strat" es una de las

El ejemplo de esta página muestra guitarras eléctricas más populares de todos los tiempos ...</p>
estas propiedades en acción. <h2>Gibson Les Paul</h2> <p>La Gibson Les Paul es una eléctrica de
También muestra lo que sucede cuerpo sólido
cuando el contenido de la caja guitarra que se vendió por primera vez en 1952 ...</p>
ocupa más espacio que el tamaño
especificado para la caja.

CSS
Si la caja no es lo suficientemente grande

para contener el contenido, y el contenido h2, p {

se expande fuera de la caja, puede verse ancho: 400px;
muy desordenado. Para controlar lo que tamaño de fuente: 90%;
sucede cuando no hay suficiente espacio altura de línea: 1.2em;}
para el contenido de un cuadro, puede h2 {
utilizar elDesbordamiento color: # 0088dd;
propiedad, que se analiza en la borde inferior: 1px sólido # 0088dd;} p {
página siguiente.
altura mínima: 10px;
altura máxima: 30px;}

Resultado

305 BB
OUEY
XEES
 sobrevuelo cA o nttiecnlet
Desbordamiento

El Desbordamiento La propiedad le
HtMl capítulo-13 / overflow.html
dice al navegador qué hacer si el
<h2>Fender Stratocaster</h2> contenido de un cuadro es más
<p class = "uno">La Fender Stratocaster o "Strat" grande que el propio cuadro. Puede
es una de las guitarras eléctricas más populares de todos los tener uno de dos valores:
tiempos, y su diseño ha sido copiado por muchos fabricantes de
guitarras. Fue diseñado por Leo ...</p> <h2>Gibson Les Paul</h2>
<p class = "dos">La Gibson Les Paul es un cuerpo sólido
oculto
Esta propiedad simplemente oculta
cualquier contenido adicional que no
guitarra eléctrica que se vendió por primera vez en 1952. La Les
quepa en la caja.
Paul fue diseñada por Ted McCarty ... </p>

Desplazarse
Esta propiedad agrega una barra de
CSS
desplazamiento al cuadro para que los usuarios

p.one { puedan desplazarse para ver el contenido que falta.

desbordamiento: oculto;}
p.two { A la izquierda, puede ver dos cajas cuyo
desbordamiento: desplazamiento;} contenido se expande más allá de sus
dimensiones establecidas. El primer
ejemplo tiene elDesbordamiento
propiedad con un valor de oculto.
Resultado
El segundo ejemplo tiene el
Desbordamiento propiedad con un valor de

Desplazarse.

El Desbordamiento La propiedad es
particularmente útil porque algunos
navegadores permiten a los usuarios
ajustar el tamaño del texto para que
aparezca tan grande o tan pequeño como
deseen. Si el texto es demasiado grande, la
página puede convertirse en un lío ilegible.
Ocultar el desbordamiento en estos
cuadros ayuda a evitar que los elementos
se superpongan en la página.

BB
OUEY
XEES 306
 BorDer, mArgin
& Relleno

Cada caja tiene tres propiedades disponibles que se

pueden ajustar para controlar su apariencia:

1 2 3
Frontera Margen Relleno

Cada cuadro tiene un borde Los márgenes se sitúan fuera del borde El relleno es el espacio entre el
(incluso si no es visible o se del borde. Puede establecer el ancho borde de un cuadro y cualquier
especifica que tenga 0 píxeles de de un margen para crear un espacio contenido que contenga. Agregar
ancho). El borde separa el borde entre los bordes de dos cuadros relleno puede aumentar la
de una caja de otra. adyacentes. legibilidad de su contenido.

Si especifica un ancho

él llo
para un cuadro, entonces
los bordes, el margen y
el acolchado se agrega
a su ancho y alto.

307 CAJAS
 ESPACIO BLANCO Y
MARGEN VERTICAL

Con Sin
El relleno y
MARGEN Y ACOLCHADO MARGEN Y ACOLCHADO margen propiedades
son muy útiles
en agregar espacio
entre varios
elementos de la página.

Los diseñadores se refieren al espacio O imagina que tienes dos cajas Si el margen inferior de cualquier cuadro
entre elementos en una página como colocadas una al lado de la otra (cada toca el margen superior de otro, el
espacio en blanco. Imagina que una con un borde negro). No navegador lo representará de manera
tienes un borde alrededor de una necesariamente querrá que las cajas diferente de lo que cabría esperar. Solo
caja. No querrá que el texto toque toquen los bordes, ya que esto haría mostrará el mayor de los dos márgenes.
este borde o sería más difícil de que la línea pareciera dos veces más Si ambos márgenes son del mismo
leer. gruesa en los lados opuestos. tamaño, solo mostrará uno.

CAJAS 308
 Bort celre WiDth
A deshacerse

ancho del borde

El ancho del borde La propiedad se

capítulo-13 / border-width.html HtMl
utiliza para controlar el ancho de
un borde. El valor de esta <p class = "uno">El "Clavinet" de Hohner es esencialmente un
propiedad puede expresarse en clavicordio eléctrico.</p> <p class = "dos">El "Clavinet" de Hohner
píxeles o utilizando uno de los es esencialmente un
siguientes valores: clavicordio eléctrico.</p> <p class = "tres">El "Clavinet" de
Hohner es esencialmente
delgada un clavicordio eléctrico.</p>
medio
grueso

(No puede usar porcentajes

con esta propiedad).
CSS
Puede controlar el tamaño individual p.one {
de los bordes utilizando cuatro border-width: 2px;}
propiedades independientes: p.two {
border-width: grueso;}
border-top-width p.three {
borde-ancho-derecho ancho del borde: 1px 4px 12px 4px;}
border-bottom-width
border-left-width

También puede especificar diferentes

anchos para los cuatro valores de borde
Resultado
en una propiedad, así:

ancho del borde: 2px 1px 1px

2px;

Los valores aquí aparecen en el orden de

las agujas del reloj: arriba, derecha, abajo,

izquierda.

309 BB
OUEY
XEES
 BorDeA rrstticyllemi
estilo de borde

Puede controlar el estilo de un

HtMl capítulo-13 / border-style.html
borde usando el estilo de borde
<p class = "uno">Piano eléctrico Wurlitzer</p> <p class = propiedad. Esta propiedad puede
"dos">Piano eléctrico Wurlitzer</p> <p class = "tres">Piano tomar los siguientes valores:
eléctrico Wurlitzer</p> <p class = "cuatro">Piano eléctrico
Wurlitzer</p> <p class = "cinco">Piano eléctrico Wurlitzer</ sólido una sola línea continua

p> <p class = "seis">Piano eléctrico Wurlitzer</p> <p class =

"siete">Piano eléctrico Wurlitzer</p> <p class = "ocho"> punteado una serie de puntos cuadrados

Piano eléctrico Wurlitzer</p> (si su borde tiene 2px de ancho, entonces

los puntos son 2px al cuadrado con un
espacio de 2px entre cada punto)

estropeado una serie de líneas cortas

CSS
p.one {estilo de borde: sólido;} doble dos líneas continuas (el
p.two {estilo de borde: punteado;} valor de la ancho del borde
p.three {border-style: dashed;} propiedad crea la suma de las
p. cuatro {estilo de borde: doble;} dos líneas)
p.five {estilo de borde: ranura;}
p.six {estilo de borde: cresta;} ranura parece estar tallado
p.seven {border-style: inset;} en la página
p.eight {border-style: outset;}
cresta parece sobresalir de la
página

Resultado
recuadro aparece incrustado en la
página

principio parece que está

saliendo de la pantalla

oculto / ninguno no se muestra

ningún borde

Puede cambiar individualmente los

estilos de diferentes bordes usando:
estilo de borde superior

borde-estilo-izquierdo
estilo de borde derecho
estilo de borde inferior

BB
OUEY
XEES 3110
0
 Bort celre color
A deshacerse

color del borde

Puede especificar el color de un borde

capítulo-13 / border-color.html HtMl
utilizando valores RGB, códigos
hexadecimales o nombres de colores <p class = "uno">El ARP Odyssey se introdujo en
CSS (como vio en las páginas 251-252). 1972.</p>
<p class = "dos">El ARP Odyssey se introdujo en
Es posible controlar individualmente 1972.</p>
los colores de los bordes en
diferentes lados de una caja usando:

CSS
borde-color-superior
color del borde derecho p.one {
color del borde inferior color del borde: # 0088dd;}
color de borde izquierdo p.two {
color del borde: #bbbbaa # 111111 # ee3e80 # 0088dd;}
También es posible utilizar una
abreviatura para controlar los
cuatro colores de borde en una
Resultado
propiedad:

color del borde: cian oscuro

deepink darkcyan
Rosa profundo;

Los valores aquí aparecen en el orden de

las agujas del reloj: arriba, derecha, abajo,

izquierda.

También puede usar valores HSL para

especificar el color como se muestra en
las páginas 255-256. Sin embargo, estos
solo se introdujeron en CSS3 y no
funcionarán en navegadores más
antiguos.

3
31111 BB
OUEY
XEES
 cortoA Rh icnlD
ejército mi
de reserva

frontera

El frontera property le permite

HtMl capítulo-13 / border-shorthand.html
especificar el ancho, estilo y color
<p>Aquí hay una secuencia de acordes simple tocada en un de un borde en una propiedad (y
Órgano Hammond a través de un altavoz Leslie.</p> los valores deben codificarse en
ese orden específico).

CSS
pag {

ancho: 250px;
borde: 3px con puntos # 0088dd;}

Resultado

BB
OUEY
XEES 3112
2
 A rDtiDcilneg
Pensilvania

relleno

El relleno La propiedad le
capítulo-13 / padding.html HtMl
permite especificar cuánto
espacio debe aparecer entre el <p>Los sintetizadores analógicos producen un sonido ondulado, mientras que los
contenido de un elemento y su los sonidos almacenados en un sintetizador digital se han
borde. muestreado y luego se han convertido en números.</p> <p class
= "ejemplo">Los sintetizadores analógicos producen una onda
El valor de esta propiedad suele sonido, mientras que los sonidos almacenados en un
especificarse en píxeles (aunque sintetizador digital se han muestreado y luego ... </p>
también es posible utilizar
porcentajes o ems). Si se usa un
porcentaje, el relleno es un
CSS
porcentaje de la ventana del
navegador (o del cuadro contenedor pag {

si está dentro de otro cuadro). ancho: 275px;

borde: 2px sólido # 0088dd;}
Tenga en cuenta: si se especifica un p.example {
ancho para una caja, se agrega relleno: 10px;}
relleno al ancho de la caja.

Como puede ver, el segundo

párrafo aquí es mucho más fácil
Resultado
de leer porque hay un espacio
entre el texto y el borde del
cuadro. La caja también es más
ancha porque tiene relleno.

Puede especificar diferentes valores

para cada lado de una caja usando:

acolchado superior

padding-right
fondo acolchado
padding-left

O puede usar una abreviatura (donde El valor de la relleno los elementos secundarios no heredan la propiedad de la
los valores están en el orden de las misma manera que la propiedad color valor de la Familia tipográfica la propiedad
agujas del reloj: arriba, derecha, abajo, es; por lo que debe especificar elrelleno para cada elemento que necesite usarlo.
izquierda):

Hasta Internet Explorer 6, el ancho del cuadro incluiría el relleno y

relleno: 10px 5px 3px 1px; los márgenes. Puede ver más sobre esto en la página 316.

3113
3 BB
OUEY
XEES
 AmrAtricdestello
mi
margen

El margen propiedad controla el

HtMl capítulo-13 / margin.html
espacio entre cajas. Su valor se da
<p>A menudo se dice que los sintetizadores analógicos tienen un comúnmente en píxeles, aunque
Sonido "más cálido" que sus homólogos digitales. también puede usar porcentajes o
</p> ems.
<p class = "ejemplo">Los sintetizadores analógicos son a menudo
se dice que tienen un sonido "más cálido" que sus homólogos Si una casilla se coloca encima de
digitales.</p> otra, los márgenes se contraen, lo
que significa que se utilizará el
mayor de los dos márgenes y no se
tendrá en cuenta el menor.
CSS
pag { Tenga en cuenta: si se especifica el
ancho: 200px; ancho de un cuadro, el margen se
borde: 2px sólido # 0088dd; agrega al ancho del cuadro.
relleno: 10px;}
p.example { Puede especificar valores para cada lado

margen: 20px;} de un cuadro usando:

margen superior

margen derecho
Resultado
margen inferior
margen izquierdo

También puede utilizar la abreviatura

(donde los valores están en
orden en el sentido de las agujas del reloj: arriba,

derecha, abajo, izquierda):

margen: 1px 2px 3px 4px;

A veces, es posible que vea lo siguiente,

lo que significa que los márgenes
izquierdo y derecho deben ser de 10
píxeles y los márgenes superior e
El valor de la margen los elementos secundarios no heredan la propiedad de la misma inferior deben ser de 20 píxeles:
manera que la propiedad color valor de la Familia tipográfica propiedad es, por lo que margen: 10px 20px;
debe especificar el margen para cada elemento que necesite usarlo.
(Esta misma abreviatura que se

Hasta Internet Explorer 6, el ancho del cuadro incluiría el relleno y muestra arriba también se puede

los márgenes. Puede ver más sobre esto en la página 316. aplicar al relleno).

BB
OUEY
XEES 3114
4
 cerncontenido titulado
A

Si desea centrar un cuadro en la

capítulo-13 / centering-content.html HtMl
página (o centrarlo dentro del
elemento en el que se encuentra), <cuerpo>
puede establecer el margen izquierdo y <p>A menudo se dice que los sintetizadores analógicos tienen un
Margen derecho para auto. Sonido "más cálido" que sus homólogos
digitales.</p>
Para centrar un cuadro en la <p class = "ejemplo">Los sintetizadores analógicos son a menudo
página, debe establecer un ancho se dice que tienen un sonido "más cálido" que sus
para el cuadro (de lo contrario, homólogos digitales.</p> </body>
ocupará todo el ancho de la página).

Una vez que haya especificado el ancho

del cuadro, estableciendo los márgenes
CSS
izquierdo y derecho en auto hará que el
navegador coloque un espacio igual en cuerpo {
cada lado de la caja. Esto centra el alineación de texto: centro;}
cuadro en la página (o dentro del pag {

elemento en el que se encuentra el ancho: 300px;

cuadro). relleno: 50px;
borde: 20px sólido # 0088dd;}
Para que esto funcione en navegadores p.example {
más antiguos (particularmente IE6), el margen: 10px automático 10px automático;

elemento en el que se encuentra la caja alineación de texto: izquierda;}

debe tener un texto alineado

propiedad con su valor establecido en

centrar.
Resultado

El texto alineado la propiedad es

heredada por elementos secundarios.
Por lo tanto, también debe especificar el
texto alineado propiedad en el cuadro
centrado si no desea que el texto
dentro de él esté centrado.

3115
5 BB
OUEY
XEES
 ie6 BoxAmrtoiD
cleel

Cuando especifica el ancho de un

RESULTADO EN ESE6 SIN TIPO DE DOCUMENTO
cuadro, cualquier relleno o margen
debe agregarse al ancho del mismo.
Internet Explorer 6, sin embargo, tiene
una peculiaridad por la que incluye el
relleno y los márgenes en el ancho del
cuadro.

La forma de evitar esto es

asegurarse de proporcionar una
declaración DOCTYPE para la página
HTML. (Las declaraciones DOCTYPE
se trataron en la página 181.) Puede
utilizar las declaraciones DOCTYPE
HTML5, HTML 4 estricto o HTML 4
transicional para asegurarse de que
IE6 sigue el modelo de caja correcto.

Para demostrar esto, puede ver el

ejemplo de la página de la izquierda
Resultado en ie6 con doCtype
que se muestra en IE6, primero sin
una declaración DOCTYPE y luego
nuevamente con la declaración
HTML5 DOCTYPE.

BB
OUEY
XEES 3116
6
 chrtAin
A cglee en línea / Bloque
mostrar

El mostrar La propiedad le permite

capítulo-13 / display.html HtMl
convertir un elemento en línea en un
elemento de nivel de bloque o <ul>
viceversa, y también se puede usar para <li>Casa</li> <li>
ocultar un elemento de la página. Productos</li>
<li class = "próximamente">Servicios</li>
Los valores que puede tomar esta <li>Acerca de</li> <li>
propiedad son: Contacto</li> </ul>

en línea
Esto hace que un elemento a nivel
de bloque actúe como un elemento CSS
en línea.
li {
pantalla: en línea;
cuadra margen derecho: 10px;}
Esto hace que un elemento en línea actúe li.coming-soon {
como un elemento a nivel de bloque. pantalla: ninguna;}

bloque en línea
Esto hace que un elemento a nivel de Resultado
bloque fluya como un elemento en línea,
mientras conserva otras características de
un elemento a nivel de bloque.

ninguno
Esto oculta un elemento de la página.
En este caso, el elemento actúa como
si no estuviera en la página en
absoluto (aunque un usuario aún En este ejemplo, puede ver una lista. Esta técnica se usa a menudo para
podría ver el contenido del cuadro si Cada elemento de la lista generalmente crear navegación para un sitio, y en
usara elver fuente opción en su se trata como un elemento a nivel de este ejemplo se ha agregado un
navegador). bloque, pero la regla para el margen a la derecha de cada uno
<li> elementos indica que deben de los elementos para separarlos.
Si usa esta propiedad, es importante tener tratarse como elementos en línea, La regla que se aplica a la
en cuenta que los cuadros en línea son no lo que significa que se ubicarán <li> elemento cuyo clase es
se supone que crea elementos a nivel de uno junto al otro en lugar de próximamente, en breve, pronto se ha

bloque. aparecer en nuevas líneas. ocultado como si no estuviera en la página.

3117
7 BB
OUEY
XEES
 ocultación Btoix
Arkansas celes
visibilidad

El visibilidad La propiedad le
HtMl capítulo-13 / visibilidad.html
permite ocultar cuadros a los
<ul> usuarios, pero deja un espacio
<li>Casa</li> <li> donde habría estado el elemento.
Productos</li>
<li class = "próximamente">Servicios</li> <li> Esta propiedad puede tomar dos
Acerca de</li> <li>Contacto</li> </ul> valores:

oculto
Esto oculta el elemento.

CSS
visible
li { Esto muestra el elemento.
pantalla: en línea;
margen derecho: 10px;} Si el visibilidad de un elemento se
li.coming-soon { establece en oculto, aparecerá un
visibilidad: oculta;} espacio en blanco en su lugar.

Si no desea que aparezca un

espacio en blanco, debe usar el
Resultado
mostrar propiedad con un valor de
ninguno en su lugar (como se
cubre en la página anterior).

Tenga en cuenta que cualquiera

puede ver el contenido de cualquier
elemento cuyo visibilidad la propiedad
se ha establecido en oculto viendo la
fuente en su navegador.

BB
OUEY
XEES 3118
8
 csrst3ic: lSer
A ORDEN IMÁGENES
imagen de borde

El imagen de borde La propiedad

capítulo-13 / border-image.html HtMl
aplica una imagen al borde de
cualquier cuadro. Toma una imagen <p class = "uno"> </p>
de fondo y la corta en nueve partes. <p class = "dos"> </p>
<p class = "tres"> </p>

Aquí está la imagen. He

agregado marcas donde
CSS
se corta en el ejemplo,
tomando 18 píxeles de cada esquina p.one {
para colocar un círculo completo en - moz-border-image: url ("images / dots.gif") 11 11 11
cada esquina. Los cortes de esquina 11 estirar;
siempre se colocan en las cuatro - webkit-border-image: url ("images / dots.gif") 11 11 11
esquinas de la caja, pero tenemos la 11 estirar;
opción de que los lados se estiren o border-image: url ("images / dots.gif")
se repitan. 11 11 11 11 estiramiento;}
p.two {
Esta propiedad requiere - moz-border-image: url ("images / dots.gif") 11 11 11
tres datos: 11 ronda;
- webkit-border-image: url ("images / dots.gif") 11 11 11
1: la URL de la imagen 11 ronda;
2: Dónde cortar la imagen border-image: url ("images / dots.gif")
3: Qué hacer con los bordes 11 11 11 11 ronda;}
rectos; los valores posibles son:
tramo estira la imagen
repetir repite la imagen
Resultado
redondo como repetir, pero si los

mosaicos no encajan exactamente, escala

la imagen del mosaico para que

El cuadro también debe tener un ancho de

borde para que se muestre la imagen.

El -moz-border-image
y -webkit-border-image
Las propiedades no están en la
especificación CSS, pero ayudan a que las
versiones anteriores de Chrome, Firefox y
Safari muestren este efecto.

3119
9 BB
OUEY
XEES
 css3: Cuadro SHArDtoicW
les
sombra de la caja

El sombra de la caja La propiedad le

CSS capítulo-13 / box-shadow.html
permite agregar una sombra alrededor
p.one { de un cuadro. Funciona igual que el
- moz-box-shadow: -5px -5px # 777777; sombra de texto propiedad que conoció

- webkit-box-shadow: -5px -5px # 777777; sombra en la página 288. Debe usar al menos el
de cuadro: -5px -5px # 777777;} primero de estos dos valores, así como
p.two { un color:
- moz-box-shadow: 5px 5px 5px # 777777;
- webkit-box-shadow: 5px 5px 5px # 777777; Desplazamiento horizontal
sombra de cuadro: 5px 5px 5px # 777777;} Los valores negativos colocan la
p.three { sombra a la izquierda del cuadro.
- moz-box-shadow: 5px 5px 5px 5px # 777777;
- webkit-box-shadow: 5px 5px 5px 5px # 777777; sombra Desplazamiento vertical
de cuadro: 5px 5px 5px 5px # 777777;} Los valores negativos colocan la sombra

p. cuatro { en la parte superior del cuadro.

- moz-box-shadow: 0 0 10px # 777777;

- webkit-box-shadow: 0 0 10px # 777777; Difuminar la distancia
sombra de cuadro: 0 0 10px # 777777;} Si se omite, la sombra es una línea
p. cinco { sólida como un borde.
- moz-box-shadow: recuadro 0 0 10px # 777777;
- webkit-box-shadow: recuadro 0 0 10px # 777777; PREPARACIÓN DE LA FOTOGRAFÍA

sombra de cuadro: recuadro 0 0 10px # 777777;} Si se usa, un valor positivo hará

que la sombra se expanda en
todas las direcciones, y un valor
negativo hará que se contraiga.

Resultado
El recuadro La palabra clave también se

puede utilizar antes de estos valores

para crear una sombra interna.

Chrome, Firefox y Safari se apresuraron

a admitir esta propiedad mediante el
uso de:moz-box-shadow
y -webkit-box-shadow
propiedades. Estos no están en la
especificación CSS, pero su uso puede
ayudar a que este estilo funcione en
estos navegadores.

BB
OUEY
XEES 320
 csrst3ic: lreesquinas onduladas
A
radio de borde

CSS3 introduce la capacidad de crear

capítulo-13 / border-radius.html HtMl
esquinas redondeadas en cualquier caja,
usando una propiedad llamada <p>Pet Sounds presentó una serie de sonidos poco convencionales.
radio de borde. El valor indica instrumentos tales como timbres de bicicleta, órganos zumbantes,
el tamaño del radio en clavecines, flautas, Electro-Theremin, silbatos para perros, trenes,
píxeles. instrumentos de cuerda con sonido hawaiano, latas de Coca-Cola
y perros que ladran.</p>
Los navegadores más antiguos que no
admiten esta propiedad mostrarán un
cuadro con esquinas en ángulo recto.
CSS
El -moz-border-radius pag {

y -webkit-border-radius borde: 5px sólido #cccccc;

las propiedades no están en la relleno: 20px;
especificación CSS. Sin embargo, se ancho: 275px;
usan en algunas versiones de Chrome, alineación de texto: centro;
Firefox y Safari para ofrecer soporte radio del borde: 10px;
temprano para este estilo (y por lo - moz-border-radius: 10px;
tanto se pueden usar para lograr este - webkit-border-radius: 10px;}
efecto en más navegadores).

Puede especificar valores individuales para

cada esquina de un cuadro usando:

border-top-right-radius border-
bottom-right-radius border-
bottom-left-radius border-top-
left-radius
Resultado

También puede utilizar una abreviatura de

estas cuatro propiedades (en el orden de

las agujas del reloj: arriba, derecha, abajo,

izquierda). Por ejemplo:

radio del borde: 5px, 10px, 5px,

10px;

3211 BB
OUEY
XEES
 css3: elliPticAlA srhtAic les Educación física

radio de borde

Para crear formas más complejas,

HtMl capítulo-13 / formas-elípticas.html
puede especificar diferentes
<p class = "uno"> </p> distancias para las partes
<p class = "dos"> </p> horizontal y vertical de las
<p class = "tres"> </p> esquinas redondeadas.

Por ejemplo, esto creará un

radio más ancho que alto:

radio del borde: 80px 50px;

CSS
p.one { 80px
border-top-left-radius: 80px 50px;
- moz-border-radius-top-left: 80px 50px;
- webkit-border-radius-top-left: 80px 50px;}
50px
p.two {
radio de borde: 1em 4em 1em 4em / 2em 1em 2em 1em;
- radio-borde-moz: 1em 4em 1em 4em / 2em
1em 2em 1em;
- radio del borde del kit web: 1em 4em 1em 4em / Puede orientar solo una esquina
2em 1em 2em 1em;} utilizando las propiedades
p.three { individuales para esa esquina:
relleno: 0px;
radio del borde: 100px; border-top-left-radius: 80px
- moz-border-radius: 100px; 50px;
- webkit-border-radius: 100px;}
También hay una abreviatura para
apuntar a las cuatro esquinas a la vez;
primero especifica los cuatro valores
Resultado
horizontales, luego los cuatro valores
verticales, como se muestra en la
segunda forma a la izquierda.

Incluso puede crear un círculo tomando

un cuadro cuadrado y haciendo radio de
borde la misma altura que el cuadrado,

como se muestra en la tercera forma de

la izquierda.

BB
OUEY
XEES 322
323 CAJAS
 ejemplo
Cajas

En este ejemplo, puede ver una página de inicio

simple para una tienda de música.

Toda la página se encuentra dentro de un <div> elemento con un identificación de

página. Esto se centra usando el margen propiedad, con un valor de auto para los
márgenes izquierdo y derecho. El logo y otros contenidos se centran utilizando esta
misma técnica.

El principal <div> tiene un borde de doble línea alrededor, y el tamaño de este cuadro se
expandirá y contraerá si se cambia el tamaño de la ventana del navegador. Para evitar
que la página se vuelva demasiado estrecha o demasiado ancha,ancho mínimo
y anchura máxima se utilizan propiedades.

La navegación se crea utilizando una lista desordenada. Hay bordes en la

parte superior e inferior de esta lista para que se destaque. Elmostrar
La propiedad se ha aplicado a cada uno de los elementos de la lista para que se comporten

como elementos en línea (en lugar de a nivel de bloque). Esto permite que los enlaces de
navegación se coloquen uno al lado del otro horizontalmente. Elrelleno se ha utilizado la

propiedad para crear espacio entre cada uno de los enlaces.

El ancho propiedad para el <ul> elemento se establece en 570 píxeles, y la

propiedad de ancho para el <p> elementos debajo de ellos se establece en 600
píxeles. En realidad, terminan con el mismo ancho que el otro porque el <ul>
El elemento también usa relleno para crear un espacio entre el borde del
cuadro que crea y los enlaces dentro de él, y cualquier relleno, borde o
margen se agrega al ancho y alto del cuadro.

Si no hubiéramos incluido un DOCTYPE declaración al comienzo de esta página, los

tamaños de las cajas serían diferentes entre sí en Internet Explorer 6 porque este
navegador no implementó el modelo de caja de la manera correcta.

CAJAS 324
 ejemplo
Cajas

<! DOCTYPE html>

<html>
<cabeza>

<título>Cajas</título> <style
type = "text / css">
cuerpo {
tamaño de fuente: 80%;

familia de fuentes: "Courier New", Courier, monoespacio;

espaciado entre letras: 0.15em;
color de fondo: #efefef;}
# página {
ancho máximo: 940px;
ancho mínimo: 720px;
margen: 10px automático 10px
automático; relleno: 20px;
borde: 4px doble # 000; color de
fondo: #ffffff;}
# logo {
ancho: 150px;
margin: 10px auto 25px auto;} ul {

ancho: 570px;
relleno: 15px;
margen: 0px automático 0px
automático; borde superior: 2px sólido #
000; borde inferior: 1px sólido # 000;
alineación de texto: centro;}
li {
pantalla: en línea;
margen: 0px 3px;}
pag {

alineación de texto: centro;

ancho: 600px;
margen: 20px automático 20px
automático; font-weight: normal;}

325 CAJAS
 ejemplo
Cajas

a{
color: # 000000;
transformación de texto: mayúsculas;
decoración de texto: ninguna;
padding: 6px 18px 5px 18px;} a:
hover, a.on {
color: # cc3333;
color de fondo: #ffffff;}
</style>
</head>
<cuerpo>

<div id = "página">
<div id = "logo">
<img src = "images / logo.gif" alt = "Los especialistas analógicos" /> </div>

<ul id = "navegación">
<li> <a href="#" class="on">Casa</a> </li> <li> <a
href="#">En venta</a> </li> <li> <a href="#">
Refacción</a> </li> <li> <a href="#">Acerca de</a> </
li> <li> <a href="#">Contacto</a> </li> </ul>

<p>
<img src = "images / keys.jpg" alt = "Fender Rhodes, Hohner Clavinet,
y Wurlitzer EP200 "/>
</p>
<p>
Nos especializamos en la venta y reparación de teclados clásicos, en particular Fender Rhodes,
Wurlitzer EP200 y Hohner Clavinet.
</p>
</div>
</body>
</html>

CAJAS 326
 resumen
Cajas

X CSS trata cada elemento HTML como si tuviera su propia caja.

X Puede utilizar CSS para controlar las dimensiones de una caja.

X También puede controlar los bordes, los márgenes y el relleno de

cada cuadro con CSS.

X Es posible ocultar elementos utilizando las propiedades de

visualización y visibilidad.

X Las cajas a nivel de bloque se pueden convertir en cajas en línea y las cajas

en línea se pueden convertir en cajas a nivel de bloque.

X La legibilidad se puede mejorar controlando el ancho de los

cuadros que contienen texto y el interlineado.

X CSS3 ha introducido la capacidad de crear bordes de

imagen y bordes redondeados.
 Listas, Pestañas
14
y formularios

X Especificar estilos de viñetas

X Agregar bordes y fondos a las tablas
X Cambiar la apariencia de los elementos del formulario
 Hay varias propiedades de CSS que se
crearon para trabajar con tipos específicos
de elementos HTML, como listas, tablas y
formularios.

En este capítulo aprenderá a:

● Especificar el tipo de viñeta o numeración en listas

● Agregar bordes y fondos a las celdas de la tabla

● Controlar la apariencia de los controles de formulario

Juntas, estas propiedades le permiten tener un control más preciso sobre

partes específicas de sus páginas.

331 LISTAS, TABLAS Y FORMULARIOS

LISTAS, TABLAS Y FORMULARIOS 332
 bU
a rtLLEstilos IceLtePoint
tipo de estilo de lista

El tipo de estilo de lista La propiedad

capítulo-14 / list-style-type.html HtMl
le permite controlar la forma o el
estilo de una viñeta (también <h1>Los poemas completos</h1>
conocida como marcador). <h2>Emily Dickinson</h2> <ol>

Se puede utilizar en reglas que <li>La vida</li> <li>Naturaleza</li>

se aplican a <ol>, <ul>, y <li> <li>Amor</li> <li>Tiempo y
elementos. eternidad</li> <li>El sabueso
soltero</li> </ol>
Listas desordenadas
Para una lista desordenada, puede
utilizar los siguientes valores:

ninguno

Dto CSS
circulo
ol {
cuadrado
list-style-type: lower-roman;}

listas ordenadas
Para una lista ordenada (numerada),
puede utilizar los siguientes valores:

decimal Resultado
123

cero inicial decimal

01 02 03

alfa inferior
aBC

alfa superior
ABC

romano inferior
I. ii. iii.

romano superior

Yo II III

333 STS
TS T AB
LLIIS BLLE
ES
SAUND FFO
ORMS
ejército de reserva DAKOTA DEL NORTEmilisegundo
 imágenes para baUrLtLiceLtes
lista-estilo-imagen

Puede especificar una imagen para que

HtMl Chapter-14 / list-style-image.html
actúe como una viñeta utilizando el

<h1>Índice de poemas traducidos</h1> <h2> lista-estilo-imagen propiedad.

Arthur Rimbaud</h2> <ul>
El valor comienza con las letras
<li>Ofelia</li> <li>A la música</li> url y va seguido de un par
<li>Un sueño para el invierno</li> de paréntesis. Entre
<li>Vocales</li> <li>El barco borracho paréntesis, la ruta a la
</li> </ul> imagen se da entre
comillas dobles.

Esta propiedad se puede utilizar en

las reglas que se aplican a <ul> y
<li> elementos.
CSS
ul { El ejemplo de esta página también
list-style-image: url ("images / star.png");} li { muestra el uso de la margen
propiedad para aumentar el espacio
margen: 10px 0px 0px 0px;} vertical entre cada elemento de la lista.

Resultado

STS
LLIISTS T AB
BLLE
ES
SAUND FFO
ORMS 334
ejército de reserva DAKOTA DEL NORTEmilisegundo
 a rtsiic
CorreostiLoening el marcador
posición-estilo-lista

Las listas están sangradas en la página

Chapter-14 / list-style-position.html HtMl
de forma predeterminada y el posición
de estilo de lista La propiedad indica si <ul class = "iluminaciones">
el marcador debe aparecer en el interior <li>Ese ídolo, ojos negros y ...</li> <li>¡Gracioso
o en el exterior del cuadro que contiene hijo de Pan! ...</li> <li>Cuando el mundo se reduce ...
los puntos principales. </li> </ul>

<ul class = "temporada">

Esta propiedad puede tomar uno <li>Una vez, si no me falla la memoria ...</li> <li>
de dos valores: ¿No tuve una vez un joven ...</li> <li>¡Otoño ya! ...</
li> </ul>

fuera de
El marcador se encuentra a la izquierda del

bloque de texto. (Este es el comportamiento

predeterminado si no se utiliza esta CSS

propiedad).
ul {
ancho: 150px;}
dentro li {
El marcador se encuentra dentro del margen: 10px;}
cuadro de texto (que está sangrado). ul.illuminations {
posición-estilo-lista: exterior;}
En el ejemplo que se muestra, el ancho ul.season {
de la lista se ha limitado a 150 píxeles. posición-estilo-lista: interior;}
Esto asegura que el texto se ajuste a
una nueva línea para que pueda ver
cómo el valor dedentro coloca la viñeta
Resultado Resultado
dentro de la primera línea de texto.

Se ha agregado un amargin a cada

elemento de la lista para que haya un
espacio claro entre cada uno.

335 STS
TS T AB
LLIIS BLLE
ES
SAUND FFO
ORMS
ejército de reserva DAKOTA DEL NORTEmilisegundo
 Lista corta a Rh icnLd
ejército mi
de reserva

estilo de lista

Al igual que con varias de las otras

HtMl capítulo-14 / list-style.html
propiedades de CSS, existe una propiedad

<h1>Citas de Edgar Allan Poe</h1> <ul> que actúa como una forma abreviada de

estilos de lista. Se llamaestilo de lista,

<li> Tengo mucha fe en los necios; autoconfianza lo llaman mis y le permite expresar el estilo, la imagen y

amigos.</li> <li>Todo lo que vemos o parecemos no es más que las propiedades de posición de los

un sueño dentro de un sueño.</li> marcadores en cualquier orden.

<li>Definiría, en suma, la poesía de las palabras como la creación

rítmica de la Belleza.</li> </ul>

CSS
ul {
estilo de lista: círculo interior;
ancho: 300px;}
li {
margen: 10px 0px 0px 0px;}

Resultado

STS
TS T AB
LLIIS BLLE
ES
SAUND FFO
ORMS
ejército de reserva DAKOTA DEL NORTEmilisegundo 336
 a rbtLiceLPeroPerties
ejército de reserva

Ya conoces varias
capítulo-14 / table-properties.html HtMl
propiedades que se usan
comúnmente con tablas. Aquí <h1>Subastas de la primera edición</h1>
los juntaremos en un solo <tabla>
ejemplo usando lo siguiente: <tr>
<th>Autor</th> <th>Título</th> <th class =
ancho para establecer el ancho de la "dinero">Precio de reserva</th> <th class =
mesa "dinero">Oferta actual</th> </tr>

relleno para establecer el espacio entre

el borde de cada celda de la tabla y su <tr>
contenido <td>EE Cummings</td> <td>Tulipanes y
chimeneas</td> <td class = "dinero">PS
transformación de texto para convertir el 2.000,00</td> <td class = "dinero">PS
contenido de los encabezados de la tabla a 2.642,50</td> </tr>
mayúsculas

<tr class = "even">

espaciado entre letras, tamaño de fuente <td>Charles d'Orleans</td> <td>
para agregar estilo adicional al Poemas</td>
contenido de los encabezados de la tabla <td class = "dinero"> </td> <td class =
"dinero">PS5.866,00</td> </tr>
borde superior, borde inferior
para establecer bordes por encima y por debajo de los <tr>
encabezados de la tabla <td>TS Eliot</td> <td>Poemas 1909-1925</
td> <td class = "dinero">PS1.250,00</td>
texto alineado para alinear la escritura a <td class = "dinero">PS8.499,35</td> </tr>
la izquierda de algunas celdas de la
tabla y a la derecha de otras
<tr class = "even">
color de fondo para cambiar el <td>Sylvia Plath</td> <td>El coloso</td>
color de fondo de las filas <td class = "dinero"> </td> <td class =
alternas de la tabla "dinero">PS1031,72</td> </tr>

:flotar para resaltar una fila de la tabla cuando

el mouse de un usuario pasa sobre ella </table>

337 STS
TS T AB
LLIIS BLLE
ES
SAUND FFO
ORMS
ejército de reserva DAKOTA DEL NORTEmilisegundo
 artículo

A continuación, se ofrecen algunos consejos para

CSS
diseñar mesas para asegurarse de que estén limpias y

cuerpo { sean fáciles de seguir:

familia de fuentes: Arial, Verdana, sans-serif; color:

# 111111;} dar relleno a las ceLLs
mesa { Si el texto en una celda de la tabla
ancho: 600px;} toca un borde (u otra celda), se
th, td { vuelve mucho más difícil de leer.
relleno: 7px 10px 10px 10px;} th { Agregar relleno ayuda a mejorar
la legibilidad.
transformación de texto: mayúsculas;
espaciado entre letras: 0.1em; DistingUish encabezados
tamaño de fuente: 90%; Poner todos los títulos de las tablas en

borde inferior: 2px sólido # 111111; borde negrita (el estilo predeterminado para

superior: 1px sólido # 999; alineación de <th> elemento) hace que sean más
texto: izquierda;} fáciles de leer. También puede
tr.even { poner los títulos en mayúsculas y
color de fondo: #efefef;} tr: hover { luego agregar un color de fondo o
un subrayado para distinguirlos
color de fondo: # c3e6e5;} claramente del contenido.
. dinero {
alineación de texto: derecha;} sombra aLas filas alternas
Sombrear cada dos filas puede
ayudar a los usuarios a seguir las
líneas. Utilice una distinción sutil del
Resultado
color normal de las filas para
mantener la mesa limpia.

ALINEAR NÚMEROS
Puedes usar el texto alineado
propiedad para alinear el contenido de
cualquier columna que contenga números
a la derecha, de modo que los números
grandes se distingan claramente de los
más pequeños.

onLine extra
Hay más ejemplos del uso de CSS
para diseñar tablas en la sección
de herramientas del sitio web.

STS
LLIISTS T AB
BLLE
ES
SAUND FFO
ORMS
ejército de reserva DAKOTA DEL NORTEmilisegundo 338
 bort ceLre en ceLLs vacías
a deshacerse

celdas vacías

Si tiene celdas vacías en su

capítulo-14 / celdas-vacías.html HtMl
tabla, entonces puede usar el
celdas vacías propiedad para <table class = "uno">
especificar si se deben mostrar <tr>
o no sus bordes. <td>1</td>
<td>2</td>
Dado que los navegadores tratan las </tr>
celdas vacías de diferentes maneras, si <tr>
desea mostrar u ocultar explícitamente <td>3</td>
los bordes de las celdas vacías, debe <td> </td>
usar esta propiedad. </tr>
</table>
Puede tomar uno de tres valores:

show CSS
Esto muestra los bordes de las
td {
celdas vacías.
borde: 1px sólido # 0088dd;
relleno: 15px;}
esconder table.one {
Esto oculta los bordes de las celdas-vacías: mostrar;}
celdas vacías. table.two {
celdas vacías: ocultar;}

heredar
Si tiene una mesa anidada
dentro de otra, la heredar
value indica a las celdas de la tabla que Resultado
obedezcan las reglas de la tabla
contenedora.

En la primera tabla de la izquierda,

puede ver que se muestra el borde
de la celda vacía. En la segunda
tabla, está oculto.

339 STS
TS T AB
LLIIS BLLE
ES
SAUND FFO
ORMS
ejército de reserva DAKOTA DEL NORTEmilisegundo
 brechas entre LL es
nrcteico
espaciado de bordes, colapso de bordes

El espaciado de bordes propiedad

HtMl capítulo-14 / espacios-entre-celdas.html
le permite controlar la
<table class = "uno"> distancia entre celdas adyacentes. De

<tr> forma predeterminada, los navegadores a

<td>1</td> menudo dejan un pequeño espacio entre

<td>2</td> cada celda de la tabla, por lo que si desea

</tr> aumentar o disminuir este espacio,

<tr> entonces elespaciado de bordes La propiedad

<td>3</td> le permite controlar la brecha.

<td>4</td>
</tr> El valor de esta propiedad se suele
</table> especificar en píxeles. Puede especificar
dos valores si lo desea para especificar
números separados para el espaciado
horizontal y vertical.
CSS
td { Cuando se ha utilizado un borde en las
color de fondo: # 0088dd; relleno: celdas de la tabla, donde se unen dos
15px; celdas, el ancho de las líneas sería el
border: 2px solid # 000000;} doble que el de los bordes exteriores. Es
table.one { posible colapsar los bordes adyacentes
espaciado de borde: 5px 15px;} para evitar esto usando el
table.two { colapso de la frontera propiedad. Los

border-collapse: colapso;} posibles valores son:

colapso
Resultado Las fronteras se contraen en una
única frontera siempre que sea
posible. (espaciado de bordes se
ignorarán y las celdas se
juntarán, y celdas vacías
las propiedades serán ignoradas.)

separar
Las fronteras están separadas unas
de otras. (espaciado de bordes y
celdas vacías será obedecido.)

STS
TS T AB
LLIIS BLLE
ES
SAUND FFO
ORMS 340
ejército de reserva DAKOTA DEL NORTEmilisegundo
 Formas de estilo

A nadie que conozco le gusta rellenar

mac: saFari mac: FireFox
formularios, por lo que si puede hacer
que el suyo se vea más atractivo y
más fácil de usar, es probable que
más personas lo rellenen. Además,
cuando vea un formulario en varios
navegadores diferentes (como se
muestra en a la derecha), verá que
cada navegador los muestra de
manera diferente.

CSS se usa comúnmente para

controlar la apariencia de los
elementos del formulario. Esto es
tanto para hacerlos más atractivos
como para hacerlos más consistentes
Pc: cromo Pc: es decir
en diferentes navegadores.

Es más común diseñar:

● Entradas de texto y áreas de texto

● Enviar botones

● Etiquetas en formularios, para que los

controles de formulario se alineen bien

En las próximas páginas verá

cómo controlarlos con CSS.

Diseñar entradas de texto y botones de envío Para lograr esto, es posible que los formularios se ven consistentes en
es bastante fácil. Es más difícil conseguir que desee descargar los archivos CSS todos los navegadores. Aunque la
las casillas de selección, los botones de opción disponibles en http://formalize.me. solución incorpora JavaScript, no se
y las casillas de verificación parezcan El autor de este sitio web ha necesitan conocimientos previos de
coherentes en todos los navegadores. hecho el arduo trabajo de hacer esto para implementar el código.

341 LISTAS, TABLAS Y FORMULARIOS

 estilo textair cLtes
ntPiU

Este ejemplo demuestra las

CSS capítulo-14 / styling-text-inputs.html
propiedades CSS que se usan
aporte { comúnmente con entradas de texto, la
tamaño de fuente: 120%; mayoría de las cuales ya conoce.
color: # 5a5854;
color de fondo: # f2f2f2; borde: tamaño de fuente establece el tamaño del

1px sólido #bdbdbd; radio del texto introducido por el usuario.

borde: 5px;
relleno: 5px 5px 5px 30px; repetición color establece el color del texto y

de fondo: no repetición; posición de color de fondo establece el

fondo: 8px 9px; bloqueo de pantalla; color de fondo de la entrada.

margen inferior: 10px;} frontera agrega un borde alrededor

input: focus { del borde del cuadro de entrada, y

color de fondo: #ffffff; border: 1px radio de borde se puede utilizar para

solid # b1e1e4;} input # email { crear esquinas redondeadas (para

navegadores que admitan esta
background-image: url ("images / email.png");} input # propiedad).
twitter {
background-image: url ("images / twitter.png");} input # El :atención pseudo-clase se utiliza
web { para cambiar el color de fondo de
background-image: url ("images / web.png");} la entrada de texto cuando se está
utilizando, y el :flotar
psuedo-class aplica los mismos estilos
cuando el usuario pasa el mouse sobre

Resultado ellos.

imagen de fondo agrega una

imagen de fondo al cuadro. Debido

a que hay una imagen diferente
para cada entrada, estamos usando
un selector de atributos que busca
el valor de laidentificación
atributo en cada entrada.

Aprenderá más sobre las

imágenes de fondo y cómo
colocarlas en el Capítulo 16.

STS
TS T AB
LLIIS BLLE
ES
SAUND FFO
ORMS
ejército de reserva DAKOTA DEL NORTEmilisegundo 342
 S rtytLicen
a LG
BOTONES DE EMISIÓN

A continuación, se muestran algunas

capítulo-14 / styling-submit-buttons.html CSS
propiedades que se pueden utilizar
para diseñar botones de envío. Este input # submit {
ejemplo se basa en el de la página color: # 444444;
anterior, y el botón enviar hereda los sombra de texto: 0px 1px 1px #ffffff;
estilos establecidos para <entrada> borde inferior: 2px sólido # b2b2b2; color
elemento en la última página. de fondo: # b9e4e3;
fondo: -webkit-gradient (lineal, arriba a la izquierda,
color se utiliza para cambiar el parte inferior izquierda, de (# beeae9), a (# a8cfce));
color del texto del botón. antecedentes:
- moz-linear-gradient (arriba, # beeae9, # a8cfce);
sombra de texto puede dar un aspecto antecedentes:
3D al texto en los navegadores que - gradiente-lineal-o (arriba, # beeae9, # a8cfce);
admiten esta propiedad. antecedentes:
- gradiente-lineal-ms (arriba, # beeae9, # a8cfce);}
borde inferior se ha utilizado para hacer input # submit: hover {
que el borde inferior del botón sea un color: # 333333;
poco más grueso, lo que le da una borde: 1px sólido # a4a4a4; borde
sensación más 3D. superior: 2px sólido # b2b2b2; color de
fondo: # a0dbc4;
color de fondo puede hacer que el botón fondo: -webkit-gradient (lineal, arriba a la izquierda,
de enviar se destaque de otros parte inferior izquierda, de (# a8cfce), a (# beeae9));
elementos a su alrededor. (La creación antecedentes:
de un estilo coherente para todos los - moz-linear-gradient (arriba, # a8cfce, # beeae9);
botones ayuda a los usuarios a antecedentes:
comprender cómo deben interactuar - gradiente-lineal-o (arriba, # a8cfce, # beeae9);
con el sitio). Se ha agregado un fondo antecedentes:
degradado para los navegadores que - ms-linear-gradient (arriba, # a8cfce, # beeae9);}
admiten degradados. Los degradados
están cubiertos en
página 419.
Resultado

El :flotar La pseudoclase se ha
utilizado para cambiar la apariencia
del botón cuando el usuario pasa el
mouse sobre él. En este caso, el
fondo cambia, el texto se vuelve
más oscuro y el borde más grueso
se aplica a la parte superior del
botón.

343 STS
TS T AB
LLIIS BLLE
ES
SAUND FFO
ORMS
ejército de reserva DAKOTA DEL NORTEmilisegundo
 StyLing FieaLrdtsiceLtes
Y leyendas
Los conjuntos de campos son particularmente
CSS capítulo-14 / styling-fieldsets-and-legends.html
útiles para determinar los bordes de un

fieldset { formulario. En una forma larga, pueden

ancho: 350px; ayudar a agrupar información relacionada

borde: 1px sólido #dcdcdc; radio dentro de ella.

del borde: 10px;

relleno: 20px; La leyenda se utiliza para indicar qué

alineación de texto: derecha;} información se requiere en el conjunto

leyenda { de campos.

color de fondo: #efefef; borde:

1px sólido #dcdcdc; radio del Las propiedades que se usan comúnmente

borde: 10px; con estos dos elementos incluyen:

relleno: 10px 20px;

alineación de texto: izquierda; ancho se utiliza para controlar el ancho del

transformación de texto: mayúsculas;} conjunto de campos. En este ejemplo, el

ancho del conjunto de campos obliga a los
elementos del formulario a ajustarse a una
nueva línea en el lugar correcto. (Si fuera
Resultado
más ancho, los artículos podrían colocarse
en una línea).

color se utiliza para controlar el

color del texto.

color de fondo se utiliza para

cambiar el color detrás de estos
elementos.

frontera se utiliza para controlar la

apariencia del borde alrededor del
conjunto de campos y / o leyenda.

radio de borde se utiliza para

suavizar los bordes de estos
elementos en los navegadores
que admiten esta propiedad.

relleno se puede utilizar para agregar

espacio dentro de estos elementos.

STS
TS T AB
LLIIS BLLE
ES
SAUND FFO
ORMS 344
ejército de reserva DAKOTA DEL NORTEmilisegundo
 a ritgico
Alabama nLen
por ejemplo, forma
CONTROLES: PROBLEMA
Las etiquetas de los elementos del
Chapter-14 / aligning-form-controls-problem.html HtMl
formulario suelen tener diferentes
longitudes, lo que significa que los <form action = "example.php" method = "post">
controles del formulario no aparecerán <div>
en línea recta. Esto se demuestra en el <etiqueta para = "nombre" clase = "título">Nombre:</
ejemplo de la derecha (sin CSS aplicado etiqueta> <input type = "text" id = "name" name = "name" /> </
a los controles de formulario). div>
<div>
De esta forma, cada tema sobre el que <etiqueta para = "correo electrónico" class = "título">Correo
preguntamos al usuario se coloca dentro electrónico:</etiqueta> <input type = "email" id = "email" name =
de un <div> elemento para asegurarse de "email" /> </div>
que cada pregunta aparezca en una nueva <div>
línea. Es más fácil para los usuarios <span class = "title">Género:</lapso>
completar un formulario si los controles <input type = "radio" name = "gender" id = "male"
del formulario están alineados en una valor = "M" />
línea vertical recta. El CSS en la página <etiqueta para = "hombre">Masculino</etiqueta>

opuesta aborda esto. <input type = "radio" name = "gender" id = "female"

valor = "F" />
Si observa dónde preguntamos a los <etiqueta para = "mujer">Mujer</etiqueta> <br />
usuarios su género, los dos botones </div>
de opción tienen cada uno su propio < <div>
etiqueta> (uno que dice hombre y <input type = "submit" value = "Registrarse"
otro que dice mujer). A id = "enviar" />
<span> Se ha agregado un elemento </div>
al título que ayudará a alinear estos </form>
controles.

En la página anterior vimos otra técnica

Resultado sin CSS
para alinear elementos de formulario.
Cuando el formulario solo contiene
entradas de texto, al configurar todas las
entradas de texto para que tengan el
mismo ancho, además de alinear todo el
contenido del formulario a la derecha, los
campos se alinean y las etiquetas están en
un lugar coherente. Para formularios más
complejos, necesitará una solución más
parecida a la que se muestra en estas
páginas.

345 STS
TS T AB
LLIIS BLLE
ES
SAUND FFO
ORMS
ejército de reserva DAKOTA DEL NORTEmilisegundo
 aLignina grFpara mi
icrLm
CONTROLES: SOLUCIÓN
Cada fila del formulario tiene un título
CSS Chapter-14 / aligning-form-controls-solution.html
que indica a los usuarios lo que deben
div { ingresar. Para las entradas de texto, el
borde inferior: 1px sólido #efefef; margen: título está en el <etiqueta> elemento.
10px; Para los botones de opción, el título
fondo acolchado: 10px; está en <lapso> elemento. Ambos
ancho: 260px;} tienen unclase atributo con un valor de
. título { título.
flotador izquierdo;

ancho: 100px; Podemos usar una propiedad llamada

alineación de texto: derecha; flotador para mover los títulos a la

padding-right: 10px;} izquierda de la página. (Elflotador

. etiqueta de botones de La propiedad se cubre con mayor
radio {float: none;} detalle en las páginas 370-376.)
. entregar {
alineación de texto: derecha;} Al establecer el ancho propiedad en
esos elementos, sabemos que los
títulos ocuparán el mismo ancho. Por
lo tanto, los controles de formulario
junto a ellos se alinearán.

El texto alineado la propiedad se

utiliza para alinear los títulos a la

derecha, y relleno se utiliza para

asegurarse de que haya un espacio

entre el texto de los cuadros de título

y los controles de formulario.

Resultado
Los estilos también se aplican a la
<div> elementos que contienen
cada fila del formulario (fijando su
ancho y creando espacio vertical
entre cada fila). El botón de enviar
también está alineado a la derecha.

STS
TS T AB
LLIIS BLLE
ES
SAUND FFO
ORMS 346
ejército de reserva DAKOTA DEL NORTEmilisegundo
 cUrtriscoLrESTILOS
a
cursor

El cursor La propiedad le permite

capítulo-14 / cursor.html HtMl
controlar el tipo de cursor del mouse
que se debe mostrar a los usuarios. <a href="http://www.whitmanarchive.org">
Walt Whitman</a>

Por ejemplo, en un formulario, puede

configurar el cursor para que sea una mano

CSS
cuando el usuario pasa el mouse sobre él.

a{
A continuación, se muestran los valores cursor: mover;}
más utilizados para esta propiedad:

auto
Resultado
punto de mira

defecto
puntero
moverse

texto
Espere

ayuda

url ("cursor.gif");

Solo debe usar estos valores para

agregar información útil para los
usuarios en lugares donde
Espere ver ese cursor. (Por ejemplo,
usar una cruz en un enlace puede
confundir a los usuarios porque no
están acostumbrados a verlo).

347 STS
TS T AB
LLIIS BLLE
ES
SAUND FFO
ORMS
ejército de reserva DAKOTA DEL NORTEmilisegundo
 desarrollador web
barra de herramientas

Esta útil extensión para Firefox y Chrome

proporciona herramientas para mostrarle los estilos
CSS que se aplican a un elemento cuando pasa el
mouse sobre él, junto con la estructura del HTML.

Descargue esta herramienta desde:

www.chrispederick.com/
trabajo / desarrollador web
2
Para ver los estilos CSS y la estructura
HTML de una página web, vaya al menú CSS 3
de la barra de herramientas para 1
desarrolladores web y seleccione Ver
información de estilo.

1: líneas externas 2: ESTRUCTURA 3: estilos CSS

Cuando pase el cursor sobre un Mientras se desplaza sobre un Al pasar el cursor sobre un elemento,
elemento, se dibujará un contorno elemento, la estructura se haga clic con el mouse para mostrar
rojo a su alrededor, que le mostrará mostrará en la parte superior de el CSS. Se le mostrarán las reglas que
cuánto espacio ocupa el elemento. la ventana. Aquí puedes ver el se aplican a ese elemento (y la línea
<li> El elemento tiene una clase de en la que se encuentran). Por encima
completado, dentro de un <ul> con una de las reglas, puede ver el nombre
clase llamada que hacer. La lista está de la hoja de estilo (y su ruta).
dentro de un <div> elemento con un

identificación de página, y esto se

encuentra dentro del <cuerpo> y <html> Esto ayuda a verificar qué estilos
elementos. se están aplicando a un elemento.
Puede usarlo en el código de su
Esto puede resultar muy útil cuando propio sitio o cuando desee ver
escribir selectores de CSS para ayudarlo a qué estilos está usando otra
seleccionar el elemento correcto. persona en su sitio.

Esta herramienta también le permite cambiar el tamaño de la pantalla, validar su código HTML y CSS y desactivar las imágenes.

LISTAS, TABLAS Y FORMULARIOS 348

349 LISTAS, TABLAS Y FORMULARIOS
 ejemplo
Listas, pestañas y formularios

Este ejemplo demuestra varias de las propiedades de

CSS que hemos conocido en este capítulo para
controlar la presentación de listas, tablas y formularios.

Para la lista de eventos de poesía gratuitos cerca del inicio de la página, las viñetas
tienen un estilo con una imagen. El espacio entre cada elemento de la lista se
incrementa usando elaltura de la línea propiedad.

Para la tabla, los espacios entre las celdas se eliminan usando el fronteras
propiedad. El tamaño de fuente se establece para <td> y <th> elementos, ya que
no heredan su tamaño de los elementos principales.

El encabezado de la tabla tiene un fondo más oscuro, texto claro y una línea oscura
de 2 píxeles entre él y el contenido de la tabla. Las esquinas redondeadas en el
encabezado de la tabla se crean usando:primer hijo y :último niño
pseudoclases (para navegadores que admiten esquinas redondeadas).

Las filas alternativas de la tabla tienen diferentes sombreados y la textura se

agrega con diferentes bordes en cada lado de la celda.

Para el formulario, los controles de formulario relacionados se colocan en un <fieldset> elemento. Las

etiquetas de los controles de formulario de la izquierda también utilizan elflotador propiedad para

garantizar que los controles de formulario estén alineados verticalmente.

Cuando los cuadros de texto del formulario reciben el foco, o el usuario pasa el mouse
sobre él, el color de fondo y los colores del borde cambian. El botón de enviar también ha
sido diseñado para dejar en claro dónde deben enviar el formulario las personas.

LISTAS, TABLAS Y FORMULARIOS 350

 ejemplo
Listas, pestañas y formularios

<! DOCTYPE html>

<html>
<cabeza>

<título>Listas, tablas y formularios</título> <style

type = "text / css">
cuerpo {
familia de fuentes: Arial, Verdana, sans-serif;
tamaño de fuente: 90%;
color: # 666;
color de fondo: # f8f8f8;} li {

list-style-image: url ("images / icon-plus.png"); altura de

línea: 1.6em;}
mesa {
espaciado de borde: 0px;}
th, td {
relleno: 5px 30px 5px 10px;
espaciado de borde: 0px;
tamaño de fuente: 90%;

margen: 0px;}
th, td {
alineación de texto: izquierda;

color de fondo: # e0e9f0; borde superior:

1px sólido # f1f8fe; borde inferior: 1px
sólido # cbd2d8; borde derecho: 1px sólido
# cbd2d8;} tr.head th {

color: #fff;
color de fondo: # 90b4d6; borde inferior:
2px sólido # 547ca0; borde derecho: 1px
sólido # 749abe; borde superior: 1px
sólido # 90b4d6; alineación de texto:
centro;
sombra de texto: -1px -1px 1px # 666;
espaciado entre letras: 0.15em;}
td {
sombra de texto: 1px 1px 1px #fff;}

351 LISTAS, TABLAS Y FORMULARIOS

 ejemplo
Listas, pestañas y formularios

tr.even td, tr.even th {

background-color: # e8eff5;}
tr.head th: first-child {
- webkit-border-top-left-radius: 5px;
- moz-border-radius-topleft: 5px; border-
top-left-radius: 5px;} tr.head th: last-child {

- webkit-border-top-right-radius: 5px;
- moz-border-radius-topright: 5px; border-
top-right-radius: 5px;} fieldset {

ancho: 310px;
margen superior: 20px;
borde: 1px sólido # d6d6d6; color
de fondo: #ffffff; altura de línea:
1.6em;}
leyenda {
estilo de fuente: cursiva;
color: # 666666;}
input [type = "text"] {
ancho: 120px;
borde: 1px sólido # d6d6d6;
relleno: 2px;
esquema: ninguno;}
input [type = "text"]: focus, input
[type = "text"]: hover {
color de fondo: # d0e2f0; border:
1px solid # 999;} input [type =
"submit"] {
borde: 1px sólido # 006633; color
de fondo: # 009966; color:
#FFFFFF;
radio del borde: 5px;
relleno: 5px;
margin-top: 10px;}
input [type = "submit"]: hover {
borde: 1px sólido # 006633;

LISTAS, TABLAS Y FORMULARIOS 352

 ejemplo
Listas, pestañas y formularios

color de fondo: # 00CC33; color:

#FFFFFF;
cursor: puntero;}
. título {
flotador izquierdo;

ancho: 160px;
claro: izquierda;}
. entregar {
ancho: 310px;
alineación de texto: derecha;}

</style>
</head>
<cuerpo>

<h1>Talleres de poesía</h1> <p>Realizaremos una serie de talleres de

poesía.
y simposios durante todo el año.</p> <p>Tenga en cuenta que los
siguientes eventos son gratuitos para
miembros:</p>
<ul>
<li>Una perspectiva poética</li> <li>Walt Whitman en
guerra</li> <li>Poemas encontrados y poesía de
forasteros</li> </ul>

<tabla>
<tr class = "head">
<th> </th>
<th>Nueva York</th> <th>
Chicago</th> <th>San
Francisco</th> </tr>

<tr>
<th>Una perspectiva poética</th> <td>Sáb, 4 feb 2012<
br />11 a. M. - 2 p. M.</td> <td>Sáb, 3 mar 2012<br />
11 a. M. - 2 p. M.</td> <td>Sáb, 17 mar 2012<br />11 a.
M. - 2 p. M.</td> </tr>

<tr class = "even">

<th>Walt Whitman en guerra</th>

353 LISTAS, TABLAS Y FORMULARIOS

 ejemplo
Listas, pestañas y formularios

<td>Sáb, 7 abr 2012<br />11 a. M. - 1 p. M.</td> <td>Sáb, 5

de mayo de 2012<br />11 a. M. - 1 p. M.</td> <td>Sáb, 19 de
mayo de 2012<br />11 a. M. - 1 p. M.</td> </tr>

<tr>
<th>Poemas encontrados & amp; Poesía de forasteros</
th> <td>Sáb, 9 jun 2012<br />11 a. M. - 2 p. M.</td> <td>
Sáb, 7 jul 2012<br />11 a. M. - 2 p. M.</td> <td>Sáb, 21 jul
2012<br />11 a. M. - 2 p. M.</td> </tr>

<tr class = "even">

<th>Muerte natural: una exploración</th> <td>Sáb, 4
ago 2012<br />11 a. M. - 4 p. M.</td> <td>Sáb, 8 sep
2012<br />11 a. M. - 4 p. M.</td> <td>Sáb, 15 sep 2012<
br />11 a. M. - 4 p. M.</td> </tr>

</table>
<form action = "http://www.example.com/form.php" method = "get">
<fieldset>
<leyenda>Registra tu interés</leyenda> <p> <etiqueta clase = "título"
para = "nombre">Tu nombre:</etiqueta>
<input type = "text" name = "name" id = "name"> <br /> <label class = "title" for =
"email">Tu correo electrónico:</etiqueta> <input type = "text" name = "email" id =
"email"> </p> <p> <label for = "location" class = "title">Tu centro más cercano:</
etiqueta>
<select name = "location" id = "location">
<option value = "ny">Nueva York</opción> <valor de
opción = "il">Chicago</opción> <valor de opción =
"ca">San Francisco</opción> </select> </p>

<span class = "title">¿Es usted miembro?</intervalo> <etiqueta> <tipo de entrada = "radio"

nombre = "miembro" valor = "sí" /> sí</etiqueta> <etiqueta> <tipo de entrada = "radio" nombre
= "miembro" valor = "no" /> No</etiqueta> </p> </fieldset>

<div class = "submit"> <input type = "submit" value = "Registrarse" /> </div> </form>

</body>
</html>

LISTAS, TABLAS Y FORMULARIOS 354

 resumen
Listas, pestañas y formularios

X Además de las propiedades CSS cubiertas en otros capítulos

que trabajan con el contenido de todos los elementos, hay
varias otras que se utilizan específicamente para controlar la
apariencia de listas, tablas y formularios.

X Los marcadores de lista pueden tener diferentes apariencias

usando el tipo de estilo de lista y estilo de lista propiedades de la
imagen.

X Las celdas de la tabla pueden tener diferentes bordes y

espaciado en diferentes navegadores, pero hay propiedades
que puede usar para controlarlas y hacerlas más consistentes.

X Los formularios son más fáciles de usar si los controles de formulario

están alineados verticalmente con CSS.

X Los formularios se benefician de estilos que los hacen sentir más

interactivos.
 15
Diseño

X Controlar la posición de los elementos

X Crear diseños de sitios
X Diseño para pantallas de diferentes tamaños
 En este capítulo veremos cómo controlar
dónde se encuentra cada elemento en una
página y cómo crear diseños de página
atractivos.

Esto implica aprender cómo el diseño para una pantalla puede ser
diferente al diseño para otros medios (como la impresión). En este
capítulo vamos a:

● Explore diferentes formas de colocar elementos usando flujo normal,

posicionamiento relativo, posicionamiento absoluto y flotadores.

● Descubra cómo varios dispositivos tienen diferentes tamaños de

pantalla y resolución, y cómo esto afecta el proceso de diseño.

● Conozca la diferencia entre diseños líquidos y de ancho

fijo, y cómo se crean.

● Descubra cómo los diseñadores utilizan las cuadrículas para que los
diseños de sus páginas se vean más profesionales.

359 DISEÑO
DISEÑO 360
 CONCEPTOS CLAVE EN
posicionamiento eLements

Bloques de construcción

CSS trata cada elemento HTML como si estuviera en

su propia caja. Esta caja será unanivel de bloque
caja o un en línea caja.

Los cuadros a nivel de bloque comienzan en una nueva línea y actúan como los bloques
de construcción principales de cualquier diseño, mientras que los cuadros en línea fluyen
entre el texto circundante. Puede controlar cuánto espacio ocupa cada caja configurando
el ancho de las cajas (y, a veces, también la altura). Para separar cuadros, puede utilizar
bordes, márgenes, relleno y colores de fondo.

Elementos a nivel de bloque

empezar en una nueva línea Lorem Ipsum

Ejemplos incluyen:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
<h1> <p> <ul> <li> eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud ejercicio ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit.

• Lorem ipsum dolor sit

• Consectetur adipisicing
• Elit, sed do eiusmod

elementos en línea
fluir en el medio Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
texto circundante ad minim veniam, quis nostrud ejercicio ullamco laboris nisi ut aliquip
ex ea commodo consequat.
Ejemplos incluyen:
<img> <b> <i>
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint Ocecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.

361 DISEÑO
CONTIENE ELEMENTOS

Si un elemento a nivel de bloque se encuentra dentro de

otro elemento a nivel de bloque, la caja exterior se
conoce como el conteniendo o padre elemento.

Es común agrupar varios elementos dentro de un <div>

(u otro elemento a nivel de bloque). Por ejemplo, puede agrupar todos los
elementos que forman el encabezado de un sitio (como el logotipo y la
navegación principal). El <div> elemento que contiene este grupo de
elementos se conoce como el conteniendo elemento.

Una caja puede estar anidada

Lorem • Ipsum • Dolor • Consectetur
Lorem Ipsum dentro de varios otros elementos
a nivel de bloque. El elemento
contenedor es siempre elpadre

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
directo de ese elemento.
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud ejercicio ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint Ocecat.

Lorem ipsum dolor sit amet, consectetur adipisicing

elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud ejercicio ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Las líneas naranjas en este diagrama representan <div> elementos. El encabezado (que
contiene el logotipo y la navegación) están en uno <div> elemento, el contenido
principal de la página está en otro, y el pie de página está en un tercero. El <cuerpo>
elemento es el elemento contenedor para estos tres <div>
elementos. El segundo <div> elemento es el elemento contenedor de dos
párrafos de texto e imágenes latinos (representados por cuadrados cruzados).

DISEÑO 362
 CONTROLANDO EL
posición de eLements

CSS tiene lo siguiente esquemas de posicionamiento que le permiten controlar el

diseño de una página: flujo normal, posicionamiento relativo y posicionamiento
absoluto. El esquema de posicionamiento se especifica mediante elposición
propiedad en CSS. También puede hacer flotar elementos usando elflotador propiedad.

flujo normal posicionamiento relativo aB Posicionamiento absoluto

Cada elemento a nivel de bloque aparece Esto mueve un elemento de la posición en la Esto posiciona el elemento en relación
en una nueva línea, lo que hace que cada que estaría en flujo normal, desplazándolo con su elemento contenedor. Se saca
elemento aparezca más abajo en la página hacia la parte superior, derecha, inferior o del flujo normal, lo que significa que no
que el anterior. Incluso si especifica el izquierda de donde se encuentra. afecta la posición de los elementos
ancho de las cajas y hay espacio para que habría sido colocado. Esto no circundantes (ya que simplemente
dos elementos se coloquen uno al lado del afecta la posición de los elementos ignoran el espacio que habría
otro, no aparecerán uno al lado del otro. circundantes; permanecen en la ocupado). Los elementos en posición
Este es el comportamiento posición en la que estarían con un absoluta se mueven a medida que los
predeterminado (a menos que le indique al flujo normal. usuarios se desplazan hacia arriba y
navegador que haga otra cosa). hacia abajo en la página.

Lorem Ipsum Lorem Ipsum L oarmetromimimetro

Lorem ipsum dolor s eso Ipsum
t,
consectetur adipisicing elit, sed do
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, eiusmod tempor incididunt ut labore et
adipisicing elit, sed do eiusmod tempor consectetur adipisicing elit, sed do dolore magna aliqua.
incididunt ut labore et dolore magna eiusmod tempor incididunt ut.
aliqua. Ut enim ad minim veniam, quis
nostrud ejercicio ullamco laboris nisi
Ut enim ad minim veniam, quis Ut enim ad minim veniam, quis ut aliquip ex ea commodo consequat.
nostrud ejercicio ullamco laboris nisi nostrud ejercicio ullamco laboris nisi
ut aliquip ex ea commodo consequat. ut aliquip ex ea. Duis aute irure dolor Duis aute irure dolor in reprehenderit in
in reprehenderit in voluptate velit. voluptate velit.
Duis aute irure dolor in reprehenderit in
voluptate velit.

Los párrafos aparecen uno tras El segundo párrafo se ha empujado El encabezado se coloca en la parte

otro, verticalmente hacia abajo en hacia abajo y hacia la derecha desde superior derecha y los párrafos comienzan

la página. donde de otro modo habría estado en la parte superior de la pantalla (como si

en flujo normal. el encabezado no estuviera allí).

Ver página 365 Ver página 366 Ver página 367

363 DISEÑO
Para indicar dónde debe colocarse una caja, es posible que también deba utilizar
compensación de caja properties para indicarle al navegador qué tan lejos de la parte
superior o inferior e izquierda o derecha debe colocarse. (Los conocerá cuando le
presentemos los esquemas de posicionamiento en las páginas siguientes).

posicionamiento fijo elementos flotantes

Esta es una forma de posicionamiento Hacer flotar un elemento le permite
absoluto que posiciona el elemento en sacar ese elemento del flujo normal y
relación con la ventana del navegador, colocarlo en el extremo izquierdo o
en oposición al elemento contenedor. derecho de una caja contenedora. El
Los elementos con posicionamiento elemento flotante se convierte en un
fijo no afectan la posición de los elemento a nivel de bloque alrededor
elementos circundantes y no se del cual puede fluir otro contenido.
mueven cuando el usuario se desplaza
hacia arriba o hacia abajo en la página.

Cuando te mueves
Lorem ipsum dolor sit amet, consectetur Lorem Lorem ipsum dolor sit
adipisicing elit, sed do eiusmod tempor
Ipsum amet, consectetur cualquier elemento de
incididunt ut labore et dolore maLgnoara adipisicing elit, sed do
milimetro comoI.psum
flujo normal, cajas
eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud ejercicio ullamco laboris nisi Ut enim ad minim veniam, quis puede superponerse. El
ut aliquip ex ea commodo consequat. nostrud ejercicio ullamco laboris nisi

índice z propiedad
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit. Duis aute irure dolor in reprehenderit in
voluptate velit. le permite controlar
qué cuadro aparece
en la parte superior.
El encabezado se ha colocado en el El título se ha desplazado hacia la
centro de la página y un 25% desde izquierda, lo que permite que los
la parte superior de la pantalla. (El párrafos de texto fluyan a su alrededor.
resto aparece en flujo normal).

Ver página 368 Consulte la página 370-376

DISEÑO 364
 nrotrim
a CLaeL fLow
posición: estática

En flujo normal, cada elemento a nivel

capítulo-15 / flujo-normal.html HtMl
de bloque se coloca encima del
siguiente. Dado que esta es la forma <cuerpo>
predeterminada en que los <h1>La evolución de la bicicleta</h1>
navegadores tratan los elementos <p>En 1817, el barón von Drais inventó un
HTML, no necesita una propiedad CSS máquina que le ayudaría a moverse más rápido por los
para indicar que los elementos deben jardines reales ...</p> </body>
aparecer en el flujo normal, pero la
sintaxis sería:

posición: estática;
CSS
No he especificado un ancho cuerpo {
propiedad para el elemento de encabezado, ancho: 750px;
para que pueda ver cómo se extiende el familia de fuentes: Arial, Verdana, sans-serif; color:
ancho de toda la ventana del navegador de # 665544;}
forma predeterminada. h1 {
color de fondo: #efefef; relleno:
Los párrafos están restringidos a 450 10px;}
píxeles de ancho. Esto muestra cómo pag {

los elementos en el flujo normal ancho: 450px;}

comienzan en una nueva línea incluso si
no ocupan todo el ancho de la ventana
del navegador.
Resultado

Todos los ejemplos que demuestran el

posicionamiento utilizarán una
estructura HTML similar.

365 LLA
SÍYO
sesenta y cinco UNED
Utah
T
 POSITIVO RELATIVOaire inLg
otniC mi
posición: relativa

El posicionamiento relativo mueve

HtMl capítulo-15 / posición-relativa.html
un elemento en relación a donde
<cuerpo> hubiera estado en flujo normal.
<h1>La evolución de la bicicleta</h1> <p>En 1817, el barón
von Drais inventó un Por ejemplo, puede moverlo 10 píxeles
máquina que le ayudaría a moverse más rápido por los por debajo de lo que hubiera sido en
jardines reales ...</p> </body> flujo normal o un 20% hacia la derecha.

Puede indicar que un elemento

debe estar posicionado
CSS
relativamente usando el posición
p.example { propiedad con un valor de relativo.
posición: relativa;
arriba: 10px; Luego usa las propiedades de
izquierda: 100px;} compensación (cima o fondo y
izquierda o derecho) para indicar qué
tan lejos se debe mover el elemento
desde donde habría estado en flujo
normal.

Para mover el cuadro hacia arriba o

hacia abajo, puede usar el cima o
fondo propiedades.
Resultado

Para mover el cuadro horizontalmente,

puede usar el izquierda o

derecho propiedades.

Los valores de las propiedades de

desplazamiento del cuadro se dan

normalmente en píxeles, porcentajes o ems.

LLA
SÍYO
UNED
Utah
T 366
 abrtsioCLLu
posicionamiento ete
posición: absoluta

Cuando el posición a la propiedad

capítulo-15 / posición-absoluta.html HtMl
se le da un valor de absoluto,
el cuadro se saca del flujo normal <cuerpo>
y ya no afecta la posición de <h1>La evolución de la bicicleta</h1>
otros elementos en la página. <p>En 1817, el barón von Drais inventó un
(Actúan como si no estuviera allí). máquina que le ayudaría a moverse más rápido por los
jardines reales ...</p> </body>

Las propiedades de compensación de caja (cima

o fondo y izquierda o derecho)

especificar dónde debe aparecer
CSS
el elemento en relación con su
elemento contenedor. h1 {
posición: absoluta;
En este ejemplo, el encabezado se ha arriba: 0px;
colocado en la parte superior de la izquierda: 500px;
página y a 500 píxeles de su borde ancho: 250px;}
izquierdo. El ancho del encabezado se pag {

establece en 250 píxeles de ancho. ancho: 450px;}

El ancho La propiedad también

se ha aplicado a la <p>
elementos en este ejemplo
para evitar que el texto se
superponga y se vuelva
Resultado
ilegible.

De forma predeterminada, la mayoría de los navegadores

añaden un margen en la parte superior del <h1>

elemento. Es por eso que hay un

espacio entre la parte superior del
navegador y el cuadro que contiene
el <h1> elemento. Si desea eliminar
este margen, puede agregar el
siguiente código al
<h1> reglas de estilo del elemento:

margen: 0px;

367 LLA
SÍYO
UNED
Utah
T
 posición fija aire inLg
otniC mi
posición: fija

El posicionamiento fijo es un tipo de

HtMl capítulo-15 / posición-fija.html
posicionamiento absoluto que
<cuerpo> requiere la posición propiedad para
<h1>La evolución de la bicicleta</h1> <p class = tener un valor de reparado.
"ejemplo">En 1817, el barón von Drais
inventó una máquina para caminar que lo ayudaría a moverse Posiciona el elemento en relación con la
más rápido por los jardines reales ...</p> </body> ventana del navegador. Por lo tanto,
cuando un usuario se desplaza hacia
abajo en la página, permanece
exactamente en el mismo lugar. Es una
buena idea probar este ejemplo en su
CSS
navegador para ver el efecto.

h1 {
posición: fija; Para controlar dónde aparece el cuadro de

arriba: 0px; posición fija en relación con la ventana del

izquierda: 50px; navegador, se utilizan las propiedades de

relleno: 10px; desplazamiento del cuadro.

margen: 0px;
ancho: 100%; En este ejemplo, el encabezado se ha

color de fondo: #efefef;} posicionado en la esquina superior

p.example { izquierda de la ventana del navegador.

margin-top: 100px;} Cuando el usuario se desplaza hacia

abajo en la página, los párrafos
desaparecen detrás del encabezado.

Resultado
El <p> los elementos están en
flujo normal e ignoran el espacio
que el <h1> elemento habría
ocupado. Por lo tanto, la
margen superior se ha utilizado la

propiedad para empujar el primer <p>

elemento debajo de donde la posición
fija <h1> elemento está sentado.

LLA
SÍYO
UNED
Utah
T 368
 o eirCLLa
a Epping eLements
Vermont

índice z

Cuando usa posicionamiento relativo, fijo o

capítulo-15 / z-index.html CSS
absoluto, los cuadros pueden
superponerse. Si los cuadros se h1 {
superponen, los elementos que aparecen posición: fija;
más adelante en el código HTML se ubican arriba: 0px;
encima de los que están antes en la página. izquierda: 0px;
margen: 0px;
Si desea controlar qué elemento se relleno: 10px;
encuentra en la parte superior, ancho: 100%;
puede usar el índice z propiedad. Su color de fondo: #efefef; índice z:
valor es un número, y cuanto mayor 10;}
es el número, más cerca está el pag {

elemento del frente. Por ejemplo, posición: relativa;

un elemento con uníndice z de 10 arriba: 70px;
aparecerá encima de uno izquierda: 70px;}
con un índice z de 5.

Este ejemplo es similar al de la página 368,

Resultado sin índice z
pero usa posicionamiento relativo para <p>
elementos. Debido a que los párrafos
están posicionados relativamente, de
forma predeterminada aparecerían en la
parte superior del encabezado a medida
que el usuario se desplaza hacia abajo en
la página. Para asegurar que el

<h1> elemento permanece en la parte

superior, usamos el índice z propiedad en

la regla para el <h1> elemento.

Resultado con índice z

El índice z a veces se le conoce como
el contexto de apilamientocomo si
los bloques se hubieran apilado uno
encima del otro en el eje az). Si está
familiarizado con los paquetes de
autoedición, es el equivalente a
utilizar las funciones "traer al frente"
y "enviar al final".

369 LLA
SÍYO
UNED
Utah
T
 eLa flotante ermtein
CLtes
flotador

El flotador La propiedad le permite

HtMl capítulo-15 / float.html
tomar un elemento en flujo normal
<h1>La evolución de la bicicleta</h1> <blockquote>"La y colocarlo lo más a la izquierda o
vida es como andar en bicicleta. derecha posible del elemento
Para mantener el equilibrio debes seguir moviéndote ". contenedor.
Albert Einstein</blockquote> <p>En 1817, el barón von Drais
inventó un Cualquier otra cosa que se encuentre
máquina que lo ayudaría a moverse más rápido por los jardines dentro del elemento contenedor fluirá
reales: dos ruedas en línea del mismo tamaño, la delantera alrededor del elemento flotante.
orientable, montada en un marco ... </p>

Cuando usa el flotador

propiedad, también debe utilizar la
CSS
ancho propiedad para indicar qué tan

blockquote { ancho debe ser el elemento flotante. Si

flotar derecho; no lo hace, los resultados pueden ser
ancho: 275px; inconsistentes, pero es probable que la
tamaño de fuente: 130%; caja ocupe todo el ancho del elemento
estilo de fuente: cursiva; contenedor (como lo haría en el flujo
familia de fuentes: Georgia, Times, serif; normal).
margen: 0px 0px 10px 10px;
relleno: 10px; En este ejemplo, un
borde superior: 1px sólido # 665544; borde <blockquote> El elemento se utiliza

inferior: 1px sólido # 665544;} para mantener una cotización. Su

elemento que contiene es el
<cuerpo> elemento.

Resultado
El <blockquote> el elemento flota
a la derecha, y los párrafos que
siguen a la cita fluyen alrededor
del elemento flotante.

LLA
SÍYO
UNED
Utah
T 370
 a ritniC
gLfeLoat to pLaCe
nosotros

eLements uno al lado del otro

Muchos diseños colocan cuadros

capítulo-15 / using-float.html HtMl
uno al lado del otro. Elflotador
La propiedad se usa comúnmente <cuerpo>
para lograr esto. <h1>La evolución de la bicicleta</h1>
<p>En 1817, el barón von Drais inventó un
Cuando los elementos flotan, la altura de máquina que le ayudaría a moverse ...</p> </body>
las cajas puede afectar el lugar donde se
sientan los siguientes elementos.

En este ejemplo, puede ver seis párrafos,

CSS
cada uno de los cuales tiene un

ancho y un flotador conjunto de propiedades. cuerpo {

ancho: 750px;
El cuarto párrafo no llega al familia de fuentes: Arial, Verdana, sans-serif; color:
borde izquierdo de la página # 665544;}
como cabría esperar. Más bien pag {

se encuentra justo debajo del ancho: 230px;

tercer párrafo. flotador izquierdo;

margen: 5px;
La razón de esto es que el cuarto relleno: 5px;
párrafo tiene espacio para color de fondo: #efefef;}
comenzar debajo del tercer
párrafo, pero no puede ir más a
la izquierda porque el segundo
párrafo está en el camino.

Establecer la altura de los párrafos

Resultado
para que tenga la misma altura que el
párrafo más alto resolvería este
problema, pero rara vez es adecuado
para diseños del mundo real donde la
cantidad de texto en un párrafo o
columna puede variar. Es más común
usar elclaro propiedad (discutida en la
página siguiente) para resolver este
problema.

3711 LLA
SÍYO
UNED
Utah
T
 tes
CLearingafrLtoiC Alabama
claro

El claro La propiedad le permite

HtMl capítulo-15 / clear.html
decir que ningún elemento (dentro
<p class = "clear">En 1865, el velocípedo (que significa del mismo elemento contenedor)
"Pie rápido") adjuntaba pedales a la rueda delantera, pero su debe tocar los lados izquierdo o
estructura de madera la hacía extremadamente incómoda.</p> derecho de un cuadro. Puede
tomar los siguientes valores:

izquierda
El lado izquierdo del cuadro no debe
CSS tocar ningún otro elemento que
aparezca en el mismo elemento
cuerpo {
contenedor.
ancho: 750px;
familia de fuentes: Arial, Verdana, sans-serif; color:
# 665544;} derecho
pag { El lado derecho del cuadro no tocará
ancho: 230px; los elementos que aparecen en el
flotador izquierdo; mismo elemento contenedor.
margen: 5px;
relleno: 5px;
color de fondo: #efefef;}
ambas cosas
. claro {
Ni los lados izquierdo ni derecho del
claro: izquierda;}
cuadro tocarán los elementos que
aparecen en el mismo elemento
contenedor.

Resultado
ninguno
Los elementos pueden tocar cualquier lado.

En este ejemplo, el cuarto

párrafo tiene una clase llamada
claro. La regla CSS para esta clase usa
la claro propiedad para indicar que
nada debe tocar el lado izquierdo de
la misma. Por lo tanto, el cuarto
párrafo se mueve más abajo en la
página para que ningún otro
elemento toque su lado izquierdo.

LLA
SÍYO
UNED
Utah
T 372
 a rrteiCnLtes de flLoated
Pensilvania

eLements: probLem
Si un elemento contenedor solamente
capítulo-15 / float-problem.html HtMl
contiene elementos flotantes, algunos
navegadores lo tratarán como si tuviese <cuerpo>
cero píxeles de alto. <h1>La evolución de la bicicleta</h1> <div>

Como puede ver en este ejemplo, el <p>En 1817, el barón von Drais inventó un
borde de un píxel asignado al elemento máquina que le ayudaría a moverse más rápido por los
contenedor se ha colapsado, por lo que jardines reales ...</p> </div>
el cuadro parece una línea de dos
píxeles. </body>

CSS
div {
borde: 1px sólido # 665544;}

Resultado

373 LLA
SÍYO
UNED
Utah
T
 padres de fa LrotaitCeLd
mi
ELEMENTOS: SOLUCIÓN
Tradicionalmente, los desarrolladores
HtMl capítulo-15 / float-solution.html
solucionaron este problema agregando

<cuerpo> un elemento adicional después del

<h1>La evolución de la bicicleta</h1> <div> último cuadro flotante (dentro del

elemento contenedor). Se aplicaría una

<p>En 1817, el barón von Drais inventó un regla CSS a este elemento adicional

máquina que le ayudaría a moverse más rápido por los estableciendo el

jardines reales ...</p> </div> claro propiedad para tener un valor de

ambas cosas. Pero esto significó que se

</body> agregó un elemento adicional al HTML

solo para corregir la altura del elemento
contenedor.

CSS
Más recientemente, los desarrolladores
div { han optado por una solución puramente
borde: 1px sólido # 665544; basada en CSS porque significa que no
desbordamiento: automático; es necesario agregar un elemento
ancho: 100%;} adicional a la página HTML después de
los elementos flotantes. La solución CSS
pura agrega dos reglas CSS al elemento
contenedor (en este ejemplo, el <div>
Resultado
elemento):

● El Desbordamiento a la propiedad
se le da un valor auto.

● El ancho la propiedad está establecida en

100%.

LLA
SÍYO
UNED
Utah
T 374
 a rretiaCtLie
C ng muLti-Columna
Diseños con flotadores
Muchas páginas web utilizan
capítulo-15 / columnas-dos.html HtMl
varias columnas en su diseño.
Esto se logra usando un <div> <h1>La evolución de la bicicleta</h1> <div class =
elemento para representar cada columna. "column1of2">
Las siguientes tres propiedades CSS se <h3>La primera bicicleta</h3>
utilizan para colocar las columnas una al <p>En 1817, el barón von Drais inventó un
lado de la otra: máquina que lo ayudaría a moverse más rápido por los
jardines reales: dos del mismo tamaño ...</p> </div>

ancho <div class = "column2of2">

Esto establece el ancho de las
<h3>Cronología de bicicletas</h3> ... </
columnas.
div>

flotador
Esto coloca las columnas una al
CSS
lado de la otra.
. column1of2 {

margen flotador izquierdo;

ancho: 620px;
Esto crea un espacio entre las
margen: 10px;}
columnas.
. column2of2 {
flotador izquierdo;
Un diseño de dos columnas como el que
ancho: 300px;
se muestra en esta página necesitaría
margen: 10px;}
dos <div> elementos, uno para el
contenido principal de la página y otro
para la barra lateral.

Resultado
Dentro de cada uno de los <div>

elementos puede haber

encabezados, párrafos, imágenes e
incluso otros <div> elementos.

375 LLA
SÍYO
UNED
Utah
T
 artículo

De manera similar, se podría crear un

HtMl capítulo-15 / columnas-tres.html
diseño de tres columnas flotando tres
<h1>La evolución de la bicicleta</h1> <div class = <div> elementos uno al lado del otro,
"column1of3"> como se muestra en esta página.
<h3>La primera bicicleta</h3> ... </div>

<div class = "column2of3">

<h3>Más innovaciones</h3> ... </div>

<div class = "column3of3">

<h3>Cronología de bicicletas</h3> ... </
div>

CSS
. column1of3, .column2of3, .column3of3 {ancho:
300px;
flotador izquierdo;

margen: 10px;}

Resultado

LLA
SÍYO
UNED
Utah
T 376
 sTamaños verdes

Los diferentes visitantes de su sitio tendrán pantallas de diferentes tamaños que

mostrarán diferentes cantidades de información, por lo que su diseño debe poder
trabajar en una gama de pantallas de diferentes tamaños.

Iphone 4 Ipad 2
Tamaño: 3,5 pulgadas Tamaño: 9,7 pulgadas

Resolución: 960 x 640 píxeles Resolución: 1024 x 768 píxeles

Al diseñar para imprimir, siempre Desde que las computadoras se han vendido al El tamaño de la pantalla de un
sabe el tamaño de la hoja de público, el tamaño de las pantallas ha usuario afecta el tamaño que
papel en la que se imprimirá su aumentado constantemente. Esto significa que pueden abrir sus ventanas y la
diseño. Sin embargo, cuando se algunas personas que visitan su sitio pueden cantidad de página que verá.
trata de diseñar para la web, se tener monitores de 13 pulgadas, mientras que También hay un número creciente
enfrenta al desafío único de que otras pueden tener monitores de más de 27 de dispositivos portátiles (teléfonos
diferentes usuarios tendrán pulgadas. móviles y tabletas) que tienen
pantallas de diferentes tamaños. pantallas más pequeñas.

377 DISEÑO
 resolución de la pantalla

La resolución se refiere a la cantidad de puntos que muestra una pantalla por pulgada. Algunos

dispositivos tienen una resolución más alta que las computadoras de escritorio y la mayoría de

los sistemas operativos permiten a los usuarios ajustar la resolución de sus pantallas.

MacBook de 13 " IMac de 27 "

Tamaño: 13,3 pulgadas Tamaño: 27 pulgadas

Resolución: 1280 x 800 píxeles Resolución: 2560 x 1440 píxeles

La mayoría de las computadoras permitirán Es interesante notar que cuanto

propietarios para ajustar la resolución mayor es la resolución, más
de la pantalla o el número de píxeles pequeño aparece el texto. Muchos
que se muestran en la pantalla. Por dispositivos móviles tienen
ejemplo, aquí puede ver las opciones pantallas de mayor resolución que
para cambiar el tamaño de la pantalla sus contrapartes de escritorio.
desde 720 x 480 píxeles hasta 1280 x
800 píxeles.

DISEÑO 378
 tamaños de página

Debido a que los tamaños de pantalla y las resoluciones de pantalla varían mucho, los

diseñadores web a menudo intentan crear páginas de alrededor de 960-1000 píxeles de ancho (ya

que la mayoría de los usuarios podrán ver diseños de este ancho en sus pantallas).

Es mucho más difícil juzgar la altura que es el área de la página principal

probable que las personas vean en la vería si el papel estuviera doblado
pantalla sin desplazarse hacia abajo en la por la mitad).
página. Durante varios años, los
diseñadores asumieron que los usuarios Ahora se reconoce que si alguien está
verían los 570600 píxeles superiores de una interesado en el contenido de la página,
página sin tener que desplazarse y algunos es probable que se desplace hacia abajo
intentaron ajustar todos los mensajes clave para ver más. Dicho esto, los estudios de
en esta área (temiendo que la gente no se usabilidad han demostrado que los
desplazara hacia abajo en la página). visitantes pueden juzgar una página en
menos de un segundo, por lo que es
importante que los nuevos visitantes
A medida que los tamaños de pantalla han sepan que el sitio es relevante para ellos
aumentado y los dispositivos de mano se han y sus intereses.
vuelto más populares, el área que verán los

usuarios es mucho más variable.

Como resultado, muchos diseños

todavía intentan que el usuario sepa de
El área de la página que los usuarios qué se trata el sitio dentro de los
verían sin desplazarse a menudo se 570600 píxeles superiores, así como
denominó "arriba de la página" (un insinuar más contenido debajo de este
término que los periódicos habían punto. Pero no intente meter
acuñado originalmente para describir demasiado en esa área superior.

En el momento de redactar este artículo, había una tendencia creciente de que las
personas crearan diseños adaptables o receptivos que podrían cambiar según el tamaño
de la pantalla.

379 DISEÑO
El área sombreada está oculta por las Sin embargo, el usuario prueba lo
restricciones de la ventana del que está más abajo en la página y
navegador, por lo que el usuario debe puede decir que habrá más para
desplazarse para ver la región inferior. ver si se desplaza hacia abajo.

1000 px

570 píxeles

DISEÑO 380
 Diseños de ancho fijo

Disposición de ancho fijo Lorem • Ipsum • Dolor • Consectetur

Lorem Ipsum
los diseños no
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
cambiar el tamaño a medida incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam,quis nostrud
que aumenta el usuario ejercicio ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in

o disminuye reprehenderit in voluptate velit esse cillum

dolore eu fugiat nulla pariatur. Excepteur sint
Ocecat.
el tamaño de la ventana
Lorem ipsum dolor
de su navegador. sentarse amet, consectetur
adipisicing elit, sed

Las medidas tienden hacer eiusmod tempor

incididunt ut labore et

se expresará en píxeles.

VENTAJAS desventajas
● Los valores de píxeles son precisos ● Puede terminar con grandes espacios
para controlar el tamaño y la alrededor del borde de una página.
posición de los elementos.
● Si la pantalla del usuario tiene una
● El diseñador tiene un control mucho resolución mucho más alta que la del

mayor sobre la apariencia y la diseñador, la página puede parecer

posición de los elementos en la más pequeña y el texto puede ser más

página que con los diseños líquidos. difícil de leer.

● Puede controlar la longitud de las ● Si un usuario aumenta el tamaño de la fuente,

líneas de texto independientemente es posible que el texto no quepa en los

del tamaño de la ventana del usuario. espacios asignados.

● El tamaño de una imagen ● El diseño funciona mejor en dispositivos

siempre será el mismo en que tienen un sitio o una resolución
relación con el resto de la similar a la de las computadoras de
página. escritorio o portátiles.

● La página a menudo ocupará

más espacio vertical que un
diseño líquido con el mismo
contenido.

381 DISEÑO
 Diseños líquidos

Lorem • Ipsum • Dolor • Consectetur Diseños de diseño líquido

Lorem Ipsum
estirar y contraer
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis a medida que el usuario
nostrud ejercicio ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint Ocecat. aumenta o disminuye la

tamaño de la ventana de
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore su navegador. Suelen
magna aliqua. Ut enim ad minim veniam, quis nostrud
ejercicio ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute.
utilizar porcentajes.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

VENTAJAS desventajas
● Las páginas se expanden para ocupar toda ● Si no controla el ancho de las
la ventana del navegador, por lo que no secciones de la página, entonces
hay espacios alrededor de la página en una el diseño puede verse muy
pantalla grande. diferente de lo que pretendía, con
espacios inesperados alrededor
● Si el usuario tiene una ventana
de ciertos elementos o elementos
pequeña, la página puede contraerse
aplastados.
para ajustarse sin que el usuario tenga
que desplazarse hacia un lado. ● Si el usuario tiene una ventana
amplia, las líneas de texto pueden
● El diseño tolera que los usuarios volverse muy largas, lo que

establezcan tamaños de fuente más dificulta su lectura.

grandes de lo que pretendía el ● Si el usuario tiene una ventana muy

diseñador (porque la página puede estrecha, las palabras se pueden
tramo). aplastar y puede terminar con pocas
Debido a que los diseños líquidos pueden

palabras en cada línea. estirar todo el ancho del navegador, lo que

da como resultado largas líneas de texto
● Si un elemento de ancho fijo (como una
que son difíciles de leer, algunos diseños
imagen) está en un cuadro que es
líquidos solo permiten que una parte de la
demasiado pequeño para contenerlo
(porque el usuario ha hecho el página se expanda y contraiga. Otras partes

ventana más pequeña) la imagen de la página tienen anchos mínimos y

puede desbordarse sobre el texto. máximos.

DISEÑO 382
 arftixDiseño de iCeLdewidth

Para crear un diseño de ancho fijo, el

capítulo-15 / diseño-ancho-fijo.html HtMl
ancho de los cuadros principales en
una página generalmente se <cuerpo>
especificará en píxeles (y en <div id = "header">
ocasiones también su altura). <h1>Logo</h1>
<div id = "nav">
Aquí puedes ver varios <div> <ul>
elementos, cada uno de los cuales utiliza un <li> <a href="">Casa</a> </li> <li> <a
identificación o clase atributo para href="">Productos</a> </li> <li> <a
indicar su propósito en la página. href="">Servicios</a> </li> <li> <a href="">
Acerca de</a> </li> <li> <a href="">
En un libro como este, el resultado Contacto</a> </li> </ul>
de los diseños fijo y líquido es
similar. Para tener una idea real de </div>
ellos, debe verlos en su navegador </div>
y ver cómo reaccionan cuando <div id = "contenido">
ajusta el tamaño de la ventana del <div id = "función">
navegador. <p>Característica</p>
</div>
El diseño de ancho fijo seguirá siendo <div class = "artículo columna1">
del mismo ancho sin importar el <p>Columna uno</p>
tamaño de la ventana del navegador, </div>
mientras que el diseño líquido se <div class = "artículo columna2">
estirará (o encogerá) para llenar la <p>Columna dos</p>
pantalla. </div>
<div class = "artículo columna3">
El HTML es el mismo para el ejemplo <p>Columna tres</p> </
de diseño de ancho fijo en esta div>
página y el ejemplo de diseño líquido </div>
que ve a continuación. <div id = "pie de página">

<p>YCopiar; Copyright 2011</p> </

div>
</body>

383 LLA
SÍYO
UNED
Utah
T
 artículo

La regla para el <cuerpo> El elemento

CSS
se utiliza para fijar el ancho de la página
cuerpo { en 960 píxeles, y se centra
ancho: 960px; estableciendo los márgenes izquierdo y
margen: 0 automático;} derecho en auto.
# contenido {
desbordamiento: automático; Los cuadros principales de la página
altura: 100%;} tienen un margen de 10 píxeles para

# nav, #feature, #footer {color de crear un espacio entre ellos.

fondo: #efefef; relleno: 10px;

Los paneles de navegación,
margen: 10px;} características y pie de página se
. columna1, .columna2, .columna3 extienden hasta el ancho del elemento
{color de fondo: #efefef; ancho: contenedor (que en este caso es el
300px; <cuerpo> elemento), por lo que no es

flotador izquierdo; necesario especificar un ancho para ellos.

margen: 10px;}
li { Las tres columnas tienen 300 píxeles de
pantalla: en línea; ancho cada una y utilizan la flotador
relleno: 5px;} propiedad, lo que les permite
sentarse uno al lado del otro.

A veces, se utiliza un elemento

HTML adicional para contener la
página, en lugar de fijar el ancho
de <cuerpo>. Esto permite que el
Resultado
fondo de la ventana del
navegador tenga un color
diferente al del fondo del
contenido.

LLA
SÍYO
UNED
Utah
T 384
 arLtiq d Disposición
iCuLie

El diseño líquido usa porcentajes para

capítulo-15 / liquid-layout.html HtMl
especificar el ancho de cada cuadro, de
modo que el diseño se estire para <cuerpo>
ajustarse al tamaño de la pantalla. <div id = "header">
<h1>Logo</h1>
<div id = "nav">
Cuando intente esto en su <ul>
navegador, recuerde hacer la <li> <a href="">Casa</a> </li> <li> <a
ventana más pequeña y más grande. href="">Productos</a> </li> <li> <a
href="">Servicios</a> </li> <li> <a href="">
Acerca de</a> </li> <li> <a href="">
Contacto</a> </li> </ul>

</div>
</div>
<div id = "contenido">
<div id = "función">
<p>Característica</p>
</div>
<div class = "artículo columna1">
<p>Columna uno</p>
</div>
<div class = "artículo columna2">
<p>Columna dos</p>
</div>
<div class = "artículo columna3">
<p>Columna tres</p> </
div>
</div>
<div id = "pie de página">

<p>YCopiar; Copyright 2011</p> </

div>
</body>

385 LLA
SÍYO
UNED
Utah
T
 artículo

Hay una regla sobre el <cuerpo>

CSS
elemento para establecer el ancho de
cuerpo { la página al 90% para que haya un
ancho: 90%; pequeño espacio entre los lados
margen: 0 automático;} izquierdo y derecho de la ventana del
# contenido {desbordamiento: auto;} navegador y el contenido principal.
# nav, #feature, #footer
{margin: 1%;} Las tres columnas tienen un
. columna1, .columna2, .columna3 margen del 1% y un ancho de
{ancho: 31,3%; 31,3%. Esto suma hasta el
flotador izquierdo; 99,9% del ancho del <cuerpo>
margen: 1%;} elemento, por lo que es posible que

. column3 {margin-right: 0%;} li { algunos navegadores no alineen

perfectamente el lado derecho de la

pantalla: en línea; tercera columna con otros elementos de

relleno: 0.5em;} la página.

# nav, #footer {color de fondo:

#efefef; relleno: 0.5em 0;} El <div> los elementos que contienen
la navegación, la función y el pie de
# característica, .artículo página se estirarán para llenar el
{altura: 10em; ancho del contenido <cuerpo>
margen inferior: 1em; elemento. Se les da un margen del
color de fondo: #efefef;} 1% para ayudarlos a alinearse con las
columnas.

Si imagina que la ventana del

Resultado
navegador es muy ancha o muy
estrecha, puede ver cómo las líneas de
texto pueden volverse muy largas o
muy cortas.

Aquí es donde el ancho mínimo

y anchura máxima Las propiedades
ayudan a crear límites dentro de los
cuales el diseño puede extenderse
(aunque Internet Explorer 7 fue la
primera versión de IE que admitió
estas propiedades).

LLA
SÍYO
UNED
Utah
T 386
 Cuadrículas de diseño

La composición en cualquier arte visual (como el diseño, la pintura o la fotografía) es la

ubicación o disposición de los elementos visuales: cómo se organizan en una página.
Muchos diseñadores utilizan una estructura de cuadrícula para ayudarles a colocar
elementos en una página, y lo mismo ocurre con los diseñadores web.

A la derecha, puede ver un conjunto de Las cuadrículas establecen proporciones y Si bien una cuadrícula puede parecer
líneas verticales gruesas superpuestas en la espacios consistentes entre los elementos, una restricción, en realidad:
parte superior del sitio web de un periódico lo que ayuda a crear un diseño de aspecto
● Crea una continuidad entre
para mostrarle cómo se diseñó la página de profesional.
diferentes páginas que pueden
acuerdo con una cuadrícula. Esta cuadrícula
utilizar diferentes diseños.
se llamaCuadrícula de 960 píxeles y es Si hojea las páginas de este libro,
ampliamente utilizado por diseñadores web. verá que también se ha ● Ayuda a los usuarios a predecir dónde
construido de acuerdo con una encontrar información en varias

cuadrícula (que consta de tres páginas.

columnas).
● Facilita la adición de
contenido nuevo al sitio de
Como verá en las páginas 389- forma coherente.
390, es posible crear muchos diseños
diferentes utilizando esta cuadrícula ● Ayuda a las personas a
versátil. colaborar en el diseño de un
sitio de manera coherente.

387 DISEÑO
cuadrícula de ejemplo

DISEÑO 388
 POSIBLES DISEÑOS:
960 píxeles de ancho
Rejilla de 12 columnas

940 píxeles

460 píxeles 460 píxeles

300 px 300 px 300 px

220 píxeles 220 píxeles 220 píxeles 220 píxeles

140 píxeles 140 píxeles 140 píxeles 140 píxeles 140 píxeles 140 píxeles

389 DISEÑO
Estas dos páginas ilustran una cuadrícula La página tiene 960 píxeles de ancho y hay Cada columna tiene un margen
de 12 columnas de 960 píxeles de ancho. 12 columnas de igual tamaño (mostradas establecido en 10 píxeles, lo que crea
Demuestran cómo es posible crear una en gris), cada una de las cuales tiene 60 un espacio de 20 píxeles entre cada
amplia gama de diseños de columnas píxeles de ancho. columna y 10 píxeles a los lados
utilizando esta cuadrícula. izquierdo y derecho de la página.

300 px 620 píxeles

220 píxeles 700 píxeles

460 píxeles 220 píxeles 220 píxeles

300 px 300 px 140 píxeles 140 píxeles

220 píxeles 220 píxeles 140 píxeles 140 píxeles 140 píxeles

DISEÑO 390
 Marcos CSS

Los marcos de CSS tienen como objetivo hacer su vida más fácil al proporcionar el
código para tareas comunes, como crear cuadrículas de diseño, diseñar formularios,
crear versiones de páginas fáciles de imprimir, etc. Puede incluir el código del marco
CSS en sus proyectos en lugar de escribir el CSS desde cero.

ventajas desventajas
● Con el fin de satisfacer una amplia
● Le ahorran tener que escribir ● A menudo requieren que use
variedad de necesidades, a menudo
código repetidamente para las nombres de clase en su código
contienen más código del que
mismas tareas. HTML que solo controlan la
necesita para su página web en
presentación de la página (en
particular (comúnmente conocido
● Se habrán probado en lugar de describir su contenido).
como código "hinchado").
diferentes versiones de
navegador (lo que ayuda a
evitar errores del navegador).

PRESENTANDO EL MARCO DE Css 960.gs

Uno de los usos más populares de descargar para ayudar a diseñar sus tal como grid_3 (para un bloque que
los marcos CSS es la creación de páginas usando una cuadrícula de 12 se extiende sobre tres columnas),
cuadrículas para diseñar páginas. columnas. (Además, hay una variación en grid_4 (para un bloque que se
Existen varios marcos de la cuadrícula que usa 16 columnas). extiende sobre 4 columnas) y así
cuadrícula, pero el que veremos sucesivamente hasta grid_12
en las próximas páginas es el 960 Para crear una cuadrícula de 12 (para un cuadro que tiene el ancho

Grid System (disponible en columnas, un elemento que contiene la completo de la página). Todas estas

www.960.gs). página completa recibe un clase columnas flotan a la izquierda y hay un

atributo cuyo valor es container_12. margen de 10 píxeles a la izquierda y a la

960.gs proporciona una hoja de estilo Esto establece que el contenido de la derecha de cada una.

que puede incluir en sus páginas página sea de 960 píxeles de ancho e

HTML. Una vez que nuestra página se indica que estamos usando una Hay varios otros marcos CSS basados en

vincule a esta hoja de estilo, puede cuadrícula de 12 columnas. cuadrículas disponibles en línea, como los

proporcionar las clases apropiadas que se encuentran en:

para su código HTML y creará múltiples Hay diferentes clases de bloques blueprintcss.org
diseños de columnas para usted. El que ocupan 1, 2, 3, 4 y hasta 12 lessframework.com
sitio web 960.gs también proporciona columnas de la cuadrícula. Cada developer.yahoo.com/yui/
plantillas que puede bloque usa nombres de clases grids /

391 DISEÑO
 usando la cuadrícula 960.gs

A continuación, puede ver un diseño de muestra de una página como el ejemplo de

página de ancho fijo. En la página siguiente, recrearemos esto usando la hoja de estilo
960.gs. En lugar de escribir nuestro propio CSS para controlar el diseño, necesitaremos
agregar clases al HTML indicando qué tan ancha debe ser cada sección.

940 píxeles

940 píxeles

940 píxeles

300 px 300 px 300 px

940 píxeles

DISEÑO 392
 argtriC Diseño basado en L-e identificación

usando 960.gs
Echemos un vistazo a una página
capítulo-15 / grid-layout.html HtMl
HTML y cómo se ha marcado para
usar el sistema de cuadrícula 960.gs. <cabeza>

<título>Diseño de cuadrícula</título>
<link rel = "stylesheet" type = "text / css"
Puede ver que incluimos el CSS href = "css / 960_12_col.css" /> <estilo>Ver
para la cuadrícula usando el la página de la derecha</estilo> </head>
<enlace> elemento dentro del

<cabeza> de la página. <cuerpo>

<div class = "container_12 clearfix">

Los estilos que escribimos nosotros <div id = "header" class = "grid_12">
mismos se muestran en la página de la <h1>Logo</h1>
derecha. <div id = "nav">
<ul>
El 960_12_col.css La hoja de estilo contiene <li> <a href="">Casa</a> </li> <li> <a
todas las reglas que necesitamos para href="">Productos</a> </li> <li> <a
controlar el diseño de la cuadrícula. El href="">Servicios</a> </li> <li> <a href="">
HTML usa los nombres de las clases: Acerca de</a> </li> <li> <a href="">
Contacto</a> </li> </ul>
container_12 para actuar como un

contenedor para toda la página e indicar </div>

que estamos usando una cuadrícula de 12 </div>
columnas <div id = "feature" class = "grid_12">
<p>Característica</p>
clearfix para asegurarse de que los </div>
navegadores conozcan la altura del <div class = "article grid_4">
cuadro contenedor, porque solo <p>Columna uno</p>
contiene elementos flotantes (esto </div>
soluciona el problema que encontró en <div class = "article grid_4">
las páginas 371-372) <p>Columna dos</p>
</div>
grid_12 para crear un bloque de doce <div class = "article grid_4">
columnas de ancho <p>Columna tres</p> </
div>
grid_4 para crear un bloque de cuatro <div id = "footer" class = "grid_12">
columnas de ancho <p>YCopiar; Copyright 2011</p> </
div>
</div> <! - .container_12 -> </body>

393 LLA
SÍYO
UNED
Utah
T
 artículo

La hoja de estilo 960.gs se ha encargado

CSS
del diseño, creando el ancho correcto
*{ para las columnas y estableciendo los
familia de fuentes: Arial, Verdana, sans-serif; color: espacios entre ellas. Por lo tanto, las
# 665544; únicas reglas que necesitábamos
alineación de texto: centro;} agregar se muestran en esta página.
# nav, #feature, .article, #footer Estas reglas:
{background-color: #efefef;
● Controla la fuente y la
margen superior: 20px;
posición del texto en los
relleno: 10px 0px 5px 0px;} cuadros
# característica, .artículo
{altura: 100px;} ● Establecer los colores de fondo para
li { las cajas

pantalla: en línea;
● Establecer la altura de las cajas de
relleno: 5px;}
artículos y características

● Agregue un margen en la parte superior

e inferior de cada cuadro
Resultado

LLA
SÍYO
UNED
Utah
T 394
 a LLhojas de estilo ee
utLitCip
señor
@importar

Algunos autores de páginas web

Chapter-15 / multiple-style-sheets-import.html HtMl
dividen sus reglas de estilo CSS en
hojas de estilo independientes. Por <! DOCTYPE html>
ejemplo, pueden usar una hoja de <html>
estilo para controlar el diseño y otra <cabeza>
para controlar las fuentes, los colores, <título>Varias hojas de estilo: importación</título> <enlace
etc. rel = "hoja de estilo" tipo = "texto / css"
href = "css / styles.css" /> </
Algunos autores toman aún head>
más modular Acercarse <cuerpo>
a hojas de estilo, creando hojas de estilo <! - Contenido de la página HTML aquí -> </
independientes para controlar la body>
tipografía, el diseño, los formularios, las </html>
tablas e incluso diferentes estilos para
cada subsección de un sitio.

Hay dos formas de agregar varias

hojas de estilo a una página:

1: Su página HTML puede vincularse a

capítulo-15 / styles.css CSS
una hoja de estilo y esa hoja de estilo
puede usar @importar @import url ("tablas.css"); @import
regla para importar otras hojas de estilo. url ("typography.css"); cuerpo {

2: En el HTML puede utilizar un color: # 666666;

<enlace> elemento para cada color de fondo: # f8f8f8;
hoja de estilo. alineación de texto: centro;}
# página {
El ejemplo de esta página usa uno ancho: 600px;
<enlace> elemento en el HTML alineación de texto: izquierda;

para enlazar a una hoja de estilo margen izquierdo: automático;

llamada styles.css. Esta hoja de margen derecho: automático;

estilo luego usa el borde: 1px sólido # d6d6d6;
@importar regla para importar el relleno: 20px;}
typography.css y h3 {
tables.css archivos. color: # 547ca0;}

Si una hoja de orzuelo usa la @importar

regla, debería aparecer antes que las
otras reglas.

395 LLA
SÍYO
UNED
Utah
T
 estilo muLtipLeasrhteiC eLtes
Enlace

En esta página puede ver la

HtMl Chapter-15 / multiple-style-sheets-link.html
otra técnica para incluir varias
<! DOCTYPE html> hojas de estilo. Dentro de
<html> <cabeza> elemento es un separado

<cabeza> <enlace> elemento para cada hoja de

<título>Varias hojas de estilo: enlace</título> <enlace rel estilo.

= "hoja de estilo" tipo = "texto / css"
href = "css / site.css" /> Los contenidos de site.css son
<link rel = "stylesheet" type = "text / css" idénticos a styles.css en la página de
href = "css / tables.css" /> la izquierda, excepto que el código
<link rel = "stylesheet" type = "text / css" no contiene @importar reglas.
href = "css / typography.css" /> </
head> Al igual que con todas las hojas de estilo,
<cuerpo> si se aplican dos reglas al mismo

<! - Contenido de la página HTML aquí -> </ elemento, las reglas que aparezcan más

body> adelante en un documento tendrán

</html> prioridad sobre las reglas anteriores.

En el ejemplo de esta página,

cualquier regla en typography.css
Resultado
tendría prioridad sobre las reglas
en site.css (porque las reglas de
tipografía se incluyen después de
las otras reglas).

En el ejemplo de la página
anterior, las reglas en styles.css
tendría prioridad sobre las reglas
en typography.css. Esto se debe a
que cuando @importar
se utiliza la regla, que es el punto en el que
el navegador considera que las reglas
están activas.

LLA
SÍYO
UNED
Utah
T 396
397 DISEÑO
 ejemplo
Diseño

Este ejemplo muestra un diseño moderno estilo

revista utilizando la cuadrícula 960.gs. El uso de esta
hoja de estilo nos ahorra tener que crear todo el
código CSS nosotros mismos.

Se han agregado varias clases de la hoja de estilo 960.gs al código para

indicar cuántas columnas de la cuadrícula debe atravesar cada elemento.
Como vio en este capítulo, la hoja de estilo 960.gs usa laflotador
propiedad para colocar los bloques uno al lado del otro.

Al comienzo de la página, el encabezado utiliza un posicionamiento fijo (lo que significa

que no se mueve cuando el usuario se desplaza hacia abajo en la página). Elíndice z
La propiedad se agrega al encabezado para mantenerlo en la parte superior del contenido restante

mientras el usuario se desplaza hacia abajo en la página.

Tanto el encabezado como el pie de página están contenidos en <div> elementos que se
extienden por todo el ancho de la página. Dentro de esos elementos contenedores se
encuentran otros elementos que usan clases de la hoja de estilo 960.gs para garantizar que los
elementos en el encabezado y pie de página se alineen con el resto del contenido.

El artículo de fondo ocupa todo el ancho de la página. Elpush_7

y push_9 Las clases son parte de la hoja de estilo 960.gs y se utilizan en el
artículo principal para mover el encabezado y el contenido de este artículo
hacia la derecha.

Debajo del artículo principal puede ver cuatro bloques, cada uno de los cuales tiene 3
columnas de ancho. Estos contienen imágenes seguidas de enlaces a más artículos.

Este ejemplo también utiliza imágenes de fondo para crear un fondo texturizado
para la página y el encabezado, y también para contener las imágenes del
artículo destacado. Aprenderá más sobre estos en el próximo capítulo.

Tenga en cuenta: Si ve este ejemplo en Internet Explorer 6, los PNG transparentes

utilizados en este diseño pueden tener un fondo gris. Para obtener más información
sobre este problema, visite el sitio web que acompaña a este libro, donde puede
encontrar un JavaScript simple que soluciona este problema.

DISEÑO 398
 ejemplo
Diseño

<! DOCTYPE html

<html>
<cabeza>

<título>Diseño</título>
<link rel = "stylesheet" type = "text / css" href = "css / 960_12_col.css" /> <style type =
"text / css">
@Perfil delantero {

familia de fuentes: 'QuicksandBook';

src: url ('fuentes / Quicksand_Book-webfont.eot');
src: url ('fonts / Quicksand_Book-webfont.eot? #iefix') formato ('embedded-opentype'),
url ('fonts / Quicksand_Book-webfont.woff') formato ('woff'), url ('fonts /
Quicksand_Book-webfont.ttf') formato ('truetype'), url ('fonts / Quicksand_Book-
webfont.svg # QuicksandBook ') formato (' svg '); font-weight: normal;

estilo de fuente: normal;}

cuerpo {
color: #ffffff;
fondo: # 413f3b url ("images / bg.jpg"); familia de fuentes: Georgia,
"Times New Roman", Times, serif; tamaño de fuente: 90%;

margen: 0px;
alineación de texto: centro;}
a{
color: # b5c1ad;
decoración de texto: ninguna;}
a: hover {
color: #ffffff;}
. encabezado {

background-image: url ("images / bg-header.jpg"); relleno:

0px 0px 0px 0px;
altura: 100px;
posición: fija;
arriba: 0px;
ancho: 100%;
índice z: 50;}
. nav {
flotar derecho;
familia de fuentes: QuicksandBook, Helvetica, Arial, sans-serif;

399 DISEÑO
 ejemplo
Diseño

relleno: 45px 0px 0px 0px;

alineación de texto: derecha;}
. envoltorio {
ancho: 960px;
margen: 0px automático;

background-image: url ("images / bg-triangle.png");

repetición de fondo: no repetición;
posición de fondo: 0px 0px;
alineación de texto: izquierda;}
. logo {
margen inferior: 20px;}
h1, h2 {
familia de fuentes: QuicksandBook, Helvetica, Arial, sans-serif; font-
weight: normal;
text-transform: mayúsculas;} h1 {

tamaño de fuente: 240%;

margen superior: 140px;}

. fecha {
familia de fuentes: Arial, Helvetica, sans-serif;
tamaño de fuente: 75%;
color: # b5c1ad;}
. intro {
claro: izquierda;
tamaño de fuente: 90%;

altura de línea: 1.4em;}

. historia principal {

background-image: url ("images / triangles.png");

repetición de fondo: no repetición;
posición de fondo: 122px 142px; altura:
570px;}
. Más artículos {
borde superior: 1px sólido #ffffff;
relleno: 10px;}
. más-artículos p {borde inferior: 1px sólido #
807c72; relleno: 5px 0px 15px 0px;

tamaño de fuente: 80%;}

DISEÑO 400
 ejemplo
Diseño

. más-artículos p: último hijo {borde

inferior: ninguno;}
. pie de página {

Limpia los dos;

fondo: rgba (0, 0, 0, 0.2); relleno: 5px
10px;}
. pie de página p {

familia de fuentes: Helvetica, Arial, sans-serif;

tamaño de fuente: 75%;
alineación de texto: derecha;}

. pie de página a {

color: # 807c72;}
</style>
</head>
<cuerpo>

<div class = "encabezado">

<div class = "container_12">
<div class = "grid_5">
<img src = "images / logo.png" alt = "Pedal Faster - La revista de bicicletas modernas"
width = "216" height = "37" class = "logo" />
<img src = "images / header-triangle.png" alt = "" width = "116" height = "100" /> </div>

<div class = "nav grid_7">

<a href="">casa</a> / <a href="">noticias</a> / <a href="">archivo</a> /
<a href="">acerca de</a> / <a href="">contacto</a> </div>

</div>
</div>
<div class = "envoltorio">
<div class = "contenedor_12 de la historia principal">
<div class = "grid_6 push_6">
<h1> <a href="">Engranaje fijo para siempre</a> </h1>
</div>
<div class = "intro grid_3 push_9">
<p class = "fecha">16 DE ABRIL DE 2011</p> <p>El veloheld combina un diseño minimalista con
una calidad excelente. Desprovisto de
Gráficos excesivos y componentes de cambio de marchas, la gama de productos veloheld nos
deleita con su belleza y simplicidad ... </p>

401 DISEÑO
 ejemplo
Diseño

</div>
</div> <! - .main-story ->
<div class = "contenedor de más artículos_12">
<h2 class = "grid_12"> <a href="">Más artículos</a> </h2> <div class =
"grid_3">
<img src = "images / more1.jpg" alt = "El camino por delante" width = "220" height = "125" /> <p> <a
href="">On the Road: desde el punto de vista del fanático del piñón fijo</a> </p> <p> <a href="">Historia
de la marca: Pashley Cycles - construido a mano en Inglaterra</a> </p> <p> <a href="">Frame Wars:
innovaciones en la fabricación y reparación de bicicletas</a> </p> </div>

<div class = "grid_3">

<img src = "images / more2.jpg" alt = "Cuaderno de bocetos" width = "220" height = "125" />
<p> <a href="">Touring Diary: un cuaderno de bocetos en su cesta</a> </p> <p> <a href="">Top
Ten Newcomers para 2012: un vistazo a lo que está por venir</a> </p> <p> <a href="">InnerTube:
los mejores videos de ciclismo en la web</a> </p> </div>

<div class = "grid_3">

<img src = "images / more3.jpg" alt = "Letrero de taller de reparaciones" width = "220" height =
"125" /> <p> <a href="">Revisión del producto: no todas las cestas fueron creadas de la misma manera</
a> </p> <p> <a href="">Salir al público: Fuera & amp; Acerca del fundador de Public</a> </p> <p> <a
href="">Defensa del carril bici: conozca sus derechos</a> </p> </div>

<div class = "grid_3">

<img src = "images / more4.jpg" alt = "Schwinn Spitfire" width = "220" height = "125" /> <p> <a
href="">Salón de la fama de bicicletas: el Schwinn Spitfire de 1958</a> </p> <p> <a href="">Encuesta para
lectores: ¡Comparta sus pensamientos con nosotros!</a> </p> <p> <a href="">Chain Gang: la evolución de
la humilde cadena de bicicletas</a> </p> </div>

</div> <! - .more-articles -> </div> <!

- .wrapper ->
<div class = "footer clearfix">
<div class = "container_12">
<p class = "grid_12"> <a href="">Información legal</a> | <a href="">Intimidad
Política</a> | <a href="">Copyright y copia; Pedal más rápido 2011</a> </p> </div>

</div>
</body>
</html>

DISEÑO 402
 resumen
Diseño

X <div> Los elementos se utilizan a menudo como elementos que

contienen para agrupar secciones de una página.

X Los navegadores muestran las páginas en un flujo normal a

menos que especifique una posición relativa, absoluta o fija.

X El flotador La propiedad mueve el contenido a la izquierda o derecha de

la página y se puede utilizar para crear diseños de varias columnas.

(Los elementos flotantes requieren un ancho definido).

X Las páginas pueden tener un ancho fijo o diseños líquidos (elásticos).

X Los diseñadores mantienen las páginas dentro de los 960-1000 píxeles

de ancho e indican de qué se trata el sitio dentro de los 600 píxeles

superiores (para demostrar su relevancia sin desplazarse).

X Las rejillas ayudan a crear diseños profesionales y flexibles.

X Los marcos CSS proporcionan reglas para tareas comunes.

X Puede incluir varios archivos CSS en una página.

 dieciséis
Imagenes

X Controlar el tamaño de las imágenes en CSS

X Alinear imágenes en CSS

X Agregar imágenes de fondo
 Controlar el tamaño y la alineación de sus
imágenes mediante CSS mantiene las
reglas que afectan la presentación de su
página en CSS y fuera del marcado HTML.

También puede lograr varios efectos interesantes utilizando

imágenes de fondo. En este capítulo aprenderá a:

● Especifique el tamaño y la alineación de una imagen usando

● Agregar imágenes de fondo a los cuadros

● Crear imágenes cambiantes en CSS

407 IMAGENES
Traducido del inglés al español - www.onlinedoctranslator.com

IMAGENES 408
 cortliendre
a crlograndes tamaños de
Imágenes en css
Puede controlar el tamaño de
capítulo-16 / image-size.html HTML
una imagen utilizando el ancho y
altura properties en CSS, al igual que puede <img src = "images / magnolia-large.jpg"
hacerlo con cualquier otro cuadro. class = "large" alt = "Magnolia" /> <img
src = "images / magnolia-medium.jpg"
Especificar el tamaño de las imágenes class = "medium" alt = "Magnolia" />
ayuda a que las páginas se carguen de <img src = "images / magnolia-small.jpg"
manera más fluida porque el código class = "pequeño" alt = "Magnolia" />
HTML y CSS a menudo se cargará antes
que las imágenes, y decirle al
navegador cuánto espacio dejar para
CSS
una imagen le permite representar el
resto de la página sin esperar a que se img.large {
descargue la imagen. ancho: 500px;
altura: 500px;}
Puede pensar que es probable que su sitio img.medium {
tenga imágenes de todos los tamaños ancho: 250px;
diferentes, pero muchos sitios utilizan altura: 250px;}
imágenes del mismo tamaño en muchas de img.small {
sus páginas. ancho: 100px;
altura: 100px;}
Por ejemplo, un sitio de comercio electrónico

tiende a mostrar fotos de productos del mismo

tamaño. O, si su sitio está diseñado en una

cuadrícula, entonces puede tener una selección

de tamaños de imagen que se usan

comúnmente en todas las páginas, como por

ejemplo:

Retrato pequeño: 220 x 360

Paisaje pequeño: 330 x 210
Foto principal: 620 x 400

Siempre que utilice imágenes de

tamaño uniforme en un sitio,
puede utilizar CSS para controlar
las dimensiones de la
imágenes, en lugar de poner las
dimensiones en el HTML.

40 9 IIM
MAMÁ
AG
GES
 artículo

Primero debe determinar los tamaños

Resultado
de las imágenes que se usarán
comúnmente en todo el sitio, luego
asigne un nombre a cada tamaño.

Por ejemplo:
pequeña

medio
grande

Donde el <img> los elementos

aparecen en el HTML, en lugar
de utilizar ancho y altura
atributos, puede utilizar estos
nombres como valores para el clase
atributo.

En el CSS, agrega selectores para

cada uno de los nombres de clase,
luego usa el CSS ancho y altura
propiedades para controlar las dimensiones

de la imagen.

IIM
MAMÁ
AG
GES 4110
0
 a rItgIc
AlabamanlEn
por ejemplo, imágenes
UTILIZAR CSS

En el último capítulo, viste cómo flotador La

Chapter-16 / aligning-images.html HTML
propiedad se puede usar para mover un
elemento a la izquierda oa la derecha de su <p> <img src = "images / magnolia-medium.jpg"
bloque contenedor, permitiendo que el alt = "Magnolia" class = "alinear medio a la izquierda" /> <b>
texto fluya a su alrededor. <i>Magnolia</i> </b> es un género grande que contiene más de
200 especies de plantas con flores ...</p> <p> <img src =
En lugar de usar el <img> "images / magnolia-medium.jpg"
elementos alinear atributo, los autores alt = "Magnolia" class = "alinear medio a la derecha" />
de páginas web utilizan cada vez más el Algunas magnolias, como <yo>Magnolia stellata</yo>
flotador propiedad para alinear y <yo>Magnolia soulangeana</yo>, florecen bastante temprano
imágenes. Hay dos formas en que esto en la primavera antes de que las hojas se abran ...</p>
se logra comúnmente:

1: El flotador La propiedad se
CSS
agrega a la clase que se creó para
representar el tamaño de la img.align-left {
imagen (como el pequeña class en flotador izquierdo;
nuestro ejemplo). margen derecho: 10px;}
img.align-right {
2: Se crean nuevas clases con flotar derecho;
nombres como alinear a la izquierda o margen izquierdo: 10px;}
alinear a la derecha para alinear las img.medium {
imágenes a la izquierda o derecha de la ancho: 250px;
página. Estos nombres de clase se altura: 250px;}
utilizan además de las clases que
indican el tamaño de la imagen.

Resultado
En este ejemplo puede ver el
alinear a la izquierda y alinear a la derecha

clases utilizadas para alinear la imagen.

También es común agregar un

margen a la imagen para asegurarse
de que el texto no toque sus bordes.

4
41111 IIM
MAMÁ
AG
GES
 centerIngaIm rtaIg
celes
UTILIZAR CSS

De forma predeterminada, las

HTML Chapter-16 / centering-images.html
imágenes son elementos en línea. Esto
<p> <img src = "images / magnolia-medium.jpg" significa que fluyen dentro del texto
alt = "Magnolia" class = "alinear-centro medio" /> <b> <i> circundante. Para centrar una imagen,
Magnolia</i> </b> es un género grande que contiene más de debe convertirse en un elemento de
200 especies de plantas con flores. Eso nivel de bloque usando elmonitor
lleva el nombre del botánico francés Pierre Magnol y, habiendo propiedad con un valor de cuadra.
evolucionado antes de que aparecieran las abejas, las flores se
desarrollaron para fomentar la polinización por los escarabajos.</ Una vez que se ha convertido en un
p> elemento a nivel de bloque, existen dos
formas comunes en las que puede
centrar horizontalmente una imagen:

1: en el elemento contenedor,
CSS puede utilizar el texto alineado
img.align-center { propiedad con un valor de centrar.
bloqueo de pantalla;
margen: 0px automático;} 2: En la propia imagen, puede utilizar
img.medium { el margen propiedad y establezca los
ancho: 250px; valores de los márgenes izquierdo y
altura: 250px;} derecho en auto.

Puede especificar nombres de clases

que permitan centrar cualquier
elemento, de la misma forma que puede
hacerlo para las dimensiones o
alineación de las imágenes.
Resultado

Las técnicas para especificar el

tamaño de la imagen y la alineación
de las imágenes también se pueden
utilizar con HTML5 <figura> elemento,
que conoció en la página 119.

IIM
MAMÁ
AG
GES 4112
2
 Imágenes de fondo
imagen de fondo

El imagen de fondo
capítulo-16 / background-image-body.html CSS
La propiedad le permite colocar una
imagen detrás de cualquier elemento cuerpo {
HTML. Esta podría ser la página completa o background-image: url ("images / pattern.gif");}
solo una parte de la página. De forma
predeterminada, se repetirá una imagen de
fondo para llenar todo el cuadro.

El camino a la imagen sigue

Resultado
las letras. url y se pone entre
paréntesis y comillas.

Aquí está el mosaico de

imagen utilizado en este

ejemplo.

En el primer ejemplo, puede ver

una imagen de fondo que se aplica
capítulo-16 / background-image-element.html CSS
a una página completa (porque el
selector de CSS se aplica al < pag {

cuerpo> elemento). En el segundo background-image: url ("images / pattern.gif");}

ejemplo, la imagen de fondo solo
se aplica a un párrafo.

Si busca en línea, encontrará

Resultado
muchos recursos que ofrecen
texturas de fondo que puede
usar en sus páginas.

Las imágenes de fondo suelen ser lo

último que se carga en la página (lo que
puede hacer que un sitio web parezca
lento en cargar). Al igual que con
cualquier imagen que utilice en línea, si el
tamaño del archivo es grande, la descarga
tardará más.

413 IMAGENES
 repetirIngaIm rtaIg
celes
repetición de fondo
adjunto de fondo
El repetición de fondo
CSS capítulo-16 / background-repeat.html
la propiedad puede tener cuatro valores:

cuerpo {
background-image: url ("images / header.gif");
background-repeat: repeat-x;}
repetir
La imagen de fondo se repite tanto
horizontal como verticalmente (la
forma predeterminada en que se
muestra si el repetición propiedad
Resultado no se utiliza).

repetir-x
La imagen se repite solo
horizontalmente (como se muestra en
el primer ejemplo de la izquierda).

repetir-y
La imagen se repite solo
verticalmente.
CSS capítulo-16 / background-attach.html

cuerpo { no repetir
background-image: url ("images / tulip.gif"); La imagen solo se muestra una vez.
repetición de fondo: no repetición;
adjunto de fondo: fijo;} El adjunto de fondo
La propiedad especifica si una imagen de
fondo debe permanecer en una posición o
moverse a medida que el usuario se
Resultado
desplaza hacia arriba y hacia abajo en la
página. Puede tener uno de dos valores:

reparado
La imagen de fondo permanece en
la misma posición en la página.

Desplazarse
La imagen de fondo se mueve hacia arriba y hacia

abajo a medida que el usuario se desplaza hacia

arriba y hacia abajo en la página.

IIM
MAMÁ
AG
GES 4114
4
 POSICIÓN DE ANTECEDENTES
posición de fondo

Cuando una imagen no se

capítulo-16 / background-position.html CSS
repite, puede utilizar el
posición de fondo cuerpo {
propiedad para especificar en qué lugar background-image: url ("images / tulip.gif");
de la ventana del navegador se debe repetición de fondo: no repetición;
colocar la imagen de fondo. background-position: centro superior;}

Esta propiedad suele tener un par

de valores. El primero representa la
Resultado
posición horizontal y el segundo
representa la vertical.

arriba a la izquierda

centro izquierda

abajo a la izquierda

parte superior central

centro centro
Chapter-16 / background-position-percent.html CSS
centro inferior
cuerpo {
Justo arriba
background-image: url ("images / tulip.gif");
centro derecho repetición de fondo: no repetición;
posición de fondo: 50% 50%;}
boton derecho

Si solo especifica un valor, el segundo

Resultado
valor predeterminado será
centrar.

También puede utilizar un par de píxeles o

porcentajes. Estos representan la distancia
desde la esquina superior izquierda de la
ventana del navegador (o cuadro
contenedor). La esquina superior izquierda
es igual a0% 0%. El ejemplo mostrado, con
valores de

50% 50%, centra la imagen

horizontal y verticalmente.

415 IMAGENES
 cortoa Rh Icnld
ejército mi
de reserva

antecedentes

El antecedentes La propiedad actúa

CSS capítulo-16 / background-shorthand.html
como una abreviatura de todas las
cuerpo { demás propiedades de fondo que
fondo: #ffffff url ("images / tulip.gif") acaba de ver, y también
no repetir arriba a la derecha;} color de fondo propiedad.

Las propiedades deben especificarse

en el siguiente orden, pero puede
omitir cualquier valor si no desea
Resultado
especificarlo.

1: color de fondo
2: imagen de fondo
3: repetición de fondo
4: adjunto de fondo
5: posición de fondo

CSS3 también admitirá el uso

de varias imágenes de fondo
repitiendo el antecedentes
taquigrafía. Porque pocos
Los navegadores admitían esta propiedad en el

momento de escribir este artículo, no se usaba

comúnmente.

div {
antecedentes:
url (ejemplo-1.jpg)
arriba a la izquierda sin repetición,

url (ejemplo-2.jpg)
abajo a la izquierda sin repetición,
url (ejemplo-3.jpg)
centro superior repetición-x;}

La primera imagen se muestra en la parte

superior y la última en la parte inferior.

IIM
MAMÁ
AG
GES 4116
6
 Iamratg
Icelreollovers
& sprItes
Usando CSS, es posible crear un enlace o
Chapter-16 / image-rollovers-and-sprites.html HTML
botón que cambia a un segundo estilo
cuando un usuario mueve el mouse <a class="button" id="add-to-basket">
sobre él (conocido como Añadir al carrito</a>
dese la vuelta) y un tercer estilo cuando <a class="button" id="framing-options">
hacen clic en él. Opciones de encuadre</a>

Esto se logra configurando una

imagen de fondo para el enlace o
CSS
botón que tiene tres estilos
diferentes del mismo botón (pero un botón {
que solo deja suficiente espacio para altura: 36px;
mostrar uno de ellos a la vez). Puede background-image: url ("imágenes / button-sprite.jpg"); sangría
ver la imagen que estamos usando de texto: -9999px;
en este ejemplo a la derecha. En display: inline-block;} a # add-
realidad, presenta dos botones en to-basket {
una imagen. ancho: 174px;
background-position: 0px 0px;} a #
Cuando el usuario mueve el framing-options {
mouse sobre el elemento o hace ancho: 210px;
clic en él, la posición de la imagen background-position: -175px 0px;} a # add-
de fondo se mueve para mostrar la to-basket: hover {
imagen relevante. background-position: 0px -40px;} a #
framing-options: hover {
Cuando se utiliza una sola imagen para background-position: -175px -40px;} a # add-
varias partes diferentes de una interfaz, to-basket: active {
se conoce como duende. background-position: 0px -80px;} a #
Puede agregar el logotipo y otros framing-options: active {
elementos de la interfaz, así como posición de fondo: -175px -80px;}
botones a la imagen.

La ventaja de usar sprites es que el

navegador web solo necesita solicitar
una imagen en lugar de muchas
imágenes, lo que puede hacer que la
página web se cargue más rápido.

4117
7 IIM
MAMÁ
AG
GES
 artículo

En este ejemplo, puede ver dos enlaces

ESPÍRITU DE IMAGEN COMPLETA
que parecen botones. Cada uno de los
botones tiene tres estados diferentes.
Todos ellos están representados en una
sola imagen.

Porque el <a> elemento es un

elemento en línea, establecemos el
monitor propiedad de estos enlaces
para indicar que deben ser
bloque en línea elementos. Esto nos
permite especificar el ancho y alto
Resultado
de cada <a> elemento para que
coincida con el tamaño de su botón
correspondiente.

El posición de fondo
La propiedad se utiliza para
mover la imagen y mostrar el
botón en el estado correcto.

Cuando el usuario se desplaza sobre

un enlace, el:flotar pseudo-clase
tiene una regla que mueve el
posición de fondo de la imagen
para mostrar un estado
diferente para ese botón.

Del mismo modo, cuando el usuario hace

clic en el enlace, el:activo La pseudoclase
tiene una regla para mostrar el tercer
estado de ese botón.

Los dispositivos de pantalla táctil no

cambiarán el estado de un enlace cuando
el usuario pasa el mouse sobre él, ya que
las pantallas aún no tienen una forma de
saber cuándo el usuario está pasando el
mouse. Sin embargo, cambiarán su
apariencia cuando el usuario los active.

IIM
MAMÁ
AG
GES 4118
8
 csrst3Ic: lgeradIntes
a
imagen de fondo

CSS3 introducirá la capacidad

Chapter-16 / gradient.html CSS
de especificar un degradado
para el fondo de un cuadro. El # degradado {
degradado se crea usando el / * color de respaldo * /
imagen de fondo propiedad y, en el color de fondo: # 66cccc;
momento de escribir este artículo, los / * imagen alternativa * /
diferentes navegadores requerían una background-image: url (images / fallback-image.png);
sintaxis diferente. / * Firefox 3.6+ * /
imagen de fondo: -moz-linear-gradient (# 336666,
Dado que no es compatible con todos # 66cccc);
los navegadores, es posible especificar / * Safari 4+, Chrome 1+ * /
una imagen de fondo para el cuadro imagen de fondo: -webkit-gradient (lineal, 0% 0%,
primero (que representaría el 0% 100%, desde (# 66cccc), hasta (# 336666));
degradado) y luego proporcionar las / * Safari 5.1+, Chrome 10+ * /
alternativas de CSS para los imagen de fondo: -webkit-linear-gradient (# 336666,
navegadores que admiten degradados. # 66cccc);
/ * Opera 11.10+ * /
En esta página, nos enfocamos en imagen de fondo: -o-linear-gradient (# 336666,
gradientes lineales. Puede ver que # 66cccc);
para crear un degradado lineal, altura: 150px;
necesitamos especificar dos colores ancho: 300px;}
(entre los que se encuentra el
degradado).

Resultado
Algunos navegadores le permiten
especificar el ángulo del degradado, o
incluso diferentes tipos de degradados
(como los degradados radiales), pero el
soporte no está tan extendido como el
de los degradados lineales.

4119
9 IIM
MAMÁ
AG
GES
 contraste de
Imágenes de fondo

Si desea superponer texto en una imagen de fondo, la imagen debe ser baja
contraste para que el texto sea legible.

alto contraste bajo contraste pantalla

Un alto contraste Un bajo contraste Una pantalla

antecedentes antecedentes añadido a un alto

la imagen hace la imagen hace imagen de contraste

el texto dificil el texto más fácil hace el texto

leer. leer. más fácil de leer.

La mayoría de fotografías tienen un Las aplicaciones de edición de imágenes Para superponer texto en una imagen
contraste bastante alto, lo que como Photoshop y GIMP tienen con alto contraste, puede colocar un
significa que no son ideales para herramientas que le permiten ajustar color de fondo semitransparente (o
usar como imagen de fondo. manualmente sus imágenes para tener un "pantalla") detrás del texto para
contraste más bajo. mejorar la legibilidad.

IMAGENES 420
421 IMAGENES
 ejemplo
Imagenes

Este ejemplo demuestra cómo usar CSS para crear un

diseño de galería de imágenes simple.

Se aplica una textura de fondo a toda la página repitiendo una imagen

con la textura detrás de <cuerpo> elemento. Una imagen de fondo
repetida a veces se denominafondo de pantalla.

El contenido de la página se coloca dentro de un <div> elemento cuya clase es

envoltura. Se utiliza para fijar el ancho de la página en 720 píxeles. Sus márgenes

izquierdo y derecho se establecen enauto para centrarlo en el medio de la pantalla.

Las imágenes se encuentran dentro de un HTML5 <figura> elemento, y sus títulos

se proporcionan en el <figcaption> elemento. CSS se utiliza para establecer las
dimensiones y el color de fondo de cada <figura> elemento. Las dimensiones de
las propias imágenes también se establecen mediante CSS, y se les da un borde
gris de un solo píxel.

Para los subtítulos, se utiliza una imagen de fondo a la izquierda del texto. No queremos
que esta imagen ocupe el fondo, por lo que especificamos que no debe repetirse. El
relleno se utiliza a la izquierda del texto para que las palabras no pasen por encima de la
imagen de fondo.

Cada uno de los <figura> elementos está contenido dentro de un <div>, que tiene
dos propósitos. En primer lugar, se utiliza para crear el diseño de tres columnas
especificando un ancho y márgenes para el elemento y luego flotando hacia la
izquierda. En segundo lugar, agrega una sombra sutil debajo de cada imagen.
Esto crea una apariencia tridimensional que lo hace parecer una tarjeta. Para
asegurarse de que se encuentre debajo de la imagen, elposición de fondo se utiliza
la propiedad.

IMAGENES 422
 ejemplo
Imagenes

<! DOCTYPE html>

<html>
<cabeza>
<título>Imagenes</título>
<style type = "text / css">
cuerpo {
color: # 665544;
color de fondo: # d4d0c6; background-image: url ("images /
backdrop.gif"); familia de fuentes: Georgia, "Times New
Roman", serif; alineación de texto: centro;}

. envoltorio {
ancho: 720px;
margen: 0px automático;}
. encabezado {

margen: 40px 0px 20px 0px;}

. entrada {
ancho: 220px;
flotador izquierdo;

margen: 10px;
altura: 198px;
background-image: url ("images / shadow.png");
repetición de fondo: no repetición;
background-position: bottom;}
figura {
bloqueo de pantalla;
ancho: 202px;
altura: 170px;
color de fondo: # e7e3d8; relleno:
9px;
alineación de texto: izquierda;}

figura img {
ancho: 200px;
altura: 150px;
border: 1px solid # d6d6d6;}
figcaption {
background-image: url ("images / icon.png");
padding-left: 20px;
repetición de fondo: no repetición;}
</style>

423 IMAGENES
 ejemplo
Imagenes

</head>
<cuerpo>

<div class = "envoltorio">

<div class = "encabezado">
<img src = "images / title.gif" alt = "Galerie Botanique" width = "456" height = "122" /> <p>Aquí hay
una selección de grabados botánicos antiguos que se encuentran en nuestra colección.</p> </div>

<div class = "entrada">

<figura> <img src = "images / print-01.jpg" alt = "Helianthus" />
<figcaption>Helianthus</figcaption> </
figure>
</div>
<div class = "entrada">
<figure> <img src = "images / print-02.jpg" alt = "Passiflora" />
<figcaption>Passiflora</figcaption> </figure>

</div>
<div class = "entrada">
<figure> <img src = "images / print-03.jpg" alt = "Nyctocalos" />
<figcaption>Nyctocalos</figcaption> </
figure>
</div>
<div class = "entrada">
<figure> <img src = "images / print-04.jpg" alt = "Polianthes" />
<figcaption>Polianthes</figcaption> </figure>

</div>
<div class = "entrada">
<figure> <img src = "images / print-05.jpg" alt = "Ficus" />
<figcaption>Ficus</figcaption> </
figure>
</div>
<div class = "entrada">
<figure> <img src = "images / print-06.jpg" alt = "Dendrobium" />
<figcaption>Dendrobium</figcaption> </
figure>
</div>
</div>
</body>
</html>

IMAGENES 424
 resumen
Imagenes

X Puede especificar las dimensiones de las imágenes usando

CSS. Esto es muy útil cuando usa imágenes del mismo
tamaño en varias páginas de su sitio.

X Las imágenes se pueden alinear tanto horizontal como verticalmente

usando CSS.

X Puede utilizar una imagen de fondo detrás del cuadro creado

por cualquier elemento de una página.

X Las imágenes de fondo pueden aparecer solo una

vez o repetirse en el fondo del cuadro.

X Puede crear efectos de imagen cambiante moviendo la

posición de fondo de una imagen.

X Para reducir la cantidad de imágenes que tiene que cargar su

navegador, puede crear sprites de imágenes.

 Diseño HTML5
17
X Elementos de diseño HTML5
X Cómo entienden los navegadores antiguos los elementos nuevos

X Diseñar elementos de diseño HTML5 con CSS

 HTML5 presenta un nuevo conjunto de elementos
que ayudan a definir la estructura de una página.

Se tratan aquí (en lugar de con los otros elementos HTML que
conoció anteriormente en el libro) porque le resultará más fácil
comprender cómo se pueden usar ahora que ha visto cómo CSS
puede controlar el diseño de una página. Estos nuevos
elementos jugarán un papel importante en la creación de
diseños en el futuro. En este capítulo verá:

● Los nuevos elementos de diseño HTML5 y sus usos

● Cómo ofrecen alternativas útiles al <div> elemento

● Cómo asegurarse de que los navegadores antiguos reconozcan estos elementos

Al igual que con todo el contenido HTML5 y CSS3, su uso aún

está sujeto a cambios, pero los desarrolladores web ya lo
utilizan ampliamente y es probable que desee utilizarlos.

429 DISEÑO HTML5

DISEÑO HTML5 430
 HTML tradicional
LayouTs

Durante mucho tiempo, los autores de páginas web utilizaron <div> elementos para agrupar
elementos relacionados en la página (como los elementos que forman un encabezado, un
artículo, pie de página o barra lateral). Autores utilizadosclase o identificación atributos para
indicar el rol del <div> elemento en la estructura de la página.

A la derecha puede ver un diseño que es <cuerpo>

bastante común (particularmente en los

<div id = "página">
sitios de blogs).
<div id = "encabezamiento">

En la parte superior de la página está el

encabezado, que contiene un logotipo y la
<div id = "nav">
navegación principal.

Debajo hay uno o más artículos o <div id = "contenido"> <div id =

"barra lateral">
publicaciones. A veces, estos son
<div class = "artículo">
resúmenes que enlazan con
publicaciones individuales.

Hay una barra lateral en el lado

derecho (quizás con una opción de
búsqueda, enlaces a otros artículos <div class = "artículo">
recientes, otras secciones del sitio o
incluso anuncios).

Al codificar un sitio como este, los

desarrolladores generalmente colocarían

estas secciones principales de la página <div id = "pie de página">

dentro de <div> elementos y utilice el clase

o identificación atributos para indicar el

propósito de esa parte de la página.

431 DISEÑO HTML5

 nuevo diseño HTML5
elementos

HTML5 introduce un nuevo conjunto de elementos que le permiten dividir las partes
de una página. Los nombres de estos elementos indican el tipo de contenido que
encontrará en ellos. Todavía están sujetos a cambios, pero eso no ha impedido que
muchos autores de páginas web los utilicen.

<cuerpo> Este ejemplo tiene exactamente la

misma estructura que se ve en la página
<div id = "página">
anterior. Sin embargo, muchos de los <
<encabezado>
div> Los elementos han sido

reemplazados por nuevos elementos de

diseño HTML5.
<nav>

Por ejemplo, el encabezado se encuentra

<div id = "contenido"> dentro de un nuevo <encabezado>
<aparte>
elemento, la navegación en un <nav>
<artículo>
elemento, y los artículos son
individuales <articulo> elementos.

El objetivo de crear estos nuevos

elementos es que los autores de

<artículo> páginas web puedan utilizarlos para

ayudar a describir la estructura de la
página. Por ejemplo, el software de
lectura de pantalla puede permitir a los
usuarios ignorar encabezados y pies de
página y acceder directamente al
<footer> contenido. Del mismo modo, los
motores de búsqueda pueden dar más
importancia al contenido de una

<artículo> elemento que en el <

encabezado> o <pie de página>
elementos. Creo que estará de acuerdo en

que también hace que el código sea más

fácil de seguir.

DISEÑO HTML5 432

 Encabezados y pies de página
<header> <footer>

El <encabezado> y <pie de página>

capítulo-17 / ejemplo.html HTML
los elementos se pueden utilizar para:

<encabezado>
● El encabezado o pie de página
<h1>Cocina de Yoko</h1>
principal que aparece en la parte
superior o inferior de cada página del
<nav>
sitio. <ul>
<li> <a href="" class="current">hogar</a> </li> <li> <a
● Un encabezado o pie de página
href="">clases</a> </li> <li> <a href="">abastecimiento</
para un individuo <articulo> o
<sección> dentro de la página.
a> </li> <li> <a href="">sobre</a> </li> <li> <a href="">
contacto</a> </li> </ul>

En este ejemplo, el <encabezado>

elemento utilizado para contener el
</nav>
nombre del sitio y la navegación
</header>
principal. El <pie de página> El elemento
contiene información de derechos de
autor, junto con enlaces a la política de
privacidad y los términos y condiciones. capítulo-17 / ejemplo.html HTML
Cada individuo <articulo> y
<footer>
<sección> El elemento también puede
&Copiar; 2011 Cocina de Yoko
tener su propio <encabezado> y
</footer>
<footer> elementos para contener la

información del encabezado o pie de página

para esa sección dentro de la página.

Por ejemplo, en una página con varias

publicaciones de blog, cada publicación
individual puede considerarse como
una sección separada. El

<encabezado> Por lo tanto, el elemento

puede usarse para contener el título y la

fecha de cada publicación individual, y el <
pie de página> puede contener enlaces para

compartir el artículo en sitios de redes

sociales.

Tenga en cuenta que todo el

código que se muestra en este
capítulo se hace referencia en un
documento HTML que se llama:

html5-layout.html

433 DISEÑO HTML5

 navaigráTico
ioLn
mi
<nav>

El <nav> El elemento se utiliza para

HTML capítulo-17 / ejemplo.html
contener los principales bloques de
<nav> navegación del sitio, como la
<ul> navegación del sitio principal.
<li> <a href="" class="current">hogar</a> </li> <li> <a
href="">clases</a> </li> <li> <a href="">abastecimiento</ Volviendo a nuestro ejemplo de blog, si

a> </li> <li> <a href="">sobre</a> </li> <li> <a href=""> quisiera terminar un artículo con enlaces a

contacto</a> </li> </ul> publicaciones de blog relacionadas, estos

no se contabilizarían como bloques de
navegación importantes y, por lo tanto, no

</nav> deberían ubicarse dentro de un

<nav> elemento.

En el momento de redactar este artículo,

algunos de los desarrolladores que ya
utilizaban HTML5 decidieron utilizar el

<nav> elemento para los enlaces que

aparecen en la parte inferior de cada
página (enlaces a cosas como política
de privacidad, términos y condiciones e
información de accesibilidad). Aún está
por verse si esto será ampliamente
adoptado.

HTMLL5 SÍYO
5 LLA UNED
Utah
T 434
 artículos
<artículo>

El <articulo> El elemento actúa como un

capítulo-17 / ejemplo.html HTML
contenedor para cualquier sección de una
página que podría ser independiente y <artículo>
potencialmente sindicada. <figura>
<img src = "images / bok-choi.jpg" alt = "Bok Choi" />
Puede ser un artículo individual o una <figcaption>Bok Choi</figcaption> </figure>
entrada de blog, un comentario o una
publicación en un foro, o cualquier otro <hgroup>
contenido independiente. <h2>Vegetariano japonés</h2> <h3>Curso de
cinco semanas en Londres</h3> </hgroup>
Si una página contiene varios artículos (o
incluso resúmenes de varios artículos), <p>Una introducción de cinco semanas a lo tradicional.
entonces cada artículo individual viviría Comidas vegetarianas japonesas, enseñándote una
dentro de su propio selección de platos de arroz y fideos.</p> </article>
<artículo> elemento.
<artículo>
El <articulo> los elementos incluso se <figura>
pueden anidar unos dentro de otros. Por <img src = "images / teriyaki.jpg"
ejemplo, una publicación de blog puede alt = "salsa teriyaki" /> <figcaption>Salsa
estar dentro de una <articulo> teriyaki</figcaption> </figure>
elemento y cada comentario sobre el

artículo podría vivir dentro de su propio <hgroup>

elemento secundario <articulo> elemento. <h2>Masterclass de salsas</h2>
<h3>Taller de un día</h3> </hgroup>

<p>Un curso intensivo de un día sobre cómo

cree las salsas más deliciosas para usar en una variedad de
cocina japonesa.</p> </article>

435 DISEÑO HTML5

 rsTiid
ceLes
Automóvil club británico

<aparte>

El <aparte> El elemento tiene dos

HTML capítulo-17 / ejemplo.html
propósitos, dependiendo de si está
<aparte> dentro de un <articulo>
<section class = "recetas-populares"> elemento o no.
<h2>Recetas Populares</h2> <a href="">Yakitori (pollo a la
parrilla)</a> <a href="">Tsukune (empanadas de pollo picadas) Cuando el <aparte> el elemento
</a> <a href="">Okonomiyaki (panqueques salados)</a> <a se usa dentro de un <articulo>
href="">Mizutaki (estofado de pollo)</a> </section> elemento, debe contener
información relacionada con el
artículo pero no esencial para su
<section class = "detalles de contacto"> significado general. Por ejemplo,
<h2>Contacto</h2> <p>Cocina una cita extraíble o un glosario
de Yoko<br /> pueden considerarse como un
Calle Redchurch 27<br /> aparte del artículo al que se refiere.
Shoreditch<br />
Londres E2 7DP</p> </ Cuando el <aparte> el elemento
section> se usa fuera de un <articulo>
</aside> elemento, actúa como un contenedor
para el contenido que está relacionado
con toda la página. Por ejemplo, puede
contener enlaces a otras secciones del
sitio, una lista de publicaciones
recientes, un cuadro de búsqueda o
tweets recientes del autor.

HTMLL5 SÍYO
5 LLA UNED
Utah
T 436
 secciones
<sección>

El <sección> El elemento agrupa el

capítulo-17 / ejemplo.html HTML
contenido relacionado y, por lo
general, cada sección tendría su <section class = "recetas-populares">
propio título. <h2>Recetas Populares</h2> <a href="">Yakitori (pollo
a la parrilla)</a>
Por ejemplo, en una página de inicio <a href="">Tsukune (empanadas de pollo picadas)</a> <a
puede haber varios <sección> href="">Okonomiyaki (panqueques salados)</a> <a href="">
elementos para contener diferentes Mizutaki (estofado de pollo)</a> </section>
secciones de la página, como las
últimas noticias, los mejores productos <section class = "detalles de contacto">
y la suscripción al boletín. <h2>Contacto</h2> <p>Cocina
de Yoko<br />
Porque el <sección> grupos de elementos Calle Redchurch 27<br />
elementos relacionados juntos, puede Shoreditch<br />
contener varios elementos distintos Londres E2 7DP</p> </
<artículo> elementos que tienen un section>
tema o propósito común.

Alternativamente, si tiene una

página con un artículo largo, el
<sección> El elemento se puede
utilizar para dividir el artículo en
secciones separadas.

El <sección> El elemento no debe

usarse como envoltorio para toda la
página (a menos que la página solo
contenga una parte distinta de
contenido). Si desea un elemento
contenedor para toda la página, es
mejor dejar ese trabajo en el <div>
elemento.

437 DISEÑO HTML5

 Título g rToiu
Arkansas cpLes
<hgroup>

El propósito de la <hgroup>
HTML capítulo-17 / ejemplo.html
elemento es agrupar un conjunto
<hgroup> de uno o más <h1> mediante
<h2>Vegetariano japonés</h2> <h3>Curso de <h6> elementos para que se
cinco semanas en Londres</h3> </hgroup> traten como un solo encabezado.

Por ejemplo, el <hgroup>

El elemento podría usarse para contener

tanto un título dentro de un <h2>

elemento y un subtítulo dentro de un
<h3> elemento.

Este elemento ha tenido una recepción

mixta. Cuando fue propuesto por
primera vez por la gente
desarrollando HTML5, hubo
algunas quejas y se retiró de las
propuestas de HTML5. Sin
embargo, algunas personas
cambiaron de opinión y se volvió
a agregar al idioma. A algunos
desarrolladores no les gusta el
uso de <hgroup>
elemento, y prefiero colocar un
subtítulo dentro de un <p>
elemento (usando un atributo
para indicar que es un subtítulo).

Algunos sugieren que es de poca

utilidad más que como gancho para
peinar. Sin embargo, ha sido popular
entre aquellos desarrolladores que
creen que es útil agrupar el
encabezado principal y el subtítulo
(ya que ambos pueden ser partes
integrales de un encabezado).

HTMLL5 SÍYO
5 LLA UNED
Utah
T 438
 Cifras
<figura> <figcaption>

Ya conociste al <figura>
capítulo-17 / ejemplo.html HTML
elemento en el Capítulo 5 cuando miramos
las imágenes. Se puede usar para incluir <figura>
cualquier contenido al que se haga <img src = "images / bok-choi.jpg" alt = "Bok Choi" />
referencia desde el flujo principal de un <figcaption>Bok Choi</figcaption> </figure>
artículo (no solo imágenes).

Es importante tener en cuenta que el

artículo aún debería tener sentido si
el contenido de la <figura>
El elemento se movió (a otra parte de
la página, o incluso a una página
completamente diferente).

Por esta razón, solo debe usarse

cuando el contenido simplemente
hace referencia al elemento (y no
para algo que sea absolutamente
integral para el flujo de una página).

Ejemplos de uso incluyen:

● Imagenes

● Videos

● Gráficos

● Diagramas

● Muestras de código

● Texto que apoya el cuerpo

principal de un artículo

El <figura> El elemento también

debe contener un <figcaption>
elemento que proporciona una
descripción de texto para el
contenido de la <figura> elemento.
En este ejemplo, puede ver un
<figura> se ha agregado dentro
del <articulo> elemento.

439 DISEÑO HTML5

 secCionando eLa erMTein
cLTes
<div>

Puede parecer extraño seguir estos

HTML capítulo-17 / ejemplo.html
nuevos elementos revisando el <div>
<div class = "envoltorio"> elemento de nuevo. (Después de
<encabezado> todo, los nuevos elementos a
<h1>Cocina de Yoko</h1> menudo se utilizarán en su lugar).
<nav>
<! - contenido de navegación aquí -> Sin embargo, el <div> element
</nav> seguirá siendo una forma importante
</header> de agrupar elementos relacionados,
<section class = "cursos"> ya que no debería utilizar estos
<! - contenido de la sección aquí -> </ nuevos elementos que acaba de
section> cumplir para fines distintos de los
<aparte> que se indican explícitamente.
<! - aparte el contenido aquí -> </
aside> Donde no hay un elemento adecuado
<footer> para agrupar un conjunto de elementos,
<! - contenido de pie de página aquí -> el <div> todavía se utilizará el elemento.
</footer> En este ejemplo, se utiliza como
</div> <! - .wrapper -> envoltorio para toda la página.

Algunas personas han preguntado por

qué no hay <contenido> elemento para
contener la parte principal de una página.
La razón es que cualquier cosa que se
encuentre fuera del

<encabezado>, <pie de página> o <aparte>

Los elementos pueden considerarse como el

contenido principal.

HTMLL5 SÍYO
5 LLA UNED
Utah
T 4 44
40
 Vinculando alrededor
ELEMENTOS DE NIVEL BLANCO

HTML5 permite a los autores de páginas

capítulo-17 / ejemplo.html HTML
web colocar un <a> elemento alrededor de
un elemento de nivel de bloque que <a href="introduction.html">
contiene elementos secundarios. Esto le <artículo>
permite convertir un bloque completo en <figura>
un enlace. <img src = "images / bok-choi.jpg"
alt = "Bok Choi" />
Este no es un elemento nuevo en <figcaption>Bok Choi</figcaption> </
HTML5, pero no se consideró como figure>
un uso correcto de <a> elemento en <hgroup>
versiones anteriores de HTML. <h2>Vegetariano japonés</h2> <h3>Curso de
cinco semanas en Londres</h3> </hgroup>

<p>Una introducción de cinco semanas a las comidas

vegetarianas japonesas tradicionales, que le enseñará
una selección de platos de arroz y fideos.</p> </article>

</a>

441 DISEÑO HTML5

 ceLrmi
HeLpingar oTLid
Los navegadores entienden
Los navegadores más antiguos que no
CSS capítulo-17 / ejemplo.html
conocen los nuevos elementos HTML5 los

encabezado, sección, pie de página, a un lado, navegación, artículo, figura tratarán automáticamente como

{ elementos en línea. Por lo tanto, para

bloqueo de pantalla;} ayudar a los navegadores más antiguos,

debe incluir la línea de CSS a la izquierda
que indica qué elementos nuevos deben
representarse como elementos de nivel de
HTML capítulo-17 / ejemplo.html
bloque.

<! - [si es IE 9]>

<script src = "http://html5shiv.googlecode.com/svn/ Además, IE9 fue la primera versión de
trunk / html5.js "> </script> <! Internet Explorer que permitió que las
[endif] -> reglas CSS se asociaran con estos
nuevos elementos de diseño HTML5.
Para diseñar estos elementos usando
versiones anteriores de IE, necesita usar
un JavaScript simple conocido como
HTML5 shiv o
Calce HTML5.

No necesita comprender JavaScript

para usarlo. Simplemente puede
vincular a una copia que Google aloja
en sus servidores. Debe colocarse
dentro de uncomentario condicional
que comprueba si la versión del
navegador es menor que (de ahí el lt)
IE9.

Desafortunadamente, esta
solución requiere que cualquier
persona que use IE8 o versiones
anteriores de IE tenga habilitado
JavaScript en su navegador. Si no
tienen JavaScript habilitado, no
podrán ver el contenido de estos
elementos HTML5.

HTMLL5 SÍYO
5 LLA UNED
Utah
T 44 2
443 DISEÑO HTML5
 ejemplo
Diseño HTML5

Este ejemplo muestra un sitio de cocina creado con

nuevos elementos HTML5 para describir la estructura de
la página (en lugar de simplemente agrupar elementos
con <div> elementos).

El encabezado y pie de página de la página se encuentran dentro de <encabezado> y <pie de página>

elementos. Los cursos se agrupan dentro de un <sección>

elemento que tiene un clase atributo cuyo valor es cursos (para distinguirlo de
otros <sección> elementos de la página). La barra lateral se encuentra dentro de
un <aparte> elemento.

Cada uno de los campos vive dentro de un <articulo> elemento, y use el

<figura> y <figcaption> elementos para contener una imagen. Los títulos de
los cursos tienen subtítulos, por lo que se agrupan dentro de un <hgroup>
elemento. En la barra lateral, las recetas y los datos de contacto se colocan
dentro de <sección> elementos.

La página está diseñada con CSS. La única diferencia es que nuestros selectores
están usando los nuevos elementos HTML5 para permitirnos crear reglas que
apunten a esos elementos. Para que CSS funcione en versiones de IE anteriores a
Internet Explorer 9, la página HTML5 contiene un enlace al JavaScript HTML5 shiv
(alojado en los servidores de Google) dentro de un comentario condicional.

DISEÑO HTML5 444

 ejemplo
Diseño HTML5

<! DOCTYPE html>

<html>
<cabeza>
<título>Diseño HTML5</título>
<style type = "text / css">
encabezado, sección, pie de página, a un lado, navegación, artículo, figura, figcaption {
bloqueo de pantalla;}
cuerpo {
color: # 666666;
color de fondo: # f9f8f6;
background-image: url ("images / dark-wood.jpg");
posición de fondo: centro;
familia de fuentes: Georgia, tiempos, serif;
altura de línea: 1.4em;
margen: 0px;}
. envoltorio {
ancho: 940px;
margen: 20px automático 20px
automático; borde: 2px sólido #
000000; color de fondo: #ffffff;}
encabezado {
altura: 160px;
background-image: url (images / header.jpg);} h1 {

sangría de texto: -9999px;

ancho: 940px;
altura: 130px;
margen: 0px;}
nav, footer {
Limpia los dos;
color: #ffffff;
color de fondo: # aeaca8; altura:
30px;}
nav ul {
margen: 0px;
relleno: 5px 0px 5px 30px;} nav li {

pantalla: en línea;
margen derecho: 40px;}
nav li a {

445 DISEÑO HTML5

 ejemplo
Diseño HTML5

color: #ffffff;}
nav li a: hover, nav li a.current {
color: # 000000;}
section.courses {
flotador izquierdo;

ancho: 659px;
borde derecho: 1px sólido #eeeeee;}
artículo {
Limpia los dos;
desbordamiento: automático;

ancho: 100%;}
hgroup {
margin-top: 40px;}
figura {
flotador izquierdo;

ancho: 290px;
altura: 220px;
relleno: 5px;
margen: 20px;
borde: 1px sólido #eeeeee;}
figcaption {
tamaño de fuente: 90%;

alineación de texto: izquierda;}

aparte {
ancho: 230px;
flotador izquierdo;

padding: 0px 0px 0px 20px;}

aparte la sección a {
bloqueo de pantalla;
relleno: 10px;
border-bottom: 1px solid #eeeeee;} sección
a un lado: hover {
color: # 985d6a;
color de fondo: #efefef;} a {

color: # de6581;
decoración de texto:
ninguna;} h1, h2, h3 {
font-weight: normal;}
h2 {

DISEÑO HTML5 446

 ejemplo
Diseño HTML5

margen: 10px 0px 5px 0px;

relleno: 0px;}
h3 {
margen: 0px 0px 10px 0px;
color: # de6581;}
aparte h2 {
relleno: 30px 0px 10px 0px; color:
# de6581;}
pie de página {

tamaño de fuente: 80%;

relleno: 7px 0px 0px 20px;}

</style>
<! - [si es IE 9]>
<script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <! [endif] ->

</head>
<cuerpo>

<div class = "envoltorio">

<encabezado>

<h1>Cocina de Yoko</h1>
<nav>
<ul>
<li> <a href="" class="current">hogar</a> </li> <li> <a
href="">clases</a> </li> <li> <a href="">abastecimiento</
a> </li> <li> <a href="">sobre</a> </li> <li> <a href="">
contacto</a> </li> </ul>

</nav>
</header>
<section class = "cursos">
<artículo>
<figura>
<img src = "images / bok-choi.jpg" alt = "Bok Choi" />
<figcaption>Bok Choi</figcaption> </figure>

<hgroup>
<h2>Vegetariano japonés</h2> <h3>Curso de
cinco semanas en Londres</h3> </hgroup>

447 DISEÑO HTML5

 ejemplo
Diseño HTML5

<p>Una introducción de cinco semanas a las comidas vegetarianas japonesas tradicionales,

enseñándole una selección de platos de arroz y fideos.</p> </article>

<artículo>
<figura>
<img src = "images / teriyaki.jpg" alt = "Salsa teriyaki" /> <figcaption>
Salsa teriyaki</figcaption> </figure>

<hgroup>
<h2>Masterclass de salsas</h2>
<h3>Taller de un día</h3> </hgroup>

<p>Un curso intensivo de un día que analiza cómo crear los más deliciosos
salsas para su uso en una variedad de cocina japonesa.</p> </
article>
</sección>
<aparte>
<section class = "recetas-populares">
<h2>Recetas Populares</h2> <a href="">Yakitori (pollo a la
parrilla)</a> <a href="">Tsukune (empanadas de pollo picadas)
</a> <a href="">Okonomiyaki (panqueques salados)</a> <a
href="">Mizutaki (estofado de pollo)</a> </section>

<section class = "detalles de contacto">

<h2>Contacto</h2> <p>Cocina
de Yoko<br />
Calle Redchurch 27<br />
Shoreditch<br />
Londres E2 7DP</p> </
section>
</aside>
<footer>
&Copiar; 2011 Cocina de Yoko
</footer>
</div> <! - .wrapper -> </body>

</html>

DISEÑO HTML5 448

 resumen
Diseño HTML5

X Los nuevos elementos HTML5 indican el propósito de

diferentes partes de una página web y ayudan a describir
su estructura.

X Los nuevos elementos proporcionan un código más claro (en

comparación con el uso de múltiples <div> elementos).

X Los navegadores más antiguos que no comprenden los

elementos HTML5 deben saber qué elementos son
elementos de nivel de bloque.

X Para que los elementos HTML5 funcionen en Internet Explorer 8 (y

versiones anteriores de IE), se necesita JavaScript adicional, que está

disponible de forma gratuita en Google.

 Proceso
18
& Diseño

X Cómo abordar la construcción de un sitio

X Comprender a su audiencia y sus necesidades
X Cómo presentar la información que los visitantes quieren ver
 En esta sección se analiza un proceso que
puede utilizar al crear un nuevo sitio web.

Analiza quién podría estar visitando su sitio y cómo asegurarse de que las
páginas incluyan la información que necesitan esos visitantes. También
cubre algunos aspectos clave de la teoría del diseño para ayudarlo a crear
sitios de apariencia profesional. En este capítulo, veremos:

● Cómo comprender a la audiencia que puede atraer su

sitio y qué información esperan encontrar en él

● Cómo organizar la información para que los visitantes puedan

encontrar lo que buscan

● Teoría de diseño para presentar información de una manera que ayude

a los visitantes a lograr sus objetivos.

● Consejos de diseño para ayudarlo a crear sitios más

atractivos y profesionales.

453 PROCESO
PROCESO 454
 ¿Para quién es el sitio?

Cada sitio web debe estar diseñado para el público

objetivo, no solo para usted o el propietario del
sitio. Por lo tanto, es muy importante comprender
quién es su público objetivo.

Puede ser útil hacer algunas audiencia objetivo: indiviDuales

preguntas sobre las personas que
espera que estén interesadas en ● ¿Cuál es el rango de edad de su público objetivo?
el tema de su sitio.
● ¿Su sitio atraerá a más mujeres u hombres? ¿Cuál es la combinación?

Si le pregunta a un cliente para ● ¿En qué país viven sus visitantes?

quién es un sitio, no es raro que
● ¿Viven en zonas urbanas o rurales?
responda "el mundo entero".
● ¿Cuál es el ingreso medio de los visitantes?
Siendo realistas, es poco probable
● ¿Qué nivel de educación tienen?
que sea relevante para todos. Si su
sitio vende bombillas, aunque la ● ¿Cuál es su estado civil o familiar?
mayoría de las personas que usan
● Cual es su ocupacion?
una computadora probablemente
usan bombillas, no es probable que ● ¿Cuántas horas trabajan a la semana?
las pidan a alguien en otro país.
● ¿Con qué frecuencia usan la web?

Incluso si el sitio tiene un gran ● ¿Qué tipo de dispositivo utilizan para acceder a la web?
atractivo, aún puede pensar en la
demografía de una muestra de la
audiencia objetivo. audiencia objetivo: empresas

● ¿Cuál es el tamaño de la empresa o departamento relevante?

● ¿Cuál es la posición de las personas en la empresa que visitan su sitio?

● ¿Los visitantes utilizarán el sitio para sí mismos o para otra persona?

● ¿Qué tan grande es el presupuesto que controlan?

455 PROCESO
 Invente algunos visitantes ficticios de su público objetivo
típico. Se convertirán en tus amigos. Pueden influir en las
decisiones de diseño desde las paletas de colores hasta el
nivel de detalle en las descripciones.

Nombre GOrdON muchacha Jaspe ayO Hiedra

Género METRO F METRO METRO F

la edad 28 47 19 32 35

Localización Chicago San Francisco Nueva York Miami Bostón

Ocupación Maestro Abogado Estudiante Venta minorista El periodista

Ingreso $ 62 mil $ 180 mil $ 24 mil $ 160 mil $ 75 mil

Uso de la Web 2-3 días / semana Diario Diario 4-5 días / semana Diario

Si tiene alguna pregunta sobre Podrá pensar en retrospectiva y

cómo se utilizará el sitio o cuáles preguntarse: "¿Qué querrían
deberían ser sus prioridades, Gordon o Molly en esta situación?"

PROCESO 456
 Por qué la gente visita
su página web

Ahora que sabe quiénes son sus visitantes, debe

considerar por qué ellos estan viniendo. Si bien
algunas personas simplemente pasarán por su sitio
web, la mayoría lo visitará por una razón específica.

Su contenido y diseño deben estar Motivaciones clave objetivos específicos

influenciados por los objetivos de sus
usuarios. ● ¿Buscan entretenimiento ● ¿Quieren información /
en general o necesitan investigación general (como
Para ayudar a determinar por qué lograr un objetivo antecedentes sobre un tema /
las personas visitan su sitio web, hay
específico? empresa), o buscan algo
específico (como un hecho
dos categorías básicas de preguntas ● Si hay un objetivo
particular o información sobre
que puede hacer: específico, ¿es personal o
un producto)?
profesional?
1: Los primeros intentos de descubrir ● ¿Ya están familiarizados
● ¿Consideran que dedicar tiempo a
lo subyacente motivaciones por qué con el servicio o producto
esta actividad es imprescindible o
los visitantes vienen al sitio. que ofreces o necesitan
un lujo?
que se les presente?
2: El segundo examina lo específico ● ¿Están buscando información
metas de los visitantes. Estos son urgente, como las últimas
los factores desencadenantes que noticias o actualizaciones sobre
un tema en particular?
los hacen llegar al sitio.ahora.
● ¿Quieren descubrir
información sobre un
producto o servicio específico
que les ayude a decidir si
comprarlo o no?

● ¿Necesitan contactarse contigo? Si es

así, ¿pueden visitar en persona (lo que
podría requerir horarios de apertura y
un mapa)? ¿O podrían necesitar
información de contacto por correo
electrónico o teléfono?

457 PROCESO
 Cuáles son tus visitantes
tratando de lograr

Es poco probable que pueda enumerar todas las

razones por las que alguien visita su sitio, pero está
buscando tareas y motivaciones clave. Esta información
puede ayudar a orientar los diseños de su sitio.

Primero, desea crear una lista de GOrdON compró una raqueta de tenis hace varios años; ahora quiere
razones por las que la gente comprar uno en su sitio para su novia.
vendría a su sitio. Luego, puede
asignar la lista de tareas a los muchacha ha leído sobre su nuevo servicio de guardería para perros
visitantes ficticios que creó en el en la prensa y quiere saber si sería adecuado para ella.
paso descrito en la página
anterior. Jaspe Tuvo una mala experiencia al hospedarse en un hotel cuando visitaba
Sydney, Australia, y quiere presentar una queja.

ayO espera estudiar arquitectura y quiere aprender más sobre un

nuevo curso que se ofrece.

Hiedra es un editor de imágenes y quiere consultar el sitio de un fotógrafo

para ver ejemplos de su trabajo antes de decidir si lo contrata.

PROCESO 458
 Que información
sus visitantes necesitan

Usted sabe quiénes visitan su sitio y por qué lo

hacen, por lo que ahora debe averiguar qué
información necesitan para lograr sus
objetivos de manera rápida y efectiva.

Es posible que desee ofrecer Por lo tanto, tendrá más Información clave
información de apoyo adicional oportunidades de brindarles
que crea que podría resultarle útil. cualquier información adicional ● ¿Los visitantes estarán
que considere útil para ellos (o familiarizados con su área
Observe cada una de las razones por de exponerlos a otros temática / marca o necesita
las que las personas visitarán su sitio productos y servicios que desee presentarse?

y determine qué necesitan para promover). ● ¿Estarán familiarizados con el

lograr sus objetivos. producto / servicio / información
Sin embargo, si no les parece que está cubriendo o necesitan
información básica al respecto?
Puede priorizar niveles de relevante al responder a sus
información desde puntos necesidades, es probable que se
clave hasta información no vayan a otra parte. ● ¿Cuáles son las características
esencial o de fondo. más importantes de lo que
Aquí hay algunas preguntas que le ofrece?
Al asegurarse de que proporciona la ayudarán a decidir qué información
● ¿Qué tiene de especial lo
información que buscan sus proporcionar a los visitantes de su sitio ...
que ofrece que lo diferencia
visitantes, ellos considerarán que su
de otros sitios que ofrecen
sitio es más relevante para ellos. algo similar?
● Una vez que la gente ha
logrado el objetivo que los
envió a su sitio, ¿hay
preguntas comunes que la
gente haga sobre este tema?

459 PROCESO
 ¿CÓMO LO HARÁN MUCHAS PERSONAS?
visita tu sitio

Algunos sitios se benefician de que se actualicen con más

frecuencia que otros. Alguna información (como noticias)
puede cambiar constantemente, mientras que otro
contenido permanece relativamente estático.

Un sitio web sobre tendencias de A menudo, puede ser útil establecer un Buenos servicios
moda deberá cambiar con mucha más cronograma para cuándo se
frecuencia que uno que promueva un actualizará un sitio (en lugar de hacerlo ● ¿Con qué frecuencia vuelven
servicio que la gente no compra con de forma ad hoc). las mismas personas a
regularidad (como plomería doméstica comprarle?

o doble acristalamiento). A menudo encontrará que algunas

● ¿Con qué frecuencia se
partes de un sitio se beneficiarán si
actualiza su stock o cambia
se actualizan con más frecuencia
su servicio?
Una vez que se ha creado un sitio, que otras.
puede llevar mucho tiempo y recursos
actualizarlo con frecuencia. Aquí hay algunas preguntas para ayudarlo información
a decidir con qué frecuencia actualizar el

Calcular la frecuencia con la que es contenido de su sitio web ... ● ¿Con qué frecuencia se actualiza
probable que las personas vuelvan a visitar el tema?

su sitio le da una indicación de la frecuencia

● ¿Qué porcentaje de sus visitantes
con la que debe actualizar el sitio.
volvería para recibir
actualizaciones periódicas sobre
el tema, en comparación con
aquellos que solo necesitarán la
información una vez?

PROCESO 460
 MAPAS DEL SITIO

Ahora que sabe lo que debe aparecer en su

sitio, puede comenzar a organizar la
información en secciones o páginas.

El objetivo es crear un diagrama de Luego, los grupos de información Es posible que deba duplicar cierta
las páginas que se utilizarán para se convierten en el diagrama que información si necesita aparecer
estructurar el sitio. Esto se conoce se conoce como mapa del sitio. en más de una página.
comomapa del sitio y mostrará
cómo se pueden agrupar esas A veces puede ser útil pedir a las Las páginas (o grupos de páginas)
páginas. personas que son el público informarán cómo los usuarios
objetivo que le ayuden a agrupar navegan por el sitio.
Para ayudarlo a decidir qué información la información relacionada.
debe incluirse en cada página, puede Recuerde centrarse en los
utilizar una técnica llamada Un mapa del sitio generalmente objetivos que sus visitantes
clasificación de tarjetas. comenzará con la página de inicio. quieren alcanzar.
Además, si el sitio es grande y está
Esto implica colocar cada pieza de dividido en secciones, cada sección Vale la pena señalar que el
información que un visitante puede requerir su propia página de propietario del sitio puede organizar
pueda necesitar saber en una inicio de sección para vincular a toda la información de una manera
hoja de papel separada y luego la información que contiene. diferente a la que espera el público.
organizar la información Es importante reflejar la
relacionada en grupos. comprensión del público sobre el
Por ejemplo, la mayoría de las tiendas en tema (en lugar de solo la
Cada grupo se relaciona con una línea tienen páginas de inicio de sección comprensión del propietario del sitio).
página y, en sitios más grandes, las para cada tipo de producto, que a su vez

páginas pueden, a su vez, agruparse enlazan con páginas de productos

para crear diferentes secciones del individuales.

sitio web.

461 PROCESO
 MAPA DEL SITIO DE EJEMPLO

Hogar

sobre artículos visitar tienda contacto

Historia noticias Localización Libros

Fundación Reseñas de libros los horarios de apertura regalos

planes futuros prensa Entradas

Entrevistas

PROCESO 462
 WireFrames

Un wireframe es un bosquejo simple de la

información clave que debe ir en cada página de
un sitio. Muestra la jerarquía de la información y
cuánto espacio puede requerir.

Muchos diseñadores tomarán los No debe incluir el esquema de cómo debería verse la página.
elementos que deben aparecer en color, las opciones de fuente, los Puede ser muy útil mostrar los
cada página y comenzarán creando fondos o las imágenes del sitio esquemas de un sitio a un cliente
wireframes. Esto involucra web en el esquema. Debe antes de mostrarle un diseño.
dibujar o sombrear áreas donde irá cada centrarse en qué información Permite al cliente asegurarse de que
elemento de la página (como el logotipo, la debe estar en cada página y crear el sitio tenga todas las funciones e
navegación principal, los encabezados y el una jerarquía visual para indicar información que necesita ofrecer.
cuerpo principal del texto, los inicios de las partes más importantes de
sesión de los usuarios, etc.). cada página. Si solo presenta el diseño de un sitio a
un cliente, es común que se centren en
Al crear una estructura alámbrica, Los wireframes facilitan el el aspecto del sitio, lo que significa que
puede asegurarse de que se incluya diseño porque sabe qué es posible que no planteen problemas
toda la información que debe estar en información debe aparecer en sobre su función después de que se
una página. qué página antes de considerar haya creado el sitio.

El ejemplo de la derecha se Puede dibujar tramas de alambre en También hay herramientas de estructura alámbrica en

creó en Photoshop utilizando papel o usar una aplicación de línea, como las que se encuentran en:

las plantillas que vienen con el gráficos en su computadora (como http://gomockingbird.com

Sistema de rejilla 960.gs. Illustrator o InDesign). http://lovelycharts.com

463 PROCESO
EJEMPLO WireFrame

PROCESO 464
 recibiendo tu mensaje
a través del uso de Diseño

El objetivo principal de cualquier tipo de diseño

visual es comunicar. Organizar y priorizar la
información en una página ayuda a los usuarios a
comprender su importancia y en qué orden leerla.

contenido Priorizar organizando

Las páginas web suelen tener mucha Si todo en una página apareciera Agrupamiento juntos contenido
información para comunicar. Por con el mismo estilo, sería mucho relacionado en bloques o trozos
ejemplo, las páginas de los periódicos más difícil de entender. (Los hace que la página parezca más
en línea tendrán información que no mensajes clave no se destacarían). simple (y más fácil de entender).
aparece en todas las páginas de la
impresión. Haciendo que partes de la página se Los usuarios deben poder
equivalente: vean distinto del contenido circundante, identificar el propósito de cada
los diseñadores dibujan bloque sin procesar cada
● Amasthead o logotipo
atención a (o lejos de) esos elemento individual.
● Enlaces para navegar por el sitio elementos.
Al presentar ciertos tipos de
● Enlaces a contenido relacionado y
Los diseñadores crean algo información en un similar estilo visual
otros artículos populares
conocido como jerarquía visual (como usar el mismo estilo para todos
● Opciones de inicio de sesión o membresía para ayudar a los usuarios a concentrarse los botones o todos los enlaces), los
en los mensajes clave que atraerán la usuarios aprenderán a asociar ese
● Posibilidad de que los usuarios comenten
atención de las personas y luego guiarlos estilo con un tipo particular de
● Informacion registrada hacia los mensajes posteriores. contenido.

● Enlaces a políticas de privacidad,

Observamos la jerarquía visual en las Observamos la agrupación y la
términos y condiciones,
páginas 467-468. similitud en las páginas 469-470.
información publicitaria, canales
RSS, opciones de suscripción

Con tanto en la página, el

diseñador necesita organizar y
priorizar la información para
comunicar su mensaje y ayudar a
los usuarios a encontrar lo que
buscan.

465 PROCESO
Veamos un ejemplo de cómo se
puede utilizar el diseño para
comunicar eficazmente los servicios
de una empresa.

jerarquía visual agrupamiento semejanza

Inmediatamente se llama la Hay varios fragmentos de Hay varios ejemplos de
atención sobre una imagen que información en esta página. similitud dentro de esta página.
muestra el servicio que ofrece esta
empresa y un titular para explicarlo. En la parte superior puede ver el logotipo Los cuatro puntos (en la parte
El tamaño y el fondo de color y la navegación. Debajo de esta se inferior izquierda de la captura de
refuerzan que este es el mensaje encuentra la información que presenta los pantalla) se presentan de manera
principal de la página. servicios de la empresa. similar con encabezados e íconos
consistentes.
Si este servicio resulta atractivo para Más abajo hay tres grupos distintos
el usuario, a continuación puede ver que le muestran qué hacen los Todos los enlaces en el cuerpo del texto están en

más detalles sobre lo que hace, servicios, los costos involucrados y azul, por lo que está claro en qué texto se puede

cuánto cuesta y quién lo usa. algunos de los usuarios de los servicios. hacer clic.

PROCESO 466
 jerarquía visual

La mayoría de los usuarios de la web no leen páginas completas. Más bien, hojean para
encontrar información. Puede utilizar el contraste para crear una jerarquía visual que
transmita su mensaje clave y ayude a los usuarios a encontrar lo que buscan.

Talla color estilo

Los elementos más grandes captarán la atención El color de primer plano y de fondo puede Un elemento puede tener el mismo
de los usuarios primero. Por esta razón, es una llamar la atención sobre mensajes clave. Las tamaño y color que el contenido
buena idea hacer que los encabezados y los secciones más brillantes tienden a llamar la circundante, pero se le aplica un
puntos clave sean relativamente grandes. atención de los usuarios primero. estilo diferente para que se destaque.

Lorem ipsum dolor

Lorem ipsum Lorem ipsum dolor
sentarse amet, consectetur sentarse amet, consectetur
dolor sit amet, consectetur
élite adipiscing. élite adipiscing.
adipiscing elit. Lorem
Lorem ipsum dolor Lorem ipsum dolor
ipsum dolor sit amet,
sentarse amet, consectetur sentarse amet, consectetur
consectetur adipscing elit.
adipscing elit. adipscing elit.

467 PROCESO
jerarquía visual se refiere al orden en que sus ojos perciben lo que ven. Se
crea agregandocontraste visual entre los elementos que se muestran. Los
elementos con mayor contraste se reconocen y procesan primero.

imagenes
Las imágenes crean un alto contraste
visual y, a menudo, atraen primero la
atención. Se pueden utilizar para llamar la
atención sobre un mensaje específico
dentro de la página. En algunos casos, la
imagen correcta puede revelar
sucintamente más de una página de texto
completa.

El efecto de una jerarquía visual

bien diseñada es en gran parte
subliminal. Lograr una buena
jerarquía requiere equilibrio; si
nada se destaca, un sitio puede ser
poco interesante, y si demasiados
aspectos compiten por su atención,
puede ser difícil encontrar los
mensajes clave. Este ejemplo tiene
una jerarquía clara que aborda las
necesidades de los visitantes del
sitio.

PROCESO 468
 agrupación y
semejanza

Cuando le damos sentido a un diseño, tendemos a organizar los elementos visuales en

grupos. Agrupar piezas de información relacionadas puede hacer que un diseño sea más
fácil de comprender. A continuación se muestran algunas formas de lograrlo.

Proximidad cierre continuación

Cuando varios elementos se colocan Cuando nos enfrentamos a una Cuando los elementos se colocan en
juntos, se perciben como más disposición complicada de elementos, una línea o una curva, se percibe que
relacionados que los elementos que se a menudo buscamos un patrón o están más relacionados que aquellos
colocan más separados. (También forma única o reconocible. Se puede que no siguen la misma dirección.
puede anidar grupos de información formar una caja real o imaginaria Esto se puede utilizar para dirigir a
dentro de grupos de información más alrededor de elementos debido a su un lector de una parte de una página
grandes). proximidad y alineación. a la siguiente.

Espacio blanco color fronteras

Colocar elementos relacionados Un color de fondo colocado detrás Se puede trazar una línea
más juntos y dejar un espacio mayor de elementos relacionados para alrededor del borde del grupo o
entre elementos no relacionados. enfatizar su conexión. entre este y sus vecinos.

469 PROCESO
Naturalmente, observamos similitudes en el diseño, y las cosas que son similares se
perciben más relacionadas que las que son diferentes. La repetición de colores,
tamaños, orientaciones, texturas, fuentes o formas similares sugiere que los elementos
coincidentes tienen una importancia o significado similar.

consistencia
En este ejemplo, cada reseña de un libro
Reseñas de libros tiene un estilo coherente para los títulos
de los libros, los nombres de los autores y
Creación cruda Mundos de fantasía
los enlaces de compra. Después de leer
John Maizels Deidi von Schaewen y John Maizels
Creación cruda es el libro definitivo Presentando las creaciones más inusuales, solo uno de los bloques, es posible inferir
sobre arte outsider y proporciona una coloridas y poéticas del mundo, algunas
el significado de los otros elementos de
guía indispensable del arte de las cuales nunca antes habían
autodidacta de este siglo y un relato aparecido impresas. Mundos de fantasía este cuadro que siguen el mismo estilo.
fascinante de la creatividad humana. El incluye los clásicos de la arquitectura de
capítulo tituladoMaravillas del mundo fantasía como el Palais Ideal cerca de Lyon
está principalmente dedicado al Rock y, por supuesto, el Rock Garden de Nek
Garden de Nek Chand e incluye varias Chand en Chandigarh, India.
fotografías en color.
Comprar en Amazon Comprar en Amazon
encabezados
Darle un encabezado a una parte de la
Nek Chand Outsider Art El jardín de rocas información le dice claramente al usuario si
Lucienne Peiry, Philippe Lespinasse MSAulakh
el contenido de la agrupación es relevante
Esta publicación cuenta la historia de Este pequeño libro en blanco y negro es
Nek Chand y su vida y lleva al lector a El comentario de MS Aulakh y el tributo al para él o no. De lo contrario, pueden
un viaje colorido a través de su Rock Rock Garden y no está ampliamente
Garden, la obra de arte ambiental más disponible, pero se pueden encontrar ignorar todos los elementos que contiene.
extensa del mundo. copias usadas de vez en cuando.
También ayuda a los usuarios de lectores
Comprar en Amazon Comprar en Amazon

de pantalla, ya que los usuarios a menudo

tienen la opción de escuchar los títulos de
la página.

Cada fragmento visual puede contener su propia jerarquía como se muestra en este
ejemplo, donde los libros individuales tienen sus propias subsecciones de título, autor,
texto y enlace.

PROCESO 470
 Diseño de navegación

La navegación del sitio no solo ayuda a las personas a encontrar el lugar al que quieren ir,
sino que también les ayuda a comprender de qué se trata su sitio y cómo está organizado. La
buena navegación tiende a seguir estos principios ...

conciso claro selectivo

Idealmente, la navegación debería ser Los usuarios deben poder predecir La navegación principal solo debe reflejar
rápida y fácil de leer. Es una buena idea el tipo de información que las secciones o el contenido del sitio. Las
intentar limitar el número de opciones encontrarán en la página antes de funciones como los inicios de sesión y la
en un menú a no más de ocho enlaces. hacer clic en el enlace. Siempre que búsqueda, y la información legal como los
Estos pueden enlazar a las páginas de sea posible, elija palabras términos y condiciones, etc., se
inicio de la sección que a su vez enlazan descriptivas únicas para cada encuentran mejor ubicadas en otra parte
a otras páginas. enlace en lugar de frases. de la página.

Inicio Perfiles de artistas Exposiciones y eventos Galerías Libros y revistas Acerca de este sitio
web Contáctenos Iniciar sesión Registrarse Términos y condiciones Política de privacidad
 

Inicio Perfiles de artistas Exposiciones Galerías Publicaciones Acerca de Contacto ✔

471 PROCESO
Un sitio grande puede tener navegación o al costado de la página. La extra online
navegación primaria, secundaria e navegación terciaria a menudo se Vaya al sitio web que acompaña a este libro

incluso terciaria. La navegación encuentra en el pie de página de la página. para obtener información sobre cómo

principal suele aparecer en la parte El menú no será la única forma en que los implementar la búsqueda

superior del sitio de izquierda a usuarios naveguen por el sitio. También funcionalidad para su sitio mediante la

derecha, o en el lado izquierdo de la utilizarán enlaces dentro de cada página. búsqueda de Google.

página. La navegación secundaria Algunos sitios también ofrecen una

podría estar debajo de la función de búsqueda.

contexto interactivo consistente

Una buena navegación proporciona Cada vínculo debe ser lo suficientemente Cuantas más páginas contenga un
contexto. Permite al usuario saber grande para hacer clic en él y la sitio, mayor será el número de
dónde se encuentra en el sitio web en apariencia del vínculo debe cambiar elementos de navegación habrá.
ese momento. Usar un color diferente cuando el usuario pasa el cursor sobre Aunque la navegación secundaria
o algún tipo de marcador visual para cada elemento o hace clic en él. También cambiará de una página a otra, es
indicar la página actual es una buena debe ser visualmente distinto del resto mejor mantener la navegación
manera de hacerlo. del contenido de la página. principal exactamente igual.

Inicio Perfiles de artistas Exposiciones Galerías Publicaciones Acerca de Contacto  

Hogar Perfiles de artistas Exposiciones Galerías Publicaciones Acerca de Contacto ✔

PROCESO 472
 resumen
Diseño de procesos

X Es importante comprender quién es su público objetivo,

por qué vendrían a su sitio, qué información quieren
encontrar y cuándo es probable que regresen.

X Los mapas del sitio le permiten planificar la estructura de un sitio.

X Los wireframes le permiten organizar la información que

deberá ir en cada página.

X El diseño se trata de comunicación. La jerarquía visual ayuda a los

visitantes a comprender lo que está tratando de decirles.

X Puede diferenciar entre piezas de información utilizando el

tamaño, el color y el estilo.

X Puede utilizar la agrupación y la similitud para ayudar a

simplificar la información que presenta.

 Práctico
19
información

X Optimización de motores de búsqueda

X Usar análisis para comprender a los visitantes

X Poner su sitio en la web
 Para terminar el libro, veremos
información práctica que lo ayudará
a lanzar un sitio exitoso.
Hay libros completos escritos sobre cada uno de los temas
cubiertos en este capítulo, pero le presentaré los temas clave
que trata cada tema y le daré sugerencias sobre lo que debe
considerar. Ya verás:

● Los fundamentos de la optimización de motores de búsqueda

● Uso de análisis para comprender cómo las personas usan su sitio

después de su lanzamiento

● Poner su sitio en la web

477 INFORMACIÓN PRÁCTICA

INFORMACIÓN PRÁCTICA 478
 buscador
oPtimización (seo)

El SEO es un tema enorme y se han escrito varios libros sobre el tema. Las siguientes
páginas lo ayudarán a comprender los conceptos clave para que pueda mejorar la
visibilidad de su sitio web en los motores de búsqueda.

los basicos técnicas en la página técnicas fuera de la página

La optimización de motores de búsqueda (o Las técnicas en la página son los métodos Lograr que otros sitios se vinculen con

SEO) es la práctica de tratar de ayudar a que que puede utilizar en sus páginas web usted es tan importante como las técnicas

su sitio aparezca más cerca de la parte para mejorar su calificación en los en la página. Los motores de búsqueda

superior de los resultados de los motores de motores de búsqueda. ayudan a determinar cómo clasificar su

búsqueda cuando las personas buscan los sitio al observar la cantidad de otros sitios

temas que cubre su sitio web. El componente principal de esto es que se vinculan al suyo.
mirar las palabras clave que es
En el corazón del SEO está la idea de probable que las personas ingresen Están particularmente interesados en

determinar qué términos es probable que en un motor de búsqueda si sitios cuyo contenido esté relacionado con

las personas ingresen en un motor de quisieran encontrar su sitio, y luego el suyo. Por ejemplo, si estaba ejecutando

búsqueda para encontrar su sitio y luego incluirlas en el texto y el código un sitio web que vendía cebo para peces,

usar estos términos en los lugares HTML de su sitio para ayudar a los es probable que un enlace de un

correctos de su sitio para aumentar las motores de búsqueda a saber que su peluquero no se considere tan relevante

posibilidades de que los motores de El sitio cubre estos temas. como uno de una comunidad de pesca

búsqueda muestren un enlace a su sitio en con caña.

sus resultados. Los motores de búsqueda dependen en

gran medida del texto que se Los motores de búsqueda también
Para determinar quién aparece primero encuentra en sus páginas, por lo que es miran las palabras entre la apertura
en los resultados de búsqueda, los importante que los términos que la <a> etiqueta y cierre </a> etiqueta en
motores de búsqueda no solo miran lo gente buscará estén en el texto. Hay el enlace. Si el texto del enlace
que aparece en su sitio. También siete lugares esenciales donde desea contiene palabras clave (en lugar de
consideran cuántos sitios se enlazan con que aparezcan sus palabras clave. solohaga clic aquí o la dirección de su
usted (y qué tan relevantes son esos sitio web) puede considerarse más
enlaces). Por esta razón, el SEO a Asegurarse de que las imágenes tengan relevante.
menudo se divide en dos áreas: técnicas el texto apropiado en el valor de su alt El

en la página y técnicas fuera de la atributo también ayuda a los motores de Las palabras que aparecen en los
página. búsqueda a comprender el contenido de enlaces a su sitio también deben
las imágenes. aparecer en el texto de la página a la
que enlaza el sitio.

479 INFORMACIÓN PRÁCTICA

 SEO en la página

En cada página de su sitio web hay siete lugares clave donde las palabras clave (las palabras
que las personas pueden buscar para encontrar su sitio) pueden aparecer en orden.
para mejorar su capacidad de búsqueda.

1: título de la página 1
El título de la página aparece en la parte
superior de la ventana del navegador o 2
en la pestaña de un navegador. Se
especifica en el <título> elemento que 3
vive dentro del <cabeza> elemento.

5
2: dirección URL / web
El nombre del archivo es parte de la URL.

Siempre que sea posible, utilice palabras

4
clave en el nombre del archivo. 6

3: encabezados
Si las palabras clave están en un encabezado

<hn> entonces un motor de 5: texto del enlace 7: descripciones de la página

búsqueda sabrá que esta página Use palabras clave en el texto que La descripción también vive dentro del
trata sobre ese tema y le dará creen vínculos entre páginas (en <cabeza> elemento y se especifica
más peso que otro texto. lugar de usar expresiones genéricas mediante un <meta> etiqueta. Debe
como "haga clic aquí"). ser una oración que describa el
4: texto contenido de la página. (Estos no se
Siempre que sea posible, es útil repetir muestran en la ventana del navegador,
las palabras clave en el cuerpo principal 6: texto alternativo de la imagen pero pueden aparecer en las páginas
del texto al menos 2-3 veces. Sin Los motores de búsqueda confían en que usted de resultados de los motores de
embargo, no use en exceso estos proporcione descripciones precisas de las búsqueda).
términos, porque el texto debe ser fácil imágenes en el texto alternativo. Esto también

de leer para un humano. ayudará a que sus imágenes aparezcan en los ¡Nunca intentes engañar a los motores
resultados de las búsquedas basadas en imágenes. de búsqueda! Te penalizarán por ello.
Por ejemplo, nunca agregue texto del
mismo color que el fondo de la página,
ya que pueden detectar esto.

INFORMACIÓN PRÁCTICA 480

 como identificar
palabras clave y frases

Determinar qué palabras clave usar en su sitio puede ser una de las tareas más
difíciles cuando comienza a pensar en SEO. Aquí hay seis pasos que lo ayudarán a
identificar las palabras clave y frases adecuadas para su sitio.

1: Lluvia de ideas 2: organizar 3: investigación

Enumere las palabras que alguien Agrupe las palabras clave en Hay varias herramientas que le
podría escribir en Google para listas separadas para las permiten ingresar sus palabras clave y
encontrar su sitio. Asegúrese de incluir diferentes secciones o categorías luego le sugerirán palabras clave
los diversos temas, productos o de su sitio web. adicionales que le gustaría considerar,
servicios sobre los que trata su sitio. tales como:
Por ejemplo, si su sitio web fuera una adwords.google.co.uk/
tienda de mascotas, es posible que seleccionar / KeywordToolExternal
A menudo es útil preguntar a otras tenga diferentes categorías para (Cuando utilice esta herramienta, seleccione la

personas qué palabras usarían para diferentes animales (como perros, opción "concordancia exacta" en lugar de

encontrar su sitio porque las personas gatos y conejos). "concordancia amplia").

menos familiarizadas con un tema pueden www.wordtracker.com

usar términos diferentes a los suyos. (En En un sitio grande, puede dividir esto www.keyworddiscovery.com
particular, es menos probable que utilicen en subcategorías (por ejemplo, grupos
jerga específica de la industria). separados para diferentes marcas de Una vez que estas herramientas hayan sugerido

alimentos para mascotas). palabras clave adicionales, agregue las

Su lista puede incluir algunas opciones relevantes a sus listas. (Es muy

frases de palabras clave (no solo probable que las herramientas de palabras

palabras individuales) si tiene clave sugieran algunos términos que son

temas que se describen con más irrelevantes, así que omita los que no parezcan

de una palabra. apropiados).

481 INFORMACIÓN PRÁCTICA

4: COMPARAR 5: refinar 6: MAPA

Es muy poco probable que su sitio Ahora debe elegir en qué Ahora que tiene una lista
aparezca en la parte superior de los palabras clave se enfocará. refinada de palabras clave, sabe
resultados de búsqueda para cada Estos siempre deben ser los cuáles tienen más competencia y
palabra clave. Esto es especialmente más relevantes para cada cuáles son más relevantes, es
cierto para temas en los que hay mucha sección de su sitio. hora de comenzar a elegir qué
competencia. Cuantos más sitios ya palabras clave utilizará para cada
hayan sido optimizados para una Si hay una frase que es muy relevante página.
palabra clave determinada, más difícil pero encuentra que hay mucha
será para usted aumentar los competencia, aún debe usarla. Para Elija 3-5 palabras clave o frases que
resultados de búsqueda cuando las mejorar las posibilidades de que se se asignen a cada página de su sitio
personas busquen ese término. encuentre su sitio, puede ver si hay web y utilícelas como palabras clave
otras palabras que podrían para cada página.
Algunos de los sitios de investigación de incorporarse a una frase. Por
palabras clave pueden decirle cuántas ejemplo, si la información o el No debería necesitar repetir las
personas han buscado una palabra servicio que ofrece en su sitio web es mismas palabras clave en todas las
clave específica para ayudarlo a saber específico de una ubicación, a páginas. También es probable que,
cuánta competencia tienen esos menudo encontrará que incorporar a medida que se vaya alejando de la
términos. su ubicación en su lista de palabras página de inicio hacia las secciones
clave ayudará a las personas a del sitio, las palabras clave se
También puede utilizar la función de encontrarlo. volverán más específicas para el
búsqueda avanzada de Google para tema individual tratado en cada
buscar simplemente los títulos de las Si su sitio está promocionando una página.
páginas web. Esto le ayudará a empresa de techos de pizarra en

determinar cuántos sitios tienen esa Australia, entonces es mejor conseguir

palabra clave en el título de sus 100 personas de Australia que estén

páginas. (Cuantas más páginas tengan buscando un techo de pizarra que

el término en el título, más 10,000 de los EE. UU. Que

competencia habrá). buscan otro tipo de techos.

INFORMACIÓN PRÁCTICA 482

 analítica: aprendizaje
acerca de sus visitantes

Tan pronto como las personas comiencen a visitar su sitio, puede comenzar a analizar
cómo lo encontraron, qué estaban mirando y en qué momento se están yendo. Una de las
mejores herramientas para hacer esto es un servicio gratuito ofrecido por
Google llamó a Google Analytics.

firmar uP cómo funciona el código de seguimiento

El servicio de Google Analytics depende Cada vez que alguien carga una página Google Analytics proporciona un
de que se registre para obtener una de su sitio, el código de seguimiento código de seguimiento para cada
cuenta en: envía datos a los servidores de Google sitio web que está rastreando.
www.google.com/analytics donde se almacenan. Luego, Google Debería aparecer justo antes del
El sitio le proporcionará un código proporciona una interfaz basada en la cierre </cabeza> etiqueta. El código
de seguimiento que deberá web que le permite ver cómo los no altera la apariencia de sus
colocar en cada página de su sitio. visitantes usan su sitio. páginas web.

En el momento de escribir este artículo,

Google estaba actualizando su interfaz
de Analytics a la versión 5. Si inicia
sesión en su cuenta y ve una interfaz
diferente, busque un enlace en la
esquina superior derecha de la página
que dice "Nueva versión".

483 INFORMACIÓN PRÁCTICA

 Cuántas personas hay
vienes a tu sitio?

La página de descripción general le brinda una instantánea de la información clave

que probablemente desee conocer. En particular, le dice cuántas personas están
viniendo a su sitio.

Visitas Visitas únicas VISTAS DE PÁGINA

Esta es la cantidad de veces que las Este es el número total de El número total de páginas que todos
personas han visitado su sitio. Si personas que han visitado su sitio los visitantes han visto en su sitio.
alguien está inactivo en su sitio durante el período especificado. La
durante 30 minutos y luego mira cantidad de visitas únicas será Páginas por visita
otra página de su sitio, se contará menor que la cantidad de visitas si La cantidad promedio de páginas
como una nueva visita. las personas han regresado a su que cada visitante ha visto en su
sitio más de una vez en el período sitio por visita.
definido.
Promedio de tiempo en el sitio
La cantidad promedio de tiempo que
cada usuario ha pasado en el sitio por
visita.

selector de fecha
Con el selector de fecha en la esquina
superior derecha del sitio, puede cambiar el
período de tiempo que se muestran los
informes. Cuando inicia sesión,
generalmente se establece en el último
mes, pero puede cambiarlo para informar
sobre un período de tiempo específico.

exportar
El enlace de exportación que se encuentra justo

encima del título que dice "descripción general de

los visitantes" le permite exportar el

estadísticas en esta página para

otras aplicaciones como Excel.

INFORMACIÓN PRÁCTICA 484

 Cuales son tus visitantes
¿mirando a?

El enlace de contenido en el lado izquierdo le

permite obtener más información sobre lo que
ven los visitantes cuando visitan su sitio.

Paginas páginas de destino páginas de salida toP

Esto le indica qué páginas Estas son las páginas a las que llegan las Esto muestra las páginas desde
están mirando más sus personas cuando visitan su sitio por primera las que la gente suele salir. Si
visitantes y también en qué vez. Esto puede ser particularmente útil muchas personas se van de la
páginas pasan más tiempo. porque puede encontrar que las personas no misma página, entonces podría
siempre ingresan a su sitio a través de la considerar cambiar esa página o
página de inicio. mejorarla.

Porcentaje de rebote
Esto muestra la cantidad de
personas que se fueron en la
misma página a la que llegaron.
Una tasa de rebote alta sugiere
que el contenido no es lo que
estaban buscando o que la página
no los animó lo suficiente a buscar
en el resto del sitio. Qué cuenta
como rebote:

● Hizo clic en un enlace a otro sitio

● Hizo clic en un anuncio

● Ingresó una nueva URL

● Usó el botón "Atrás"

● Cerrado el navegador

485 INFORMACIÓN PRÁCTICA

 Dónde están su
¿De qué vienen visitantes?

El enlace de fuentes de tráfico en el lado izquierdo

le permite saber dónde están sus visitantes.
procedente de.

remitentes directo términos de búsqueda

Esto muestra los sitios que se han Esto muestra a qué página llegó un Esto muestra los términos que los usuarios

vinculado a usted y la cantidad de usuario si no lo hizo a través de un enlace ingresaron en un motor de búsqueda para

personas que han ingresado a través de en otro sitio. Es posible que hayan escrito encontrar su sitio. Esto puede ayudarlo a

esos sitios. Si un sitio le envía mucho la URL en su navegador, hayan utilizado aprender cómo los visitantes describen lo

tráfico, póngase en contacto e intente un marcador del navegador o hayan que están buscando (que a menudo es

trabajar juntos para asegurarse de que el hecho clic en un enlace en un correo diferente a cómo alguien podría describir

tráfico siga fluyendo. También puede electrónico, PDF o documento de Word. su propio sitio). Esto puede ayudarlo a

intentar encontrar sitios similares y ajustar su contenido y sus palabras clave de

pedirles que se vinculen con usted. SEO.

características avanzadas
Solo hemos arañado la superficie de lo
que puede averiguar sobre sus
visitantes en Google Analytics. Sus
archivos de ayuda le informan sobre
muchas más funciones avanzadas. Si
tiene una tienda en línea, vale la pena
mirar su seguimiento de comercio
electrónico, que agrega información
sobre los productos vendidos, el
tamaño promedio de la canasta y
mucho más. También puede establecer
objetivos en los que especifique los
caminos que desea que tomen las
personas y luego ver qué tan lejos
llegan a través de esos caminos, lo cual
es especialmente útil cuando se
recopilan datos de los usuarios.

INFORMACIÓN PRÁCTICA 486

 nombres de dominio
y alojamiento

Para poner su sitio en la web, necesitará un

nombre de dominio y alojamiento web.

nombres de dominio Alojamiento web

Su nombre de dominio es su dirección Para que otras personas puedan ver su Espacio del disco
web (por ejemplo, google.com o bbc. sitio, deberá cargarlo en un servidor Esto se refiere al tamaño total de
Co.uk). Hay muchos sitios web web. Los servidores web son todos los archivos que componen su
que le permiten registrar nombres de computadoras especiales que están sitio (todos los archivos HTML y CSS,
dominio. Por lo general, tendrá que pagar constantemente conectadas a Internet. imágenes y scripts).
una tarifa anual para conservar ese nombre Están especialmente configurados para
de dominio. servir páginas web cuando se solicitan. Banda ancha
Esta es la cantidad de datos que la
Por lo general, estos sitios tienen un empresa de alojamiento enviará a los
formulario que le permite verificar si Con la excepción de algunos sitios muy visitantes de su sitio. Si imagina que
su nombre de dominio preferido está grandes, la mayoría de los sitios web viven 10 personas miran cada página de su
disponible y, debido a que ya se han en servidores web administrados por sitio, entonces sería el equivalente a
registrado millones de nombres de empresas de alojamiento web. Esto suele 10 veces la cantidad de espacio en
dominio, es posible que le lleve un ser mucho más económico y fiable que disco que usa.
tiempo encontrar el adecuado para intentar ejecutar sus propios servidores

su sitio. web. Respaldos

Compruebe si la empresa de
Muchos sitios que ofrecen registro de Se ofrecen muchos tipos diferentes alojamiento realiza copias de
nombres de dominio también ofrecen de alojamiento. Ahora echaremos seguridad en su sitio (y con qué
alojamiento web. un vistazo a algunas de las cosas frecuencia). Algunos solo crean copias
clave que le ayudarán a elegir qué de seguridad para que puedan
empresa de alojamiento utilizar. restaurar su sitio web en caso de que
se rompa el servidor. Otros permiten el
acceso a las copias de seguridad (lo
que puede ser útil si accidentalmente
rompe el sitio al actualizarlo).

487 INFORMACIÓN PRÁCTICA

 servicios alojados

cuentas de correo electrónico A menudo, vale la pena buscar reseñas Hay una serie de servicios en línea que
La mayoría de las empresas de alojamiento de una empresa de alojamiento para le permiten apuntar su nombre de
proporcionarán servidores de correo ver cuál ha sido la experiencia de otras dominio a sus servidores. Las
electrónico con sus paquetes de personas con una empresa de plataformas de blogs como
alojamiento web. Deberá comprobar el alojamiento. Desafortunadamente, a WordPress.com, Tumblr y Posterous, o
tamaño del buzón que tiene permitido y la menudo solo puede saber qué tan las plataformas de comercio electrónico
cantidad de buzones que puede utilizar. buena es una empresa de alojamiento como Big Cartel y Shopify proporcionan
cuando algo sale mal, momento en el los servidores en los que está alojado su
lado del servidor que descubre cómo pueden ayudarlo sitio. Si está utilizando una plataforma
idiomas y (por lo que puede esperar ver algunas como esta, no necesitará su propio
bases de datos críticas negativas para cualquier alojamiento para el sitio web, aunque a
Si está utilizando un sistema de gestión de empresa). menudo seguirá necesitando
contenido, es probable que utilice un alojamiento para su correo electrónico.
lenguaje de programación del lado del Si este es el caso, algunas empresas de
servidor y una base de datos (como PHP alojamiento web ofrecen paquetes que
con una base de datos MySQL o ASP.Net solo ofrecerán servicios de correo
con una base de datos SQL Server). electrónico.
Asegúrese de verificar que su empresa de
alojamiento sea compatible con las
tecnologías que su software necesita para
ejecutarse.

INFORMACIÓN PRÁCTICA 488

 ftP y herramientas de terceros

Para transferir su código e imágenes desde su

computadora a su empresa de alojamiento, utiliza algo
conocido como Protocolo de transferencia de archivos.

Como sugiere su nombre, el Protocolo

de transferencia de archivos (o FTP) le
permite transferir archivos a través de
Internet desde su computadora al
servidor web que aloja su sitio.

Hay muchos programas FTP que

ofrecen una interfaz simple que le
muestra los archivos en su
computadora junto con los archivos
que están en su servidor web. Estos
le permiten arrastrar y soltar
archivos desde su computadora al
servidor o viceversa.

489 INFORMACIÓN PRÁCTICA

 Existe una amplia variedad de sitios que ofrecen
servicios comúnmente creados por desarrolladores web
(para evitar que tenga que crearlos usted mismo).

Algunas empresas de alojamiento ofrecen A continuación, se muestra una lista de algunas A continuación, se muestra una lista de algunas

herramientas para cargar archivos en sus aplicaciones FTP populares: herramientas de terceros populares:

servidores mediante un navegador web,

pero es más común usar un programa FTP, FileZilla Blogs
ya que son más rápidos en la transmisión filezilla-project.org wordpress.com
de archivos. Windows, Mac, Linux tumblr.com
posterous.com
Cuando compre su alojamiento FireFTP
web, se le proporcionarán los fireftp.mozdev.org comercio electronico
detalles de FTP que ingrese en su Windows, Mac, Linux shopify.com
programa de FTP para conectarse bigcartel.com
al servidor. Por lo general, será CuteFTP go.magento.com
una dirección (comoftp: // cuteftp.com
midominio.com), un nombre de Windows, Mac boletines de correo electrónico
usuario y una contraseña. Es campaignmonitor.com
importante mantener segura esta SmartFTP mailchimp.com
información para evitar que smartftp.com
extraños accedan a su servidor. Ventanas redes sociales
compartir botones
Transmitir addthis.com
panic.com/transmit addtoany.com
Mac

INFORMACIÓN PRÁCTICA 490

 resumen
Información práctica

X La optimización de motores de búsqueda ayuda a los visitantes a encontrar sus

sitios cuando utilizan motores de búsqueda.

X Las herramientas de análisis como Google Analytics le

permiten ver cuántas personas visitan su sitio, cómo lo
encuentran y qué hacen cuando llegan allí.

X Para poner su sitio en la web, deberá obtener un nombre de

dominio y alojamiento web.

X Los programas FTP le permiten transferir archivos desde su

computadora local a su servidor web.

X Muchas empresas ofrecen plataformas para blogs, boletines informativos por

correo electrónico, comercio electrónico y otras herramientas populares de

sitios web (para que no tenga que escribirlas desde cero).

 Índice

X Arizona

X Atajos HTML y CSS

X Solución de problemas
# símbolo (enlaces) 87, 88 gradientes de fondo 419 cima 366–371
_blanco 86 copias de seguridad 487 propiedad box-shadow 320
<! - -> 182 banda ancha 487 brillo 252
Bordes 3D 310 base 268 Traer al frente 369
Botones de forma 3D 343 atributo bgcolor 138 peculiaridad del navegador 242

Cuadrícula de 12 columnas 387–390 texto parpadeante 282 listas con viñetas sesenta y cinco

Cuadrícula de 960 píxeles 387–390, elementos de bloque 102, 185, 317, propiedad list-style-type 333
391–394, 463 229, 361 posición del marcador 335
css plano 391

A texto en negrita 45

<b> 45
C
abreviaturas 53 propiedad font-weight 279 control de caché 192
encima de la tapa 379 <strong> 51 altura de la tapa 268
posicionamiento absoluto 363, 367 fronteras capitalizar 281
URL absolutas 79 atributo de borde 138 retornos de carro 48
accesibilidad 7 borde (taquigrafía CSS) 312 cascada en CSS 239
texto alternativo 99, 272, 480 color 311 cajas de centrado 315
contraste 253, 420 diseño 469 centrar imágenes 412
encabezados 480 imagenes 319 diseños de centrado 315
controles de formulario de etiquetado 163 radio 321 centrado de texto 285
lectores de pantalla 7 espaciado 340 cambios en el contenido
acrónimos 53 estilo 310 <del> 56
selector de hermanos adyacentes 238 ancho 309 <ins> 56
alinear atributo 103-105 propiedad inferior 366–371 <s> 56
alinear controles de formulario 345 Porcentaje de rebote 485 casillas de verificación (formularios) 155

alineando imágenes usando CSS 411 cajas 300-327 atributo comprobado 155, 156
alineando texto 285 fronteras 309-312, 321 carpeta secundaria 84

transparencia alfa 256 diseño 469 selector de niños 238

atributo alt 99 compensaciones de caja 364, 364–371 fragmentación / agrupación 465
texto alternativo 99, 272, 480 propiedad box-shadow 320 círculos en CSS 322
ampersand 194 cajas de centrado 315 citas 52, 54
analítica 483–486 circulos 322 citar atributo 52
soportes en ángulo 23, 24 formas elípticas 322 atributo de clase 184, 431
GIF animados 117 flotador 370–375 selector de clases 238
ascendente 268, 283 ocultando contenido 317, 318 propiedad clara 372
atributos 25, 26, 38 Modelo de caja IE6 316 etiqueta de cierre 20, 24
nombres de atributos 25, 26 margen 307, 314 cierre 469
selectores de atributos 292 propiedad de altura máxima 305 atributo de códecs 215
valores de atributo 25, 26 propiedad min-height 305 editores de código 29, 31-34, 49
audio 217–223 propiedad de desbordamiento 306 color 246-261
detalles del autor 55, 192 relleno 307, 313 color de fondo 250
atributo de reproducción automática 214, 219 esquemas de posicionamiento 367-375 atributo bgcolor 138
esquinas redondeadas 321 color del borde 311

B propiedad de visibilidad 318

compensaciones de caja 364, 364–371
brillo 252
nombres de colores 249, 252

propiedad de fondo 344 fondo 366–371 selectores de color 251

imagenes de fondo 413-416 izquierda 366–371 valores de color para CSS 251
colores de fondo 138, 250 Derecha 366–371 contraste 253, 420

ÍNDICE
 diseño 467, 469 flotador 364, 370–375 diseño 452–473
códigos hexadecimales 249, 252 flotar (imágenes) 411 Cuadrícula de 960 píxeles 387–390,

hsl / hsla 255-256 fuentes 271-280 391–394, 463

matiz 252, 255 altura 303, 409–410 encima de la tapa 379
ligereza 255 ocultando contenido 317-318 fragmentación / agrupación 465

opacidad 254 como funciona CSS 229–232 columnas 387–390

valores rgb 249, 252 cómo las reglas caen en cascada 239 consistencia 470
rgba 254 herencia 239 diseños de ancho fijo 381,
saturación 252, 255 hojas de estilo internas 236 383–384
seleccionando un color 251 diseño 358-405 transmitir su mensaje
atributo cols 154 Enlaces 290-291 465–466
atributo colspan 133 liza 333-336 agrupación y similitud
columnas (diseño) 375–376 márgenes 314 469–470
comentarios en HTML 182 múltiples hojas de estilo 395 jerarquía de información 465–
comentarios en CSS 249 relleno 313, 337 466
comentarios condicionales 442 cajas de posicionamiento 363-367 diseño 358-405
que contiene elementos 362 propiedades y valores 231 diseños líquidos 382, 385–386
atributo de contenido 191-192 pseudoclases 289-290 tamaños de pantalla y resolución
sistema de gestión de contenidos normas 231–232 377–378
(CMS) 33-34 selectores 231–232, 237–238, mapas del sitio 461

vista de código 34 292 Público objetivo 455

plantillas 81 atributo de estilo 236 motivación de los visitantes 457
vista visual 34 elemento <style> (para interno jerarquía visual 465, 467–468
continuación 469 CSS) 236 tamaños de página web 379–380
contraste 253, 420 mesas 337-340 qué información necesitan los visitantes
atributo de controles 214, 219 texto 282-297 459
símbolo de copyright 194 alineamiento vertical 286 wireframes 463–464
recortar imágenes 113-114 que es CSS 6 gestión de derechos digitales 213
CSS 226–425 qué estilo está usando un elemento dimensiones de cajas en CSS 303
@import rule 395 348 estructura de directorios 81-84
!importante 239 ancho 303, 337, 371, 409-410 imagenes 98
selectores de atributos 292 cufon (tipografías) 272 tráfico directo 486
imagenes de fondo 413-419 símbolos de moneda 194 Espacio del disco 487

fronteras 309-321 tipos de letra cursiva 270 propiedad de visualización 317

cajas 300–327 estilos de cursor 347 símbolo de división 194

compensaciones de caja 366–371 Declaraciones DOCTYPE 181
errores y peculiaridades del navegador 242

limpieza de flotadores 372

D nombre de dominio 10, 487
Sistema de nombres de dominio (DNS)
colores 249, 252, 255–256 fronteras discontinuas 310 9, 10
CSS1, CSS2, CSS3 (versiones) bases de datos 149, 488 bordes punteados 310
242 entrada de fecha 166 cuadro de lista desplegable 157

CSS3 8 páginas predeterminadas 81, 82 sombras paralelas 288, 320

declaración 231–232 definiendo la importancia de un término 54

marcos 391 listas de definiciones 67

estilos de cursor 347 definiciones 54

hojas de estilo externas 235 selector de descendientes 238
estilo externo vs interno descender (tipografías) 268, 283
hojas 241 atributo de descripción 191

ÍNDICE
mi como funciona flash 203
params 218
type = "radio" 155
type = "buscar" 168
comercio electronico 33 swfobject 207–208, 211, 218 tipos de control de formulario 148

editar contenido usos de 204 type = "enviar" 160

<del> 56 destello de contenido sin estilo 278 tipo = "texto" 152
<ins> 56 propiedad flotante 364, 370–375 type = "url" 167
<s> 56 propiedad flotante (imágenes) 411 atributo de acción 151
editar imagenes 108 FLV (formato de video) 211 atributo comprobado 155, 156
editar páginas en un CMS 33 estructura de carpetas 81-84 atributo cols 154
elementos 52 imagenes 98 por atributo 163
definicion de 20, 24, 38 fuentes atributo id 151, 163
diagrama de 23, 24 elegir un tipo de letra 269 atributo maxlength 152
formas elípticas 322 tamaños de fuente 276 atributo de método 151
entrada de correo electrónico 167 fontsquirrel.com 277 atributo múltiple 158
enlaces de correo electrónico 85 especificando una fuente 273 atributo de nombre 152, 155, 156,
bordes en relieve 310 preferencias / pila de fuentes 269 157, 160
énfasis 51 estilos / terminología 267–268 atributo de filas 154
propiedad de celdas vacías 339 escalas de tipo 275 atributo seleccionado 157
elementos vacíos 48 pesos 268 atributo de tamaño 152, 158
ems (para tamaños de fuente) 274, 276 propiedad font-face 271 atributo de valor 155, 156, 157,
ems (unidad de medida propiedad de familia de fuentes 271, 273 160
cajas) 303 propiedad de tamaño de fuente 274, 276 alinear controles de formulario 345
codificacion 209 propiedad font-weight 279 cambiando el botón de enviar en
referencias de entidad 193-194 por atributo 163 flotar 343
selector de igualdad 292 color de primer plano 249 validación de formulario 165

caracteres / códigos de escape barra inclinada 24, 48, 84 obtener el método 151

193-194 código de formato 47 agrupando elementos de formulario 164

selector de existencia 292 formas 144-173 controles de formulario ocultos 162

páginas de salida 485 como funcionan las formas 149–150 estilos de desplazamiento 342

expira (metainformación) 192 que son los formularios HTML 145 botones de imagen 161
hojas de estilo externas (cuando donde colocar las etiquetas 163 pares nombre / valor 150
usar) 241 por qué usar formularios 147 texto del marcador 168
<botón> 162 esquinas redondeadas en entradas de texto

F <fieldset> 164
<formulario> 151
342
estilo con CSS 341–346
tipografías de fantasía 270 <entrada> 155, 159, 160-162, 166 botón de enviar 160
cuadro de entrada / carga de archivos 159 <etiqueta> 163 validación de formulario 165

posicionamiento fijo 364, 368 <leyenda> 164 atributo frameborder 190

diseños de ancho fijo <opción> 157 FTP 489–490
381, 383–384 <seleccionar> 157 diseños de pantalla completa 382

destello 200–223 elemento <textarea> 154

agregando una película flash a su atributo de tipo 155
GRAMO
página 207–208 type = "casilla de verificación" 156

uso decreciente 204 type = "fecha" 166 selector general de hermanos 238
películas flash 203 type = "correo electrónico" 167 GIF 111
reproductor Flash 203 type = "archivo" 159 GIF animados 117
flashvars 212, 218 type = "oculto" 162 CAÑUTILLO 108

video flash 211 type = "imagen" 161 atributos globales 183

ÍNDICE
Google analitico 483–486 <hgroup> 438 imágenes de fondo 413-416
Mapas de Google 189 <nav> 432, 434 (gradientes) 419
Fuentes web de Google 277 <sección> 433, 437 sangría de texto 287
gradientes 419 <fuente> 215, 220 imágenes de la frontera 319

mayor que el símbolo 194 <video> 213–216 puntos de viñeta 334

rejillas 387–390, 463 atributo de reproducción automática 219 elegir imágenes y stock
agrupación y similitud 469, atributo de controles 219 fotografía 97
469–470 atributo de bucle 219 derechos de autor 97

agrupación / fragmentación 465 atributo de precarga 219 cursores 347

agrupar elementos (<div>) 187 atributo de desplazamiento 190 dimensiones 100, 107, 113–114
agrupando elementos en línea atributo sin fisuras 190 en CSS 409–410
(<intervalo>) 188 atributo src (audio) 219 editar imagenes 108, 113-114,
entrada de fecha 166 116, 117

H entrada de correo electrónico 167

entrada de búsqueda 168

formatos de imagen 107
GIF animados 117
hCard 55 Entrada de URL 167 mapa de bits 115

encabezados 22, 43 validación de formulario 165 GIF 111, 115, 118

<hgroup> 438 texto del marcador 168 JPEG 109–110, 115
atributo de altura 100, 214 ayudando al navegador más antiguo PNG 112, 115, 118
propiedad de altura 303 comprender 442 SVG 116
propiedad de altura (imágenes) HTML5 shiv / shim 442 GIF / PNG transparentes 118
409–410 diseño 428–449 formatos vectoriales 116

iframe de altura 189 Diseño HTML5 428–449 resolución 107, 115

códigos hexadecimales 249, 252 HTTP orientación (paisaje /
controles de formulario ocultos 162 obtener el método 151 retrato) 114
ocultando contenido 317, 318 método de publicación 151, 159 posición en el texto circundante
páginas de inicio 81, 82 Encabezados HTTP 151 101
reglas horizontales 48 Capa de sockets seguros (SSL) preparándose para la web 107
video alojado 210 153 reinversiones 417

href 77, 79, 88, 235 atributo http-equiv 192 sprites 417
hsl / hsla 255-256 matiz 252, 255 títulos 99
HTML código de sangría 47
que es HTML 6
HTML 4 179
I sangría de texto 287
index.html 81, 82
HTML5, 179 atributo id 87, 88, 151, 163, 183 jerarquía de información 465–466
Declaración DOCTYPE 181 atributo id (diseño) 431 herencia (CSS) 239
diferencias con XHTML 179 selector de id 238 elementos en línea 102, 186, 229,
HTML5 179 Modelo de caja IE6 316 317, 361
Comparación con HTML 4 179 botón de imagen 161 Proveedor de servicios de Internet (ISP)

<a> (enlaces de nivel de bloque HTML5) resolución de imagen 115 10

441 imagenes 95-120 dirección IP 10
<artículo> 432-439 <img> 99, 100 texto en cursiva 45

<aparte> 436 <figcaption> 439 <em> 51

<audio> 217–220 <figura> 119, 439 propiedad de estilo de fuente 280

<figcaption> 119, 422, 439 atributo src 99 <i> 45

<figura> 119, 422, 439 texto alternativo 99, 480

<footer> 432 alineando imágenes 103-105, 412

<encabezado> 432, 433 alineando imágenes con CSS 411

ÍNDICE
J propiedad de espaciado de letras 284
ligereza 255
METRO

JavaScript 208, 212, 218 como botones 490 mailto: 85

JPEG 109, 109–112 saltos de línea 48 margen: automático 315

justificar 285 propiedad de altura de línea 283 propiedad de margen 314

artículos de línea (listas) 65, 66 propiedad de margen superior 314

K Enlaces 75
<a> 77, 79
propiedad de margen derecho 314
propiedad de margen inferior 314
interletrado 284 atributo href 77 propiedad margin-left 314
palabras clave 191, 479–482 :activo 291 marcadores en listas 333
:atención 291 marcado (definición) 41

L :flotar 291
:Enlace 290
simbolos matematicos 194
propiedad de altura máxima 305

controles de formulario de etiquetado 163 :visitó 290 atributo de longitud máxima 152, 153

páginas de destino 485 agregar / quitar subrayado 282 propiedad max-width 304
atributo lang 25 El enlace se abre en una nueva ventana 86 meta descripciones 480
orden de capa 369 enlace a una parte de una página 87 meta informacion 191-192
diseño 358–405 enlace a una dirección de correo electrónico 85 atributo de método 151
Cuadrícula de 960 píxeles 387–390, 391 enlace a otros sitios 79 propiedad min-height 305
posicionamiento absoluto 363 enlace al mismo sitio 80 propiedad min-width 304
compensaciones de caja 364 enlace a la parte superior de la página 87 dispositivos móviles 377
cajas de centrado 315 Texto del enlace 78, 479, 480 tipografías monoespaciadas 267–270
columnas 371–376, 387–390 # símbolo 87, 88 atributo múltiple 158
diseño 452–473 diseño líquido 382, 385–386 varios navegadores (prueba) 242
<div> 431, 440 ancho mínimo y máximo 304 varias columnas 375–376
posicionamiento fijo 364 liza múltiples idiomas 25
diseños de ancho fijo listas de definiciones 67 múltiples hojas de estilo 395
381, 383–384 listas anidadas 68 música 217–220
flotador 364 listas ordenadas sesenta y cinco reproductor de mp3 218

rejillas 387–397 listas desordenadas 66

ayudando a los navegadores más antiguos <ol> sesenta y cinco
norte
entender HTML5 442 <ul> 66
diseños líquidos 382, 385–386 <li> sesenta y cinco atributo de nombre 152, 153, 155,
flujo normal 363, 365 <dd> 67 156, 157, 160, 191
esquemas de posicionamiento <dl> 67 nombres para atributos 25, 26
posicionamiento absoluto 367 <dt> 67 navegación
posicionamiento fijo 368 estilos de viñetas o números 333- <a> 77, 79
flotadores 336 <a> (enlaces de nivel de bloque HTML5)
limpieza de flotadores 372 espacios entre los elementos de la lista 334 441
flujo normal 365 mostrar elementos uno al lado del otro diseñando navegación 471–472
posicionamiento relativo 366 317 <nav> 432, 434
propiedad de posición 365 usando imágenes para viñetas usando listas para la navegación 317
barras laterales 436 334 elementos anidados 362
tamaños de página 379–380 propiedad list-style-image 334 listas anidadas 68
propiedad de índice z 364 propiedad de estilo de lista 336 nueva ventana 86
principal 283 propiedad list-style-type 333 nofollow (detener motores de búsqueda

propiedad izquierda 366–371 atributo de bucle 214, 219 indexación) 191

menos que símbolo 194 minúscula 281 flujo normal 363, 365

ÍNDICE
bloc 29-30 posicionamiento fijo 364, 368 imágenes de rollover 417

bloc de notas ++ 29 flotador 364, 370–375 carpeta raíz 82

propiedad de posición 365, 366, 367 esquinas redondeadas 321

O atributo de cartel 214

método de publicación 151, 159
esquinas redondeadas en forma
elementos 342
texto oblicuo 280 pragma (metainformación) 192 atributo de filas 154
Ogg Vorbis (formato de audio) 220 selector de prefijo 292 atributo rowpan 134
opacidad 254 atributo de precarga 214, 219
etiqueta de apertura 20, 23

fuentes de código abierto 277

proceso (proceso de diseño)
452–473
S
listas ordenadas sesenta y cinco propiedades (ver Propiedades CSS) tipografías sans-serif 267–270
propiedad de desbordamiento 306 proximidad 469 saturación 252, 255
contenido superpuesto 306 pseudoclases 289 Gráficos vectoriales escalables (SVG)
elementos superpuestos :activo 291 180
propiedad de índice z 369 :atención 291 lectores de pantalla
overline 282 :flotar 291 que hacen los lectores de pantalla 7

:Enlace 290 texto alternativo 272

PAG :visitó 290

pseudo elementos
texto alternativo para imágenes 99

interpretar el marcado semántico

propiedad de relleno 313 :primera linea 289 50
propiedad padding-top 313 :primera letra 289 Texto del enlace 78

propiedad padding-right 313 tamaños de pantalla y resolución

propiedad padding-bottom 313

propiedad padding-left 313
Q 377–378
atributo de desplazamiento 190

propiedad de relleno (tablas) 337 cotizaciones valor de desplazamiento (propiedad de desbordamiento)

tamaños de página 379–380 <blockquote> 52 306

títulos de página 27, 28, 480 citar atributo 52 atributo sin fisuras 190
visitas a la página 484 <q> 52 Optimización de motores de búsqueda

párrafos 44 comillas 194 (SEO) 479–482

elementos padres 362 citas texto alternativo 480

carpeta principal 84 comillas 194 Herramienta de palabras clave de Google 481

entrada de contraseña (formularios) 153 encabezados 480

PC (creando páginas en) 29
porcentajes (tamaños de fuente) 274,
R palabras clave 479–482
Texto del enlace 78, 479, 480
276 botones de radio (formularios) 155 meta palabras clave 191
porcentajes (cajas) 303 remitentes 486 meta descripciones 480
Photoshop 108, 117 posicionamiento relativo 363, 366 técnicas fuera de la página 479
PHP 149, 488 URL relativas 80, 83 técnicas en la página 479–480
píxeles (imágenes / resolución) 115 atributo rel (CSS) 235 nombres de página / URL 480
píxeles (unidad de medida) cambiar el tamaño de las imágenes 113-114 títulos de página 480

274, 276, 303 resolución (imágenes) 107 evitando que las páginas sean
atributo de marcador de posición 168 resolución y tamaños de pantalla indexado 191
PNG 112 377–378 términos de búsqueda 486

PNG transparentes 118 valores rgb 249, 252 capa de sockets seguros (SSL) 153
esquemas de posicionamiento 363 rgba 254 cuadro de selección 157-158

flujo normal 363, 365 propiedad correcta 366–371 atributo seleccionado 157
posicionamiento relativo 363, 366 robots (metainformación) 191 selectores (CSS) 237, 292
posicionamiento absoluto 363, 367 botones de rollover 343 marcado semántico 41, 50

ÍNDICE
enviar al fondo 369 atributo de ancho 137 propiedad text-indent 287
tipografías serif 267, 267–270 tablas de estilo en CSS 337–340 propiedad text-shadow 288
sombreado de filas de tablas alternativas propiedad border-collapse 340 propiedad de transformación de texto 281

338 propiedad de espaciado de borde 340 textwrangler 31

sifr (tipografías) 272 propiedad de celdas vacías 339 Título Atributo 53, 99
mapas del sitio 461-462 agregar / eliminar espacios instrumentos

atributo de tamaño 152, 153, 158 entre celdas 340 Cuadrícula de 960 píxeles 387

tamaño de las cajas en CSS 303 resaltando filas de la tabla 337 blogs 490
botones de redes sociales 490 sombreado de filas alternas 338 Marcos CSS 391
selector de espacio 292 que es una mesa 130 comercio electronico 490

sprites 417 por qué usar tablas 127 boletines de correo electrónico 490

atributo src 99, 189 etiquetas 20-24, 38 Google analitico 483–486

atributo src (audio) 219, 220 atributo de destino 86 Herramienta de palabras clave de Google 481

atributo src (video) 214, 215 Público objetivo 455 HTML5 shiv / shim 442
contexto de apilamiento 369 plantillas (en un CMS) 33, 34, 81 botones de redes sociales 490
tachado 56, 282 texto barra de herramientas para desarrolladores web 348

marcado estructural 41 : pseudoclase activa 291 enlaces a la parte superior de la página 87

estructura : foco pseudoclase 291 propiedad superior 366–371

cómo los documentos usan la estructura : hover pseudo-clase 291 seguimiento de visitantes 483

15 : pseudo elemento de primera letra símbolo de marca registrada 194

cómo HTML describe la estructura 289 transparencia (imágenes) 118

20, 21 : pseudo elemento de primera línea 289 transparecny 256
usando procesadores de texto 17 @Perfil delantero 277 atributo de tipo 152, 153, 155, 159,
atributo de estilo 236 alineando texto 285-286 236
botón de enviar 160 texto parpadeante 282 atributo de tipo (audio) 220
botones de estilo con CSS 343 elegir un tipo de letra 269 atributo de tipo (CSS) 235-236
subíndice 46 sombras paralelas 288 atributo de tipo (video) 215
selector de subcadena 292 formatos 278 tipografías 267–272
selector de sufijo 292 pila de fuentes 269 typekit.com 277
sobrescrito 46 sangría 287 escalas de tipo 275
SVG 116, 278 interletraje / espaciado entre letras 284 selector de tipo 238
swfobject 207–208, 211, 218 interlineado / altura de línea 283

fuentes de código abierto 277

U
T especificando una fuente 273

Talla 274 subrayar 56, 282

mesas 126-141 tipografías 267–270 Localizadores uniformes de recursos

<tabla> 131 escalas de tipo 275 (URL) 82

<tbody> 135 subrayar 282 URL absolutas 79
<td> 131 Mayúscula minúscula 281 URL relativas 80
<tfoot> 135 subrayar 282 estructura de directorios 81

<thead> 135 peso 268, 279 selector universal 238

<th> 132 espaciado entre palabras 284 listas desordenadas 66
<tr> 131 propiedad de alineación de texto 285 cargando páginas web 489–490
atributo bgcolor 138 color de texto 249 mayúsculas 281
atributo de borde 138 propiedad de decoración de texto 282 URLs
atributo colspan 133 mensaje de texto 31-32 Optimización de motores de búsqueda

propiedad de relleno (tablas) 337 editores de texto 29, 31 (SEO) 480

atributo rowpan 134 texto en CSS 264-297 Entrada de URL 167

ÍNDICE
V páginas de salida 485

páginas de destino 485

atributo de valor 155, 156, 157, 160 remitentes 486
valores para atributos 25, 26 subiendo a un servidor web
imagenes vectoriales 116 489–490
propiedad de alineación vertical 286 tamaños de página web 379–380

alineación vertical de imágenes servidores web 7, 9, 10, 81, 84

105-106 espacio en blanco 308, 469
márgenes verticales 308 margen y relleno 307
video 200–223 propiedad de relleno 313
<video> 209 propiedad de margen 314

servicios alojados o autohospedaje espacios entre los elementos de la lista 334

210 colapso de espacio en blanco 47, 308

gestión de derechos digitales 213 manejo de espacios en blanco en HTML

codificacion 209 47
video flash (FLV) 211 atributo de ancho 100, 137, 189,
formatos 213–216 214
AVI, vídeo Flash, h264, propiedad de ancho 303
MPEG, Ogg theora, propiedad de ancho (flotante
QuickTime, WebM, elementos) 371
Windows Media 209 propiedad de ancho (imágenes)

reproductores y complementos 209 409–410

atributo src 214 propiedad de ancho (tablas) 337
ver fuente 35, 162, 317, 318 wireframes 463–464
Vimeo 210 propiedad de espaciado de palabras 284

propiedad de visibilidad 318

visitantes
remitentes 486
X
seguimiento 483 x altura 268
visitantes / visitas / visitas únicas XHTML 179
484 diferencias con HTML 179
editores visuales en un CMS 34, 49 Declaración DOCTYPE 181
jerarquía visual 465, 467, XHTML estricto / de transición
467–468 180
XML 180

W Declaración XML 181

fondo de pantalla (imágenes) 414

marca de agua (imágenes) 414

Y
navegadores web 7 YouTube 210
pruebas en varios navegadores
242
ver fuente 35
Z
barra de herramientas para desarrolladores web 348 eje Z 369
alojamiento web 7, 9, 487 propiedad de índice z 364, 369
cuentas de correo electrónico 488

diseño de página web 358–405

páginas web

ÍNDICE
Solución de problemas
Aquí hay algunos problemas que los principiantes enfrentan comúnmente, junto con el
páginas donde puede encontrar soluciones.

Empezando Texto CSS general

El navegador muestra el marcado Parte del texto parpadea antes de No se muestra un estilo especificado.
escrito (no la página de resultados). mostrar la fuente correcta. Recuerde que los selectores de CSS distinguen entre

Compruebe que la extensión del archivo sea.html Tienes un destello de contenido sin mayúsculas y minúsculas.

y no .TXT. pág. 30, 32 estilo. pág 278

Verifique que sus selectores sean
El texto en negrita, la cursiva, los Al copiar texto de procesadores de correctos. pág 238
encabezados o el texto del enlace se palabras, se agregan muchas etiquetas
extienden más de lo esperado. adicionales al marcado. La barra de herramientas del desarrollador web

Compruebe que ha cerrado la etiqueta Copie el texto en un editor de texto puede ayudarlo a encontrar el selector correcto.

correspondiente, por ejemplo, </a>. pág.21, 22 sin formato (para eliminar el pág 348

formato) y luego péguelo en su

No se encuentra la página a la que he vinculado. editor HTML. p. 49 Si los selectores son correctos,
Verifique la URL relativa. pág. 83, 84 ¿tiene otro selector que se
El texto parece más grande / más pequeño en aplique al mismo elemento más
algunas pantallas. adelante en el CSS? p. 239, 240
IMÁGENES
Por lo general, esto se debe a variaciones en las

Las imágenes no aparecen. resoluciones de pantalla. Además, compruebe que la CSS varía en algunos navegadores. Hay

Verifique la URL relativa. pág. 83, 84 escala de tipo esté configurada para el una serie de errores de CSS /

<cuerpo> elemento. p. 377, 276 peculiaridades del navegador que

Las imágenes se ven borrosas. significan que representan la página de

Compruebe que ha guardado sus El tamaño de fuente es incorrecto en IE cuando manera ligeramente diferente: intente

imágenes en el formato correcto y uso ems. buscar el problema y vea si es un error /

en el tamaño en el que desea Véase más arriba. pág 276 peculiaridad de CSS conocido.p. 242

mostrarlas. p 109-113
La fuente que especifiqué no se
HTML 5
Las imágenes de los bordes no se muestran. muestra en algunos navegadores.
Esto solo funciona con los últimos La computadora debe tener El navegador no aplica estilos
navegadores. (Además, verifique la instalada esa fuente. p 269-272 a los elementos HTML5.
URL relativa).p. 319, 21, 22 Si usa @ font-face debe estar en Si es IE, es posible que deba
varios formatos. pág 341 usar HTML5 shiv / shim. p442
Los GIF que se redimensionaron ahora se ven

granulosos o tienen bordes irregulares. Mis fuentes se ven irregulares en una PC. Los elementos a nivel de bloque se

Verifique el espacio de color en su Algunas fuentes no se suavizan tan bien como representan como elementos en línea.

programa de edición de imágenes. otras en una PC. Pruebe con un tipo de letra Usar bloqueo de pantalla para decirle al
Debe ser RGB (no color indexado). diferente o pruebe con una versión más gruesa. navegador qué elementos HTML5 son
pág 272 elementos a nivel de bloque. pág 442

ÍNDICE
DISEÑO
El diseño parece más grande / más pequeño No se muestra una imagen Mi elemento flotante ocupa todo el
en algunas pantallas. de fondo en mi caja. ancho de la ventana del navegador
La resolución de un monitor afecta el ¿El cuadro al que está aplicando (o cuadro contenedor).
tamaño de los elementos que aparecen en el estilo tiene una altura y un Compruebe que haya especificado un
la página. p. 377, 378 ancho definidos? p. 303 ancho para el elemento flotante.
pág 371

Los márgenes por encima y por debajo de un ¿El cuadro contenedor tiene una propiedad de

cuadro no se muestran. desbordamiento establecida en automático? El contenedor alrededor de mis elementos

Los márgenes verticales colapsan. p. 308 p. 373, 374 flotantes tiene un píxel de altura.
El elemento contenedor no conoce
Mi contenido no cabe en el cuadro Mis imágenes de fondo no se muestran la altura de los elementos flotantes
contenedor / ventana del navegador. cuando se imprime la página. dentro de él. Puede agregar un
Puede lidiar con esto usando la propiedad La mayoría de los navegadores no imprimen elemento que actúe como una caja
de desbordamiento. p. 306, 316 imágenes de fondo de forma predeterminada para de compensación o usar el
ayudar a ahorrar tinta. Puede ajustar esto en sus Desbordamiento propiedad con un valor

Las cajas tienen un tamaño diferente en IE. preferencias de impresión. establecido en auto. pág 373

Algunas versiones de IE utilizan un modelo

de caja diferente al de todos los demás Hay un espacio entre la IE agregó un margen adicional a mis
navegadores. Utilizar unaDOCTYPE ventana del navegador y mi elementos flotantes.
declaración para hacer que las versiones antiguas contenido. Selecciona el monitor propiedad a
de IE se comporten como otros navegadores. Es posible que deba configurar margen y en línea.
pág 316 relleno en el <cuerpo> elemento a
0. p. 313, 314
Los cuadros no aparecen centrados

cuando se usa auto para los márgenes

FLOTAR EN DISEÑO
izquierdo y derecho.
Puede que necesite utilizar el Una caja no está junto a
texto alineado propiedad en el otro elemento flotante.
elemento contenedor. pág 315 Asegúrese de que haya suficiente espacio en

el elemento contenedor para que los dos se

Los elementos se superponen. sienten uno al lado del otro.

Cuando saca elementos del flujo p. 303

normal, pueden superponerse.
índice z le ayuda a controlar qué elemento se Los márgenes y el relleno se agregan al

coloca en la parte superior. pág 369 ancho de la caja (excepto para las
versiones anteriores de IE, que tienen un

Porque es el alineación vertical modelo de caja diferente). Por lo tanto, el

la propiedad no centra verticalmente cuadro puede ser más ancho de lo Si ha encontrado un problema que cree
mi elemento a nivel de bloque? especificado en la propiedad de ancho.pág que pertenece a esta sección de
Esta propiedad no está diseñada para 316 solución de problemas, no dude en
este propósito. Se usa para centrar enviárnoslo por correo electrónico a:
en línea elementos de la página. ¿Especificó un ancho para el [email protected].
Encontrará varias formas de elemento flotante? (Vea el Nos esforzaremos por abordar los
centrar verticalmente elementos a siguiente punto). problemas más comunes que nuestros
nivel de bloque (según su lectores han enfrentado en ediciones
contexto) si busca en Google. futuras de este libro. ¡Gracias!

ÍNDICE
ELeMenTS HTML

<a> 77, 79, 85, 441 <formulario> 151 <opción> 157

<abbr> 53 <h1> 22, 43 <p> 22, 44
<acrónimo> 53 <h2> 22, 43 <q> 52
<dirección> 55 <h3> 43 <s> 56
<artículo> 432-439 <h4> 43 <script> 208, 218
<aparte> 436 <h5> 43 <sección> 433, 437
<audio> 217–220, 219 <h6> 43 <seleccionar> 157

<b> 45 <cabeza> 27 <fuente> 215, 220

<blockquote> 52 <encabezado> 432, 433 <span> 188
<cuerpo> 22, 27 <hgroup> 438 <strong> 51
<br /> 48 <h /> 48 <estilo> 236
<botón> 162 <html> 22 <sub> 46
<cite> 54 <i> 45 <sup> 46
<dd> 67 <iframe> 189-190 <tabla> 131
<del> 56 <img> 99, 100 <tbody> 135
<dfn> 54 <entrada> 152, 155, 159-162, 166 <td> 131
<div> 187, 431, 440 <ins> 56 <textarea> 154
<dl> 67 <etiqueta> 163 <tfoot> 135
<dt> 67 <leyenda> 164 <th> 132
<em> 51 <li> 65, 66 <thead> 135
<embed> 203 <enlace> 235, 396 <título> 27, 28
<fieldset> 164 <meta> 191, 192 <tr> 131
<figcaption> 119, 422, 439 <nav> 432, 434 <u> 56
<figura> 119, 422, 439 <objeto> 203 <ul> 66
<footer> 432, 433 <ol> sesenta y cinco <video> 209, 213–216

ÍNDICE
 ATRIBUTOS HTML

acción 151 href 77, 79, 88, 235 Talla 152, 153, 158
alinear 103-105 http-equiv 192 src 99, 189, 214, 215, 219, 220
alt 99 identificación 87, 88, 151, 163 estilo 236
auto-reproducción 214, 219 atributo id 183, 431 objetivo 86
bgcolor 138 círculo 214, 219 título 53, 99
frontera 138 longitud máxima 152, 153 escribe 152, 155, 159
comprobado 155, 156 método 151 tipo (audio / video) 220, 215
citar 52 múltiple 158 tipo (CSS) 235-236
clase 184, 431 nombre 152-157, 160, 191 type = "fecha" 166
códecs 215 marcador de posición 168 type = "correo electrónico" 167

cols 154 póster 214 type = "oculto" 162

colspan 133 precarga 214, 219 type = "imagen" 161
contenido 191, 192 rel 235 type = "contraseña" 153
control S 214, 219 robots 191 type = "buscar" 168
descripción 191 filas 154 type = "enviar" 160
por 163 surco 134 type = "url" 167
Frontera del marco 190 desplazarse 190 valor 155-157, 160
atributos globales 183 sin costura 190 ancho 100, 137, 189, 214
altura 100, 189, 214 seleccionado 157

ÍNDICE
PROPIEDADES CSS

adjunto de fondo propiedad inferior 366–371 propiedad de margen derecho 314

propiedad 414 propiedad box-shadow 320 propiedad de margen superior 314

color de fondo 250 propiedad clara 372 opacidad 254

propiedad background-image 413 color 249 propiedad padding-bottom 313
propiedad background-image propiedad del cursor 347 propiedad padding-left 313
(gradientes) 419 propiedad de visualización 317 propiedad de relleno 313
propiedad background-position propiedad de celdas vacías 339 propiedad de relleno (tablas) 337
415 propiedad flotante 364, 370–375 propiedad padding-right 313
propiedad de fondo 416 propiedad flotante (imágenes) 411 propiedad padding-top 313
propiedad background-repeat @Perfil delantero 277 propiedad de posición 366, 367
414 Perfil delantero 271 rgba 254
color del borde inferior 311 Familia tipográfica 271, 273 propiedad correcta 366–371
estilo de borde inferior 310 tamaño de fuente 274, 276 texto alineado 285

propiedad border-collapse 340 propiedad de estilo de fuente 280 decoración de texto 282
color del borde 311 altura (imágenes) 409–410 guion de texto 287
propiedad border-image 319 hsl / hsla 255-256 sombra de texto 288
color de borde izquierdo 311 propiedad izquierda 366–371 transformación de texto 281

borde-estilo-izquierdo 310 espaciado de letras 284 propiedad superior 366–371

propiedad fronteriza 312 altura de la línea 283 alineación vertical 286

propiedad border-radius 321 propiedad list-style-image 334 propiedad de visibilidad 318

color del borde derecho 311 propiedad list-style-position 335 ancho (imágenes) 409–410
estilo de borde derecho 310 propiedad de estilo de lista 336 propiedad de ancho (flotante
propiedad de espaciado de borde 340 propiedad list-style-type 333 elementos) 371
estilo de borde 310 propiedad de margen inferior 314 propiedad de ancho (tablas) 337
borde-color-superior 311 propiedad margin-left 314 espaciado entre palabras 284

estilo de borde superior 310 propiedad de margen 314 propiedad de índice z 364, 369

PSEUDO-CLASES, ELEMENTOS Y REGLAS

:activo 291 :flotar 291, 343, 342 @Perfil delantero 277

:primera letra 289 resaltando filas de la tabla 337 @import rule 395
:primera linea 289 :Enlace 290 !importante 239
:atención 291, 342 :visitó 290

ÍNDICE