HTML & CSS

Projetar e construir sites

Jon Duckett

John Wiley & Sons, Inc.

HTML & CSS
Projetar e construir sites

Publicado por © 2011 por John Wiley & Sons, Inc., Indianapolis, Indiana ISBN: 978-1-118-00818-8
John Wiley & Sons, Inc. 10475
Crosspoint Boulevard Indianapolis, Fabricado nos Estados Unidos da América Publicado
IN 46256 www.wiley.com simultaneamente no Canadá
10 9 8 7 6 5 4 3 2 1

Nenhuma parte desta publicação pode ser reproduzida, armazenada num sistema de recuperação ou transmitido em qualquer forma ou por qualquer meio, electrónico, mecânico, de

gravação, de varrimento ou de outra forma, excepto quando permitido sob as secções 107 ou 108 do 1976 Copyright dos Estados Unidos Act, sem qualquer autorização prévia por escrito

da editora, ou autorização através do pagamento da adequada taxa por cópia ao Copyright Clearance Center, 222 Rosewood drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646

-8600. Pedidos para o Publisher para a permissão deve ser dirigida ao Departamento de Permissões, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-

6011, fax (201) 748-6008, ou online em http://www.wiley.com/go/permissions.

Limite de Responsabilidade / Isenção de Garantia: O editor e o autor não faz representações ou garantias quanto à exatidão ou completude do conteúdo deste trabalho

e, especificamente, assumem todas as garantias, incluindo sem limitação, garantias de adequação a um propósito particular. Nenhuma garantia pode ser criado ou estendido por

vendas ou materiais promocionais. O conselho e estratégias aqui contidos pode não ser adequado para cada situação. Este trabalho é vendido com o entendimento de que a

editora não está envolvida na prestação jurídica, contabilidade ou outros serviços profissionais. Se a assistência profissional é necessária, os serviços de um profissional

competente deve ser procurado. Nem a editora nem o autor será responsável por danos surgidos a partir deste. O facto de um sítio organização ou Web é referido neste trabalho

como uma citação e / ou uma fonte potencial de mais informações não significa que o autor ou a editora subscreve as informações da organização ou site pode fornecer ou

recomendações que podem fazer. Além disso, os leitores devem estar cientes de que os sites de Internet listados neste trabalho pode ter mudado ou desapareceram entre quando

este trabalho foi escrito e quando é lido.

Para informações gerais sobre nossos outros produtos e serviços, por favor entre em contato com nosso Departamento de Atendimento dentro dos Estados Unidos em (877) 762-2974, fora dos Estados

Unidos em (317) 572-3993 ou fax (317) 572-4002.

Wiley também publica seus livros em uma variedade de formatos eletrônicos. Algum conteúdo que aparece na impressão pode não estar disponível em livros eletrônicos.

Biblioteca de controlo do número Congresso: 2011932082

marcas: Wiley eo logotipo Wiley são marcas comerciais ou marcas registradas da John Wiley & Sons, Inc. e / ou suas afiliadas, nos Estados Unidos e em outros países, e

não podem ser utilizadas sem autorização por escrito. Todas as outras marcas comerciais são propriedade dos seus respectivos proprietários. John Wiley & Sons, Inc. não

está associada a qualquer produto ou fornecedor mencionado neste livro.

 créditos

Para John Wiley & Sons, Inc.

Editor executivo Carol Autor Jon Fotografia John

Longo Duckett Stewardson
johnstewardson.com
Gerente de Marketing Ashley Cover Designer Emme
Zurcher Pedra Adicionais fotografia Hesperian Joe
Robertson
Diretor de produção Tim Tate Design e layout Jon Duckett
Emme Pedra flickr.com/photos/mindfire
Jules Clancy
Produção editor Daniel thestonesoup.com
Scribner TÉCNICAS edição Chris Kylie reforço
Mills gusset.net
vice-presidente e executivo de grupo Michael Stillwell
EDITOR Richard Swadley TÉCNICO revisores Andy beebo.org
Pedra Angela Shimell Donna
Watson Martin Callanan Rob
vice-presidente e editor Jacoby Tony Berry
executivo Barry Pruett

Editor associado Jim Minatel

Coordenador de produção, cobrir katie

Crocker
Experimente e descarregue todo o código para este livro on-line em:
http://www.htmlandcssbook.com/code/
 Conteúdo

Introdução 12
Capítulo 1: Estrutura 40 62
Capítulo 2: Capítulo 3: Texto 2 74
listas Capítulo 4: Ligações 94
Capítulo 5: 126
Imagens Capítulo 6: Tabelas 144
Capítulo 7: Formulários Capítulo 8: Extra 176
Markup Capítulo 9: Flash, vídeo e áudio 200
Capítulo 10: Apresentando CSS Capítulo 11: 226
Capítulo Cor 12: Texto Capítulo 13: Caixas 246
264
300
330
358
Capítulo 14: listas, tabelas e Formulários 406
Capítulo 15: Disposição Capítulo 16: Imagens 428
Capítulo 17: HTML5 layout Capítulo 18: 452
Processo e Design Capítulo 19: Prática Índice 476
de Informação 493
 Introdução

X Sobre este livro

X Como funciona o web
X Aprender com outras páginas
 Em primeiro lugar, obrigado por pegar este livro. Foi
escrito com dois tipos muito diferentes de pessoas
em mente:

● Aqueles que querem aprender a desenhar e construir sites

do princípio

● Quem tem um website (que podem ser construídas usando um

sistema de gerenciamento de conteúdo, software de blogging, ou uma
plataforma de e-commerce) e quer mais controle sobre a aparência de suas
páginas

As únicas coisas que você precisa, a fim de usar este livro são um
computador com um navegador web e um editor de texto (como o Notepad,
que vem com o Windows, ou TextEdit, que vem com Macs).

3 INTRODUÇÃO
Introdução páginas vêm no início de cada capítulo. Eles Referência páginas introduzir peças-chave de HTML & CSS. O código
introduzem os temas-chave que você vai aprender. HTML é mostrado em azul e código CSS é mostrado na cor rosa.

fundo páginas aparecem no branco; eles explicar o contexto dos Diagrama e infográficos páginas são mostradas em um fundo
temas abordados que são discutidos em cada capítulo. escuro. Eles fornecem uma referência simples, visual aos tópicos
discutidos.

Exemplo páginas juntos os temas que você aprendeu e demonstrar resumo páginas vir no final de cada capítulo. Eles lembrá-lo dos
como elas podem ser aplicadas em cada um. principais temas que foram abordados em cada capítulo.

INTRODUÇÃO 4
 É difícil de aprender?

Muitos livros que ensinam HTML e CSS assemelham Tenho focado no código que você precisa usar

90% do tempo e omitiu o código que você

manuais maçantes. Para tornar mais fácil para você
raramente vê mesmo se escrever sites é o seu

aprender, que jogou fora o modelo tradicional usado por emprego a tempo inteiro. No final do livro, se

você se deparar com os outros 10% você vai ser

editores e redesenhado este livro a partir do zero.
capaz de pesquisar no Google para descobrir o

que isso significa de forma rápida e facilmente.

No trabalho, quando as pessoas olham para a HTML compreensão e CSS pode ajudar Tenho também acrescentou informações

minha tela e vê-lo cheio de código, não é qualquer um que trabalha com a web; os práticas sobre tópicos que eu estou mais

incomum para obter um comentário sobre isso designers podem criar sites mais atraente e frequentes sobre, por exemplo, como preparar

olhando muito complicado ou quão inteligente eu utilizável, editores de sites podem criar melhor imagens, áudio e vídeo para a web, como

devo ser para compreendê-lo. A verdade é que conteúdo, os comerciantes podem se abordar a concepção e construção de um novo

não é tão difícil de aprender a escrever páginas comunicar com seu público de forma mais site, como melhorar seus rankings nos motores

da web e ler o código usado para criá-los; você eficaz, e os gerentes podem encomendar de busca (SEO ), e como usar o Google

certamente não tem que ser um "programador". locais melhores e tirar o melhor proveito das Analytics para aprender sobre os visitantes do

suas equipas. seu site.

5 INTRODUÇÃO
 a estrutura de
este livro

A fim de ensinar-lhe sobre a criação de páginas web, este

livro é dividido em três seções:

1: HTML 2: css 3: prático

Vamos passar o primeiro capítulo olhando Começamos esta seção com um capítulo que Vamos acabar com algumas informações úteis

como HTML é usado para criar páginas web. explica como CSS usa regras para permitir que que irão ajudá-lo na construção de melhores

Você vai ver que você começa por escrever as você controle o estilo e layout de páginas da websites.

palavras que você deseja que apareçam em web. Em seguida, passam a olhar para a

sua página. Você, então, adicionar tags ou grande variedade de propriedades CSS que Nós olhamos para algumas novas marcas que

elementos para as palavras para que o você pode usar em suas regras CSS. Essas serão introduzidas no HTML5 para ajudar a

navegador sabe o que é um título, onde um propriedades geralmente caem em uma das descrever a estrutura de suas páginas. HTML5 é

parágrafo começa e termina, e assim por duas categorias: a mais recente versão do HTML (ainda em

diante. desenvolvimento no momento da escrita). Antes

de aprender sobre esses elementos, você

precisa de uma boa compreensão de como CSS

O restante desta seção apresenta as marcas Apresentação: Como controlar coisas como é usado para controlar o desenho de páginas

que você tem à sua disposição para criar a cor do texto, as fontes que você deseja web. Há um capítulo que fala você através de

páginas web, agrupados em capítulos sobre: usar e o tamanho dessas fontes, como um processo de design que você gostaria de

​texto, listas, links, imagens, tabelas, adicionar cores de fundo de páginas (ou seguir ao criar um novo site.

formulários, vídeo e áudio flash, e elementos partes de uma página), e como adicionar
diversos. imagens de fundo.

Devo avisá-lo que os exemplos nos Layout: Como controlar onde os diferentes Finalmente, acabamos olhando para tópicos
primeiros nove capítulos não são elementos estão posicionados sobre a tela. que ajudarão você uma vez que você
emocionantes para olhar, mas eles são a Você também vai aprender várias técnicas construiu seu site, como colocá-lo na web,
base de cada página web. Os seguintes que os profissionais usam para fazer suas Search Engine Optimization (SEO) e usando
capítulos sobre CSS irá mostrar-lhe como páginas mais atraentes. analytics software para rastrear quem vem
fazer suas páginas olhar muito mais para o seu site eo que eles estão olhando .
interessante.

INTRODUÇÃO 6
 como as pessoas
acessam a web

Antes de olharmos para o código usado para construir websites é

importante considerar as diferentes maneiras em que as pessoas

acessam a web e esclarecer algumas terminologias.

browsers servidores Web leitores de tela

Pessoas acessar sites usando software Quando você pergunte ao seu navegador para Os leitores de tela são programas que lêem
chamado de web browser. uma página web, o pedido é enviado através da o conteúdo de uma tela de computador a um
Exemplos populares incluem Firefox, Internet para um computador especial conhecido usuário. Eles são comumente usados ​por
Internet Explorer, Safari, Chrome e como servidor web que hospeda o site. pessoas com deficiência visual.
Opera.

Para visualizar uma página web, os usuários servidores Web são computadores especiais Da mesma forma que muitos países têm
podem digitar um endereço da Web em seu que estão constantemente conectados à legislações que exigem edifícios públicos
navegador, siga um link de outro site, ou usar Internet, e são otimizados para enviar páginas sejam acessíveis a pessoas com
um marcador. da web para as pessoas que os solicitem. deficiência, muitas leis também foram
passados ​que exigem sites ser acessível
a pessoas com deficiência.
Os fabricantes de software lançar regularmente Algumas grandes empresas executar seus

novas versões de navegadores com novos próprios servidores web, mas é mais comum usar

recursos e apoiar novas adições às línguas. É os serviços de um hospedagem na web empresa

importante, no entanto, lembrar que muitos que cobrar uma taxa para hospedar seu site. Ao longo deste livro você vai ver várias
proprietários de computadores não estarão referências aos leitores de tela. Estas notas
funcionando as versões mais recentes desses vão ajudar a garantir que os sites que você
navegadores. Portanto, você não pode contar cria são acessíveis a pessoas que usam esse
dispositivos
com todos os visitantes do seu site ser capaz de tipo de software.
usar a mais recente funcionalidade oferecida em As pessoas estão acessando sites em uma
todos os navegadores. gama cada vez maior de dispositivos,
incluindo computadores desktop, laptops, É interessante notar que tecnologias
tablets e telefones celulares. É importante similares àquelas utilizadas por leitores de
lembrar que vários dispositivos têm diferentes tela também estão sendo usados ​em outras
tamanhos de tela e alguns têm conexões mais áreas onde as pessoas são incapazes ler
Você vai aprender como dizer quais rápidas na web do que outros. uma tela, como quando eles estão dirigindo
navegadores visitantes utilizam para acessar o ou jogging.
seu website no capítulo 19.

7 INTRODUÇÃO
 como os sites são
criados

Todos os sites usam HTML e CSS, mas os sistemas de gerenciamento

de conteúdo, software de blogging, e plataformas de e-commerce

muitas vezes adicionar mais algumas tecnologias na mistura.

o que você vê como ele é criado HTML5 e CSS3

Quando você está olhando para um site, sites de pequenas são muitas vezes escritos Desde que a web foi criado pela primeira
o mais provável é que o seu navegador apenas usando HTML e CSS. vez houve várias versões do HTML e CSS
estará recebendo HTML e CSS a partir - cada um pretende ser uma melhoria em
do servidor web que hospeda o site. O sites maiores - em particular aqueles que são relação à versão anterior.
navegador interpreta o código HTML e atualizados regularmente e usar um sistema de

CSS para criar a página que você vê. gerenciamento de conteúdo (CMS), ferramentas

para blogs, ou software de e-commerce - muitas Na hora de escrever este livro, HTML5 e

vezes fazem uso de tecnologias mais CSS3 ainda estavam sendo desenvolvidos.

complexas no servidor web, mas estas Embora não tinha sido finalizado, muitos

A maioria das páginas da web também tecnologias são realmente utilizados para navegadores já estavam apoiando algumas

incluem conteúdo extra, como imagens, produzir HTML e CSS que é então enviado para características dessas línguas e um monte de

áudio, vídeo ou animações e este livro vai o navegador. Assim, se seu site usa essas pessoas estavam usando a última versão do

ensinar-lhe como prepará-los para uso na tecnologias, você será capaz de usar o seu código em seus sites. Tenho, portanto,

web e, em seguida, como inseri-los em suas novo conhecimento de HTML e CSS para ter escolhido para lhe ensinar essas versões

páginas web. mais controle sobre como o seu site parece. mais recentes.

Alguns sites também enviar JavaScript ou

Flash no navegador, e você verá como Porque HTML5 e CSS3 construir em versões

adicionar JavaScript e Flash em suas Maiores locais mais complexos como estes anteriores destes idiomas, aprender estes meios,

páginas web. Ambas as tecnologias são podem utilizar um banco de dados para você também será capaz de compreender as

tópicos avançados que você pode ir para armazenar dados e linguagens de programação versões anteriores dos mesmos. Eu adicionei

aprender mais sobre uma vez que você como PHP, ASP.Net, Java, Ruby ou no servidor notas claras quando o código é novo e também

domina HTML e CSS, se você quiser. web, mas você não precisa saber essas quando ele pode não funcionar em navegadores

tecnologias para melhorar o que o usuário vê . As mais antigos.

habilidades que você vai aprender neste livro

deve ser o suficiente para ajudá-lo na estrada.

INTRODUÇÃO 8
 como funciona o Web

Quando você visita um site, o servidor web que hospeda o site

pode ser qualquer lugar do mundo. Para que você para
encontrar a localização do servidor web, o navegador primeiro
conectar a um servidor Domain Name System (DNS).

Nesta página você pode ver exemplos que ● Um usuário em visitas Barcelona À direita, você pode ver o que acontece
demonstram como o servidor web que sony.jp em Tóquio quando um usuário da web na Inglaterra
hospeda o site que você está visitando pode quer ver o site da galeria de arte do Louvre,
● Um usuário em visitas de Nova York
ser qualquer lugar do mundo. É os na França, que está localizado em
google.com em San Francisco
servidores DNS que dizer ao seu navegador
como encontrar o site. ● Um usuário em visitas Estocolmo www.louvre.fr. Em primeiro lugar, o browser em

qantas.com.au em Sydney contactos Cambridge um servidor DNS em

Londres. O servidor DNS, em seguida, informa

● Um usuário em visitas Vancouver
ao navegador a localização do servidor web que
airindia.in em Bangalore
hospeda o site em Paris.

9 INTRODUÇÃO
 2

Seus contatos de computadores de uma

rede de servidores chamado Domain Name
System (DNS). Estes agem como telefone
1
livros; eles dizem o seu computador o
Quando você se conectar à web, você fazê-lo endereço IP associado com o nome de
através de um Internet Service Provider (ISP). domínio solicitado. Um endereço de IP é um
Você digita um nome de domínio ou endereço número de até 12 dígitos separados por
da web em seu navegador para visitar um site; períodos / pontos finais. Cada dispositivo
por exemplo: google.com, bbc.co.uk, microsoft.com. conectado à web tem um endereço IP
exclusivo; é como o número de telefone
para esse computador.

Cambridge

LONDRES
3

O número exclusivo que o servidor DNS retorna ao

seu computador permite que seu navegador para

entrar em contato com o servidor web que hospeda

o site que você solicitou. Um servidor web é um

computador que está constantemente conectado à

web, e está configurado especialmente para enviar

páginas da web para os usuários.

PARIS

O servidor web envia a página solicitada

de volta para o seu navegador web.
 1
Estrutura

X estrutura de entendimento
X Aprender sobre a marcação
X Tags e elementos
 Deparamo-nos com todos os tipos de documentos todos os

dias de nossas vidas. Jornais, formulários de seguro,

catálogos de lojas ... a lista continua.

Muitas páginas da web agir como versões eletrônicas destes documentos. Por exemplo,
os jornais mostram as mesmas histórias em impressão como eles fazem em sites; você
pode aplicar para o seguro através da web; e lojas têm catálogos online e facilidades de
e-commerce.

Em todos os tipos de documentos, a estrutura é muito importante para ajudar os leitores

a entender as mensagens que você está tentando transmitir e para navegar em todo o
documento. Assim, a fim de aprender a escrever páginas da web, é muito importante
entender como estruturar documentos. Neste capítulo, você irá:

● Veja como HTML descreve a estrutura de uma página web

● Saiba como etiquetas ou elementos são adicionados ao seu documento

● Escrever sua primeira página web

13 ESTRUTURA
ESTRUTURA 14
 Como páginas usam
Estrutura

Pense sobre as histórias que você leu em A estrutura é muito semelhante, quando Agora pense sobre um tipo muito diferente de

um jornal: para cada história, haverá um uma notícia é visto on-line (embora documento - uma forma de seguro. formulários de

título, algum texto e, possivelmente, também possa recurso de áudio ou seguro, muitas vezes têm títulos para seções

algumas imagens. Se o artigo é um longo vídeo). Isto é ilustrado na direita com diferentes, e cada seção contém uma lista de

pedaço, pode haver subtítulos que dividir a uma cópia de um jornal ao lado do perguntas com áreas para que você preencha os

história em seções separadas ou citações artigo correspondente em seu site. detalhes ou caixas de seleção para carrapato. Mais

de pessoas envolvidas. Estrutura ajuda os uma vez, a estrutura é muito semelhante online.

leitores a entender as histórias no jornal.

15 ESTRUTURA
ESTRUTURA 16
 documentos do Word
estruturação

O uso de títulos e subtítulos em qualquer Isso pode ser aumentada subtítulos sob À direita, você pode ver um simples
documento muitas vezes reflete uma mais abaixo na página. Ao usar um documento no Microsoft Word. Os estilos
hierarquia de informações. Por exemplo, processador de texto para criar um diferentes para o documento, tais como
um documento pode começar com um documento, nós separar o texto para diferentes níveis de título, são mostrados na
grande título, seguido por uma introdução dar-lhe estrutura. Cada tópico pode ter caixa suspensa. Se você usa regularmente
ou a informação mais importante. um novo parágrafo, e cada seção pode Word, você pode ter também usou a barra
ter um título para descrever o que ele de formatação ou paleta para fazer isso.
cobre.

17 ESTRUTURA
ESTRUTURA 18
 Na página anterior, você viu como a estrutura

foi adicionado a um documento do Word para

torná-lo mais fácil de entender. Nós usamos a

estrutura da mesma forma ao escrever páginas

da web.

19 ESTRUTURA
 Html descreve a estrutura

de páginas

Na janela do navegador, você pode ver uma página web que apresenta exatamente o mesmo conteúdo que o

documento do Word que você conheceu na página 18. Para descrever a estrutura de uma página web, podemos

adicionar código para as palavras que deseja que apareçam na página.

Você pode ver o código HTML para esta página abaixo. Não se preocupe com o que o código significa

ainda. Começamos a olhar para ele com mais detalhes na próxima página. Note que o código HTML é

em azul, eo texto que você vê na tela é em preto.

<Html>
<Body>
<H1> Este é o ponto principal </ h1> <p> Este texto pode ser uma introdução para o resto
do
a página. E se a página é longa, pode ser dividido em vários sub-rubricas. < p>
<h2> Esta é uma sub-rubrica </ h2> <p> Muitos artigos longos têm sub-títulos de modo
a ajudar

você seguir a estrutura do que está sendo escrito. Pode ainda ser sub-sub-posições
(ou posições de nível inferior). </ p> <h2> Outra sub-rubrica </ h2> <p> Aqui você pode ver
uma outra sub-rubrica. </ p> </ body> </ html>

O código HTML (em azul) é composto de personagens que vivem dentro de colchetes angulares -
estes são chamados HTML elementos. Os elementos são normalmente feitas de dois Tag: uma marca
de abertura e uma etiqueta de fecho. (O tag de fechamento tem uma barra extra nele.) Cada elemento
HTML informa ao navegador algo sobre a informação que fica entre a sua abertura e fechamento.

ESTRUTURA 20
 Html utiliza elementos para
descrever a estrutura de páginas

Vamos olhar mais de perto o código da última página. Há vários

elementos diferentes. Cada elemento tem uma marca de abertura e
uma etiqueta de fecho.

Código

<Html>

<Body>

<H1> Este é o ponto principal </ H1>

<P> Este texto pode ser uma introdução para o resto do

a página. E se a página é longa, pode ser dividido em vários sub-rubricas. <P>

<H2> Esta é uma sub-rubrica </ H2>

<P> Muitos artigos longos têm sub-títulos de modo a ajudar

você seguir a estrutura do que está sendo escrito. Pode ainda ser
sub-sub-posições (ou posições de nível inferior). </ P>

<H2> Outra sub-rubrica </ H2>

<P> Aqui você pode ver uma outra sub-rubrica. </ P>

</ Body>

</ Html>

21 ESTRUTURA
 Etiquetas agir como recipientes. Eles lhe dizer algo
sobre a informação que se encontra entre a sua
abertura e fechamento.

descrição

A abertura < html> tag indica que qualquer coisa entre ele e um fechamento </ html> tag é o código HTML.

o < body> tag indica que alguma coisa entre ele e o fechamento
</ Body> tag deve ser mostrado dentro da janela principal do navegador.

palavras entre < h1> e </ h1> é um título principal.

Um parágrafo de texto aparece entre estes < p> e </ p> Tag.

palavras entre < h2> e </ h2> formar uma sub-título.

Aqui é outro parágrafo entre a abertura < p> e fechamento </ p> Tag.

Outra sub-posição dentro < h2> e </ h2> Tag.

Outro parágrafo dentro < p> e </ p> Tag.

o fechamento </ body> tag indica o fim do que deve aparecer na janela principal do navegador.

o fechamento </ html> tag indica que é o fim do código HTML.

ESTRUTURA 22
 Um olhar mais atento tags

Personagem

<p> suporte de ângulo esquerdo

suporte em ângulo reto
(Mais do que sinal)

(Sinal de menor)

tag de abertura

Os caracteres entre parênteses indicam Por exemplo, nas tags acima do p significa A tag de fechamento tem uma barra
o propósito da tag. parágrafo. após o símbolo <.

23 ESTRUTURA
 Personagem

</p> suporte de ângulo esquerdo

suporte em ângulo reto
(Mais do que sinal)

(Sinal de menor)

barra

tag de fechamento

Os termos "tag" e "elementos" são muitas Estritamente falando, no entanto, um etiqueta e a tag de fechamento e qualquer conteúdo

vezes utilizados alternadamente. elemento compreende a abertura que se encontra entre eles.

ESTRUTURA 24
 Atributos Conte-nos mais sobre
elementos

Atributos fornecem informações adicionais sobre o conteúdo

de um elemento. Eles aparecem na tag de abertura do
elemento e são compostos de duas partes: a nome e uma valor ,
Separados por um sinal de igual.

atributo
nome

<p lang =" en-us "> Parágrafo em Inglês </ p>

atributo
Valor

o atributo nome indica que tipo de o valor é a informação ou a definição para Aqui um atributo chamado lang é usado
informação extra que você está fornecendo o atributo. Ele deve ser colocado entre para indicar o idioma usado neste
cerca de conteúdo do elemento. Ele deve aspas duplas. Diferentes atributos podem elemento. O valor deste atributo desta
ser escrito em letras minúsculas. ter valores diferentes. página especifica que está em US Inglês.

25 ESTRUTURA
 HTML5 permite a utilização de nomes de
atributos em maiúsculas e omitir os
quotemarks, mas isso não é recomendado.

atributo
nome

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

atributo
Valor

A maioria dos atributos só pode ser Mais valores de atributos são ou O valor do lang atributo é uma forma
utilizada em certos elementos, embora pré-definido ou seguir um formato abreviada de especificar qual idioma é
alguns atributos (tal como lang) estipulado. Vamos olhar para os valores usado dentro do elemento que todos os
permitidos como nós introduzir cada novo navegadores entender.
pode aparecer em qualquer elemento. atributo.

ESTRUTURA 26
 corpo, Head & título

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

<Html>
Você conheceu o < body> elemento no <Head>
primeiro exemplo que criamos. Tudo dentro <Title> Este é o título da página </ title> </ head> <body>
este elemento é mostrado dentro da janela
principal do navegador.
<H1> Este é o corpo da página </ h1> <p> Qualquer coisa dentro do corpo de
uma página web é exibida na janela do navegador principal. </ p> </ body> </
html>

<Head>
Antes do < body> elemento muitas vezes você
vai ver um < head> elemento. Este contém
informações Resultado
sobre a página (em vez de informação que é
mostrada na parte principal da janela do
navegador que está destacado em azul na
página ao lado). Normalmente você vai
encontrar um < title>

elemento no interior do < head>

elemento.

<Title>
O conteúdo do < title>
elemento ou são mostrados na parte superior
do navegador, acima de onde você costuma
digitar o URL da página que você deseja
visitar, ou na guia para essa página (se o
navegador usa abas para que você possa ver
várias páginas ao mesmo Tempo).

27 ESTRUTURA
 Qualquer coisa escrita entre o
<Title> etiquetas aparecerá na barra de título

(ou guias) no topo da janela do navegador,

em destaque na laranja aqui.

Qualquer coisa escrita entre o < body> marcas

aparecerão na janela principal do
navegador, destacada em azul aqui.

Você pode saber que HTML significa página para outra de forma rápida e facilmente. página, adicionar o código em torno do texto

HyperText Markup Language. A parte Uma linguagem de marcação permite que você original que deseja exibir e, em seguida, o

HyperText refere-se ao fato de que HTML anote texto, e essas anotações fornecer navegador usa o código para exibir a página

permite criar links que permitem que os significado adicional para o conteúdo de um corretamente. Assim, as tags que adicionar são a

visitantes para passar de uma documento. Se você pensar em um web marcação.

ESTRUTURA 28
 Criando uma página Web em um
PC

Para criar sua primeira página web em um PC,

inicie o bloco de notas. Você pode encontrar isso

1
indo até:

Começar

Todos os programas (ou Programas)

Acessórios Notepad

Você pode também gostaria de baixar um

editor gratuito chamado Notepad ++ a partir de notepad-plus-plus.org.

Digite o código mostrado à direita.

29 ESTRUTURA
 artigo

Vá para o menu Arquivo e selecione

Salvar como... Você precisará salvar o arquivo em

3
algum lugar você pode se lembrar. Se você gosta,

você pode criar uma pasta para qualquer exemplos

que você experimente a partir deste livro.

Salve o arquivo como primeiro teste. html. Certifique-se

de que o Salvar como tipo drop-down tem Todos

os arquivos

selecionado.

Inicie o navegador web. Vou ao Arquivo menu

e selecione Abrir.
4
Navegue até o arquivo que você acabou de

criar, selecione-o e clique no

Abrir botão. O resultado deve ser algo

como a captura de tela para a esquerda.

Se ele não se parece com isso, encontrar o

arquivo que você acabou de criar no seu

computador e certifique-se que ele tem a

extensão de arquivo. html ( se é. TXT então você

precisa voltar para o bloco de notas e salve o

arquivo novamente, mas desta vez colocar

aspas em torno do nome " firsttest.html ").

ESTRUTURA 30 30
 Criando uma página Web em um
mac

Para criar sua primeira página web em um

Mac, inicie o Editor de Texto. Este deve estar

1
no seu aplicações

pasta.

Você pode também gostaria de baixar um editor de

texto livre para a criação de páginas web chamado

TextWrangler que está disponível a partir de

barebones.com.

Digite o código mostrado à direita.

31 ESTRUTURA
 artigo

Se você gosta, você pode criar uma pasta para

qualquer exemplos que você experimente a partir

deste livro. Salve o arquivo como primeira test.html. Você

provavelmente vai ver uma janela como a captura

de tela para a esquerda.

pode se lembrar.

Você deseja selecionar o use .html

botão.

Em seguida, iniciar seu navegador, vá para o Arquivo

precisará salvar o arquivo em algum lugar você
Menu e selecione
4
Abrir. Você deve procurar o arquivo que você
acabou de criar, selecione-o e clique no Abrir botão.
O resultado deve ser semelhante à captura
de tela para a esquerda.

Se ele não se parece com isso, você pode

para o Arquivo menu e selecione Salvar como... Você
precisar alterar uma das configurações em
TextEdit. Vá para o menu TextEdit e
selecione
Preferências. Em seguida, nas preferências
para Abrir e Salvar,

marque a caixa que diz Ignorar comandos de

texto rico em arquivos HTML.

Agora tente salvar o arquivo novamente. Agora vá

ESTRUTURA 32 32
 código em um sistema de
gerenciamento de conteúdo

Se você estiver trabalhando com um sistema de que permite que você insira um título para a sistema pode usar o mesmo modelo
gerenciamento de conteúdo, plataforma de página, uma outra caixa para o artigo para mostrar todos os seus produtos.)
blogs, ou aplicativo de e-commerce, você principal, uma maneira de entrar uma data de As informações que você fornecer é
provavelmente vai entrar em uma seção especial publicação, e algo para indicar qual seção do colocado nos modelos.
de administração do site para controlá-lo. As site desta página pertence.
ferramentas fornecidas nas seções de

administração desses sites geralmente permitem A vantagem dessa abordagem é que as

que você edite partes da página, em vez de toda Para uma loja de e-commerce, você pode ter pessoas que não sabem como escrever
a página, o que significa que você raramente vai caixas que permitem que você digite um páginas da web pode adicionar informações
ver o < html>, <head>, ou < body> elementos. título para o produto, uma descrição do para um site e também é possível alterar a
produto, o seu preço, e a quantidade apresentação de algo no modelo, e ele irá
disponível. atualizar automaticamente a cada página
que usa esse modelo. Se você imaginar
Isso é porque eles usam um único 'modelo' uma loja de e-commerce com 1.000 itens
Olhando para o sistema de gerenciamento para controlar todas as páginas de uma para venda, apenas
de conteúdo na página ao lado, você tem seção do site. (Por exemplo, um
uma caixa e-commerce

33 ESTRUTURA
alteração de um modelo é muito mais fácil do está adicionando código HTML para seu texto, pode ter um botão (que muitas vezes
que mudar a página para cada produto. Em assim como o código que você já viu mostra colchetes) para indicar como
sistemas como este, quando você tem um anteriormente neste capítulo. Muitos destes acessar o código.
grande bloco de texto que você pode editar, editores terão uma opção que permite que

como uma notícia, um post do blog ou a você veja (e editar) o código que eles Alguns sistemas de gerenciamento de conteúdo

descrição de um produto em uma loja de produzem. oferecem ferramentas que também permitem que

e-commerce, você vai ver muitas vezes um você edite os arquivos de modelo. Se você tentar

editor de texto exibida. editar arquivos de modelo, você precisa verificar a

Uma vez que você sabe ler e editar este documentação do CMS como todos eles diferem

código, você pode ter mais controle sobre uns dos outros. Você precisa ter cuidado ao editar

essas seções de seu site. arquivos de modelo, porque se você excluir a

Editores de texto geralmente têm controles um parte errada do código ou acrescentar algo no

pouco como aqueles em seu processador de lugar errado o site pode parar de funcionar

texto, dando-lhe diferentes opções para estilizar o No exemplo acima, você pode ver que o completamente.

texto, adicionar links ou inserir imagens. Nos editor de texto tem um guia para vistas
bastidores Estes editores Visuais / HTML do que o usuário digita.
outros sistemas

ESTRUTURA 34
 Olhando Como outros sites são
construídos

Quando a web foi primeiro decolando, uma Uma vez que você abriu esta página, você No início, este código pode parecer
das maneiras mais comuns para aprender pode olhar para o Visão complicado, mas não desanime. No
sobre HTML e descobrir novas dicas e Menu em seu navegador, e selecione a momento em que tiver terminado o
técnicas foi a olhar para o código-fonte que opção que diz Fonte ou próximo capítulo deste livro, você será
compõem páginas web. Ver fonte. ( As mudanças de título, dependendo capaz de compreendê-lo.
do navegador que você está usando.)

Estes dias, há muitos mais livros e tutoriais Todos os exemplos deste livro estão no site, e
on-line que ensinam HTML, mas você ainda Você deverá ver uma nova janela você pode usar esta técnica simples em
pode olhar o código que um servidor web aparecer, e ele irá conter o código-fonte qualquer um dos exemplos de páginas para
envia para você. Para tentar isso por si que foi usado para criar esta página. ver como eles funcionam.
mesmo, simplesmente ir para o código de
exemplo para este capítulo, em
Você pode ver o resultado na foto à Você também pode baixar todo o
código www.htmlandcssbook.com/ / e direita. A página que você vê é a código para este livro a partir do mesmo
clique no link chamado "View Source". janela no topo; o código é abaixo. site, clicando no link "Download".

35 ESTRUTURA
ESTRUTURA 36
 resumo
Estrutura

X páginas HTML são documentos de texto.

X HTML usa tags (personagens que ficam dentro angulada

parênteses) para dar a informação que cercam significado especial.

X Tags são muitas vezes referidos como elementos.

X Etiquetas geralmente vêm em pares. Os denota tag abertura

o início de uma parte do conteúdo; o tag de fechamento indica o final.

X Abertura tags podem transportar atributos, que nos dizem mais

sobre o conteúdo desse elemento. Atributos

X exigem um nome e um valor.

X Para saber HTML que você precisa saber o que tags são

disponíveis para você usar, o que eles fazem, e onde podem ir.
 2
Texto

X Cabeçalhos e parágrafos
X Negrito, itálico, sublinhado
X marcação estrutural e semântico
 Ao criar uma página web, você adicionar tags (conhecidos como

marcação) para o conteúdo da página. Essas marcas fornecem

significado extra e permitir que os navegadores para mostrar

aos usuários a estrutura adequada para a página.

Neste capítulo nos concentramos em como adicionar marcação para o texto que aparece em

suas páginas. Você vai aprender sobre:

● marcação estrutural: os elementos que você pode usar para

descrever ambos os títulos e parágrafos

● marcação semântica: que fornece informações extra; tal

como onde a ênfase é colocada em uma frase, que algo que você escreveu é
uma citação (e quem disse isso), o significado de siglas, e assim por diante

41 TEXTO
TEXTO 42
 cabeçalhos

<H1> capítulo-02 / headings.html html

<H1> Este é um ponto principal </ h1> <h2> Este é um

<h2> título de nível 2 </ h2> <h3> Este é um título de nível 3 </ h3>
<h4> Este é um cabeçalho de nível 4 </ h4> <h5> Este é
um cabeçalho de nível 5 </ h5> <h6> Este é um cabeçalho
<h3> de nível 6 </ h6>

<h4>
<h5>
<h6>
Resultado
HTML tem seis "níveis" de
títulos:

<H1> é utilizado para posições principais

<H2> é utilizado para subtítulos

Se existem outras seções sob os

subtítulos em seguida, o
<H3> elemento é usado, e assim por diante ...

Navegadores exibir o conteúdo das posições

em tamanhos diferentes. O conteúdo de um < h1>
elemento é o maior, e o conteúdo de um < h6> elemento
é o menor. O tamanho exato em que cada
navegador mostra os títulos podem variar
ligeiramente. Os usuários também podem
ajustar o tamanho do texto no seu browser.
Você vai ver como controlar o tamanho do
texto, sua cor, e as fontes usadas quando
chegamos a olhar para CSS.

43 TEXTO
 parágrafos
artigo

html capítulo-02 / paragraphs.html

<P>
<Html>
<P> Um parágrafo consiste em um ou mais frases
que formam uma unidade auto-contida de discurso. O início de um número é Para criar um parágrafo, cercam as
indicado por uma nova linha. </ p> <p> Texto é mais fácil de entender quando é dividido palavras que compõem o parágrafo com
uma abertura < p>
tag e fechamento </ p> tag.
em unidades de texto. Por exemplo, um livro pode ter capítulos. Capítulos pode ter
subtítulos. Em cada rubrica, haverá um ou mais parágrafos. </ p> Por padrão, o navegador irá mostrar cada
parágrafo em uma nova linha com algum
espaço entre ele e todos os parágrafos
subseqüentes.

Resultado

TEXTO 44
44
 Negrito itálico

<B> capítulo-02 / bold.html html

<P> Isto é como nós fazemos uma palavra aparecer < b> negrito. </ b>
Colocando palavras nas tags </ P> <p> Dentro de uma descrição do produto que você pode ver alguns
<B> e </ b> nós podemos fazer personagens

aparecem em negrito. <B> características principais </ b> em negrito. </ p>

o < b> elemento também representa uma seção

de texto que será apresentado em uma
maneira visualmente diferente (por exemplo,
palavras-chave em um parágrafo), embora o
Resultado
uso do < b> O elemento não implica qualquer
significado adicional.

<I> capítulo-02 / italic.html html

<P> Isto é como nós fazemos uma palavra aparecer < i> itálico </ i> .
Colocando palavras nas tags </ P> <p> É uma batata < i> Solanum teberosum </ i> . </ P> <p> Captain
<I> e </ i> nós podemos fazer personagens Cook navegou para a Austrália na
aparecem em itálico.

<I> Esforço </ i> . </ P>

o < i> elemento também representa uma seção

de texto que seria dito de uma maneira

diferente da que envolve os conteúdos - como

termos técnicos, nomes de navios, palavras

Resultado
estrangeiras, pensamentos ou outros termos

que normalmente seriam em itálico.

45 TEXTO
 sobrescritoartigo
&
subscrito

html capítulo-02 / sobrescrito-e-subscript.html

<Sup>
<P> No dia 4 < sup> º </ sup> de setembro você vai aprender
cerca de E = MC < sup> 2 </ sup> . </ P> <p> A quantidade de CO < sub> 2 </ sub> na o < sup> elemento é usado para conter
atmosfera caracteres que deve ser sobrescrito, como
cresceu 2 ppm em 2009 < sub> 1 </ sub> . </ P> os sufixos de datas ou conceitos
matemáticos como elevar um número a
uma potência como 2 2.

<Sub>
Resultado

o < sub> elemento é utilizado para conter os

caracteres que deve ser subscrito. É
comumente usado com notas de pé ou
fórmulas químicas, tais como H 2 0.

TEXTO 46
 espaço branco

A fim de tornar o código mais fácil de ler, página

capítulo-02 / branco-space.html html
web autores, muitas vezes adicionar espaços

extras ou iniciar alguns elementos sobre as novas <P> A lua está se afastando da Terra. </ p> <p> A lua
linhas. está se afastando da Terra. </ p>
<P> A lua está se afastando de
Quando o navegador se depara com dois ou mais

espaços ao lado do outro, ele exibe apenas um Terra. </ p>

espaço. Da mesma forma se ele se depara com

uma quebra de linha, ele trata como um único

espaço também. Isto é conhecido como

Resultado
espaço em branco em colapso.

muitas vezes você vai ver que os autores de

páginas web tirar vantagem de espaço em branco

em colapso para recuar seu código, a fim de

torná-lo mais fácil de seguir.

47 TEXTO
 Quebras deartigo
linha e
regras horizontais

html capítulo-02 / linha-breaks.html

<br />
<P> a Terra < br /> recebe cem toneladas mais pesado
todo dia < br /> devido à queda poeira espacial. </ p> Como você já viu, o navegador irá mostrar

automaticamente a cada novo parágrafo ou

dirigindo em uma nova linha. Mas se você

quiser adicionar uma quebra de linha dentro do

meio de um parágrafo que você pode usar a tag

de quebra de linha < br />.

Resultado

<Hr />
Para criar uma pausa entre os temas - como a

mudança de assunto em um livro ou uma nova

cena em um jogo - você pode adicionar uma

html capítulo-02 / horizontal-rules.html
regra horizontal entre as seções usando o < hr

<P> Vênus é o único planeta que gira /> tag.

sentido horário. </ p> <hr /> <p> Júpiter é maior do que todos os outros
planetas
Existem alguns elementos que não têm

combinado. </ p> quaisquer palavras entre uma abertura e tag de

fechamento. Eles são conhecidos como elementos

vazios

e estão escritas de forma diferente.

Resultado
Um elemento vazio tem geralmente apenas
uma etiqueta. Antes de fechar o suporte
angular de um elemento vazio não será
muitas vezes um espaço e um carácter
barra. Alguns autores de páginas web perca
esta fora, mas é um bom hábito de entrar.

TEXTO 48
 editores visuais e seus pontos
de vista de código

sistemas de gestão de conteúdo e editores HTML como o Dreamweaver geralmente têm duas vistas
da página que você está criando: um editor visual e uma vista de código.

editores visuais muitas vezes se assemelham Se você copiar e colar texto de um programa visualizações de código mostrar-lhe o código

processadores de texto. Embora cada editor que permite formatar texto (como o Word) em criado pelo editor visual para que você possa

será um pouco diferente, existem algumas um editor visual, ele pode adicionar editá-lo manualmente, ou então você pode

características que são comuns à maioria dos marcação extra. Para evitar que esta cópia simplesmente digitar o novo código você mesmo.

editores que lhe permitem controlar a do texto em um editor de texto simples Muitas vezes, é activado através de um botão com

apresentação do texto. primeiro (como o Notepad em um PC ou um ícone que diz HTML ou tenha ângulo

TextEdit no Mac) e, em seguida, copiá-lo a colchetes. O espaço em branco pode ser

partir desse programa e colá-lo no editor adicionado ao código pelo editor para tornar o

visual. código mais fácil de ler.

● Os títulos são criados por
realçar o texto, em seguida, usando uma
caixa drop-down para selecionar um título.

● texto em negrito e itálico são

criado por destacar algum texto e

pressionando um b ou Eu
botão.

● Novos parágrafos são criados

utilizando o retorno ou a tecla enter.

● Quebras de linha são criados por

pressionando a tecla Shift e a tecla de
retorno, ao mesmo tempo.

● regras horizontais são criadas

usando um botão com uma linha reta
nele.

49 TEXTO
 marcação semântica

Existem alguns elementos de texto que não se destinam a afetar a estrutura de suas páginas da
web, mas eles adicionar informações extra para as páginas - eles são conhecidos como marcação
semântica.

No resto do capítulo você vai conhecer mais Navegadores muitas vezes exibir o A razão para usar estes elementos é que
alguns elementos que irão ajudá-lo quando conteúdo desses elementos em uma outros programas, tais como leitores de tela
você está adicionando texto para páginas maneira diferente. Por exemplo, o ou motores de busca, pode usar esta
da web. Por exemplo, você está indo se conteúdo do < em> informação extra. Por exemplo, a voz de um
encontrar com o < em> elemento que permite elemento é mostrada em itálico, e uma < blockquote> leitor de tela pode dar ênfase às palavras
indicar que a ênfase deve ser colocada em é geralmente recuado. Mas você não deve dentro do < em> elemento, ou um motor de
palavras selecionadas e o < blockquote> usá-los para mudar a maneira que seu texto busca pode registrar que sua página
parece; seu propósito é descrever o conteúdo apresenta uma citação se você usar o < blockquote>
de suas páginas da web com mais precisão. elemento.
elemento que indica que um bloco de
texto é uma citação.

TEXTO50
 forte e ênfase

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

<P> <strong> Cuidado: </ strong> Pickpockets operam em

O uso do < strong> esta área. </ p> <p> Este brinquedo tem muitos pequenos pedaços e é < strong> não
elemento indica que o seu conteúdo tem
grande importância. Por exemplo, as adequado para crianças com menos de cinco anos de idade.
palavras contidas nesse elemento pode </ Strong> </ p>
ser dito com forte ênfase.

Por padrão, os navegadores irá mostrar o

Resultado
conteúdo de um < strong>

elemento em negrito.

<Em> capítulo-02 / emphasis.html html

<P> Eu < em> pensar </ em> Ivy foi o primeiro. </ p> <p> eu acho que < em>
o < em> elemento indica ênfase que Hera </ em> foi o primeiro. </ p> <p> Eu acho que Ivy foi a < em> primeiro </
sutilmente muda o sentido de uma em> . </ P>
frase.

Por padrão navegadores irá mostrar o conteúdo

de um < em> elemento em itálico.

Resultado

51 TEXTO
 Quotations
artigo

Há dois elementos comumente usados

html capítulo-02 / quotations.html
​para marcação de citações:
<Blockquote cite = "http://en.wikipedia.org/wiki/
Winnie-the-Pooh "> <p> Você já parou para pensar, e esqueça começar

novamente? </ p> </ blockquote> <p> Como AA Milne disse, < q> Algumas
pessoas falam
<Blockquote>
o < blockquote> elemento é usado para
animais. Não muitos ouvir embora. Esse é o problema. </ q> </ p>
citações mais longas que ocupam um
parágrafo inteiro. Note como o < p> elemento
ainda é usado no interior do < blockquote>

elemento.

Resultado Navegadores tendem a recuar o

conteúdo do < blockquote>
elemento, no entanto você não deve usar este

elemento apenas para recuar um pedaço de texto

- em vez você deve conseguir este efeito

utilizando CSS.

<Q>
o < q> elemento é usado para citações curtas
que se sentam em um parágrafo.
Navegadores são supostamente para
colocar aspas em torno do < q> elemento, no
entanto o Internet Explorer não - portanto,
muitas pessoas evitar usar o < q> elemento.

Ambos os elementos podem usar o citar

atributo para indicar onde a citação é de.
Seu valor deve ser um URL que vai ter
mais informações sobre a fonte da
citação.

TEXTO 52
 Abreviações & siglas

<Abbr> capítulo-02 / abbreviations.html html

<P> <abbr title = "Professor"> Prof </ abbr> Stephen

Se você usar uma abreviatura ou Hawking é um físico teórico e cosmólogo. </ p>
acrónimo, em seguida, o < abbr>

elemento pode ser usado. UMA título <P> <title sigla = "National Aeronautics and Space
atributo na tag de abertura é usado para Administração "> NASA </ acronym> fazer algumas coisas espaço louco. </ p>
especificar o termo completo.

Em HTML 4 houve uma separado

<Acronym> elemento para acrónimos.
Para explicitar a forma completa da
sigla, a título
atributo foi usado (como com o
<Abbr> elemento de cima). HTML5 só usa
Resultado
o < abbr> elemento para ambas as
abreviaturas e acrónimos.

53 TEXTO
 citações
artigo
e
definições

html capítulo-02 / citations.html

<Cite>
<P> <cite> Uma breve História do Tempo </ cite> por Stephen
Hawking já vendeu mais de dez milhões de cópias em todo o mundo. </ Quando você está fazendo referência a um

p> pedaço de trabalho, como um livro, filme ou

trabalho de pesquisa, o

<Cite> elemento pode ser utilizado para

indicar onde a citação é de.

Em HTML5, < cite> realmente não deve ser

Resultado
usado para o nome de uma pessoa - mas foi

permitido em HTML 4, então a maioria das

pessoas são susceptíveis de continuar a usá-lo.

Navegadores irá processar o conteúdo de um < cite>

elemento em itálico.

html capítulo-02 / definitions.html

<Dfn>
<P> UMA < dfn> buraco negro </ dfn> é uma região de espaço a partir de
que nada, nem mesmo a luz, pode escapar. </ p> A primeira vez que explicar algumas nova

terminologia (talvez um conceito acadêmico ou

algum jargão) em um documento, ele é

conhecido como o exemplo a definição do

mesmo.

o < dfn> elemento é usado para indicar a

Resultado
ocorrência com a definição de um novo prazo.

Alguns navegadores mostram o conteúdo

do < dfn> elemento em itálico. Safari e
Chrome não alterar sua aparência.

TEXTO 54
 detalhes Autor

<Address> capítulo-02 / address.html html

<Address>
o < address> elemento tem um bom uso <P> <a href="mailto:[email protected]">
específico: para conter detalhes de [email protected] </ a> </ p> <p> 742 Evergreen Terrace,
contato para o autor da página. Springfield. </ p> </ address>

Ele pode conter um endereço físico, mas não

precisa. Por exemplo, ele também pode conter
um número de telefone ou endereço de e-mail.

Navegadores muitas vezes exibir o

conteúdo do < address>
Resultado
elemento em itálico.

Você também pode estar interessado em algo

chamado o microformato hCard para adicionar

informações de endereço físico para a sua

marcação.

EXTRA on-line:
Você pode descobrir mais sobre
hCards no site que acompanha
este livro.

55 TEXTO
 Alterações no conteúdo
artigo

html capítulo-02 / insere-e-delete.html

<Ins>
<P> Foi a < del> pior </ del> <ins> melhor </ ins> idéia
que ela jamais tivera. </ p>
<del>
o < ins> elemento pode ser usado para
mostrar o conteúdo que foi inserido em um
documento, enquanto o < del> elemento pode
mostrar texto que foi excluído a partir dele.

Resultado
O conteúdo de um < ins> elemento é geralmente

sublinhado, enquanto o conteúdo de um < del> elemento

geralmente tem uma linha através dele.

html capítulo-02 / strikethrough.html

<S>
<P> Notebook: </ p> <p> <s> Foi de US
$ 995 </ s> </ p> <p> Agora apenas US o < s> elemento indica algo que não
$ 375 </ p> é mais preciso ou relevante (mas
que não deve ser excluído).

Visualmente o conteúdo de um < s>

elemento normalmente será exibido com uma

linha através do centro.
Resultado

Versões mais antigas do HTML tinha um

<U> elemento para o conteúdo que foi

sublinhado, mas isso está a ser eliminado.

TEXTO 56
57 TEXTO
 exemplo
Texto

Esta é uma página HTML muito simples que

demonstra marcação de texto.

Marcação estrutural inclui elementos tais como < h1>, <h2>, e < p>.
informação semântica é realizada em elementos como < cite> e < em>.

<Html>
<Head>
<Title> Texto </ title> </ head>
<body>

<H1> A história no livro </ h1> <h2> Capítulo 1 </ h2> <p> Molly tinha sido olhando para fora
da janela dela por cerca de

uma hora agora. Em sua mesa, que se encontra entre as cópias de < i> Natureza </ i> , <I>
New Scientist </ i> , e todas as outras revistas científicas seu trabalho tinha aparecido
em, era uma cópia bem manuseado de < cite> Na estrada </ cite> . Tinha sido o livro
favorito de Molly desde a faculdade, e quanto mais tempo ela passou nestes quatro
paredes do mais ela sentiu que precisava ser livre. </ p> <p> Ela passou os últimos dez
anos nesta sala,

sentado debaixo de um cartaz com uma cotação de proclamação Oscar Wilde que < q>
O trabalho é o refúgio de pessoas que não têm nada melhor para fazer </ q> . Embora
muitos consideravam seu trabalho pioneiro, desvendando os segredos do llama < título
abreviatura = "ácido desoxirribonucleico"> DNA </ abbr> , para ser uma conquista
notável, Molly < em> fez </ em> acho que ela tinha algo melhor para fazer. </ p> </ body>
</ html>

TEXTO58
 resumo
Texto

X elementos HTML são usados ​para descrever a estrutura de

a página (por exemplo, títulos, subtítulos, parágrafos). Eles também

X fornecer informação semântica (por exemplo, onde

ênfase deve ser colocada, a definição de quaisquer siglas utilizadas,

quando determinado texto é uma citação).

 3
listas

X listas numeradas
X listas de bala
X listas de definição
 Há muitas ocasiões em que precisamos usar
listas. HTML fornece-nos com três tipos
diferentes:

● listas ordenadas são listas onde cada item na lista é

numerados. Por exemplo, a lista pode ser um conjunto de passos para uma receita que
devem ser executadas em ordem, ou um contrato legal onde cada ponto precisa ser
identificado por um número da seção.

● listas não ordenadas são listas que começam com um ponto de bala
(Em vez de caracteres que indicam ordem).

● listas de definição são constituídos por um conjunto de termos, juntamente com o

definições para cada um desses termos.

63 LISTAS
LISTA64
 listas ordenadas

<Ol> capítulo-03 / ordenou-lists.html html

<Ol>
<Li> Pique as batatas em quartos </ li> <li> Ferver em água
A lista ordenada é criado com o < ol> elemento.
salgada por 15-20
minutos até ficar macio </ li> <li> Aqueça o leite,
manteiga e noz-moscada </ li> <li> Escorra as batatas e amasse </

<Li>
li> <li> Misture na mistura de leite </ li> </ ol>

Cada item da lista está colocado entre

uma abertura < li> tag e um fechamento
</ li> tag. (O li
significa item da lista.)

Resultado
Browsers recuar listas por padrão.

Às vezes você pode ver um tipo

atributo usado com o < ol>
elemento para especificar o tipo de
numeração (números, letras, algarismos
romanos e assim por diante). É melhor
usar o CSS -Tipo ListStyle propriedade
coberto nas páginas 333-335.

65 LISTAS
 listas não ordenadas
Artigo

html capítulo-03 / unordered-lists.html

<Ul>
<Ul>
<Li> batatas 1 kg rei Edward </ li> <li> leite 100ml </ li>
A lista não ordenada é criado com o
<li> 50g de manteiga salgada </ li> <li> noz-moscada
< ul> elemento.
ralada na hora </ li> <li> Sal e pimenta a gosto </ li> </ ul>

<Li>
Cada item da lista está colocado entre
uma abertura < li> tag e um fechamento
</ li> tag. (O li
significa item da lista.)

Resultado
Browsers recuar listas por padrão.

Às vezes você pode ver um tipo

atributo usado com o < ul>
elemento para especificar o tipo de ponto de
bala (círculos, quadrados, diamantes e assim
por diante). É melhor usar o CSS list-styletype propriedade
coberto nas páginas 333-335.

LISTA 66
LISTAS 66
 Listas de definição

<Dl> capítulo-03 / definição-lists.html html

<Dl>
A lista de definição é criado com o < dl> elemento <Dt> sashimi </ dt> <dd> peixe cru fatiado que é servido com
e geralmente consiste de uma série de
termos e suas definições. condimentos tais como rabanete ralado rábano branco ou raiz de gengibre,
wasabi e molho de soja </ dd> <dt> Escala </ dt> <dd> Um dispositivo utilizado
para medir com precisão o
Dentro do < dl> elemento que você verá
geralmente pares de < dt> e peso de ingredientes </ dd> <dd> Uma técnica através da qual as escamas
<Dd> elementos. são removidas
a partir da pele de um peixe </ dd> <dt> Scamorze </ dt> <dt> Scamorzo </
dt> <dd> Um queijo italiano normalmente feitos de toda

<Dt>
leite de vaca (embora tenha sido tradicionalmente feita a partir de leite de
Esta é utilizada para conter o termo ser
búfala) </ dd> </ dl>
definido (a definição do termo).

<Dd> Resultado

Isto é usado para conter a

definição.

Às vezes você pode ver uma lista onde há

dois termos utilizados para a mesma
definição ou duas definições diferentes para
o mesmo prazo.

67 LISTAS
 Artigo
Listas aninhadas

Você pode colocar uma segunda lista dentro de um

html capítulo-03 / nested-lists.html
< li> elemento para criar uma sub-lista ou lista

<Ul> aninhada.

<Li> mousses </ li> <li> pastelaria

Os navegadores exibem listas aninhadas

<Ul> recuados longe do que a lista pai. Em listas não

<Li> Croissant </ li> <li> Mille-feuille </ li> ordenadas aninhadas, o navegador irá

<li> Palmier </ li> <li> profiterole </ li> </ ul> normalmente mudar o estilo do ponto de bala

</ li> <li> tarts </ li> </ ul> também.

Resultado

LISTA 68
LISTAS 68
69 LISTA
 exemplo
listas

Aqui você pode ver um título principal seguido de um parágrafo

introdutório. Uma lista não ordenada é usada para delinear os
ingredientes e uma lista ordenada é usada para descrever as
etapas.

<Html>
<Head>
<Title> listas </ title> </ head>
<body>

<H1> Ovos mexidos </ h1> <p> Os ovos são uma das minhas comidas favoritas.
Aqui está um
receita para deliciosamente ricos ovos mexidos. </ p> <h2> ingredientes </ h2>
<ul>

<Li> 2 ovos </ li> <li> manteiga

1tbs </ li> <li> creme 2tbs </ li> </ ul>
<h2> Método </ h2> <ol>

<Li> Derreta a manteiga em uma frigideira em um meio

calor </ li> <li> Delicadamente misture os ovos e creme em uma tigela </ li> <li> Uma
vez que a manteiga derreta creme add e ovos </ li> <li> Usando uma espátula dobrar
os ovos a partir da borda

a panela para o centro a cada 20 segundos (como se você estiver fazendo

uma omelete) </ li> <li> Quando os ovos são remove ainda úmido do

de calor (que vai continuar a cozinhar na placa até servido) </ li> </ ol> </
body> </ html>

LISTAS70
 resumo
listas

X Existem três tipos de listas HTML: ordenados,

não ordenada, e definição. listas

X ordenadas usar números.

X Listas não ordenadas usar balas.

X Listas de definição são usados ​para definir a terminologia.

X As listas podem ser encaixados um dentro do outro.

 4
ligações

X Criar ligações entre páginas

X Ligando para outros sites
X ligações de e-mail
 As ligações são a característica definidora da web, porque

eles permitem que você passar de uma página web para

outra - permitindo que a própria ideia de navegação ou surf.

Você vai comumente se deparar com os seguintes tipos de links:

● Links de um site para outro

● Links de uma página para outra, no mesmo site

● Links de uma parte de uma página web para outra parte do

mesma página

● Links que abrem em uma nova janela do navegador

● Os links que iniciam o seu programa de e-mail e responder a um novo

email para alguém

75 LINKS
LINKS76
 escrita Ligações

As ligações são criadas usando o < a> elemento. Os usuários podem clicar em qualquer coisa
entre a abertura < a> tag eo fechamento </ a> tag. Você especifica qual página você deseja
vincular a usar o href atributo.

Esta é a página A Isto é o Texto o

ligação Leva-o para usuário clica no

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

Tag ligação de abertura fechamento

ligação Tag

77 LINKS
O texto entre a abertura Muitas pessoas navegar sites, verificando o Para escrever um bom texto do link, você pode

<a> tag e fechamento </ a> tag é conhecido texto para links. Limpar texto do link pode pensar em palavras que as pessoas possam

como texto do link. Sempre que possível, o ajudar os visitantes a encontrar o que eles usar quando procurar a página que você está

texto do link deve explicar de onde serão querem. Isto irá dar-lhes uma impressão mais ligando. (Por exemplo, em vez de escrever

levados os visitantes se eles clique sobre positiva do seu site e pode incentivá-los a "lugares para ficar" você poderia usar algo mais

ele (em vez de apenas dizer "clique aqui"). visitá-lo por mais tempo. (Ele também ajuda específico, como "hotéis em Nova York.")

Abaixo você pode ver o link para o IMDB as pessoas a usar software leitor de tela.)
que foi criado na página anterior.

LINKS 78
 Ligando para outros sites

<a> capítulo-04 / ligando-a-outra-sites.html html

<P> Revisões de filme:

As ligações são criadas usando o < a> <Ul>
elemento que tem um atributo <Li> <a href="http://www.empireonline.com">
chamado href. O valor do Império </ a> </ li>
href atributo é a página que você quer que <Li> <a href="http://www.metacritic.com">
as pessoas para ir para quando clicarem Metacritic </ a> </ li>
no link. <Li> <a href="http://www.rottentomatoes.com">
Tomates podres </ a> </ li> <li> <a
Os usuários podem clicar em qualquer coisa que href="http://www.variety.com">
aparece entre a abertura Variedade </ a> </ li> </ ul>
<a> tag eo fechamento </ a> </ p>
tag e será levado para a página
especificada no href atributo.

Quando você link para um site

Resultado
diferente, o valor da href
atributo será o endereço web completo
para o local, que é conhecido como um absoluto
URL.

Browsers mostrar links em azul com um

sublinhado por padrão.

URLs absolutos
URL significa Uniform Resource Locator. Um URL absoluto começa com o nome de
Cada página web tem seu próprio URL. Este é domínio para o site, e pode ser seguido pelo
o endereço web que você digitar em um caminho para uma página específica. Se a
navegador, se você queria para visitar essa página for especificado, o site irá exibir a
página específica. página inicial.

79 LIGAÇÕES
 Ligando para outras páginas
Artigo
no site mesmo

html capítulo-04 / ligando-a-outra-pages.html

<a>
<P>
<Ul> Quando você está ligando a outras páginas
<Li> <a href="index.html"> Casa </ a> </ li> <li> <a dentro do mesmo site, você não precisa
href="about-us.html"> Sobre </ a> </ li> <li> <a href="movies.html"> Filmes especificar o nome de domínio no URL. Você
</ a> </ li> <li> <a href="contact.html"> Contato </ a> </ li> </ ul> </ p> pode usar um atalho conhecido como

relativo URL.

Se todas as páginas do site estão na

mesma pasta, em seguida, o valor do href atributo
é apenas o nome do arquivo.

Se você tem diferentes páginas de um site

em pastas diferentes, então você pode usar
Resultado
uma sintaxe um pouco mais complexo para
indicar onde a página é em relação à página
atual. Você vai aprender mais sobre estes
nas páginas 81-84.

Se você olhar para o código de download

para cada capítulo, você vai ver que o index.html
arquivo contém links que usam URLs
relativos.

URLs relativos
Ao vincular a outras páginas dentro do Vamos dar uma olhada em URLs relativas URLs relativos ajudar na construção de um site
mesmo site, você pode usar URLs relativos. em páginas 83-84, pois há vários atalhos em seu computador porque você pode criar
Estes são como uma versão abreviada de úteis que você pode usar para escrever links links entre as páginas sem ter de configurar o
URLs absolutos, porque você não precisa para outras páginas em seu próprio site. seu nome de domínio ou hospedagem.
especificar o nome de domínio.

LINKS 8080
LIGAÇÕES
 estrutura de diretório

Em sites maiores, é uma boa idéia para organizar seu código, colocando as páginas para cada
seção diferente do local em uma nova pasta. Pastas em um website são muitas vezes referidos
como diretórios.

estrutura relações páginas iniciais

O diagrama da direita mostra a estrutura A relação entre os arquivos e pastas em A principal página inicial de um site escrito
de diretório para uma fictícia site de um site é descrito usando a mesma em HTML (e as homepages de cada seção
entretenimento listagens chamado terminologia como uma árvore em uma pasta filho) é chamado index.html.
ExampleArts. genealógica.

A pasta de nível superior é conhecido como o raiz No diagrama da direita, você pode ver servidores Web são normalmente configurados

pasta. (Neste exemplo, a pasta raiz é alguns relacionamentos foram atraídos. para retornar o index.html arquivar se nenhum

chamado nome de arquivo for especificado.

examplearts.) A pasta raiz contém todos

os outros arquivos e pastas para um site. o examplearts pasta é um precursor Portanto, se você digitar
da filmes, música examplearts.com ele irá retornar
e teatro pastas. E o do filmes, examplearts.com/index
Cada secção do local é colocada em uma pasta música e teatro . html, e música examplearts.com/ retornará
examplearts
separada; isso ajuda a organizar os arquivos. pastas são filhos do
examplearts pasta. . com / música / index.html.

Se você estiver trabalhando com um sistema de Em vez disso, esses sistemas geralmente Editando o arquivo de modelo iria mudar
gerenciamento de conteúdo, software de usam um arquivo de modelo para cada tipo todas as páginas que usam esse modelo.
blogging, ou um sistema de e-commerce, você diferente de página (como artigos de notícias, Não altere qualquer código que não é
pode não ter arquivos individuais para cada posts, ou produtos). HTML ou você pode quebrar a página.
página do site.

81 LINKS
 examplearts
parente avó
imagens
o examplearts pasta é um o examplearts pasta é um avô do DVD
index.html
precursor da música pasta. pasta.
filmes
logo.gif
cinema
index.html
listings.html
reviews.html dvd
neto
index.html o DVD pasta é um neto do examplearts
música pasta.
reviews.html
criança index.html
o música pasta é um filho do examplearts index.html
pasta. listings.html
reviews.html
teatro
index.html
listings.html
reviews.html

Cada página e cada imagem em um site tem O caminho para a página inicial deste site é Você usa URLs quando ligando para outras

um URL ( ou Uniform Resource Locator). A www.examplearts páginas da web e quando incluindo imagens em

URL é composta do nome de domínio . com / index.html. O caminho para o seu próprio site. Na página seguinte, você irá

seguido pelo caminho para essa página ou logotipo para o site é encontrar uma forma abreviada de vincular a

imagem. logo.gif examplearts.com/images/. arquivos em seu próprio site.

A pasta raiz contém: Cada sub-diretório contém: A seção de filmes contém:

● index.html
Um arquivo chamado que é a ● index.html
Um arquivo chamado que é a ● Uma pasta chamada cinema
página inicial para todo o site página inicial para essa seção
● Uma pasta chamada DVD.

● pastas individuais para o ● rever

Uma página de comentários chamado
filmes, seções de música e . html
teatro do site
● Um a lista chamada listagens
. html ( exceto para a seção
DVD)

LINKS82
 URLs relativos

URLs relativos pode ser usado quando ligando para páginas dentro de seu próprio site. Eles fornecem

uma forma abreviada de dizer ao navegador onde encontrar seus arquivos.

Quando você está ligando a uma página em Se todos os arquivos em seu site estão em uma

seu próprio site, você não precisa especificar o pasta, basta usar o nome do arquivo para essa

nome de domínio. Você pode usar URLs página.

relativos

que são uma forma abreviada de dizer ao Se o seu site está organizado em pastas
navegador onde uma página é em relação à separadas (ou diretórios), você precisa dizer
página atual. ao navegador como obter a partir da página é

Isso é especialmente útil ao criar um novo atualmente no para a página que você está ligando.
site ou aprender sobre HTML porque você
pode criar links entre as páginas quando
eles estão apenas no seu computador Se você ligar para a mesma página de duas

pessoal (antes você tem um nome de páginas diferentes que você pode, portanto,

domínio e carregado-los para a web). precisa escrever duas URLs relativos diferentes.

Esses links fazer uso da mesma terminologia

Porque você não precisa repetir o nome de (emprestado do que de árvores
domínio em cada link, eles também são mais genealógicas) que você conheceu na página
rápidos para escrever. anterior que introduz estrutura de diretórios.

83 LIGAÇÕES
Tipo de ligação relativa exemplo ( a partir do diagrama na página anterior)

pasta mesma
Para fazer o link para um arquivo na mesma pasta, basta usar o nome do Para conectar-se a comentários de música da página inicial de música:

arquivo. (Nada mais é necessário.) <A href =" reviews.html "> Rever </ a>

pasta filho
Para uma pasta filho, use o nome da pasta filho, seguido por Para conectar-se a lista de música a partir da homepage:

uma barra, então o nome do arquivo. <A href =" música / listings.html "> listagens </ a>

neto pasta
Use o nome da pasta filho, seguido por uma barra, então o Para conectar-se a DVD comentários da página inicial:

nome da pasta neto, seguida por outra barra, então o nome <A href =" filmes / dvd / reviews.html ">
do arquivo. Rever </ a>

pasta pai
Use ../ para indicar a pasta acima do atual, em seguida, segui-lo com Para fazer o link para a página inicial a partir dos comentários de música:

o nome do arquivo. <A href =" ../index.html "> Casa </ a>

avós pasta
Repita o ../ para indicar que você quer ir para cima duas pastas (em Para fazer o link para a página inicial a partir dos comentários de DVD:

vez de um), então segui-lo com o nome do arquivo. <A href =" ../../index.html "> Casa </ a>

Quando um site é ao vivo (ou seja, enviados Por exemplo, você pode ver o nome de A barra vai voltar a página inicial para
para um servidor web), você pode ver um par uma pasta filho sem o nome de um todo o site, e uma barra seguido por
de outras técnicas utilizadas que não arquivo. Neste caso, o servidor web irá um nome de arquivo irá retornar esse
funcionam quando os arquivos estão no normalmente tentar mostrar a página inicial arquivo desde que seja no diretório
computador local. para essa seção. raiz.

LINKS84
 links de email

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

<a href="mailto:[email protected]"> email Jon </ a>

Para criar um link que inicia programa de
e-mail do usuário e aborda um e-mail para um
endereço de e-mail especificado, você usa o < a>

elemento. No entanto, desta vez o valor do href

Resultado
atributo começa com mailto: e é seguido pelo
endereço de e-mail que você deseja que o
e-mail a ser enviado.

À direita, você pode ver que um link de email

se parece com qualquer outro link, mas,
quando é clicado, o programa de email do
usuário irá abrir uma nova mensagem de
e-mail e dirigir-se para a pessoa
especificada no link.

85 LINKS
 abrir links em uma
Artigo
nova
janela

html capítulo-04 / abertura-links-in-a-nova-window.html

alvo
<a target="_blank"> href="http://www.imdb.com"
Internet Movie Database </ a> ( abre em uma nova janela) Se você quiser um link para abrir em uma

nova janela, você pode usar o

alvo atributo na abertura

<a> tag. O valor deste atributo deve
ser _ em branco.
Resultado

Uma das razões mais comuns a página do

autor web pode querer um link para ser
aberto em uma nova janela é se ele aponta
para outro site. Nesses casos, eles esperam
que o usuário irá retornar para a janela que
contém seu site depois de terminar a olhar
para o outro.

Geralmente você deve evitar abrir links em

uma nova janela, mas se o fizer, é
considerada uma boa prática para informar
aos usuários que o link irá abrir uma nova
janela antes de clicar nele.

LINKS 8686
LIGAÇÕES
 Vinculando a uma parte específica da
página mesma

No topo de uma página tempo você pode querer

capítulo-05 / ligando-to-a-específicas do part.html html
adicionar um índice com links para as seções

correspondentes mais baixas para baixo. Ou você

pode querer adicionar um link de parte caminho <H1 id = "top"> Termos produção de filmes </ h1> <a href="#arc_shot"> arco tiro </ a> <br
para baixo da página de volta para o início da /> <a href="#interlude"> Interlúdio </ a> <br /> <a href="#prologue"> Prólogo </ a> <br />
mesma para salvar os usuários de ter que se <br /> <h2 id = "arc_shot"> arco tiro </ h2> <p> Um tiro em que o sujeito é fotografado por
deslocar de volta ao topo. um

cerco ou câmera em movimento </ p> <h2 id = "interlúdio"> Interlúdio </ h2> <p> Uma
Antes que você possa conectar-se a uma parte breve, cena de filme intervir ou seqüência, não
específica de uma página, você precisa identificar

os pontos na página que o link vai para. Você pode especificamente ligado ao terreno, que aparece dentro de uma película </ p> <h2
fazer isso usando o identidade atributo (que pode ser id = "prólogo"> Prólogo </ h2> <p> Um discurso, prefácio, introdução, ou breve cena
usado em todos os elementos HTML). Você pode

ver que o

precede a acção principal ou trama de um filme; contrastar a EPILOGUE </ p> <p>
<H1> e < h2> elementos descritos neste exemplo <a href="#top"> Topo </ a> </ p>
foram dadas identidade

atributos que identificam essas

seções da página.

O valor do identidade atributo deve começar

com uma letra ou um sublinhado (não um

número ou qualquer outro caractere) e, em uma

única página, não há dois identidade atributos

devem ter o mesmo valor.

Para conectar-se a um elemento que usa um identidade

atributo que você usar o < a>

elemento novamente, mas o valor do href atributo

começa com o símbolo #, seguido pelo
valor do identidade atributo do elemento
que você deseja vincular. Neste exemplo,
< a href = "# top">

links para o < h1> elemento no topo da

página cuja identidade
atributo tem um valor de topo.

87 LIGAÇÕES
 Ligando para uma parte
Artigo
específica
de outra página

Se você quiser conectar-se a uma parte

Resultado
específica de uma página diferente (seja em seu

próprio site ou um site diferente), você pode usar

uma técnica similar.

Enquanto a página que você está ligando tem identidade

atributos que identificam partes específicas da

página, você pode simplesmente adicionar a

mesma sintaxe para o fim da ligação para essa

página.

Portanto, o href atributo irá conter o

endereço da página (ou um URL
absoluto ou um URL relativa), seguido
pela
# símbolo, seguido pelo valor do identidade atributo
que é usado no elemento que você está
ligando.

Por exemplo, para conectar-se a parte

inferior da página inicial do site que
acompanha este livro, você escreveria:

<A href = "http:. / Www

htmlandcssbookcom /
# Bottom ">

LINKS 88
88
89 LINKS
 exemplo
ligações

Este exemplo é de uma página web sobre o filme.

o < h1> elemento é usado com um identidade atribuir no topo da página para que um link pode ser

adicionado para levar os leitores a partir da parte inferior da página para o topo. Há um link de email para

permitir que os leitores em contato com o autor da página web. Há também uma série de links para

URLs qualificados. Estas ligações para vários festivais de cinema. Abaixo esta lista é um link para um

URL relativo que é uma página "sobre" o que vive no mesmo diretório.

<Html>
<Head>
<Title> ligações </ title> </ head>
<body>

<H1 id = "top"> Folk Film </ h1> <h2> Festival Diário </ h2> <p> Aqui
estão alguns dos festivais de cinema que

vai estar presente este ano. < br /> Por favor

<a href="mailto:[email protected]">
entre em contato conosco </a> se você gostaria de mais
informações. </ p> <h3> janeiro </ h3>

<P> <a href="http://www.sundance.org">

Sundance Film Festival </ a> <br />
Park City, Utah, EUA < br />
20 - 30 de janeiro de 2011 </ p> <h3> fevereiro
</ h3>
<P> <a href="http://www.tropfest.com">
Tropfest </ a> <br />
Sydney, Austrália < br />
20 de fevereiro de 2011 </ p> <! - conteúdo adicional -> <p> <a
href="about.html"> Sobre Film Folk </ a> </ p> <p> <a href="#top"> Topo da
página </ a> </ p> </ body> </ html>

LINKS90
 resumo
ligações

X As ligações são criadas usando o <a> elemento.

X o <a> utiliza o elemento href atributo para indicar a página que

você está ligando.

X Se você está ligando a uma página dentro de seu próprio site, é

melhor usar links relativos em vez de URLs qualificados. Você pode criar

X links para abrir programas de e-mail com um

endereço de e-mail no campo "para". Você

X pode usar o identidade atributo para segmentar elementos dentro

uma página que pode ser ligado a.

 5
imagens

X Como adicionar imagens às páginas

X Escolhendo o formato certo
X Otimização de imagens para a web
 Há muitas razões pelas quais você pode querer adicionar
uma imagem a uma página web: você pode querer incluir
um logotipo, fotografia, ilustração, diagrama, ou gráfico.

Há várias coisas a considerar na selecção e preparação de imagens

para o seu site, mas tendo tempo para obtê-los direita irá torná-la mais
atraente e profissional. Neste capítulo, você vai aprender a:

● Incluir uma imagem em suas páginas da web usando HTML

● Escolher qual formato de imagem para usar

● Mostrar uma imagem no tamanho certo

● Otimização de imagens para uso na web para tornar as páginas

carregar mais rápido

Você também pode usar CSS para incluir imagens em suas páginas usando o

imagem de fundo propriedade, que você vai encontrar nas páginas 413-420.

95 IMAGENS
IMAGENS
96
 Escolher Imagens para o seu site

Uma imagem pode dizer mais que mil palavras, e grandes

imagens ajudar a fazer a diferença entre um site de aparência
média e realmente envolver um.

As imagens podem ser usadas para definir pagar para usar (há uma lista de sites de banco Se você tem uma página que mostra várias
o tom para um site em menos tempo do que de imagens abaixo). Lembre-se que todas as imagens (como fotografias de produtos ou
leva para ler uma descrição. Se você não imagens estão sujeitas a direitos de autor, e membros de uma equipe), em seguida,
tem fotografias para usar em seu site, há você pode ficar em apuros para simplesmente colocá-los em um fundo simples e consistente
empresas que vendem imagens; estas são tirar fotografias a partir de outro site. ajuda a olhar melhor como um grupo.
as imagens que você

As imagens devem ... Estoque de fotos on-line adicional

Seja relevante www.istockphoto.com Nós fornecemos uma galeria online que ajuda
Transmitir informações transmitir o clima www.gettyimages.com você a escolher a imagem certa para o seu
certo Seja instantaneamente www.veer.com www.sxc.hu site. Você pode encontrá-lo na seção de
reconhecível Coloque a paleta de cores www.fotolia.com ferramentas do site que acompanha este livro.

97 IMAGENS
 armazenamento de imagens
seu site

Se você está construindo um site a partir do zero, é uma boa prática

para criar uma pasta para todas as imagens no site usa.

Como um website cresce, mantendo as Em um grande site que você gostaria de adicionar Se você estiver usando um sistema de

imagens em uma pasta separada ajuda a subpastas dentro da imagens gerenciamento de conteúdo ou plataforma de blogs,

entender como o site é organizado. Aqui você pasta. Por exemplo, imagens, tais como logotipos e geralmente há ferramentas incorporadas ao site

pode ver um exemplo dos arquivos para um botões pode sentar-se em uma pasta chamada interface, administrativo que permite o upload de imagens, eo

site; todas as imagens são armazenadas em fotografias do produto pode sentar-se em uma programa irá provavelmente já tem uma pasta

uma pasta chamada imagens. página chamada produtos, e imagens relacionadas separada para arquivos de imagem e quaisquer

com a notícia pode viver em uma pasta chamada notícia. outros carregamentos.

IMAGENS
98
 adicionando imagens

<Img> capítulo-05 / adicionando-images.html html

<Img src = "images / quokka.jpg" alt = "Uma família de

Para adicionar uma imagem para a página que quokka" title = 'O quokka é um marsupial australiano que é
você precisa usar um < img> semelhante em tamanho para o gato doméstico'. />
elemento. Este é um elemento vazio (o que

significa que não há nenhuma marca de

fechamento). Ele deve levar os seguintes dois

atributos:
Resultado

src
Isso informa ao navegador onde ele pode

encontrar o arquivo de imagem. Esta será

normalmente um URL relativo apontando para

uma imagem em seu próprio site. (Aqui você pode

ver que as imagens estão em uma pasta filho

chamado imagens - URLs relativos foram cobertos

nas páginas 83-84).

alt
Isso fornece uma descrição de texto da
imagem que descreve a imagem se você
não pode vê-lo.

título
Você também pode usar o título O texto usado no alt atributo é muitas vezes referida Se a imagem é apenas para fazer uma página

atributo com o < img> elemento para fornecer como texto alternativo. mais atraente (e não tem nenhum significado,

informações adicionais sobre a imagem. A Deve dar uma descrição precisa do tais como uma linha divisória gráfico), então o

maioria dos navegadores irá mostrar o conteúdo conteúdo da imagem para que possa ser
deste atributo em um tootip quando o usuário entendida por software leitor de tela (usado alt atributo deve ainda ser usado, mas as

passa o mouse sobre a imagem. por pessoas com deficiência visual) e aspas deve ser deixado vazio.
motores de busca.

99 IMAGENS
 altura largura
artigo
de Imagens

Você também vai ver muitas vezes um < img>

html capítulo-05 / altura e de largura-de-images.html
elemento usar dois outros atributos que especificam

<Img src = "images / quokka.jpg" alt = "Uma família de o seu tamanho:

quokka" width = "600" height = "450"/>

altura
Isto especifica a altura da imagem em
pixels.

Resultado
largura
Isto especifica a largura da imagem
em pixels.

Imagens frequentemente levam mais tempo

para carregar do que o código HTML que

compõe o resto da página. É, portanto, uma boa

idéia para especificar o tamanho da imagem

para que o navegador pode tornar o resto do

texto na página, deixando a quantidade certa de

espaço para a imagem que ainda está

carregando.

O tamanho das imagens é cada vez mais sendo

especificada utilizando CSS ao invés de HTML -

consulte as páginas 409410 para obter mais

informações sobre isso.

IMAGENS100
imagens 100
 Onde colocar imagens no seu código

Quando uma imagem é colocada no código irá

capítulo-05 / where-to-place-images.html html
afetar a forma como ele é exibido. Aqui estão

três exemplos de posicionamento de imagem <Img src = "images / bird.gif" alt = "Bird" width = "100"
que produzem resultados diferentes: height = "100" /> <p> Existem cerca de 10.000 espécies vivas de aves

que habitam diversos ecossistemas do Ártico à Antártida. Muitas espécies

1: antes de um parágrafo empreendem a longa distância migrações anuais, e muitos mais realizar mais
O parágrafo começa em uma nova linha curtas viagens irregulares. </ p> <hr />
após a imagem.

2: Dentro do início de um parágrafo <P> <img src = "images / bird.gif" alt = "Bird" width = "100"
height = "100" /> Existem cerca de 10.000 espécies vivas de aves que habitam
A primeira linha de texto se alinha com a parte diversos ecossistemas do Ártico à Antártida. Muitas espécies empreendem a longa
inferior da imagem. distância migrações anuais, e muitos mais realizar mais curtas viagens irregulares. </ p>
<hr /> <p> Existem cerca de 10.000 espécies vivas de aves
3: no meio de um parágrafo

A imagem é colocada entre as palavras

do parágrafo que aparece no.
que habitam diversos ecossistemas do Ártico à Antártida. < img src = "images /
bird.gif" alt = "Bird" width = "100" height = "100" /> Muitas espécies empreendem
a longa distância migrações anuais, e muitos mais realizar mais curtas viagens
irregulares. </ p>

101 IMAGENS
 artigo

Onde você colocar a imagem no código é

Resultado
importante porque os navegadores mostrar

elementos HTML em uma de duas maneiras:

elementos de bloco sempre aparecem em uma

nova linha. Exemplos de elementos de bloco

incluem o < h1> e

<P> elementos.

Se o < img> é seguido por um elemento de nível

bloco (tal como um parágrafo), em seguida, o

elemento de bloco de nível irá sentar-se numa

nova linha após os imageas mostradas no

primeiro exemplo desta página.

elementos inline sentar-se dentro de um

elemento nível de bloco e não começar em

uma nova linha. Exemplos de elementos em

linha incluem a < b>, <em>, e < img> elementos.

Se o < img> elemento está dentro de um elemento

de nível de bloco, qualquer texto ou outros

elementos em linha irá fluir em torno da imagem,

como mostrado nos segundo e terceiro

exemplos desta página.

Bloco e elementos inline são discutidos

com maior profundidade nas páginas

185-186.

IMAGENS 102
102
 Código de idade: alinhar imagens
horizontalmente

alinhar capítulo-05 / alinhamento-images-horizontally.html html

o alinhar atributo era comumente usado para
<P> <img src = "images / bird.gif" alt = "Bird" width = "100"
indicar como as outras partes de uma
height = "100" align = "left" /> Há cerca de
página deve fluir em torno de uma imagem.
10.000 espécies de aves que habitam diversos ecossistemas do Ártico à Antártida
Ele foi removido do HTML5 e novos sites
vivo. Muitas espécies empreendem a longa distância migrações anuais, e muitos
devem usar CSS para controlar o
mais realizar mais curtas viagens irregulares. </ p> <hr />
alinhamento das imagens (como você verá
nas páginas 411-412).

<P> <img src = "images / bird.gif" alt = "Bird" width = "100"

height = "100" align = "right" /> Há cerca de
Eu discuti-lo aqui, porque é provável que você
10.000 espécies de aves que habitam diversos ecossistemas do Ártico à Antártida
se deparar com ela se você olhar para código
vivo. Muitas espécies empreendem a longa distância migrações anuais, e muitos
antigo, e porque alguns editores visuais ainda
mais realizar mais curtas viagens irregulares. </ p>
inserir este atributo quando você indicar como
uma imagem deve estar alinhado.

o alinhar atributo pode tomar esses

valores horizontais:

esquerda
Isso alinha a imagem para a esquerda

(permitindo que o texto flua em torno do seu

lado direito).

certo
Isso alinha a imagem para a direita (permitindo

que o texto flua em torno do seu lado esquerdo).

103 IMAGENS
 artigo

Isso parece muito mais limpa do que ter

Resultado
uma linha de texto ao lado da imagem
(como mostrado no exemplo anterior).

Quando você dá o alinhar

atribuir um valor de esquerda, a imagem é
colocada à esquerda e texto flui em torno
dele.

Quando você dá o alinhar

atribuir um valor de certo, a imagem é
colocada à direita e o texto flui em
torno dele.

Quando o texto flui até a borda de uma

imagem que pode torná-lo mais difícil de ler.

Você vai aprender como adicionar um

espaço entre texto e imagens em páginas

313-314 usando o CSS preenchimento e

margem propriedades.

IMAGENS104
104
 Código de idade: alinhando
Imagens verticalmente

Como você viu na última página, o

capítulo-05 / alinhamento-images-vertically.html html
alinhar atributo não é mais usado em

HTML5, mas é coberto aqui, porque você <P> <img src = "images / bird.gif" alt = "Bird" width = "100"
pode vê-lo usado em sites mais antigos e altura = "100" align = "topo" /> Há cerca de
ainda é usado no código criado por alguns 10.000 espécies de aves que habitam diversos ecossistemas do Ártico à Antártida
editores visuais. vivo. Muitas espécies empreendem a longa distância migrações anuais, e muitos
mais realizar mais curtas viagens irregulares. </ p> <hr />

Você pode ver como usar CSS para

alcançar os mesmos efeitos em páginas

285-286. <P> <img src = "images / bird.gif" alt = "Bird" width = "100"
height = "100" align = "middle" /> Há cerca de
Há três valores que os 10.000 espécies de aves que habitam diversos ecossistemas do Ártico à Antártida
alinhar atributo pode assumir que o controle vivo. Muitas espécies empreendem a longa distância migrações anuais, e muitos
como a imagem deve alinhar verticalmente mais realizar mais curtas viagens irregulares. </ p> <hr />
com o texto que a rodeia:

<P> <img src = "images / bird.gif" alt = "Bird" width = "100"

topo
altura = "100" alinhar = "inferior" /> Há cerca de
Este alinha a primeira linha do texto ao
10.000 espécies de aves que habitam diversos ecossistemas do Ártico à Antártida
redor com a parte superior da imagem.
vivo. Muitas espécies empreendem a longa distância migrações anuais, e muitos
mais realizar mais curtas viagens irregulares. </ p>

meio
Isso alinha a primeira linha do texto
adjacente com o meio da imagem.

inferior
Este alinha a primeira linha do texto ao
redor com a parte inferior da imagem.

105 IMAGENS
 artigo

O valor de topo coloca a primeira linha de texto

Resultado
perto da parte superior da imagem e as linhas

subsequentes de texto aparecem sob a

imagem.

O valor de meio coloca a primeira linha de

texto perto do meio vertical da imagem e
as linhas subsequentes de texto
aparecem sob a imagem.

O valor de inferior coloca a primeira linha

de texto perto da parte inferior da imagem
e as linhas seguintes do texto sob a
imagem.

Quando o texto flui até a borda de uma

imagem que pode torná-lo mais difícil de ler.

Você vai aprender como adicionar um

espaço entre texto e imagens em páginas

313-314 usando o CSS preenchimento e

margem propriedades.

Se você gostaria todo o texto para embrulhar

arond a imagem (ao invés de apenas uma

linha de texto), você deve usar o CSS flutuador

propriedade discutido nas páginas

370-372.

No código antigo, você pode ver a

alinhar atributo usado com os valores esquerda
ou certo para alcançar o mesmo efeito
(como descrito na página anterior),
embora seu uso não é recomendado.

IMAGENS106
106
 três regras para a criação
de imagens

Existem três regras para se lembrar quando você está criando

imagens para seu site, que são resumidas abaixo. Nós entrar em
maiores detalhes sobre cada tema ao longo dos próximos nove
páginas.

1 2 3
salvar imagens no formato salvar imagens no use a resolução correcta
certo tamanho certo

Sites utilizam principalmente imagens em Você deve salvar a imagem na mesma telas de computador são compostas de pontos

jpeg, gif, ou png. Se você escolher o formato largura e altura ele aparecerá no site. Se conhecidos como pixels. As imagens usadas na web

de imagem errado, então sua imagem pode a imagem for menor do que a largura ou a também são compostas de pequenos pontos. A

não parecer tão nítidas como deveria e pode altura que você especificou, a imagem resolução se refere ao número de pontos por

tornar a página web mais lento para carregar. pode ser distorcida e esticada. Se a polegada, ea maioria das telas de computador

imagem for maior do que a largura e mostram apenas páginas da web em 72 pixels por

altura se tiver especificado, a imagem vai polegada. Portanto, salvar imagens em um resultado

demorar mais tempo para exibir na de maior resolução em imagens que são maiores do

página. que o necessário e levam mais tempo para

download.

107 IMAGENS
 ferramentas para editar e
salvar imagens

Existem várias ferramentas que você pode usar para editar e gravar as

imagens para garantir que eles são o direito tamanho, formato e

resolução.

A ferramenta mais popular entre os profissionais

da web é Adobe Photoshop. ( Na verdade, os

web designers profissionais costumam usar

esse software para projetar sites inteiros.) A

versão completa do Photoshop é caro, mas há

uma versão mais barata chamada Photoshop

Elements, que iria servir as necessidades da

maioria dos iniciantes.

outro software editores on-line on-line adicional

Adobe Fireworks www.photoshop.com Assista a vídeos que demonstram como
Pixelmator PaintShop www.pixlr.com redimensionar imagens e guardá-las no
Pro Paint.net www.splashup.com formato correto usando ambas as
www.ipiccy.com aplicações.

IMAGENS
108
 formatos de imagem: JPEG

Sempre que você tem muitas cores diferentes em uma imagem

que você deve usar um JPEG. Uma fotografia que apresenta

neve ou um céu nublado pode parecer que tem grandes áreas

que são apenas branco ou cinza, mas a imagem é geralmente

composta de muitas cores diferentes que são sutilmente

diferentes.
Formatos de imagem: GIF

RESE UMR
A CH
ST
TE euu D
ocEê
Bv

C
O
N

C
E
P
T

N EuG
DES
Use GIF ou PNG ao salvar
imagens com poucas cores
ou grandes áreas da mesma
cor.

Quando uma imagem tem uma área que é preenchido com

exatamente a mesma cor, ele é conhecido como cor lisa.

Logotipos, ilustrações e diagramas costumam usar cores planas.

(Note que as fotografias de neve, céu, ou a grama não são cores

planas, eles são feitos de muitos tons sutilmente diferentes da

mesma cor e não são tão adequados para o formato GIF ou

PNG).
 dimensões da imagem

As imagens que você usa em seu site deve ser salvo na

mesma largura e altura que você deseja que eles apareçam
na página.

Por exemplo, se você tiver criado uma página para imagem. Quando adquirem imagens, é on-line adicional
incluir uma imagem que é de 300 pixels de largura importante entender como você pode alterar as Visite a seção de ferramentas do site que

por 150 pixels de altura, a imagem que você usa dimensões de uma imagem; imagine que você acompanha este livro para assistir a um guia

deve ser de 300 x 150 pixels. Você pode precisar tinha projetado uma página web para incluir uma de vídeo para redimensionar imagens em

usar ferramentas de edição de imagem para imagem que é de 300 pixels de largura por 150 Photoshop e GIMP.

redimensionar e cortar o pixels de altura:

Reduzir o tamanho da imagem Aumentar tamanho da imagem Mudando de forma

Você pode reduzir o tamanho das Não é possível aumentar o tamanho das Apenas algumas imagens podem ser cortadas

imagens para criar uma versão menor fotos de forma significativa, sem afetar a sem perder informações valiosas (ver página

da imagem. qualidade da imagem. seguinte).

exemplo: Se a imagem é 600 pixels de exemplo: Se sua imagem é de apenas 100 pixels exemplo: Se a imagem é 300 pixels
largura e 300 pixels de altura, você pode de largura por 50 pixels de altura, aumentando o quadrado, você pode remover partes dele,
reduzir o tamanho da imagem em 50%. tamanho em 300% resultaria em má qualidade. mas ao fazer isso você pode perder
informações valiosas.

Resultado: Isto irá criar uma imagem que é mais Resultado: A imagem ficará borrada ou Resultado: Apenas algumas imagens podem ser

rápido para download. em blocos. cortadas e ainda faz sentido.

113 IMAGENS
 Cortar imagens

Quando cortar imagens, é importante não perder

informações valiosas. É melhor fonte de imagens que
são a forma correta, se possível.

retrato panorama

Aqui você pode ver uma ilustração de um girafa Se nós colheita esta ilustração para torná-lo Se nós adicionar espaço extra à
que é mais adequado para que aparecem nas retrato. paisagem perdemos a cabeça e os pés. esquerda e à direita da ilustração não é
continuado fundo.

panorama retrato

Aqui você pode ver uma ilustração de um Se nós colheita esta ilustração para torná-lo Se nós adicionar espaço extra a parte
elefante que é mais adequado para que retrato perdemos o tronco e os membros superior e inferior da ilustração não é
aparecem nas panorama. posteriores. continuado fundo.

IMAGENS
114
 Resolução de imagem

Imagens criadas para a web deve ser salvo em uma resolução

de 72 ppi. Quanto maior a resolução da imagem, maior será o
tamanho do arquivo.

JPGs, GIFs e PNGs pertencem a um tipo de Imagens aparecem em computador computadores exibir imagens com uma resolução

formato de imagem conhecido como bitmap. Eles telas são feitas de pequenos quadrados chamados píxeis. de 72 pixels por polegada (ppi). imagens em impressão

são feitos de muitas praças em miniatura. o Um pequeno segmento desta fotografia foi materiais (tais como livros e revistas) são

ampliado para mostrar como ela é composta de constituídos por pequenos círculos chamados

resolução de uma imagem é o número de pixels. Os navegadores da web na maioria

quadrados que se encaixam dentro de um x 1 ambiente de trabalho pontos. Estas imagens são normalmente

polegada área de 1 polegada quadrada. impressas em uma resolução de 300

pontos por polegada (dpi).

Para esta imagem: JPEG em 300 dpi

= 1,526kb JPEG em 72 ppi = 368kb

Devido ao fato de que monitores de computador

são limitadas a uma resolução de 72 ppi, usando

imagens na web com uma resolução maior não

resultará em melhor qualidade de imagem -

apenas em tamanhos de arquivos maiores, o que

aumentará o tempo necessário para carregá-los e,

portanto, abrandar a visualização de páginas da

web.

115 IMAGENS
 Vector Images

as imagens vetoriais diferem de imagens bitmap e são

independentes de resolução. as imagens vetoriais são
normalmente criados em programas como o Adobe Illustrator.

Quando uma imagem é um desenho de linha as imagens vetoriais são criados, A vantagem de criar desenhos no
(como um logotipo, ilustração, ou diagrama), os colocando pontos em uma grade, e formato do vetor é que você pode
designers muitas vezes criá-lo no formato do desenhar linhas entre esses pontos. A aumentar as dimensões da imagem sem
vetor. Vetor formatado imagens são muito cor pode ser adicionado a "preencher" afetar a qualidade do mesmo.
diferentes em imagens bitmap. as linhas que foram criados.

O método atual de uso de imagens

vetoriais para exibição em sites
envolve salvar uma versão bitmap da
imagem vector original e usando isso.

Scalable Vector Graphics (SVG) são

relativamente novo formato usado para exibir

imagens vetoriais diretamente na web

(eliminando a necessidade de criar versões

bitmap deles), no entanto a sua utilização ainda

não é generalizada.

IMAGENS
116
 GIFs animados

GIF animados mostram vários quadros de uma imagem na sequência e,

por conseguinte, pode ser utilizado para criar animações simples.

Abaixo você pode ver os quadros individuais É importante lembrar: Alguns designers desaprovam GIFs animados

que compõem um GIF animado que mostra porque eles se lembram um monte de web

um ponto laranja em torno de um círculo - designers amadores uso excessivo deles na

como o tipo de animação que você pode ver Cada quadro extra da imagem aumenta o década de 1990.

quando uma página web está a carregar. tamanho do arquivo, e, portanto, pode aumentar

o tempo que leva para uma imagem para

download (e os usuários da web não gostam de

esperar um longo tempo para imagens para

Alguns aplicativos de edição de imagem download).

como o Adobe Photoshop permitem criar

GIFs animados. Existem vários tutoriais
sobre como fazer isso na web. Existem Porque GIFs não são um formato ideal para a

também vários sites que permitem que exibição de fotografias, GIFs animados são

você faça o upload os gráficos para os realmente adequados apenas para ilustrações

quadros individuais e criar o GIF animado simples.

para você.

1 2 3 4 5 6 7 8

117 IMAGENS
 transparência

Criando uma imagem que é parcialmente transparente (ou

"see-through") para a web envolve a seleção de um dos dois
formatos:

GIF transparente png

Se a parte transparente da imagem tem Se a parte transparente da imagem tem PNGs transparentes não são totalmente

bordas retas e é 100% transparente (isto bordas diagonais ou arredondadas ou se suportados em navegadores mais antigos, mais

é, não semi-opaca), você pode salvar a você quer uma transparência semi-opaca ou notavelmente o Internet Explorer 6 (IE6). Há

imagem como um GIF (com a opção de um dropshadow, então você terá de salvá-lo alguns JavaScript que você pode usar para

transparência selecionado). como um PNG. contornar este problema. Os detalhes deste script

pode ser encontrado na seção de ferramentas do

site que acompanha este livro.

em linha reta diagonal volta semi-opaca gota-sombra

IMAGENS
118
 examinando imagens na
Web

Verificar o tamanho das imagens

Se você estiver atualizando um site, você pode precisar verificar o tamanho de uma imagem existente Na esquerda você pode ver como verificar o
antes de criar um novo para substituí-lo. Isto pode ser conseguido com o botão direito do mouse sobre tamanho das imagens e como baixá-los
a imagem e fazer uma seleção a partir do menu pop-up que aparece. (Usuários do Mac terão de usando o Safari. Abaixo está uma breve visão
manter pressionada a tecla Ctrl e clique em vez de clique direito.) geral do que para selecionar no menu pop-up
para executar essas funções em vários
navegadores.

cromada
Tamanho: Abra a imagem em uma nova aba

Tamanho aparece em nova aba

Download: Salvar imagem como

Raposa de fogo

Tamanho: Informações View Image

Tamanho aparece na janela pop-up Download: Salvar

imagem como

Internet explorer
Transferir Imagens
Tamanho: propriedades

Se você quiser fazer download de imagens a partir de um site, você pode fazê-lo acessando o mesmo Tamanho aparece na janela pop-up

menu pop-up. (Lembre-se, porém, que todas as imagens on-line estão sujeitas a direitos de autor e Download: salvar imagem

requerem permissão explícita para reutilizar.)

safári
Tamanho: Abra a imagem em uma nova aba

Tamanho aparece na barra de título

Download: salvar imagem como

119 IMAGENS
 html5: Figura e artigo
Figura legenda

html capítulo-05 / figura-and-figure-caption.html <Figure>

<Figure>
Imagens muitas vezes vêm com legendas.
<Img src = "images / otters.jpg" alt = "Fotografia do
HTML5 introduziu um novo < figure> elemento
duas lontras marinhas flutuando na água "> <br />
para conter imagens e sua legenda para que
<figcaption> As lontras do mar de mãos dadas quando eles
os dois estão associados.

sono para que eles não se afastam um do outro. </ figcaption> </
figure>
Você pode ter mais de uma
imagem dentro do < figure>
elemento, desde que todos eles compartilham a

mesma legenda.

Resultado

<Figcaption>
o < figcaption> elemento foi adicionado ao HTML5,

a fim de permitir que autores de páginas Web

para adicionar uma legenda a uma imagem.

Antes esses elementos foram criados não havia

nenhuma maneira de associar um < img> elemento

com a respectiva legenda.

navegadores antigos que não entendem

elementos HTML5 simplesmente ignorar
os novos elementos e exibir o conteúdo
deles.

IMAGENS 120
120
 Neste exemplo, o logotipo é um GIF, porque o alt atributo em cada imagem fornece Este exemplo não usa a altura
ele usa cores planas, enquanto as uma descrição para aqueles que utilizam largura, ou
fotografias são JPEGs. A foto principal é leitores de tela e do título atributo fornece alinhar atributos como estas estão sendo

colocado dentro do HTML5 < figure> elemento informações adicionais. (Isto é mostrado eliminados e você são incentivados a utilizar

e tem a sua própria legenda. na dica.) as propriedades CSS em seu lugar.

121 IMAGENS
 exemplo
imagens

<Html>
<Head>
<Title> imagens </ title> </ head>
<body>

<H1>
<Img src = "imagens / logo.gif"
alt = "De à Zucchini" /> </ h1> <figure>

<Img src = "imagens / chocolate-islands.jpg"

alt = "Ilhas do chocolate"
title = "Ilhas bolos de chocolate individuais" /> <p>

<Figcaption>
Esta receita de bolos de chocolate individuais é tão simples e
tão deliciosa!
</ Figcaption> </ p> </
figure> <h4> Mais Receitas: </ h4>
<p>

<Img src = "images / limão-posset.jpg"

alt = "Lemon Posset" title = "limão posset Sobremesa" /> <img
src = "images / assado-bruxelas-sprouts.jpg"

alt = "Roasted Couves" title = "assado Couves Acompanhamento" />

<img src = "images / abobrinha-cake.jpg"

alt = "Zucchini Cake" title = "Zucchini bolo Sem geada"

/> </ p> </ body> </ html>

IMAGENS
122
 resumo
imagens

X o <Img> elemento é usado para adicionar imagens a uma página web.

X Você sempre deve especificar um src atributo para indicar o

origem de uma imagem e um alt atributo para descrever o conteúdo de uma

imagem.

X Você deve salvar imagens no tamanho que você vai usar

-los na página web e no formato adequado. As fotografias são

X melhor guardado como JPEGs; ilustrações ou

logos que usam cores planas são mais salvos como GIFs.
 6
tabelas

X Como criar tabelas

X Que informações se adapte às mesas
X Como representar dados complexos em tabelas
 Existem vários tipos de informações que precisam ser

exibidos em uma grade ou mesa. Por exemplo: resultados

desportivos, relatórios de ações, horários de comboios.

Ao representar informações em uma tabela, você precisa pensar em termos de uma

grade composta de linhas e colunas (um pouco como uma planilha). Neste capítulo,
você vai aprender a:

● Use os quatro elementos-chave para a criação de tabelas

● Representar dados complexos usando tabelas

● Adicionar legendas a tabelas

127 TABELAS
TABELAS 128
129 TABELAS
O que é um Table?

A tabela representa as informações em um formato de grade. Exemplos

de tabelas incluem relatórios financeiros, programação de TV, e os

resultados desportivos.

Grids permitem compreender dados Cada bloco na grade é referida como uma célula

complexos, fazendo referência a da tabela. Em HTML uma tabela é escrita linha

informações sobre dois eixos. por linha.

TABELAS
130
 estrutura básica Tabela

<Table> capítulo-06 /-table-structure.html básica html

<Table>
o < table> elemento é usado para criar <Tr>
uma tabela. O conteúdo da tabela são <Td> 15 </ td> <td> 15
escritos linha por linha. </ td> <td> 30 </ td>
</ tr> <tr>

<Tr> <Td> 45 </ td> <td> 60

</ td> <td> 45 </ td>
</ tr> <tr>
Você indicar o início de cada linha
usando a abertura < tr> tag. (O tr significa
linha da tabela.)
<Td> 60 </ td> <td> 90
</ td> <td> 90 </ td> </
Ele é seguido por um ou mais
tr> </ table>
<Td> elementos (um para cada célula em que

fileira).

No final da linha que você usar um

fechamento </ tr> tag.

Resultado

<Td>
Cada célula de uma tabela é

representado usando um < td>

elemento. (O td significa dados da

tabela.)

No final de cada célula você usar um

fechamento </ td> tag.

Alguns navegadores desenhar linhas

automaticamente em torno da mesa e / ou as

células individuais. Você vai aprender a

controlar as fronteiras de tabelas usando

CSS em páginas 309-312 e 337-340.

131 TABELAS
 cabeçalhos daartigo
tabela

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

<Th>
<Table>
<Tr> o < th> elemento é usado apenas como o
<Th> </ th> <th scope = "col"> sábado </ th> <th < td> elemento, mas o seu objectivo é
scope = "col"> domingo </ th> </ tr> <tr> representar o título ou uma coluna ou
uma linha. (O º significa cabeçalho da
tabela.)

<Th scope = "row"> Bilhetes vendidos: </ th> <td> 120 </ td>
<td> 135 </ td> </ tr> <tr> Mesmo se uma célula não tem conteúdo, você

ainda deve usar um < td> ou

<Th> elemento para representar a presença de

uma célula vazia caso contrário, a mesa não irá

<Th scope = "row"> Vendas totais: </ th> <td> $ 600 </ td> processar correctamente. (A primeira célula na

<td> $ 675 </ td> </ tr> </ table> primeira linha do presente exemplo mostra uma

célula vazia.)

usando < th> elementos para as rubricas

ajuda as pessoas que usam leitores de tela,

melhora a capacidade para os motores de

Resultado
busca para indexar suas páginas, e também

permite que você controle a aparência das

tabelas melhor quando você começar a usar

CSS.

Você pode usar o escopo atributo no < th> elemento

para indicar se se trata de um título para uma
coluna ou uma linha. Pode levar os valores: linha
para indicar um título para uma linha ou col para
indicar um título para a coluna.

Browsers geralmente exibir o conteúdo de

um < th> elemento em negrito e no meio da
célula.

132 132 TABELAS

TABELAS
 abrangendo colunas

Às vezes você pode precisar as entradas

capítulo-06 / abrangendo-columns.html html
em uma tabela para esticar em mais de
uma coluna. <Table>
<Tr>
o colspan atributo pode ser usado em um <Th> </ th> <th> 9 horas

< th> ou < td> elemento e indica quantas da manhã </ th> <th> 10

colunas que a célula deve se deparar. horas da manhã </ th> <th> 11:00

</ th> <th> 00:00 </ th> </ tr>

<tr>

No exemplo à direita você pode ver um

calendário com cinco colunas; A primeira
coluna contém o cabeçalho para essa linha (o <Th> Segunda-feira </ th> <td colspan = "2"> Geografia
dia), os restantes quatro representam um </ td> <td> Matemática </ td> <td> Arte </ td> </ tr> <tr>
intervalos de tempo horas.

Se você olhar para a célula da tabela que

contém 'Geografia' as palavras que você vai <Th> terça </ th> <td colspan = "3"> Academia
ver que o valor do </ td> <td> Início Ec </ td> </ tr> </ table>
colspan atributo é 2, o que indica que a

célula deve funcionar através de duas

colunas. Na terceira linha, corre 'Academia'
em três colunas.

Resultado
Você pode ver que as segunda e
terceira fileiras têm menos
<Td> elementos que existem colunas. Isto é

porque, quando uma célula estende-se

através de mais do que uma coluna, o < td> ou
< th>
células que teria sido no lugar das células
mais amplas não estão incluídos no
código.

Eu adicionei alguns estilos CSS para este

exemplo para que você possa ver como as células

abranger mais de uma coluna. Você vai aprender

como fazer isso nas páginas 250, 337-340.

133 TABELAS
 abrangendo linhas
artigo

Você também pode precisar de entradas em

html capítulo-06 / abrangendo-rows.html
uma tabela para esticar para baixo em mais de

<Table> uma linha.

<Tr>
<Th> </ th> <th> abc o rowspan atributo pode ser usado em um < th>
</ th> <th> BBC </ th> ou < td> elemento para indicar quantas linhas
<th> CNN </ th> </ tr> uma célula deve abranger baixo da mesa.
<tr>

No exemplo à esquerda você pode ver que a ABC

<Th> 06:00-07:00 </ th> <td rowspan = "2"> Filme está mostrando um filme a partir de 18:00-20:00,

</ td> <td> Comédia </ td> <td> Notícia </ td> </ enquanto os canais BBC e CNN são ambos

tr> <tr> mostrando dois programas durante este período

de tempo (cada um dos quais tem a duração de

uma hora).

<Th> 07:00-08:00 </ th> <td> Esporte </ td>

<td> Atualidades </ td> </ tr> </ table> Se você olhar para a última < tr>

elemento, ele contém apenas três

elementos mesmo que haja quatro
colunas no resultado abaixo. Isso ocorre
porque o filme na
<Tr> elemento acima que utiliza o

rowspan atribuir a esticar-se e

assumir a célula abaixo.
Resultado

Eu adicionei alguns estilos CSS para este

exemplo para que você possa ver como as

células abrangem mais de uma linha. Você vai

aprender como aplicar esses estilos CSS para

tabelas nas páginas 250, 337-340.

134 134 TABELAS

TABELAS
 Tabelas longos

Há três elementos que ajudam a

capítulo-06 / longo tables.html html
distinguir entre o conteúdo principal da
mesa e as primeiras e últimas linhas (que <Table>
pode conter conteúdo diferente). <Thead>
<Tr>
<Th> Encontro </ th> <th> Renda </ th>
Esses elementos ajudam as pessoas que usam <th> Despesa </ th> </ tr> </ thead>
leitores de tela e também permitem que você <tbody>
estilizar essas seções de uma maneira diferente

do que o resto da tabela (como você vai ver

quando você aprender sobre CSS).

<Tr>
<Th> 01 de janeiro </ th> <td> 250 </
td> <td> 36 </ td> </ tr> <tr>

<Thead>
Os títulos da tabela deve sentar-se no
<Th> 02 de janeiro </ th> <td> 285 </
interior do < thead> elemento.
td> <td> 48 </ td> </ tr>

<Tbody> <! - linhas adicionais como acima -> <tr>

O corpo deve sentar-se no interior do <Th> 31 de janeiro </ th> <td> 129 </ td>
<Tbody> elemento. <td> 64 </ td> </ tr> </ tbody> <tfoot>

<Tfoot>
<Tr>
O rodapé pertence dentro do
<Td> </ td> <td> 7824 </
<Tfoot> elemento.
td> <td> 1241 </ td> </ tr>
</ tfoot> </ table>
Por padrão, os navegadores raramente tratar o

conteúdo desses elementos de forma diferente

do que outros elementos no entanto os designers

costumam usar estilos CSS para mudar sua

aparência.

135 TABELAS
 artigo

Alguns dos editores HTML que vêm em sistemas

Resultado
de gerenciamento de conteúdo oferecem

ferramentas para ajudar a desenhar tabelas. Se a

primeira linha da tabela contém apenas < th>

elementos, então você pode achar que o

editor insere um < thead>
elemento automaticamente.

Parte da razão para ter separado < thead>

e < tfoot>
elementos é para que, se você tem uma tabela

que é mais alto do que a tela (ou, se impresso,

mais de uma página), em seguida, o navegador

pode manter o cabeçalho e rodapé visível

enquanto o conteúdo do livro mesa. Este

destina-se a tornar mais fácil para os usuários

para ver qual coluna os dados estão em (no

entanto, esta funcionalidade não está

implementada por padrão em qualquer

navegador atual).

Eu adicionei alguns estilos CSS para este

exemplo para que você possa ver o
conteúdo do < thead>
e < tfoot> sendo tratados de forma diferente do
que o resto das linhas. Você vai aprender
como aplicar esses estilos CSS para tabelas
das páginas 309-312 e 337-340.

136 136 TABELAS

TABELAS
 código antigo:
Largura e espaçamento

Há alguns atributos desatualizados que

capítulo-06 / largura-and-spacing.html html
você não deve usar em novos sites. Você
pode, no entanto, se deparar com alguns <Table width = "400" cellpadding = "10" cellspacing = "5">
deles quando se olha para código antigo, <Tr>
por isso vou mencioná-los aqui. Todos <Th width = "150"> </ th> <th> retirado </ th>
esses atributos foram substituídos pelo uso <th> Crédito </ th> <th largura = "150" > Equilibrar </
de CSS. th> </ tr> <tr>

o largura atributo foi usado na abertura

< table> tag para indicar a largura que a <Th> janeiro </ th> <td> 250,00
tabela deve ser e em alguma abertura </ td> <td> 660,50 </ td> <td> 410,50
</ td> </ tr> <tr>
<Th> e < td> tags para especificar a

largura das células individuais. O valor

deste atributo é a largura da tabela ou
célula em pixels. <Th> fevereiro </ th> <td> 135.55
</ td> <td> 895,20 </ td> <td> 1.170,15
</ td> </ tr> </ table>
As colunas em uma tabela precisa para formar

uma linha reta, por isso, muitas vezes você só vê

a largura atributo na primeira linha (e todas as

linhas subseqüentes usaria essa configuração).

Resultado
A abertura < table> tag também pode
usar o cellpadding
atributo para adicionar espaço dentro de

cada célula da tabela, eo

cellspacing atributo para criar espaço

entre cada célula da tabela. Os valores
para esses atributos foram dadas em
pixels.

Eu adicionei estilos CSS para este exemplo para

que você possa ver a largura das células da tabela

com mais clareza. Se você quiser controlar a

largura ou o espaçamento de tabelas e células que

você deve usar CSS conforme mostrado nas

páginas 303, 337-340.

137 TABELAS
 artigo
código antigo:
border & fundo

o fronteira atributo foi usado em

html capítulo-06 / border-e-background.html
ambos o < table> e < td>
<Table border = "2" bgcolor = "# efefef"> elementos para indicar a largura da borda
<Tr> em pixels.
<Th width = "150"> </ th> <th> retirado
</ th> <th> Crédito </ th> o bgcolor atributo foi usado para indicar as
cores de ambos toda a tabela ou células
<Th width = "150" bgcolor = "# cccccc"> Equilibrar </ th> </ tr> <tr> individuais da tabela de fundo. O valor é
normalmente um código hexadecimal (que
discutimos nas páginas 249-252).
<Th> janeiro </ th> <td> 250,00 </ td> <td> 660,50 </ td>
<td bgcolor = "# cccccc"> 410,50 </ td> </ tr> <tr>
Este exemplo usa o HTML
fronteira e bgcolor atributos. Nenhum

atributo CSS foram utilizados neste

exemplo.
<Th> fevereiro </ th> <td> 135.55 </ td> <td> 895,20 </ td>
<td bgcolor = "# cccccc"> 1.170,15 </ td> </ tr> </ table> Quando a construção de um novo site,
você deve usar CSS para controlar a
aparência da tabela, em vez de estes
atributos. Eles só são cobertos aqui,
porque você pode se deparar com eles,
se você olhar o código de sites mais
antigos.

Resultado

TABELAS 138
138
 Este exemplo mostra uma tabela para os A célula vazia no canto superior esquerdo ainda a escopo atributo para indicar se são
clientes a comparar os pacotes de tem um < th> elemento para representá-lo. Cada títulos para uma linha ou coluna. A
hospedagem do site. Existem títulos de célula da tabela deve ser explicada por um < th> ou linha final usa a colspan atribuir a se
tabela na primeira linha e primeira coluna < td> espalhar em todas as três colunas.
da tabela. elemento. o < th> elementos usar

139 TABELAS
 exemplo
tabelas

<Html>
<Head>
<Title> tabelas </ title> </ head>
<body>

<Table>
<Thead>
<Tr>
<Th> </ th> <th scope = "col"> Casa de partida de hospedagem </ th> <th
scope = "col"> empresas de hospedagem premium </ th> </ tr> </ thead>
<tbody>

<Tr>
<Th scope = "row"> Espaço em disco </ th> <td> 250mb
</ td> <td> 1gb </ td> </ tr> <tr>

<Th scope = "row"> Bandwidth </ th> <td> 5GB por

mês </ td> <td> 50GB por mês </ td> </ tr>

<! - mais linhas como os dois acima aqui -> </ tbody> <tfoot>

<Tr>
<Td> </ td> <td colspan = "2"> Entre e economizar 10%! </ td> </ tr> </
tfoot> </ table> </ body> </ html>

TABELAS
140
 resumo
tabelas

X o <Table> elemento é usado para adicionar tabelas para uma página web.

X Uma tabela é arrastado para fora de linha em linha. Cada linha é criada

com o < tr> elemento.

X Dentro de cada linha há um número de células

representado pelo < td> elemento (ou < th> se for um cabeçalho).

X Você pode fazer células de um intervalo de mesa mais de uma linha

ou em coluna, utilizando o rowspan e colspan atributos. Para longas mesas

X você pode dividir a tabela em um <Thead>,

<Tbody>, e < tfoot>.
 7
formas

X Como coletar informações de visitantes

X Diferentes tipos de controles de formulário
X Novos controles de formulário em HTML5
 Tradicionalmente, o termo 'forma' se referiu a um documento

impresso que contém espaços para você para preencher as

informações.

HTML toma emprestado o conceito de uma forma para se referir a elementos diferentes que

permitem que você coletar informações de visitantes ao seu site.

Se você está adicionando uma caixa de pesquisa simples para o seu site ou que você precisa

para criar aplicações de seguro mais complicados, formulários HTML dar-lhe um conjunto de

elementos para coletar dados de seus usuários. Neste capítulo, você aprenderá:

● Como criar um formulário em seu site

● Os diferentes instrumentos de coleta de dados

● Novos controles de formulário em HTML5

145 FORMAS
FORMAS
146
 Por que formas?

A forma mais conhecida na web é provavelmente caixa de

pesquisa que fica bem no meio da página inicial do Google.

Além de permitir que os usuários pesquisem, quando se registrar como um membro de um

formas também permitem aos usuários site, quando fazem compras on-line, e quando

executar outras funções online. Você verá se inscrever para newsletters ou listas de

formas discussão.

147 FORMAS
 Controles de formulário

Existem vários tipos de controles de formulário que você pode usar

para coletar informações de visitantes ao seu site.

Adicionando texto:

entrada de texto ( única linha) entrada de senha área de texto ( multi-linha)

Usado para uma única linha de texto, tais como Como uma caixa de texto linha única, mas ele Para maiores áreas de texto, tais como

endereços de e-mail e nomes. mascara os caracteres introduzidos. mensagens e comentários.

fazer escolhas:

Botões do rádio checkboxes Drop-down caixas

Para uso quando um usuário deve selecionar um Quando um usuário pode selecionar e Quando um utilizador tem de escolher um de uma

de uma série de opções. desmarcar uma ou mais opções. série de opções de uma lista.

envio de formulários: upload de arquivos:

submeter botões botões de imagem upload de arquivo

Para enviar os dados do seu formulário para Semelhante ao enviar botões, mas eles permitem Permite aos usuários fazer upload de

outra página web. que você use uma imagem. arquivos (por exemplo, imagens) para um site.

FORMAS
148
 Como funcionam os formulários

Um usuário preenche um formulário e, em seguida, aperta um botão para

enviar as informações para o servidor.

1 O nome de cada controlo de

formulário é enviado para o servidor,

juntamente com o valor o utilizador

Vote no seu favorito músico de jazz de todos os entra ou selecciona.

tempos

2
Nome de usuário: Hera

Eu voto para: Ella Fitzgerald Herbie

Hancock John
3
Coltrane Miles Davis
Thelonius Monk
O servidor processa a informação

usando uma linguagem de

programação como PHP, C #, VB.net,

Enviar
ou Java. Ele também pode armazenar

as informações em um banco de

dados.

Obrigado, Ivy!
O servidor cria uma nova página para

Você votou para Herbie Hancock. enviar de volta para o navegador com

base nas informações recebidas.

149 FORMAS
Um formulário pode ter vários controles de formulário, cada

recolha de informação diferente. O servidor precisa saber qual

parte dos dados introduzidos corresponde com o qual elemento de

formulário.

Nome

nome de usuário = Hera

Valor

Para diferenciar entre as várias partes de dados inseridos, as informações são enviadas a partir do

navegador para o servidor usando pares nome / valor. Neste exemplo, o formulário pede nome de

usuário do visitante e também para o seu músico de jazz favorito. Os pares nome / valor enviados

para o servidor são:

nome de usuário = Hera voto = Herbie

Se o controle de formulário permite que o usuário Se o controle de formulário permite que você

digitar o texto, em seguida, o valor do controle de escolha a partir de um conjunto fixo de respostas

formulário é o que o usuário digitou no. (por exemplo, botões de rádio, caixas de seleção ou

uma lista suspensa), o autor da página web irá

adicionar código que dá a cada opção um valor

automático.

Você nunca deve alterar o nome de um controle de formulário em uma página, a menos que você

sabe que o código no servidor vai entender este novo valor.

FORMAS 150
 estrutura forma

<Form> capítulo-07 / form-structure.html html

<Form action = "http://www.example.com/subscribe.php"

controles de formulário viver dentro de um method = "get"> <p> Este é o lugar onde os controles de formulário aparecerá.
<Form> elemento. Este elemento deve
sempre levar o açao </ P>
atribuir e geralmente têm uma </ form>
método e identidade atribuem também.

açao
cada < form> requer um elemento açao atributo. Resultado
Está valor
é o URL da página no servidor que
receberá as informações no formulário
quando ele é submetido.

método
Os formulários podem ser enviados usando um

dos dois métodos: pegue ou postar.

Com o pegue método, os valores do Com o postar método os valores são enviados Se o atributo método não é usado, os dados
formulário são adicionados ao fim do em que são conhecidos como cabeçalhos do formulário será enviado com a pegue método.
URL especificado na açao atributo. o pegue HTTP. Como regra geral, você deve usar o

método é ideal para: postar método se seu formulário:

identidade
● formas curtas (como pesquisa ● permite aos usuários fazer upload de um arquivo Nós olhamos para a identidade atributo na
caixas) página 183, mas o valor é usado para
● é muito longo
identificar a forma distinta de outros elementos
● quando você está apenas recuperando
● contém os dados sensíveis na página (e é frequentemente utilizado por
dados do servidor web (informação não
(Por exemplo, senhas) scripts - como aquelas que o check você
envio que devem ser adicionados ou
excluídos de um banco de dados) digitou informações em campos que exigem
● adiciona informações, ou
valores).
exclui as informações de um banco de
dados

151 FORMAS
 Artigo
entrada de texto

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

<Input>
<Form action = "http://www.example.com/login.php">
<P> Nome de usuário: o < input> elemento é usado para criar
<Input type = "text" name = "username" size = "15" vários diferentes controlos de
maxlength = "30" /> </ p> formulário. O valor do tipo
</ form> atributo determina o tipo de entrada
que estará criando.

type = "text"
Resultado Quando o tipo atributo tem um valor de texto, ele
cria uma entrada de texto Singleline.

nome
Quando os usuários inserir informações em
um formulário, o servidor precisa saber qual
controle de forma cada pedaço de dados foi
celebrado. (Por exemplo, em um formulário de
login, o servidor precisa saber o que foi
inserido como o nome de utilizador e que foi
Tamanho dado como a senha.) Portanto, cada controlo
o Tamanho atributo não deve ser usado em (Embora um utilizador pode introduzir mais de formulário requer um nome atributo. O valor
novas formas. Foi utilizado em formas caracteres, se desejado). deste atributo identifica o controle de
mais antigas para indicar a largura da formulário e é enviado juntamente com a
entrada de texto (medido pelo número de Em todas as novas formas que você escreve, CSS informação de que entrar para o servidor.
caracteres que seria visto). devem ser usadas para controlar a largura de

elementos de formulário. o Tamanho atributo só é

mencionado aqui, porque você pode se deparar com

Por exemplo, um valor de 3 criaria uma ela quando se olha para código antigo.

caixa grande o suficiente para exibir três

comprimento máximo
personagens
Você pode usar o comprimento máximo

Atributo para limitar o número de caracteres que

um usuário pode digitar no campo de texto. Seu

valor é o número de caracteres que podem

entrar. Por exemplo, se você estava pedindo por

um ano, a comprimento máximo

atributo pode ter um valor de 4.

FORMAS 152
152
 entrada de senha

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

<Form action = "http://www.example.com/login.php">

<P> Nome de usuário:

type = "password" <Input type = "text" name = "username" size = "15"

Quando o tipo atributo tem um valor de senha ele maxlength = "30" /> </ p>
cria uma caixa de texto que funciona como uma <p> Senha:
entrada de texto de linha única, exceto os

personagens estão bloqueados. Eles estão <Input type = "password" name = "password" size = "15"
escondidos em dessa maneira para que, se maxlength = "30" /> </ p>
alguém está olhando por cima do ombro do </ form>
usuário, eles não podem ver dados

confidenciais, como senhas.

Resultado

nome
o nome atributo indica o nome da
entrada de senha, que é enviado para
o servidor com a senha que o usuário
digita.

tamanho, maxlength Embora a senha está escondido na tela, isso Para total segurança, o servidor precisa ser

Ele também pode levar a Tamanho e não significa que os dados em um controle a configurado para se comunicar com os

comprimento máximo atributos como a entrada senha é enviada de forma segura para o navegadores dos usuários usando Secure

de texto de linha única. servidor. Você nunca deve usá-los para enviar Sockets Layer (SSL). O tema do SSL está além

dados sensíveis, tais como números de cartão do escopo deste livro, no entanto, existem links

de crédito. para saber mais sobre ele no site de

acompanhamento.

153 FORMAS
 áreaArtigo
de texto

html capítulo-07 / textarea.html

<Textarea>
<Form action = "http://www.example.com/comments.php">
<P> O que você acha deste show? </ p> <textarea name = "Comentários" cols = o < textarea> elemento é usado para criar uma

linhas "20" = "4"> Entrar entrada de texto-line mutli. Ao contrário de outros

os teus comentários... </ textarea> </ form> elementos de entrada este não é um elemento

vazio. Deve, portanto, ter uma abertura e uma tag

de fechamento.

Qualquer texto que aparece entre a

abertura < textarea> e fechando </ textarea> marcas
aparecerão na caixa de texto quando a
página é carregada.

Resultado

Se o usuário não exclua qualquer texto entre

essas tags, esta mensagem vai ser enviada
para o servidor junto com o que o usuário
digitou. (Alguns sites usam JavaScript para
limpar essas informações quando o usuário
clica na área de texto.)

Se você estiver criando uma nova forma, o cols atributo indica a largura da área
você deve usar CSS para controlar a largura de texto deve ser (medido em número
e altura de um de caracteres). o linhas atributo indica
<Textarea>. No entanto, se você está olhando quantas linhas da área de texto deve
para código antigo, você pode ver a cols e linhas tomar-se verticalmente.
atributos utilizados com este elemento.

154 FORMAS
FORMS 154
 botao de radio

<Input> capítulo-07 / rádio-button.html html

<Form action = "http://www.example.com/profile.php">

<P> Por favor, selecione seu gênero favorito:
type = "radio"
<br />
botões de rádio permitem aos usuários escolher
<Input type = "radio" name = "gênero" value = "rock"
apenas um de uma série de opções.
checked = "checked" /> Rocha
<Input type = "radio" name = "gênero" value = "pop" />
nome estouro

o nome atributo é enviado para o servidor <Input type = "radio" name = "gênero" value = "jazz" />
com o valor da opção escolhida pelo usuário. Jazz
Quando uma pergunta fornece aos usuários </ P> </
com opções de respostas na forma de form>
botões de rádio, o valor da nome atributo deve
ser o mesmo para todos os botões de rádio
usados ​para responder a essa pergunta.
Resultado

valor
o valor atributo indica o valor que é enviado
para o servidor para a opção selecionada.
O valor de cada um dos botões em um Observe: Uma vez que um botão foi opção e quer que eles sejam capazes de

grupo deve ser diferente (de modo que o selecionado não pode ser desmarcado. O desmarcá-la (por exemplo, se eles estão

servidor sabe qual opção o usuário tenha usuário só pode selecionar uma opção indicando que concorda com os termos e

selecionado). diferente. Se você está apenas permitindo que condições), você deve usar uma caixa de seleção

o usuário em seu lugar.

verificado
o verificado atributo pode ser utilizado para
indicar que o valor (se houver) deve ser
selecionado quando a página é carregada. O
valor deste atributo é verificado. Apenas um
botão de opção em um grupo deve usar este
atributo.

155 FORMAS
 CaixaArtigo
de seleção

html capítulo-07 / checkbox.html

<Input>
<Form action = "http://www.example.com/profile.php">
<P> Por favor, selecione o seu serviço de música favorito (s):
type = "checkbox"
<br />
Caixas de verificação permitem aos usuários
<Input type = "checkbox" name = "serviço"
selecionar (e desmarque) uma ou mais opções em
value = "itunes" checked = "checked" /> iTunes
resposta a uma pergunta.
<Input type = "checkbox" name = "serviço"
value = "lastfm" /> Last FM
<Input type = "checkbox" name = "serviço" nome
value = "spotify" /> Spotify o nome atributo é enviado para o servidor
</ P> </ com o valor da opção (s) o usuário
form> seleciona. Quando uma pergunta fornece
aos usuários com opções de respostas na
forma de caixas de seleção, o valor da

Resultado
nome atributo deve ser o mesmo para

todos os botões que respondem a essa

pergunta.

valor
o valor atributo indica o valor enviado para
o servidor se esta opção for assinalada.

verificado
o verificado atributo indica que esta caixa
deve ser verificada quando a página é
carregada. Se usado, seu valor deve ser verificado.

156 FORMAS
FORMS 156
 Na lista suspensa caixa

<Select> capítulo-07 / drop-down-list-box.html html

<Form action = "http://www.example.com/profile.php">

A caixa de lista (também conhecido como uma caixa <P> O dispositivo que você ouvir música em? </ p> <select name =
de seleção) para baixo permite aos usuários "dispositivos">
selecionar uma opção em uma lista suspensa. <Option value = "ipod"> iPod </ option> <option value = "radio"> Rádio
</ option> <option value = "computador"> Computador </ option> </
select> </ form>
o < selecione> elemento é usado para criar
uma caixa de lista suspensa. Ele contém dois
ou mais < option>
elementos.

Resultado
nome
o nome atributo indica o nome do controlo de
forma a ser enviada ao servidor, juntamente
com o valor o utilizador seleccionado.

<Option>
o < option> elemento é usado para selecionado
especificar as opções que o usuário o selecionado atributo pode ser utilizado A função da caixa de lista suspensa é
pode selecionar. As palavras entre a para indicar a opção que deve ser semelhante ao dos botões de rádio (em
abertura < option> selecionado quando a página é carregada. que apenas uma opção pode ser
e fechando </ option> tags serão mostrados O valor deste atributo deve ser selecionado. selecionada). Há dois fatores importantes
para o usuário na caixa suspensa. na escolha de qual usar:

Se este atributo não é usado, a primeira opção

será mostrada quando a página é carregada.

valor
1. Se os usuários precisam ver todas as opções de

Se o usuário não selecionar uma opção, então relance, botões de rádio são mais adequadas.
o < option> utiliza o elemento
o primeiro item será enviado para o servidor
valor atributo para indicar o valor que é
como o valor para esse controle.
enviado para o servidor juntamente com o
2. Se houver uma longa lista de opções (tais
nome do controle, se esta opção for
como uma lista de países), caixas suspensas
selecionada.
lista de trabalho melhor.

157 FORMAS
 caixa de seleção múltipla
Artigo

html capítulo-07 / múltipla-select-box.html

<Select>
<Form action = "http://www.example.com/profile.php">
<P> Você jogar qualquer um dos seguintes instrumentos?
(Você pode selecionar mais de uma opção pressionando controle em um PC ou Tamanho
comando chave em um Mac ao selecionar opções diferentes.) </ p> <select name Você pode transformar uma gota caixa de seleção

= "instrumentos" size = "3" para baixo em uma caixa que mostra mais de uma

opção, adicionando o

múltipla = "múltiplos"> Tamanho atributo. Seu valor deve ser o

<Option value = "guitarra" selected = "selected"> número de opções que você deseja mostrar

Violão </ option> <option value = "bateria"> Bateria </ option> ao mesmo tempo. No exemplo você pode ver

<option value = "teclado" que três das quatro opções são mostradas.

selected = "selected"> Teclado </ option> <option value =

"bass"> Baixo </ option> </ select> </ form> Infelizmente, a maneira que os navegadores
têm implementado este atributo não é perfeito,
e ele deve ser testado exaustivamente se
utilizados (em particular no Firefox e Safari em
um Mac).

Resultado

múltiplo
Você pode permitir aos usuários selecionar
várias opções desta lista, adicionando o múltiplo
atributo com um valor de múltiplo.

É uma boa idéia para informar aos usuários se

eles podem selecionar mais de uma opção de

cada vez. Também é útil para indicar que em um

PC eles devem mantenha pressionada a ao

controle chave ao selecionar múltiplas opções e

em um Mac devem usar o comando chave ao

selecionar opções.

158 FORMAS
FORMS 158
 Arquivo caixa de entrada

<Input> capítulo-07 / arquivo-input-box.html html

<Form action = "http://www.example.com/upload.php"

Se você quiser permitir que os usuários fazer method = "post"> <p> Fazer upload de sua música em formato MP3: </ Tipo
upload de um arquivo (por exemplo uma imagem, p> <input = "file" name = "user-canção" /> <br /> <input type =
vídeo, mp3, ou PDF), você precisará usar uma "submit" value = "Upload" /> </ form>
caixa de entrada de arquivo.

type = "file"
Este tipo de entrada cria uma caixa que se Resultado
parece com uma entrada de texto seguido por

um Squeaky toy botão. Quando o usuário

clica no

Squeaky toy botão, uma janela se abre, que

lhes permite selecionar um arquivo do seu
computador para ser carregado para o site.

Quando você está permitindo aos usuários

fazer upload de arquivos, os método

atributo no < form> elemento deve ter um valor

de postar. ( Você não pode enviar arquivos
usando o HTTP
pegue método.)

Quando um usuário clica no

Squeaky toy botão, a apresentação da
janela que lhes permite procurar o arquivo
que deseja enviar irá coincidir com as
janelas do sistema operacional do
usuário. Você não pode controlar o
aparecimento dessas janelas.

159 FORMAS
 botão de envio
Artigo

html capítulo-07 / submeter-button.html

<Input>
<Form action = "http://www.example.com/subscribe.php">
<P> Subscrever a nossa lista de e-mail: </ p> <tipo de input type
type = "submit"
= "text" name = "email" /> <input = "submit" name =
O botão enviar é usado para enviar um
"assinar"
formulário para o servidor.
value = "Assinar" /> </ form>

nome
Ele pode usar um nome atributo, mas ele
não precisa ter um.
Resultado

valor
o valor atributo é usado para controlar o texto

que aparece em um botão. É uma boa idéia

para especificar as palavras que você deseja

que apareçam em um botão, porque o valor

padrão de botões em alguns navegadores é

'Enviar consulta' e isso pode não ser apropriado

para todos os tipos de formulário.

Diferentes navegadores irá mostrar botões de

envio de maneiras diferentes e tendem a se

ajustar à apresentação visual do browser. Se

você quiser controlar a aparência de um

botão de envio, você pode usar CSS (como

você vai aprender na página 343), ou você

pode usar uma imagem para o botão.

160 FORMAS
FORMS 160
 botão de imagem

<Input> capítulo-07 / imagem-button.html html

<Form action = "http://www.example.org/subscribe.php">

<P> Subscrever a nossa lista de e-mail: </ p> <input type = "text" name =
type = "imagem"
"email" /> <input type = "image" src = "images / subscribe.jpg"
Se você quiser usar uma imagem para o
botão de enviar, você pode dar a tipo atribuir
largura = "100" altura = "20" /> </
um valor de
formulário>
imagem. o src, largura altura,
e alt atributos funcionam exatamente como eles

fazem quando usado com o

<Img> elemento (que vimos em Resultado

páginas 99-100).

161 FORMAS
 botão & escondido
Artigo
controles

html capítulo-07 / botão-e-oculto-controls.html

<Button>
<Form action = "http://www.example.com/add.php">
<Button> <img src = "images / add.gif" alt = "add" o < button> elemento foi introduzido para

width = "10" height = "10" /> Adicionar </ button> <input type permitir aos usuários mais controle sobre

= "hidden" name = "bookmark" como seus botões aparecem, e para permitir

value = "letras" /> </ form> que outros elementos a aparecer dentro do

botão.

Isso significa que você pode combinar

Resultado
textos e imagens entre a abertura < button>

tag e fechamento </ button> tag.

<Input>
type = "hidden"
Este exemplo também mostra um

escondido formar controlo. Estes controles de

formulário não são exibidos na página (embora você

pode vê-los se você usar o Ver Fonte opção no

navegador). Eles permitem que os autores de

páginas Web para adicionar valores a formas que

os usuários não podem ver. Por exemplo, um autor

da página web pode usar um campo oculto para

indicar qual a página que o usuário estava em

quando apresentaram um formulário.

162 FORMAS
FORMS 162
 Controlos rotulagem Forma

<Label> capítulo-07 / rotulagem-form-controls.html html

<Label> Era: < input type = "text" name = "idade" /> </ label> <br/>
Ao introduzir controles de formulário, o código foi

mantido simples, indicando a finalidade de cada Gênero:

um no texto ao lado dele. No entanto, cada <Input id = tipo "feminino" = "radio" name = "gênero"
controlo de formulário deve ter seu próprio < label> value = "f"> <label for = "feminino"> Fêmea </ label> <input id = tipo
elemento como este faz com que a forma "macho" = "radio" name = "gênero"
acessível para usuários com deficiência visual.

value = "m"> <label for = "macho"> Masculino </ label>

o < label> elemento pode ser usado de

duas maneiras. Pode:
Resultado

1. Enrole em torno de ambos a descrição do

texto ea entrada de formulário (como mostrado

na primeira linha do exemplo à sua direita).

2. Ser mantido separado do controle de

formulário e utilizar o para

atributo para indicar que o controle forma, é um

rótulo para (como mostrado com os botões de

rádio).

para
o para atribuir estados que formam controlar o identidade atributos podem ser utilizados em Como uma regra de ouro, aqui estão os melhores

rótulo pertence. Note como os botões de rádio qualquer forma de controlo. Quando um < label> lugares para colocar rótulos em controles de

usam o identidade atributo. O valor do atributo elemento é usado com um botão de opção ou formulário.

id identifica de forma única um elemento de rádio, os usuários podem clicar em qualquer

todos os outros elementos em uma página. (O identidade

controle forma ou o rótulo para selecionar. A Acima ou à esquerda:
atributo é coberto na página 183.) área clicável expandida torna a forma mais fácil ● entradas de texto

de usar. A posição do rótulo é muito ● As áreas de texto

importante. Se os usuários não sei onde para ● caixas de seleção

inserir informações ou quais informações para ● o upload de arquivos

O valor do para atributo é a mesma do identidade

entrar, eles são menos propensos a usar o

atributo na forma de controlo é formulário corretamente. para a direita:

rotulagem. Esta técnica usando o para e ● caixas individuais
● botões de rádio individuais

163 FORMAS
 agrupamentoArtigo
Form
elementos

html capítulo-07 / agrupamento-form-elements.html

<Fieldset>
<Fieldset>
<Legend> Detalhes do contato </ legend> <label> O Você pode grupo relacionado controles de

email: < br /> formulário em conjunto no interior do

<Input type = "text" name = "email" /> </ label> <br /> <label> Móvel: < br /> <Fieldset> elemento. Isto é particularmente

útil para as formas mais longas.

<Input type = "text" name = "mobile" /> </ label> <br /> <label> Telefone: < br />

<Input type = "text" name = "telefone" /> </ label> </ fieldset> A maioria dos navegadores irá mostrar o

fieldset com uma linha em torno da borda para

mostrar como eles estão relacionados. O

aparecimento dessas linhas pode ser ajustada

usando o CSS.
Resultado

<Legend>
o < legend> elemento pode vir
directamente após a abertura
<Fieldset> tag e contém uma legenda que

ajuda a identificar a finalidade de que o grupo

de controlos de formulário.

FORMAS164
164
 html5: validação de formulário

Você provavelmente já viu formulários na web que

capítulo-07 / html5-form-validation.html html
dar aos usuários mensagens se o controlo de

formulário não foi preenchido corretamente; isto é <Form action = "http://www.example.com/login/"

conhecido como a validação do formulário. method = "post"> <label for = "username"> Nome de
usuário: </ label> <input type = "text" name = "username"

Tradicionalmente, validação de formulário required = "required" /> </ title> <br /> <label for =
foi realizada usando JavaScript (que está "password"> Senha: </ label> <input type = "password" name =
além do escopo deste livro). Mas HTML5 "password"
está introduzindo validação e deixando o required = Tipo /> <input "necessária" = "submit" value =
trabalho para o navegador. "Submit" /> </ form>

Validação ajuda a garantir que o usuário

insere informações de uma forma que o
Resultado
servidor será capaz de entender quando o
formulário é enviado. Validando o conteúdo
do formulário antes de ser enviado para o
servidor da ajuda:

● Reduzir a quantidade de trabalho

o servidor tem a ver

● Permite que os usuários para ver se há

problemas com a forma mais rápida do No momento da escrita, única Chrome e Opera Um exemplo de validação do formulário

que se a validação foram realizadas no suportado validação HTML5, embora espera-se HTML 5 é a requeridos

servidor. que outros navegadores a seguir. A fim de apoiar atributo, que pode ser usado em qualquer elemento

os navegadores mais antigos (que não entendem de formulário que o usuário é esperado para

HTML5), página web autores são susceptíveis de preencher. Este atributo HTML5 não precisa de um

continuar a usar o JavaScript para validar valor, mas em HTML 4 todos os atributos devem ter

formulários. um valor. Então, algumas pessoas dão esse atributo

um valor de requeridos.

165 FORMAS
 html5: entrada de
Artigo
data

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

<Input>
<Form action = "http://www.example.com/bookings/"
method = "post"> <label for = "username"> Data de partida: </ label> Muitas formas necessitam de recolher

<input type = "data" name = "partir" /> <input type = "submit" value = informações, como datas, endereços de e-mail e

"Submit" /> </ form> URLs. Esta tem sido tradicionalmente feito

usando entradas de texto.

HTML5 introduz novos controles de formulário

para padronizar a maneira que algumas

informações são recolhidas. navegadores

antigos que não reconhecem estas entradas

só vai tratá-los como uma caixa de texto linha

única.
Resultado

type = "data"

Se você está pedindo ao usuário para uma data,

você pode usar um < input>

elemento e dar a tipo

atribuir um valor de encontro.

Isto irá criar uma entrada de data em

navegadores que suportam os novos tipos de

entrada HMTL5.

Este exemplo mostra que a entrada de

data parece no navegador Opera. A
aparência da entrada de data muda em
diferentes navegadores.

FORMAS 166
166
 html5: Email & url Input

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

<Form action = "http://www.example.org/subscribe.php">

HTML5 também introduziu entradas que <P> Por favor, indique o seu endereço de e-mail: </ p> <input type
permitem aos visitantes inserir endereços de = "email" name = "email" /> <input type = "submit" value =
e-mail e URLs. Os navegadores que não "Submit" /> </ form>
suportam esses tipos de entrada só vai tratá-los

como caixas de texto.

type = "email" Resultado

Se você perguntar a um usuário para um

endereço de e-mail, você pode usar a entrada de

e-mail. Browsers que suportam validação HTML5

irá verificar que o usuário tenha fornecido

informações no formato correto de um endereço

de e-mail. Alguns telefones inteligentes também

otimizar seu teclado para exibir as chaves que são

mais propensos a precisar de ao entrar em um

endereço de e-mail (como o símbolo @).

capítulo-07 / html5-url-input.html html

<Form action = "http://www.example.org/profile.php">

<P> Por favor, indique o seu endereço de website: </ p> <input type =
"url" name = "website" /> <input type = "submit" value = "Submit"
type = "URL" /> </ form>
A entrada de URL pode ser usado quando você

está pedindo um usuário para um endereço de

página web. Browsers que suportam validação

HTML5 irá verificar que o usuário tenha fornecido

informações no formato de um URL. Alguns

Resultado
telefones inteligentes também otimizar seu teclado

para exibir as chaves que são mais propensos a

precisar quando entrar em um URL.

167 FORMAS
 Artigo
html5: entrada de pesquisa

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

<Input>
<Form action = "http://www.example.org/search.php">
<P> Procurar: </ p> Se você deseja criar uma caixa de texto de linha

<Input type = "search" name = "search" /> <input type = única para consultas de pesquisa, HTML5

"submit" value = "Search" /> </ form> fornece um tipo especial de entrada para esse

fim.

type = "search"
Se você deseja criar uma caixa de texto de linha

Resultado única para consultas de pesquisa, HTML5 fornece

uma entrada de pesquisa especial.

Para criar caixa de pesquisa do HTML5 a < input>

elemento deve ter um tipo atributo cujo valor é procurar.

navegadores mais antigos simplesmente

tratá-lo como uma caixa de texto linha única.

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

navegadores recentes adicionar alguns recursos que
<Form action = "http://www.example.org/search.php">
melhoram a usabilidade. Por exemplo, o Safari em
<P> Procurar: </ p>
um Mac adiciona uma cruz para limpar a caixa de
<Input type = "search" name = "search"
pesquisa quando você começou a digitar
Tipo de espaço reservado = "Inserir palavra-chave" /> <input
informações. Safari também automaticamente
= "submit" value = "Search" /> </ form>
arredonda os cantos no campo de entrada de

pesquisa.

Resultado
espaço reservado
Em qualquer entrada de texto, você

também pode usar um atributo chamado

espaço reservado cujo valor é o texto que será

exibido na caixa de texto até que o usuário clica

nessa área. navegadores mais antigos

simplesmente ignorar este atributo.

168 FORMAS
FORMS 168
169 FORMAS
 Exemplo
formas

Este exemplo mostra um formulário de inscrição feedback e newsletter.

Ele usa uma variedade de controles de formulário.

o < form> utiliza o elemento açao atributo para indicar a página que os dados estão sendo enviados.
Cada um dos controles de formulário fica dentro do < form>
elemento. Diferentes tipos de controlo de forma são adequados para recolha de diferentes tipos de
dados. o < fieldset> elemento é usado para questões de grupo relacionadas juntos. o < label> elemento
indica a finalidade de cada controlo de formulário.

FORMAS
170
 Exemplo
formas

<Html>
<Head>
<Title> formas </ title> </ head>
<body>

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

<Fieldset>
<Legend>
Seus detalhes:
</ Legend>
<label>
Nome:
<Input type = "text" name = "nome" size = "30" maxlength = "100"> </ label> <br /> <label>

O email:
<Input type = "email" name = "email" size = "30" maxlength = "100"> </ label> <br /> </
fieldset> <br /> <fieldset>

<Legend>
Sua revisão:
</ Legend>
<p>
<Label for = "ouvir-com">
Como você ficou sabendo sobre nós?

</ Label>
<Select name = "referência" id = "ouvir-com">
<Option value = "google"> Google </ option> <option value =
"amigo"> amigo </ option> <option value = "anúncio"> anúncio </ option>
<option value = "outro"> De outros </ option> </ select> </ p>
<p>

171 FORMAS
 Exemplo
formas

Você visitar novamente?

<br />
<label>
<Input type = "radio" name = value "rating" = "yes" />
sim
</ Label>
<label>
<Input type = "radio" name = value "rating" = "no" />
Não

</ Label>
<label>
<Input type = "radio" name = value "rating" = "talvez" />
Talvez
</ Label> </
p> <p>

<Label for = "comentários">

Comentários:

</ Label> <br

/>
<Linhas textarea = "4" cols = "40" id = "Comentários"> </ textarea>
</ p> <label>

<Input type = "checkbox" name = "assinar" checked = "checked" />

Inscreva-me para um alerta
</ Label> <br
/>
<Input type = "submit" value = "Enviar comentário" /> </ fieldset> </
form> </ body> </ html>

FORMAS
172
 resumo
formas

X Sempre que você quiser coletar informações de

visitantes que você vai precisar de um formulário, que vive dentro de um

<Form> elemento.

X Informações de um formulário é enviado em pares nome / valor.

X Cada controle de formulário é dado um nome, eo texto do

usuário digita ou os valores das opções que eles selecionados são enviados

para o servidor.

X HTML5 introduz novos elementos de formulário que tornam

mais fácil para os visitantes a preencher formulários.

 8
Markup
extra

X Especificando diferentes versões do HTML

X Identificar e agrupar elementos
X Comentários, informações meta e iframes
 Neste ponto, nós cobrimos as principais marcas que se

encaixam muito bem em grupos e seções.

Neste capítulo, vamos nos concentrar em alguns tópicos votos que não são

facilmente agrupados. Você vai aprender sobre:

● As diferentes versões do HTML e como para indicar que

versão que você está usando

● Como adicionar comentários ao seu código

● atributos globais, que são atributos que podem ser usados ​em
qualquer elemento, incluindo o classe e identidade atributos

● Elementos que são usados ​para agrupar partes da página

onde nenhum outro elemento é adequado

● Como incorporar uma página dentro de uma página usando iframe

● Como adicionar informações sobre a página web usando o

<Meta> elemento

● Adicionando personagens como suportes angulares e direitos de autor

símbolos

177 marcação extra

marcação extra 178
 A evolução do HTML

Desde que a web foi criado pela primeira vez, tem havido
várias versões diferentes do HTML.

HTML 4 XHTML 1.0

lançado 1997 lançado 2000

Cada nova versão foi projetada para ser Com a exceção de alguns elementos Em 1998, uma linguagem chamada XML foi
uma melhoria no último (com novos adicionados em HTML5 (que foram publicado. Seu objetivo era permitir que as
elementos e atributos adicionais e código destacados), os elementos que você já pessoas a escrever novas linguagens de
antigo removido). viu neste livro foram todos disponíveis marcação. Desde HTML era a língua mais
em HTML 4. utilizada marcação ao redor, decidiu-se que
HTML 4 deve ser reformulado para seguir as
Houve também várias versões de cada regras de XML e foi rebatizado XHTML. Isto
navegador usado para visualizar páginas da web, Embora HTML 4 teve alguns elementos de significava que os autores tiveram que seguir
cada qual implementa novo código. Nem todos os apresentação para controlar a aparência algumas novas regras mais rigorosas sobre
usuários da Internet, no entanto, tem as últimas das páginas, os autores não são como escrever marcação. Por exemplo:
navegadores instalados em seus computadores, recomendados para usá-los mais.
o que significa que nem todos serão capazes de (Exemplos incluem o < center> elemento
ver todos os mais recentes recursos e de para centrar o conteúdo em uma página, < font>
marcação. para controlar a aparência do texto, e
● Cada elemento necessário um

tag de fecho (excepto para os elementos

<Strike> colocar uma linha através do texto -. vazios, tais como < img />).

Onde você deve ser tudo isso pode ser conseguido com CSS em ● Os nomes dos atributos tinha que estar em

particularmente conscientes de navegadores vez disso) minúsculas. Todos os atributos necessário um

que não suportam certas características, eu ● valor,

fiz uma anotação desta (como você viu com e todos os valores eram para ser
alguns dos elementos HTML5 introduzidas colocado entre aspas duplas. elementos
no capítulo Formas - e como você verá nos ● obsoletos deve
capítulos CSS). deixará de ser usado. Cada
● elemento que foi
aberto dentro de um outro elemento

deve ser fechado dentro desse

mesmo elemento.

179 marcação extra

 HTML5
lançado 2000

Os exemplos deste livro todos siga estas A versão de transição de XHTML foi Em HTML5, página web autores não precisa
regras estritas de XML. criado porque permitiu que os autores fechar todas as tags, e serão introduzidos
continuam a seguir as práticas mais novos elementos e atributos. No momento da
Um dos principais benefícios desta mudança velhos (com uma sintaxe menos rigoroso) escrita, a especificação HTML5 não tinha sido
foi que XHTML funciona perfeitamente com e usar alguns dos elementos e atributos concluída, mas os principais fabricantes de
outros programas que são escritos para criar que iam ser removido das versões futuras navegadores começaram a implementar muitas
e processar documentos XML. do HTML. das novas funcionalidades, e página web
autores foram rapidamente adotando a nova
marcação.
Também poderia ser usado com outros Houve também uma terceira versão do

formatos de dados, tais como Scalable XHTML 1.0 chamada XHTML

Vector Graphics (SVG) - uma linguagem 1,0 de molduras, que permitiu página web

gráfica escrito em XML, MathML (usado autores para dividir uma janela do navegador Apesar do fato de que o HTML5 ainda não está

para marcar fórmulas matemáticas), e CML em vários "quadros", cada uma das quais detêm concluído, você pode seguramente tirar proveito

(usado para marcar fórmulas químicas). uma página HTML diferente. Estes dias, os dos novos recursos da linguagem enquanto

quadros são muito raramente usados ​e estão você se esforça para garantir que os usuários

sendo eliminados. com navegadores mais antigos será capaz de

visualizar suas páginas (embora algumas das

A fim de ajudar os autores de páginas web mover características extra vai não ser visível para

para esta nova sintaxe, dois principais sabores de eles).

XHTML 1.0 foram criados:

● XHTML estrito 1,0 , Onde

autores tiveram de seguir as regras ao pé da

letra
● XHTML transitório 1,0 ,

onde os autores ainda pode usar

elementos de apresentação (tais como < center>
e < font>).

marcação extra 180

 doctypes

Porque tem havido várias versões do HTML,

HTML5 HTML
cada página da Web deve começar com uma
declaração DOCTYPE para contar um <! DOCTYPE html>
navegador qual versão do HTML da página
HTML 4
está usando (embora os navegadores
normalmente exibir a página, mesmo que <! DOCTYPE html PUBLIC
não está incluído). Vamos, portanto, ser "- // W3C // DTD HTML 4.01 Transitional // EN"
inclusive um em cada exemplo para o resto "http://www.w3.org/TR/html4/loose.dtd">
do livro.
XHTML transitório 1,0

<! DOCTYPE html PUBLIC

"- // W3C // DTD XHTML 1.0 Transitional // EN"
Como você vai ver quando chegamos a olhar para "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
CSS e seu modelo de caixa na página 316, o uso de

um DOCTYPE também pode ajudar o navegador

XHTML estrito 1,0
para renderizar uma página corretamente.

<! DOCTYPE html PUBLIC

"- // W3C // DTD XHTML 1.0 Strict // EN"
Porque XHTML foi escrito em XML, às "http://www.w3.org/TR/xhtml1/DTD/
vezes você vai ver páginas que usam o xhtml1-strict.dtd">
estrito início DOCTYPE XHTML com a
Declaração XML
declaração XML opcional. Onde isso é
usado, ele deve ser a primeira coisa em <? Xml version = "1.0"?>
um documento. Deve haver nada antes,
nem mesmo um espaço.

181 marcação extra

 Comentários em HTML
artigo

HTML capítulo-08 / comentários-em-Html.HTML

<! - ->
<! - início da introdução -> <h1> Exposições atuais </ h1> <h2> Olafur Eliasson </ h2>
<! - final de introdução -> <! - início do texto principal -> <p> Olafur Eliasson Se você quiser adicionar um comentário ao

nasceu em Copenhague, Dinamarca seu código que não será visível no navegador

do usuário, você pode adicionar o texto entre

esses caracteres:

em 1967 para os pais islandeses. </ p> <p> Ele é conhecido por
esculturas e grande escala <! - comentário entra aqui ->
materiais elementares instalação de arte que empregam tais como luz, água e
temperatura do ar para melhorar a experiência do espectador. </ p> <! - final do É uma boa idéia para adicionar comentários ao

texto principal -> <! - seu código porque, não importa como você está

familiarizado com a página no momento de

escrevê-lo, quando você voltar a ele mais tarde

<a href="mailto:[email protected]"> Contactar </a> (ou se alguém precisa de olhar para o código),

- - > Comentários irá torná-lo muito mais fácil de

entender.

Resultado

Embora os comentários não são visíveis para os

usuários na janela principal do navegador, eles

podem ser vistos por qualquer pessoa que olha

para o código-fonte por trás da página.

Em uma página de comprimento muitas vezes

você vai ver comentários usados ​para indicar

onde seções da página iniciar ou fim, e passar

notas para ajudar alguém que está olhando para

o código de compreendê-lo.

Os comentários também podem ser usados

​em torno de blocos de código para parar
esse código seja exibido no navegador. No
exemplo à esquerda, o link de e-mail foi
comentada.

Marcação extra 182

marcação 182
 atributo id

Cada elemento HTML pode levar o identidade atributo.

capítulo-08 / id-attribute.html HTML
Ele é usado para identificar exclusivamente

esse elemento de outros elementos na página. <P> Água e ar. Então, muito comuns são estes
Seu valor deve começar com uma letra ou um substâncias, que dificilmente atrair a atenção - e ainda assim eles vouchsafe
sublinhado (não um número ou qualquer outro nossa própria existência. </ p> <p id = "pullquote"> Toda vez que eu ver o mar eu
caractere). É importante que há dois me sinto
elementos na mesma página têm o mesmo uma sensação calmante de segurança, como se visitar o meu lar ancestral; I
valor para o seu identidade embarcar em uma viagem de ver.
</ P> <p> Mistério dos mistérios, a água eo ar está certo

atributos (caso contrário, o valor não é mais lá antes de nós no mar. </ p>
exclusivo).

Como você vai ver quando você vem de olhar

para CSS na próxima seção, dando um
Resultado
elemento de uma identidade única permite
denominá-lo de forma diferente do que
qualquer outra instância do mesmo elemento
na página. Por exemplo, você pode querer
atribuir um parágrafo dentro da página (talvez
um parágrafo que contém uma citação pull)
um estilo diferente do que todos os outros
parágrafos. No exemplo à direita, o parágrafo
com o identidade atributo cujo valor é pullquote é
feita em maiúsculas usando CSS.

Se você vai para aprender sobre JavaScript (a

linguagem que permite adicionar interatividade a

suas páginas), identidade atributos podem ser

usados ​para permitir que o script para trabalhar

com esse elemento particular.

o identidade atributo é conhecido como um

atributo global porque ele pode ser usado em

qualquer elemento.

183 marcação extra

 classe atributoartigo

Cada elemento HTML também pode

HTML capítulo-08 / class-attribute.html
transportar uma classe atributo. Às vezes, em
<P class = "importante"> Por um período de um ano a partir de vez de identificar exclusivamente um
Novembro de 2010, o Marugame Genichiro-Inokuma Museu de Arte elemento dentro de um documento, você vai
Contemporânea (MIMOCA) vai acolher um ciclo de quatro exposições Hiroshi querer uma maneira de identificar vários
Sugimoto. </ p> <p> Cada um vai mostrar obras do artista elementos como sendo diferente dos outros
elementos na página. Por exemplo, você
tematicamente contextualizada nas rubricas "Ciência", "arquitetura", "história" e pode ter alguns parágrafos de texto que
"Religião", de modo a apresentar um panorama abrangente da obra do artista. </ p> <p contêm informações que é mais importante do
class = "admissão importante"> Horas: 10:00 - 18:00 que os outros e querem distinguir estes
elementos, ou você pode querer diferenciar
entre links que apontam para outras páginas
(Sem admissão após 17:30) </ p> em seu próprio site e links que apontam para
sites externos .

Resultado

Para fazer isso você pode usar o

classe atributo. Seu valor deve descrever

a classe a que pertence. No exemplo à

esquerda, parágrafos chaves têm uma

classe atributo cujo valor é

importante.

o classe atribuir em qualquer elemento pode

compartilhar o mesmo valor. Assim, neste
exemplo, o valor de importante poderia ser
usado em títulos e links, também.

Por padrão, usando esses atributos não Neste exemplo, CSS foi aplicado para Se você gostaria de indicar que um
afeta a apresentação de um elemento. Só fazer elementos com um classe atributo elemento pertence a várias classes, você
vai mudar sua aparência, se há uma regra cujo valor é importante maiúsculas, e pode separar nomes de classe com um
CSS que indica que ele deve ser exibido elementos com um classe atributo cujo espaço, como você pode ver no terceiro
de forma diferente. valor é admissão vermelho. parágrafo no exemplo acima.

Marcação extra 184

marcação 184
 elementos de bloco

Alguns elementos sempre aparecerá para

capítulo-08 / block-elements.html HTML
começar em uma nova linha na janela do

navegador. Estes são conhecidos como nível de <H1> Hiroshi Sugimoto </ h1> <p> As datas para a origem da exposição de arte são tão
bloco elementos.

seguinte maneira: </ p>

<ul>

<Li> Ciência: 21 novembro - 20 fevereiro 2010/11 </ li> <li> Arquitetura:

06 de março - 15 maio de 2011 </ li> <li> História: 29 de maio - 21 de
agosto de 2011 </ li> <li> Religião: 28 de agosto - 06 de novembro de
2011 </ li> </ ul>

Exemplos de elementos de bloco são

<H1>, <P>, <Ul>, e < li>.

Resultado

185 marcação extra

 elementos inline
artigo

Alguns elementos sempre aparecerá para

HTML capítulo-08 / inline-elements.html
continuar na mesma linha como seus
Cronometrado para uma única revolução do planeta em torno do sol em um 23,4 elementos vizinhos. Estes são conhecidos
graus de inclinação que joga fora do ritmo das estações do ano, este < em> Origens da como
Arte </ em> na linha elementos.

ciclo é organizado em torno de quatro temas: < b> ciência, arquitetura, história </ b> e < b>
religião </ b> .

Exemplos de elementos em linha são

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

Resultado

Marcação extra 186

marcação 186
 Agrupamento de texto e
elementos em um bloco

<Div> capítulo-08 / agrupamento-block-elements.html HTML

<Div id = "header">
o < div> elemento permite agrupar um conjunto <Img src = "imagens / logo.gif" alt = "Anish Kapoor" /> <ul>
de elementos juntos em uma caixa em nível de

bloco. <Li> <a href="index.html"> Casa </ a> </ li> <li> <a href="biography.html"> Biografia
</ a> </ li> <li> <a href="works.html"> Trabalho </ a> </ li> <li> <a
Por exemplo, você pode criar um < div> elemento href="contact.html"> Contato </ a> </ li> </ ul>
para conter todos os elementos para o
cabeçalho do seu site (o logotipo ea
navegação), ou você pode criar um < div> elemento </ Div> <! - final do cabeçalho ->
para conter comentários dos visitantes.

Resultado
Em um navegador, o conteúdo do < div> elemento
irá começar em uma nova linha, mas
diferente do que isso não fará diferença
para a apresentação da página.

usando um identidade ou classe atributo no

< div> elemento, no entanto, significa que
você pode criar regras de estilo CSS para
indicar quanto espaço o < div> elemento
deve ocupar na tela e alterar a aparência
de todos os elementos nele contidos.

Ele também pode torná-lo mais fácil de seguir o seu Pois pode haver vários outros Isto permite-lhe ver claramente que a
código se você tiver usado elementos dentro de um < div> abertura tag que é suposto corresponder
<Div> elementos para manter cada elemento, ele pode ser útil para adicionar um a, como mostrado no final do exemplo
seção da página. comentário após o encerramento aqui.
</ Div> tag.

187 marcação extra

 Agrupamento de artigo
texto e
elementos inline

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

<Span>
<P> Anish Kapoor ganhou o Prêmio Turner em 1991 e
expôs no < span class = "galeria"> Tate Modern </ span> galeria em o < span> elemento age como um
Londres em 2003. </ p> equivalente em linha do < div>
elemento. Ele é usado para qualquer um:

1. conter uma secção de texto onde não há

nenhum outro elemento adequado para
diferenciá-lo do seu texto envolvente

2. Contém uma série de elementos

inline

Resultado
A razão mais comum pela qual as pessoas
usam < span> elementos é para que eles
possam controlar a aparência do conteúdo
desses elementos usando CSS.

Normalmente você vai ver que um classe

ou identidade atributo é usado com

<Span> elementos:

● Para explicar o propósito desta

<Span> elemento

● Assim que os estilos CSS podem ser

aplicada a elementos que possuem valores

específicos para esses atributos

Marcação extra 188

marcação 188
 iframe

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

<iframe
Um iframe é como uma pequena janela que largura = "450"
foi cortada em sua página - e nessa janela ​altura = "350"
você pode ver outra página. O termo iframe src = "http://maps.google.co.uk/maps?q=moma+new+york & amp; output =
é uma abreviatura de quadro embutido. Incorporar"> </ iframe>

Um uso comum de iframe (que você pode ter

visto em vários sites) é incorporar um mapa
do Google em uma página. O conteúdo do
Resultado
iframe pode ser qualquer página html (seja
localizado no mesmo servidor ou em
qualquer outro lugar na web).

Um iframe é criado usando o

<Iframe> elemento. Existem alguns
atributos que você precisa saber para
usá-lo:

src
o src atributo especifica o URL da
página para mostrar no quadro.

altura
o altura atributo especifica a altura do
iframe em pixels.

largura
o largura atributo especifica a largura
do iframe em pixels.

189 marcação extra

 artigo

HTML capítulo-08 / iframe-continued.html scrolling

o scrolling atributo não será suportada em
<iframe
HTML5. Em HTML 4 e XHTML, que indica
src = "http://maps.google.co.uk/maps?q=moma+new+york & amp; de incorporação
se o iframe deve ter barras de rolagem ou
de saída =" largura = "450" ​altura = "350" frameborder = "0" scrolling = "nenhuma" >
não. Isto é importante se a página dentro
</ iframe>
do iframe é maior do que o espaço que
você tem permitido para isso (usando o

altura e largura atributos). Barras de rolagem

permitem que o usuário mover o quadro para ver

mais conteúdo. Pode demorar um dos três valores: sim

Resultado ( para mostrar barras de posicionamento),

não ( para esconder as barras de rolagem) e auto

(Para mostrar a eles somente se necessário).

moldura
o moldura atributo não será suportada
em HTML5. Em HTML 4 e XHTML, que
indica se o quadro deve ter uma borda
ou não. Um valor de 0

indica que nenhuma fronteira deve ser

mostrado. Um valor de 1 indica que uma borda
deve ser mostrado.

desatado
Em HTML5, um novo atributo chamado desatado

pode ser aplicada a um iframe onde barras de

deslocamento não são desejados. o desatado

atribuir (como atributos algum outro novo

HTML5) não precisa de um valor, mas
muitas vezes você vai ver autores dar-lhe
um valor de
desatado. navegadores mais antigos não

suportam o desatado
atributo.

Marcação extra 190

marcação 190
 informações sobre suas páginas

<Meta>
o < meta> elemento vive dentro do < head> O valor do nome atributo pode ser o que
elemento e contém informações sobre quiser que ele seja. Alguns valores
essa página web. definidos para este atributo que são
comumente usados ​são:

Não é visível para os usuários, mas cumpre uma

série de finalidades, tais como dizer os motores

descrição
de busca sobre sua página, que o criou, e se é
Este contém uma descrição da página. Esta
ou não é sensível ao tempo. (Se a página é
descrição é comumente usado pelos
sensível ao tempo, ele pode ser configurado
motores de busca para entender o que está
para expirar.)
prestes a página e deve ter um máximo de
155 caracteres. Às vezes também é exibido
nos resultados dos buscadores.
o < meta> elemento é um elemento vazio para que

ele não tem uma marca de fechamento. Ele usa

atributos para transportar a informação.

palavras-chave
Os atributos mais comuns são o nome Este contém uma lista de palavras

e conteúdo commaseparated que um usuário pode pesquisar

atributos, que tendem a ser utilizados em para encontrar a página. Na prática, isso já não tem

conjunto. Estes atributos especificar as qualquer efeito perceptível sobre a forma como os

propriedades da página inteira. O valor do nome motores de busca indexar o seu site.

atributo é o imóvel que você está

definindo, eo valor do
robôs
conteúdo atributo é o valor que você
Isto indica se os motores de busca deve adicionar
quer dar a esta propriedade.
esta página aos seus resultados de busca ou não.

Um valor de noindex pode ser usado se esta página

não deve ser adicionado. Um valor de não siga pode

Na primeira linha do exemplo na página ao
ser usado se os motores de busca deve adicionar
lado, você pode ver um
esta página em seus resultados, mas não todas as
<Meta> onde o elemento nome
páginas que as vincula.
atributo indica uma intenção de
especificar uma descrição da página. o conteúdo
atributo é onde esta descrição é
realmente especificado.

191 marcação extra

 artigo

o < meta> elemento também usa

HTML capítulo-08 / meta.html
o http-equiv e
<! DOCTYPE html> conteúdo atributos em pares. Em nosso

<html> exemplo, você pode ver três instâncias

<Head> do httpequiv atributo. Cada um tem um
<Title> Informações sobre suas páginas </ title> <meta name = propósito diferente:
"description"
content = "um ensaio sobre a arte de Instalação" /> <meta name =
"palavras-chave"
autor
content = "instalação, arte, opinião" /> <meta name = "robots"
Isso define o autor da página web.

content = "nofollow" /> <meta

http-equiv = "autor"
content = "Jon Duckett" /> <meta pragma
http-equiv = "pragma" Isso impede que o navegador de cache da

content = "no-cache" /> <meta página. (Isto é, armazená-lo localmente para

http-equiv = "expira" economizar tempo de baixá-lo nas visitas

content = "Fri, 04 de abril de 2014 23:59:59 GMT" /> </ head> subseqüentes.)

<body> </ body> </ html>

expira
Como os navegadores muitas vezes cache o

conteúdo de uma página, o

expira opção pode ser usada para indicar quando

a página deve expirar (e não mais ser

armazenada em cache). Note-se que a data

deve ser especificado no formato mostrado.

Marcação extra 192

marcação 192
 caracteres de escape

Há alguns caracteres que são usados ​em e reservados por

código HTML. (Por exemplo, a suportes angulares esquerdo e
direito).

Portanto, se você quiser esses personagens a Existem também códigos especiais que podem Ao usar caracteres de escape, é importante
aparecer na sua página que você precisa para usar ser usados ​para mostrar símbolos, tais como verificar a página no seu navegador para
o que são chamados de caracteres "Escape" direitos autorais e marca registrada, símbolos de garantir que o símbolo correto aparece. Isso
(também conhecido como códigos de escape ou moeda, caracteres matemáticos, e alguns sinais ocorre porque alguns tipos de letra não
referências de entidade). Por exemplo, para de pontuação. Por exemplo, se você quiser incluir suportar todos esses personagens e você
escrever um suporte inclinado à esquerda, você um símbolo de copyright em uma página da web pode, portanto, precisa especificar uma
pode usar o & lt; ou que você pode usar & cópia de; ou fonte diferente para esses caracteres em
seu código CSS.
& # 60 ;. Para um e comercial, você pode
usar o & amp; ou & # 38 ;. & # 169 ;.

linha adicional
Você pode encontrar uma lista mais

completa de códigos de escape na seção de

ferramentas do site que acompanha este

livro.

193 marcação extra

<
Sinal de menor sinal Cent aspas simples esquerda

¢£ '' “” ×
& Lt; & # & Cento; & & Lsquo; &

60; # 162; # 8216;

Sinal de maior sinal da libra aspas simples direito

> ¥¤
& Gt; & &libra; & # & Rsquo; &

Amp; 163; # 8217;

Ampersand sinal de ienes

÷ aspas esquerda

&" ©
& Amp; & & Yen; & & Ldquo; & #
# 38; # 165; 8220;

Aspa símbolo do euro as aspas direitas

®
& Quot; & # € & # 8364; & Rdquo; & #
34; 8221;

símbolo de copyright Sinal de multiplicação

™
&cópia de; & vezes; &

& # 169; # 215;

Marca registrada sinal de divisão

& Reg; & # &dividir; & #

174; 247;

Marca comercial

&comércio; &

# 8482;

marcação extra 194

 Este exemplo inicia usando um conteúdo. Vários elementos usar o identidade Partes da página foram agrupados
DOCTYPE para indicar que esta é uma e classe atributos para identificar o seu usando < div> elementos, e comentários
página web HTML 4. No propósito. O símbolo de copyright foi foram adicionados para indicar o que o </ div>
cabeça, você também pode ver um < meta> adicionado usando um código de escape.
tag descrevendo da página elementos estão fechando.

195 marcação extra

 Exemplo
Markup extra

<! DOCTYPE html PUBLIC

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

<Head>
<Meta name = "description" content = "Telefone, e-mail
e indicações para The Art Bookshop, Londres, Reino Unido"/> <title> Contacto A
arte Bookshop, Londres Reino Unido </ title> </ head> <body>

<Div id = "header">
<H1> A Livraria Arte </ h1> <ul>

<Li> <a href="index.html"> casa </ a> </ li> <li> <a href="index.html"> novas
publicações </ a>
</ Li> <li class = "current-page">

<a href="index.html"> contato </ a> </ li> </ ul>

</ Div> <! - header final -> <div id =

"content">
<P> Charing Cross Road, Londres, WC2, UK </ p> <p> <span class =
"contato"> Telefone </ span>
0207 946 0946 </ p> <p> <span class = "contato"> O email </
span>
<a href="mailto:[email protected]">
[email protected] </ a> </ p>
<Iframe width = "425" altura = "275" frameborder = "0"
scrolling = "no" marginheight = "0" marginwidth = "0" src =
"http://maps.google.co.uk/maps?f=q& source = s_q & amp; hl = en & amp;
geocode = & amp; q = charing + cruz + estrada + London & amp; output =
incorporar "> </ iframe> </ div> <- o conteúdo final -> <p> & cópia!; A Livraria
Arte </ p> </ body> </ html>

marcação extra 196

 resumo
Markup extra

X DOCTYPES informam ao navegador qual versão do HTML que você está

usando.

X Você pode adicionar comentários ao seu código entre o

<! - e -> marcadores. o

X identidade e classe atributos permitem identificar elementos

particulares. o

X <Div> e < span> elementos permitem elementos nível de bloco

de grupo e em linha juntos.

X <Iframe> cortar janelas em suas páginas da web através do qual

outras páginas podem ser exibidas. o

X <Meta> tag permite que você fornecer todos os tipos de

informações sobre a sua página web.

X caracteres de escape são usadas para incluir especial

caracteres em suas páginas, como <,>, e ©.

 9
Flash, Vídeo
e áudio

X Como adicionar filmes em Flash em seu site

X Como adicionar vídeo e áudio para o seu site
X HTML5 <Video> e < audio> elementos
 Flash é uma tecnologia muito popular usado para
adicionar animações, vídeo e áudio para websites. Este
capítulo começa por olhar para como usá-lo em suas
páginas web.

Em seguida, se concentrar em como adicionar vídeo e áudio para o seu site, usando
o novo HTML5 <video> e <audio> elementos ou um serviço hospedado (como o
YouTube ou SoundCloud). Neste capítulo, você aprenderá:

● Como usar o Flash em suas páginas da web

● Como usar HTML5 <Video> e < audio> elementos

● Ao hospedar seu próprio vídeo e áudio e quando usar um

serviço como o YouTube

201 FLASH, vídeo e áudio

FLASH, vídeo e áudio 202
 como o Flash funciona

Desde o final dos anos 1990, o Flash tem sido uma ferramenta muito

popular para a criação de animações, e mais tarde para reprodução de

áudio e vídeo em websites.

Se você está criando uma animação ou um Quando você cria um arquivo Flash no ambiente Para visualizar Flash, navegadores precisa

media player em Flash, os arquivos que você de criação Flash, ele é salvo com a extensão. fla extensão usar um plug-in (um pedaço extra de software

colocar no seu site são referidos como filmes de arquivo. Para utilizar esse arquivo em uma que é executado no navegador) chamou o

em Flash. página web tem que ser salvos em um formato Flash Player. Estatísticas comumente indicam

diferente conhecido como SWF. (Ele tem a. swf extensão que 98% dos navegadores em computadores

de arquivo.) desktop tem o plugin Flash instalado. (A

Se você quiser criar o seu próprio percentagem de celulares e comprimidos com

filme Flash, você precisa comprar o ele é muito menos.)

ambiente de criação do Flash da

Adobe. Ao exportar o filme para o formato SWF,
o Flash cria código que você pode usar
Há, no entanto, várias empresas que para inserir o filme flash em sua página. Não há espaço neste livro para
oferecem animações em Flash e Tradicionalmente, este código usado o ensinar-lhe como criar filmes em Flash (há
slideshows, bem como de vídeo e leitores HTML < object> e < embed> muitos livros dedicados a esse tema), mas
de áudio que você pode usar sem comprar este capítulo irá mostrar-lhe como
esta ferramenta. Tag. No entanto, agora é mais comum adicionar filmes em Flash para o seu site.
o uso de JavaScript.

O ambiente de criação Flash é usado O . fla arquivo é exportado para. swf O . swf arquivo está incluído na sua página
para criar filmes Flash. formato para usar em uma página web. web usando JavaScript.

203 FLASH, vídeo e áudio

 uso de flash

Desde 2005, uma série de fatores fizeram com que menos sites
são escritos em Flash ou até mesmo usar elementos do Flash em
suas páginas.

Quando o Flash foi lançado pela primeira vez, Existem várias razões pelas quais menos Houve leis introduzidas para garantir que
ele foi desenvolvido para criar animações. A sites estão usando o Flash estes dias, os sites são utilizáveis ​por pessoas com
tecnologia evoluiu rapidamente, no entanto, e incluindo: deficiência visual ou física - e Flash tem
as pessoas começaram a usá-lo para construir sido criticada porque conteúdo Flash nem
media players e até mesmo sites inteiros. Em 2005-6, foram lançados um conjunto de sempre satisfaz os requisitos de
bibliotecas JavaScript (incluindo Prototype, acessibilidade.
script.aculo.us e JQuery), que tornou mais
fácil para as pessoas a criar efeitos animados
Embora o Flash ainda é muito popular, nos que usam JavaScript. Em 2008, os navegadores começaram a
últimos anos as pessoas têm sido mais apoiar HTML5 < video> e
seletivo sobre quando usá-lo (e agora <Audio> Tag. No momento da escrita, o Flash

raramente considerar a construção de um site ainda é uma maneira popular de reproduzir

inteiro em Flash). Quando a Apple lançou o iPhone em vídeo e áudio na web, mas mais e mais
2007 e mais tarde a do iPad em 2010, pessoas estão migrando para o HTML5.
eles tomaram a decisão de não suporta
Apesar disso, o Flash tem um futuro na Flash.
web, porque há algumas coisas que ele (Você vai ver como usar esses elementos

faz muito bem, como a criação de mais adiante neste capítulo.)

animações.

FLASH, vídeo e áudio 204

 Linha do tempo:
Flash, vídeo e áudio

tecnologias web mudar rapidamente. Aqui você pode ver

algumas das mudanças na forma como animação, vídeo e áudio
são criados na web.

1995 1996 1997 1998 1999 2000 2001 2002 2003

FutureSplash, precursor para o Flash

Animação

RealAudio streaming de áudio

Áudio flash 4 de streaming

auditivo

RealVideo streaming de vídeo

RealVideo 8 streaming de vídeo

vídeo Flash MX Flash

Vídeo

Nesta página você pode ver os primeiros Na página ao lado, você pode ver
grandes jogadores para fornecer animação algumas das tecnologias e eventos
web, áudio e vídeo. substituí-los.

205 FLASH, vídeo e áudio

Vídeo sites de compartilhamento de oferecer alternativas para a auto-hospedagem

Vimeo lançou

YouTube lançou

YouTube lança aplicativo para iPhone

Vimeo lança HTML5 jogador

YouTube libera HTML5 jogador

Vimeo lança aplicativo para iPhone

2005 2006 2007 2008 2009 2010 2011 2004

Internet Explorer 9

Opera 9 .62

3 Firefox 3,5

Safari 3,1 Cromo

navegadores introduzir HTML5 < video> e < audio> Tag

iPad
Iphone

maçã dispositivos libera que não suportam Flash

jQuery

script.aculo.us

Prototype

JavaScript bibliotecas são escritos para criar efeitos animados

FLASH, vídeo e áudio 206

 Adicionando um filme flash para o
seu web Página

A forma mais popular de adicionar o Flash

capítulo-09 / adicionando-a-flash movie.html HTML
em uma página da web está usando
JavaScript. Existem vários scripts que <! DOCTYPE html>
permitem que você faça isso sem uma <html>
compreensão profunda da linguagem <Head>
JavaScript. <Title> Adicionando um filme do Flash </ title> <script type
= "text / javascript"
src = "http://ajax.googleapis.com/ajax/libs/ SWFObjects / 2,2 /
O script vamos estar a olhar para aqui é swfobject.js"> </ script> <script type = "text / javascript">
chamada SWFObject. Você pode obter uma

cópia do mesmo para livre do Google, e você swfobject.embedSWF ( "flash / bird.swf", "pássaro", "400",
pode ver como podemos usá-lo na próxima "300", "8.0.0"); </ script> </ head> <body>
página.

Uma vantagem de usar esta técnica é que <Div id = "pássaro"> <p> Uma animação de uma tomada de pássaro

permite que os navegadores para mostrar um chuveiro </ p> </ div> </
conteúdo alternativo para os usuários cujos body> </ html>
navegadores não são capazes de mostrar o

Flash.

Esta técnica utiliza um < div> O script SWFObject irá verificar para ver se o Se você usar uma descrição de texto como

elemento para criar um espaço onde o filme do navegador do usuário pode reproduzir o filme conteúdo alternativo, então você pode conseguir

Flash deve sentar-se. o < div> tem um elemento identidadedo Flash. Se puder, o script irá substituir o mais dois benefícios:

conteúdo do < div> com o . swf Arquivo.

atributo cujo valor é usado pelo script 1. O texto pode ser acessado por pessoas com
SWFObject. Neste exemplo, o valor da identidade deficiências visuais e / ou físicos que não são
Para os usuários que não podem ver o filme do capazes de interagir com o arquivo do Flash.
atributo é pássaro. Flash, você pode mostrar um still do filme em vez.

Você pode também gostaria de considerar o uso

Dentro do < div> elemento que você pode colocar o de uma descrição de texto do arquivo do Flash. 2. O texto pode ser indexado pelos motores de

conteúdo alternativo para os usuários que não são busca (que não são tão eficazes em arquivos de

capazes de reproduzir o Flash. indexação SWF), aumentando a chance de que

seu conteúdo será encontrado.

207 FLASH, vídeo e áudio

 artigo

Neste exemplo, o script SWFObject está

Resultado
hospedado nos servidores do Google. Nós incluir
o script nesta página web usando o primeiro
dos dois < script> elementos.

O atributo tipo é usado no

<Script> elemento para indicar que o
script dentro é escrito em JavaScript. o src
atributo informa ao navegador onde
encontrar o script.

O segundo < script> elemento é usado para

dizer ao navegador sobre o filme do Flash,
bem como qual elemento que deve
substituir. Este elemento é realmente
dizendo o script SWFObject cinco peças de
informação, que estão nos suportes:

1. A localização do . swf Arquivo:

flash / bird.swf

2. O elemento que o filme Flash deve substituir,

especificado pela valor do identidade atributo
no < div> elemento:

pássaro

3. A largura do filme do Flash:

400 px

4. O altura do filme do Flash:

300 px

5. O mínimo versão do Flash player

necessário para visualizar o filme:

Flash Player 8

FLASH,
vídeo e áudio
vídeo e áudio 208 FLASH,
208
 Compreender os formatos de vídeo
e jogadores

Para adicionar vídeo ao seu site, há duas questões fundamentais

para compreender: formatos de arquivo e leitores de vídeo / plugins.

formatos Jogadores / Plugins abordagem

Filmes estão disponíveis em vários Navegadores foram inicialmente projetados para A maneira mais fácil de adicionar vídeo ao

formatos (BluRay, DVD, VHS, para mostrar texto e apenas imagens. Por esta razão, os seu site é usar um serviço hospedado

citar alguns). Online, há ainda Mais formatos navegadores construída antes de 2010 geralmente como o YouTube ou Vimeo.

de vídeo (incluindo AVI, Flash Video, necessário um outro programa chamado um

H264, MPEG, Ogg Theora, jogador ou plugin para ser instalado, a fim de

QuickTime, WebM, e Windows reproduzir conteúdo de vídeo. No entanto, existem alguns casos em que
Media). o uso destes serviços não é apropriado
(como você verá na próxima página) e
Estes jogadores e plugins suportados apenas você quer hospedar o vídeo em seu
Assim como o seu leitor de DVD não vai jogar uma alguns formatos de vídeo. próprio site.
cassete VHS, navegadores diferem em que

formatos de vídeo que fazem e não suportam. Recentemente navegadores evoluíram para
suportar o HTML5 < video> No momento da escrita, para assegurar a maioria

tag (que torna jogadores e plugins das pessoas pode jogar o seu conteúdo de vídeo,

Para que os usuários para ver o seu vídeo obsoletos). que é considerada a melhor prática para usar o

on-line, você pode precisar convertê-lo para HTML5

outro formato. Infelizmente, no entanto, você não pode <Video> elemento para navegadores que

contar com todos os visitantes para o seu suportam, e também de vídeo Flash para aqueles

O processo de converter um vídeo site ter um navegador recente que suporta que fazem not.This significa que você teria que

em outro formato é muitas vezes este novo elemento HTML5 e os publicou nenhum vídeo que você deseja mostrar

referida como "codificação" do navegadores que reconhecem o em pelo menos dois formatos diferentes: WebM e

vídeo. MP4.

<Video> elemento exigem que o vídeo seja

Existem vários aplicativos disponíveis na codificado em diferentes formatos.

web que permitem que você codificar
vídeos (como www.
mirovideoconverter.com).

209 FLASH, vídeo e áudio

 utilização de serviços de
vídeo hospedado

A maneira mais fácil de adicionar um vídeo para o seu site é fazer o

upload do vídeo para um site como o YouTube ou Vimeo e usar os

recursos fornecidos em seu site para incorporar o vídeo em sua

página.

vantagens desvantagens A alternativa

Os sites de vídeo hospedado (como o YouTube) O seu vídeo estará disponível no site do Se você quer hospedar vídeo em seu próprio site -

proporcionar aos jogadores que trabalham com serviço hospedado, por isso, se você deseja em vez de um serviço hospedado - um trabalho

a maioria dos navegadores web. que o conteúdo disponível exclusivamente em muito mais está envolvido na criação de seu site

seu site (e não visível em outros sites), você para reproduzir o vídeo.

precisa para hospedar o vídeo em seu próprio

Você não precisa se preocupar com a codificação servidor e adicione seu próprio jogador na

de seu vídeo uma vez que esses sites permitem página. Nós vamos estar a olhar para duas maneiras

que você carregar o seu conteúdo em uma diferentes que você pode hospedar seus

variedade de formatos. Uma vez carregado, eles próprios vídeos: usando o Flash Vídeo eo

automaticamente converter seu vídeo em vários Alguns serviços irá limitar o seu vídeo HTML5

formatos exigidos pelos diferentes navegadores. é permitido incluir. Por exemplo, a <Video> elemento.

maioria proibir o uso de publicidade no

vídeo que você enviar (que o impede A fim de garantir que o número máximo
de monetizar esse conteúdo). de visitantes do seu site pode ver o
Web hosting empresas geralmente cobram extra vídeo, você precisará usar uma
se você usar um monte de banda, e arquivos de combinação de ambas as técnicas.
vídeo podem ser muito grandes. Portanto, ele

pode custar-lhe extra para hospedar os vídeos em Alguns serviços hospedados vai jogar os seus

seu próprio site. Se o vídeo está hospedado em próprios anúncios antes de seu vídeo começará,

um site como o YouTube ou Vimeo, no entanto, ou mesmo sobrepor-los sobre a tela como seu

você não precisa pagar para a largura de banda. vídeo é reproduzido. A qualidade do vídeo em

alguns serviços hospedados também pode ser

limitado.

FLASH, vídeo e áudio 210

 Preparar um vídeo em Flash
para o seu site

Há três passos que você precisa seguir para adicionar um vídeo em

Flash para a sua página web:

1 2 3
converter seu formato de vídeo em Encontrar um FLV Player para incluem o jogador e vídeo na sua
FLV reproduzir o vídeo página

Para reproduzir um vídeo em Flash, você Você precisará de um jogador escrito em Flash Você pode incluir o jogador na sua página
precisa converter o vídeo para o formato FLV. para reproduzir o arquivo FLV. Sua finalidade é usando uma técnica de JavaScript como
Desde Flash 6, o ambiente de criação Flash manter o filme FLV e adicionar controles, como SWFObject, que foi mencionado
veio com um Flash Video Encoder para play / pause. Aqui estão dois sites que oferecem anteriormente neste capítulo.
converter vídeos para o formato FLV. jogadores FLV:

Você também vai precisar de dizer ao jogador onde

Alguns players de vídeo em Flash também www.osflv.com ele pode encontrar o arquivo de vídeo que você quer

suportam um formato chamado H264 (e algum www.longtailvideo.com jogar. (Alguns jogadores têm recursos avançados,

vídeo programas de edição de exportação de como a capacidade de criar listas de reprodução de

vídeo neste formato). Você não precisa o ambiente de criação vários vídeos, ou adicionar uma imagem estática

Flash para usar qualquer um destes em antes da reprodução do vídeo.)

seu site.
Pesquisando "FLV ou H264

conversores" permitirá que você encontrar o

software de codificação alternativa.

Eu tenho desde um arquivo FLV exemplo que No exemplo a seguir, usaremos o jogador No exemplo a seguir, nós também
você pode usar com o código de download no OS FLV, que é um, open-source jogador estaremos usando a técnica SWFObject
site (É em uma pasta separada, porque os livre Flash Video. Isso está incluído no JavaScript mencionado nas páginas
arquivos de vídeo são grandes.) código de download. Ele suporta apenas o 207-208.
formato FLV (não H264).

211 FLASH, vídeo e áudio

 a adição de um vídeo em artigo
Flash
Para suas páginas

Este exemplo usa o jogador OS FLV para

HTML capítulo-09 / adicionando-a-flash video.html
exibir um vídeo chamado
<! DOCTYPE html> puppy.flv, que já foi convered em
<html> formato FLV.
<Head>
<Title> Adicionando um vídeo em Flash </ title> <script Você já viu como usar SWFObject para
type = "text / javascript" incorporar uma animação básica em uma
src = "http://ajax.googleapis.com/ajax/libs/ SWFObjects / 2,2 / página, mas às vezes filmes em Flash
swfobject.js"> </ script> <script type = "text / javascript"> precisam de informações para que eles
funcionem. Neste exemplo, o leitor de vídeo
var FlashVars = {}; precisa saber o caminho para o vídeo que tem
var params = {filme: "../ vídeo / puppy.flv"}; swfobject.embedSWF ( para jogar, assim SWFObject usa variáveis
"flash / splayer.swf", "neve", "400", "320", "8.0.0", FlashVars, ​JavaScript para passar essa informação para o
params); </ script> </ head> <body> filme do Flash. Estes são fornecidos em duas
linhas de código que começam com var.

<Div id = "neve"> <p> Um vídeo de um jogo cachorro em

a neve </ p> </ div> </ body>
</ html> Este jogador em particular não está esperando

alguma informação no

flashvars variável, de modo que é deixado

vazio.

Resultado
O caminho para o filme é fornecido na
variável chamada params.

var params = {filme:

"../videos/puppy.flv"};

A linha após as variáveis ​é o que diz o

script para substituir o elemento HTML
com o player de vídeo. É muito
semelhante ao que vimos no exemplo
anterior, que introduziu SWFObject.

jogadores de vídeo diferentes geralmente requerem informações como o caminho para o vídeo em um pouco diferentes formatos, mas eles geralmente vêm
com exemplos e documentação para ajudar você a entender como usá-los.

FLASH,
vídeo e áudio
vídeo e áudio 212 FLASH,
212
 HTML5: Preparando vídeo para suas
páginas

Apesar do HTML5 < video> elemento a ser uma adição muito recente,

está desfrutando de uso generalizado. Aqui estão algumas das

questões-chave para estar ciente de:

Apoio, suporte formatos controles

O novo HTML5 < video> Nem todos os navegadores suportam os O navegador fornece seus próprios
elemento só é suportado por browsers recentes, mesmos formatos de vídeo. Portanto, você controles para o jogador, e estes podem
para que você não pode apenas usar esta precisa fornecer o seu vídeo em mais de um variar de navegador para navegador. Você
técnica se você quiser que todos sejam capazes formato. pode controlar a aparência desses controles
de ver o seu vídeo (que você precisa combinar usando JavaScript (mas isso está além do
isso HTML5 com o Flash Video). Para alcançar tantos navegadores escopo deste livro).
possível, você deve fornecer o vídeo nos
seguintes formatos:
direitos digitais No navegador
H264: IE e Safari
No momento da escrita, o WebM: Android, Chrome, Firefox, Um dos problemas com jogadores como o Flash

<Video> elemento não suporta qualquer tipo Opera Player é que eles podem se comportar de forma

de Digital Rights Management (DRM - por inconsistente quando elementos como menus

vezes referido como proteção contra cópia). Chrome, Firefox e Opera têm indicado que cair sobre eles, ou a janela está escalado para

Mas um pirata dedicado normalmente vai eles vão apoiar um formato chamado cima ou para baixo. A opção HTML5 resolve

encontrar uma maneira de contornar DRM. WebM. (Alguns jogadores Flash também esses problemas.

apoiar H264, e WebM - o que vai

economizar no número de conversões).

Na página 222 você vai ver como Eu forneci uma amostra de vídeo em formato Se você olhar para este exemplo no Firefox e

combinar esta técnica de vídeo HTML5 H264 e WebM para você experimentar com os Opera você vai ver diferentes controles

com o Flash Vídeo para conseguir maior downloads de código. quando você passa o mouse sobre o vídeo.

alcance.

213 FLASH, vídeo e áudio

 HTML5: adicionar vídeo
artigo
Para suas páginas

HTML capítulo-09 / adicionando-html5-video.html

<Video>
<! DOCTYPE html>
<html> o < video> elemento tem uma série de
<Head> atributos que lhe permitem controlar a
<Title> Adicionando HTML5 Vídeo </ title> </ head> reprodução de vídeo:
<body>
src
<Video src = "video / puppy.mp4" Este atributo especifica o caminho para o
cartaz = "imagens / filhote.jpg" largura = "400" altura = "300" controlos vídeo. (O exemplo de vídeo está no formato
de pré-carga de loop> <p> Um vídeo de um cachorro brincando na neve </ p> H264 por isso só irá funcionar no IE e Safari.)
</ video> </ body> </ html>

poster
Este atributo permite especificar uma imagem

para mostrar enquanto o vídeo está baixando

ou até que o usuário informa o vídeo para

jogar.

largura altura
Em HTML5 você não precisa fornecer pré-carga Estes atributos especificar o tamanho do
valores para todos os atributos, como os Este atributo informa ao navegador o que jogador em pixels.
controles, autoplay, e atributos de loop fazer quando a página é carregada. Ele pode

usados ​com o < video> elemento. Estes ter um dos três valores: controles
atributos são como interruptores de ligar / Quando usado, este atributo indica que o
desligar. Se o atributo está presente, navegador deve fornecer seus próprios
verifica-se que a opção por diante. Se o Nenhum controles para reprodução.
atributo for omitido, a opção está desligada. O navegador não deve carregar o vídeo
até o usuário pressiona jogar.
Reprodução automática
Quando usado, este atributo especifica que o
Se o navegador não suporta o < video> auto arquivo deve tocar automaticamente.
elemento ou o formato de vídeo O navegador deve fazer o download do vídeo

utilizado, ele irá mostrar tudo o que é quando a página é carregada.

entre a abertura < video> laço

metadados Quando usado, este atributo indica que o
e fechando </ video> Tag. O navegador deve apenas coletar vídeo deve começar a jogar novamente
informações como o tamanho, o primeiro depois que ele terminou.
quadro, lista de faixas e duração.

FLASH,
vídeo e áudio
vídeo e áudio 214 FLASH,
214
 HTML5: fontes de vídeo múltiplos

<Source> capítulo-09 /-video-sources.html múltipla HTML

<! DOCTYPE html>

Para especificar o local do arquivo para ser <html>
jogado, você pode usar o <Head>
<Source> no interior do elemento <Title> Múltiplas fontes de vídeo </ title> </ head> <body>
<Video> elemento. (Isso deve substituir
o src atributo na abertura < video> tag.)
<Cartaz video = "images / cachorro.jpg" width = "400"
altura = "320" controlos de pré-carga de loop> <fonte src = "vídeo
Você também pode usar múltiplos / puppy.mp4" type = "vídeo /
<Source> elementos para especificar que o mp4, codecs = "avc1.42E01E, mp4a.40.2" '/> <source src =
vídeo está disponível em diferentes formatos. "video / puppy.webm" type =' video /
webm; codecs = "vp8, vorbis"'/> <p> Um vídeo de um cachorro
brincando na neve </ p> </ video> </ body> </ html>
(Devido a um erro no iPad, você deve
fornecer o vídeo MP4 como o primeiro
formato. Caso contrário, pode não jogar.)

src Resultado
Este atributo especifica o caminho para o
vídeo.

tipo
Você deve usar esse atributo para dizer ao

navegador qual o formato do vídeo é. Caso

contrário, ele irá baixar alguns dos vídeos

para ver se ele pode jogar o arquivo (que vai

levar tempo e largura de banda).

codecs
O codec de que foi usada para codificar Se o navegador não suporta o < video> elementoextra online
o vídeo é fornecido dentro do tipo atributo. ou o formato de vídeo utilizado, ele irá Nós fornecemos links para ferramentas que
Observe o uso de aspas simples, bem mostrar tudo o que é entre a abertura < video> ajudam a codificar vídeos e áudio para os
como aspas duplas no atributo tipo, e fechamento formatos corretos na seção de ferramentas
quando é fornecido. do site.
</ Video> Tag.

215 FLASH, vídeo e áudio

 HTML5: combinando o flash
& Vídeo HTML5

Ao oferecer seus vídeos em ambos os formatos HTML5 e Flash

vídeo, você vai garantir que ele pode ser visto pela maioria dos
usuários em seu site.

Você pode optar por oferecer HTML5 como a Porque alguns dos leitores de vídeo Se você começar a trabalhar com vídeo HTML5 em

primeira opção, e vídeo Flash como um construído em suporte a Flash H264 profundidade, você também pode:

fallback para as pessoas cujo navegador não codificação, se você usar um jogador que
● Crie a sua própria reprodução
suporta vídeo HTML5. Ou você pode suporta este formato você só precisa
controles
funcionar ao contrário. fornecer o vídeo em formatos H264 e
WebM. (Você não vai precisar dele no ● Fornecer versões diferentes
formato FLV também.) Você vai ver isso do vídeo para navegadores que possuem

demonstrado no exemplo, no final do telas de tamanhos diferentes (assim você

capítulo. pode fornecer conteúdo de resolução mais

baixa para dispositivos portáteis) Diga

diferentes partes de uma página

a mudar quando o vídeo atinge

um certo ponto

FLASH, vídeo e áudio 216

 Adição de áudio a Web
Pages

De longe o mais popular formato para colocar áudio em páginas

da web é MP3. Tal como acontece com vídeo, há três rotas

comumente realizada:

1 2 3
usar um serviço hospedado uso do flash usar HTML5

Existem vários sites que permitem que você Há vários filmes em Flash que lhe permitem HTML5 introduziu um novo
enviar o seu áudio, e proporcionar um jogador reproduzir arquivos MP3; a partir de botões simples <Audio> elemento. Browsers que suportam este

que você pode incorporar em sua página, como que desempenham uma faixa para jogadores elemento fornecer os seus próprios controles - tanto

complexos que permitem que você crie listas de como eles fazem para os arquivos de vídeo que

SoundCloud.com e reprodução e juke boxes. apenas olhou para.

MySpace.com.

Algumas pessoas perguntam como obter música Isso é realmente muito difícil de alcançar e que É por isso que alguns sites oferecem leitores de

para jogar de forma consistente, mesmo quando dependem de técnicas como o uso de AJAX para áudio em novas janelas, para que os ouvintes

os visitantes se mover de uma página para outra carregar o conteúdo da página ou o não são interrompidos quando se deslocam

em um site. desenvolvimento de todo o site em flash. entre as páginas.

217 FLASH, vídeo e áudio

 a adição de umartigo
flash
leitor de mp3

Há muitos leitores de MP3 que já foram

HTML capítulo-09 / adicionando-a-flash-mp3-player.html
escritos em Flash, tais como:
<! DOCTYPE html>
<html>
<Head> flash-mp3-player.net

<Title> Adicionando um Flash MP3 Player </ title> <script type = musicplayer.sourceforge.net

"text / javascript" www.wimpyplayer.com

src = "http://ajax.googleapis.com/ajax/libs/ SWFObjects / 2,2 /

swfobject.js"> </ script> <script type = "text / javascript"> Cada um destes jogadores tem uma

funcionalidade diferente, de modo a verificar as

var FlashVars = {}; suas características antes de escolher um para o

var params = {mp3: "audio / test-audio.mp3"}; swfobject.embedSWF seu site.

(
"Flash / player_mp3_1.0.0.swf", "music-player", "200", "20", Este exemplo usa um jogador livre de
"8.0.0", FlashVars, params); </ script> </ head> <body> flash-mp3-player.net
que está incorporado na página usando a técnica

SWFObject nos encontramos nas páginas

208-208. O jogador é dito o caminho para o

<Div id = "music-player"> arquivo MP3 utilizando um parâmetro chamado mp3.

<P> Você não pode ouvir esta faixa porque este

navegador não suporta o nosso leitor de música flash. </ p> </ div> </
body> </ html> Após a segunda < script> tag, você pode
ver que nós criamos duas variáveis
​JavaScript; a primeira chamada flashvars, a
segunda chamada params. Mesmo que
não está usando o flashvars

variável, o script SWFObject espera

Resultado
que antes da params
variável, de modo que precisamos dele lá.

var FlashVars = {}; var params

={
mp3: "A música / noise.mp3"};

Essas variáveis ​são então adicionadas no

final da linha que incorpora o leitor de
MP3 na página (pouco antes da segunda
fechamento < script> tag).

FLASH,
vídeo e áudio
vídeo e áudio 218 FLASH,
218
 HTML5: acrescentando HTML5
áudio para suas páginas

<Audio> capítulo-09 / adicionando-html5-audio.html HTML

<! DOCTYPE html>

HTML5 introduziu o < audio> <html>
elemento para incluir arquivos de áudio em suas <Head>
páginas. Tal como acontece com vídeo HTML5, <Title> Adicionando HTML5 Áudio </ title> </ head>
navegadores esperar diferentes formatos para o <body>
áudio.

<Audio src = "audio / test-audio.ogg"

o < audio> elemento tem uma série de controles autoplay> <p> Este navegador não suporta o nosso formato
atributos que lhe permitem controlar a de áudio. </ p> </ audio> </ body> </ html>
reprodução de áudio:

src
Este atributo especifica o caminho para o arquivo

de áudio.

controles
Resultado
Este atributo indica se o jogador deve exibir
os controles. Se você não usar esse
atributo, há controles serão mostrados por
padrão. Você também pode especificar seus
próprios controles usando JavaScript.

Reprodução automática pré-carga

A presença deste atributo indica que o áudio Este atributo indica que o navegador deve fazer se Este exemplo só funciona em
deve começar a tocar automaticamente. (É o jogador não estiver definido para Reprodução navegadores que suportam o formato de
considerado melhor prática para permitir que automática . Ele pode ter os mesmos valores que áudio Ogg Vorbis (Firefox, Chrome e
os visitantes escolher jogar de áudio.) vimos na página 214 para o < video> elemento. Opera). Para que ele funcione no Safari 5
e IE 9, o áudio precisaria estar no formato
MP3 (ou use o < source>

laço
elemento coberto na próxima página para
Este atributo especifica que a faixa de áudio
oferecer diferentes formatos).
deve jogar novamente quando tiver
terminado.

219 FLASH, vídeo e áudio

 HTML5: audio múltipla artigo
fontes

HTML capítulo-09 / múltipla de áudio-sources.html

<Source>
<! DOCTYPE html>
<html> É possível especificar mais de um
<Head> arquivo de áudio usando o
<Title> Múltiplas fontes de áudio </ title> </ head> <body> <Source> elemento entre a abertura < audio>
e fechamento
</ Audio> etiquetas (em vez do

<Controles de áudio autoplay> src atributo na abertura

<Source src = "audio / test-audio.ogg" /> <source src = "audio / <Audio> tag).
test-audio.mp3" /> <p> Este navegador não suporta o nosso formato de
áudio. </ p> </ audio> </ body> </ html> Isto é importante porque diferentes

navegadores suportam diferentes formatos para

arquivos de áudio.

MP3: Safari 5+, Chrome 6+, IE9

Ogg Vorbis: Firefox 3.6, Chome

6, Opera 1,5, IE9
Resultado

Então, você precisa fornecer dois formatos de

áudio para obter cobertura em todos os

navegadores recentes que suportam o < audio> elemento.

Você também pode fornecer uma alternativa

Flash para navegadores antigos que não

suportam o < audio>

elemento.
src tipo
o < source> utiliza o elemento No momento da escrita, o tipo
O HTML5 < audio> tag não ganhou como a
src atributo para indicar onde o arquivo de atributo não era comumente
adoção generalizada como o < video> tag, e
áudio está localizado. sendo usado na < source>
tem havido alguns problemas com a qualidade
elemento da mesma maneira que era para o
de áudio nos primeiros navegadores para
< video> elemento.
implementá-lo.

FLASH,
vídeo e áudio
vídeo e áudio 220 FLASH,
220
221 FLASH, vídeo e áudio
 exemplo
Flash, vídeo e áudio

Este exemplo usa HTML5 para mostrar um vídeo.

O vídeo foi codificado em formatos H264 e WebM alcançar tantos navegadores possível. Um
player de Flash foi adicionado à página para navegadores que não suportam vídeo HTML5. O
Flash Player está incorporado usando SWFObject. Se o navegador não suporta vídeo HTML5
ou Flash, em seguida, uma mensagem de texto simples será mostrado para o usuário.

<! DOCTYPE html>

<html>
<Head>
<Title> Flash, vídeo e áudio </ title> <script type = "text /
javascript"
src = "http://ajax.googleapis.com/ajax/libs/ SWFObjects / 2,2 /
swfobject.js"> </ script> <script type = "text / javascript">

var FlashVars = {};

var params = {filme: "../video/puppy.flv"}; swfobject.embedSWF ( "flash /
osplayer.swf", "neve", "400", "320", "8.0.0", FlashVars, params); </ script> </ head>
<body>

<Cartaz video = "images / cachorro.jpg" width = "400"

height = "320" Controles = "controles"> <source 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 =
"neve">
<P> Você não pode ver este vídeo de um filhote de cachorro jogar
na neve, porque este navegador não suporta nossos formatos de
vídeo. </ p> </ div> </ video> </ body> </ html>

FLASH, vídeo e áudio 222

 resumo
Flash, vídeo e áudio

X Flash permite adicionar animações, vídeo e áudio para

a teia.

X Flash não é suportado no iPhone ou iPad.

X HTML5 introduz nova <Video> e < audio>

elementos para adicionar vídeo e áudio para páginas da web, mas estes só

são suportados nos navegadores mais recentes. Browsers que suportam os

X elementos HTML5 não

todos apoiar o mesmo vídeo e formatos de áudio, de modo que você precisa

fornecer seus arquivos em diferentes formatos para garantir que todos possam ver

/ ouvir-los.
 10
Apresentando
CSS

X O CSS faz
X Como funciona o CSS
X Regras, propriedades e valores
 Nesta seção, vamos olhar para como fazer suas
páginas da web mais atraente, controlando o projeto
deles usando CSS.

CSS permite que você crie regras que especificam como o conteúdo de um elemento
deve aparecer. Por exemplo, você pode especificar que o fundo da página é creme,
todos os parágrafos devem aparecer em cinza utilizando o tipo de letra Arial, ou que
todos de nível um cabeçalhos devem ficar em um azul, itálico, Times fonte.

Depois de ter aprendido como escrever uma regra CSS, aprendendo CSS envolve

principalmente aprender as diferentes propriedades que você pode usar. Portanto, este capítulo:

● Apresentar-lhe como funciona o CSS

● Ensiná-lo a escrever regras CSS

● Mostrar-lhe como regras CSS aplicam-se a páginas HTML

Os capítulos restantes desta seção vai olhar para todas as várias propriedades
CSS você pode usar.

227 APRESENTANDO CSS

APRESENTAÇÃO CSS 228
 Compreender CSS: pensar dentro da
caixa

A chave para entender como CSS funciona é imaginar que

há uma caixa invisível em torno de cada elemento HTML.

Nesta página, você pode ver uma página HTML

básico.

Na página à direita, você pode ver a mesma

página HTML, mas eu adicionei contornos a

cada um dos elementos para que você possa

ver como CSS irá tratar cada elemento como

se vive dentro de sua própria caixa.

Block & elementos inline

Você pode se lembrar de páginas elementos nível de bloco parecem que elementos em linha fluir dentro do texto e
185-186 que em que há uma diferença começar em uma nova linha. Exemplos não começar em uma nova linha.
entre o nível de bloco e elementos inline e incluem o < h1> <h6>, <p> e < div> elementos. Exemplos incluem < b>, <i>, <img>, <em> e
como como os navegadores exibi-los. < span>.

229 APRESENTAÇÃO CSS

 CSS permite que você crie regras que controlam a forma que
cada caixa individual (e que o conteúdo dessa caixa) é
apresentado.

Neste exemplo, os elementos de bloco de

nível são apresentados com bordas

vermelhas, e elementos em linha têm

fronteiras verdes.

o < body> elemento cria a primeira caixa, em

seguida, o < h1>, <h2>, <p>, <i>, e < a> elementos
cada criar suas próprias caixas dentro dele.

Usando CSS, você pode adicionar uma borda em

torno de qualquer uma das caixas, especificar sua

largura e altura, ou adicionar uma cor de fundo.

Você também pode controlar o texto dentro de

uma caixa - por exemplo, a sua cor, tamanho e tipo

de letra utilizado.

estilos exemplo
caixas texto Específico

Largura e altura Typeface Cor Há também formas específicas em que

Fronteiras (cor, largura e estilo) cor e Tamanho você pode estilo certos elementos
imagens de fundo Posição na janela como listas, tabelas e formas.
do navegador. Itálico, negrito, maiúscula,
minúsculas, small-caps

APRESENTAÇÃO CSS 230

 CSS associa regras de estilo com
elementos HTML

CSS funciona associando regras com elementos HTML. Estas regras determinam como o conteúdo
de elementos especificados devem ser exibidos. Uma regra CSS contém duas partes: a seletor e uma declaração
.

seletor

p{
font-family: Arial; }

Declaração

Esta regra indica que todos < p> seletores indicar qual o elemento a regra declarações indicar como os elementos
elementos deve ser mostrado no tipo de se aplica. A mesma regra pode ser referidos no seletor devem ser decorados.
letra Arial. aplicada a mais de um elemento se Declarações são divididos em duas partes
você separar os nomes de elementos (uma propriedade e um valor), e são
com vírgulas. separadas por dois pontos.

231 APRESENTAÇÃO CSS

 propriedades CSS afetar
como os elementos são
exibida

declarações CSS sentar dentro chaves e cada uma é composta de duas partes: a propriedade e uma
valor , Separados por dois pontos. Pode especificar várias propriedades em uma declaração, cada
um separado por um ponto e vírgula.

h1, h2, h3 {
família de fontes: Arial;
cor: amarelo; }

Propriedade Valor

Esta regra indica que todos < h1>, <h2> e < h3> propriedades indicar os aspectos do elemento valores especifique as configurações que deseja

elementos deve ser mostrado no tipo de que você deseja alterar. Por exemplo, a cor, usar para as propriedades escolhidas. Por

letra Arial, com uma cor amarela. tipo de letra, largura, altura e fronteira. exemplo, se você deseja especificar uma

propriedade de cor, em seguida, o valor é a cor

que você deseja que o texto nestes elementos

para ser.

APRESENTAÇÃO CSS 232

233 APRESENTAÇÃO CSS
 exemplo
Apresentando CSS

Aqui você pode ver uma página web simples que é denominado

usando CSS.

Este exemplo usa dois documentos: o arquivo HTML ( example.html)

e um arquivo CSS separado ( example.css). A quinta linha de HTML usa o
<Link> elemento para indicar onde o arquivo CSS está localizado.

Na página seguinte, você vai ver como regras CSS também podem ser colocados em suas páginas

HTML e vamos discutir quando você pode querer fazer isso.

<! DOCTYPE html>

<html>
<Head>
<Title> Apresentando CSS </ title> <link href = tipo "css / example.css" =
"text / css"
rel = "stylesheet" /> </ head>
<body>

<H1> De Garden to Plate </ h1> <p> UMA < i> potager </ i> é um termo
francês para um
vegetal ornamental ou horta ... </ p> <h2> O que plantar </ h2> <p> As plantas são
escolhidos tanto pela sua funcionalidade

como para a sua cor e forma ... </ p> </ body> </ html>

body {
font-family: Arial, Verdana, sans-serif;} h1, h2 {

color: # ee3e80;} p {

color: # 665544;}

APRESENTAÇÃO CSS 234

 Usando CSS externo

<Link> capítulo-10 / utilizando-externo-css.html html

<! DOCTYPE html>

o < link> elemento pode ser usado em um <html>
documento HTML para dizer ao navegador onde <Head>
encontrar o arquivo CSS utilizado para o estilo <Title> Usando CSS externa </ title> <link href = tipo "css / styles.css" =
da página. É um elemento vazio (o que significa "text / css"
que não precisa de uma tag de fechamento), e rel = "stylesheet" /> </ head>
vive dentro do < head> elemento. Ele deve usar <body>
três atributos:

<H1> Batatas </ h1> <p> Existem dezenas de batata diferente

variedades. Eles são geralmente descritos como precoce, segundo

href
precoce e maincrop. </ p> </ body> </ html>
Isto especifica o caminho para o arquivo CSS (que

muitas vezes é colocado em uma pasta chamada css

ou estilos).

tipo
capítulo-10 / styles.css Css
Este atributo especifica o tipo de documento
que está sendo vinculado. O valor deve ser text body {
/ css. font-family: arial;
background-color: rgb (185179175);} h1 {

rel
cor: rgb (255,255,255);}
Isto especifica a relação entre a página
HTML eo arquivo que está vinculado.
O valor deve ser stylesheet quando liga
para um arquivo CSS. Resultado

Uma página HTML pode usar mais do que

uma folha de estilo CSS. Para fazer isso, ele

poderia ter um < link>

elemento para cada arquivo CSS que utiliza. Por

exemplo, alguns autores usam um arquivo CSS

para controlar a apresentação (tais como fontes

e cores) e um segundo para controlar o layout.

235 APRESENTAÇÃO CSS

 Usando Interno CSS
artigo

html + Css capítulo-10 / utilizando-interno-css.html

<Style>
<! DOCTYPE html>
<html> Você também pode incluir regras CSS dentro de

<Head> uma página HTML, colocando-os dentro de um < style>

<Title> Usando CSS Interno </ title> <style type = "text elemento, que normalmente fica no interior da

/ css">
body { <Head> elemento da página.
font-family: arial;
background-color: rgb (185179175);} h1 { o < style> elemento deve usar o tipo atributo
para indicar que os estilos são
cor: rgb (255,255,255);} especificadas em CSS. O valor deve ser text
</ Style> </ / css.
head> <body>

<H1> Batatas </ h1> <p> Existem dezenas de batata diferente Ao construir um site com mais de uma
página, você deve usar uma folha de estilo
variedades. Eles são geralmente descritos como precoce, segundo CSS externa. Este:
precoce e maincrop. </ p> </ body> </ html>
● Permite que todas as páginas para usar o

regras de estilo mesmos (em vez de

repeti-las em cada página).

● Mantém o conteúdo separado

da aparência da página.
Resultado
● Significa que você pode mudar o
estilos utilizados em todas as páginas,
alterando apenas um arquivo (em vez de
cada página individual).

Em HTML 4 e XHTML de Transição, você que apareceu dentro do valor do atributo porque você pode vê-lo usado no código
também pode usar um estilo atributo na só seria aplicável a esse elemento. Você antigo. Aqui está um exemplo que muda a
maioria dos elementos que aparecem no deve evitar usar esse atributo em qualquer cor do texto em um parágrafo único
corpo de uma página. As regras CSS novo site, mas eu mencioná-lo aqui vermelho:
<P style = "color: red;">

APRESENTAÇÃO CSS 236 236

 seletores CSS

Há muitos tipos diferentes de seletor CSS

capítulo-10 / css-selectors.html html
que permitem direcionar regras para
elementos específicos em um documento <! DOCTYPE html>
HTML. <html>
<Head>
A tabela na página ao lado apresenta <Title> CSS seletores </ title> </ head> <body>
os seletores CSS mais comumente
usados.
<H1 id = "top"> Calendário Kitchen Garden </ h1> <p id = "introdução"> Aqui
Nesta página, há um arquivo HTML para você pode ler o nosso
demonstrar que elementos estes guia prático sobre o que fazer quando. </ p> <h2> Primavera </ h2>
seletores CSS seria aplicável a. <ul>

<Li> <a href="mulch.html">

seletores CSS são case sensitive, então eles devem camas vegetais mulch Primavera </ a> </ li> <li> <a
coincidir com nomes de elementos e valores de href="potato.html">
atributos exatamente. Planta fora batata primor </ a> </ li> <li> <a
href="tomato.html">
Semear sementes de tomate </ a> </ li>
Há alguns seletores mais avançados <li> <a href="beet.html">
que permitem selecionar elementos com Semear sementes de beterraba </ a> </ li>

base em atributos e seus valores, que <li> <a href="zucchini.html">

você vai ver na página 292. Semear sementes de abobrinha </ a> </ li>
<li> <a href="rhubarb.html">
flores ruibarbo Deadhead </ a> </ li>
IE 7 foi a primeira versão do IE para apoiar os </ Ul> <p class = "note">
dois últimos seletores na tabela (os seletores

irmão), pelo que a sua utilização é menos Esta página foi escrita por
comum do que os outros seletores mostrados <a href="mailto:[email protected]">
aqui. [email protected] </ a> para
<a href="http://www.example.org"> Exemplo </ a> .
</ P>
<p>
<a href="#top"> Topo da página </ a> </ p> </
body> </ html>

237 APRESENTAÇÃO CSS

seletor Significado exemplo

universal Selector Aplica-se a todos os elementos no * {}

documento Alvos todos os elementos na página

tipo de seletor Jogos nomes de elementos h1, h2, h3 {}

Alvos do < h1>, <h2> e < h3>
elementos

classe Selector Jogos um elemento cujo . Nota {}

classe atributo tem um valor que Alvos qualquer elemento cujo classe

corresponda ao especificado após o atributo tem um valor de Nota

período (ou ponto final) símbolo p.note {}

Alvos única < p> elementos cuja classe
atributo tem um valor de Nota

seletor id Jogos um elemento cujo # introdução {}

identidade atributo tem um valor que Tem como alvo o elemento cuja

corresponde ao especificado após o símbolo identidade atributo tem um valor de

de libra ou de hash introdução

criança Selector Jogos um elemento que é filho li> a {}

direto de outro Alvos qualquer < a> elementos que são

filhos de um < li> elemento (mas não outros
< a> elementos na página)

descendente Selector Jogos um elemento que é um descendente de pa {}

um outro elemento especificado (e não apenas Alvos qualquer < a> elementos que ficam

um filho direto do elemento) dentro de um < p> elemento, mesmo se há

outros elementos aninhados entre eles

Selector relacionados Corresponder a um elemento que é o h1 + p {}

adjacentes próximo irmão de outro Metas a primeira < p> elemento após qualquer

< h1> elemento (mas não outros < p> elementos)

irmão em geral Selector Corresponde a um elemento que é um h1 ~ p {}

irmão de outra, embora isso não tem que Se você tivesse dois < p> elementos que são

ser o elemento directamente precedente irmãos de uma < h1> elemento, esta regra se
aplica a ambos

APRESENTAÇÃO CSS 238

 como o CSS regras cascata

Se houver dois ou mais regras que se

capítulo-10 / cascade.html html
aplicam ao mesmo elemento, é
importante compreender que terá <H1> Batatas </ h1> <p id = "intro"> tem < i> dezenas </ i> de diferente
precedência.
<B> batata </ b> variedades. </ p> <p> Eles são geralmente descritos como precoce,
última regra segundo precoce
Se os dois seletores são idênticos, o e batatas maincrop. </ p>
último dos dois terá precedência. Aqui
você pode ver o segundo Eu selector tem
precedência sobre o primeiro.
Css

*{
especificidade font-family: Arial, Verdana, sans-serif;} h1 {
Se um seletor é mais específico do que
os outros, a regra mais específica terá font-family: "Courier New", monospace;} i {
precedência sobre os mais gerais. Neste
exemplo: color: green;} i {

color: red;} b {
h1 é mais específico do que *

pb é mais específico do que pp # introdução é Cor: Rosa;} {pb

mais específico do que p

Cor: azul importante;} {pb

Importante
Você pode adicionar ! importante depois de qualquer cor: violeta;} p #
valor de propriedade para indicar que ele deve ser introdução {
considerado mais importante do que outras regras tamanho da fonte: 100%; p} {

que se aplicam ao mesmo elemento.

fonte de tamanho: 75%;}

Entender como regras CSS cascata significa que

você pode escrever folhas de estilo mais simples

Resultado
porque você pode criar regras genéricas que se

aplicam à maioria dos elementos e, em seguida,

substituir as propriedades de elementos individuais

que precisam aparecer de forma diferente.

239 APRESENTAÇÃO CSS

 Herança
artigo

Se você especificar o família de fontes

html capítulo-10 / inheritance.html
ou cor propriedades no
<Div class = "página"> <Body> elemento, que será aplicada a maioria

<H1> Batatas </ h1> <p> Existem dezenas de batata diferente dos elementos filhos. Isso ocorre porque o
valor da
variedades. </ p> <p> Eles são geralmente descritos como precoce, família de fontes propriedade é

segundo herdado por elementos filhos. Conserva-o de ter

precoces e maincrop batatas. </ p> </ div> que aplicar essas propriedades para o maior

número de elementos (e os resultados em folhas

de estilo mais simples).

Css
Você pode comparar isso com o
body { cor de fundo ou
font-family: Arial, Verdana, sans-serif; color: # 665544; fronteira propriedades; eles são não herdado por

padding: 10px;} elementos filhos. Se estes foram herdados por

todos os elementos filhos, em seguida, a página

. página { pode parecer bastante confuso.

border: 1px solid # 665544;

background-color: #efefef; padding:
herdar;} Você pode forçar um monte de propriedades

para herdar valores de seus elementos pai

usando

herdar para o valor das propriedades.

Resultado
Neste exemplo, a
<Div> com um elemento classe

chamado página herda o tamanho

preenchimento da regra CSS que se aplica
ao < body> elemento.

APRESENTAÇÃO CSS 240 240

 Por que usar externo folhas de
estilo?

Ao construir um site, existem várias vantagens para colocar suas regras CSS em uma folha
de estilo separada.

Todas as suas páginas da web podem Portanto, uma vez que o usuário tenha a folha de estilo um CSS, em vez de
compartilhar a mesma folha de estilo. Isto é baixado a folha de estilo CSS, o resto do site alterar as regras de CSS em cada página.
conseguido usando a < link> irá carregar mais rápido. Se você quiser fazer O código HTML será mais fácil de ler e
elemento em cada página HTML do seu site uma alteração em como seu site aparece, editar porque não tem muitas regras CSS
o link para o mesmo documento CSS. Isto você só precisa editar o arquivo CSS e todas no mesmo documento. É geralmente
significa que o mesmo código não precisa as suas páginas serão atualizadas. Por considerada uma boa prática para ter o
ser repetido em cada página (o que resulta exemplo, você pode mudar o estilo de cada < h1> conteúdo do site separado das regras que
em menos código e páginas HTML elemento por alteração determinam como ele aparece.
menores).

Às vezes, você pode considerar a colocação de regras CSS na mesma página que o seu código HTML.

Se você está apenas criando uma única Se você tem uma página que requer algumas regras A maioria dos exemplos deste livro
página, você pode decidir colocar as regras no adicionais (que não são usados ​pelo resto do site), coloque as regras CSS no
mesmo arquivo para manter tudo em um só você pode considerar o uso de CSS na mesma <Head> do documento (usando o < style> elemento),

lugar. (No entanto, muitos autores consideram página. (Mais uma vez, a maioria dos autores em vez de um documento separado. Isto é
que uma melhor prática para manter o CSS em consideram que uma melhor prática para manter simplesmente para salvar você abrir dois
um arquivo separado.) todas as regras CSS em um arquivo separado.) arquivos para ver como os exemplos CSS
trabalhar.

241 APRESENTAÇÃO CSS

 Diferentes versões de CSS &
navegador peculiaridades

CSS1 foi lançado em 1996 e CSS2 seguido dois anos mais tarde. Trabalho sobre CSS3 tem sido
contínuo, mas os principais navegadores já começaram a implementá-lo.

Da mesma forma que houve várias Browsers não implementar todos os recursos Isso é mencionado quando se é susceptível de

versões do HTML, também houve CSS ao mesmo tempo, assim que alguns afectar-lhe, juntamente com as notas onde as

diferentes versões de CSS. navegadores mais antigos não suportam cada propriedades CSS pode não se comportar

propriedade. conforme o esperado.

Qualquer usuário experiente de CSS irá dizer-lhe que alguns navegadores exibir algumas das

propriedades CSS de uma forma inesperada. Mas encontrar e esmagar esses erros é fácil quando você

sabe como ...

Antes de lançar qualquer novo site, é importante Usando essas ferramentas, é uma boa idéia Alguns bugs do navegador comuns são

testá-lo em mais de um navegador, porque não para verificar o site em diferentes sistemas discutidos neste livro, mas há muitos bugs

pode haver pequenas diferenças na forma como operacionais (PC, Mac e Linux) e em versões menores que ocorrem apenas em raras

os navegadores exibir as páginas. mais antigas dos principais navegadores, bem situações, ou em navegadores antigos que

como versões recentes. poucas pessoas usam.

Você não precisa de lotes de computadores Se você se deparar com um bug CSS, você pode

para testar o seu site, uma vez que existem Quando você olha para o seu site em mais de usar o seu motor de busca favorito para tentar

ferramentas online para mostrar o que uma um navegador, você pode descobrir que encontrar uma solução. Ou você pode verificar

página parece em vários navegadores: alguns elementos em sua página não olha esses sites:

como você espera que eles.

PositionIsEverything.net
BrowserCam.com QuirksMode.org
BrowserLab.Adobe.com Quando uma propriedade CSS não
BrowserShots.org exibe como esperado, é geralmente
CrossBrowserTesting.com referida como uma
peculiaridade navegador ou bug CSS.

APRESENTAÇÃO CSS 242

 resumo
Apresentando CSS

X CSS trata cada elemento HTML como se ele aparece dentro

sua própria caixa e usa regras para indicar como esse elemento

deve olhar.

X Regras são feitas de seletores (que especificar o

elementos a regra se aplica) e declarações (que indicam o que estes

elementos deve ser semelhante). Diferentes tipos de seletores permitem

X que você direcionar a sua

regras em diferentes elementos.

X As declarações são feitas de duas partes: as propriedades

do elemento que você quer mudar, e os valores dessas propriedades.

Por exemplo, a propriedade font-family define a escolha da fonte, eo

valor arial especifica Arial como a fonte preferida. regras CSS

geralmente aparecem em um documento separado,

embora possam aparecer em uma página HTML.

 11
Cor

X Como especificar cores

X terminologia de cor e contraste
X Cor de fundo
 A cor pode realmente trazer suas páginas à vida.

Neste capítulo, vamos olhar para:

● Como especificar cores, uma vez que existem três maneiras comuns em
que você pode indicar sua escolha de cores (mais formas extra
disponibilizado em CSS3)

● terminologia de cor, uma vez que existem alguns termos que são muito
útil para entender quando se trata de cores picking

● Contraste, e garantir que o seu texto é legível

● cores de fundo para trás, quer a sua página inteira ou

partes de uma página

O que você vai aprender sobre cores neste capítulo será então utilizada nos
capítulos seguintes quando se trata de olhar para as cores de texto e caixas em
CSS.

247 COLOR
COR 248
 Cor do primeiro plano
cor

o cor propriedade permite especificar a cor do

capítulo-11 / primeiro plano-color.html Css
texto dentro de um elemento. Você pode
especificar qualquer cor em CSS em uma de / * Nome da cor * /
três maneiras: h1 {
Cor: DarkCyan;}
valores RGB / * Código hexadecimal * /

Estes expressam cores em termos de h2 {

quantidade de vermelho, verde e azul são color: # ee3e80;}
usados ​para fazer as pazes. Por exemplo: RGB / * Valor rgb * /
(100,100,90) p{
cor: RGB (100,100,90);}
Códigos hexadecimais

Estes são códigos de seis dígitos que

representam a quantidade de vermelho, verde

Resultado
e azul em uma cor, precedido por uma libra ou

hash de sinal #. Por exemplo: # ee3e80

nomes de cores
Existem 147 nomes de cores pré-definidas

que são reconhecidos pelos navegadores.

Por exemplo:

DarkCyan

Nós olhamos para essas três maneiras

diferentes de especificar cores na próxima
página dupla.

CSS3 também introduziu outra maneira de Acima de cada regra CSS neste exemplo O uso de comentários podem ajudar você a
especificar cores chamado HSLA, que você você pode ver como CSS permite entender um arquivo CSS (e organizá-la,
vai encontrar perto do final deste capítulo, na adicionar comentários aos seus arquivos dividindo um longo documento em seções).
página 255-256. CSS. Qualquer coisa entre as * símbolos / Aqui, nós usamos os comentários para indicar
e * / símbolos não vai ser interpretado pelo qual o método é usado para especificar cada
navegador. Eles são mostradas a cinzento um dos diferentes tipos de cores.
acima.

249 COLOR
 cor de fundo artigo
cor de fundo

CSS trata cada elemento HTML como se

Css capítulo-11 / background-color.html
aparece em uma caixa, ea
body { cor de fundo propriedade define a cor
background-color: rgb (200200200);} h1 { do fundo para que a caixa.

background-color: DarkCyan;} h2 {
Você pode especificar sua escolha de cor de

background-color: # ee3e80;} p { fundo nas mesmas três maneiras que você pode

especificar cores de primeiro plano: os valores

background-color: white;} RGB, códigos hexadecimais e nomes de cores

(coberto na próxima página).

Resultado
Se você não especificar uma cor de
fundo, em seguida, o fundo é
transparente.

Por padrão, a maioria das janelas do

navegador tem um fundo branco, mas os

usuários do navegador pode definir uma cor

de fundo para suas janelas, por isso, se você

quer ter certeza de que o fundo é branco você

pode usar o

cor de fundo propriedade no < body> elemento.

Temos também utilizado o preenchimento

propriedade para separar o texto a partir

das bordas das caixas. Isto torna mais fácil
de ler e você vai aprender mais sobre este
imóvel, na página 313.

250 COR
COR 250
 compreensão Cor

Cada cor na tela do computador é criado pela mistura de quantidades de vermelho, verde e azul. Para

encontrar a cor que você quiser, você pode usar um seletor de cores.

monitores de computador são compostas de

milhares de pequenos quadrados chamados

pixels (se você olhar muito de perto para o

monitor que você deve ser capaz de vê-los).

Quando a tela não está ligado, é preto, porque

ele não está emitindo qualquer luz. Quando

ela está ligada, cada pixel pode ser uma cor

diferente, criando uma imagem.

A cor de cada pixel na tela é expressa em

termos de uma mistura de vermelho, verde
e azul - exatamente como em uma tela de
televisão.

Cor ferramentas de separação estão disponíveis

em programas de edição de imagem como o

Photoshop eo GIMP. Você pode ver os valores

RGB especificadas ao lado dos botões de rádio que

dizem R, G, B.

O valor hexadecimal é fornecida ao

lado do libra ou de hash

# símbolo. Há também uma boa cor

ferramenta escolhendo em:

colorschemedesigner.com

251 COR
Valores RGB códigos Hex nomes de cores

Os valores para vermelho, verde e azul valores hexadecimais representam valores As cores são representadas por nomes

são expressos como números entre 0 e para vermelho, verde e azul em código predefinidos. No entanto, eles são muito

255. hexadecimal. limitados em número.

RGB (102205170) # 66cdaa MediumAquaMarine

Esta cor é constituído pelos seguintes O valor do vermelho, 102, é expresso Existem 147 nomes de cores
valores: 102 vermelho verde 205 170 como 66 em código hexadecimal. A suportadas pelos navegadores (esta cor
azul 205 do verde é expressa como CD e a é MediumAquaMarine).
170 do azul equivale a aa. A maioria considera que isso seja uma paleta
de cores limitada, e é difícil lembrar o nome de
cada uma das cores para que (para além de
branco e preto) eles não são comumente
usados.

Matiz saturação Brilho

Hue está perto da ideia coloquial de cor. Saturação refere-se à quantidade de Brilho (ou "value") refere-se a quanto
Tecnicamente falando no entanto, uma cor cinza de uma cor. Na saturação o preto é uma cor. Com brilho
também pode ter saturação e brilho, bem máxima, não haveria cinza na cor. Na máximo, não haveria preto na cor. No
como matiz. saturação mínima, a cor seria brilho mínimo, a cor seria muito
principalmente cinza. escuro.

COR 252
 Contraste

Ao escolher primeiro plano e cores de fundo, é

importante para garantir que não há contraste suficiente
para que o texto seja legível.

baixo high Contraste

contraste Contrast médio

Texto é mais difícil de ler quando há Texto é mais fácil de ler quando há maior Por longos vãos de texto, reduzindo o
baixo contraste entre cores de fundo e contraste entre o fundo e as cores de contraste um pouco melhora a legibilidade.
de primeiro plano. primeiro plano.

A falta de contraste é especialmente um Se você quer que as pessoas a ler um monte de Você pode reduzir o contraste usando o
problema para as pessoas com deficiências texto em sua página, no entanto, em seguida, texto cinza escuro sobre um fundo branco ou
visuais e cegueira cor. muito contraste pode tornar mais difícil para ler um texto off-white em um fundo escuro.
também.

Ela também afeta aqueles com monitores

pobres e luz solar em suas telas (que é cada Se o texto é revertida para fora (a cor da luz em um fundo escuro), você pode

vez mais comum como as pessoas usam aumentar a altura entre linhas e o peso da fonte para torná-lo mais fácil de ler.
dispositivos portáteis ao ar livre).

Para verificar contraste existe uma ferramenta on-line acessível em: www.snook.ca/technical/colour_contrast/colour.html

253 COLOR
 Css3: opacidade
artigo
opacidade, rgba

CSS3 introduz o opacidade

Css capítulo-11 / opacity.html
propriedade que permite especificar a
p.one { opacidade de um elemento e qualquer um
background-color: rgb (0,0,0); opacidade: dos seus elementos filho. O valor é um
0,5;} número entre
p.two { 0.0 e 1,0 ( por isso um valor de 0,5

background-color: rgb (0,0,0); background-color: rgba é de 50% e opacidade 0,15 é de 15% de

(0,0,0,0.5);} opacidade).

o CSS3 rgba propriedade permite

especificar uma cor, assim como você faria
Resultado
com um valor RGB, mas acrescenta um
quarto valor para indicar opacidade. Este
valor é conhecido como um alfa valor e é um
número entre 0.0 e 1.0

(Portanto, um valor de 0,5 é de 50% e opacidade 0,15 é

de 15% de opacidade). o

rgba valor só irá afectar o elemento

sobre o qual é aplicada (não
elementos filho).

Porque alguns navegadores não reconhecer

cores RGBA, você pode oferecer um retorno
para que eles exibem uma cor sólida. Se há
duas regras que se aplicam ao mesmo
Resultado No navegador mais antigo
elemento, o último dos dois terá prioridade.
Para criar o fallback, você pode especificar
uma cor como um código hexadecimal, nome
da cor ou o valor RGB, seguido pela regra de
que especifica um valor RGBA. Se o
navegador entende cores RGBA ele usará
essa regra. Se isso não acontecer, ele irá usar
o valor RGB.

No momento da escrita, o
opacidade e rgba propriedades são suportados

apenas pelos mais recentes navegadores.

254 COR
COR 254
 Cores HSL: Css3

CSS3 introduz uma maneira inteiramente nova e intuitiva para

especificar cores usando valores de matiz, saturação e leveza.

Matiz saturação leveza

Hue é a idéia coloquial de cor. Nas cores de HSL, a A saturação é a quantidade de cinza em uma Claridade é a quantidade de branco
tonalidade é frequentemente representado como cor. Saturação está representada como uma (luminosidade) ou preto (escuro) numa
um circulo de cor, onde o ângulo representa a cor, percentagem. 100% é a saturação completa e cor. Leveza está representada como
embora possa também ser mostrado como uma 0% é um tom de cinzento. uma percentagem. 0% leveza é preto,
barra deslizante com os valores de 0 a 360. 100% leveza é branco, e 50% leveza é
normal. Leveza é por vezes referido
como

luminosidade.

Por favor note que a leveza é um

conceito diferente de brilho. software de
design gráfico (como o Photoshop e
GIMP) tem seletores de cores que usam
matiz, saturação e brilho - mas o brilho
só acrescenta preto, enquanto leveza
oferece tanto branco e preto.

255 COR
 Css3: hsl & HSLA
artigo
hsl, HSLA

o hsl propriedade de cor foi introduzida no

Css capítulo-11 / hsla.html
CSS3, como uma forma alternativa de
body { especificar cores. O valor da propriedade
background-color: # C8C8C8; cor de fundo: HSL começa com as letras HSL, seguido por
(0,0%, 78%); p} { valores individuais dentro de parênteses
para:
background-color: #ffffff;
cor de fundo: HSLA (0100%, 100%, 0,5);}
matiz
Isto é expresso por um ângulo
(entre 0 e 360 ​graus).
Resultado

saturação
Isto é expresso como uma

percentagem.

leveza
Isto é expresso como uma percentagem com
0% sendo branco, 50% sendo normal, e
100%, sendo preto.

o HSLA propriedade de cor permite que você

especifique propriedades de cor usando
matiz, saturação e leveza como acima, e
adiciona um quarto valor que representa
transparência (assim como o rgba
Como os navegadores mais antigos não Isto fornece um fallback porque se há duas
reconhecem HSL e valores HSLA, é uma boa regras que se aplicam ao mesmo elemento propriedade). o uma apoia:
idéia para adicionar uma regra extra que em CSS, o último dos dois é sempre
especifica a cor usando um código hexadecimal, prioritária. Isto significa que se o navegador alfa
valor RGB, ou nome da cor. Este deve aparecer entende cores HSL e HSLA, ele usará essa Isto é expresso como um
regra; e se isso não acontecer, ele irá usar número entre 0 e 1.0.
antes a regra que usa o HSL ou valor a primeira regra. Por exemplo, 0,5 representa
HSLA. transparência de 50%, e 0,75
representa transparência 75%.

COLOR 256
256
257 COR
 exemplo
Cor

Este exemplo mostra uma escala de pH para demonstrar as diferentes

maneiras que as cores podem ser especificados usando CSS (usando

nomes de cores, códigos hexadecimais, RGB e HSL).

A regra para o < body> elemento define a cor padrão para todo o texto, bem como a cor de fundo
padrão para a página. Ambos usam nomes de cores.

A regra para o < h1> elemento define a cor do cabeçalho usando um código hexadecimal.
Existem dois valores para a cor de fundo propriedade do
<H1> elemento. A primeira fornece uma cor fallback usando um código hexadecimal eo segundo é um

valor HSLA para navegadores que suportam este método.

Cada ponto é mostrada com uma cor diferente para representar os diversos níveis de acidez ou
alcalinidade, e estes são especificados usando valores RGB.

O exemplo também usa uma propriedade chamada margem para diminuir a distância entre as caixas

de parágrafo, e uma propriedade chamada preenchimento para criar uma lacuna entre a borda das

caixas e o texto dentro deles. (Essas propriedades são cobertos em páginas 313-314.)

COR 258
 exemplo
Cor

<! DOCTYPE html>

<html>
<Head>
<Title> Cor </ title> <style type = "text /
css">
body {
background-color: prata; cor branca;
padding: 20px;

font-family: Arial, Verdana, sans-serif;} h1 {

background-color: #ffffff;
cor de fundo: HSLA (0100%, 100%, 0,5); color: # 64645A;
padding: herdar;} p {

padding: 5px;
margem: 0px;}
p.zero {
background-color: rgb (238,62,128);}
p.one {
background-color: rgb (244,90,139);}
p.two {
background-color: rgb (243106152);}
p.three {
background-color: rgb (244123166);}
p.four {
background-color: rgb (245140178);}
p.five {
background-color: rgb (246159192);}
p.six {
background-color: rgb (245176204);}
p.seven {
background-color: rgb (0.187.136);}
p.eight {
background-color: rgb (140202242);}
p.nine {
background-color: rgb (114193240);}

259 COLOR
 exemplo
Cor

p.ten {
background-color: rgb (84182237);}
p.eleven {
background-color: rgb (48170233);}
p.twelve {
background-color: rgb (0.160.230);}
p.thirteen {
background-color: rgb (0.149.226);}
p.fourteen {
background-color: rgb (0.136.221);}
</ Style> </
head> <body>

<H1> Escala de ph </ classe h1> <p = "quatorze"> 14,0 ALKALINE

MUITO </ p> <p class = "treze"> 13,0 </ classe p> <p = "doze"> 12,0 </ p>
<p class = "onze"> 11,0 </ p> <p class = "dez"> 10.0 </ classe p> <p =
"nove"> 9 </ classe p> <p = "oito"> 8 </ classe p> <p = "sete"> 7,0
NEUTRO </ classe p> <p = "seis"> 6 </ classe p> <p = "cinco"> 5 </ classe
p> <p = "quatro"> 4.0 </ classe p> <p = "três"> 3,0 </ classe p> <p =
"dois"> 2,0 </ p> <p class = "um"> 1.0 </ p> <p class = "zero"> 0.0 ACID
MUITO </ p> </ body> </ html>

COR 260
 resumo
Cor

X A cor não só traz o seu site para a vida, mas também ajuda

transmitir o clima e evoca reações. Existem três maneiras de

X especificar cores em CSS:

valores RGB, códigos hexadecimais e nomes de cores. seletores de cores

X pode ajudar a encontrar a cor desejada.

X É importante garantir que haja contraste suficiente

entre qualquer texto e a cor de fundo (caso contrário as pessoas não

será capaz de ler o seu conteúdo). CSS3 introduziu um valor extra para

X cores RGB para

indicam opacidade. É conhecido como rgba.

X CSS3 também permite que você especifique cores como valores HSL,

com um valor de opacidade opcional. É conhecido como HSLA.

 12
Texto

X Tamanho e tipo de letra do texto

X Negrito, itálico, capitais, sublinhados
X Espaçamento entre linhas, palavras e letras
 As propriedades que permitem que você controle a
aparência do texto pode ser dividida em dois grupos:

● Aquelas que afetam diretamente a fonte e sua aparência

(Incluindo o tipo de letra, se é regular, negrito ou itálico, e o tamanho
do texto)

● Aqueles que teria o mesmo efeito sobre texto não importa

o tipo de letra que você estava usando (incluindo a cor de texto eo
espaçamento entre palavras e letras)

A formatação do texto pode ter um efeito significativo sobre a forma legível suas

páginas são. Ao olharmos através destas propriedades que eu também lhe dará

algumas dicas de design sobre como mostrar o seu tipo.

265 TEXTO
TEXTO
266
 Terminologia Typeface

Serif Sem serifa monoSpace

Serif fontes têm detalhes adicionais sobre as Sans-serif fontes têm reta termina às Cada letra de uma fonte de espaçamento fixo

extremidades dos principais traços das letras. letras, e, portanto, têm um design (ou de largura fixa) é a mesma largura. (Fontes

Estes detalhes são conhecidos como serifas. muito mais limpo. não-Monospace têm diferentes larguras.)

Eu estou
Eu estou
Eu estou
Na impressão, fontes com serifa eram Telas têm uma resolução inferior à impressão. Monoespaçada são comumente usados ​para

tradicionalmente utilizadas por longos trechos de Então, se o texto é pequeno, fontes sans-serif código porque eles se alinham muito bem,

texto porque eram consideradas mais fáceis de pode ser mais claro para ler. tornando o texto mais fácil de seguir.

ler.

267 TEXTO
o xyz
ascendente acima da altura tampão
topo altura tampão de cartas planas

altura x altura da letra x

linha de base as letras sentar-se

descida abaixo da linha de base

Peso Estilo Esticam

Leve Normal Condensado

Médio itálico Regular
Negrito Oblíquo estendido
Preto

O peso da fonte não só acrescenta ênfase mas fontes em itálico têm um aspecto cursiva de Em versões condensados ​(ou estreitas) do
também pode afetar a quantidade de espaço algumas das letras. estilos de fonte Oblique tipo de letra, letras são mais finos e mais
em branco e contraste em uma página. tomar o estilo normal e colocá-lo em um juntos. Em versões expandidas eles são
ângulo. mais grossos e mais distantes.

TEXTO 268
 Escolhendo um tipo de letra para o
seu site

Ao escolher um tipo de Serif Sem serifa

letra, é importante
Serif fontes têm detalhes adicionais sobre o Sans-serif fontes têm termina direto
compreender que um fim dos principais traços das letras. para cartas e, portanto, têm um design
muito mais limpo.
navegador, geralmente, só
exibi-lo se ele estiver
exemplos: exemplos:
instalado no computador do
usuário. Georgia Arial

vezes Verdana

Times New Roman helvética

Como resultado, os sites geralmente usam um pequeno conjunto de tipos de letra que estão instalados na

maioria dos computadores (mostrado acima). Existem algumas técnicas para contornar esta limitação (que

são cobertos em páginas 271-272).

É possível especificar mais de um tipo de letra e criar uma ordem de preferência (no caso do
usuário não tem a sua primeira escolha de tipo de letra instalado). Isso às vezes é referida
como uma pilha fonte.

269 TEXTO
monoSpace cursivo fantasia

Cada letra em um carácter tipo fontes cursivas ou têm traços de fontes de fantasia são geralmente fontes

monospace é a mesma largura. (Fontes união ou outras características decorativas e são frequentemente utilizados por

não-Monospace têm diferentes cursiva, como estilos de escrita. títulos. Eles não são projetados para longas corpos

larguras.) de texto.

exemplos: exemplos: exemplos:

Correio Cómica Sans MS Impacto

Courier New Monotype Corsiva Haettenschweiler

Navegadores são supostos para suportar, pelo menos, uma fonte de cada um dos grupos
acima. Por esta razão, é comum adicionar o nome da fonte genérico após sua escolha
preferida de tipos.

Por exemplo, se você queria tipo serif, você pode escrever o seguinte:
font-family: Georgia, Times, serif;

TEXTO 270
 Técnicas que oferecem uma maior
escolha de caracteres tipográficos

Existem várias maneiras de usar diferentes daqueles listados na página anterior fontes. No entanto,
fontes estão sujeitos a direitos de autor, de modo que as técnicas que você pode escolher são
limitados pelas respectivas licenças.

família de fontes Tipo de letra baseada em serviços

font-face

computador do usuário precisa do tipo de letra CSS especifica onde uma fonte pode ser serviços comerciais dar aos usuários acesso a

instalado. CSS é usado para especificar o tipo de baixado a partir se não estiver instalado no uma ampla gama de fontes usando @ Tipo de

letra. computador. letra.

cobriam

páginas 273-274 páginas 277-278 páginas 277-278

problemas

Há uma escolha limitada de tipos que a O usuário tem que baixar o arquivo de Há uma taxa constante para cobrir licenças

maioria dos usuários não instalados. fonte, o que pode retardar o carregamento pagas para fundições de fonte.

da página web.

licenciamento

Você não está distribuindo o tipo de letra, então não A licença para usar a fonte deve permitir a O serviço cuida das questões de
há nenhum problema de licenciamento. sua distribuição usando licenciamento com as pessoas que
@Tipo de letra. fizeram a fonte.

escolha de caracteres tipográficos

Há uma escolha limitada porque a fonte precisa Escolha é limitada porque alguns tipos de Cada serviço oferece uma escolha diferente

ser instalado nos computadores dos usuários. letra podem ser livremente distribuídos de fontes com base em seus acordos com

desta forma. fundições de fonte.

Adequado para qualquer comprimento do texto

271 TEXTO
Se você projetar em um Mac, é importante para verificar o que as fontes olhar como em um PC, porque PCs

pode render tipo menos problemas. Mas se você projetar em um PC, em seguida, ele deve olhar bem em um

Mac.

imagens sifr Cufon

Você pode criar um gráfico que contém o texto A fonte é incorporado em um filme do Flash Cufon oferece funcionalidade semelhante para
como você deseja que ele apareça em um e JavaScript substitui texto HTML sIFR. Ele usa JavaScript para criar tanto uma
carácter tipo diferente. especificado com uma versão em flash do SVG ou VML versão do texto.
mesmo.

cobriam

Páginas 99-100 e 109-113 Veja o site para mais detalhes Veja o site para mais detalhes

problemas

As pessoas que utilizam leitores de tela irá Este método só funciona se o usuário Requer JavaScript para ser ativado. Além disso, os

contar com a alt texto para saber o que é dito. tem Flash e Javascript habilitado em seu usuários não podem selecionar texto, eo texto não

dispositivo. pode mudar quando um usuário passa sobre ele.

licenciamento

Você pode usar qualquer tipo de letra que você Muitos fabricantes comerciais de fontes Tal como acontece com sIFR, alguns fabricantes

tem uma licença para usar no seu computador permitir que esta técnica, embora você pode de carácter tipo permitir o uso de suas fontes

(porque você não está distribuindo o tipo de letra). precisar de pagar por uma licença de uso com Cufón, mas você precisa verificar a licença.

web extra.

escolha de caracteres tipográficos

Muito ampla escolha, porque você pode usar Este método fornece uma grande quantidade Um pouco menos escolha do que para sIFR, como

qualquer tipo de letra que você tem uma licença de escolha, porque muitos dos principais alguns fabricantes de tipo de letra não são tão

para. fabricantes typeface permitir este tipo de uso. interessado em esta técnica.

Não é adequado para longos trechos de texto

TEXTO272
 especificando caracteres tipográficos
família de fontes

o família de fontes propriedade permite que você

capítulo-12 / font-family.html html + css
especifique o tipo de letra que deve ser usado

para qualquer texto dentro do elemento (s) ao <! DOCTYPE html>

qual uma regra CSS se aplica. <html>
<Head>
<Title> Família de fontes </ title> <style type
O valor dessa propriedade é o nome do = "text / css">
tipo de letra que você deseja usar. body {
font-family: Georgia, Times, serif;} h1, h2 {

As pessoas que estão visitando seu site font-family: Arial, Verdana, sans-serif;}
precisa do tipo de letra que você tenha . créditos {
especificado instalado em seu computador font-family: "Courier New", Courier,
para que ele seja exibido. espaçamento fixo;}

</ Style> </

head> <body>
Você pode especificar uma lista de fontes
separadas por vírgula para que, se o usuário <H1> Briards </ h1> <p class = "créditos"> por Ivy Duckett </ p>
não tem a sua primeira escolha de tipo de letra <p class = "intro"> o < a class = "raça"
instalado, o navegador pode tentar usar uma
fonte alternativa da lista. href = "http://en.wikipedia.org/wiki/ Briard"> briard </ a> , ou berger de
brie, é uma grande raça do cão, tradicionalmente usado como um pastor e
guardião de ovelhas ... </ p> </ body> </ html>
Também é comum para acabar com um nome

de fonte genérica para esse tipo de fonte (que

você viu nas páginas 269-270).

Se um nome de fonte é composta de mais de uma

resultado
palavra, ele deve ser colocado entre aspas duplas.

Designers sugerem páginas geralmente olhar

melhor se eles usam há mais de três fontes
em uma página.

Nós estaremos usando uma versão

estendida do HTML exibidas nesta página
para todos os exemplos neste capítulo.

273 TEXTO
 artigo
Tamanho do Tipo
tamanho da fonte

o tamanho da fonte propriedade permite que você

css capítulo-12 / font-size.html
especificar um tamanho para a fonte. Existem

body { várias formas de especificar o tamanho de uma

font-family: Arial, Verdana, sans-serif; font-size: 12px;} h1 { fonte. Os mais comuns são:

tamanho da fonte: 200%;} {h2 píxeis

Pixels são comumente usados ​porque eles
font-size: 1.3em;} permitem que os web designers controle muito
preciso sobre a quantidade de espaço a sua
texto ocupa. O número de pixels é seguido
pelas letras px.
resultado

percentagens
O tamanho padrão do texto em navegadores
é 16px. Assim, um tamanho de 75% seria o
equivalente de 12 pixels, e 200% seria 32px.

Se você criar uma regra para fazer todo o texto

dentro do < body> elemento a ser de 75% do

tamanho padrão (para torná-lo 12px), e em

seguida, especifique uma outra regra que indica

o conteúdo de um elemento dentro do

<Body> elemento deve ser 75% o tamanho, será

9px (75% do tamanho da fonte 12 pixels).

EMS
Um em é equivalente à largura de uma
letra m.

Vamos olhar para estas medições em

maiores detalhes na próxima página.

TEXT 274
TEXTO 274
 escalas do tipo

Você deve ter notado que programas como Word, Photoshop e

InDesign oferecem os mesmos tamanhos de texto.

8 pt
Isso é porque eles são definidos de acordo O tamanho padrão do texto em um navegador

com uma escala ou proporção que foi é de 16 pixels. Então, se você usar
9 pt

desenvolvido por tipógrafos europeus no percentagens ou ems, você calcular o tamanho 10 pt

século XVI. do texto que deseja com base no tamanho 11 pt
padrão do texto usado nos navegadores. Por

exemplo, você poderia escalar até 12 pixels

12 pt
Considera-se que esta escala para o para cópia de corpo e escala até 24 pixels para 14 pt
tipo é agradável aos olhos e tem, as rubricas.

portanto, mudou pouco nos últimos 18 pt

24 pt
400 anos.

36 pt
Por esta razão, quando você está Recentemente, alguns web designers

projetando páginas, usando tamanhos de começaram a deixar o corpo do texto no

esta escala irá ajudá-los parecer mais tamanho padrão de 16 pixels e ajustar os

48 pt
atraente. outros tamanhos de fonte usando uma escala

que mantém as proporções relativas de um

Na próxima página, você pode ver como presente.

alcançar esta escala utilizando pixels,

60 pt
percentagens e ems.
Quando você vê primeiro corpo de texto em 16

designers de mídia impressa muitas vezes se pixels, pode parecer muito grande. Uma vez que

referem ao tamanho do texto em termos de pontos você se acostumar com o tipo maior, no entanto, a

72 pt
em vez de pixels (daí o uso de pt na escala à maioria das pessoas acham que é muito mais fácil

direita). Um pixel equivale a cerca de um ponto, de ler; e voltar para uma página onde principal tipo

porque um ponto corresponde a 1/72 de polegada, é de 12 pixels, muitas vezes, em seguida, olhar

ea maioria dos monitores de computador tem uma muito pequena.

resolução de 72 pontos por polegada.

275 TEXTO
 Unidades de Tipo Tamanho

píxeis percentagens EMS

Escala de pixels

h2 h1 1.5em
corpo 24px corpo 200%
corpo 1.3em
h3 h2 18px h3 h2 150%
= = h3 p 1.17em
h1 14px h1 117%
100%
12px 75%
0.75em

Dezesseis pixels escala de doze

h2 h1 2em
corpo 32px corpo 200%
corpo 1.5em
h3 h2 24px h3 h2 150%
= = h3 p 1.125em
h1 18px h1 133%
100%
16px 100%
1em

Ajuste o tamanho da fonte em pixels é a O tamanho padrão do texto em um navegador da Ems permitem alterar o tamanho do texto em

melhor maneira de garantir que o tipo aparece web é de 16 pixels. Usando percentuais desse relação ao tamanho do texto no elemento pai.

no tamanho pretendido (porque percentagens montante, você pode criar uma escala em que o Uma vez que o tamanho padrão do texto em

e ems são mais propensos a variar se um tamanho do texto padrão é 12 pixels, e os títulos navegadores web é de 16 pixels, você pode usar

usuário alterou o tamanho padrão do texto no são dimensionados em relação a este. regras semelhantes às mostradas para

seu navegador). porcentagens.

Pixels são relativos à resolução da tela, de É possível que os usuários alterem o Como os usuários podem alterar o tamanho
modo que o mesmo tamanho tipo ficará tamanho padrão do texto em seus padrão de texto em seu navegador, as
maior quando uma tela tem uma resolução navegadores da web. Se eles fizeram isso, as fontes poderiam parecer maior (ou menor)
de 800x600 do que seria quando é fontes serão exibidos na mesma escala que o do que o designer pretendia.
1280x800. designer pretendia, mas em um tamanho
maior.
O Extra p regra acima é ajudar o Internet
Você também pode usar pt para tamanhos de Explorer 6 e 7 de exibir as fontes no
ponto, em vez de px para pixels, mas você só deve tamanho certo. Sem esta regra extra, IE6
fazer isso ao criar folhas de estilo para versões e IE7 exagerar os tamanhos relativos de
amigável da impressora de páginas. outro texto.

TEXTO 276
 mais escolha da pia batismal
@Tipo de letra

@Tipo de letra permite a utilização de uma fonte,

capítulo-12 / font-face.html css
mesmo se ele não estiver instalado no

computador da navegação pessoa, permitindo @Tipo de letra {

que você especifique um caminho para uma cópia font-family: 'ChunkFiveRegular'; src: url ( 'fontes /
da fonte, que serão baixados se ele não estiver chunkfive.eot');} h1, h2 {
na máquina do usuário.

font-family: ChunkFiveRegular, Georgia, serif;}

Como esta técnica permite que uma versão

da fonte a ser baixado para o computador do
resultado
usuário, é importante que a licença para a
fonte permite que ele seja usado desta
forma.

Você adiciona a fonte para sua folha de estilo

usando o @ Tipo de letra

governar, como mostrado à direita.

família de fontes
Isso especifica o nome da fonte. Este
nome pode ser usado como um valor da família
de fontes
propriedade no resto da folha de estilo
(como mostrado na regra para o < h1> e < h2> Muitos fabricantes de tipo de letra não permitem Existem alguns sites que lhe dão acesso para
elementos). que você use suas fontes dessa maneira, mas há usar fontes comerciais, porque eles
fontes de código aberto que você pode usar negociado permissão para deixar seus
clientes usar essas fontes para uma taxa:
src
livremente. Você pode encontrar listas de-los em:

Este especifica o caminho para a fonte. Para que

esta técnica para trabalhar em todos os

www.fontsquirrel.com www.typekit.com
navegadores, você provavelmente precisará
www.fontex.org www.kernest.com
especificar caminhos para algumas versões
www.openfontlibrary.org www.fontspring.com
diferentes da fonte, como mostrado na página

seguinte.
Ao olhar para fontes sobre esses sites, O Google também oferece fontes de código aberto.

ainda é importante verificar contrato de Em vez de adicionar o @ Tipo de letra governar a sua

formato licença da fonte porque algumas fontes são própria folha de estilo, você link para um arquivo

Isso especifica o formato que a fonte é apenas gratuito para uso pessoal (isto é, CSS e arquivos de fonte em seus servidores:

fornecido em. (É discutido em detalhes na não para uso em sites comerciais).

próxima página.) www.google.com/webfonts

277 TEXTO
 Compreenderartigo
formatos
de fonte

Diferentes navegadores suportam formatos

css capítulo-12 / entendimento-font-formats.html
diferentes para fontes (da mesma forma que

@Tipo de letra { eles suportam diferentes formatos de áudio e

font-family: 'ChunkFiveRegular'; src: url ( 'fonts / vídeo), então você precisará fornecer a fonte em

chunkfive.eot'); src: url ( '? fonts / chunkfive.eot #iefix') diversas variações para alcançar todos os

navegadores.

format ( 'embedded-OpenType'),
url ( 'fonts / chunkfive.woff') formato ( 'woff'), url formato ( 'fonts /
chunkfive.ttf') ( 'TrueType'), Se você não tem todos esses formatos para
a sua fonte, você pode carregar o tipo de
url ( 'fonts / chunkfive.svg # ChunkFiveRegular') formato ( 'svg');} letra para um site chamado FontSquirrel
onde irá convertê-lo para você:

navegador formato www.fontsquirrel.com/ fontface /

gerador
EOT woff ttf / OTF SVG

Cromo (tudo) Font Squirrel também fornece o

código CSS para o
cromo 6+ Firefox
@Tipo de letra regra. Isto é muito útil
3,5 Firefox 3.6+ porque, quando você está lidando
com vários formatos de fonte, o src e formato
IE 5-8 IE 9+

Opera 10+ Safari propriedades do @ Tipo de letra

regra pode ficar bastante complicado.
3.1+ iOS <4,2

iOS 4.2+ Você pode ver um exemplo de uma mais

complicada @ Tipo de letra
pronunciar-se sobre a esquerda.

Os vários formatos de fonte deve aparecer no

seu código na seguinte ordem:

Porque o navegador precisa baixar o arquivo minimizar esse comportamento são de excluir
1: EOT
de fonte, a fim de mostrá-lo, os usuários qualquer glifos desnecessários a partir da fonte e / ou

poderão ver algo conhecido como um flash de hospedar a fonte em um Content Delivery Network 2: woff
conteúdo sem estilo (FOUC) ou Flash de texto (um tipo especial de hospedagem na web que
3: ttf / OTF
sem estilo (FOUT). Duas coisas que você oferece uma entrega mais rápida de arquivos).

pode fazer para tentar 4: SVG

TEXT 278
TEXTO 278
 negrito
espessura da fonte

o espessura da fonte propriedade permite

capítulo-12 / font-weight.html css
criar texto em negrito. Existem dois
valores que esta propriedade comumente . créditos {font-weight: bold;}
leva:

normal
Isso faz com que o texto apareça em um peso resultado
normal.

negrito
Isso faz com que o texto apareça em negrito.

Neste exemplo, você pode ver que o

elemento cuja classe
atributo tem um valor de créditos
foi em negrito.

Você pode se perguntar porque é que há um

peso normal. Isso porque, se, por exemplo, você

criou uma regra para o < body> elemento

indicando que todo o texto dentro do corpo deve

aparecer em negrito, você pode precisar de uma

opção que permite que o texto em certos casos

a aparecer peso normal. Por isso, é

essencialmente usado como um "switch off".

279 TEXTO
 artigo
itálico
estilo de fonte

Se você quiser criar um texto em itálico, você

css capítulo-12 / font-style.html
pode usar o estilo de fonte

. créditos { propriedade. Existem três valores dessa

font-style: italic;} propriedade pode tomar:

normal
resultado Isso faz com que o texto apareça em um estilo

normal (em oposição ao itálico ou oblíqua).

itálico
Isso faz com que o texto apareça em itálico.

oblíquo
Isso faz com que o texto apareça

oblíqua.

Neste exemplo, você pode ver que os

créditos foram em itálico.

fontes em itálico foram versões da fonte

com base na caligrafia tradicional estilizado,
enquanto uma versão oblíqua levaria a
versão normal e colocá-lo em um ângulo.

Não é incomum para o navegador para não

encontrar uma versão em itálico de uma fonte, caso

em que ele vai usar um algoritmo para colocar a

versão normal do tipo em uma inclinação, o que

significa que uma grande quantidade de texto em

itálico on-line é realmente oblíqua .

TEXT 280
TEXTO280
 minúsculas letras
maiúsculas
text-transform
o text-transform propriedade é usada para
capítulo-12 / text-transform.html css
alterar o caso de texto dando-lhe um dos
seguintes valores: h1 {
text-transform: uppercase;} h2 {

text-transform: minúsculas;}
maiúscula
. créditos {
Isso faz com que o texto apareça
text-transform: capitalize;}
maiúsculas.

minúsculas
resultado
Isso faz com que o texto apareça em

minúsculas.

capitalizar
Isso faz com que a primeira letra de cada

palavra apareça em maiúscula.

Neste exemplo, o < h1>

elemento é maiúsculas, o < h2>
elemento é minúscula, e os créditos são
capitalizados. No HTML, a palavra por nos
créditos tinha uma minúscula b.

Se você fizer utilizar a opção maiúsculas,

vale a pena olhar para o letter-spacing propriedade
para aumentar a diferença entre cada letra
como mostrado na página

284. Isso ajudará a melhorar a

legibilidade.

281 TEXTO
 sublinhar e da greve
artigo
text-decoration

o text-decoration propriedade permite que

css capítulo-12 / text-decoration.html
você especifique os seguintes valores:
. créditos {
text-decoration: underline;} a {

Nenhum
text-decoration: none;}
Isso remove qualquer decoração já
aplicado ao texto.

sublinhado
Isso adiciona uma linha abaixo do texto.
resultado

overline
Isso adiciona uma linha sobre a parte superior do

texto.

A linha de passagem
Isso adiciona uma linha através de palavras.

piscar
Isso anima o texto para torná-lo piscar on
e off (no entanto, este é geralmente
desaprovado, como é considerado muito
chato).

Neste exemplo, os créditos foram

sublinhadas. Além disso, o nome da
raça (que é um link) não é sublinhado,
que seria por padrão, porque é um link.

Esta propriedade é comumente usado por

designers para remover os sublinhados que os

navegadores lugar sob links. Páginas 290-291

mostram como adicionar ou remover um

sublinhado quando um usuário paira sobre um

link.

TEXT 282
TEXTO 282
 conduzindo
altura da linha

Liderando (pronuncia-se ledding) é um termo

capítulo-12 / line-height.html css
tipógrafos usar para o espaço vertical entre
linhas de texto. Em um tipo de letra, a parte p{
de uma carta que cai abaixo da linha de A linha-altura: 1.4em;}
base é chamado de descender,

enquanto que o ponto mais alto de uma carta é

resultado
chamada de ascendente. Líder é medido a

partir da parte inferior da descida sobre uma

linha para o topo da haste superior no seguinte.

Olá
levando-o

tamanho da fonte Olá altura da linha

Em CSS, a altura da linha

propriedade define a altura de uma
linha inteira de texto, por isso a
css resultado Minus
diferença entre o tamanho da fonte e a altura
da linha é equivalente ao ataque (como

mostrado no diagrama acima).

Aumentar o altura da linha

faz com que o intervalo vertical entre linhas de

texto maior.

Aumentar a quantidade padrão de liderança ajuda o movimento do olho ao longo da linha em vez navegador, o valor da altura da linha propriedade
pode tornar o texto mais fácil de ler. O espaço de para baixo-los. Uma boa definição partida é em é melhor dada em ems, não pixels, de modo
vertical entre as linhas deverão ser maiores do torno de 1,4 a que a distância entre linhas é relativo ao
que o espaço entre cada palavra como este 1.5em. Como os usuários podem ajustar o tamanho do texto que o usuário selecionado.
tamanho padrão do texto em sua

283 TEXTO
 Carta & Palavra Espaçamento
artigo
letter-spacing, word-spacing

kerning é os tipógrafos prazo uso para

css capítulo-12 / carta-e-word-spacing.html
o espaço entre cada letra. Você pode
h1, h2 { controlar o espaço entre cada letra
text-transform: uppercase; com o letter-spacing
letter-spacing: 0.2em;}
. créditos { propriedade.

intensidade da fonte: Negrito;

word-spacing: 1em;} É particularmente útil para aumentar o

ajuste de espaço quando o seu título ou
frase é tudo em letras maiúsculas. Se o
texto está em sentença (ou normal) caso,
resultado
aumentando ou diminuindo a kerning pode
torná-lo mais difícil de ler.

Você também pode controlar o espaço

entre palavras usando o

word-spacing propriedade.

Quando você especificar um valor para essas

propriedades, deve ser dada em ems, e ele
será adicionado no topo do valor padrão
especificado pela fonte.

css resultado Minus

A diferença padrão entre as palavras é definido

pelo tipo de letra (muitas vezes em torno

0.25em), e é improvável que você precisa

alterar esta propriedade regularmente. Se a

fonte é negrito ou você ter aumentado o espaço

entre as letras, então uma diferença maior

entre as palavras podem aumentar a

legibilidade.

TEXT 284
TEXTO284
 alinhamento
alinhamento de texto

o alinhamento de texto propriedade permite-lhe

capítulo-12 / text-align.html css
controlar o alinhamento do texto. A propriedade

pode ter um dos quatro valores: h1 {

text-align: left;} p {

text-align: justify;}
esquerda
. créditos {text-align: right;}
Isso indica que o texto deve ser
alinhado à esquerda.

certo
resultado
Isso indica que o texto deve ser
alinhado à direita.

Centro
Isso permite que você centralizar o texto.

justificar
Isso indica que todas as linhas em um
parágrafo, exceto a última linha, deve ser
definido para ocupar toda a largura da caixa
que contém.

Quando você tem vários

parágrafos de texto, é
considerada mais fácil de ler se o texto é alinhado

à esquerda.

texto justificado olha para as palavras em

cada linha individual e cria uma lacuna igual

entre essas palavras. Pode parecer estranho

se você acabar com grandes lacunas entre

algumas palavras e espaços menores entre

outros. Isso geralmente acontece quando as

linhas não são muito largas ou quando o texto

contém palavras longas.

285 TEXTO
 Alinhamento vertical artigo
vertical-align

o vertical-align propriedade é uma fonte

css capítulo-12 / vertical-align.html
comum de confusão. Isto é não destina-se a
# seis meses { permitir-lhe alinhar verticalmente o texto no
vertical-align: text-top;} meio de elementos nível de bloco, como
# um ano {
vertical-align: linha de base;} <P> e < div>, embora não têm este efeito
# dois anos { quando usado com células da tabela (o
vertical-align: text-bottom;} < td> e < th>
elementos).

É mais comumente usado com elementos em

resultado
linha, tais como < img>, <em>, ou < strong> elementos.
Quando usado com esses elementos, ele
executa uma tarefa muito semelhante ao HTML alinhar
atributo usado na < img> elemento, que você
conheceu nas páginas 103-106. Os valores
que pode tomar são:

linha de base sub

superior super
text-top
text-bottom
bottom meio

Ele também pode dar uma comprimento ( normalmente

especificado em pixels ou ems) ou um

percentagem da altura da linha.

TEXT 286
TEXTO 286
 recuando o texto
text-indent

o text-indent propriedade permite-lhe recuar a

capítulo-12 / text-indent.html css
primeira linha de texto dentro de um elemento.

O valor que você deseja que a linha recuada h1 {

por pode ser especificado em uma série de background-image: url ( "imagens / logo.gif");
maneiras, mas é geralmente dada em pixels background-repeat: no-repeat; text-indent: -9999px;}
ou ems.

. créditos {text-indent: 20px;}

Pode demorar um valor negativo, o que

significa que pode ser usado para empurrar
o texto fora da janela do navegador. Você
resultado
pode ver esta técnica usada neste exemplo,
onde o < h1> elemento usa uma imagem de
fundo para representar o título. O texto foi
movido longe para a esquerda, fora da tela.
(Imagens de fundo são cobertos em páginas
413-418.)

Nós ainda queremos o texto do título para estar

na página (para motores de busca e aqueles

que não podem ver a imagem), mas não

podemos tê-lo exibido na parte superior do

logotipo ou ele vai ser ilegível. Empurrando-a

9.999 pixels para a esquerda, é a maneira fora

da vista, mas ainda no código HTML.

A segunda regra neste exemplo recua os

créditos 20 pixels para a direita.

287 TEXTO
 CSS3: sombra artigo
text-shadow

o text-shadow propriedade tornou-se

css capítulo-12 / text-shadow.html
comumente usado apesar da falta de apoio
p.one { em todos os navegadores.
background-color: #eeeeee; color: #
666666; Ele é usado para criar uma sombra, que é uma

text-shadow: 1px 1px 0px # 000000;} versão escura da palavra logo atrás e

p.two { ligeiramente deslocada. Ele também pode ser

background-color: #dddddd; color: # usado para criar um efeito de relevo, adicionando

666666; uma sombra que é ligeiramente mais leve do que

text-shadow: 1px 1px 3px # 666666;} o texto.

p.three {
background-color: #cccccc; cor: #ffffff;
O valor dessa propriedade é bastante
text-shadow: 2px 2px 7px # 111111;} complicado porque pode levar três
p.four { comprimentos e uma cor para a sombra.
background-color: #bbbbbb; Cor:
#cccccc;
text-shadow: -1px -2px # 666666;} O primeiro comprimento indica o quão longe para a

p.five { esquerda ou para a direita a sombra deve cair.

background-color: #aaaaaa; cor: #ffffff;

text-shadow: -1px -1px # 666666;} O segundo valor indica a distância até a

parte superior ou inferior que a sombra
deve cair.

resultado
O terceiro valor é opcional e especifica a
quantidade de desfocagem que deve ser
aplicada à sombra.

O quarto valor é a cor da sombra

projetada.

o text-shadow propriedade tornou-se muito

popular, mas no momento da escrita não foi
apoiado em todas as versões do Internet
Explorer (atualmente IE9). Outros
fabricantes de navegadores introduziu em
Firefox 3.1, Safari

3, cromo e 2 Opera 9,5.

TEXT 288
TEXTO288
 primeira carta ou linha
: First-letter,: first-line

Você pode especificar valores diferentes para a

capítulo-12 / first-letter-and-line.html css
primeira letra ou primeira linha do texto dentro de

um elemento usando p.intro: first-letter {font-size:

:primeira carta e 200%;}
:primeira linha. p.intro: first-line {font-weight:
bold;}
Tecnicamente estes não são propriedades. Eles

são conhecidos como

pseudo-elementos.
resultado

Você especifica o pseudo-elemento no

final do seletor, e especifique as
declarações como faria normalmente para
qualquer outro elemento.

Vale a pena tentar este exemplo no seu browser

de modo que você pode ver como o primeira

linha pseudoelement só irá afectar a primeira

linha do texto, mesmo se você redimensionar a

janela do navegador e menos ou mais palavras

aparecem em cada linha.

CSS introduz ambos pseudoelements A pseudo-classe age como um valor

e pseudo-classes. Um extra para uma classe atributo. No caso
pseudo-elemento age como um da: visitou
elemento extra é no código. No caso pseudo-classe, que você encontra na página
da: primeira carta seguinte, que lhe permite ter estilos diferentes
e: primeira linha pseudo elementos, é como se para links que foram visitados. Da mesma
houvesse um elemento extra em torno da forma, a: flutuar pseudo-classe permite estilizar
primeira letra ou a primeira linha que pode ter elementos de forma diferente quando um
seus próprios estilos aplicados. usuário paira sobre eles.

289 TEXTO
 ligações styling
artigo
: Link,: visited

Navegadores tendem a mostrar links em

css capítulo-12 / link-visited.html
azul com um sublinhado por padrão, e eles
a: link { vão mudar a cor dos links que foram
Cor: deeppink; text-decoration: visitados para ajudar os usuários saibam
none;} a: visited { quais páginas eles foram.

color: black;} a: hover

{ Em CSS, há dois pseudoclasses que
Cor: deeppink; permitem definir diferentes estilos
text-decoration: underline;} a: active { para links que têm e ainda não foram
visitadas.
Cor: darkcyan;}

:ligação
resultado Isso permite que você definir estilos para

links que ainda não foram visitadas.

:visitou
Isso permite que você definir estilos para
links que foram clicados.

Eles são comumente usados ​para

controlar cores das ligações e também se
estão a aparecer sublinhado ou não.

À esquerda, você pode ver que links

visitados são mostrados em uma cor
diferente para ajudar os visitantes
saibam o que já vimos.

Muitas vezes, a: flutuar e: ativo

pseudo-classes (cobertos na página seguinte) são

usados ​para alterar a aparência de uma ligação

quando um utilizador paira sobre ou clica sobre

ele.

TEXT 290
TEXTO290
 Respondendo a usuários
: Hover,: ativo,: foco

Há três pseudo-classes que permitem que

capítulo-12 / pairar-activo-focus.html css
você altere a aparência de elementos
quando um usuário está interagindo com entrada {
eles. padding: 12px 6px 6px 12px; border: 1px
solid # 665544; cor: #ffffff;} input.submit:
hover {
:flutuar
Isto é aplicado, quando um utilizador paira
background-color: # 665544;}
sobre um elemento com um dispositivo
input.submit: active {
apontador, tal como um rato. Este tem sido
background-color: chocolate;} {input.text
comumente usado para alterar a aparência
de links e botões quando um usuário passa o
Cor: #cccccc;} input.text:
mouse sobre eles. Vale a pena notar que tais
foco {
eventos não funcionam em dispositivos que
color: # 665544;}
usam telas de toque (como o iPad) porque a
tela não é capaz de dizer quando alguém
está pairando seu dedo sobre um elemento.

resultado

:ativo
Esta é aplicada quando um elemento está a ser

activado por um utilizador; por exemplo, quando

um botão for pressionado ou um link que está

sendo clicado. Às vezes isso é usado para fazer

um botão ou link sentir mais como ele está sendo

pressionado por mudar o estilo ou a posição do

elemento ligeiramente.

Foco ocorre quando um navegador descobre possível usar a tecla Tab no teclado
:foco que você está pronto para interagir com um para percorrer os itens interativos em
Esta é aplicada quando um elemento tem foco. elemento na página. Por exemplo, quando o uma página. Quando são usados
Qualquer elemento que você pode interagir com, cursor está em uma entrada de formulário ​pseudo-classes, eles devem aparecer
como um link que você pode clicar em ou em pronto para aceitar a digitação, esse elemento nesta ordem:: link,: visited,: hover,:
qualquer controle de formulário pode ter foco. é dito ter foco. Isso é também foco,: ativo.

291 TEXTO
 seletores de atributo

Você conheceu os seletores CSS mais populares na página 238. Há também um conjunto de

seletores de atributos que lhe permitem criar regras que se aplicam a elementos que têm um

atributo com um valor específico.

seletor significado exemplo

existência [] p [classe]
Corresponde a um atributo específico Alvos qualquer < p> elemento com um atributo

(qualquer que seja o seu valor) chamado classe

igualdade [=] p [class = "cão"]

Corresponde a um atributo específico com um valor Alvos qualquer < p> elemento com um
específico atributo chamado classe cujo valor é cão

Espaço [~ =] p [class ~ = "cão"]

Corresponde a um atributo específico cujo valor Alvos qualquer < p> elemento com um atributo

aparece em uma lista de palavras chamado classe cujo valor é uma lista de

spaceseparated palavras separadas por espaços, um dos quais

é cão

prefixo [^ =] p [attr ^ "d"]

Corresponde a um atributo específico cujo Alvos qualquer < p> elemento com um
valor começa com uma seqüência específica atributo cujo valor começa com a letra
"d"

sUBSTRING [* =] p [attr * "fazer"]

Corresponde a um atributo específico cujo Alvos qualquer < p> elemento com um
valor contém uma substring específica atributo cujo valor contém as letras "fazer"

Sufixo [$ =] p [attr $ "g"]

Corresponde a um atributo específico cujo valor Alvos qualquer < p> elemento com um
termina com uma seqüência específica atributo cujo valor termina com a letra "g"

TEXTO
292
293 TEXTO
 exemplo
Texto

<! DOCTYPE html>

<html>
<Head>
<Title> Texto </ title> <style type =
"text / css">
body {
padding: 20px;} H1, H2,
H3, a {
fonte de peso: normal; color: #
0088dd; margem: 0px;} {h1

font-family: Georgia, Times, serif; tamanho da fonte:

250%;
text-shadow: 2px 2px 3px # 666666;
padding-bottom: 10px;} h2 {

font-family: "Gill Sans", Arial, sans-serif; fonte de tamanho: 90%;

text-transform: uppercase;
letter-spacing: 0.2em;} h3 {

tamanho da fonte: 150%; p} {

font-family: Arial, Verdana, sans-serif; A linha-altura: 1.4em;

color: # 665544;}

p.intro: first-line {font-weight:

bold;}
. créditos {
font-style: italic; text-align:
right;} a {

text-decoration: none;} a: hover {

text-decoration: underline;}
</ Style> </
head>

295 TEXTO
 exemplo
Texto

<Body>
<H1> Briards </ h1> <h2> Um coração envolvido na pele </ h2> <p class = "intro"> o < a class = "raça" href =
"http://en.wikipedia.org/wikiBriard">

briard </ a> , ou berger de brie, é uma grande raça do cão, tradicionalmente usado como um pastor e guardião de ovelhas. </ p> <h3> História
da raça </ h3> <p> O briard, que é acreditado para ter originado na França, foi criado para

séculos para pastorear e proteger ovelhas. A raça foi usado pelo exército francês como sentinelas, mensageiros e de pesquisa para
soldados feridos por causa de seu fino senso de audição. Briards foram utilizados na Primeira Guerra Mundial, quase a ponto de extinção.
Atualmente, a população de briards está se recuperando lentamente. Carlos Magno, Napoleão, Thomas Jefferson e Lafayette todas briards
propriedade. </ p> <p class = "créditos"> por Ivy Duckett </ p> </ body> </ html>

TEXTO
296
 resumo
Texto

X Há propriedades para controlar a escolha do tipo de letra, tamanho,

peso, estilo e espaçamento.

X Há uma escolha limitada de fontes que você pode assumir

a maioria das pessoas vai ter instalado.

X Se você quiser usar uma ampla gama de fontes existem

várias opções, mas você precisa ter a licença de direito de usá-los.

X Você pode controlar o espaço entre linhas de texto,

letras individuais e palavras. Texto também pode ser alinhado à esquerda,

direita, centro ou justificado. Ele também pode ser recuado.

X Você pode usar pseudo-classes para alterar o estilo de um

elemento quando um usuário paira sobre ou clica no texto, ou quando eles

visitaram um link.
 13
boxes

X Controlando o tamanho das caixas

X modelo de caixa para as fronteiras, margin e padding
X Exibir e ocultar caixas
 No início desta seção sobre CSS, você viu como
CSS trata cada elemento HTML como se vive em
sua própria caixa.

Você pode definir várias propriedades que afetam a aparência dessas caixas.
Neste capítulo, você verá como:

● Controlar as dimensões de suas caixas

● Criar bordas em torno de caixas

● Definir margens e preenchimento para caixas

● Mostrar e ocultar caixas

Depois de ter aprendido a controlar a aparência de cada caixa, você vai ver como
posicionar estas caixas em suas páginas no capítulo 15, quando olhamos para o
layout da página.

301 CAIXAS
CAIXAS
302
 ArtigoDimensões
caixa
largura altura

Por padrão, uma caixa é dimensionado apenas

capítulo-13 / largura-height.html html
grande o suficiente para manter o seu conteúdo.

Para definir suas próprias dimensões de uma caixa <Div>

que você pode usar o altura e <P> A empresa Moog foi pioneira no comercial
largura propriedades. fabrico de sistemas analógico sintetizador de tensão controlada
modulares no início dos anos 1950. </ p> </ div>
As formas mais populares para especificar o

tamanho de uma caixa são usar pixels,

porcentagens, ou EMS. Tradicionalmente, os

pixels têm sido o método mais popular, porque

eles permitem que os designers para controlar

com precisão o seu tamanho.

Css
Quando você usar percentagens, o tamanho da

caixa é em relação ao tamanho da janela do div.box {altura: 300 x; largura: 300 x;

navegador ou, se a caixa é encaixada dentro de background-color: #bbbbaa;} p {
outra caixa, que é uma percentagem do

tamanho da caixa que contém.

altura: 75%;
Quando você usa o EMS, o tamanho da largura: 75%;
caixa é baseado no tamanho do texto background-color: # 0088dd;}
dentro dele. Designers começaram
recentemente a usar percentagens e ems
mais para medições como eles tentam
Resultado
criar projetos que são flexíveis em
dispositivos com telas de tamanhos
diferentes.

No exemplo à direita, você pode ver

que um contendo < div>
elemento que é usado é de 300 pixels de
largura por 300 pixeis de altura. Dentro deste
é um número que é 75% da largura e altura
do elemento que contém. Isto significa que o
tamanho do número é de 225 pixels de
largura por 225 pixels de altura.

303 CAIXAS
 limitando largura
Artigo
min-largura, no máximo de largura

Alguns designs de página expandir e encolher

html capítulo-13 / min-largura-max-width.html
para se ajustar ao tamanho da tela do usuário.

<Tr> Nesses projetos, a

<Td> <img src = "images / rhodes.jpg" width = "200" min-width propriedade especifica o menor

height = "100" alt = "Fender Rhodes" /> </ td> <td class = tamanho de uma caixa pode ser exibida
"description"> O piano Rhodes é uma em quando a janela do navegador é
de piano eletro-mecânico, inventado por Harold Rhodes durante os anos estreita, ea
cinquenta e mais tarde fabricado em uma série de modelos ... </ td> <td> $ 1400 </ td> largura máxima propriedade indica a largura

</ tr> máxima de uma caixa pode esticar para

quando a janela do navegador é ampla.

Estas são as propriedades muito úteis para

garantir que o conteúdo das páginas são legíveis

Css
(especialmente nas telas menores dos

td.description { dispositivos portáteis). Por exemplo, você pode

min-largura: 450px; usar o largura máxima propriedade para garantir

max-largura: 650 px; que as linhas de texto não aparecem muito

text-align: left; padding: grande dentro de uma janela grande navegador e

5px; margem: 0px;} você pode usar o min-width propriedade para se

certificar de que eles não aparecem muito

estreito.

Você pode achar que é útil para tentar este

Resultado
exemplo no seu navegador para que você

possa ver o que acontece quando você

aumentar ou diminuir o tamanho da janela do

navegador.

Por favor note que estas propriedades foram

apoiados pela primeira vez em IE7 e Firefox 2 para

que eles não funcionarão em versões mais antigas

desses navegadores.

304CAIXAS
DE CAIXAS
304
 Artigo limitando
altura
min-altura, max-altura

Da mesma forma que você pode querer

capítulo-13 / min-altura-max-height.html html
limitar a largura de uma caixa em uma
página, você também pode querer limitar a <H2> Fender Mustang </ h2> <p> A Fender Mustang foi introduzido em 1964 como o
altura dele. Isto é conseguido utilizando o min-altura
base de uma grande reformulação de Fender da ... </ p> <h2> Fender Stratocaster </ h2>
e altura máxima propriedades. <p> A Fender Stratocaster ou "Strat" ​é um dos

O exemplo desta página demonstra essas a maioria das guitarras elétricas populares de todos os tempos ... </ p> <h2> Gibson
propriedades em ação. Ele também mostra o Les Paul </ h2> <p> O Gibson Les Paul é um corpo contínuo elétrico
que acontece quando o conteúdo da caixa
ocupa mais espaço do que o tamanho guitarra que foi vendido pela primeira vez em 1952 ... </ p>
especificado para a caixa.

Css
Se a caixa não é grande o suficiente para

armazenar o conteúdo, eo conteúdo se expande h2, p {

fora da caixa pode parecer muito confuso. Para largura: 400 p; fonte de
controlar o que acontece quando não há espaço tamanho: 90%; A linha-altura:
suficiente para o conteúdo de uma caixa, você 1.2em;} {h2
pode usar o transbordar

color: # 0088dd;
propriedade, que é discutida na próxima border-bottom: 1px solid # 0088dd;} p {
página.
min-altura: 10px; max-altura:
30px;}

Resultado

305 CAIXAS
 Artigo
conteúdo de transbordamento
transbordar

o transbordar propriedade informa ao navegador

html capítulo-13 / overflow.html
o que fazer se o conteúdo contido dentro de

<H2> Fender Stratocaster </ h2> <p class = "um"> A Fender Stratocaster ou "Strat" uma caixa é maior do que a própria caixa. Ele

pode ter um de dois valores:

é uma das guitarras mais populares de todos os tempos, e seu projeto foi copiado
por muitos fabricantes de guitarra. Ele foi projetado por Leo ... </ p> <h2> Gibson Les
Paul </ classe h2> <p = "dois"> O Gibson Les Paul é um corpo sólido
escondido
Esta propriedade simplesmente esconde qualquer

conteúdo extra que não se encaixa na caixa.

guitarra elétrica que foi vendido pela primeira vez em 1952. A Les Paul foi
desenhado por Ted McCarty ... </ p>

rolagem
Esta propriedade adiciona uma barra de rolagem
Css
para a caixa de modo que os usuários podem rolar

p.one { para ver o conteúdo em falta.

overflow: hidden;}
p.two { À esquerda, você pode ver duas caixas cujo
overflow: scroll;} conteúdo se expandir além de suas dimensões
definidas. O primeiro exemplo tem a transbordar

propriedade com um valor de escondido.

Resultado
O segundo exemplo tem a
transbordar propriedade com um valor de rolagem.

o transbordar propriedade é particularmente útil

porque alguns navegadores permitem que os

usuários ajustar o tamanho do texto para

aparecer tão grande ou tão pequeno como eles

querem. Se o texto for muito grande, então a

página pode se tornar uma bagunça ilegível.

Escondendo o estouro em tais caixas ajuda a

prevenir itens sobrepostos na página.

306CAIXAS
DE CAIXAS
306
 Border, margin &
estofamento

Cada caixa tem três propriedades disponíveis que podem ser

ajustados para controlar sua aparência:

1 2 3
Fronteira Margem Preenchimento

Cada caixa tem uma borda (mesmo que não é Margens sentar na borda da fronteira. É Estofamento é o espaço entre a borda de uma

visível ou é especificado para ser 0 pixels de possível definir a largura de uma margem caixa e qualquer conteúdo contido dentro dele.

largura). A fronteira separa a borda de uma para criar uma folga entre as bordas de Adicionando preenchimento pode aumentar a

caixa a partir de uma outra. duas caixas adjacentes. legibilidade do seu conteúdo.

Se você especificar uma largura

para uma caixa, então a fronteira,

Olá
a margem e preenchimento são

adicionados à sua largura e altura.

307 CAIXAS
 Branco Espaço &
Vertical margem

o preenchimento e
Com margem e Sem margem e
preenchimento preenchimento margem propriedades são
muito úteis para adicionar
espaço entre os vários
itens na página.

Designers referem-se ao espaço entre Ou, imagine que você tinha duas caixas Se a margem inferior de qualquer caixa toca a
itens em uma página como sentados lado a lado (cada um com uma borda margem superior de outro, o navegador irá
espaço em branco. Imagine que você tinha uma preta). Você não necessariamente quer as torná-lo diferente do que você poderia esperar.
borda em torno de uma caixa. Você não gostaria caixas para tocar as bordas, pois isso faria o Ele só irá mostrar a maior das duas margens.
que o texto para tocar essa fronteira ou que se olhar de linha duas vezes mais espessa nos Se ambas as margens são do mesmo
tornaria mais difícil de ler. lados que enfrentam. tamanho, ele só irá mostrar um.

CAIXAS 308
 Artigo da borda
largura
fronteira de largura

o fronteira de largura propriedade é

capítulo-13 / fronteira-width.html html
usada para controlar a largura de uma
borda. O valor dessa propriedade pode <P class = "um"> "Clavinet" de Hohner é essencialmente um
ser dada em pixels ou usar um dos clavichord elétrico. </ classe p> <p = "dois"> "Clavinet" de Hohner é essencialmente
seguintes valores: um
clavichord elétrico. </ classe p> <p = "três"> "Clavinet" de Hohner é essencialmente

fino de um cravo eléctrico. </ p>

espessura

média

(Você não pode usar percentagens com esta

propriedade.)
Css

Você pode controlar o tamanho individual de p.one {

fronteiras usando quatro propriedades fronteira de largura: 2px;}

distintas: p.two {
fronteira de largura: de espessura;}

border-top-width-width p.three {
border-right fronteira de largura: 1 px 4px 12 px 4px;}
border-bottom-width
border-left-width

Você também pode especificar diferentes larguras

para os quatro valores de fronteira em uma

Resultado
propriedade, assim:

fronteira de largura: 1 px 2px 1 px 2px;

Os valores aqui aparecem em ordem no

sentido horário: superior, direita, inferior,

esquerda.

309 CAIXAS
 Estilo de borda
Artigo
estilo de borda

Você pode controlar o estilo de uma borda

html capítulo-13 / fronteira-style.html
usando a estilo de borda
<P class = "um"> Piano Wurlitzer elétrica </ classe p> <p = "dois"> Piano propriedade. Esta propriedade pode ter os

Wurlitzer elétrica </ classe p> <p = "três"> Piano Wurlitzer elétrica </ classe seguintes valores:

p> <p = "quatro"> Piano Wurlitzer elétrica </ classe p> <p = "cinco"> Piano
Wurlitzer elétrica </ classe p> <p = "seis"> Piano Wurlitzer elétrica </ classe sólido uma única linha sólida

p> <p = "sete"> Piano Wurlitzer elétrica </ classe p> <p = "oito"> Piano
Wurlitzer elétrica </ p> pontilhado uma série de pontos quadrados (se o

seu fronteira é 2px de largura, em seguida, os

pontos são 2px quadrado com um intervalo 2px

entre cada ponto)

tracejadas uma série de linhas curtas

Css

p.one {border-style: sólida;} em dobro duas linhas de sólidos (o valor

p.two {border-style: pontilhada;} do fronteira de largura
p.three {border-style: frustradas;} propriedade cria a soma das duas
p.four {border-style: duplo;} linhas)
p.five {border-style: sulco;}
p.six {border-style: cume;} sulco parece estar esculpido na
p.seven {border-style: inset;} página
p.eight {border-style: início;}
cume parece ficar fora da página

Resultado
inserir aparece embutido na página

início parece que está saindo da tela

escondido / Nenhum nenhuma fronteira é

mostrado

Você pode alterar individualmente os estilos de

diferentes fronteiras usando:

-Top-style border-style
border-left-estilo certo border
border-bottom-style

310CAIXAS
DE CAIXAS
310
 Artigo
Cor da borda
Cor da borda

Você pode especificar a cor de uma borda

capítulo-13 / fronteira-color.html html
usando ou valores RGB, códigos hexadecimais

ou nomes de cores CSS (como você viu nas <P class = "um"> A ARP Odyssey foi introduzido em
páginas 251-252). 1972. </ classe p> <p = "dois"> A ARP Odyssey foi introduzido em

É possível controlar individualmente as cores 1972. </ p>

das fronteiras em diferentes lados de uma
caixa usando:

Css
border-top-color
border-right-color p.one {
border-bottom-color border-color: # 0088dd;}
border-left-color p.two {
border-color: #bbbbaa # 111111 # ee3e80 # 0088dd;}
Também é possível usar um atalho para

controlar todas as quatro cores de fronteira

na uma propriedade:
Resultado

border-color: darkcyan deeppink

darkcyan deeppink;

Os valores aqui aparecem em ordem no

sentido horário: superior, direita, inferior,

esquerda.

Você também pode usar valores HSL para

especificar a cor conforme mostrado nas páginas

255-256. No entanto, estes só foram introduzidos

em CSS3 e não vai funcionar em navegadores

mais antigos.

311 CAIXAS
 Artigo
forma abreviada
fronteira

o fronteira propriedade permite especificar a

html capítulo-13 / fronteira-shorthand.html
largura, estilo e cor de uma borda em uma
<P> Aqui está uma seqüência de acordes simples jogado em um propriedade (e os valores devem ser
Hammond órgão através de um alto-falante Leslie. </ p> codificado em que ordem específica).

Css

p{
largura: 250 pixels;

border: 3px pontilhada # 0088dd;}

Resultado

CAIXAS 312
 Artigo
Preenchimento
preenchimento

o preenchimento propriedade permite

capítulo-13 / padding.html html
especificar quanto espaço deve
aparecer entre o conteúdo de um <P> sintetizadores analógicos produzir um som de ondas, ao passo que o

elemento e sua fronteira. Os sons armazenados em um synth digitais foram amostrados e, em

seguida, convertido em números. </ p> <p class = "exemplo"> sintetizadores
analógicos produzir uma onda
O valor dessa propriedade é mais frequentemente soar, enquanto os sons armazenados em um synth digitais foram amostrados
especificada em pixels (embora também seja e, em seguida, ... </ p>
possível a utilização de percentagens ou ems). Se

uma percentagem é usado, o preenchimento é

uma percentagem da janela de navegador (ou da

Css
caixa que contém, se for dentro da outra caixa).

p{
largura: 275px; border: 2px solid #
0088dd;}
Atenção: Se a largura é especificado para uma p.example {padding:
caixa, estofamento é adicionado para a largura 10px;}
da caixa.

Como você pode ver, o segundo

parágrafo aqui é muito mais fácil de ler
Resultado
porque há um espaço entre o texto ea
borda da caixa. A caixa também é mais
amplo porque tem estofamento.

Você pode especificar valores diferentes para cada

lado de uma caixa usando:

padding-top
padding-right
padding-bottom
padding-left

Ou você pode usar um atalho (onde os O valor do preenchimento propriedade não é herdada por elementos filhos da mesma forma que
valores estão em ordem no sentido horário: o cor valor do família de fontes propriedade é; então você precisa especificar o preenchimento para
superior, direita, inferior, esquerda): cada elemento que precisa usá-lo.

Até o Internet Explorer 6, a largura da caixa deve incluir o preenchimento e margens.

padding: 10px 5px 3px 1px; Você pode ver mais sobre este na página 316.

313 CAIXAS
 Artigo
margem
margem

o margem propriedade controla o intervalo

html capítulo-13 / margin.html
entre as caixas. Seu valor é comumente dada
<P> sintetizadores analógicos são muitas vezes dito ter uma em pixels, embora você também pode usar
som mais "quente" do que suas contrapartes digitais. percentagens ou ems.
</ P>
<P class = "exemplo"> sintetizadores analógicos são muitas vezes
disse ter um som mais "quente" do que suas contrapartes digitais. </ p> Se uma caixa fica no topo da outra, as
margens são recolhidos, o que significa a
maior das duas margens vai ser utilizado
e o menor será ignorado.

Css

p{ Atenção: Se a largura de uma caixa for

largura: 200 px; especificado, a margem é adicionado à
border: 2px sólida # 0088dd; padding: largura da caixa.
10px;}
p.example {margem: 20 Você pode especificar valores para cada lado de

p;} uma caixa usando:

margin-top
margin-right
Resultado
margin-bottom
margin-left

Você também pode usar o atalho (onde os valores

estão em ordem no sentido horário: superior,

direita, inferior, esquerda):

margem: 1 px 2px 3px 4px;

Às vezes você pode ver o seguinte, o que

significa que as margens esquerda e direita
deve ser de 10 pixels e as margens
superior e inferior deve ser de 20 pixels:
O valor do margem propriedade não é herdada por elementos filhos da mesma forma que o cor
valor do família de fontes propriedade é, portanto, você precisa especificar o margem para margem: 10px 20px;
cada elemento que precisa usá-lo.
(Este mesmo abreviada mostrado acima

Até o Internet Explorer 6, a largura da caixa deve incluir o preenchimento e margens. também pode ser aplicado para enchimento).

Você pode ver mais sobre este na página 316.

CAIXAS 314
 Artigo
conteúdo centrando

Se você deseja centralizar uma caixa na

capítulo-13 / centrando-content.html html
página (ou centralizá-lo dentro do elemento

que fica em), você pode definir o margem <Body>

esquerda e <P> sintetizadores analógicos são muitas vezes dito ter uma
direito margem para auto. som mais "quente" do que suas contrapartes digitais. </ p> <p class =
"exemplo"> sintetizadores analógicos são muitas vezes
A fim de centrar uma caixa na página, você

precisa definir um largura disse ter um som mais "quente" do que suas contrapartes digitais. </ p>
para a caixa (caso contrário, ele vai ocupar </ body>
toda a largura da página).

Uma vez que você tenha especificado a largura

da caixa, definir as margens esquerda e direita

Css
para auto fará com que o navegador colocar

uma lacuna igual em cada lado da caixa. Isso body {

centraliza a caixa na página (ou dentro do text-align: center;} p {
elemento que a caixa fica dentro).

largura: 300 x; padding: 50px; border: 20px

solid # 0088dd;}

Para que isso funcione em navegadores mais p.example {

antigos (particularmente IE6), o elemento que a margin: 10px auto 10px auto; text-align:
caixa fica dentro deve ter uma alinhamento de left;}
texto

Imóvel com seu valor definido como

Centro.
Resultado

o alinhamento de texto propriedade é herdada pelos

elementos filhos. Você, portanto, também é

necessário especificar o alinhamento de texto propriedade

na caixa centrado, se você não deseja que o texto

dentro dele para ser centrado.

315 CAIXAS
 IE6 Box Modelo
Artigo

Quando você especificar a largura de uma caixa,

Resultado no IE6 sem DOCTYPE
qualquer preenchimento ou margem deve ser

adicionado à largura do mesmo. Internet

Explorer 6, no entanto, tem uma peculiaridade

pelo que inclui o preenchimento e margens da

largura da caixa.

A maneira de contornar isso é para garantir

que você apresentar uma declaração

DOCTYPE para a página HTML. (Declarações

DOCTYPE foram cobertos na página 181.)

Você pode usar tanto o HTML5, HTML 4

rigorosas, ou HTML 4 declarações DOCTYPE

de transição para assegurar que o IE6 segue o

modelo de caixa correta.

Para demonstrar isso, você pode ver o

exemplo da página do lado esquerdo
Resultado no IE6 COm DOCTYPE
mostrado no IE6, primeiro sem uma
declaração DOCTYPE e depois novamente
com a declaração DOCTYPE HTML5.

316CAIXAS
DE CAIXAS
316
 Artigo
Mudança em linha / Bloco
exibição

o exibição propriedade permite que você

capítulo-13 / display.html html
transforme um elemento inline em um elemento

nível de bloco ou vice-versa, e também pode ser <Ul>

usado para esconder um elemento da página. <Li> Casa </ li> <li> Produtos </ li> <li class = "coming-soon"> Serviços
</ li> <li> Sobre </ li> <li> Contato </ li> </ ul>

Os valores dessa propriedade pode tomar

são:

na linha
Isto faz com que um elemento de nível de

bloco de agir como um elemento em linha. Css

li {
display: inline; margin-right:
quadra 10px;}
Isto faz com que um elemento interno de agir como li.coming-soon {display:
um elemento de nível de bloqueio. none;}

inline-bloco
Isto faz com que um elemento de nível de bloco de Resultado
fluir como um elemento interno, mantendo outras

características de um elemento de nível de

bloqueio.

Nenhum
Isto esconde um elemento da página. Neste
caso, o elemento age como se ele não estiver
na página em tudo (embora um usuário ainda
pode ver o conteúdo da caixa, se eles usaram Neste exemplo você pode ver uma lista. Cada Esta técnica é frequentemente usada
o exibição da fonte opção no seu navegador). item na lista é geralmente tratada como um para criar navegação de um site, e, neste
elemento de nível de bloco, mas a regra para exemplo uma margem foi adicionado ao
o direito de cada um dos itens para
<Li> elementos indica que eles devem ser separá-los. A regra que se aplica ao
Se você usar essa propriedade, é importante tratados como elementos inline, o que
notar que as caixas embutidas são não deveria significa que eles vão sentar-se lado a lado <Li> elemento cuja classe é
criar elementos nível de bloco. em vez de aparecer em novas linhas. em breve foi escondido como se não fosse

com a página em tudo.

317 CAIXAS
 ocultar caixas
Artigo
visibilidade

o visibilidade propriedade permite ocultar

html capítulo-13 / visibility.html
caixas de usuários, mas Ele deixa um
<Ul> espaço onde o elemento teria sido.
<Li> Casa </ li> <li> Produtos </ li> <li class = "coming-soon"> Serviços
</ li> <li> Sobre </ li> <li> Contato </ li> </ ul>
Esta propriedade pode ter dois valores:

escondido
Isso esconde o elemento.

Css
visível
li { Isto mostra o elemento.
display: inline; margin-right:
10px;} Se o visibilidade de um elemento é definido como escondido,

li.coming-soon {visibility: hidden;} um espaço em branco irá aparecer em seu lugar.

Se você não quer um espaço em branco para

aparecer, então você deve usar o exibição propriedade

Resultado
com um valor de Nenhum em vez (como

coberto na página anterior).

Por favor, note que qualquer pessoa pode visualizar

o conteúdo de quaisquer elementos cuja visibilidade propriedade

foi definida para escondido através da visualização da

fonte em seu browser.

318CAIXAS
DE CAIXAS
318
 Artigoimagens de fronteira
css3:
border-image

o border-image propriedade aplica uma imagem

capítulo-13 / fronteira-image.html html
para a fronteira de qualquer caixa. É preciso
uma imagem de fundo e corta-o em nove <P class = "um"> </ p> <p class =
pedaços. "dois"> </ p> <p class = "três">
</ p>

Aqui está a imagem. Eu

adicionei marcas onde é
Css
cortada no exemplo,
tendo 18 pixels a partir de cada canto para p.one {
colocar um círculo completo em cada canto. - moz-border-image: url ( "images / dots.gif") 11 11 11 11 stretch;
As fatias de canto são sempre colocadas nos
quatro cantos da caixa, mas nós temos uma - webkit-border-image: url ( "images / dots.gif") 11 11 11 11 stretch;
escolha se os lados são esticados ou repetida. border-image: url ( "images / dots.gif")

11 11 11 11 estiramento;}
p.two {
Esta propriedade requer três - moz-border-image: url ( "images / dots.gif") 11 11 11 11 rodada;
informações:
- webkit-border-image: url ( "images / dots.gif") 11 11 11 11 rodada;
1: A URL da imagem 2: Onde para border-image: url ( "images / dots.gif")
cortar a imagem 3: O que fazer com as
bordas retas; Os valores possíveis são: 11 11 11 11 rodada;}

esticam se estende a imagem

repetir repete a imagem

Resultado
volta como repetir, mas se as telhas não se

encaixam exatamente, ajusta a imagem telha

assim que eles

A caixa também deve ter uma largura de borda

para a imagem a ser mostrada.

O - moz-border-image
e - webkit-border-image
propriedades não estão na especificação
CSS, mas ajudar a versões anteriores do
Chrome, Firefox e Safari exibir este efeito.

319 CAIXAS
 css3: caixa de sombras
Artigo
Sombra da caixa

o Sombra da caixa propriedade permite adicionar

Css capítulo-13 / box-shadow.html
uma sombra em torno de uma caixa. Ele funciona

p.one { exatamente como o text-shadow propriedade que

- moz-box-shadow: -5px -5px # 777777; você conheceu na página 288. Ele deve usar pelo

- webkit-box-shadow: -5px -5px # 777777; box-shadow: -5px menos o primeiro destes dois valores, bem como

-5px # 777777;} uma cor:

p.two {
- moz-box-shadow: 5px 5px 5px # 777777;
- webkit-box-shadow: 5px 5px 5px # 777777; box-shadow: 5px deslocamento horizontal
5px 5px # 777777;} Os valores negativos posicionar a
p.three { sombra à esquerda da caixa.
- moz-box-shadow: 5px 5px 5px 5px # 777777;
- webkit-box-shadow: 5px 5px 5px 5px # 777777; box-shadow: 5px 5px deslocamento vertical
5px 5px # 777777;} Os valores negativos posicionar a
p.four { sombra para o topo da caixa.
- moz-box-shadow: 0 0 10px # 777777;
- webkit-box-shadow: 0 0 10px # 777777; box-shadow: 0 0 borrão da distância
10px # 777777;} Se omitido, a sombra é uma linha sólida como

p.five { uma fronteira.

- moz-box-shadow: inset 0 0 10px # 777777;

- webkit-box-shadow: inset 0 0 10px # 777777; box-shadow: inset 0 0 propagação da sombra
10px # 777777;} Se for utilizado, um valor positivo fará com

que a sombra para expandir em todas as

direções, e um valor negativo irá torná-lo

contrair.

Resultado
o inserir palavra-chave também pode ser

usado antes esses valores para criar uma

sombra interna.

Chrome, Firefox e Safari foram rápidos para

apoiar esta propriedade utilizando o - moz-box-shadow

e - webkit-box-shadow
propriedades. Estes não são na especificação

CSS, mas usá-los pode ajudar a este estilo para

trabalhar nesses navegadores.

320CAIXAS
DE CAIXAS
320
 Artigocantos arredondados
css3:
fronteira-raio

CSS3 introduz a capacidade de criar cantos

capítulo-13 / fronteira-radius.html html
arredondados em qualquer caixa, usando uma

propriedade chamada <P> Pet Sounds contou com um número de não-convencional

fronteira-raio. O valor indica o instrumentos como sinos de bicicleta, órgãos zumbindo, cravos, flautas,
tamanho do raio em pixels. Electro-Theremin, apitos para cães, trens, instrumentos de corda havaianas-som,
latas de Coca-Cola e cachorros latindo. </ p>

navegadores antigos que não suportam esta

propriedade irá mostrar uma caixa com cantos em

ângulo reto.
Css

O - Moz-fronteira-raio p{
e - webkit-fronteira-raio fronteira: #cccccc sólido 5px; padding:
propriedades não estão na especificação CSS. 20px; largura: 275px; text-align: center;
No entanto, eles são usados ​em algumas fronteira de raio: 10px;
versões do Chrome, Firefox e Safari para

oferecer apoio inicial para este modelo (e,

portanto, pode ser usado para conseguir esse - Moz-fronteira de raio: 10px;
efeito em mais navegadores). - webkit-fronteira de raio: 10px;}

Você pode especificar valores individuais para cada

canto de uma caixa usando:

-Raio border-bottom-right-radius
border-top-right border-bottom-left-raio
border-top-left-raio

Resultado

Você também pode usar um atalho destes

quatro propriedades (em sentido horário:

superior, direita, inferior, esquerda). Por

exemplo:

fronteira de raio: 5px, 10px, 5px, 10px;

321 CAIXAS
 css3: formas elípticas Artigo
fronteira-raio

Para criar formas mais complexas, você

html capítulo-13 / elíptica-shapes.html
pode especificar diferentes distâncias para a
<P class = "um"> </ p> <p class = horizontal e as partes verticais dos cantos
"dois"> </ p> <p class = "três"> arredondados.
</ p>

Por exemplo, isso irá criar um raio que

é maior do que é alto:

fronteira de raio: 80px 50 pixels;

Css

p.one { 80px

-fronteira superior esquerdo de raio: 80px 50 pixels;

- Moz-fronteira-raio-superior-esquerdo: 80px 50 pixels;

- webkit-border-radius-top-left: 80px 50px;}
50px
p.two {
fronteira de raio: 1em 4em 1em 4em / 2em 1em 2em 1em;
- Moz-fronteira de raio: 1em 4em 1em 4em / 2em 1em
2em 1em;
- webkit-fronteira de raio: 1em 4em 1em 4em / 2em 1em 2em Você pode direcionar apenas um canto

1em;} usando as propriedades individuais para que

p.three {padding: 0px; fronteira de canto:

raio: 100 p;
-fronteira superior esquerdo de raio: 80px 50

- Moz-fronteira de raio: 100 p; pixels;

- webkit-fronteira de raio: 100 p;}

Há também uma abreviação para targetting todos

os quatro cantos de uma só vez; primeiro você

especificar os quatro valores horizontais, em

Resultado
seguida, os quatro valores verticais, como

mostrado na segunda forma à esquerda.

Você pode até criar um círculo, tomando uma

caixa quadrada e fazer a fronteira-raio a
mesma altura que o quadrado, como se
mostra na terceira forma do lado esquerdo.

CAIXAS 322
322
323 CAIXAS
 exemplo
boxes

Neste exemplo, você pode ver uma página inicial simples

para uma loja de música.

A página inteira fica dentro de uma < div> com um elemento identidade do página. Este é centrado utilizando o margem

propriedade, com um valor de auto para as margens esquerda e direita. O logotipo e outros conteúdos estão

centradas usando essa mesma técnica.

A principal < div> tem uma margem dupla-alinhado em torno dele, e o tamanho desta caixa irá
expandir e contrair se a janela do navegador é redimensionada. Para impedir que a página fique
muito estreito ou muito largo, o min-width
e largura máxima propriedades são utilizadas.

A navegação é criado usando uma lista não ordenada. Há fronteiras definidas para a parte
superior e inferior desta lista para fazê-lo sobressair. o exibição
propriedade foi aplicado a cada um dos itens na lista para que eles se comportam como inline (em vez

de em nível de bloco) elementos. Isso permite que os links de navegação para se sentar ao lado do

outro na horizontal. o preenchimento propriedade foi usada para criar espaço entre cada um dos links.

o largura propriedade para o < ul> elemento é definido como 570 pixels, e a propriedade de largura
para o < p> elementos abaixo deles está definida para 600 pixels. Eles realmente acabar a mesma
largura que o outro porque o < ul>
elemento também usa enchimento para criar um intervalo entre a borda da caixa e cria as ligações no
interior da mesma, e qualquer espaçamento, fronteiras, ou margens são adicionados à largura e altura
da caixa.

Se não tivéssemos incluído um DOCTYPE declaração no início da página, os tamanhos das

caixas seriam diferentes entre si no Internet Explorer 6, porque este navegador não
implementar o modelo de caixa de maneira correta.

CAIXAS
324
 exemplo
boxes

<! DOCTYPE html>

<html>
<Head>
<Title> boxes </ title> <style type =
"text / css">
body {
fonte de tamanho: 80%;

font-family: "Courier New", Courier, monospace; letter-spacing: 0.15em;

background-color: #efefef;}

# página {
max-width: 940px;
min-largura: 720px;
margin: 10px auto 10px auto; padding:
20px;
border: 4px double # 000;
background-color: #ffffff;}
# logotipo {
largura: 150 pixels;

margin: 10px auto 25px auto;} ul {

largura: 570px;
padding: 15px;
margin: 0px 0px auto auto; border-top: 2px
solid # 000; border-bottom: 1px solid # 000;
text-align: center;} li {

display: inline; margem:

3px 0px;} p {

text-align: center; largura:

600px;
margin: 20px auto 20px auto; fonte de peso:
normal;}

325 CAIXAS
 exemplo
boxes

uma {

color: # 000000;
text-transform: uppercase; text-decoration:
none; padding: 5px 6px 18px 18px;} a: hover,
a.on {

color: # CC3333;
background-color: #ffffff;}
</ Style> </
head> <body>

<Div id = "página">
<Div id = "logo">
<Img src = "imagens / logo.gif" alt = "Os Especialistas analógicos" /> </ div>

<Id ul = "navegação">
<Li> <a href="#" class="on"> Casa </ a> </ li> <li> <a href="#"> À
venda </ a> </ li> <li> <a href="#"> conserto </ a> </ li> <li> <a
href="#"> Sobre </ a> </ li> <li> <a href="#"> Contato </ a> </ li> </
ul> <p>

<Img src = "images / keys.jpg" alt = "Fender Rhodes, Clavinet Hohner,

e Wurlitzer EP200" /> </ p> <p>

Somos especializados na venda e reparação de teclados clássicos, em particular a Fender Rhodes, Wurlitzer EP200, e
Hohner Clavinet.
</ P>
</ div> </
body> </
html>

CAIXAS
326
 resumo
boxes

X CSS trata cada elemento HTML como se ele tem sua própria caixa.

X Você pode usar CSS para controlar as dimensões de uma caixa.

X Você também pode controlar as fronteiras, margin e padding

para cada caixa com CSS.

X É possível ocultar elementos usando o visor e

propriedades de visibilidade.

X caixas em nível de bloco pode ser feita em caixas embutidas, e

caixas embutidas feitas em caixas em nível de bloco. Legibilidade pode ser

X melhorado através do controlo da largura de

caixas contendo texto e o líder. CSS3 introduziu a

X capacidade de criar uma imagem

fronteiras e fronteiras arredondadas.
 14
Listas, tabelas e
formulários

X Especificando estilos ponto de bala

X Adicionando bordas e fundo para as tabelas
X Alterando a aparência de elementos de formulário
 Existem várias propriedades CSS que foram criados
para trabalhar com tipos específicos de elementos
HTML, como listas, tabelas e formas.

Neste capítulo, você vai aprender a:

● Especifique o tipo de ponto de marcador ou numeração em listas

● Adicionar bordas e fundo para as células da tabela

● Controlar o aparecimento de controlos de formulário

Juntas, essas propriedades permitem que você assuma o controle mais preciso sobre partes

específicas de suas páginas.

331 listas, tabelas e formulários

Listas, tabelas e formulários 332
 artigo ponto de bala
Estilos
list-style-type

o list-style-type propriedade permite controlar

capítulo-14 / list-style-type.html html
a forma ou estilo de um ponto de bala
(também conhecido como um marcador). <H1> Os poemas completos </ h1> <h2> Emily
Dickinson </ h2> <ol>

Ele pode ser usado em regras que se <Li> Vida </ li> <li> Natureza </ li> <li> Ame </ li>
aplicam ao < ol>, <ul>, e < li> <li> Tempo e Eternidade </ li> <li> O único
elementos. Hound </ li> </ ol>

Listas não ordenadas

Para uma lista desordenada você pode usar os

seguintes valores:

nenhum

círculo Css
disco
ol {
quadrado
list-style-type: lower-roman;}

Listas ordenadas
Para uma lista ordenada (numerada), você pode

usar os seguintes valores:

decimal Resultado
123

decimal-líder de zero
01 02 03

inferior-alfa
abc

superior-alfa
abc

inferior-romana

Eu. ii. iii.

superior romano

I II III

333 listas, tabelas e formulários

 Imagens para balasartigo
list-style-image

Você pode especificar uma imagem para agir

html capítulo-14 / list-style-image.html
como um ponto de bala usando o

<H1> Índice de poemas traduzidos </ h1> <h2> Arthur list-style-image propriedade.
Rimbaud </ h2> <ul>
O valor começa com as letras
<Li> Ophelia </ li> <li> To Music </ li> <li> Um url e é seguido por um par de
sonho para o inverno </ li> <li> vogais </ li> <li> O parênteses. Dentro dos parênteses,
Barco Ébrio </ li> </ ul> o caminho para a imagem é dada
dentro de aspas.

Esta propriedade pode ser usada em regras

que se aplicam ao < ul> e

<Li> elementos.
Css

ul { O exemplo desta página também

list-style-image: url ( "images / star.png");} li { mostra o uso do margem
propriedade de aumentar a diferença
margem: 10px 0px 0px 0px;} vertical entre cada item na lista.

Resultado

Listas, tabelas
tabelas e formulários
e formulários 334 listas,
334
 artigo
Posicionar o marcador
list-style-position

Listas são recuados para a página por

capítulo-14 / list-style-position.html html
padrão ea list-styleposition propriedade
indica se o marcador deve aparecer no <Ul class = "iluminações">
interior ou no exterior da caixa <Li> Isso ídolo, olhos negros e ... </ li> <li> filho da graça de Pan!
contendo os pontos principais. ... </ li> <li> Quando o mundo é reduzido ... </ li> </ ul>

<Ul class = "temporada">

Esta propriedade pode ter um de dois <Li> Uma vez que, se a minha memória serve ... </ li> <li> Eu não
valores: tinha uma vez um jovem ... </ li> <li> O outono já! ... </ li> </ ul>

lado de fora
O marcador está à esquerda do bloco de
texto. (Este é o comportamento padrão se
essa propriedade não é usada.) Css

ul {
largura: 150 pixels;} li
dentro {
O marcador está dentro da caixa de texto margem: 10px;}
(que é recuado). {ul.illuminations
list-style-position: outside;} {ul.season
No exemplo mostrado, a largura da lista tem
sido limitada a 150 pixels. Isso garante que o list-style-position: dentro;}
texto é moldado em uma nova linha para que
você possa ver como o valor de dentro senta a
bala dentro da primeira linha do texto.
Resultado Resultado

Uma margem foi adicionado a cada item da

lista de modo que existe uma clara diferença

entre cada.

335 listas, tabelas e formulários

 taquigrafia lista
artigo
list-style

Tal como acontece com vários dos outros

html capítulo-14 / lista-style.html
propriedades CSS, não é uma propriedade que age

<H1> Citações de Edgar Allan Poe </ h1> <ul> como um atalho para a lista de estilos. Ele é

chamado -Estilo de lista,

<Li> Tenho muita fé em tolos; auto-confiança meus amigos chamam. </ li> <li> Tudo o e lhe permite expressar propriedades de

que vemos ou parecemos somos mas um sonho dentro de um sonho. </ li> <li> Eu estilo, imagem e posição dos marcadores em

definiria, em breve, a poesia das palavras como a criação rítmica da beleza. </ li> </ qualquer ordem.

ul>

Css

ul {
lista-modelo: o círculo interno; largura:
300 x;} li {

margem: 10px 0px 0px 0px;}

Resultado

Listas, tabelas
tabelas e formulários
e formulários 336 listas,
336
 artigo
propriedades da tabela

Você já se encontraram várias

capítulo-14 / table-properties.html html
propriedades que são comumente
usados ​com mesas. Aqui vamos <H1> Primeira edição Auctions </ h1> <table>
colocá-los juntos em um único exemplo,
usando o seguinte: <Tr>
<Th> Autor </ th> <th> Título </ th> <th class = "dinheiro"> Preço
largura para definir a largura da mesa de reserva </ th> <th class = "dinheiro"> Oferta atual </ th> </
tr> <tr>

preenchimento para definir o espaço entre a borda

de cada célula da tabela e o seu conteúdo

<Td> EE Cummings </ td> <td> Tulipas & Chaminés </ td>
<td class = "dinheiro"> $ 2.000,00 </ td> <td class =
text-transform para converter o conteúdo dos "dinheiro"> $ 2,642.50 </ td> </ tr> <tr class =
cabeçalhos de tabela para maiúsculas "mesmo">

letter-spacing, font-size <Td> Charles d'Orleans </ td> <td> poemes </ td> <td
para adicionar um estilo adicional para o class = "dinheiro"> </ td> <td class = "dinheiro"> $ 5,866.00
conteúdo dos cabeçalhos de tabela </ td> </ tr> <tr>

fronteira-topo, de fundo fronteira

para definir as fronteiras acima e abaixo dos

cabeçalhos de mesa <Td> TS Eliot </ td> <td> Poemas 1909 - 1925 </ td> <td
class = "dinheiro"> $ 1.250,00 </ td> <td class =
alinhamento de texto para alinhar a escrita à "dinheiro"> $ 8,499.35 </ td> </ tr> <tr class =
esquerda de algumas células da tabela e à direita "mesmo">
dos outros

cor de fundo para mudar a cor das <Td> Sylvia Plath </ td> <td> a Colossus </ td> <td
linhas da tabela alternando fundo class = "dinheiro"> </ td> <td class = "dinheiro"> $ 1.031,72
</ td> </ tr> </ table>

:flutuar para destacar uma linha da tabela quando o

mouse do usuário passa sobre ele

337 listas, tabelas e formulários

 artigo

Aqui estão algumas dicas para denominar mesas

Css
para garantir que eles são limpos e fáceis de

body { seguir:

font-family: Arial, Verdana, sans-serif; color: # 111111;} table {

dar as células de preenchimento

Se o texto em uma célula da tabela, quer toca

largura: 600px;} th, td uma borda (ou outra célula), torna-se muito mais

{ difícil de ler. Adicionando preenchimento ajuda a

padding: 10px 10px 10px 7px;} {th melhorar a legibilidade.

text-transform: uppercase;
letter-spacing: 0.1em; fonte de tamanho: distinguir títulos
90%; Colocar todos os títulos de tabela em

border-bottom: 2px solid # 111111; border-top: 1px negrito (o estilo padrão para o

solid # 999; text-align: left;} {tr.even <Th> elemento) torna mais fácil de ler. Você

também pode tornar os cabeçalhos das

maiúsculas e, em seguida, adicione uma
background-color: #efefef;} tr: hover { cor de fundo ou um sublinhado para
distingui-las claramente do conteúdo.
background-color: # c3e6e5;}
. dinheiro {
text-align: right;} sombrear linhas alternadas
Sombreamento todas as outras linhas pode ajudar

os usuários a seguir ao longo das linhas. Use uma

distinção sutil do cor normal das linhas para

Resultado
manter a tabela com aspecto limpo.

Alinhe numerais
Você pode usar o alinhamento de texto

propriedade para alinhar o conteúdo de qualquer

coluna que contém os números para a direita, de

modo que grandes números são claramente

distinguidos a partir menores.

onLine adicional
Há mais exemplos de como usar CSS
para estilizar tabelas na seção de
ferramentas do site.

Listas, tabelas
tabelas e formulários
e formulários 338 listas,
338
 artigo em células vazias
borda
células vazias

Se você tem células vazias na sua tabela,

capítulo-14 / vazio-cells.html html
então você pode usar o células vazias propriedade

para especificar se ou não suas fronteiras <Class table = "um">

devem ser mostrados. <Tr>
<Td> 1 </ td> <td> 2
</ td> </ tr> <tr>
Desde navegadores tratam células vazias de

diferentes maneiras, se você quer mostrar

explicitamente ou ocultar as fronteiras em qualquer <Td> 3 </ td> <td>

célula vazia, então você deve usar essa </ td> </ tr> </
propriedade. table>

Pode demorar um dos três valores:

exposição Css
Esta mostra as fronteiras de todas as células
td {
vazias.
border: 1px solid # 0088dd; padding:
15px;} {table.one
ocultar
Isto esconde as fronteiras de quaisquer vazias células: mostra;}
células vazias. {table.two
vazias células: ocultar;}

herdar
Se você tiver uma tabela aninhada
dentro de outra, a herdar
valor instrui as células da tabela a Resultado
obedecer as regras da tabela contendo.

Na primeira tabela à esquerda, você pode

ver que a borda da célula vazia está
mostrando. Na segunda tabela, é
escondido.

339 listas, tabelas e formulários

 lacunas entre as células
artigo
fronteira-espaçamento, fronteira-colapso

o fronteira-espaçamento propriedade permite

html capítulo-14 / lacunas-entre-cells.html
controlar a distância entre células adjacentes.

<Class table = "um"> Por padrão, os navegadores muitas vezes

<Tr> deixam um pequeno intervalo entre cada célula

<Td> 1 </ td> <td> 2 da tabela, por isso, se você quiser aumentar ou

</ td> </ tr> <tr> diminuir esse espaço, então o fronteira-espaçamento

propriedade permite controlar a abertura.

<Td> 3 </ td> <td> 4

</ td> </ tr> </
table> O valor dessa propriedade é normalmente

especificado em pixels. Pode especificar dois

valores se desejado para especificar números

separados por um espaçamento horizontal e

vertical.
Css

td { Quando uma fronteira foi usado em células de

background-color: # 0088dd; padding: mesa, onde duas células se encontram, a largura

15px; das linhas seria duas vezes a das bordas

border: 2px sólida # 000000;} {table.one externas. É possível entrar em colapso fronteiras

adjacentes para impedir isso usando o

border-spacing: 5px 15px;} {table.two

fronteira-colapso propriedade. Os valores

fronteira-colapso: colapso;} possíveis são:

colapso
Resultado Fronteiras são recolhidas em uma
única borda, sempre que possível. ( fronteira-espaçamento
será ignorado e as células unidas, e células
vazias

propriedades serão ignorados.)

separado
Fronteiras são separadas uma da outra. ( fronteira-espaçamento
e
células vazias será obedecida.)

Listas, tabelas
tabelas e formulários
e formulários 340 listas,
340
 Formas styling

Ninguém que eu conheça goza de preenchimento

Mac: Safari mac: FireFox
de formulários, por isso, se você pode fazer o seu

olhar mais atraente e fácil de usar, as pessoas

estão mais propensos a preenchê-lo. Além disso,

quando você vir a olhar para uma forma em

alguns navegadores diferentes (como mostrado

na à direita), você vai ver que cada navegador

exibe-los de forma diferente.

CSS é utilizada para controlar a

aparência de elementos de formulário.
Isto é tanto para torná-los mais
atraentes e para torná-los mais
consistente em diferentes navegadores
Pc: chrome Pc: ou seja

É mais comum para o estilo:

● entradas de texto e áreas de texto

● submeter botões

● Etiquetas em formulários, para obter o

controla forma a alinhar bem

Nas próximas páginas você vai ver como

controlar estes com CSS.

Styling entradas de texto e botões enviar é Para conseguir isso, você pôde gostar de fazer o formas olhar consistente entre os

bastante fácil. É mais difícil de obter caixas de navegadores. Embora a solução incorpora
download dos arquivos CSS disponíveis em http://formalize.me.

seleção, botões de rádio e caixas de seleção para JavaScript, nenhum conhecimento prévio de

olhar consistente em todos os navegadores. O autor deste website fez o trabalho que isso é necessário, a fim de implementar o

duro de fazer código.

341 listas, tabelas e formulários

 entradas de estilo deartigo
texto

Este exemplo demonstra as propriedades

Css capítulo-14 / styling-text-inputs.html
CSS comumente usados ​com entradas de
entrada { texto, a maioria dos quais você já conheci.
tamanho da fonte: 120%;
color: # 5a5854;
background-color: # f2f2f2; fronteira: #bdbdbd tamanho da fonte define o tamanho do texto

sólido 1px; fronteira de raio: 5px; padding: 5px digitado pelo usuário.

5px 5px 30px; background-repeat: no-repeat;

fundo posições: 8px 9px; display: block; cor define a cor do texto, e
margin-bottom: 10px;} entrada: foco { cor de fundo define a cor da entrada
de fundo.

fronteira adiciona uma borda ao redor da

borda da caixa de entrada, e

background-color: #ffffff; border: 1px solid # fronteira-raio pode ser usado para criar cantos

b1e1e4;} entrada # e-mail { arredondados (para navegadores que

suportam esta propriedade).

background-image: url ( "images / Email.png");} entrada # Twitter {

background-image: url ( "images / twitter.png");} entrada # web { o : foco pseudo-classe é usada para
mudar a cor da entrada de texto de
background-image: url ( "images / web.png");} fundo quando ele está sendo usado, eo
: flutuar
pseudo-classe aplica os mesmos estilos
quando o usuário passa sobre eles.

Resultado

imagem de fundo acrescenta uma imagem

de fundo para a caixa. Porque há uma

imagem diferente para cada entrada,
estamos usando um seletor de atributo
procurando o valor da identidade

atributo em cada entrada.

Você vai aprender mais sobre imagens

de fundo e como posicioná-los no
Capítulo 16.

Listas, tabelas
tabelas e formulários
e formulários 342 listas,
342
 artigo botões de envio
Styling

Aqui estão algumas propriedades que

capítulo-14 / styling a apresentar-buttons.html Css
podem ser usados ​para o estilo botões de
envio. Este exemplo baseia-se no na Entrada # enviar {
página anterior, e no botão enviar herda os color: # 444444;
estilos definidos para o < input> text-shadow: 0px 1px 1px #ffffff; border-bottom: 2px
solid # b2b2b2; background-color: # b9e4e3;
elemento na última página.
fundo: -webkit de gradiente (linear, superior esquerdo,
cor é usado para alterar a cor do inferior esquerdo, a partir de (# beeae9), a (# a8cfce)); fundo:
texto no botão.
- Moz-linear de gradiente (topo, # beeae9, # a8cfce); fundo:
text-shadow pode dar uma aparência 3D para o

texto em navegadores que suportam esta - o-linear de gradiente (topo, # beeae9, # a8cfce); fundo:
propriedade.

- MS-linear de gradiente (topo, # beeae9, # a8cfce);} entrada #

-fronteira inferior foi usado para fazer a borda apresentar: {pairar
inferior do botão ligeiramente mais espessa, color: # 333333; border: 1px solid # a4a4a4;
o que lhe dá uma sensação mais 3D. border-top: 2px solid # b2b2b2;
background-color: # a0dbc4;

cor de fundo pode tornar o botão enviar fundo: -webkit de gradiente (linear, superior esquerdo,
destacar de outros itens em torno dele. inferior esquerdo, a partir de (# a8cfce), a (# beeae9)); fundo:
(Criação de um estilo consistente para todos
os botões ajuda os usuários a entender - Moz-linear de gradiente (topo, # a8cfce, # beeae9); fundo:
como eles devem interagir com o site.) Um
fundo gradiente foi adicionado para - o-linear de gradiente (topo, # a8cfce, # beeae9); fundo:
navegadores que suportam gradientes.
Gradientes são descritos na página 419. - MS-linear de gradiente (topo, # a8cfce, # beeae9);}

Resultado

o : flutuar pseudo-classe foi usada para

alterar a aparência do botão quando o
usuário passa sobre ele. Neste caso, as
alterações de fundo, o texto fica mais
escura, ea fronteira mais espessa é
aplicado na parte superior do botão.

343 listas, tabelas e formulários

 fieldsets styling artigo
& Legendas

Fieldsets são particularmente úteis para

Css capítulo-14 / denominando-fieldsets-and-legends.html
determinar as bordas de uma forma. Em uma

fieldset { forma longa que pode ajudar grupo informações

largura: 350px; juntos relacionados dentro dele.

fronteira: #dcdcdc sólido 1px; fronteira

de raio: 10px; padding: 20px; text-align:
right;} {lenda A lenda é usado para indicar
informações que são necessárias no
fieldset.
background-color: #efefef; fronteira:
#dcdcdc sólido 1px; fronteira de raio: Propriedades comumente usados ​com estes

10px; padding: 10px 20px; text-align: left; dois elementos incluem:

largura é usada para controlar a largura do conjunto

text-transform: uppercase;} de campos. Neste exemplo, a largura do fieldset

força os elementos de formulário para embrulhar

em uma nova linha no lugar correto. (Se fosse

mais amplo, os itens podem sentar-se em uma

Resultado
linha.)

cor é usado para controlar a cor do

texto.

cor de fundo é usado para alterar a

cor por trás desses itens.

fronteira é utilizado para controlar a aparência da

borda em torno do conjunto de campos e / ou a

legenda.

fronteira-raio é usado para suavizar as

bordas desses elementos em

navegadores que suportam esta
propriedade.

preenchimento pode ser usado para adicionar

espaço dentro desses elementos.

Listas, tabelas
tabelas e formulários
e formulários 344 listas,
344
 alinhando Form
artigo
Controles: problema

As etiquetas para elementos de formulário são

capítulo-14 / alinhando-forma-controles-problem.html html
muitas vezes comprimentos diferentes, o que

significa que os controlos de formulário não <Form action = "example.php" method = "post">
aparece numa linha recta. Isto é demonstrado no <Div>
exemplo da direita (sem CSS aplicada aos <Label for = classe "nome" = "title"> Nome: </ label> <input type = "text"
controlos de formulário). id = "nome" name = "name" /> </ div> <div>

Nesta forma, cada tópico pedimos ao usuário <Label for = classe "email" = "title"> O email: </ Tipo label> <input = "email"
sobre é colocado dentro de um < div> elemento id = "email" name = "email" /> </ div> <div>
para garantir que cada pergunta aparece em uma

nova linha. É mais fácil para os usuários a

preencher um formulário se os controles de <Span class = "title"> Gênero: </ span> <input type = "radio" name =
formulário são alinhados em uma linha reta "gênero" id = "macho"
vertical. O CSS na página ao lado aborda esta. value = "M" /> <label for = "macho"> Masculino </ label> <input type =
"radio" name = "gênero" id = "feminino"

value = "F" /> <label for = "feminino"> Fêmea </ label> <br />
Se você olhar para onde pedimos aos </ div> <div>
usuários seu sexo, os dois botões de rádio,

cada um tem seu próprio < label> ( um dizendo

masculino e outro dizendo feminino). UMA <Input type = "submit" value = "Register"
id = "submit" /> </
<Span> elemento foi adicionado ao título div> </ form>
que irá ajudar a alinhar estes controlos.

Na página anterior, vimos uma outra técnica para

Resultado sem Css
alinhar elementos de formulário. Quando o

formulário contém apenas entradas de texto,

definindo todas as entradas de texto para ter a

mesma largura, bem como alinhando todo o

conteúdo formulário à direita, os campos alinham

e as etiquetas estão em um local consistente.

Para formas mais complexas, você vai precisar

de uma solução mais como a mostrada nestas

páginas.

345 listas, tabelas e formulários

 alinhando controles
artigo de
formulário: Solução

Cada linha do formulário tem um título informando

Css capítulo-14 / alinhando-forma-controles-solution.html
aos usuários o que eles precisam para entrar.

div { Para as entradas de texto, o título está no < label> elemento.

border-bottom: #efefef sólido 1px; margem: 10px; Para os botões de rádio, o título está em um < span>

padding-bottom: 10px; largura: 260px;} elemento. Ambos têm uma classe atributo com um

valor de

. título {float: left; largura: 100 p; título.

text-align: right; padding-right:
10px;} Podemos usar uma propriedade chamada

flutuador para mover os títulos à esquerda

da página. (O flutuador
. etiqueta botões de rádio {float: propriedade é coberta em maior detalhe
none;} nas páginas 370-376.)
. enviar {
text-align: right;} Ao definir o largura propriedade sobre os
elementos, sabemos que os títulos serão cada
ocupam a mesma largura. Portanto, os
controles de formulário ao lado deles vai
alinhar.

o alinhamento de texto propriedade é usada

para alinhar os títulos para a direita, e preenchimento

é usado para se certificar de que há uma

lacuna entre o texto nas caixas de título e os

controles de formulário.

Resultado
Estilos também são aplicadas ao

<Div> elementos que contêm cada linha

da forma (que fixa a sua largura e
criando espaço vertical entre cada
linha). O botão enviar também é
alinhado à direita.

Listas, tabelas
tabelas e formulários
e formulários 346 listas,
346
 artigo cursor
estilos
cursor

o cursor propriedade permite controlar o

capítulo-14 / cursor.html html
tipo de cursor do mouse que deve ser
exibido para os usuários. <a href="http://www.whitmanarchive.org">
Walt Whitman </ a>

Por exemplo, em um formulário que você pode

definir o cursor para ser uma mão quando o usuário

Css
passa sobre ele.

uma {

Aqui estão os valores mais usados cursor: movimento;}

​para esta propriedade:

auto
Resultado
mira ponteiro

padrão

movimento

espera texto de

ajuda

url ( "cursor.gif");

Você só deve usar esses valores para adicionar

informações úteis para os usuários em lugares

que seria de esperar para ver que cursor. (Por

exemplo, usando uma mira em um link pode

confundir os usuários, porque eles não estão

acostumados a vê-lo.)

347 listas, tabelas e formulários

 desenvolvedor web
Barra de ferramentas

Esta extensão útil para Firefox e Chrome fornece ferramentas para

mostrar os estilos CSS que se aplicam a um elemento quando
você passa o mouse sobre ele, juntamente com a estrutura do
HTML.

Baixe esta ferramenta a partir de:

trabalho www.chrispederick.com/ /

desenvolvedor web
2

Para ver os estilos CSS e estrutura HTML de uma

página da Web, vá para o menu CSS da Barra de 3

Ferramentas Web Developer e escolher Ver 1
informações de estilo.

1: contornos 2: Estrutura 3: estilos CSS

Quando você passa o mouse sobre um Enquanto você está pairando sobre um Quando pairando sobre um elemento, clique
elemento, um contorno vermelho será elemento, a estrutura será mostrada na com o mouse para exibir o CSS. Você será
desenhado em torno dele, mostrando-lhe parte superior da janela. Aqui você pode mostrado as regras que se aplicam a esse
quanto espaço o elemento ocupa. ver a elemento (ea linha que estão em). Acima das
<Li> elemento tem uma classe de concluída, regras, você pode ver o nome da folha de
dentro de um < ul> com uma classe chamada façam. estilo (e o caminho para ele).
A lista está dentro de um < div> com um

elemento identidade do página, e isso fica

dentro do < body> e < html>

Isso ajuda a verificar quais estilos estão sendo

elementos. aplicadas a um elemento. Você pode usá-lo
em código para seu próprio site ou quando

Isto pode ser muito útil ao escrever seletores você quiser ver o que estilos alguém está

CSS para ajudar você a atingir o elemento usando em seu site.

certo.

Esta ferramenta também permite que você altere o tamanho da tela, validar o seu código HTML e CSS, e desligue imagens.

Listas, tabelas e formulários 348

349 Listas, tabelas e formulários
 exemplo
Listas, tabelas e formulários

Este exemplo demonstra várias das propriedades CSS que

conhecemos neste capítulo para controlar a apresentação
de listas, tabelas e formas.

Para a lista de eventos de poesia livres perto do início da página, os pontos de bala são
decorados com uma imagem. O espaço entre cada item da lista é aumentada usando o altura da
linha propriedade.

Para a tabela, as diferenças entre as células são removidas usando o borderspacing propriedade.

Tamanho da fonte é definido para o < td> e < th> elementos como eles não herdam seu tamanho a

partir de elementos pai.

O chefe da tabela tem um fundo mais escuro, texto luz, e uma linha 2-pixel escuro entre
ele eo conteúdo da tabela. Cantos arredondados no cabeçalho da tabela são criadas
usando o: primeiro filho e: last-child
pseudo classes (por navegadores que suportam cantos arredondados).

linhas alternadas da tabela têm sombreamento diferente, ea textura é adicionado com diferentes
fronteiras de cada lado da célula.

Para o formulário, os controles de formulário relacionados são colocados em um < fieldset> elemento. Os rótulos

dos controles de formulário à esquerda também usar o flutuador propriedade de garantir os controlos de formulário

são alinhados verticalmente.

Quando as caixas de texto do formulário de receber foco, ou o usuário passa sobre ele, a cor de
fundo e as cores de fronteira mudar. O botão enviar também foi estilizado para torná-lo claro para
onde as pessoas devem enviar o formulário.

Listas, tabelas e formulários 350

 exemplo
Listas, tabelas e formulários

<! DOCTYPE html>

<html>
<Head>
<Title> Listas, tabelas e formas </ title> <style type = "text /
css">
body {
font-family: Arial, Verdana, sans-serif; fonte de tamanho: 90%;
color: # 666;

background-color: # f8f8f8;} li {

list-style-image: url ( "images / icon-plus.png"); A linha-altura: 1.6em;}

{mesa

fronteira-espaçamento: 0px;} th,

td {
padding: 5px 5px 30px 10px;
fronteira-espaçamento: 0px; fonte de
tamanho: 90%; margem: 0px;} th, td {

text-align: left;
background-color: # e0e9f0; border-top: 1px solid #
f1f8fe; border-bottom: 1px solid # cbd2d8;
border-right: 1px solid # cbd2d8;} tr.head th {

Cor: #fff;
background-color: # 90b4d6; border-bottom: 2px
solid # 547ca0; border-right: 1px solid # 749abe;
border-top: 1px solid # 90b4d6; text-align: center;

text-shadow: -1px -1px 1px # 666; letter-spacing:

0.15em;} {td

text-shadow: 1px 1px 1px #fff;}

351 listas, tabelas e formulários

 exemplo
Listas, tabelas e formulários

td tr.even, tr.even th {
background-color: # e8eff5;} tr.head th:
first-child {
- webkit-fronteira-superior-esquerdo-raio: 5px;
- Moz-fronteira-raio-topleft: 5px;
border-top-left-radius: 5px;} tr.head th: last-child {

- webkit-border-top-right-radius: 5px;
- Moz-fronteira-raio-topright: 5px; fieldset} {; 5px:
border-top-rádio direito

largura: 310px; margem superior: 20 p;

border: 1px solid # d6d6d6;
background-color: #ffffff; line-height:
1.6em;} {lenda

font-style: italic; color: #

666666;} input [type = "text"] {

largura: 120 px;

border: 1px solid # d6d6d6; padding:
2px; outline: none;} input [type = "text"]:
foco, input [type = "text"]: hover {

background-color: # d0e2f0; border: 1px

solid # 999;} input [type = "submit"] {

border: 1px solid # 006633;

background-color: # 009966; Cor:
#FFFFFF; fronteira de raio: 5px; padding:
5px; margem superior: 10px;} input [type
= "submeter"]: {pairar

border: 1px solid # 006633;

Listas, tabelas e formulários 352

 exemplo
Listas, tabelas e formulários

background-color: # 00CC33; Cor:

#FFFFFF; cursor: ponteiro;}

. título {
float: left; largura:
160px; clear: left;}

. enviar {
largura: 310px; text-align:
right;}
</ Style> </
head> <body>

<H1> oficinas de poesia </ h1> <p> Nós será a realização de uma série de oficinas de poesia

e simpósios ao longo do ano. </ p> <p> Por favor, note que os seguintes eventos são
livres para
membros: </ p> <ul>

<Li> A perspectiva poética </ li> <li> Walt Whitman at War </ li> <li> Poemas
encontrados e Poesia Outsider </ li> </ ul> <table>

<Tr class = "cabeça">

<Th> </ th> <th> Nova york </ th>
<th> Chicago </ th> <th> São Francisco </
th> </ tr> <tr>

<Th> A perspectiva poética </ th> <td> Sat, 4 de fevereiro de 2012 < br /> 11:00-02:00
</ td> <td> Sáb, 03 de março de 2012 < br /> 11:00-02:00 </ td> <td> Sat,
décimo sétima março de 2012 < br /> 11:00-02:00 </ td> </ tr>

<Class tr = "mesmo">
<Th> Walt Whitman at War </ th>

353 listas, tabelas e formulários

 exemplo
Listas, tabelas e formulários

<Td> Sat, 7 de abril de 2012 < br /> 11:00-13:00 </ td> <td> Sáb, 05 de
maio de 2012 < br /> 11:00-13:00 </ td> <td> Sáb, 19 de maio de 2012 < br
/> 11:00-13:00 </ td> </ tr> <tr>

<Th> Encontrado Poemas & amp; Poesia Outsider </ th> <td> Sat, 09
junho de 2012 < br /> 11:00-02:00 </ td> <td> Sáb, 07 de julho de 2012 < br
/> 11:00-02:00 </ td> <td> Sáb, 21 de julho de 2012 < br /> 11:00-02:00 </ td>
</ tr>

<Class tr = "mesmo">
<Th> Morte Natural: Uma Exploração </ th> <td> Sáb, 04 de agosto de
2012 < br /> 11:00-04:00 </ td> <td> Sat, 8 de setembro de 2012 < br /> 11:00-04:00
</ td> <td> Sáb, 15 de setembro de 2012 < br /> 11:00-04:00 </ td> </ tr>
</ table>

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

<Fieldset>
<Legend> Registre seu interesse </ legend> <p> <label class = "título" para = "name"> Seu
nome: </ label>
<Input type = "text" name = "nome" id = "name"> <br /> <label class = "título" para = "email"> Seu
email: </ label> <input type = "text" name = "email" id = "email"> </ p> <p> <label for = "localização"
class = "title"> O seu centro mais próximo: </ label>

<Select name = "location" id = "location">

<Option value = "ny"> Nova york </ option> <option value = "il"> Chicago </ option> <option value = "ca"> São
Francisco </ option> </ select> </ p> <span class = "title"> Você é um membro? </ span> <label> <input type =
"radio" name = value "membro" = "yes" /> sim </ label> <label> <input type = "radio" name = value
"membro" = "no" /> Não </ label> </ p> </ fieldset>

<Div class = "submit"> <input type = "submit" value = "Register" /> </ div> </ form> </ body> </ html>

Listas, tabelas e formulários 354

 resumo
Listas, tabelas e formulários

X Além das propriedades CSS coberto de outra

capítulos que trabalham com o conteúdo de todos os elementos, existem

vários outros que são usados ​especificamente para controlar a aparência de

listas, tabelas e formas. marcadores de lista pode ser dada diferentes

X aparências

usando o list-style-type e list-style propriedades da imagem.

X células da tabela pode ter diferentes fronteiras e espaçamento em

navegadores diferentes, mas há propriedades que você pode usar para

controlá-los e torná-los mais consistente. Formas são mais fáceis de usar se

X os controles de formulário são

verticalmente alinhadas utilizando CSS.

X Formas beneficiar de estilos que fazem com que se sintam mais

interativo.
 15
traçado

X Controlando a posição dos elementos

X Criação de layouts de sites
X Projetando para telas de tamanhos diferentes
 Neste capítulo vamos ver como controlar onde
cada elemento se senta em uma página e como
criar layouts de páginas atraentes.

Trata-se de aprender sobre como projetar para uma tela pode ser diferente para
projetar para outros meios (como impressão). Neste capítulo, iremos:

● Explorar diferentes formas de posicionar elementos usando normais

fluxo, o posicionamento relativo, posicionamento e flutuadores absoluto.

● Descubra como vários dispositivos têm diferentes tamanhos de tela

e resolução, e como isso afeta o processo de design.

● Aprender a diferença entre a largura fixa e disposições líquidas,

e como eles são criados.

● Descubra como designers utilizam redes para fazer a sua página

projetos olhar mais profissional.

359 LAYOUT
DISPOSIÇÃO
360
 Conceitos-chave em
elementos de posicionamento

Blocos de construção

CSS trata cada elemento HTML como se fosse em sua própria

caixa. Esta caixa vai ser um bloco de nível

caixa ou um na linha caixa.

caixas em nível de bloco começar em uma nova linha e agir como os principais blocos de construção de

qualquer layout, enquanto as caixas embutidas fluir entre texto ao redor. Você pode controlar a quantidade

de espaço que cada caixa ocupa, definindo a largura das caixas (e às vezes a altura, também). Para caixas

separadas, você pode usar bordas, margens, preenchimento e cores de fundo.

elementos nível de bloco

começar em uma nova linha
Lorem Ipsum

Exemplos incluem:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed não eiusmod tempor
<H1> <p> <ul> <li> ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
Aute dolor Irure em reprehenderit em velit voluptate.

• Lorem ipsum dolor sit

• adipisicing consectetur
• Elit, sed fazer eiusmod

elementos inline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed não eiusmod tempor
fluir entre texto envolvente
ut incididunt labore et dolore aliqua magna. Ut enim ad minim veniam, Quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Exemplos incluem:
<Img> <b> <i>
Duis Aute Irure dolor em reprehenderit em voluptate velit Esse cillum
dolore eu fugiat nulla pariatur. sint Excepteur occaecat cupidatat não proident, sunt
em culpa qui officia deserunt mollit id anim est Laborum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed não eiusmod tempor ut incididunt labore et
dolore magna aliqua.

361 LAYOUT
contendo elementos

Se um elemento de nível de bloqueio situa-se dentro de um outro

elemento de nível de bloqueio, em seguida, a caixa exterior é

conhecido como o contendo ou parente elemento.

É comum para um grupo de número de elementos em conjunto dentro de uma < div>

(Ou outro bloco de nível) elemento. Por exemplo, você pode agrupar todos os elementos
que formam o cabeçalho de um site (como o logotipo ea navegação principal). o < div> elemento
que contém este grupo de elementos é, em seguida referida como a contendo elemento.

Uma caixa pode ser aninhados dentro

Lorem Ipsum • • • Dolor consectetur
Lorem Ipsum vários outros elementos de bloco. O
elemento que contém o é sempre controladora
direta desse elemento.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed não eiusmod tempor ut
incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis Aute Irure dolor em
reprehenderit em voluptate velit Esse cillum dolore eu fugiat nulla pariatur. sint Excepteur
occaecat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed

fazer eiusmod tempor ut incididunt labore et dolore magna
aliqua. Ut enim ad minim veniam, Quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Aute
Duis.

Duis Aute Irure dolor em reprehenderit em voluptate velit Esse cillum dolore eu fugiat nulla pariatur.

As linhas de laranja neste diagrama representam < div> elementos. O cabeçalho (contendo o
logotipo e navegação) estão em um < div> elemento, o conteúdo principal da página está em
outra, e o rodapé está em um terço. o < body> elemento é o elemento que contém para estes
três < div>
elementos. O segundo < div> elemento é o elemento que contém dois parágrafos de texto
Latina e imagens (representada por quadrados cruzados).

LAYOUT 362
 Controlando a posição dos
elementos

CSS tem a seguinte esquemas de posicionamento que lhe permitem controlar o layout de uma

página: fluxo normal, o posicionamento relativo e posicionamento absoluto. Você especificar o

esquema de posicionamento usando o posição

propriedade em CSS. Você também pode flutuar elementos utilizando o flutuador propriedade.

fluxo normal posicionamento relativo posicionamento absoluto

Cada elemento nível de bloco aparece em uma Isto move um elemento a partir da posição que Isto posiciona o elemento em relação ao seu

nova linha, fazendo com que cada item seria em fluxo normal, deslocando-a para a elemento que contém. Ele é retirado do fluxo

apareça mais abaixo na página do que o parte superior, direita e inferior, ou para a normal, o que significa que ela não afeta a

anterior. Mesmo se você especificar a largura esquerda do local em que teria sido colocado. posição de quaisquer elementos circundantes

das caixas e não há espaço para dois Isto não afecta a posição dos elementos (como eles simplesmente ignorar o espaço que

elementos para se sentar lado a BySide, eles circundante; eles permanecem na posição em teria levado para cima). Elementos posicionados

não aparecerão ao lado do outro. Este é o que estaria em no fluxo normal. absolutamente se movem como os usuários se

comportamento padrão (a menos que você deslocar para cima e para baixo da página.

diga o navegador para fazer outra coisa).

Lorem Ipsum Lorem Ipsum Lorem

Lorem ipsum dolor sit amet, Ipsum
consectetur
adipisicing elit, sed não eiusmod tempor ut
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur incididunt labore et dolore magna aliqua.
adipisicing elit, sed não eiusmod tempor ut adipisicing elit, sed não eiusmod tempor ut
incididunt labore et dolore magna aliqua. incididunt.
Ut enim ad minim veniam, Quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
Ut enim ad minim veniam, Quis nostrud Ut enim ad minim veniam, Quis nostrud commodo consequat.
exercitation ullamco laboris nisi ut aliquip ex ea exercitation ullamco laboris nisi ut aliquip ex
commodo consequat. EA. Duis Aute dolor Irure em reprehenderit Duis Aute dolor Irure em reprehenderit em velit
em velit voluptate. voluptate.
Duis Aute dolor Irure em reprehenderit em velit
voluptate.

Os parágrafos aparecem um após o outro, O segundo parágrafo foi empurrado O título está posicionada para o canto
verticalmente para baixo a página. para baixo e para a direita de onde ele superior direito, e os parágrafos começar
teria sido no fluxo normal. no topo da tela (como se o título não
estava lá).

Consulte a página 365 Consulte a página 366 Consulte a página 367

363 LAYOUT
Para indicar onde uma caixa deve ser posicionado, você também pode precisar usar

caixa de deslocamento Propriedades para dizer ao navegador como longe da parte superior ou inferior e para a

esquerda ou para a direita ele deve ser colocado. (Você vai conhecer estes quando introduzimos os esquemas

de posicionamento nas páginas seguintes.)

posicionamento fixo elementos flutuantes

Esta é uma forma de posicionamento Flutuando um elemento permite que você tire

absoluto que posiciona o elemento em esse elemento fora do fluxo normal e

relação à janela de navegador, em oposição posicioná-lo para a direita ou extrema esquerda

ao elemento que contém. Elementos com de uma caixa contendo. O elemento flutuado

posicionamento fixo não afetam a posição torna-se um elemento de nível de bloco em

dos elementos circundantes e eles não se torno do qual outro conteúdo pode fluir.

movem quando o usuário rola para cima ou

para baixo a página.

Quando você move qualquer

Lorem ipsum dolor sit amet, consectetur Lorem Lorem ipsum dolor sit amet,
adipisicing elit, sed não eiusmod tempor ut consectetur adipisicing elit, sed não
Ipsum elemento de fluxo normal,
incididunt labore et dolore magna aliqua. eiusmod tempor ut incididunt labore et
Lorem Ipsum dolore magna aliqua.
caixas podem se sobrepor. o
Ut enim ad minim veniam, Quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea Ut enim ad minim veniam, Quis nostrud
commodo consequat. exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
Duis Aute dolor Irure em reprehenderit em velit z-índice propriedade
voluptate. Duis Aute dolor Irure em reprehenderit em velit
voluptate.
permite controlar a caixa
que aparece no topo.

O título foi colocado no centro da O título foi lançada para a esquerda,

página e 25% a partir do topo da tela. permitindo que os parágrafos de texto fluir
(O resto aparece no fluxo normal). em torno dele.

Consulte a página 368 Consulte a página 370-376

LAYOUT 364
 artigonormal
fluxo
Posição: static

No fluxo normal, cada elemento de nível de

capítulo-15 / normal flow.html html
bloqueio fica no topo da próxima. Uma vez que

este é o caminho padrão no qual os <Body>

navegadores tratam elementos HTML, você <H1> A Evolução da bicicleta </ h1> <p> Em 1817 o Baron von Drais inventou
não precisa de uma propriedade CSS para uma curta
indicar que elementos devem aparecer no fluxo máquina que o ajudasse a obter em torno dos jardins reais mais rápidos
normal, mas a sintaxe seria: ... </ p> </ body>

posição: estático;
Css

Eu não especificou um largura body {

propriedade para o elemento título, para que largura: 750px;
possa ver como ele se estende a largura de font-family: Arial, Verdana, sans-serif; color: # 665544;} h1 {
toda a janela do navegador por padrão.

background-color: #efefef; padding:

Os parágrafos são restritos a 450 pixels de 10px;} p {
largura. Isso mostra como os elementos no
fluxo normal começar em uma nova linha, largura: 450px;}
mesmo se eles não ocupam toda a largura da
janela do navegador.

Resultado

Todos os exemplos que demonstram

posicionamento vai usar uma estrutura

semelhante HTML.

365 DISPOSIÇÃO
 posicionamento relativo
artigo
posição: parente

O posicionamento relativo move um

html capítulo-15 / posição-relative.html
elemento em relação ao ponto em que teria
<Body> sido em fluxo normal.
<H1> A Evolução da bicicleta </ h1> <p> Em 1817 o Baron von Drais inventou
uma curta Por exemplo, você pode movê-lo 10
máquina que o ajudasse a obter em torno dos jardins reais mais rápidos pixels inferior ao que teria sido no fluxo
... </ p> </ body> normal ou 20% para a direita.

Você pode indicar que um elemento deve ser

relativamente posicionado usando o posição propriedade
Css
com um valor de relativo.
p.example {
posição: relativa; superior:
10px; left: 100px;} Você, então, usar as propriedades de

deslocamento ( topo ou inferior e

esquerda ou certo) para indicar o quão

longe para mover o elemento de onde ele

teria sido no fluxo normal.

Para mover a caixa para cima ou para baixo,

você pode usar o topo ou

inferior propriedades.
Resultado

Para mover a caixa horizontalmente, você

pode usar o esquerda ou
certo propriedades.

Os valores das propriedades de deslocamento

da caixa são geralmente dada em pixels,

percentagens ou ems.

LAYOUT 366
366
 artigo
posicionamento absoluto
posição: absoluta

Quando o posição propriedade é dado

capítulo-15 / posição-absolute.html html
um valor de absoluto,
a caixa é retirado do fluxo normal e <Body>
não afeta a posição de outros <H1> A Evolução da bicicleta </ h1> <p> Em 1817 o Baron von Drais inventou
elementos na página. (Eles agir como uma curta
ele não está lá.) máquina que o ajudasse a obter em torno dos jardins reais mais rápidos
... </ p> </ body>

As propriedades de deslocamento (caixa topo

ou inferior e esquerda ou certo)

especifique onde o elemento deve
Css
aparecer em relação ao seu elemento
contendo. h1 {
posição: absoluto; superior:
Neste exemplo, o título foi posicionado na 0px; left: 500px; largura: 250
parte superior da página e 500 pixels de sua pixels;} p {
borda esquerda. A largura da rubrica está
definido para ser 250 pixels de largura.
largura: 450px;}

o largura propriedade também tem sido

aplicada para o < p>
elementos neste exemplo para
evitar que o texto de
sobreposição e se tornar ilegível.
Resultado

Por padrão, a maioria dos navegadores

adicionar uma margem para o topo da < h1>

elemento. É por isso que existe uma lacuna

entre a parte superior do navegador e a caixa
que contém o < h1> elemento. Se você
quisesse remover esta margem, você pode
adicionar o seguinte código para a

<H1> regras de estilo do elemento:

margem: 0px;

367 LAYOUT
 posicionamento artigo
fixo
posição: fixado

posicionamento fixo é um tipo de

html capítulo-15 / posição-fixed.html
posicionamento absoluto que requer o posição
<Body> propriedade para ter um valor de fixo.
<H1> A Evolução da bicicleta </ h1> <p class = "exemplo"> Em 1817 o
Baron von Drais
inventou uma máquina de passeio que o ajudasse a obter em torno dos jardins Ele posiciona o elemento em relação à janela
reais mais rápidos ... </ p> </ body> do navegador. Portanto, quando o usuário
rola para baixo a página, ele permanece no
mesmo exato lugar. É uma boa idéia para
tentar este exemplo no seu navegador para
ver o efeito.
Css

h1 {
posição: fixo; superior: Para controlar onde a caixa posição fixa

0px; left: 50px; padding: aparece em relação à janela do navegador, as

10px; margem: 0px; propriedades compensado caixa são

largura: 100%; utilizados.

Neste exemplo, o título foi posicionada

background-color: #efefef;} para o canto superior esquerdo da
p.example { janela do navegador. Quando o usuário
margem superior: 100 p;} rola para baixo a página, os parágrafos
desaparecer atrás do título.

Resultado
o < p> elementos estão no fluxo normal
e ignorar o espaço que o < h1> elemento
teria tomado. Portanto, o

margem superior- propriedade foi usada para

empurrar a primeira < p>

elemento abaixo em que a posição fixa < h1>

elemento está sentado.

LAYOUT 368
368
 artigo
elementos sobrepostos
z-índice

Quando você usa relativa, fixada ou

capítulo-15 / Z-index.html Css
posicionamento absoluto, caixas podem se

sobrepor. Se as caixas se sobrepõem, os h1 {

elementos que aparecem mais tarde no código posição: fixo; superior: 0px; left: 0px;
HTML se sentar em cima dos que estão no início margem: 0px; padding: 10px; largura:
da página. 100%; background-color: #efefef; índice
z: 10;} p {
Se você deseja controlar qual elemento fica
na parte superior, você pode usar o z-índice propriedade.
Seu valor é um número, e quanto maior o
número, mais perto esse elemento é para a
frente. Por exemplo, um elemento com um z-índice
do 10 posição: relativa; superior: 70
pixels; left: 70px;}
aparecerá sobre o topo de um com um z-índice
do 5.

Este exemplo é semelhante ao que na

O resultado sem índice Z-
página 368, mas ele usa posicionamento
relativo para o < p> elementos. Porque os
números são relativamente posicionado,
por padrão eles aparecem por cima da
posição que o usuário rola para baixo a
página. Para garantir que o

<H1> elemento permanece no topo, usamos o z-índice

propriedade sobre a regra para o < h1> elemento.

Resultado com índice Z-

o z-índice é por vezes referido como o empilhamento

contexto ( como se os blocos foram

empilhados em cima uns dos outros no eixo

z). Se você estiver familiarizado com os

pacotes de editoração eletrônica, é o

equivalente de usar os 'Trazer para a frente' e

'Enviar para trás' características.

369 LAYOUT
 flutuante elementos
artigo
flutuador

o flutuador propriedade permite que você tire

html capítulo-15 / float.html
um elemento em fluxo normal e colocá-lo
<H1> A Evolução da bicicleta </ h1> <blockquote> " A vida é como andar tão longe para a esquerda ou direita do
de bicicleta. elemento contendo possível.
Para manter o seu equilíbrio você deve manter em movimento." Albert
Einstein </ blockquote> <p> Em 1817 o Baron von Drais inventou uma curta
Qualquer outra coisa que fica no interior do
máquina que o ajudasse a obter em torno dos jardins reais mais rápidos: dois do elemento contendo irá fluir em torno do
mesmo tamanho rodas em linha, na frente de um dirigível, montado em um quadro elemento que é lançada.
... </ p>

Quando você usa o flutuador

propriedade, você também deve usar o

Css
largura propriedade para indicar a largura do

bloco de citação { elemento flutuado deve ser. Se não o fizer, os

float: right; largura: 275px; resultados podem ser inconsistentes mas a

tamanho da fonte: 130%; caixa é susceptível de levar-se a toda a largura

font-style: italic; do elemento contendo (apenas como ela seria

no fluxo normal).

font-family: Georgia, Times, serif; margem: 0px 0px

10px 10px; padding: 10px;
Neste exemplo, uma

border-top: 1px solid # 665544; border-bottom: 1px <Blockquote> elemento é usado para

solid # 665544;} manter uma citação. É contendo

elemento é o
<Body> elemento.

Resultado
o < blockquote> elemento é lançada para a
direita, e os parágrafos que seguem o
fluxo de citação em torno do elemento
flutuou.

370 DISPOSIÇÃO
DISPOSIÇÃO
370
 usando flutuador para colocar
artigo
elementos de lado-a-lado

Um monte de caixas de layouts lugar ao

capítulo-15 / utilizando-float.html html
lado do outro. o flutuador
propriedade é comumente usado para alcançar <Body>
este objectivo. <H1> A Evolução da bicicleta </ h1> <p> Em 1817 o Baron von Drais inventou
uma curta
Quando os elementos estão flutuando, a altura máquina que o ajudasse a obter em torno de ... </ p> </ body>
das caixas pode afetar onde os seguintes
elementos sentar.

Neste exemplo, você pode ver seis parágrafos,

Css
cada um dos quais tem um

largura e uma flutuador conjunto de propriedades. body {

largura: 750px;
O quarto parágrafo não atravesse para a font-family: Arial, Verdana, sans-serif; color: # 665544;} p {
borda esquerda da página como se poderia
esperar. Pelo contrário, fica mesmo ao abrigo
do terceiro parágrafo. largura: 230px; float: left; margem: 5px;
padding: 5px; background-color: #efefef;}

A razão para isso é que o quarto parágrafo

tem espaço para começar no âmbito do
terceiro parágrafo, mas ele não pode ir mais
longe à esquerda porque o segundo
parágrafo é no caminho.

Ajustar a altura dos parágrafos ser a

Resultado
mesma altura que o parágrafo mais alto iria
resolver este problema, mas raramente é
adequado para projetos do mundo real,
onde a quantidade de texto em um
parágrafo ou coluna podem variar. É mais
comum usar o Claro propriedade (discutido
na próxima página) para resolver esta
questão.

371 LAYOUT
 compensação flutua
artigo
Claro

o Claro propriedade permite-lhe dizer que

html capítulo-15 / clear.html
nenhum elemento (dentro do mesmo

<P class = "clear"> Em 1865, o velocípede (significando elemento que contém) deve tocar os lados

pedais para a roda dianteira "pé rápido") ligado, mas a sua estrutura de madeira esquerdo ou do lado direito de uma caixa. Ele

tornou extremamente desconfortável. </ p> pode ter os seguintes valores:

esquerda
O lado esquerdo da caixa não deve tocar

Css quaisquer outros elementos que aparecem

no mesmo elemento que contém.
body {
largura: 750px;
font-family: Arial, Verdana, sans-serif; color: # 665544;} p {
certo
O lado direito da caixa não vai tocar
largura: 230px; float: elementos constantes do mesmo
left; margem: 5px; elemento que contém.
padding: 5px;

background-color: #efefef;}
ambos
. Claro {
Nem os lados esquerdo ou do lado direito
clear: left;}
da caixa vai tocar elementos constantes do
mesmo elemento que contém.

Resultado
Nenhum
Elementos podem tocar ambos os lados.

Neste exemplo, o quarto parágrafo tem

uma classe chamada
Claro. A regra CSS para esta classe usa o Claro

propriedade para indicar que nada deve tocar

o lado esquerdo dela. O quarto parágrafo é
por conseguinte movido na parte inferior da
página de modo nenhum outro elemento de
toca seu lado esquerdo.

372 DISPOSIÇÃO
DISPOSIÇÃO372
 pais de elementos flutuantes:
artigo
PROBLEMA

Se um elemento contendo só
capítulo-15 / float-problem.html html
contém elementos flutuantes, alguns navegadores

irá tratá-lo como se fosse de zero pixels de altura. <Body>

<H1> A Evolução da bicicleta </ h1> <div>

Como você pode ver neste exemplo, a borda de <P> Em 1817 o Baron von Drais inventou uma curta
um pixel atribuído ao elemento contendo entrou máquina que o ajudasse a obter em torno dos jardins reais mais rápidos
em colapso, por isso, a caixa parece com uma ... </ p> </ div> </ body>
linha de dois pixel.

Css

div {
border: 1px solid # 665544;}

Resultado

373 LAYOUT
 pais de elementos flutuantes:
artigo
solução

Tradicionalmente, os desenvolvedores tem

html capítulo-15 / float-solution.html
em torno deste problema adicionando um

<Body> elemento extra após a última caixa flutuou

<H1> A Evolução da bicicleta </ h1> <div> (dentro do elemento que contém). Uma regra

CSS seria aplicada a este elemento adicional

<P> Em 1817 o Baron von Drais inventou uma curta definindo o

máquina que o ajudasse a obter em torno dos jardins reais mais rápidos
... </ p> </ div> </ body> Claro propriedade para ter um valor de ambos. Mas

isso significava que um elemento extra foi

adicionado ao HTML apenas para fixar a altura
do elemento que contém.

Css
Mais recentemente, os desenvolvedores optaram

div { por uma solução puramente baseada em CSS,

border: 1px solid # 665544; overflow: porque isso significa que não há necessidade de

auto; largura: 100%;} adicionar um elemento extra à página HTML

depois que os elementos flutuantes. A solução

CSS puro acrescenta duas regras CSS para o

elemento que contém (neste exemplo, o < div> elemento):

Resultado

● o transbordar propriedade é dado

um valor auto.

● o largura propriedade é definida como

100%.

374 DISPOSIÇÃO
DISPOSIÇÃO374
 Criação de layouts de várias colunas
artigo
com flutuadores

Muitas páginas da web usar várias colunas

capítulo-15 / colunas-two.html html
na sua concepção. Isto é conseguido

através de um < div> <H1> A Evolução da bicicleta </ h1> <div class =
elemento para representar cada coluna. Os "column1of2">
três seguintes propriedades CSS são <H3> A primeira bicicleta </ h3> <p> Em 1817 o Baron von Drais inventou uma
utilizados para posicionar as colunas ao lado curta
do outro: máquina que o ajudasse a obter em torno dos jardins reais mais rápidos:
dois do mesmo tamanho ... </ p> </ div>

largura
<Div class = "column2of2">
Isso define a largura das
<H3> Timeline bicicleta </ h3> ... </ div>
colunas.

flutuador
Isto posiciona as colunas ao lado do
Css
outro.
. column1of2 {float: left;
largura: 620px;
margem
margem: 10px;}
Isto cria um intervalo entre as
colunas.
. column2of2 {float: left;
largura: 300 x;
Um layout de duas colunas como o exibidas
margem: 10px;}
nesta página precisaria de dois < div> elementos,
um para o conteúdo principal da página e um
para a barra lateral.

Resultado
Dentro de cada um dos < div>

elementos pode haver cabeçalhos,

parágrafos, imagens e até mesmo outro < div>
elementos.

375 LAYOUT
 artigo

Da mesma forma, um layout de três colunas

html capítulo-15 / colunas-three.html
poderia ser criado por flutuante de três < div> elementos

<H1> A Evolução da bicicleta </ h1> <div class = ao lado do outro, como mostrado nesta página.

"column1of3">
<H3> A primeira bicicleta </ h3> ... </ div>

<Div class = "column2of3">

<H3> outras inovações </ h3> ... </ div>

<Div class = "column3of3">

<H3> Timeline bicicleta </ h3> ... </ div>

Css

. column1of3, .column2of3, .column3of3 {largura: 300 x; float:

left; margem: 10px;}

Resultado

LAYOUT 376
376
 tamanhos de tela

Diferentes visitantes do seu site terá telas de tamanhos diferentes que mostram diferentes quantidades de

informação, de modo que seu projeto precisa ser capaz de trabalhar em uma variedade de telas de tamanhos

diferentes.

iPhone 4 Ipad 2
Tamanho: 3.5 polegadas Tamanho: 9,7 polegadas

Resolução: 960 x 640 pixels Resolução: 1024 x 768 pixels

Ao projetar para impressão, você sempre Desde que os computadores foram vendidos O tamanho da tela do usuário afeta o
sabe o tamanho do pedaço de papel que para o público, o tamanho das telas tem vindo quão grande eles podem abrir suas
seu projeto será impresso em. No a aumentar. Isto significa que algumas pessoas janelas e quanto da página eles vão ver.
entanto, quando se trata de projetar para vendo o seu site pode ter 13 polegadas Há também um número crescente de
a web, você se depara com o desafio monitores enquanto outros podem ter 27+ dispositivos portáteis (telefones
único que diferentes usuários terão telas polegadas monitores. celulares e tablets), que têm telas
de tamanhos diferentes. menores.

377 LAYOUT
 resolução da tela

Resolução refere-se ao número de pontos mostra uma tela por polegada. Alguns dispositivos possuem uma

resolução maior do que os computadores desktop e maioria dos sistemas operacionais permitem aos

utilizadores ajustar a resolução de suas telas.

13" MacBook 27" iMac

Tamanho: 13,3 polegadas Tamanho: 27 polegadas

Resolução: 1280 x 800 pixels Resolução: 2560 x 1440 pixels

A maioria dos computadores vai permitir É interessante notar que quanto maior
que os proprietários para ajustar a a resolução, menor o texto aparece.
resolução da tela ou o número de pixels Muitos dispositivos móveis têm telas
que são mostrados na tela. Por exemplo, que são maior resolução do que os
aqui você pode ver as opções para alterar seus homólogos desktop.
o tamanho da tela de 720 x 480 pixels até
1280 x 800 pixels.

LAYOUT 378
 tamanhos de página

Porque tamanhos de tela e resoluções de exibição variam muito, web designers muitas vezes tentam criar

páginas de cerca de 960-1000 pixels de largura (uma vez que a maioria dos usuários serão capazes de ver

desenhos esta ampla em suas telas).

Julgando a altura que as pessoas tendem a a área de primeira página que você
ver na tela sem rolagem para baixo a página veria se o papel foi dobrada ao meio).
é muito mais difícil. Durante vários anos, os
designers assumiram que os usuários
veriam os principais 570600 pixels de uma É hoje reconhecido que, se alguém está

página sem ter que rolar e alguns tentou interessado no conteúdo da página, que são

encaixar todas as mensagens-chave nesta susceptíveis de rolar para baixo para ver mais.

área (temendo que as pessoas não iriam Tendo dito que, estudos de usabilidade têm

rolar a página). mostrado que os visitantes podem julgar uma

página em menos de um segundo por isso ainda é

importante para permitir que novos visitantes

saibam que o site é relevante para eles e seus

Como os tamanhos de tela têm aumentado interesses.

e dispositivos portáteis se tornaram mais

populares, a área usuários verão é muito
mais variável.
Como resultado, muitos projetos ainda tentam
deixar o usuário saber o que o site é sobre
A área da página que os usuários poderiam dentro do top 570600 pixels, bem como sugerir
ver sem rolagem foi muitas vezes referido em mais conteúdo abaixo deste ponto. Mas
como sendo “acima da dobra” (a jornais prazo não tente empinar demais para essa área
tinha originalmente cunhado para descrever superior.

No momento da escrita, havia uma tendência crescente para as pessoas a criar desenhos
adaptativos ou sensíveis que podem mudar dependendo do tamanho da tela.

379 LAYOUT
A área sombreada é escondida pelas No entanto, o usuário recebe um gosto para

restrições da janela do navegador, para que o que é mais baixa na página e posso dizer

o usuário deve rolar, a fim de ver a região que haverá mais para ver se eles rolar para

inferior. baixo.

1000 px

570 px

LAYOUT 380
 largura Esquemas fixos

desenhos de layout de Lorem Ipsum • • • Dolor consectetur

Lorem Ipsum
largura fixa não mudam
Lorem ipsum dolor sit amet, consectetur adipisicing elit,

tamanho que os usuários sed não eiusmod tempor ut incididunt labore et dolore
magna aliqua. Ut enim ad minim veniam, Quis nostrud

aumenta ou diminui o exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis Aute Irure dolor em reprehenderit em

tamanho da janela do seu voluptate velit Esse cillum dolore eu fugiat nulla pariatur.
sint Excepteur occaecat.

navegador. Medidas tendem

Lorem ipsum dolor sit amet,
a ser dada em pixels. consectetur adipisicing elit,
sed fazer eiusmod tempor

incididunt ut labore et

vantagens desvantagens
● Os valores de pixel são precisos ● Você pode acabar com grandes lacunas
a controlar o tamanho e em torno da borda de uma página.
posicionamento de elementos.
● Se a tela do usuário é um tanto
● O designer tem muito mais resolução maior do que a tela do designer,

controle sobre a aparência ea posição a página pode parecer menor e texto pode

dos itens na página do que com layouts ser mais difícil de ler. Se um usuário

líquidos. Você pode controlar os aumenta o tamanho das fontes,

● comprimentos ●

de linhas de texto, independentemente do texto pode não caber em espaços

tamanho da janela do usuário. alocados.

● O tamanho de uma imagem vai ● O projeto trabalha melhor em

sempre permanecer o mesmo em dispositivos que possuem um site ou
relação ao resto da página. resolução similar ao de computadores

desktop ou laptop. A página, muitas vezes,

● levar até
espaço mais vertical do que um esquema
de líquido com o mesmo conteúdo.

381 LAYOUT
 Layouts líquidos

Lorem Ipsum • • • Dolor consectetur layout líquido projeta esticar e

Lorem Ipsum
contrato como o usuário
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed não eiusmod tempor ut incididunt
labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco aumenta ou diminui o
laboris nisi ut aliquip ex ea commodo consequat. Duis Aute Irure dolor em reprehenderit em

tamanho da janela do seu

voluptate velit Esse cillum dolore eu fugiat nulla pariatur. sint Excepteur occaecat.

navegador. Eles tendem a

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed fazer eiusmod
tempor ut incididunt labore et dolore magna aliqua. Ut enim ad usar percentagens.
minim veniam, Quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Aute Duis.

Duis Aute Irure dolor em reprehenderit em voluptate velit Esse cillum dolore eu fugiat nulla pariatur.

vantagens desvantagens
● Páginas expandir para preencher toda a ● Se você não controlar o
janela do navegador para que não haja largura das seções da página, em seguida,

espaços em torno da página em uma tela o projeto pode ser muito diferente do que
se pretendia, com lacunas inesperadas em
grande. Se o usuário tem um pequeno
torno de certos elementos ou itens calcada
●
em conjunto.
janela, a página pode contrair para
ajustá-lo sem que o usuário ter que
rolar para o lado. ● Se o usuário tem uma ampla

janela, linhas de texto podem se tornar

● O design é tolerante com muito longo, o que os torna mais difíceis

usuários definir tamanhos de fonte maior de ler. Se o usuário tem uma muito
do que o designer destina (porque a ● estreita
página pode esticar). janela, as palavras podem ser esmagado e
Porque layouts líquidos pode esticar toda a
você pode acabar com algumas palavras em
largura do navegador, resultando em longas
cada linha. Se um item de largura fixa (tal
linhas de texto que são difíceis de ler, alguns
● como
layouts líquidos só permitem que parte da
uma imagem) está em uma caixa que é
página expandir e contrair. Outras partes da
muito pequeno para mantê-lo (porque o
usuário fez a janela menor) a imagem página têm larguras mínimas e máximas.

pode transbordar sobre o texto.

LAYOUT 382
 artigolargura fixa layout
uma

Para criar um layout de largura fixa, a largura

capítulo-15 / de largura fixa-layout.html html
das caixas principais em uma página será

geralmente especificada em pixels (e por <Body>

vezes a sua altura, também). <Div id = "header">
<H1> Logotipo </ h1>
<div id = "nav">
Aqui você pode ver vários < div> <Ul>
elementos, cada um dos quais utiliza um <Li> <a href=""> Casa </ a> </ li> <li> <a href=""> Produtos
identidade ou classe atributo para indicar seu </ a> </ li> <li> <a href=""> Serviços </ a> </ li> <li> <a
propósito na página. href=""> Sobre </ a> </ li> <li> <a href=""> Contato </ a> </
li> </ ul> </ div> </ div> <div id = "content">
Em um livro como este, o resultado de ambos os

layouts fixos e líquidos semelhante. Para

começar uma sensação real para eles, você

precisa vê-los em seu navegador e ver como

eles reagem quando você ajustar o tamanho da

janela do navegador. <Div id = "recurso">

<P> Característica </ p> </

div>

O layout de largura fixa permanecerá a <Div class = "artigo column1">

mesma largura não importa o tamanho da <P> coluna Um </ p> </ div>
janela do navegador é, enquanto o layout

líquido vai esticar (ou encolher) para <Div class = "artigo column2">
preencher a tela. <P> coluna dois </ p> </ div>

<Div class = "artigo column3">

O HTML é a mesma tanto para o exemplo de <P> coluna Três </ p> </ div> </
layout de largura fixa nessa página e o div> <div id = "footer">
exemplo layout líquido que você vê ao lado.

<P> & cópia de; copyright 2011 </ p> </ div> </
body>

383 LAYOUT
 artigo

A regra para o < body> elemento é usado

Css
para fixar a largura da página a 960 pixels,
body { e é centrada por definir as margens
largura: 960; margin: 0 esquerda e direita para auto.
auto;}
# conteúdo {overflow:
auto; altura: 100%;} Os principais caixas na página têm uma
margem de 10 pixels para criar um
# nav, #feature, #footer {background-color: espaço entre eles.
#efefef; padding: 10px; margem: 10px;}
Os navegação, funcionalidade, e painéis de
rodapé esticar para a largura do elemento
. column1, .column2, .column3 que contém (o que neste exemplo é a
{background-color: #efefef; largura: 300 x;
float: left; margem: 10px;} li { <Body> elemento), de modo que não é necessário

especificar uma largura para eles.

As três colunas são cada 300 pixels de

display: inline; padding: largura e usar o flutuador
5px;} propriedade, o que lhes permite sentar-se
ao lado do outro.

Às vezes, um elemento HTML extra é

usado para conter a página, em vez de
fixar a largura do < body>. Isso permite
que o fundo da janela do navegador
Resultado
para ter uma cor diferente do que o
fundo do conteúdo.

LAYOUT 384
384
 artigo
um layout líquido

Os usos de layout líquido

capítulo-15 / líquido-layout.html html
percentagens para especificar a largura de cada

caixa para que o projeto se estenderá para <Body>

ajustar o tamanho da tela. <Div id = "header">
<H1> Logotipo </ h1>
<div id = "nav">
Ao tentar isso em seu navegador, <Ul>
lembre-se de fazer a janela menor e <Li> <a href=""> Casa </ a> </ li> <li> <a href=""> Produtos
maior. </ a> </ li> <li> <a href=""> Serviços </ a> </ li> <li> <a
href=""> Sobre </ a> </ li> <li> <a href=""> Contato </ a> </
li> </ ul> </ div> </ div> <div id = "content">

<Div id = "recurso">
<P> Característica </ p> </

div>

<Div class = "artigo column1">

<P> coluna Um </ p> </ div>

<Div class = "artigo column2">

<P> coluna dois </ p> </ div>

<Div class = "artigo column3">

<P> coluna Três </ p> </ div> </
div> <div id = "footer">

<P> & cópia de; copyright 2011 </ p> </ div> </
body>

385 LAYOUT
 artigo

Existe uma regra na < body>

Css
elemento para definir a largura da página
body { para 90% para que haja uma pequena
largura: 90%; margin: 0 diferença entre os lados esquerdo e direito
auto;} da janela do navegador e o conteúdo
# conteúdo {overflow: auto;} principal.
# nav, #feature, #footer {margem: 1%;}
As três colunas são dadas uma margem
. column1, .column2, .column3 {largura: 31,3%; de 1% e uma largura de
float: left; margem: 1%;} 31,3%. Isso se soma a 99,9% da
largura do < body>
elemento, assim que alguns navegadores
. column3 {margin-right: 0%;} li { podem não perfeitamente alinhar o lado
direito da terceira coluna com outros
display: inline; padding: elementos na página.

0.5em;}
# nav, #footer {
background-color: #efefef; padding: o < div> elementos que prendem a
0.5em 0;} navegação, recurso, e rodapé vai esticar
# característica, .Artigo {altura: 10em; para preencher a largura do contendo < body>
-margem inferior: 1em; background-color:
#efefef;} elemento. Eles são dadas uma margem de 1%

para ajudá-los a ficarem alinhadas com as

colunas.

Se você imaginar a janela do navegador para

Resultado
ser muito largo ou muito estreito, você pode ver

como linhas de texto pode se tornar muito longo

ou muito curto.

Isto é onde a min-width

e largura máxima Propriedades ajudar a
criar limites dentro dos quais o layout pode
esticar (embora Internet Explorer 7 foi a
primeira versão do IE para apoiar estas
propriedades).

LAYOUT 386
386
 grades de layout

Composição em qualquer arte visual (tais como design, pintura, ou fotografia) é a colocação ou
disposição de elementos visuais - como eles estão organizados em uma página. Muitos designers
usam uma estrutura de grade para ajudá-los a posicionar itens em uma página, eo mesmo é verdade
para web designers.

À direita, você pode ver um conjunto de linhas Grids definir proporções e espaços entre Enquanto uma grade pode parecer uma

verticais grossas sobrepostas sobre a parte os itens que ajuda a criar um projeto de restrição, na realidade-lo:

superior de um site de jornal para mostrar como vista profissional consistentes.

● Cria uma continuidade entre
a página foi projetado de acordo com uma grade.
páginas diferentes que podem usar
Esta grade é chamado de grade 960 pixels e é
desenhos diferentes
amplamente utilizado por web designers. Se você tocar levemente para trás através das

páginas deste livro você vai ver que ele, também, ● Ajuda os usuários a prever onde a

foi construído de acordo com uma grade (que encontrar informações sobre várias páginas

compreende três colunas).

● Torna mais fácil para adicionar novos

conteúdo para o site de uma forma
Como você verá nas páginas 389-
consistente
390, é possível criar vários layouts
diferentes usando esta rede versátil. ● Ajuda as pessoas a colaborar
sobre a concepção de um site de forma
consistente

387 LAYOUT
grade de exemplo

LAYOUT
388
 Estruturas possíveis: 960
pixel de largura grade 12
coluna

940 px

460 px 460 px

300 px 300 px 300 px

220 px 220 px 220 px 220 px

140 px 140 px 140 px 140 px 140 px 140 px

389 LAYOUT
Estas duas páginas 960 ilustram um pixel de A página é de 960 pixels de largura e existem 12 Cada coluna tem uma margem configurada
largura, grade 12 coluna. Eles demonstram colunas iguais de tamanho (mostrados a cinzento), para 10 pixels, que cria aa lacuna de 20
como é possível para criar uma ampla gama cada um dos quais é de 60 pixels de largura. pixels entre cada coluna e 10 pixels para os
de layouts coluna usando este grid. lados esquerdo e do lado direito da página.

300 px 620 px

220 px 700 px

460 px 220 px 220 px

300 px 300 px 140 px 140 px

220 px 220 px 140 px 140 px 140 px

LAYOUT
390
 quadros CSS

quadros CSS objetivo é tornar a sua vida mais fácil, fornecendo o código para tarefas comuns, como a
criação de grids de layout, formas de estilo, criando versões para impressão de páginas e assim por
diante. Você pode incluir o código do framework CSS em seus projetos, em vez de escrever o CSS a
partir do zero.

vantagens desvantagens
● De modo a satisfazer uma grande
● Eles salvá-lo de ● Eles muitas vezes exigem que você
variedade de necessidades, que muitas
repetidamente escrever código para as usar nomes de classe em seu código
vezes contêm mais código do que você
mesmas tarefas. HTML que só controlar a apresentação
precisa para a sua página web em particular
da página (em vez de descrever o seu
(comumente referido como código de
● Eles foram testados conteúdo).
“inchaço”).
em diferentes versões do navegador (o
que ajuda a evitar bugs do navegador).

introduzindo o quadro 960.gs Css

Um dos usos mais populares de quadros baixar para ajudar a projetar suas páginas tal como grid_3 ( para um bloco que se estende

CSS é na criação de redes para páginas de usando uma grade de 12 coluna. (Além disso, ao longo de três colunas),

layout. Existem várias estruturas de rede lá existe uma variação na rede que utiliza 16 grid_4 ( para um bloco que se estende ao

fora, mas o que nós estaremos olhando ao colunas.) longo de 4 colunas) e e assim por diante

longo das próximas páginas é o 960 Grid através de grid_12

System (disponível em www.960.gs). Para criar uma grade coluna 12, um (Para uma caixa que é a largura da página).
elemento que contém toda a página é Estas colunas todos flutuador à esquerda, e
dado um classe attibute cujo valor é container_12. há uma margem de 10 pixels para a
esquerda e à direita de cada um.
960.gs fornece uma folha de estilo que você Isso define o conteúdo da página para ser

pode incluir em suas páginas HTML. Uma vez 960 pixels de largura e indica que estamos

que nossa página de links para esta folha de usando uma grade de 12 coluna. Existem vários outros quadros CSS
estilo, você pode fornecer as classes gridbased disponíveis on-line, tais como
apropriadas ao seu código HTML e vai criar aqueles em:
vários layouts de coluna para você. O site Existem diferentes classes de blocos que blueprintcss.org lessframework.com
960.gs também fornece modelos que você tomam-se 1, 2, 3, 4, e até 12 colunas da developer.yahoo.com/yui/ grades /
pode grade. Cada bloco usa nomes de classe

391 LAYOUT
 usando a grade 960.gs

Abaixo você pode ver um exemplo de layout de uma página como a página de exemplo largura fixa.
Na próxima página, vamos recriar isso usando o estilo 960.gs. Em vez de escrever nosso próprio CSS
para controlar o layout, vamos precisar adicionar classes para o HTML que indica a largura de cada
seção deve ser.

940 px

940 px

940 px

300 px 300 px 300 px

940 px

LAYOUT
392
 um layout baseado em grid usando
artigo
960.gs

Vamos dar uma olhada em uma página HTML e

capítulo-15 / grid-layout.html html
como ela tem sido marcada para usar o sistema

960.gs grid. <Head>

<Title> layout de grade </ title> <link rel = tipo "estilo" = "text /
css"
Você pode ver que incluem o CSS href = "css / 960_12_col.css" /> <style> Veja a
para a rede usando o página de mão direita </ style> </ head> <body>
<Link> no interior do elemento

<Head> da página.
<Div class = "clearfix container_12">
Os estilos que estão escrevendo nos são <Div id = "header" class = "grid_12">
mostrados na página do lado direito. <H1> Logotipo </ h1>

<Div id = "nav">
<Ul>
o 960_12_col.css folha de estilo contém <Li> <a href=""> Casa </ a> </ li> <li> <a href=""> Produtos
todas as regras que precisam controlar o </ a> </ li> <li> <a href=""> Serviços </ a> </ li> <li> <a
layout grid. O HTML usa os nomes de href=""> Sobre </ a> </ li> <li> <a href=""> Contato </ a> </
classe: li> </ ul> </ div> </ div>

container_12 para atuar como um recipiente para a

página inteira e indicam que estamos usando

uma grade de 12 coluna

<Div id = "recurso" class = "grid_12">

<P> Característica </ p> </

clearfix para garantir que os navegadores saber div>

a altura da caixa que contém, porque ele <Div class = "artigo grid_4">
contém apenas elementos flutuantes (este <P> coluna Um </ p> </ div>
aborda o problema que você encontrou nas

páginas 371-372) <Div class = "artigo grid_4">

<P> coluna dois </ p> </ div>

grid_12 para criar um bloco que é de doze <Div class = "artigo grid_4">
colunas de largura <P> coluna Três </ p> </ div>

grid_4 para criar um bloco que é de quatro <Div id = "footer" class = "grid_12">
colunas de largura <P> & cópia de; copyright 2011 </ p> </ div>

</ Div> <! - .container_12 -> </ body>

393 LAYOUT
 artigo

A folha 960.gs estilo tem tido o cuidado de

Css
layout, criando a largura correta para as
*{ colunas e definir os espaços entre eles.
font-family: Arial, Verdana, sans-serif; color: # 665544; Portanto, as únicas regras que precisávamos
text-align: center;} para adicionar são apresentados nesta
página. Estas regras:
# nav, #feature, .Artigo, #footer {background-color:
#efefef; margem superior: 20 p;
● Controlar a fonte e o
posição do texto nas caixas
padding: 10px 0px 0px 5px;}
# recurso, .Artigo {height:
100px;} li { ● Definir as cores de fundo para
as caixas
display: inline; padding:
● Ajuste a altura do recurso
5px;}
e caixas de artigo

● Adicionar uma margem para o topo e

fundo de cada caixa

Resultado

LAYOUT 394
394
 artigo
As folhas de estilo múltiplas
@importar

Alguns autores de páginas web dividir suas

capítulo-15 / várias-style-folhas-import.html html
regras de estilo CSS em folhas de estilo

separadas. Por exemplo, eles podem usar uma <! DOCTYPE html>
folha de estilo para controlar o layout e outro <html>
para controlar fontes, cores e assim por diante. <Head>
<Title> Várias folhas de estilo - Import </ title> <link rel = tipo "estilo" = "text
/ css"
href = "css / styles.css" /> </ head>
Alguns autores tomar uma ainda mais modular abordagem <body>
para a folhas de estilo, criando folhas de estilo

separadas para controlar tipografia, layout, <! - HTML conteúdo da página aqui -> </ body> </
formas, tabelas, até mesmo estilos diferentes html>
para cada sub-seção de um site.

Há duas maneiras de adicionar várias folhas de

estilo para uma página:

1: Sua página HTML pode conectar-se a

capítulo-15 / styles.css Css
uma folha de estilo e que estilo pode usar o
@ importar @import url ( "tables.css"); @import url (
governar para importar outras folhas de estilo. "typography.css"); body {

2: No HTML você pode usar um separado color: # 666666; background-color: #

< link> para cada elemento de folha de f8f8f8; text-align: center;}
estilo.

# Page {width: 600px; text-align: left;

O exemplo desta página usa um < link> elemento margin-left: auto; margin-right: auto;

no HTML para conectar-se a uma folha de border: 1px solid # d6d6d6; padding:
20px;} h3 {
estilo chamada styles.css. Este estilo, em
seguida, utiliza o

@importar governar para importar o

typography.css e
tables.css arquivos. color: # 547ca0;}

Se um styesheet usa o @ importar

regra, ele deve aparecer antes das outras
regras.

395 LAYOUT
 As folhas de estilo múltiplas
artigo
ligação

Nesta página você pode ver a outra

html capítulo-15 / várias-style-folhas-link.html
técnica para a inclusão de várias folhas de
<! DOCTYPE html> estilo. Dentro de
<html> <Head> elemento é um separada

<Head> <Link> para cada elemento de folha de estilo.

<Title> Várias folhas de estilo - Ligação </ title> <link rel = tipo "estilo" =
"text / css"
href = "css / Site.css" /> O conteúdo de Site.css são idênticos aos styles.css
<Link rel = tipo "estilo" = "text / css" na página do lado esquerdo, exceto o
href = "css / tables.css" /> <link rel = "stylesheet" type = código não contém @ importar regras.
"text / css"
href = "css / typography.css" /> </ head>
<body> Tal como acontece com todas as folhas de estilo,

se duas regras se aplicam ao mesmo elemento, em

<! - HTML conteúdo da página aqui -> </ body> </ seguida, as regras que aparecem mais tarde em

html> um documento terá precedência sobre as regras

anteriores.

No exemplo desta página, todas as

regras em typography.css
Resultado
teria precedência sobre as regras em Site.css
( porque as regras tipografia são
incluídos após as outras regras).

No exemplo na página anterior, as

regras em styles.css
teria precedência sobre as regras em typography.css.
Isto porque, quando o @ importar

regra é usada, que é o ponto no qual o

navegador considera as regras viver.

LAYOUT 396
396
397 LAYOUT
 exemplo
traçado

Este exemplo demonstra um layout de revista de estilo

moderno usando a grade 960.gs. Usando esta folha de estilo
nos salva de ter que criar todo o código CSS nós mesmos.

Várias classes de folha de estilo 960.gs foram adicionadas ao código para indicar quantas
colunas da grade de cada elemento deve esticar transversalmente. Como você viu neste
capítulo, a folha de estilo 960.gs usa o flutuador
propriedade para posicionar os blocos ao lado do outro.

No início da página, o cabeçalho usa posicionamento fixo (o que significa que ele não se mover
quando o usuário rola para baixo da página). o z-índice
propriedade é adicionada ao cabeçalho para mantê-lo no topo do conteúdo restante como o

usuário rola para baixo a página.

Tanto o cabeçalho e rodapé estão contidas dentro de < div> elementos que se estendem a toda a
largura da página. Dentro desses elementos de contêiner sentar-se outros elementos que usam as
classes a partir da folha de estilo 960.gs para garantir que os itens no cabeçalho e rodapé alinhar
com o resto do conteúdo.

O artigo de fundo ocupa toda a largura da página. o push_7

e push_9 aulas fazem parte da folha de estilo 960.gs e são utilizadas no artigo de fundo
para mover o cabeçalho e conteúdo para este artigo para a direita.

Sob o artigo principal você pode ver quatro blocos, cada um dos quais é de 3 colunas de largura.

Estes contêm imagens seguidas de links para mais artigos.

Este exemplo também usa imagens de fundo para criar um fundo texturizado para a página e
cabeçalho, e também para conter as imagens para o artigo de fundo. Você vai aprender mais
sobre isso no próximo capítulo.

Observe: Se você ver este exemplo no Internet Explorer 6, os PNGs transparentes usadas
neste projeto pode ter um fundo cinza. Para saber mais sobre esse problema, visite o site que
acompanha este livro, onde você pode encontrar um JavaScript simples que corrige esse
problema.

LAYOUT
398
 exemplo
traçado

<! DOCTYPE html

<html>
<Head>
<Title> traçado </ title>
<Link rel = tipo "estilo" = "text / css" href = "css / 960_12_col.css" /> <style type = "text / css">

@Tipo de letra {
font-family: 'QuicksandBook';
src: url ( 'fonts / Quicksand_Book-webfont.eot');
src: ( '? fonts / Quicksand_Book-webfont.eot #iefix') url 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 '); fonte
de peso: normal; font-style: normal;} body {

cor: #ffffff;
background: # 413f3b url ( "images / bg.jpg"); font-family: Georgia, "Times New
Roman", Times, serif; fonte de tamanho: 90%; margem: 0px;

text-align: center;} a {

color: # b5c1ad;
text-decoration: none;} a: hover {

cor: #ffffff;}
. cabeçalho {
background-image: url ( "images / bg-header.jpg"); padding: 0px 0px 0px
0px; altura: 100 p; posição: fixo; superior: 0px; largura: 100%; índice z:
50;}

. nav {
float: right;
font-family: QuicksandBook, Helvetica, Arial, sans-serif;

399 DISPOSIÇÃO
 exemplo
traçado

padding: 45px 0px 0px 0px; text-align:

right;}
. invólucro {largura: 960;
margin: 0px auto;

background-image: url ( "images / bg-triangle.png"); background-repeat:

no-repeat; fundo posições: 0px 0px; text-align: left;}

. logotipo {

-margem inferior: 20 p;} h1, h2 {

font-family: QuicksandBook, Helvetica, Arial, sans-serif; fonte de peso: normal;

text-transform: uppercase;} h1 {

tamanho da fonte: 240%; margem

superior: 140px;}

. encontro {

font-family: Arial, Helvetica, sans-serif; fonte de tamanho: 75%;

color: # b5c1ad;}

. introdução {clear: left; fonte de

tamanho: 90%; A linha-altura:
1.4em;}

. história principal {
background-image: url ( "images / triangles.png"); background-repeat:
no-repeat; fundo posições: 122px 142px; altura: 570px;}

. mais-artigos {
border-top: # ffffff sólido 1px; padding: 10px;}

. mais artigos P-{

border-bottom: 1px solid # 807c72; padding: 5px
0px 15px 0px; fonte de tamanho: 80%;}

LAYOUT
400
 exemplo
traçado

. mais-artigos p: last-child {border-bottom:

none;}
. rodapé {clear: both;

fundo: rgba (0, 0, 0, 0,2); padding: 5px 10px;}

. rodapé p {
font-family: Helvetica, Arial, sans-serif; fonte de tamanho: 75%;
text-align: right;}

. rodapé a {
color: # 807c72;}
</ Style> </
head> <body>

<Div class = "header">

<Div class = "container_12">
<Div class = "grid_5">
<Img src = "images / logo.png" alt = "Pedal mais rapidamente - A revista bicicleta moderna"
largura = "216" altura = "37" classe = "logo" />
<Img src = "imagens /-cabeçalho triangle.png" alt = "" largura = "116" altura = "100" /> </ div>

<Div class = "nav grid_7">

<a href=""> casa </ a> / <a href=""> notícia </ a> / <a href=""> arquivo </ a> /
<a href=""> sobre </ a> / <a href=""> contato </ a> </ div> </ div> </ div>

<Div class = "wrapper">

<Div class = "main-história container_12">
<Div class = "push_6 grid_6">
<H1> <a href=""> Engrenagem fixa para sempre </ a> </ h1> </ div>

<Div class = "introdução grid_3 push_9">

<P class = "date"> 16 de abril de 2011 </ p> <p> O veloheld combina um design minimalista com excelente qualidade.
Destituído de
gráficos excessivos e componentes de mudança de velocidades, a gama de produtos veloheld nos deleita com a sua
beleza e simplicidade ... </ p>

401 LAYOUT
 exemplo
traçado

</ Div>
</ Div> <! - .main andares ->
<Div class = "mais-artigos container_12">
<H2 class = "grid_12"> <a href=""> mais artigos </ a> </ h2> <div class = "grid_3">

<Img src = "imagens / more1.jpg" alt = "O caminho à frente" largura = "220" altura = "125" /> <p> <a href=""> On the Road:
do ponto de vista do fanático artes fixas </ a> </ p> <p> <a href=""> Histórico Marca: Ciclos Pashley - mão-construído na Inglaterra </ a>
</ p> <p> <a href=""> Guerras Quadro: inovações na fabricação de ciclo e reparação </ a> </ p> </ div>

<Div class = "grid_3">

<Img src = "imagens / more2.jpg" alt = largura "desenho" = "220" altura = "125" /> <p> <a href=""> Diário Touring: Um
caderno em sua cesta </ a> </ p> <p> <a href=""> Top Ten Newcomers para 2012: Uma espiada no que está por vir </ a> </ p>
<p> <a href=""> InnerTube: Os melhores vídeos de ciclismo na web </ a> </ p> </ div>

<Div class = "grid_3">

<Img src = "images / more3.jpg" alt = largura "Oficina sinal" = "220" height = "125" /> <p> <a href=""> Revisão do produto:
Todas as cestas não foram criados iguais </ a> </ p> <p> <a href=""> Going Public: Out & amp; Sobre com o fundador do Público </ a>
</ p> <p> <a href=""> Ciclo pista Defesa: Conheça os seus direitos </ a> </ p> </ div>

<Div class = "grid_3">

<Img src = "imagens / more4.jpg" alt = largura "Schwinn cabeça-quente" = "220" altura = "125" /> <p> <a href=""> Bicyle Hall
of Fame: The 1958 Schwinn Spitfire </ a> </ p> <p> <a href=""> Reader Survey: Compartilhe seus pensamentos com a gente! </ a> </
p> <p> <a href=""> Grupo Chain: A evolução da corrente de bicicleta modesta </ a> </ p> </ div>

</ Div> <! - .mais-artigos -> </ div> <! -

.wrapper -> <div class = "footer clearfix">

<Div class = "container_12">

<P class = "grid_12"> <a href=""> Informação legal </ a> | <a href=""> Privacidade
Política </ a> | <a href=""> Copyright & copy; Pedal Faster 2011 </ a> </ p> </ div> </ div> </ body> </ html>

LAYOUT
402
 resumo
traçado

X <Div> elementos são muitas vezes utilizados como contendo elementos para

agrupar as secções de uma página.

X páginas de exibição navegadores em fluxo normal, a menos que

especificar, ou posicionamento relativo, absoluta fixa. o

X flutuador propriedade move o conteúdo para a esquerda ou direita da

página e pode ser usado para criar layouts de várias colunas. (Itens flutuou

requerem uma largura definida.) Páginas podem ser de largura fixa ou líquido

X layouts (alongadas).

X Designers manter páginas dentro 960-1000 pixels de largura,

e indicar o que o site é sobre dentro do top 600 pixels (para

demonstrar a sua relevância sem rolagem). Grids ajudar a criar

X projetos profissionais e flexíveis.

X CSS Frameworks fornecer regras para tarefas comuns.

X Você pode incluir vários arquivos CSS em uma página.

 16
imagens

X tamanho controlar de imagens em CSS

X Alinhando imagens em CSS
X Adicionando imagens de fundo
 Controlando o tamanho eo alinhamento de suas
imagens usando CSS mantém regras que afetam a
apresentação de sua página na CSS e fora da
marcação HTML.

Você também pode conseguir vários efeitos interessantes usando imagens de

fundo. Neste capítulo, você vai aprender a:

● Especificar o tamanho e o alinhamento de uma imagem usando

● Adicionar imagens de fundo a caixas

● Criar sobreposições de imagens em CSS

407 IMAGENS
IMAGENS 408
 controlo do tamanho de imagens em
artigo
css

Você pode controlar o tamanho de uma

capítulo-16 / imagem-sizes.html HTML
imagem usando o largura e

altura propriedades em CSS, assim como você <Img src = "images / magnólia-large.jpg"
pode, por qualquer outra caixa. class = "grande" alt = "Magnolia" /> <img src =
"images / magnólia-medium.jpg"
Especificando os tamanhos de imagem ajuda class = "medium" alt = "Magnolia" /> <img src =
páginas para carregar mais suavemente porque o "images / magnólia-small.jpg"
código HTML e CSS, muitas vezes vai carregar class = "pequeno" alt = "Magnolia" />
antes as imagens, e dizendo ao navegador como

muito espaço para sair para uma imagem permite

que ele para tornar o resto da página sem

CSS
esperar a imagem para baixar .

img.large {
largura: 500 pixels;
altura: 500px;}
Você pode pensar que seu site é susceptível de ter {img.medium
imagens de todos os tamanhos diferentes, mas um largura: 250 pixels;
monte de sites de usar a mesma imagem de altura: 250 pixels;}
tamanho em muitos dos seus páginas. {img.small
largura: 100 p; altura:
100 p;}
Por exemplo, um site de e-commerce tende a

mostrar fotos de produtos com o mesmo tamanho.

Ou, se o site é projetado em uma grade, então você

pode ter uma seleção de tamanhos de imagem que

são comumente usados ​em todas as páginas, tais

como:

Retrato pequeno: 220 x 360

Pequeno paisagem: 330 x 210 foto
Feature: 620 x 400

Sempre que você usar imagens tamanho

consistente através de um site, você pode
usar CSS para controlar as dimensões das
imagens, em vez de colocar as dimensões
no HTML.

409 IMAGENS
 artigo

Primeiro você precisa determinar os tamanhos de

Resultado
imagens que serão usadas comumente em todo o

site, em seguida, dar cada tamanho de um nome.

Por exemplo:
pequeno

médio

grande

Onde o < img> elementos aparecem

no HTML, em vez de usar largura e altura

atributos que você pode usar estes nomes

como valores para o classe

atributo.

No CSS, você adicionar seletores para cada um

dos nomes de classe, em seguida, usar o CSS largura

e altura

Propriedades para controlar as dimensões da

imagem.

IMAGENS410
410
 Alinhando imagens usando
artigo
css

No último capítulo, você viu como o flutuador propriedade

capítulo-16 / alinhando-images.html HTML
pode ser usada para mover um elemento para a

esquerda ou direita do seu bloco contendo, <P> <img src = "images / magnólia-medium.jpg"
permitindo que o texto fluir em torno dele. alt = "Magnolia" class = "alinhar-esquerda médio" /> <b> <i> Magnólia </ i> </
b> é um grande género que contém mais de 200 espécies de plantas com flores ... </
p> <p> <img src = "images / magnólia-medium.jpg"
Ao invés de usar o < img>
elemento de alinhar atributo, página web autores alt = "Magnolia" class = "medium alinhar-direito" />
estão usando cada vez mais a flutuador propriedade Algumas magnólias, tais como < i> Magnolia stellata </ i>
para alinhar as imagens. Há duas maneiras que e < i> Magnolia soulangeana </ i> , flor muito cedo na primavera antes das folhas
este é comumente atingidos: abertos ... </ p>

1: A flutuador propriedade é adicionado à

CSS
classe que foi criado para representar o
tamanho da imagem (tal como o pequeno classe img.align-esquerda {
no nosso exemplo). float: left; margin-right: 10px;}
img.align-direita {

2: Novas classes são criadas com nomes float: right; margin-left: 10px;}
como alinhar à esquerda ou {img.medium
alinhar com o botão direito para alinhar as imagens

para a esquerda ou direita da página. Estes largura: 250 pixels; altura:

nomes de classe são usados ​além das aulas que 250 pixels;}

indicam o tamanho da imagem.

Resultado
Neste exemplo você pode ver a
alinhar à esquerda e alinhar com o botão direito

as classes usadas para alinhar a imagem.

Também é comum adicionar uma margem

para a imagem para garantir que o texto não
toca suas bordas.

411 IMAGENS
 centrando Imagens
artigo
usando CSS

Por padrão, as imagens são elementos inline.

HTML capítulo-16 / centragem-images.html
Isso significa que eles fluam dentro do texto
<P> <img src = "images / magnólia-medium.jpg" circundante. A fim de centralizar uma imagem,
alt = "Magnolia" class = "medium alinhar-center" /> <b> <i> Magnólia </ i> </ b> é ela deve ser transformado em um elemento
um grande género que contém mais de 200 espécies de plantas de floração. É blocklevel usando o exibição
nomeado após o botânico francês Pierre Magnol e, tendo evoluído antes abelhas
apareceu, as flores foram desenvolvidos para incentivar a polinização pelo besouro. </ propriedade com um valor de quadra.

p>
Uma vez que foi feita em um elemento nível de

bloco, existem duas maneiras comuns em que

você pode centralizar horizontalmente uma

imagem:

1: On o elemento que contém, você pode

CSS
usar o alinhamento de texto

img.align-center { propriedade com um valor de Centro.

display: block; margin: 0px

auto;} {img.medium 2: Na própria imagem, você pode usar o uso
do margem propriedade e definir os valores
largura: 250 pixels; das margens esquerda e direita para auto.
altura: 250 pixels;}

Você pode especificar nomes de classes que

permitem que qualquer elemento a ser centrado,

da mesma forma que você pode para as

dimensões ou o alinhamento de imagens.

Resultado

As técnicas para especificar o tamanho da

imagem eo alinhamento de imagens também

pode ser usado com o HTML5 < figure> elemento,

que você conheceu na página 119.

IMAGENS 412
412
 Imagens de fundo
imagem de fundo

o imagem de fundo
capítulo-16 / background-image-body.html CSS
propriedade permite que você coloque uma imagem

por trás de qualquer elemento HTML. Esta poderia body {

ser a página inteira ou apenas parte da página. Por background-image: url ( "images / pattern.gif");}
padrão, uma imagem de fundo será repetida para

preencher a caixa inteira.

O caminho para a imagem segue as

Resultado
letras url, e é colocado entre
parênteses e aspas.

Aqui está o bloco de

imagem usada neste

exemplo.

No primeiro exemplo, você pode ver uma

imagem de fundo a ser aplicada a uma
capítulo-16 / background-image-element.html CSS
página inteira (porque o seletor CSS
aplica-se ao < body> elemento). No segundo p{
exemplo, a imagem de fundo apenas se background-image: url ( "images / pattern.gif");}
aplica a um parágrafo.

Se você busca on-line, você vai encontrar

Resultado
muitos dos recursos que oferecem texturas de

fundo que você pode usar em suas páginas.

As imagens de fundo são muitas vezes a última

coisa sobre a página para carregar (o que pode

fazer um site parecer lento para carregar). Tal

como acontece com quaisquer imagens que você

usa on-line, se o tamanho do arquivo é grande,

levará mais tempo para download.

413 IMAGENS
 repetindo Imagens
artigo
background-repeat
background-attachment
o fundo de repetição
CSS capítulo-16 / background-repeat.html
propriedade pode ter quatro valores:

body {
background-image: url ( "images / header.gif"); background-repeat:
repetir
repeat-x;}
A imagem de fundo é repetido tanto
horizontalmente e verticalmente (a
forma padrão é mostrado se o fundo de
repetição propriedade não é usada).

Resultado

repeat-x
A imagem é repetida somente na horizontal

(como mostrado no primeiro exemplo da

esquerda).

repetir-y
A imagem é repetida apenas verticalmente.

CSS capítulo-16 / background-attachment.html

body { no-repeat
background-image: url ( "images / tulip.gif"); background-repeat: A imagem é exibida apenas uma vez.

no-repeat; fundo-anexo: fixo;}

o background-attachment
propriedade especifica se uma imagem de

fundo deve ficar em uma posição ou mover-se

como o usuário rola para cima e para baixo da

Resultado
página. Ele pode ter um de dois valores:

fixo
A imagem de fundo permanece na
mesma posição na página.

rolagem
A imagem de fundo se move para cima e para

baixo como o usuário rola para cima e para baixo

da página.

IMAGENS414
414
 posição de fundo
-fundo posição

Quando uma imagem não está sendo

capítulo-16 / background-position.html CSS
repetido, você pode usar o

-fundo posição body {

propriedade para especificar onde na janela background-image: url ( "images / tulip.gif"); background-repeat:
do browser a imagem de fundo deve ser no-repeat; background-position: top center;}
colocado.

Esta propriedade tem geralmente um par

de valores. O primeiro representa a
Resultado
posição horizontal e o segundo
representa a vertical.

deixou topo centro

esquerda inferior

central centro centro

superior inferior

direito superior

capítulo-16 / background-position-percentage.html CSS

centro-direita inferior
body {
direito
background-image: url ( "images / tulip.gif"); background-repeat:
no-repeat; fundo posições: 50% a 50%;}

Se você especificar apenas um valor, o segundo

Resultado
valor será o padrão para

Centro.

Você também pode usar um par de pixels ou

porcentagens. Estes representam a distância a

partir do canto superior esquerdo da janela do

navegador (ou contendo box). O canto superior

esquerdo é igual a 0% 0%. O exemplo mostrado,

com valores de

50% a 50%, centraliza a imagem

horizontalmente e verticalmente.

415 IMAGENS
 artigo
forma abreviada
fundo

o fundo propriedade age como um

CSS capítulo-16 / background-shorthand.html
atalho para todas as outras
body { propriedades do fundo você acabou de
background: url #ffffff ( "images / tulip.gif") ver, e também a
canto superior direito no-repeat;} cor de fundo propriedade.

As propriedades devem ser especificados na

seguinte ordem, mas você pode perder qualquer

valor se você não quiser especificá-lo.

Resultado

1: cor de fundo
2: imagem de fundo
3: fundo de repetição
4: background-attachment
5: -fundo posição

CSS3 também apoiará o uso de

múltiplas imagens de fundo,
repetindo o fundo
forma abreviada. Porque alguns navegadores

suportados esta propriedade no momento da

escrita, não era comumente usado.

div {
fundo:
url (exemplo-1.jpg) superior
esquerdo no-repeat, url
(exemplo-2.jpg) inferior esquerda
no-repeat, url (exemplo-3.jpg)
superior central repeat-x;}

A primeira imagem é mostrada no topo, com

a última na parte inferior.

IMAGENS416
416
 artigoimagens & Sprites
rolar

Usando CSS, é possível criar um link ou botão

capítulo-16 / imagem-capotamentos-and-sprites.html HTML
que muda para um segundo estilo quando um
usuário move o mouse sobre ele (conhecido <a class="button" id="add-to-basket">
como Adicionar a cesta </ a>
rolar) e um terceiro estilo quando eles clique <a class="button" id="framing-options">
sobre ele. opções de enquadramento </ a>

Isto é conseguido através da criação uma

imagem de fundo para o link ou botão que
CSS
tem três estilos diferentes do mesmo botão
(mas só permite espaço suficiente para a.button {altura: 36 px;
mostrar um deles de cada vez). Você pode
ver a imagem que estamos usando neste background-image: url ( "images / botão-sprite.jpg"); text-indent: -9999px;
exemplo à direita. Ele realmente possui dois display: inline-block;} a # add-ao carrinho {
botões na imagem um.

largura: 174px;
background-position: 0px 0px;} Um #
Quando o usuário move o mouse enquadramento-opções {
sobre o elemento, ou clica nele, a largura: 210px;
posição da imagem de fundo é movido background-position: 0px -175px;} adicionar-se uma
para mostrar a imagem relevante. cesta #: hover {
background-position: 0px -40px;} A #
enquadramento-opções: hover {
Quando uma única imagem é utilizado para várias background-position: -175px -40px;} a # add-a-cesta:
partes diferentes de uma interface, que é active {
conhecido como um Sprite. background-position: 0px -80px;} A #
Você pode adicionar o logotipo e outros enquadramento-opções: active {
elementos da interface, bem como botões para fundo posições: -80px -175px;}
a imagem.

A vantagem de usar sprites é que o

navegador só precisa solicitar uma imagem
em vez de muitas imagens, que podem fazer
o carregamento da página web mais rápido.

417 IMAGENS
 artigo

Neste exemplo, você pode ver dois links que

Sprite imagem completa
parecem botões. Cada um dos botões tem três
estados diferentes. Estes são todos
representados em uma única imagem.

Porque o < a> elemento é um elemento

inline, vamos definir o
exibição propriedade desses links para

indicar que eles devem ser

inline-bloco elementos. Isso nos permite

especificar a largura e altura de cada < a> elemento

Resultado
para que ele corresponda ao tamanho do
seu botão correspondente.

o -fundo posição
propriedade é usada para mover a
imagem, a fim de mostrar o botão no
estado certo.

Quando o usuário passa o mouse sobre um

link, a: flutuar pseudo-classe tem uma regra

que move o

-fundo posição da imagem para mostrar

um estado diferente para esse botão.

Da mesma forma, quando o usuário clica no

link, a: ativo pseudoclass tem uma regra para
mostrar o terceiro estado para esse botão.

dispositivos de tela de toque não vai mudar o

estado de um link quando o usuário passa

sobre ele, como as telas ainda não tem uma

maneira de dizer quando o usuário está

pairando. No entanto, eles vão mudar a sua

aparência quando o usuário ativa-los.

IMAGENS418
418
 artigo gradientes
css3:
imagem de fundo

CSS3 vai introduzir a capacidade de

capítulo-16 / gradient.html CSS
especificar um gradiente para o fundo
de uma caixa. O gradiente é criado # Gradiente {
usando a / * Cor fallback * /
imagem de fundo propriedade e, no background-color: # 66CCCC;
momento da escrita, diferentes / * Imagem substituta * /
navegadores exigida uma sintaxe background-image: url (images / fallback-image.png);
diferente. / * Firefox 3.6+ * /
background-image: -moz-linear de gradiente (# 336666,
Uma vez que não é suportado por todos os # 66CCCC);
navegadores, é possível especificar uma / * Safari 4+, Chrome 1+ * /
imagem de fundo para a primeira caixa (o que imagem de fundo: -webkit de gradiente (linear, 0% 0%,
representaria o gradiente) e, em seguida, 0% a 100%, a partir de (# 66CCCC), a (# 336666));
fornecer as alternativas CSS para navegadores / * Safari 5.1+, o Chrome 10+ * /
que suportam gradientes. background-image: -webkit-linear de gradiente (# 336666,
# 66CCCC);
/ * Opera 11.10+ * /
Nesta página, estamos nos concentrando em background-image: -o-linear de gradiente (# 336666,
gradientes lineares. Você pode ver que, a fim # 66CCCC); altura:
150 pixels; largura:
de criar um gradiente linear, precisamos
300 x;}
especificar duas cores (que o gradiente está

entre).

Resultado
Alguns navegadores permitem que você

especifique o ângulo do gradiente, ou mesmo

diferentes tipos de gradientes (tais como

gradientes radiais), mas o apoio não é tão

difundido que para gradientes lineares.

419 IMAGENS
 contraste de fundo
Imagens

Se você quiser sobrepor texto em uma imagem de fundo, a imagem deve ser de baixo contraste para
que o texto seja legível.

alto contraste baixo contraste tela

Uma imagem de Uma imagem de Uma tela adicionado a

fundo de alto fundo de baixo imagem de contraste de

contraste torna o contraste torna o um alto torna o texto

texto difícil de ler. texto mais fácil de ler. mais fácil de ler.

A maioria das fotografias têm bastante alto aplicativos de edição de imagem como o Para sobrepor texto em uma imagem com alto

contraste, o que significa que eles não são Photoshop e GIMP tem ferramentas que permitem contraste, você pode colocar uma cor de fundo

ideais para uso como imagem de fundo. a você ajustar manualmente as imagens para ter semi-transparente (ou "screen") por trás do

um contraste mais baixo. texto para melhorar a legibilidade.

IMAGENS
420
421 IMAGENS
 exemplo
imagens

Este exemplo demonstra como usar CSS para criar um layout

galeria de imagens simples.

Uma textura do fundo é aplicado a toda a página, repetindo uma imagem com a
textura atrás do < body> elemento. Uma imagem de fundo de repetição é por vezes
referido como papel de parede.

O conteúdo da página é colocado dentro de um < div> elemento cuja classe é

embrulho. Isto é usado para corrigir a largura da página para 720 pixels. Suas margens esquerda e

direita são definidas como auto para centralizá-la no meio da tela.

As imagens sentar-se dentro de um HTML5 < figure> elemento, e suas legendas são
fornecidas no < figcaption> elemento. CSS é usado para definir as dimensões e cor de fundo
para cada < figure> elemento. As dimensões das imagens em si também são criados usando
CSS, e eles são dadas uma borda cinza único pixel.

Para as legendas, uma imagem de fundo é usado para a esquerda do texto. Nós não queremos esta

imagem para preencher o fundo para que especifique que não deve repetir. Padding é usado para a

esquerda do texto para que as palavras não passar por cima da imagem de fundo.

Cada um dos < figure> elementos está contido dentro de um < div>, que tem duas finalidades. Em primeiro

lugar, ele é usado para criar a disposição três-coluna especificando uma largura e margens para o

elemento flutuante e, em seguida, para a esquerda. Em segundo lugar, ele adiciona uma sombra sutil

por baixo de cada imagem. Isso cria uma aparência tridimensional fazendo com que pareça um pedaço

de cartão. Para garantir que este se senta debaixo da imagem, a backgroundposition propriedade é

usada.

IMAGENS
422
 exemplo
imagens

<! DOCTYPE html>

<html>
<Head>
<Title> imagens </ title> <style type =
"text / css">
body {
color: # 665544;
background-color: # d4d0c6;
background-image: url ( "images / backdrop.gif"); font-family: Georgia,
"Times New Roman", serif; text-align: center;}

. invólucro {largura: 720px;

margin: 0px auto;}

. cabeçalho {
margem: 40px 0px 20px 0px;}
. entrada {
largura: 220px; float:
left; margem: 10px;
altura: 198px;

background-image: url ( "images / shadow.png");

background-repeat: no-repeat; fundo posições: inferior;} {figura

display: block; largura:

202px; altura: 170
pixels;
background-color: # e7e3d8; padding:
9px; text-align: left;} figura img {

largura: 200 px;

altura: 150 pixels;
border: 1px solid # d6d6d6;} {figcaption

background-image: url ( "images / icon.png"); padding-left: 20px;

background-repeat: no-repeat;}
</ Style>

423 IMAGENS
 exemplo
imagens

</ Head>
<body>
<Div class = "wrapper">
<Div class = "header">
<Img src = "images / title.gif" alt = largura "Galerie Botanique" = "456" height = "122" /> <p> Aqui está uma seleção de antigas
gravuras botânicas realizadas em nossa coleção. </ p> </ div>

<Div class = "entrada">

<Figura> <img src = "images / print-01.jpg" alt = "Helianthus" />
<Figcaption> Helianthus </ figcaption> </ figurar> </ div>

<Div class = "entrada">

<Figura> <img src = "images / print-02.jpg" alt = "Passiflora" />
<Figcaption> Passiflora </ figcaption> </ figurar> </ div>

<Div class = "entrada">

<Figura> <img src = "images / print-03.jpg" alt = "Nyctocalos" />
<Figcaption> Nyctocalos </ figcaption> </ figurar> </ div>

<Div class = "entrada">

<Figura> <img src = "images / print-04.jpg" alt = "Polianthes" />
<Figcaption> Polianthes </ figcaption> </ figurar> </ div>

<Div class = "entrada">

<Figura> <img src = "images / print-05.jpg" alt = "Ficus" />
<Figcaption> Ficus </ figcaption> </ figurar> </
div>

<Div class = "entrada">

<Figura> <img src = "images / print-06.jpg" alt = "Dendrobium" />
<Figcaption> Dendrobium </ figcaption> </ figurar> </ div>
</ div> </ body> </ html>

IMAGENS
424
 resumo
imagens

X Você pode especificar as dimensões das imagens usando CSS.

Isto é muito útil quando você usa as mesmas imagens de tamanho em

várias páginas do seu site.

X As imagens podem ser alinhados horizontalmente e verticalmente

usando CSS.

X Você pode usar uma imagem de fundo por trás da caixa

criado por qualquer elemento em uma página.

X imagens de fundo pode aparecer apenas uma vez ou ser

repetido através do fundo da caixa. Você pode criar efeitos de

X imagem em movimento, movendo o

posição de fundo de uma imagem.

X Para reduzir o número de imagens o seu browser tem de

de carga, você pode criar sprites de imagem.
 17
HTML5 layout

X elementos de layout HTML5

X Como navegadores idade compreender novos elementos
X Styling elementos de layout HTML5 com CSS
 HTML5 é a introdução de um novo conjunto de elementos que

ajudam a definir a estrutura de uma página.

Eles são cobertos aqui (em vez de com os outros elementos HTML que você conheceu

no início do livro), porque você vai encontrá-lo mais fácil de entender como eles podem

ser usados ​agora que você já viu como o CSS pode controlar o layout de uma página.

Estes novos elementos vão desempenhar um papel importante na criação de layouts

daqui para frente. Neste capítulo, você verá:

● Os novos elementos de layout HTML5 e seus usos

● Como eles oferecem alternativas de votos para o <Div> elemento

● Como garantir navegadores mais antigos reconhecer esses elementos

Tal como acontece com todos os conteúdos HTML5 e CSS3, seu uso ainda está sujeita a

alterações, mas já está sendo amplamente utilizado por desenvolvedores web e é provável

que você vai querer usá-los.

429 HTML5 LAYOUT

HTML5 LAYOUT 430
 Layouts HTML tradicional

Por um longo tempo, página web autores utilizaram < div> elementos para agrupar elementos relacionados

entre si sobre a página (tais como os elementos que formam um cabeçalho, um artigo, rodapé ou lateral).

autores utilizaram classe ou identidade atributos para indicar o papel do < div> elemento na estrutura da

página.

À direita, você pode ver um layout que é <Body>

bastante comum (especialmente em

<Div id =" página ">
sites de blog).
<Div id =" cabeçalho ">

No topo da página é o cabeçalho,

contendo um logotipo e de navegação
<Div id =" nav ">
primária.

Sob este são um ou mais artigos ou posts. <Div id =" conteúdo "> <Div id = " Barra
Lateral ">
Por vezes, estes são resumos que apontam
=" artigo ">
para mensagens individuais.

Há uma barra lateral no lado direito (talvez

com uma opção de pesquisa, links para
outros artigos recentes, outras seções do <Div class =" artigo "> <Div class

site, ou mesmo anúncios).

Quando a codificação um site como este, os

desenvolvedores normalmente seria colocar

esses principais seções da página dentro < div> elementos <Div id =" rodapé ">

e usar o classe ou identidade atributos para indicar

o propósito de que parte da página.

431 HTML5 LAYOUT

 Novo layout HTML5
elementos

HTML5 introduz um novo conjunto de elementos que lhe permitem dividir as partes de uma página. Os
nomes destes elementos indicam o tipo de conteúdo que você vai encontrar neles. Eles ainda estão
sujeitos a alterações, mas isso não impediu que muitos autores de páginas web usando-os já.

<Body> Este exemplo tem exatamente a mesma

estrutura como visto na página anterior. No
<Div id =" página ">
entanto, muitos dos < div> elementos foram
<Header>
substituídos por novos elementos de layout
HTML5.

<Nav>

Por exemplo, o cabeçalho fica dentro de uma

<Div id =" conteúdo "> nova < header> elemento, a navegação em um < nav>
<Aside>

<article>
elemento, e os artigos estão em
indivíduo < article> elementos.

O ponto de criar estes novos elementos é

para que página web autores pode usá-los
<Article> para ajudar a descrever a estrutura da
página. Por exemplo, o software leitor de
tela pode permitir que os usuários a
ignorar os cabeçalhos e rodapés e ir direto
para o conteúdo. Da mesma forma, os
motores de busca pode colocar mais peso
<Footer> sobre o conteúdo em um

<Artigo> elemento do que no < header>

ou < footer>
elementos. Eu acho que você vai concordar que

ele também torna o código mais fácil de seguir.

HTML5 LAYOUT 432

 Cabeçalhos e rodapés
<Header> <footer>

o < header> e < footer>

capítulo-17 / example.html HTML
elementos pode ser usado para:

<Header>
● A principal cabeçalho ou rodapé
<H1> Cozinha de Yoko </ h1> <nav>
que aparece na parte superior ou
inferior de cada página no site.
<Ul>
<li> <a href="" class="current"> casa </ a> </ li> <li> <a href=""> aulas </ a>
● Um cabeçalho ou rodapé de uma
</ li> <li> <a href=""> refeições </ a> </ li> <li> <a href=""> sobre </ a> </ li>
indivíduo < article> ou
<li> <a href=""> contato </ a> </ li> </ ul> </ nav> </ header>
<Section> dentro da página.

Neste exemplo, o < header>

elemento usado para conter o nome do site
ea navegação principal. o < footer> elemento
contém informações sobre direitos autorais,
juntamente com links para a política de
privacidade e termos e condições. Cada
indivíduo < article> e capítulo-17 / example.html HTML

<Footer>
<Section> elemento também pode ter
&cópia de; 2011 Cozinha de Yoko
seu próprio < header> e
</ Footer>
<Footer> elementos para armazenar as

informações de cabeçalho ou rodapé para essa

seção dentro da página.

Por exemplo, em uma página com

vários posts, cada post individual pode
ser pensado como uma seção
separada. o
<Header> elemento pode, portanto, ser

usadas para conter o título e a data de

cada posto individual e o < footer> pode
conter links para compartilhar o artigo em
sites de redes sociais.

Por favor note que todo o código

mostrado neste capítulo é
referenciado em um documento
HTML que é chamado:
html5-layout.html

433 HTML5 LAYOUT

 navegação
artigo
<Nav>

o < nav> elemento é utilizado para conter

HTML capítulo-17 / example.html
os principais blocos de navegação no
<Nav> local, tais como a navegação principal
<Ul> local.
<li> <a href="" class="current"> casa </ a> </ li> <li> <a href=""> aulas </ a>
</ li> <li> <a href=""> refeições </ a> </ li> <li> <a href=""> sobre </ a> </ li> Voltando ao nosso exemplo blog, se você
<li> <a href=""> contato </ a> </ li> </ ul> </ nav> queria terminar um artigo com links para posts
relacionados, estes não seria contado como
grandes blocos de navegação e, portanto, não
deve sentar-se no interior de um

<Nav> elemento.

No momento da escrita, alguns dos

desenvolvedores que já estavam usando
HTML5 decidiu usar o
<Nav> elemento para os links que aparecem na

parte inferior de cada página (links para coisas

como política de privacidade, termos e

condições e informações de acessibilidade).

Se isso vai ser amplamente adotado ainda

está por ser visto.

HTML5 LAYOUT 434 434

 artigos
<Artigo>

o < article> elemento atua como um recipiente

capítulo-17 / example.html HTML
para qualquer seção de uma página que

poderia ficar sozinho e, potencialmente, ser <Artigo>

distribuído. <Figure>
<Img src = "images / bok-choi.jpg" alt = "Bok Choi" /> <figcaption> Bok Choi </
Este poderia ser um artigo ou blog entrada figcaption> </ figure> <hgroup>
indivíduo, um comentário ou fórum post, ou

qualquer outra peça independente de

conteúdo. <H2> Vegetariana japonês </ h2> <h3> Cinco curso de uma semana
em Londres </ h3> </ hgroup> <p> A introdução cinco semanas ao
Se uma página contém vários artigos (ou até tradicional
mesmo resumos de vários artigos), então cada
artigo individual viveria dentro de sua própria refeições vegetarianas japoneses, ensinando-lhe uma seleção de
arroz e macarrão pratos. </ p> </ article> <article>
<Artigo> elemento.

o < article> elementos podem mesmo ser <Figure>

encaixadas uma dentro da outra. Por <Img src = "images / teriyaki.jpg"
exemplo, um blog pode viver dentro de um alt = "molho Teriyaki" /> <figcaption> molho Teriyaki </ figcaption>
< article> </ figure> <hgroup>
elemento e cada comentário no artigo
poderia viver dentro de seu próprio filho < article>
elemento. <H2> molhos Masterclass </ h2> <h3> workshop de um dia </ h3> </ hgroup>
<p> Um curso intensivo de um dia olhando como

criar os mais deliciosos molhos para uso em uma variedade da culinária

japonesa. </ p> </ article>

435 HTML5 LAYOUT

 artigo
apartes
<Aside>

o < aside> elemento tem dois propósitos,

HTML capítulo-17 / example.html
dependendo se ele está dentro de um < article>
<Aside>
<Section class = "populares de Receitas"> elemento ou não.

<H2> Receitas populares </ h2> <a href=""> Yakitori (frango grelhado) </ a> <a
href=""> Tsukune (picada hambúrgueres de frango) </ a> <a href=""> Okonomiyaki Quando o < aside> elemento é utilizado
(panquecas salgadas) </ a> <a href=""> Mizutaki (guisado de frango) </ a> </ dentro de uma < article>
section> elemento, ele deve conter informações que
está relacionado com o artigo, mas não
essencial ao seu significado geral. Por
<Section class = "CONTATO-detalhes"> exemplo, um glossário pullquote ou pode ser
<H2> Contato </ h2> <p> Cozinha de considerado como um lado para o artigo se
Yoko < br /> refere.
27 Redchurch Rua < br />
Shoreditch < br />
Londres E2 7DP </ p> </ Quando o < aside> elemento é utilizada do

section> </ aside> lado de fora de um < article>

elemento, ele age como um recipiente para o

conteúdo que está relacionado com a página

inteira. Por exemplo, pode conter links para

outras seções do site, uma lista de posts

recentes, uma caixa de pesquisa, ou tweets

recentes pelo autor.

HTML5 LAYOUT 436 436

 Seções
<Section>

o < section> grupos de elementos relacionados

capítulo-17 / example.html HTML
com conteúdo em conjunto, e, normalmente,
cada seção teria seu próprio título. <Section class = "populares de Receitas">
<H2> Receitas populares </ h2> <a href=""> Yakitori (frango grelhado) </ a> <a
href=""> Tsukune (picada hambúrgueres de frango) </ a> <a href=""> Okonomiyaki
Por exemplo, em uma página pode (panquecas salgadas) </ a> <a href=""> Mizutaki (guisado de frango) </ a> </
haver vários < section> section>
elementos para conter diferentes seções
da página, como últimas notícias,
produtos de alta, e boletim de inscrição. <Section class = "CONTATO-detalhes">
<H2> Contato </ h2> <p> Cozinha de
Yoko < br />
Porque o < section> grupos de elementos 27 Redchurch Rua < br />
relacionados com itens em conjunto, pode Shoreditch < br />
conter vários distinta Londres E2 7DP </ p> </
<Artigo> elementos que têm um tema section>
comum ou propósito.

Alternativamente, se você tem uma página

com um longo artigo, o

<Section> elemento pode ser usado

para dividir o artigo em seções

separadas.

o < section> elemento não deve ser utilizado como

um dispositivo de moldagem para a página inteira (a

menos que a página contém apenas uma peça

distinta do conteúdo). Se você quer um elemento

que contém para a página inteira, esse trabalho

ainda melhor é deixada para o < div> elemento.

437 HTML5 LAYOUT

 grupos que dirigem
artigo
<Hgroup>

O objetivo do < hgroup>

HTML capítulo-17 / example.html
elemento é para agrupar um conjunto de
<Hgroup> um ou mais < h1> através
<H2> Vegetariana japonês </ h2> <h3> Cinco curso de uma <H6> elementos de modo que elas são tratadas

semana em Londres </ h3> </ hgroup> como uma única posição.

Por exemplo, o < hgroup>

elemento podia ser utilizado para conter tanto um

título dentro de um < h2>

e um elemento dentro de uma legenda

<H3> elemento.

Este elemento teve uma recepção mista.

Quando foi proposto pela primeira vez
pelo povo em desenvolvimento HTML5,
houve algumas queixas e foi retirado das
propostas HTML5. No entanto, algumas
pessoas mudaram de idéia e foi
adicionado de volta para a língua. Alguns
desenvolvedores não gostam do uso do < hgroup>

elemento, e preferem colocar um

subtítulo dentro de um < p> elemento
(utilizando um atributo a indicar que é um
subtítulo).

Alguns sugerem que é de pouca utilidade a

não ser como um gancho de styling. Tem, no
entanto, sido popular entre os
desenvolvedores, que acreditam que ele é útil
para agrupar o título principal e subtítulo
(como ambos podem ser partes integrantes de
uma mesma posição).

HTML5 LAYOUT 438 438

 figuras
<Figure> <figcaption>

Você já conheceu o < figure>

capítulo-17 / example.html HTML
elemento no Capítulo 5, quando olhamos para as

imagens. Ele pode ser usado para conter qualquer <Figure>

conteúdo que é referenciado a partir do fluxo <Img src = "images / bok-choi.jpg" alt = "Bok Choi" /> <figcaption> Bok Choi </
principal de um artigo (e não apenas imagens). figcaption> </ figure>

É importante notar que o artigo

ainda deve fazer sentido se o
conteúdo do < figure>
foram movidos elemento (a outra parte da página,

ou mesmo para uma página diferente

completamente).

Por esta razão, ele só deve ser usado

quando o conteúdo simplesmente referencia
o elemento (e não por algo que é
absolutamente essencial para o fluxo de
uma página).

Exemplos de utilização incluem:

● imagens

● vídeos

● gráficos

● diagramas

● exemplos de código

● O texto que suporta o principal

corpo de um artigo

o < figure> elemento também deve

conter uma < figcaption>
elemento que proporciona um decription
texto para o conteúdo do < figure> elemento.
Neste exemplo, você pode ver um

<Figure> foi adicionado no interior do < article>

elemento.

439 HTML5 LAYOUT

 seccionamento elementos
artigo
<Div>

Pode parecer estranho para acompanhar estes

HTML capítulo-17 / example.html
novos elementos por revisitar o < div> elemento
<Div class = "wrapper"> novo. (Afinal, os novos elementos são muitas
<Header> vezes vai ser usado em seu lugar.)
<H1> Cozinha de Yoko </ h1> <nav>

<! - o conteúdo nav aqui -> </ nav> </ No entanto, o < div> elemento continuará a ser

header> uma importante forma de agrupar elementos

relacionados entre si, porque você não deve

<Section class = "cursos"> estar usando esses novos elementos que você

<! - o conteúdo seção aqui -> </ section> acabou de conhecer para fins diferentes

<aside> daqueles explicitamente fins.

<! - de lado o conteúdo aqui -> </ aside>

<footer> Onde não há nenhum elemento adequado para

agrupar um conjunto de elementos, o < div> elemento

<! - conteúdo do rodapé aqui -> </ footer> ainda vai ser usado. Neste exemplo, ele é usado

como um wrapper para a página inteira.

</ Div> <! - .wrapper ->

Algumas pessoas têm perguntado por que não

há nenhuma < content> elemento para conter a

parte principal de uma página. A razão é que

qualquer coisa que esteja fora do

<Header>, <footer> ou < aside>

elementos pode ser considerado como o

conteúdo principal.

HTML5 LAYOUT 440 440

 vinculação ao redor
elementos em nível de bloco

HTML5 permite que páginas web autores para

capítulo-17 / example.html HTML
colocar um < a> elemento em torno de um elemento

nível de bloco que contém elementos filhos. Isso <a href="introduction.html">

permite que você transforme um bloco inteiro em um <Artigo>
link. <Figure>
<Img src = "images / bok-choi.jpg"
alt = "Bok Choi" /> <figcaption> Bok Choi </ figcaption>
Este não é um novo elemento HTML5, mas </ figure> <hgroup>
não era visto como um uso correto do < a> elemento
em versões anteriores do HTML.
<H2> Vegetariana japonês </ h2> <h3> Cinco curso de uma semana
em Londres </ h3> </ hgroup> <p> A introdução cinco semanas para
refeições vegetarianas tradicionais japoneses, ensinando-lhe uma
seleção de arroz e macarrão pratos. </ p> </ article> </a>

441 HTML5 LAYOUT

 Ajudando osartigo
navegadores mais antigos entender

navegadores antigos que não sabem os novos

CSS capítulo-17 / example.html
elementos HTML5 vai tratá-los

cabeçalho, seção, rodapé, de lado, nav, artigo, a figura { automaticamente como elementos inline.

Portanto, para ajudar os navegadores mais

display: block;} antigos, você deve incluir a linha de CSS na

esquerda, que afirma que novos elementos

deve ser processado como elementos nível de

bloco.
HTML capítulo-17 / example.html

<! - [if lt IE 9]>

<Script src = "http://html5shiv.googlecode.com/svn/ Além disso, IE9 foi a primeira versão do Internet

trunk / html5.js "> </ script> <! [endif] -> Explorer para permitir que as regras CSS para ser

associado com esses novos elementos de layout

HTML5. A fim de estilo esses elementos usando

versões anteriores do IE, você precisa usar um

JavaScript simples conhecido como o HTML5

shiv ou

calço HTML5.

Você não precisa entender o JavaScript

para usá-lo. Você só pode conectar-se a
uma cópia que o Google hospeda em seus
servidores. Deve ser colocado dentro de um comentário
condicional que verifica se a versão do
browser é inferior a (daí o lt) IE9.

Infelizmente, esta solução exige que

qualquer pessoa usando IE8 ou versões
anteriores do IE tem JavaScript habilitado
no seu browser. Se eles não têm JavaScript
habilitado então eles não serão capazes de
ver o conteúdo desses elementos HTML5.

HTML5 LAYOUT 442 442

443 HTML5 LAYOUT
 exemplo
HTML5 layout

Este exemplo mostra um site de culinária construído usando novos

elementos HTML5 para descrever a estrutura da página (ao invés de
apenas agrupar itens usando < div> elementos).

O cabeçalho e rodapé da página sentar dentro < header> e < footer>

elementos. Os cursos são agrupados dentro de um < section>
elemento que tem uma classe atributo cujo valor é cursos ( para distingui-lo de outros < section>
elementos da página). A barra lateral fica dentro de um < aside> elemento.

Cada um dos cursos vive dentro de um < article> elemento, e usar o

<Figure> e < figcaption> elementos para conter uma imagem. Os títulos para os cursos têm

subtítulos, assim que estes são agrupados dentro de um < hgroup> elemento. Na barra lateral, as
receitas e os dados de contacto são colocados no interior separado < section> elementos.

A página tem o estilo usando CSS. A única diferença é que os nossos seletores estão usando os

novos elementos HTML5 para nos permitir criar regras que se destinam a esses elementos. Para

que o CSS para trabalhar em versões do IE antes Internet Explorer 9, a página HTML5 contém um

link para o HTML5 Shiv JavaScript (hospedado nos servidores do Google) dentro de um comentário

condicional.

HTML5 LAYOUT 444

 exemplo
HTML5 layout

<! DOCTYPE html>

<html>
<Head>
<Title> HTML5 Disposição </ title> <style type
= "text / css">
cabeçalho, seção, rodapé, de lado, nav, artigo, figura, figcaption {
display: block;} corpo {

color: # 666666;
background-color: # f9f8f6;
background-image: url ( "images / dark-wood.jpg"); background-position:
center; font-family: Georgia, vezes, serif; A linha-altura: 1.4em; margem:
0px;}

. invólucro {largura:
940px;
margin: 20px auto 20px auto; border: 2px
sólida # 000000; background-color: #ffffff;}
{header

altura: 160px;
background-image: url (images / header.jpg);} h1 {

text-indent: -9999px; largura:

940px; altura: 130px; margin: 0px;}
nav, rodapé {

limpar ambos; cor: #ffffff;

background-color: # aeaca8; altura: 30px;}

nav ul {

margem: 0px;
padding: 5px 5px 30px 0px;} nav li {

display: inline; margin-right:

40px;} nav li a {

445 HTML5 LAYOUT

 exemplo
HTML5 layout

cor: #ffffff;}
nav li a: hover, nav li a.current {
color: # 000000;}
{section.courses
float: left; largura:
659px;
border-right: #eeeeee 1px solid;} artigo {

limpar ambos; overflow:

auto; largura: 100%;}
{hgroup

margem superior: 40 px;}

{figura
float: left; largura:
290px; altura: 220px;
padding: 5px; margem:
20 p;

fronteira: #eeeeee sólido 1px;} {figcaption

fonte de tamanho: 90%;

text-align: left;} {lado

largura: 230px; float:

left;
padding: 0px 0px 0px 20px;} lado seção a {

display: block; padding:

10px;
border-bottom: #eeeeee 1px solid;} lado seção de a:
hover {
color: # 985d6a;
background-color: #efefef;} a {

color: # de6581; text-decoration:

none;} h1, h2, h3 {

fonte de peso: normal;} {h2

HTML5 LAYOUT 446

 exemplo
HTML5 layout

margem: 10px 0px 5px 0px; padding:

0px;} h3 {

margem: 0px 0px 10px 0px; color: #

de6581;} lado h2 {

padding: 30px 0px 10px 0px; color: #

de6581;} {footer

fonte de tamanho: 80%;

padding: 0px 0px 7px 20px;}

</ Style>
<! - [if lt IE 9]>
<Script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script> <! [Endif] -> </ head> <body>

<Div class = "wrapper">

<Header>
<H1> Cozinha de Yoko </ h1> <nav>

<Ul>
<li> <a href="" class="current"> casa </ a> </ li> <li> <a href=""> aulas </ a>
</ li> <li> <a href=""> refeições </ a> </ li> <li> <a href=""> sobre </ a> </ li>
<li> <a href=""> contato </ a> </ li> </ ul> </ nav> </ header>

<Section class = "cursos">

<Artigo>
<Figure>
<Img src = "images / bok-choi.jpg" alt = "Bok Choi" /> <figcaption> Bok Choi </
figcaption> </ figure> <hgroup>

<H2> Vegetariana japonês </ h2> <h3> Cinco curso de uma

semana em Londres </ h3> </ hgroup>

447 HTML5 LAYOUT

 exemplo
HTML5 layout

<P> A introdução cinco semanas para refeições vegetarianas tradicionais japonesas,

ensinando-lhe uma seleção de arroz e macarrão pratos. </ p> </ article> <article>

<Figure>
<Img src = "images / teriyaki.jpg" alt = "Teriyaki molho" /> <figcaption> molho Teriyaki </
figcaption> </ figure> <hgroup>

<H2> molhos Masterclass </ h2> <h3> workshop de um dia </ h3> </ hgroup> <p> Um curso intensivo de um dia olhar para a
forma para criar o mais delicioso

molhos para uso em uma variedade da culinária japonesa. </ p> </ article> </
section> <aside>

<Section class = "populares de Receitas">

<H2> Receitas populares </ h2> <a href=""> Yakitori (frango grelhado) </ a> <a
href=""> Tsukune (picada hambúrgueres de frango) </ a> <a href=""> Okonomiyaki
(panquecas salgadas) </ a> <a href=""> Mizutaki (guisado de frango) </ a> </
section>

<Section class = "CONTATO-detalhes">

<H2> Contato </ h2> <p> Cozinha de
Yoko < br />
27 Redchurch Rua < br />
Shoreditch < br />
Londres E2 7DP </ p> </
section> </ aside> <footer>

&cópia de; 2011 Cozinha de Yoko

</ Footer>
</ Div> <! - .wrapper -> </ body> </
html>

HTML5 LAYOUT 448

 resumo
HTML5 layout

X Os novos elementos HTML5 indicam o propósito de

diferentes partes de uma página da web e ajuda a descrever a sua estrutura.

X Os novos elementos de fornecer o código mais clara (comparado

com o uso de múltiplos < div> elementos). navegadores antigos

X que não entendem HTML5

elementos precisam ser dito quais elementos são elementos nível
de bloco.

X Para fazer HTML5 elementos trabalho no Internet Explorer 8

(E versões mais antigas do IE), JavaScript extra é necessária, que está

disponível gratuitamente no Google.

 18
Processo e
Design

X Como abordar a construção de um site

X Compreender o seu público e suas necessidades
X Como apresentar visitantes informações deseja ver
 Esta seção discute um processo que você pode usar
quando você está criando um novo site.

Ele olha para que possam estar visitando seu site e como garantir as páginas

apresentam as informações os visitantes precisam. Ele também aborda alguns

aspectos-chave da teoria do design para ajudar a criar sites de aspecto profissional.

Neste capítulo, vamos olhar para:

● Como entender o público seu site pode atrair e

quais informações eles vão esperar encontrar nele

● Como organizar as informações de modo que os visitantes podem encontrar o que

eles estão procurando

● teoria do design para apresentar informações de uma forma que

ajuda os visitantes a atingir seus objetivos

● Projeto dicas para ajudar você a criar mais atraente e

sites profissionais

453 PROCESSO
PROCESSO
454
 Quem é o site para?

Cada site deve ser projetado para o público-alvo, não

apenas para si mesmo ou o proprietário do site. Por
isso, é muito importante entender que seu
público-alvo.

Ele pode ser útil para fazer algumas audiência alvo: indivíduos
perguntas sobre as pessoas que você
esperaria estar interessado no assunto do ● Qual é a faixa etária de seu público-alvo?
seu site.
● Será que o seu site atrair mais mulheres ou homens? Qual é o mix?

Se você perguntar a um cliente que um site é ● Que país seus visitantes viver?
para, não é incomum para eles para responder "o
● Será que eles vivem em áreas urbanas ou rurais?
mundo inteiro."
● Qual é a renda média de visitantes?
Realisticamente, é pouco provável que seja
● Qual o nível de educação que eles têm?
relevante para todos. Se o seu site vende

lâmpadas, embora a maioria das pessoas que ● Qual é o seu estado civil ou familiar?
utilizam um computador, provavelmente, usar
● Qual é a sua ocupação?
lâmpadas, eles não são susceptíveis de

encomendá-los de alguém em um país diferente. ● Quantas horas eles trabalham por semana?

● Quantas vezes eles usam a web?

Mesmo se o site tem um grande apelo, ● Que tipo de dispositivo que eles usam para acessar a web?

você ainda pode pensar sobre a demografia

de uma amostra do público-alvo.
audiência alvo: empresas

● Qual é o tamanho da empresa ou departamento relevante?

● Qual é a posição das pessoas na empresa que visitam o seu site?

● Será que os visitantes estar usando o local para si ou para outra pessoa?

● Quão grande é o orçamento que eles controlam?

455 PROCESSO
 Invente alguns visitantes de ficção de seu público-alvo típico.
Eles se tornarão seus amigos. Eles podem influenciar decisões
de projeto de paletas de cores para o nível de detalhe em
descrições.

Nome Gordon maricas Jaspe Ayo Hera

Gênero M F M M F

era 28 47 19 32 35

Localização Chicago São Francisco Nova york Miami Boston

Ocupação Professor Advogado Aluna Varejo Jornalista

Renda $ 62k $ 180k $ 24k $ 160k $ 75k

Use web 2-3 dias / semana Diariamente Diariamente 4-5 dias / semana Diariamente

Se você tem uma pergunta sobre como o site será capaz de olhar para trás e se
vai ser utilizado, ou o que suas prioridades perguntar: "O que Gordon ou Molly quer
deve ser, você nesta situação?"

PROCESSO
456
 Por que as pessoas visitam
o seu site

Agora que você sabe quem são seus visitantes, você precisa

considerar porque Eles estão vindo. Enquanto algumas pessoas

simplesmente acaso através de seu site, a maioria vai visitar por uma

razão específica.

Seu conteúdo e design deve ser motivações-chave objetivos específicos

influenciada pelas metas de seus
usuários. ● eles estão procurando geral ● Será que eles querem geral
entretenimento ou eles precisam para informações / pesquisa (tais como pano

Para ajudar a determinar por que as pessoas estão atingir um objetivo específico? Se ther de fundo sobre um tema / empresa), ou
são depois algo específico (como um
vindo para o seu site, existem duas categorias
fato particular ou informações sobre um
básicas de perguntas que você pode perguntar: ● e é um objetivo específico, é uma
produto)?
questão pessoal ou profissional?

1: As primeiras tentativas para descobrir o ● eles já estão familiarizados com

● Eles vêem passar o tempo
subjacente motivações por que os visitantes o serviço ou produto que você oferece ou
essa atividade como essencial ou um luxo?
vêm para o site. eles precisam de ser apresentado a ele?

eles estão olhando para o tempo

2: A segunda examina o específico objetivos ●

dos visitantes. Estes são os gatilhos informações sensíveis, tais como as últimas

tornando-os vir para o site agora. notícias ou atualizações sobre um determinado

tópico? Será que eles querem descobrir

informações sobre um produto ou serviço

específico para ajudá-los a decidir se quer

comprá-lo ou não? Será que eles precisam

entrar em contato com você?

Se assim for, eles podem visitar em pessoa

(que pode exigir horas de abertura e um
mapa)? Ou eles podem precisar de e-mail ou
contato telefônico detalhes?

457 PROCESSO
 O que os visitantes são
tentando alcançar

É improvável que você será capaz de listar todas as razões por que

alguém visita o seu site, mas você está procurando as principais

tarefas e motivações. Esta informação pode ajudar a guiar seus

projetos de site.

Primeiro você deseja criar uma lista de razões Gordon comprou uma raquete de tênis há vários anos; agora ele quer comprar um de
pelas quais as pessoas estariam vindo para o seu site para sua namorada.
seu site. Você pode então atribuir a lista de

tarefas para os visitantes fictícios que você maricas leu sobre o seu novo serviço de Doggy Daycare na imprensa e quer
criou no passo descrito na página anterior. descobrir se seria adequado para ela usar.

Jaspe teve uma experiência ruim ficar em um hotel quando visita Sydney, Austrália, e
quer fazer uma queixa.

Ayo espera para estudar arquitetura e quer saber mais sobre um novo curso que está sendo
oferecido.

Hera é um editor de imagem e quer olhar para o site de um fotógrafo para ver exemplos de
seu trabalho antes de decidir se a comissão dele.

PROCESSO
458
 Que informação a seus
visitantes necessidade

Você sabe que está chegando ao seu site e por que eles estão

vindo, então agora você precisa trabalhar com as informações que

eles precisam, a fim de atingir seus objetivos de forma rápida e

eficaz.

Você pode querer oferecer informações de Portanto, você terá mais oportunidade Informação chave
apoio adicional que você acha que eles de dizer-lhes alguma informação extra
podem ser úteis. que você acha que seria útil para eles ● Será que os visitantes estar familiarizado com

(ou expô-los a outros produtos e seu assunto / área de marca ou você

Olhe para cada uma das razões pelas quais as serviços que você quer promover). precisa se apresentar? Será que eles

pessoas vão visitar o seu site e determinar o que vão estar familiarizado com

eles precisam para alcançar seus objetivos. ●

o produto / serviço / informação que você

Se você não parecem relevantes para eles, está cobrindo ou eles precisam de

Você pode priorizar níveis de respondendo às suas necessidades, no entanto, informações básicas sobre ele? O que

informação de pontos-chave para baixo eles são susceptíveis de ir para outro lugar. são os mais importantes
para informações não-essenciais ou de ●

fundo. recursos de que você está

Aqui estão algumas perguntas para ajudar você a oferecendo?

Ao garantir que você fornecer as informações decidir quais informações a fornecer para os
● O que é especial sobre o
que seus visitantes estão procurando, eles visitantes de seu site ...
você tem a oferecer que o diferencia de
vão considerar o seu site mais relevante para
outros sites que oferecem algo semelhante?
eles.
Depois que as pessoas têm alcançado
●

o objetivo que os enviou ao seu

site, há questões comuns que as
pessoas fazem sobre este tema?

459 PROCESSO
 Quantas vezes as pessoas vão
visitar o seu site

Alguns sites beneficiar de ser atualizado com mais freqüência do que

outros. Algumas informações (como notícias) pode estar mudando

constantemente, enquanto outros conteúdos permanece relativamente

estático.

Um site sobre as tendências da moda precisará Muitas vezes pode ser útil para definir um bons serviços
mudar muito mais freqüência do que aquele cronograma para quando um site será

que está a promover um serviço que as atualizado (em vez de fazê-lo numa base ad ● Como muitas vezes fazer o mesmo

pessoas não compram regularmente (como hoc). pessoas voltam a comprar de

canalizações domésticas ou vidros duplos). você?

Muitas vezes você vai descobrir que algumas

● Quantas vezes é o seu estoque
partes de um site se beneficiará de ser atualizado
atualizado ou o seu serviço
com mais freqüência do que outros.
mudou?
Uma vez que um site foi construído, ele pode ter um

monte de tempo e recursos para atualizá-lo com

freqüência. Aqui estão algumas perguntas para ajudar você a em formação

decidir quantas vezes para atualizar o conteúdo do

Trabalhar fora quantas vezes as pessoas são site ... ● Quantas vezes é o assunto
susceptíveis de revisitar seu site dá-lhe uma Atualizada?

indicação para quantas vezes você deve atualizar

● Que percentagem da sua
o site.
visitantes voltaria para atualizações
regulares sobre o assunto, em
comparação com aqueles que só
precisa a informação uma vez?

PROCESSO
460
 Os mapas de local

Agora que você sabe o que precisa aparecer no seu

site, você pode começar a organizar a informação em
seções ou páginas.

O objectivo é o de criar um diagrama das Os grupos de informação são, em seguida, Você pode precisar de duplicar algumas

páginas que podem ser usados ​para estruturar transformou-se no diagrama, que é conhecido informações se ele precisa aparecer em mais

o local. Isto é conhecido como um mapa do site e como o mapa do site. de uma página.

vai mostrar como essas páginas podem ser

agrupados. Às vezes pode ser útil pedir a pessoas As páginas (ou grupos de páginas) irá

que são o público-alvo para ajudar você informar como os usuários navegar através

a informação de grupo relacionadas do site.

Para ajudar você a decidir que informação juntos.

deve ir em cada página, você pode usar Lembre-se de se concentrar nas metas que

uma técnica chamada card sorting. Um mapa do site normalmente irá seus visitantes querem alcançar.

começar com o homepage. Além disso, se

o site é grande e está compartimentada
Isso envolve a colocação de cada pedaço em seções, cada seção pode exigir a sua Vale a pena notar que o proprietário do site
de informação que um visitante pode própria secção homepage para pode organizar as informações de uma
precisar saber sobre um pedaço de papel conectar-se a toda a informação dentro maneira que é diferente do que o público
e, em seguida, organizar as informações dele. espera. É importante refletir a compreensão do
relacionadas em grupos. público sobre o assunto (e não apenas a
compreensão do proprietário do local do
Por exemplo, a maioria das lojas on-line têm mesmo).
Cada grupo se refere a uma página e, em sites homepages seção para cada tipo de produto,

maiores as páginas, pode por sua vez, podem que, em seguida, no link de volta para páginas

ser agrupados em conjunto para criar diferentes de cada produto.

seções do site.

461 PROCESSO
 mapa do site exemplo

Casa

sobre artigos Visita fazer compras contato

História notícia Localização livros

Fundação book Reviews horario de funcionamento presentes

planos futuros pressione bilhetes

entrevistas

PROCESSO 462
 wireframes

Um wireframe é um esboço simples da chave de informação

que precisa para ir em cada página de um site. Ele mostra a
hierarquia das informações e quanto espaço ele pode exigir.

Um monte de designers terá os elementos Você não deve incluir o esquema de como a página deve olhar. Pode ser muito útil

que precisam aparecer em cada página e cores, opções de fontes, fundos ou para mostrar os wireframes de um site para um

começar criando wireframes. Trata-se de imagens para o site no wireframe. Ele cliente antes de mostrar-lhes um design. Ele

áreas esboçar ou sombreamento onde cada deve se concentrar no que a informação permite que o cliente para garantir que o site tem

elemento da página vão (como o logotipo, precisa estar em cada página e criar todas as funções e informações de que necessita

navegação primária, títulos e principais uma hierarquia visual para indicar as para oferecer.

órgãos de texto, logins de usuários etc). partes mais importantes de cada página.

Se você acabou de apresentar um projeto de site

para um cliente, é comum que eles se concentrem

Ao criar um wireframe você pode garantir Os wireframes fazer o projeto mais fácil, em como o site parece, o que significa que eles não

que toda a informação que precisa estar porque você sabe que informação precisa podem levantar questões sobre a sua função depois

em uma página incluída. aparecer em qual página antes de que o site foi construído.

considerar

O exemplo à direita foi criado em Você pode esboçar wireframes em papel ou Há também ferramentas de estrutura de arame

Photoshop usando os modelos que usar uma aplicação gráfica no seu linha, como os em:

vêm com a computador (como o Illustrator ou http://gomockingbird.com

960.gs sistema de rede. InDesign). http://lovelycharts.com

463 PROCESSO
exemplo WireFrame

PROCESSO 464
 obter a sua mensagem usando o
Design

O objetivo principal de qualquer tipo de design visual é

comunicar. Organizar e priorizar as informações em uma página
ajuda os usuários a compreender a sua importância e que
ordem para lê-lo em.

conteúdo priorizando organizadora

páginas da web, muitas vezes têm um monte Se tudo em uma página apareceu no Agrupamento juntos conteúdo relacionado

de informações para se comunicar. Por mesmo estilo, seria muito mais difícil de em blocos ou pedaços

exemplo, as páginas de jornais on-line terá entender. (Mensagens-chave não se torna a página parecer mais simples (e
informações que não aparece em todas as destacam.) mais fácil de entender).
páginas do equivalente de impressão:

Ao fazer partes do olhar página distinto a Os usuários devem ser capazes de identificar

partir circundante de conteúdo, designers a finalidade de cada bloco sem

de chamar a atenção para (ou longe) processamento de cada item individual.

● Um mastro ou logotipo
esses itens.
● Links para navegar no site
Ao apresentar certos tipos de informações em
● Links para conteúdo relacionado e
Designers criam algo conhecido um semelhante estilo visual (como usar o
outros artigos populares
como hierarquia visual mesmo estilo para todos os botões ou todos os
● opções de login ou adesão para ajudar os usuários a se concentrar nas links), os usuários vão aprender a associar esse

mensagens-chave que irá chamar a atenção das estilo com um determinado tipo de conteúdo.
● Capacidade dos usuários para comentar
pessoas, e, em seguida, orientá-los para as

● Informações sobre direitos autorais mensagens subsequentes.

● Links para políticas de privacidade,

Nós olhamos para hierarquia visual nas Nós olhamos para o agrupamento e
termos e condições, informações
páginas 467-468. semelhança nas páginas 469-470.
publicidade, feeds RSS, opções de
inscrição

Com tanta coisa na página, o

designer precisa organizar e
Prioritizar a informação para comunicar a sua

mensagem e ajudar os usuários a encontrar o

que estão procurando.

465 PROCESSO
Vejamos um exemplo de como o design pode
ser usado para comunicar de forma eficaz os
serviços de uma empresa.

hierarquia visual agrupamento semelhança

A atenção é imediatamente atraído para Existem vários pedaços de Há vários exemplos de similaridade
uma imagem que mostra o serviço esta informação nesta página. dentro desta página.
empresa oferece e um título para
explicá-lo. O tamanho e fundo colorido No topo você pode ver o logotipo e Os quatro pontos (na parte inferior esquerda

reforçar que esta é a principal mensagem navegação. Sob essa é a informação da imagem) são todos apresentados de um

na página. que introduz os serviços da empresa. modo semelhante com posições e ícones

consistentes.

Caso este serviço apelar para o usuário, Mais abaixo estão três grupos distintos que
a seguir eles podem ver mais detalhes mostram o que os serviços fazem, os Todos os links no corpo do texto estão em
sobre o que faz, quanto custa, e que custos envolvidos e alguns dos usuários azul, por isso é claro o texto é clicável.
usa-lo. dos serviços.

PROCESSO
466
 hierarquia visual

A maioria dos usuários da Internet não ler páginas inteiras. Ao contrário, eles desnatado para encontrar

informações. Você pode usar contraste para criar uma hierarquia visual que recebe toda a sua mensagem

chave e ajuda os usuários a encontrar o que estão procurando.

Tamanho cor estilo

elementos maiores vai agarrar a atenção dos cor de primeiro plano e fundo pode chamar a Um elemento pode ser do mesmo tamanho e

usuários em primeiro lugar. Por esta razão, é uma atenção para as mensagens-chave. seções mais cor que envolve os conteúdos, mas têm um

boa idéia para fazer títulos e pontos-chave brilhantes tendem a chamar a atenção dos usuários estilo diferente aplicado a ele para fazê-lo

relativamente grande. em primeiro lugar. sobressair.

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit

Lorem ipsum consectetur adipiscing elit. amet, consectetur
dolor sit amet, consectetur
Lorem ipsum dolor sit adipiscing elit. Lorem ipsum
adipiscing elit. Lorem ipsum dolor
amet, consectetur dolor sit amet, consectetur
sit amet, consectetur adipscing
adipscing elit. adipscing elit.
elit.

467 PROCESSO
hierarquia visual refere-se à ordem em que seus olhos percebem o que vêem. Ele é criado pela adição
de contraste visual entre os itens que está sendo exibido. Os itens com maior contraste são
reconhecidos e processados ​em primeiro lugar.

imagens
Imagens de criar um alto contraste visual e muitas

vezes atrair os olhos pela primeira vez. Eles podem

ser usados ​para chamar a atenção para uma

mensagem específica dentro da página. Em alguns

casos, a imagem certa pode sucintamente revelar

mais do que uma página inteira de texto.

O efeito de uma hierarquia visual bem

concebido é em grande parte subliminar.
Conseguir uma boa hierarquia requer
equilíbrio; Se nada se destaca um site pode
ser bastante desinteressante, e se muitos
aspectos estão competindo por sua atenção,
pode ser difícil de encontrar as
mensagens-chave. Este exemplo tem uma
hierarquia clara que atende às necessidades
dos visitantes do site.

PROCESSO
468
 agrupamento e
semelhança

Ao fazer sentido de um projeto, que tendem a organizar os elementos visuais em grupos. O agrupamento de

peças relacionadas de informação juntos podem fazer um design mais fácil de compreender. Aqui estão

algumas maneiras isto pode ser alcançado.

Proximidade fecho continuação

Quando vários itens são colocados juntos, eles Quando confrontados com um arranjo Quando os elementos são colocados em uma linha

são percebidos como mais relacionadas do que complicado de itens, que muitas vezes vai olhar ou uma curva, então eles são percebidos estar mais

os itens que são colocados mais afastados. para um padrão único ou reconhecível ou relacionado do que aqueles que não estão a seguir

(Pode-se também grupos ninho de informação formulário. Uma caixa real ou imaginário pode a mesma direcção. Isso pode ser usado para

dentro de grupos maiores de informações). ser formada em torno de elementos, devido à direcionar um leitor de uma parte de uma página

sua proximidade e alinhamento. para a próxima.

O espaço em branco cor fronteiras

Colocar itens relacionados mais juntos e A cor de fundo colocado atrás de A linha pode ser desenhada em torno da
deixando uma grande lacuna entre os itens itens relacionados para enfatizar fronteira do grupo ou entre esta e os seus
não relacionados. sua conexão. vizinhos.

469 PROCESSO
Nós, naturalmente, observar as semelhanças de concepção, e as coisas que são semelhantes são percebidos

como mais relacionadas do que as coisas que são diferentes. Repetição de cor semelhante, o tamanho, a

orientação, textura, fonte, ou forma, sugere que os elementos correspondentes têm importância ou significado

semelhante.

consistência
Neste exemplo, cada resenha do livro tem
book Reviews um estilo consistente para os títulos de
livros, nomes de autores e links de compra.
Criação Raw mundos de fantasia
Depois de ler apenas um dos blocos é
John Maizels Deidi von Schaewen, John Maizels
Criação Raw é o livro definitivo sobre arte Apresentando criações mais incomuns do mundo, possível inferir o significado dos outros
marginal e fornece um guia indispensável para a coloridas e poéticas, alguns dos quais nunca
itens nesta caixa que seguem o mesmo
arte autodidata deste século e um relato apareceram anteriormente na impressão. mundos de
fascinante da criatividade humana. O capítulo fantasia estilo.
intitulado Maravilhas do mundo é principalmente inclui os clássicos da arquitetura fantasia, como
dedicado ao Rock Garden de Nek Chand e inclui o Palais Ideal perto de Lyon e, claro, Jardim
uma série de fotografias coloridas. rocha de Nek Chand em Chandigarh, Índia.

Compre na Amazon Compre na Amazon

cabeçalhos
Dando um pedaço de informação que um título diz
Nek Chand Arte Outsider O jardim de rocha claramente que o usuário se ou não o conteúdo
Lucienne Peiry, Philippe Lespinasse MSAulakh
do agrupamento é relevante para eles. Se não,
Esta publicação conta a história de Nek Chand Este pequeno livro preto e branco é
e sua vida e leva o leitor a uma viagem colorida O comentário de MS Aulakh sobre e homenagem ao eles podem ignorar todos os elementos dentro
através de seu jardim de rochas, trabalho mais Rock Garden e não está amplamente disponível, mas
amplo do mundo da arte ambiental. cópias usadas podem ser encontrados ao longo do dele. Ela também ajuda os usuários de leitores de
tempo.
tela, como muitas vezes os utilizadores têm a
Compre na Amazon Compre na Amazon
opção de ouvir os cabeçalhos na página.

Cada pedaço visual pode conter sua própria hierarquia, conforme mostrado neste exemplo, onde os
livros individuais têm suas próprias subseções de título, autor, texto e link.

PROCESSO
470
 navegação Designing

navegação do site não só ajuda as pessoas a encontrar onde eles querem ir, mas também os ajuda
a entender o que seu site é sobre e como ele está organizado. Boa navegação tende a seguir estes
princípios ...

conciso Claro seletivo

Idealmente, a navegação deve ser rápido e Os usuários devem ser capazes de prever o A navegação primária deve reflectir apenas
fácil de ler. É uma boa idéia para tentar limitar tipo de informação que eles vão encontrar-se as seções ou conteúdo do site. Funções
o número de opções em um menu para não na página antes de clicar no link. Sempre como logins e pesquisa, e informações
mais de oito ligações. Estes podem que possível, escolher palavras descritivas legais, como termos e condições e assim
conectar-se a homepages seção que por sua individuais para cada link, em vez de frases. por diante são mais bem colocado em outro
vez ligação para outras páginas. lugar na página.

Início Artista Perfis Exposições e Eventos Galerias Livros e revistas sobre este site Contactos Entrar
Registe-se Termos e Condições Política de Privacidade
•

Início Artista Perfis Exposições Galerias de publicações sobre Contato ✔

471 PROCESSO
Um grande site pode ter navegação navegação ou para o lado da página. extra online
primária, secundária e terciária mesmo. navegação terciário, muitas vezes fica no Ir para o site que acompanha este livro para obter

navegação primária muitas vezes aparece rodapé da página. O menu não será a única informações sobre como implementar a

na parte superior do site da esquerda para maneira como os usuários navegar no site. Eles funcionalidade de pesquisa para o seu site

a direita, ou para baixo do lado esquerdo da também usam links dentro de cada página. usando o Google Search.

página. navegação secundária poderia Alguns sites também oferecem uma função de

estar sob o primário pesquisa.

contexto interativo consistente

Boa navegação fornece o contexto. Ele Cada link deve ser grande o suficiente para Quanto mais páginas de um site contém,
permite que o know usuário onde eles estão clicar e a aparência do link deve ser alterado quanto maior o número de itens de
no site naquele momento. Usando uma cor quando o usuário passa o mouse sobre cada navegação haverá. Embora navegação
diferente ou algum tipo de marcador visual item ou clica sobre ele. Ele também deve ser secundária vai mudar de página para
para indicar a página atual é uma boa visualmente distinto de outros conteúdos na página, o melhor é manter a navegação
maneira de fazer isso. página. primária exatamente o mesmo.

Início Artista Perfis Exposições Galerias de publicações sobre Contato •

Casa Perfis de artistas Exposições Galerias de publicações sobre Contato ✔

PROCESSO
472
 resumo
Processo e Design

X É importante entender que seu público-alvo

é, por que eles vêm para o seu site, as informações que eles querem encontrar e

quando eles estão propensos a voltar. Site mapas permitem que você planejar a

X estrutura de um site.

X Wireframes permitem que você organize as informações que

terá que ir em cada página.

X O design é sobre comunicação. Visual hierarquia ajuda

os visitantes a entender o que você está tentando dizer-lhes. Você

X pode diferenciar entre peças de informação

usando o tamanho, cor e estilo.

X Você pode usar agrupamento e semelhança para ajudar a simplificar

as informações que você apresentar.

 19
Informação
prática

X Search engine optimization

X Usando análises para entender os visitantes
X Colocar seu site na web
 Para encerrar o livro que estamos indo olhar algumas
informações práticas que irão ajudá-lo a lançar um site
bem sucedido.

Há livros inteiros escritos sobre cada um dos tópicos abordados neste

capítulo, mas eu vou apresentá-lo para os temas-chave que cada sujeito lida
com e dar-lhe indicações para o que você precisa considerar. Você verá:

● Os princípios de Search Engine Optimization

● Usando análises para entender como as pessoas estão usando o seu

local depois de ter lançado

● Colocar seu site na web

477 INFORMAÇÃO PRÁTICA

INFORMAÇÃO PRÁTICA 478
 Search Engine Optimization
(SEO)

SEO é um tópico enorme e vários livros foram escritos sobre o assunto. As páginas seguintes irão
ajudá-lo a compreender os conceitos-chave para que você possa melhorar a visibilidade do seu site nos
motores de busca.

o básico On-page Técnicas técnicas off-page

Search engine optimization (ou SEO) é a Na página técnicas são os métodos que você Obtendo outros sites o link para você é tão

prática de tentar ajudar seu site aparecer pode usar em suas páginas da web para importante como técnicas on-page. Os motores

mais perto do topo dos resultados de melhorar a sua classificação nos motores de de busca ajudar a determinar como classificar

busca quando as pessoas olham para os busca. o seu site, olhando para o número de outros

tópicos que seu site cobre. sites que apontam para o seu.

O principal componente deste está olhando para

palavras-chave que as pessoas são susceptíveis

No coração do SEO é a idéia de trabalhar fora que de entrar em um motor de busca, se quisessem Eles estão particularmente interessados ​em sites

termos que as pessoas são susceptíveis de entrar encontrar o seu site e, em seguida, incluindo cujo conteúdo está relacionado com o seu. Por

em um motor de busca para encontrar o seu site e, estes no texto e código HTML para o seu site, a exemplo, se você estava executando um site que

em seguida, usar esses termos nos lugares certos fim de ajudar os motores de busca saber que o vendia isca de peixe, em seguida, um link de um

em seu site para aumentar as chances de que os seu site abrange esses tópicos. cabeleireiro não é susceptível de ser considerado

motores de busca irá mostrar um link para seu site tão relevante como um de uma comunidade de

em seus resultados. pesca.

Os motores de busca dependem muito

fortemente no texto que está em suas páginas Os motores de busca também olhar para as

A fim de determinar quem vem em primeiro por isso é importante que os termos que as palavras entre a abertura

lugar nos resultados da pesquisa, motores de pessoas vão procurar estão em texto. Há sete <a> tag e fechamento </ a> tag no link. Se

busca não apenas olhar para o que aparece em lugares essenciais onde você quer suas o texto no link contém palavras-chave
seu site. Eles também consideram quantos sites palavras-chave para aparecer. (em vez de apenas Clique aqui ou o
link para você (e como relevantes os links são). endereço do site), pode ser considerado
Por esta razão, SEO é muitas vezes dividida em mais relevante.
duas áreas: técnicas na página e técnicas Garantir que todas as imagens têm texto
off-page. apropriado no valor da sua alt atributo
também ajuda os motores de busca As palavras que aparecem em links para seu

entender o conteúdo de imagens. site também deve aparecer no texto da página

que as ligações do site para.

479 INFORMAÇÃO PRÁTICA

 SEO On-page

Em cada página do seu site, há sete lugares chaves onde palavras-chave (as palavras as pessoas
podem pesquisar para encontrar o seu site) pode aparecer, a fim de melhorar a sua findability.

1
1: Título da página
O título da página aparece na parte superior
da janela do navegador ou na guia de um 2
browser. Ele é especificado no < title> elemento
que vive dentro do < head> elemento. 3

5
2: url / endereço da Web
O nome do arquivo é parte do URL.

Sempre que possível, use palavras-chave

4
no nome do arquivo. 6

3: posições
Se as palavras-chave estão em um título

<h n> elemento, em seguida, um motor de busca 5: texto do link 7: Descrições Página
vai saber que esta página é toda sobre esse Use palavras-chave no texto que criar links A descrição também vive dentro do < head> do
assunto e dar-lhe maior peso do que outro entre as páginas (em vez de usar elemento e é especificada utilizando uma < meta>
texto. expressões genéricas como "clique aqui"). tag. Deve ser uma frase que descreve o
conteúdo da página. (Estes não são
4: texto mostrados na janela do navegador, mas eles
Sempre que possível, ajuda a repetir as podem ser exibidos nas páginas de
palavras-chave no corpo principal do texto, pelo 6: imagem texto alt resultados dos motores de busca.)
menos 2-3 vezes. Não, no entanto, o excesso de Os motores de busca dependem de você

usar esses termos, porque o texto deve ser fácil fornecer descrições precisas de imagens no texto

para um ser humano para ler. alt. Isso também irá ajudar suas imagens

aparecem nos resultados de pesquisas com base Nunca tente enganar os motores de busca!
em imagens. Eles irá sancioná-lo por isso. Por exemplo,
nunca adicione o texto na mesma cor que o
fundo da página, como eles podem detectar
isso.

INFORMAÇÃO PRÁTICA 480

 Como identificar
Palavras-chave e frases

Determinar quais palavras-chave para usar em seu site pode ser uma das tarefas mais difíceis quando

você começar a pensar sobre SEO. Aqui estão seis passos que o ajudarão a identificar as palavras-chave

e frases certas para o seu site.

1: Brainstorm 2: organizar 3: pesquisa

Listar as palavras que alguém poderia Grupo das palavras-chave em listas Existem várias ferramentas que permitem que você

digitar no Google para encontrar o seu site. separadas para as diferentes seções ou inserir as palavras-chave e, em seguida, eles vão

Certifique-se de incluir os tópicos diversos, categorias de seu site. sugerir outras palavras-chave que você pode querer

produtos ou serviços, o site é sobre. considerar, tais como:

Por exemplo, se o site era uma loja de animal adwords.google.co.uk/ selecionar /

de estimação que você pode ter categorias KeywordToolExternal
É muitas vezes ajuda a pedir a outras pessoas que diferentes para diferentes animais (como cães, (Ao usar esta ferramenta, selecione a opção

palavras usar para encontrar seu site, porque as gatos e coelhos). "correspondência exata" ao invés de

pessoas menos familiarizadas com um tópico pode "correspondência ampla".)

usar termos diferentes do que você. (Em particular, www.wordtracker.com

eles são menos propensos a usar o jargão Em um grande site você pode quebrar este se mais www.keyworddiscovery.com
específico da indústria.) em sub-categorias (por exemplo, grupos separados

para diferentes marcas de alimentos para animais). Uma vez que essas ferramentas têm sugerido

outras palavras-chave, adicione as opções

Sua lista pode incluir algumas relevantes para suas listas. (Ferramentas-chave

frases-chave (e não apenas palavras provavelmente irá sugerir alguns termos que são

individuais) se você tem tópicos que são irrelevantes assim como omitir qualquer que não

descritos por mais de uma palavra. parece apropriado).

481 INFORMAÇÃO PRÁTICA

4: comparar 5: refine 6: Mapa

É muito improvável que o seu site vai aparecer Agora você precisa escolher quais Agora que você tem uma lista refinada de

no topo dos resultados de pesquisa para cada palavras-chave você vai focar. Estes devem palavras-chave, você sabe que têm a maior

palavra-chave. Isto é especialmente verdadeiro sempre ser aqueles que são mais relevantes parte da concorrência, e quais são os mais

para os temas em que há muita concorrência. para cada seção do seu site. relevantes, é hora de começar a escolher

Os sites mais lá fora, que já foram otimizados palavras-chave que você vai usar para cada

para uma determinada palavra-chave, mais página.

difícil será para você para se levantar os Se há uma frase que é muito relevante, mas

resultados da pesquisa quando as pessoas você achar que há muita concorrência, você

pesquisarem no termo. ainda deve usá-lo. Para melhorar as chances de Escolha 3-5 palavras-chave ou frases que são

seu site a ser encontrado, você pode olhar para mapeados para cada página do seu site e

saber se há outras palavras que poderiam ser usá-los como palavras-chave para cada

incorporadas em uma frase. Por exemplo, se a página.

Alguns dos sites de pesquisa de palavra-chave informação ou serviço que você oferece em seu

pode dizer quantas pessoas têm procurado site é local específico, então você vai encontrar Você não precisa repetir as mesmas
para uma determinada palavra-chave para muitas vezes que a incorporação de sua palavras-chave em todas as páginas. É
ajudar você a saber quanto a concorrência localização em sua lista de palavras-chave vai também provável que, como você se move
esses termos têm. ajudar as pessoas a encontrá-lo. mais longe da página inicial para as
seções do site, as palavras-chave se
tornará mais específico para o tópico
Você também pode usar o recurso de individual tratados em cada página.
pesquisa avançada do Google para basta
procurar os títulos das páginas web. Isso irá Se o seu site está promovendo uma empresa

ajudá-lo a determinar quantos sites têm essa ardósias para telhados na Austrália, então é

palavra-chave no título de suas páginas. melhor para receber 100 pessoas da Austrália,

(Quanto mais páginas com o termo no título, que estão à procura de um telhado de ardósia de

mais concorrência existe.)

10.000 dos EUA que estão procurando
outros tipos de telhados.

INFORMAÇÃO PRÁTICA 482

 analytics: aprender sobre seus
visitantes

Assim que as pessoas começam a chegar ao seu site, você pode começar a analisar como o encontraram,

o que eles estavam olhando e em que ponto eles estão saindo. Uma das melhores ferramentas para fazer

isso é um serviço gratuito oferecido pelo Google chamado Google Analytics.

inscrever-se como funciona o código de monitoramento

O serviço Google Analytics depende de Toda vez que alguém carrega uma página do seu Um código de rastreamento é fornecido pelo

você se inscrever para uma conta em: site, o código de monitoramento envia dados para Google Analytics para cada site que você está

os servidores do Google onde é armazenado. seguindo. Ele deve aparecer imediatamente

www.google.com/analytics Google, em seguida, fornece uma interface antes do fechamento </ head> tag. O código não

O site lhe dará um pedaço de código de baseada na web que permite que você veja como altera a aparência de suas páginas web.

acompanhamento que você precisa colocar em os visitantes utilizam o seu site.

cada página de seu site.

No momento da escrita, o Google estava

atualizando sua interface Analytics para a
Versão 5. Se você entrar em sua conta e
ver uma interface diferente, procure um link
no canto superior direito da página que diz
'New Version'.

483 INFORMAÇÃO PRÁTICA

 Quantas pessoas estão vindo para o
seu site?

A página de visão geral dá-lhe um instantâneo das informações mais importantes que são susceptíveis

de querer saber. Em particular, diz-lhe quantas pessoas estão vindo para o seu site.

visitas visitas únicas Visualizações de página

Este é o número de vezes que as pessoas Este é o número total de pessoas que O número total de páginas todos os
vêm para o seu site. Se alguém está inativa visitaram seu site durante o período visitantes têm visto em seu site.
em seu site por 30 minutos e, em seguida, especificado. O número de visitas únicas
olha para outra página no seu site, ele será será menor do que o número de visitas se Páginas por visita
contado como uma nova visita. as pessoas foram voltando para o seu site O número médio de páginas cada
mais de uma vez no período definido. visitante olhou em seu site por
visita.

Tempo médio no site

A quantidade média de tempo de cada
usuário passou no site por visita.

seletor de data
Usando o seletor de data no canto superior direito

do site, você pode alterar o período de tempo que

os relatórios exibem. Ao fazer o login, isso

geralmente é definido para o mês passado, mas

você pode mudá-lo para informar sobre um

período de tempo específico.

exportar
A ligação de exportação logo acima do título
que diz "Visão geral dos visitantes" permite
exportar as estatísticas nesta página para
outras aplicações como o Excel.

INFORMAÇÃO PRÁTICA 484

 Quais são os seus visitantes olhando?

O link para o conteúdo no lado esquerdo permite que você

aprenda mais sobre o que os visitantes estão olhando quando
eles vêm para o seu site.

Páginas As páginas de destino saída páginas superiores

Isto diz-lhe quais as páginas que seus Estas são as páginas que as pessoas chegam em Isso mostra quais páginas as pessoas mais

visitantes estão procurando no máximo, e quando pela primeira vez a visitar o seu site. Isto comumente saem. Se um monte de pessoas

também as páginas que eles estão gastando pode ser particularmente útil porque você pode estão deixando a partir da mesma página,

mais tempo em. encontrar as pessoas nem sempre estão entrando então você pode considerar mudar essa

em seu site através da página inicial. página ou melhorá-lo.

A taxa de rejeição
Isso mostra o número de pessoas que
deixaram na mesma página que chegou. A
taxa de rejeição alta sugere que o
conteúdo não é o que eles estavam
procurando ou que a página não
suficientemente incentivá-los a olhar ao
redor do resto do site. O que conta como
um salto:

● Clicar em um link para outro site

● Clicado em um anúncio

● Entrou em uma nova URL

● Usado o botão "back"

● Fechado o navegador

485 INFORMAÇÃO PRÁTICA

 Onde estão os seus
visitantes estão vindo?

O link para fontes de tráfego no lado esquerdo permite que

você para saber onde seus visitantes estão vindo.

referrers direto termos de pesquisa

Isso mostra os sites que têm ligado para você e o Isso mostra que página um usuário chegou em Isso mostra que os usuários termos entrado em

número de pessoas que vieram através desses se eles não veio através de um link em outro um motor de busca para encontrar o seu site. Isso

sites. Se um site envia uma grande quantidade de site. Eles poderiam ter digitado o URL no seu pode ajudá-lo a aprender como visitantes

tráfego para você, entrar em contato e tentar navegador, utilizou um marcador do navegador, descrever o que eles estão procurando (que

trabalhar em conjunto para garantir que o tráfego ou clicar em um link em um e-mail, PDF, ou muitas vezes é diferente de como alguém poderia

continua fluindo. Você também pode tentar documento do Word. descrever seu próprio site). Isso pode ajudá-lo a

encontrar sites semelhantes e pedir-lhes para ligar ajustar o seu conteúdo e as palavras-chave de

para você. SEO.

características avançadas
Nós apenas arranhamos a superfície do que você

pode descobrir mais sobre os visitantes do

Google Analytics. Seus arquivos de ajuda

dizer-lhe muitos mais dos recursos avançados.

Se você executar uma loja online, vale a pena

olhar para o seu e-commerce de rastreamento,

que acrescenta informações sobre os produtos

vendidos, tamanho médio cesta e muito mais.

Você também pode definir metas onde

especificam os caminhos que você quer que as

pessoas a tomar, e depois ver o quão longe eles

obter através desses caminhos, o que é

especialmente útil quando a coleta de dados dos

usuários.

INFORMAÇÃO PRÁTICA 486

 nomes de domínio e
hospedagem

A fim de colocar seu site na web você vai precisar de um nome de

domínio e hospedagem na web.

nomes de domínio Web hosting

Seu nome de domínio é o seu endereço web (por Para que outras pessoas possam ver o seu site, espaço em disco

exemplo, google.com ou BBC. Co.uk). Existem você precisará fazer o upload para um servidor Isto refere-se ao tamanho total de todos os
muitos sites que permitem que você registrar web. servidores Web são computadores especiais arquivos que compõem o seu site (todos os
nomes de domínio. Normalmente, você terá que que estão constantemente conectados à Internet. arquivos HTML e CSS, imagens e scripts).
pagar uma taxa anual para manter esse nome de Eles são especialmente criado para servir páginas

domínio. da web quando eles são solicitados.

largura de banda
Esta é a quantidade de dados da empresa de

Esses sites geralmente têm uma forma que hospedagem irá enviar aos visitantes do seu site.

permite que você verifique se o seu nome Com a exceção de alguns sites muito grandes, a Se você imaginar 10 pessoas olhou para cada

de domínio preferido está disponível, e maioria dos sites viver em servidores web são página em seu site, então seria o equivalente a

porque milhões de nomes de domínio já foi executados por empresas de hospedagem web. 10 vezes a quantidade de espaço em disco que

registrado, isso pode levar um tempo para Este é geralmente muito mais barato e mais você usa.

encontrar o que é certo para o seu site. confiável do que tentar executar seus próprios

servidores web.

backups
Verifique se a empresa de hospedagem
Um monte de sites que oferecem registro de nome Há lotes de diferentes tipos de hospedagem na executa backups em seu site (e quantas
de domínio também oferecem hospedagem na web. oferta. Vamos agora dar uma olhada em vezes). Alguns só criar backups para que
algumas das principais coisas que ajudarão possam restaurar seu site em caso de
você a escolher qual empresa de hospedagem quebra do servidor. Outros permitem o
de usar. acesso a backups (que pode ser útil se
você acidentalmente quebrar o site
quando atualizá-lo).

487 INFORMAÇÃO PRÁTICA

 Hosted Services

contas de e-mail É muitas vezes vale à procura de comentários de Há uma série de serviços online que permitem

A maioria das empresas de hospedagem irá fornecer uma empresa de hospedagem para ver o que a que você aponte seu nome de domínio para seus

servidores de e-mail com os seus web hosting experiência de outras pessoas tem sido com uma servidores. Blogging plataformas como o

pacotes. Você vai querer verificar o tamanho da empresa de hospedagem. Infelizmente, muitas WordPress.com, Tumblr e Posterous, ou

caixa de correio que são permitidos eo número de vezes você só pode dizer o quão bom uma empresa plataformas de e-commerce como Big Cartel e

caixas de correio que você pode usar. de hospedagem é quando algo dá errado, em que Shopify fornecer os servidores que o site está

ponto você descobrir como eles são capazes de hospedado em. Se você estiver usando uma

ajudá-lo (assim você pode esperar para ver alguns plataforma como esta você não vai precisar de

linguagens do lado do comentários negativos para qualquer empresa). sua própria hospedagem para o site, embora

servidor e bancos de dados muitas vezes você ainda precisa de hospedagem

para o seu e-mail. Se este for o caso, algumas

Se você estiver usando um sistema de empresas de hospedagem web oferecem pacotes

gerenciamento de conteúdo, ele provavelmente vai que só vai oferecer serviços de e-mail.

usar uma linguagem de programação do lado do

servidor e um banco de dados (como o PHP com

banco de dados MySQL, ou ASP.Net com um banco

de dados SQL Server). Certifique-se de verificar se a

sua empresa de hospedagem suporta as tecnologias

de seu software precisa ser executado.

INFORMAÇÃO PRÁTICA 488

 FTP e ferramentas de terceiros

Para transferir seu código e imagens do seu computador para a

sua empresa de hospedagem, você pode usar algo conhecido

como File Transfer Protocol.

Como o nome sugere, File Transfer Protocol (ou

FTP) permite a transferência de arquivos através

da Internet a partir do seu computador para o

servidor web que hospeda seu site.

Existem muitos programas de FTP que

oferecem uma interface simples que mostra os

arquivos no seu computador ao lado dos

arquivos que estão no seu servidor web. Estes

permitem que você arrastar e soltar arquivos do

seu computador para o servidor versa ou vice.

489 INFORMAÇÃO PRÁTICA

 Há uma grande variedade de sites que oferecem serviços comumente

criados por desenvolvedores web (para salvar você ter que

construí-los você mesmo).

Algumas empresas de hospedagem oferecem Aqui está uma lista de alguns aplicativos Aqui está uma lista de algumas ferramentas

ferramentas para upload de arquivos para seus populares FTP: populares de terceiros:

servidores, usando um navegador web, mas é mais

comum o uso de um programa de FTP, como eles FileZilla Blogs

são mais rápidos na transmissão de arquivos. filezilla-project.org wordpress.com
Windows, Mac, Linux tumblr.com
posterous.com
Quando você compra o seu web hosting, FireFTP
você será dado detalhes de FTP que você fireftp.mozdev.org comércio eletrônico
entra em seu programa de FTP para se Windows, Mac, Linux shopify.com
conectar ao servidor. Normalmente, este bigcartel.com
será um endereço (como ftp: // CuteFTP go.magento.com
mydomain.com), um nome de usuário e uma cuteftp.com
senha. É importante manter esta Windows, Mac newsletters e-mail
informação segura, a fim de evitar que campaignmonitor.com
estranhos tenham acesso ao seu servidor. SmartFTP mailchimp.com
smartftp.com
Janelas Redes sociais botões de
compartilhamento
Transmite addthis.com
panic.com/transmit addtoany.com
Mac

INFORMAÇÃO PRÁTICA 490

 resumo
Informação prática

X Search engine optimization ajuda os visitantes a encontrar o seu

sites quando utilizando motores de busca.

X ferramentas de análise, como o Google Analytics permitem que você

ver quantas pessoas visitam o seu site, como eles encontrá-lo, eo

que fazer quando chegar lá.

X Para colocar o seu site na web, você precisará obter um

nome de domínio e hospedagem na web.

X programas de FTP permitem transferir arquivos do seu

computador local para o servidor web.

X Muitas empresas fornecem plataformas para blogs, e-mail

boletins de notícias, e-commerce e outras ferramentas de Web site popular (para

salvar você escrevê-los a partir do zero).

 Índice

X AZ
X atalhos HTML e CSS
X Solução de problemas
# símbolo (links) 87, 88 gradientes de fundo 419 topo 366-371
_em branco 86 backups 487 propriedade box-shadow 320
<! - -> 182 largura de banda 487 brilho 252
fronteiras 3D 310 linha de base 268 traga para frente 369

buttoms forma 3D 343 atributo bgcolor 138 peculiaridade navegador 242

grade 12 coluna 387-390 texto intermitente 282 listas de marcadores 65

grade 960 pixels 387-390, elementos de bloco 102, 185, 317, propriedade list-style-type 333
391-394, 463 229, 361 posição do marcador 335
css modelo 391

UMA
texto em negrito 45

<B> 45
C
abreviaturas 53 propriedade font-weight 279 controle de cache 192

acima da dobra 379 <Strong> 51 altura tampão 268

posicionamento absoluto 363, 367 faz fronteira atributo border 138 capitalizar 281
URLs absolutos 79 carro retorna 48
acessibilidade 7 fronteira (taquigrafia CSS) 312 cascata em CSS 239
texto alternativo 99, 272, 480 cor 311 centrando caixas 315
contraste 253, 420 desenhar 469 imagens de centralização 412

cabeçalhos 480 imagens 319 centrando layouts 315

controles forma rotulagem 163 raio 321 texto centrando 285
leitores de tela 7 espaçamento 340 alterações no conteúdo

acrônimos 53 estilo 310 <del> 56

selector irmão adjacente 238 largura 309 <Ins> 56

alinhar atributo 103-105 propriedade bottom 366-371 <S> 56
alinhando controlos de formulário 345 taxa de rejeição 485 caixas de verificação (formas) 155

alinhando imagens usando CSS 411 caixas 300-327 atributo checked 155, 156
texto alinhamento 285 fronteiras 309-312, 321 pasta filho 84
transparência alfa 256 desenhar 469 seletor filho 238
atributo alt 99 offsets caixa 364, 364-371 Arrancamento / agrupamento 465

texto alternativo 99, 272, 480 propriedade box-shadow 320 círculos em CSS 322

E comercial 194 centrando caixas 315 citações 52, 54

analítica 483-486 círculos 322 citar atributo 52
suportes angulares 23, 24 formas elípticas 322 atributo de classe 184, 431

GIFs animados 117 flutuador 370-375 seletor de classe 238

ascendente 268, 283 conteúdo escondendo 317, 318 propriedade clear 372

atributos 25, 26, 38 modelo de caixa IE6 316 tag de fechamento 20, 24

nomes de atributos 25, 26 margem 307, 314 fecho 469

seletores de atributo 292 propriedade max-height 305 atributo codecs 215
valores de atributos 25, 26 propriedade min-altura 305 editores de código 29, 31-34, 49

auditivo 217-223 propriedade overflow 306 cor 246-261

detalhes do autor 55, 192 preenchimento 307, 313 cor de fundo 250
atributo autoplay 214, 219 esquemas de posicionamento 367-375 atributo bgcolor 138
cantos arredondados 321 Cor da borda 311
brilho 252
B propriedade de visibilidade 318

offsets caixa 364, 364-371 nomes de cores 249, 252

propriedade background 344 inferior 366-371 seletores de cores 251

imagens de fundo 413-416 esquerda 366-371 valores de cores para CSS 251

cores de fundo 138, 250 certo 366-371 contraste 253, 420

ÍNDICE
 desenhar 467, 469 flutuador 364, 370-375 desenhar 452-473

códigos hexadecimais 249, 252 float (imagens) 411 grade 960 pixels 387-390,
HSL / HSLA 255-256 fontes 271-280 391-394, 463
matiz 252, 255 altura 303, 409-410 acima da dobra 379
leveza 255 conteúdo escondendo 317-318 Arrancamento / agrupamento 465

opacidade 254 como funciona o CSS 229-232 colunas 387-390

valores RGB 249, 252 Como as regras cascata 239 consistência 470
rgba 254 herança 239 layouts de largura fixa 381,
saturação 252, 255 folhas de estilo internas 236 383-384
selecionando uma cor 251 traçado 358-405 obter a sua mensagem
atributo cols 154 ligações 290-291 465-466
atributo colspan 133 listas 333-336 agrupamento e semelhança

colunas (esquema) 375-376 margens 314 469-470

comentários em HTML 182 várias folhas de estilo 395 hierarquia de informação 465-
Comentários em CSS 249 preenchimento 313, 337 466
comentários condicionais 442 caixas de posicionamento 363-367 traçado 358-405
contendo elementos 362 Propriedades e valores 231 layouts líquidos 382, 385-386
atributo content 191-192 pseudoclasses 289-290 tamanhos de tela e resolução
sistema de gerenciamento de conteúdo regras 231-232 377-378
(CMS) 33-34 seletores 231-232, 237-238, mapas do site 461

visualização de código 34 292 público-alvo 455

modelos 81 atributo de estilo 236 motivação dos visitantes 457

vista visual 34 <Style> elemento (para interno hierarquia visual 465, 467-468
continuação 469 CSS) 236 tamanhos de página web 379-380

contraste 253, 420 tabelas 337-340 o que os visitantes de informação precisa

atributo controla 214, 219 texto 282-297 459

símbolo de copyright 194 Alinhamento vertical 286 wireframes 463-464
imagens de cultivo 113-114 o que CSS é 6 gerenciamento de direitos digitais 213

CSS 226-425 o estilo de um elemento é usar dimensões de caixas em CSS 303

regra @import 395 348 estrutura de diretório 81-84
!importante 239 largura 303, 337, 371, 409-410 imagens 98
seletores de atributo 292 Cufon (fontes) 272 trafico direto 486
imagens de fundo 413-419 símbolos de moeda 194 espaço em disco 487

fronteiras 309-321 fontes cursivas 270 propriedade de exibição 317

caixas 300-327 estilos de cursor 347 símbolo de divisão 194

offsets caixa 366-371 declarações DOCTYPE 181

bugs e peculiaridades do navegador 242

flutuadores de compensação 372

d nome do domínio 10, 487

Domain Name System (DNS)

cores 249, 252, 255-256 fronteiras tracejadas 310 9, 10
CSS1, CSS 2, CSS3 (versões) bases de dados 149, 488 bordas pontilhadas 310

242 entrada de data 166 lista de seleção 157

CSS3 8 páginas padrão 81, 82 sombras 288, 320
declaração 231-232 definindo intsance de um termo 54

enquadramentos 391 listas de definição 67

estilos de cursor 347 definições 54

folhas de estilo externas 235 seletor descendente 238
externo vs estilo interna descensor (fontes) 268, 283
folhas 241 descrição do atributo 191

ÍNDICE
e como obras de flash 203

params 218
type = "radio" 155
type = "search" 168
comércio eletrônico 33 swfobject 207-208, 211, 218 tipos de controlo de formulário 148

edição de conteúdo utilizações de 204 type = "submit" 160

<del> 56 Flash de conteúdo sem estilo 278 type = "text" 152
<Ins> 56 flutuar propriedade 364, 370-375 type = "URL" 167

<S> 56 flutuar propriedade (imagens) 411 atributo action 151

edição de imagens 108 FLV (formato de vídeo) 211 atributo checked 155, 156
editar páginas em um CMS 33 estrutura de pastas 81-84 atributo cols 154
elementos 52 imagens 98 para o atributo 163

definição de 20, 24, 38 fontes atributo id 151, 163

diagrama de 23, 24 escolher um tipo de letra 269 atributo maxlength 152
formas elípticas 322 tamanhos de fonte 276 atributo method 151
de entrada de e-mail 167 fontsquirrel.com 277 atributo multiple 158
ligações de e-mail 85 especificando um tipo de letra 273 atributo de nome 152, 155, 156,

fronteiras em relevo 310 preferências / pilha da fonte 269 157, 160

ênfase 51 estilos / terminologia 267-268 atribuir linhas 154
propriedade células vazias 339 escalas do tipo 275 atributo selecionado 157
elementos vazios 48 pesos 268 atributo de tamanho 152, 158

EMS (para tamanhos de fonte) 274, 276 propriedade font-face 271 atributo de valor 155, 156, 157, 160
EMS (unidade de medição propriedade font-family 271, 273
caixas) 303 propriedade font-size 274, 276 alinhando controlos de formulário 345

codificação 209 propriedade font-weight 279 mudando botão enviar em

referências de entidade 193-194 para o atributo 163 flutuar 343
seletor de igualdade 292 cor do primeiro plano 249 validação de formulário 165

escapar caracteres / códigos barra 24, 48, 84 método get 151

193-194 código de formatação 47 agrupamento de elementos de formulário 164

seletor de existência 292 formas 144-173 controles de formulário ocultos 162

páginas de saída 485 como forma de trabalho 149-150 pairar estilos 342
expirar (meta-informação) 192 o que formulários HTML são 145 botões de imagem 161

folhas de estilo externas (quando onde posicionar rótulos 163 pares nome / valor 150
usar) 241 por que formas de uso 147 texto do espaço reservado 168

<Button> 162 cantos arredondados em entradas de texto

342
F <Fieldset> 164
<Form> 151 styling com CSS 341-346
fontes fantasia 270 <Input> 155, 159, 160-162, 166 botão de envio 160
caixa de entrada / envio de ficheiros 159 <Label> 163 validação de formulário 165

posicionamento fixo 364, 368 <Legend> 164 atributo frameborder 190

layouts de largura fixa 381, <Option> 157 FTP 489-490
383-384 <Select> 157 layouts de tela cheia 382
instantâneo 200-223 <Textarea> elemento 154
atributo type 155
a adição de um filme flash para o seu

página 207-208 type = "checkbox" 156

G
uso em declínio 204 type = "data" 166 selector irmão em geral 238
filmes flash 203 type = "email" 167 GIF 111

flash player 203 type = "file" 159 GIFs animados 117

flashvars 212, 218 type = "hidden" 162 GIMP 108
vídeo flash 211 type = "imagem" 161 atributos globais 183

ÍNDICE
Google analytics 483-486 <Hgroup> 438 background-imagens 413-416
mapas do Google 189 <Nav> 432, 434 (gradientes) 419
fontes web do Google 277 <Section> 433, 437 texto recuar 287
gradientes 419 <Source> 215, 220 border-imagens 319
símbolo maior que 194 <Video> 213-216 pontos de bala 334
grades 387-390, 463 atributo autoplay 219 Escolher Imagens e estoque
agrupamento e semelhança 469, atributo controla 219 fotografia 97
469-470 atributo circuito 219 direito autoral 97

agrupamento / Arrancamento 465 atributo pré-carga 219 cursores 347

elementos de agrupamento (<div>) 187 atributo de rolagem 190 dimensões 100, 107, 113-114
agrupamento de elementos sequenciais atributo sem emenda 190 em CSS 409-410
(<Span>) 188 atributo src (áudio) 219 edição de imagens 108, 113-114,

entrada de data 166 116, 117

H de entrada de e-mail 167

entrada de pesquisa 168

formatos de imagem 107

GIFs animados 117

hCard 55 entrada de URL 167 bitmap 115
cabeçalhos 22, 43 validação de formulário 165 GIF 111, 115, 118

<Hgroup> 438 texto do espaço reservado 168 JPEG 109-110, 115

atributo de altura 100, 214 ajudando navegador mais antigo PNG 112, 115, 118

propriedade de altura 303 Compreendo 442 SVG 116

propriedade de altura (imagens) HTML5 shiv / calço 442 transparentes GIF / PNG 118
409-410 traçado 428-449 formatos vetoriais 116

altura iframe 189 layout de HTML5 428-449 resolução 107, 115

códigos hexadecimais 249, 252 HTTP método get 151 Orientação (paisagem /
controles de formulário ocultos 162 retrato) 114
conteúdo escondendo 317, 318 método post 151, 159 posição no texto circunvizinho
páginas iniciais 81, 82 cabeçalhos HTTP 151 101

regras horizontais 48 Secure Sockets Layer (SSL) preparando para a web 107
vídeo hospedado 210 153 capotamentos 417

href 77, 79, 88, 235 http-equiv atributo 192 sprites 417
HSL / HSLA 255-256 matiz 252, 255 títulos 99
HTML código recuar 47
o que é HTML? 6 texto recuar 287
Eu
HTML 4 179 index.html 81, 82
HTML5 , 179 atributo id 87, 88, 151, 163, 183 hierarquia de informação 465-466
declaração DOCTYPE 181 atributo id (layout) 431 herança (CSS) 239
diferenças de XHTML 179 seletor id 238 elementos inline 102, 186, 229,
HTML5 179 modelo de caixa IE6 316 317, 361

A comparação com HTML 4 179 botão de imagem 161 Internet Service Provider (ISP)
<a> (links nível de bloco HTML5) resolução de imagem 115 10
441 imagens 95-120 endereço de IP 10

<Artigo> 432-439 <Img> 99, 100 texto em itálico 45

<Aside> 436 <Figcaption> 439 <Em> 51

<Audio> 217-220 <Figure> 119, 439 propriedade font-style 280
<Figcaption> 119, 422, 439 atributo src 99 <I> 45
<Figure> 119, 422, 439 texto alternativo 99, 480

<Footer> 432 imagens alinhando 103-105, 412

<Header> 432, 433 alinhando as imagens com CSS 411

ÍNDICE
J propriedade letter-spacing 284
leveza 255
M
JavaScript 208, 212, 218 como botões 490 mailto: 85
JPEG 109, 109-112 quebras de linha 48 margin: auto 315
justificar 285 propriedade line-height 283 propriedade de margem 314

itens de linha (listas) 65, 66 propriedade margin-top 314

K ligações 75

<a> 77, 79
propriedade margin-right 314
propriedade margin-bottom 314
kerning 284 atributo href 77 propriedade margin-left 314
palavras-chave 191, 479-482 :ativo 291 marcadores em listas 333

:foco 291 marcação (definição) 41

:flutuar 291 símbolos matemáticos 194
eu
:ligação 290 propriedade max-height 305
controles forma rotulagem 163 :visitou 290 max de comprimento atributo 152, 153

páginas de destino 485 adicionar / remover sublinhado 282 propriedade max-width 304
atributo lang 25 link abre em uma nova janela 86 meta descrições 480
ordem camada 369 link para uma parte de uma página 87 Meta informação 191-192
traçado 358-405 link para um endereço de e-mail 85 atributo method 151
grade 960 pixels 387-390, 391 link para outros sites 79 propriedade min-altura 305
posicionamento absoluto 363 link para o mesmo local 80 propriedade min de largura 304

offsets caixa 364 Link para o topo da página 87 dispositivos móveis 377

centrando caixas 315 Texto do link 78, 479, 480 caracteres tipográficos Monospace 267-270

colunas 371-376, 387-390 # símbolo 87, 88 atributo multiple 158

desenhar 452-473 layout líquido 382, 385-386 vários navegadores (ensaios) 242
<Div> 431, 440 min e largura máxima 304 várias colunas 375-376
posicionamento fixo 364 listas de definição lista 67 múltiplos idiomas 25
layouts de largura fixa 381, várias folhas de estilo 395
383-384 listas aninhadas 68 música 217-220
flutuador 364 listas ordenadas 65 leitor de mp3 218

grades 387-397 listas não ordenadas 66

ajudando os navegadores mais antigos

entender HTML5 442

<Ol> 65
<Ul> 66
n
layouts líquidos 382, 385-386 <Li> 65 atributo de nome 152, 153, 155,
fluxo normal 363, 365 <Dd> 67 156, 157, 160, 191
esquemas de posicionamento de <Dl> 67 nomes para atributos 25, 26
posicionamento absoluto 367 <Dt> 67 <a> navegação 77,
posicionamento fixo 368 estilos marcador ou número 333- 79
flutuadores 336 <a> (HTML5 ligações em nível de bloco)

flutuadores de compensação 372 lacunas entre os itens da lista 334 441

fluxo normal 365 itens lado a lado exibindo navegação concepção 471-472
posicionamento relativo 366 317 <Nav> 432, 434
propriedade position 365 o uso de imagens para pontos de bala usando listas para navegação 317

barras laterais 436 334 elementos aninhados 362

tamanhos de página 379-380 list-style-image propriedade 334 listas aninhadas 68

propriedade z-índice 364 propriedade list-style 336 nova janela 86

conduzindo 283 propriedade list-style-type 333 nofollow (motores de busca de parada

propriedade esquerda 366-371 atributo circuito 214, 219 indexação) 191

menos de símbolo 194 minúsculas 281 fluxo normal 363, 365

ÍNDICE
bloco de anotações 29-30 posicionamento fixo 364, 368 imagens de sobreposição 417

Notepad ++ 29 flutuador 364, 370-375 pasta raiz 82

propriedade position 365, 366, 367 cantos arredondados 321

atributo cartaz 214

O método post 151, 159
cantos arredondados em forma

elementos 342
texto oblíquo 280 pragma (meta-informação) 192 atribuir linhas 154
Ogg Vorbis (formato de áudio) 220 selector de prefixo 292 atributo rowspan 134
opacidade 254 atributo pré-carga 214, 219
tag de abertura 20, 23

fontes de código aberto 277

processo (processo de criação)

452-473
S
listas ordenadas 65 Propriedades (Consulte Propriedades de CSS) sans-serif fontes 267-270
propriedade overflow 306 proximidade 469 saturação 252, 255
conteúdo sobreposição 306 pseudoclasses 289 Scalable Vector Graphics (SVG)
elementos sobrepostos :ativo 291 180
propriedade z-índice 369 :foco 291 leitores de tela que os leitores de tela
overline 282 :flutuar 291 fazer 7
:ligação 290 texto alternativo 272

P :visitou 290
pseudo elementos:
texto alternativo para imagens 99

interpretação marcação semântica

propriedade estofamento 313 primeira linha 289 50

propriedade padding-top 313 :primeira carta 289 Texto do link 78

propriedade padding-right 313 tamanhos de tela e resolução

propriedade padding-bottom 313
propriedade padding-left 313
Q 377-378
atributo de rolagem 190
propriedade estofamento (tabelas) 337 citações <blockquote> valor de rolagem (propriedade overflow)

tamanhos de página 379-380 52 306

títulos da página 27, 28, 480 citar atributo 52 atributo sem emenda 190
visualizações de página 484 <Q> 52 Search Engine Optimization
parágrafos 44 aspas 194 (SEO) 479-482
elementos pai 362 citações citar marcas 194 texto alternativo 480

pasta pai 84 ferramenta-chave do Google 481

entrada de senha (formas) 153 cabeçalhos 480

PC (criação de páginas) 29
percentagens (tamanhos de fonte) 274, 276
R palavras-chave 479-482

Texto do link 78, 479, 480

botões de rádio (formas) 155 meta palavras-chave 191

percentagens (caixas) 303 referrers 486 meta descrições 480

Photoshop 108, 117 posicionamento relativo 363, 366 técnicas off-page 479
PHP 149, 488 URLs relativos 80, 83 técnicas on-page 479-480
pixels (images / resolução) 115 atributo rel (CSS) 235 Os nomes de páginas / URLs 480

pixels (unidade de medida) redimensionar imagens 113-114 títulos da página 480

274, 276, 303 resolução (imagens) 107 páginas impedindo sendo

atributo de espaço reservado 168 tamanhos de resolução e tela indexado 191

PNG 112 377-378 termos de pesquisa 486

PNGs transparentes 118 valores RGB 249, 252 Secure Sockets Layer (SSL) 153
esquemas de posicionamento 363 rgba 254 caixa de seleção 157-158

fluxo normal 363, 365 direito de propriedade 366-371 atributo selecionado 157
posicionamento relativo 363, 366 robôs (meta-informação) 191 seletores (CSS) 237, 292
posicionamento absoluto 363, 367 botões rollover 343 marcação semântica 41, 50

ÍNDICE
Enviar para trás 369 atributo de largura 137 propriedade text-indent 287
fontes serif 267, 267-270 mesas de estilo em CSS 337-340 propriedade text-shadow 288
sombreamento linhas da tabela alternados propriedade border-collapse 340 text-transform propriedade 281
338 propriedade border-spacing 340 TextWrangler 31
sIFR (fontes) 272 propriedade células vazias 339 Atributo do Título 53, 99

mapas do site 461-462 adição / remoção de lacunas ferramentas 960 grade de pixels

atributo de tamanho 152, 153, 158 entre as células 340 387

tamanho de caixas em CSS 303 destacando as linhas da tabela 337 blogs 490
botões de redes sociais 490 sombreamento linhas alternadas 338 quadros CSS 391
seletor de espaço 292 o que é uma tabela 130 comércio eletrônico 490

sprites 417 porquê mesas de uso 127 newsletters e-mail 490

atributo src 99, 189 Tag 20-24, 38 Google analytics 483-486
atributo src (áudio) 219, 220 atributo target 86 ferramenta-chave do Google 481

atributo src (vídeo) 214, 215 público-alvo 455 HTML5 shiv / calço 442
contexto de empilhamento 369 modelos (em um CMS) 33, 34, 81 botões de redes sociais 490
tachado 56, 282 texto barra de ferramentas desenvolvedor web 348

marcação estrutural 41 :-Classe pseudo activa 291 topo da página contém links 87

estrutura : Foco pseudo-classe 291 propriedade top 366-371

como os documentos usar a estrutura : Pairar pseudo-classe 291 monitoramento de visitantes 483

15 : Primeira carta elemento pseudo símbolo de marca registrada 194

como HTML descreve a estrutura 289 transparência (imagens) 118

20, 21 : Elemento pseudo-primeira linha 289 transparecny 256
usando processadores de texto 17 @Tipo de letra 277 atributo type 152, 153, 155, 159, 236
atributo de estilo 236 texto alinhamento 285-286

botão de envio 160 texto intermitente 282 atributo do tipo (áudio) 220
styling botões com CSS 343 escolher um tipo de letra 269 atributo do tipo (CSS) 235-236
subscrito 46 sombras 288 atributo type (vídeo) 215
selector substring 292 formatos 278 caracteres tipográficos 267-272

selector sufixo 292 pilha da fonte 269 typekit.com 277

sobrescrito 46 indenting 287 escalas do tipo 275

SVG 116, 278 kerning / letter-spacing 284 seletor de tipo 238

swfobject 207-208, 211, 218 / Linha-altura líder 283
fontes de código aberto 277
você
T especificando um tipo de letra 273

Tamanho 274 sublinhado 56, 282

tabelas 126-141 caracteres tipográficos 267-270 Uniform Resource Locator
<Table> 131 escalas do tipo 275 (URLs) 82
<Tbody> 135 sublinhado 282 URLs absolutos 79
<Td> 131 minúsculas letras maiúsculas 281 URLs relativos 80
<Tfoot> 135 sublinhado 282 estrutura de diretório 81
<Thead> 135 peso 268, 279 seletor universal 238
<Th> 132 word-spacing 284 listas não ordenadas 66

<Tr> 131 propriedade text-align 285 páginas upload web 489-490

atributo bgcolor 138 cor do texto 249 maiúscula 281
atributo border 138 propriedade text-decoration 282 URLs
atributo colspan 133 textedit 31-32 Search Engine Optimization
propriedade estofamento (tabelas) 337 editores de texto 29, 31 (SEO) 480
atributo rowspan 134 texto em CSS 264-297 entrada de URL 167

ÍNDICE
V páginas de saída 485

páginas de destino 485

atributo de valor 155, 156, 157, 160 referrers 486

valores de atributos 25, 26 upload para um servidor web

imagens vetoriais 116 489-490

-Vertical align propriedade 286 tamanhos de página web 379-380

alinhamento vertical das imagens servidores web 7, 9, 10, 81, 84

105-106 espaço em branco 308, 469

margens verticais 308 margem e estofamento 307

vídeo 200-223 propriedade estofamento 313

<Video> 209 propriedade de margem 314

serviços hospedados ou auto-hospedagem lacunas entre os itens da lista 334

210 espaço em branco em colapso 47, 308

gerenciamento de direitos digitais 213 manipulação de espaço em branco em HTML

codificação 209 47
vídeo flash (FLV) 211 atributo de largura 100, 137, 189, 214

formatos 213-216
AVI, Flash Video, h264, propriedade width 303

MPEG, Ogg Theora, propriedade largura (flutuante

QuickTime, WebM, elementos) 371

Windows Media 209 propriedade de largura (imagens)

jogadores e plugins 209 409-410

atributo src 214 propriedade de largura (tabelas) 337

exibição da fonte 35, 162, 317, 318 wireframes 463-464

Vimeo 210 propriedade-espaçamento palavra 284

propriedade de visibilidade 318

Visitantes referrers 486

X
rastreamento 483 x altura 268
Visitantes / visitas / visitas únicas XHTML 179
484 diferenças de HTML 179
editores visuais em um CMS 34, 49 declaração DOCTYPE 181
hierarquia visual 465, 467, Estrita / Transitional XHTML
467-468 180
XML 180

W declaração XML 181

wallpaper (imagens) 414

marca d'água (imagens) 414
Y
navegadores web 7 Youtube 210
teste em vários navegadores
242
exibição da fonte 35
Z
barra de ferramentas desenvolvedor web 348 eixo z 369
hospedagem na web 7, 9, 487 propriedade z-índice 364, 369
contas de e-mail 488
layout de página web 358-405

paginas web

ÍNDICE
Solução de problemas
Aqui estão alguns problemas que os novatos comumente enfrentam, juntamente com as páginas onde você

pode encontrar soluções para eles.

Começando Texto gerais CSS

O navegador mostra a marcação digitado (não Algum texto pisca-se antes de Um estilo especificado não está mostrando.

a página de resultados). mostrar a fonte correta. Lembre-se seletores CSS são maiúsculas de

Verifique a extensão do arquivo é. html Você tem um flash de conteúdo sem minúsculas.

e não . TXT. p 30, 32 estilo. p 278

Verifique se os seletores estão
texto em negrito, itálico, títulos, ou texto do Ao copiar texto a partir de processadores de texto, corretas. p 238
link estão estendendo mais que o esperado. os lotes de tags extras são adicionados à

marcação. A barra de ferramentas desenvolvedor web pode

Verifique se tem fechado a tag relevante por Copie o texto em um editor de texto simples ajudá-lo a encontrar o para a direita.

exemplo </ a>. p 21, 22 (para remover a formatação), em seguida, p 348

cole-o em seu editor de HTML. p 49

A página que eu ligado não for encontrado. Se os seletores estão corretas, você
Verifique a URL relativa. p 83, 84 tem outro seletor que se aplica ao
O texto parece maior / menor em algumas mesmo elemento no final do CSS? p
telas. 239, 240
imagens
Isto é geralmente devido a variações nas resoluções

As imagens não estão aparecendo. de tela. Além disso, verifique a escala do tipo está CSS varia em alguns navegadores. Há uma série

Verifique a URL relativa. p 83, 84 definido para o de bugs CSS / peculiaridades do navegador que

<Body> elemento. p 377, 276 significa que eles processar a página de forma

Imagens estão procurando borrada. ligeiramente diferente - tente procurar o problema e

Verifique se você salvou suas imagens no O tamanho da fonte está errado no IE quando eu ver se ele é um conhecido CSS bug / peculiaridade. p

formato certo e no tamanho que você quer uso ems. 242

mostrar a eles a. p 109-113 Veja acima. p 276

A fonte que especificou não está

HTML 5
imagens de fronteira não estão mostrando. mostrando em alguns navegadores.

Isso só funciona com navegadores mais O computador deve ter esse tipo de letra O navegador não está aplicando
recentes. (Além disso, verifique a URL instalado. p 269-272 estilos a elementos HTML5.
relativa). p 319, 21, 22 Se você está a utilizar @ font-face deve estar em Se for IE, você pode precisar usar o
vários formatos. p 341 HTML5 shiv / calço. P442
GIFs que foram redimensionadas agora olhar

granulado ou têm bordas irregulares. Minhas fontes parecem recortadas em um PC. elementos nível de bloco são processamento

Verifique o espaço de cor em seu programa de Algumas fontes não anti-alias, bem como outros em como elementos inline.

edição de imagem. Deve ser RGB (não um PC. Tente um tipo de letra diferente ou tentar Usar display: block para dizer ao navegador
indexados cor). uma versão mais espessa. p 272 que elementos HTML5 são elementos nível
de bloco. p 442

ÍNDICE
LAYOUT
O design parece maior / menor em Uma imagem de fundo não está mostrando Meu elemento flutuado ocupa toda a
algumas telas. na minha caixa. largura da janela do navegador (ou
A resolução de um monitor afeta o quão Será que a caixa que você está aplicando o contendo box).
grande os itens aparecem na página. p 377, estilo para ter uma altura e largura Verifique se você especificou uma largura
378 definida? p 303 para o elemento flutuado.
p 371
Margens acima e abaixo de uma caixa não Será que a caixa contendo têm uma propriedade

mostrando. estouro definido como auto? O recipiente em torno de meus elementos flutuantes

Vertical colapso margens. p 308 p 373, 374 são um pixel de altura.

O elemento que contém não sabe a altura dos

Meu conteúdo não se encaixa na janela / caixa Minhas imagens de fundo não mostram elementos flutuantes dentro dela. Você pode

de navegador que contém. quando a página é impressa. adicionar um elemento que funciona como

Você pode lidar com isso usando a A maioria dos navegadores não imprimir imagens de uma caixa de compensação ou usar o

propriedade overflow. p 306, 316 fundo por padrão para ajudar a economizar tinta.

Você pode ajustar isso em suas preferências de transbordar propriedade com um valor definido para auto.

Caixas olhar um tamanho diferente no IE. impressão. p 373

Algumas versões do IE usar um modelo de caixa

diferente do que todos os outros navegadores. Há uma lacuna entre a janela do IE adicionado uma margem extra para os meus

Use um DOCTYPE navegador e meu conteúdo. elementos flutuantes.

declaração a fazer versões antigas do IE se Colocou o exibição propriedade para

comportar como outros navegadores. Você pode precisar configurar margem e na linha.
p 316 preenchimento no < body> 0 elemento para. p

313, 314
Caixas não aparecem centrado ao usar auto
para as margens esquerda e direita.
Flutuar no LAYOUT
Você pode precisar usar o A caixa não está sentado ao lado de um

alinhamento de texto propriedade sobre o outro elemento flutuou.

elemento que contém. p 315 Certifique-se de que não há espaço suficiente no

elemento que contém para o dois ao sentar-se

Os elementos são sobrepostos. lado a lado.

Quando você toma elementos fora do fluxo p 303

normal, eles podem se sobrepor.

z-índice ajuda a controlar qual item vai Margens e preenchimento são adicionados à

em cima. p 369 largura da caixa (exceto para versões mais

antigas do IE, que têm um modelo de caixa

Porque é o vertical-align diferente). Portanto, a caixa pode ser mais amplo

propriedade não centrar verticalmente meu do que o especificado na propriedade width. p Se você se deparar com um problema que você

elemento de nível de bloco? 316 acha que pertence a esta seção de solução,

Esta propriedade não é projetado para esta sinta-se bem-vindo para enviar e-mail para o

finalidade. Ele é usado para centralizar endereço:

na linha elementos na página. Você vai encontrar Você especificar uma largura para o [email protected].
várias maneiras de elementos nível de bloco elemento flutuou? (Ver ponto seguinte). Faremos o possível para resolver os
verticalmente centro (dependendo do seu problemas mais comuns dos nossos leitores
contexto), se você pesquisar no Google. têm enfrentado em futuras edições deste livro.
Obrigado!

ÍNDICE
elementos HTML

<a> 77, 79, 85, 441 <Form> 151 <Option> 157

<Abbr> 53 <H1> 22, 43 <P> 22, 44
<Acronym> 53 <H2> 22, 43 <Q> 52
<Address> 55 <H3> 43 <S> 56
<Artigo> 432-439 <H4> 43 <Script> 208, 218
<Aside> 436 <H5> 43 <Section> 433, 437
<Audio> 217-220, 219 <H6> 43 <Select> 157
<B> 45 <Head> 27 <Source> 215, 220
<Blockquote> 52 <Header> 432, 433 <Span> 188
<Body> 22, 27 <Hgroup> 438 <Strong> 51
<br /> 48 <Hr /> 48 <Style> 236
<Button> 162 <Html> 22 <Sub> 46
<Cite> 54 <I> 45 <Sup> 46
<Dd> 67 <Iframe> 189-190 <Table> 131

<Del> 56 <Img> 99, 100 <Tbody> 135

<Dfn> 54 <Input> 152, 155, 159- 162, 166 <Td> 131

<Div> 187, 431, 440 <Ins> 56 <Textarea> 154

<Dl> 67 <Label> 163 <Tfoot> 135
<Dt> 67 <Legend> 164 <Th> 132
<Em> 51 <Li> 65, 66 <Thead> 135
<Embed> 203 <Link> 235, 396 <Title> 27, 28
<Fieldset> 164 <Meta> 191, 192 <Tr> 131

<Figcaption> 119, 422, 439 <Nav> 432, 434 <U> 56

<Figure> 119, 422, 439 <Object> 203 <Ul> 66
<Footer> 432, 433 <Ol> 65 <Video> 209, 213-216

ÍNDICE
 atributos HTML

açao 151 href 77, 79, 88, 235 Tamanho 152, 153, 158

alinhar 103-105 http-equiv 192 src 99, 189, 214, 215, 219, 220
alt 99 identidade 87, 88, 151, 163 estilo 236
Reprodução automática 214, 219 atributo id 183, 431 alvo 86
bgcolor 138 laço 214, 219 título 53, 99
fronteira 138 comprimento máximo 152, 153 tipo 152, 155, 159
verificado 155, 156 método 151 tipo (áudio / vídeo) 220, 215
citar 52 múltiplo 158 Tipo (CSS) 235-236
classe 184, 431 nome 152-157, 160, 191 type = "data" 166
codecs 215 espaço reservado 168 type = "email" 167
cols 154 poster 214 type = "hidden" 162
colspan 133 pré-carga 214, 219 type = "imagem" 161

conteúdo 191, 192 rel 235 type = "password" 153

controles 214, 219 robôs 191 type = "search" 168
descrição 191 linhas 154 type = "submit" 160
para 163 rowspan 134 type = "URL" 167

moldura 190 scrolling 190 valor 155-157, 160

atributos globais 183 desatado 190 largura 100, 137, 189, 214
altura 100, 189, 214 selecionado 157

ÍNDICE
propriedades CSS

background-attachment propriedade bottom 366-371 propriedade margin-right 314

propriedade 414 propriedade box-shadow 320 propriedade margin-top 314

cor de fundo 250 propriedade clear 372 opacidade 254

propriedade background-image 413 cor 249 propriedade padding-bottom 313

propriedade background-image cursor propriedade 347 propriedade padding-left 313

(gradientes) 419 propriedade de exibição 317 propriedade estofamento 313

propriedade background-position propriedade células vazias 339 propriedade estofamento (tabelas) 337

415 flutuar propriedade 364, 370-375 propriedade padding-right 313

propriedade background 416 flutuar propriedade (imagens) 411 propriedade padding-top 313

propriedade background-repeat @Tipo de letra 277 propriedade position 366, 367

414 Tipo de letra 271 rgba 254
border-bottom-color 311 família de fontes 271, 273 direito de propriedade 366-371

border-bottom-style 310 tamanho da fonte 274, 276 alinhamento de texto 285

propriedade border-collapse 340 propriedade font-style 280 text-decoration 282

Cor da borda 311 altura (imagens) 409-410 text-indent 287
propriedade border-image 319 HSL / HSLA 255-256 text-shadow 288
border-left-color 311 propriedade esquerda 366-371 text-transform 281
border-left-style 310 letter-spacing 284 propriedade top 366-371

propriedade border 312 altura da linha 283 vertical-align 286

propriedade border-radius 321 list-style-image propriedade 334 propriedade de visibilidade 318

border-right-color 311 propriedade list-style-position 335 largura (imagens) 409-410

-Style border-right 310 propriedade list-style 336 propriedade largura (flutuante

propriedade border-spacing 340 propriedade list-style-type 333 elementos) 371

estilo de borda 310 propriedade margin-bottom 314 propriedade de largura (tabelas) 337

border-top-color 311 propriedade margin-left 314 word-spacing 284

border-top-style 310 propriedade de margem 314 propriedade z-índice 364, 369

Pseudo-classes, elementos e regras

:ativo 291 :flutuar 291, 343, 342 @Tipo de letra 277

:primeira carta 289 destacando as linhas da tabela 337 regra @import 395
:primeira linha 289 :ligação 290 !importante 239
:foco 291, 342 :visitou 290

ÍNDICE