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

http://www.wiley.com/go/permissio
.com/go/permissions.
ns.

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,

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 liv ros eletrônicos.

Biblioteca de controlo do número Congresso:2

  011932082

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 propriedad
propriedade
e dos seus respectivos proprietários.
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
 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çãop
  áginas vêm no início de cada capítulo. Eles Referênciap
  á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.

fundop
  á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:C
  omo controlar coisas como é usado para controlar o desenho de páginas
que você tem à sua disposição para criar a cor do texto, as f ontes 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:C

  omo controlar onde os diferentes Finalmente,
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 webq  ue 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 webe  mpresa
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
navegadoress visitantes utilizam para acessar o
navegadore 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.jpe
  m 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 e
  m San Francisco
servidores DNS que dizer ao seu navegador
como encontrar o site. ● Um usuário em visitas Estocolmo www.louvre.fr.E
  m 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

1
System (DNS). Estes agem como telefone
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
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>E
  ste é o ponto principal  </  h1> <p>E
  ste 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>E
  sta é uma sub-rubrica  </  h2> <p>M
  uitos 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>O
  utra 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
<H1> Este é o ponto principal  </ H1>

<P> Este
<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
<H2> Esta é uma sub-rubrica </
sub-rubrica  </ H2>

<P> Muitos
<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
<H2> Outra sub-rubrica  </ H2>

<P> Aqui
<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>t  ag indica que alguma coisa entre ele e o fechamento

</ Body>t  ag 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>t  ag 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 ps  ignifica 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 q
  ualquer 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 
an  ome e  uma valor  ,
Separados por um sinal de igual.

atributo
nome

<p lang
lang ="
 =" en-us
 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
lang ="
 =" fr 
 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
 /chapter-01/body-head-title.html
-title.html HTML

<Html>
Você conheceu o < body> elemento no <Head>
primeiro exemplo que criamos. Tudo dentro <Title>E
  ste é 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>Q
  ualquer coisa dentro do corpo de
uma página web é exibida na janela do navegador principal.
principal.  </  p> </ body> </
html>

<Head>
Antes do < body>  elemento muitas vezes você
vai ver um < head>e  lemento. 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>e
  tiquetas 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>m

  arcas
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...V
  ocê 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.C

  ertifique-se
de que o Salvar como tipo d  rop-down tem Todos
os arquivos 

selecionado.

Inicie o navegador web. Vou ao  Arquivo m

  enu
e selecione Abrir.
4
Navegue até o arquivo que você acabou de
criar, selecione-o e clique no
Abrir b
  otã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.V
  ocê
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.V
  ocê deve procurar o arquivo que você
acabou de criar, selecione-o e clique no Abrir b  otão.
O resultado deve ser semelhante à captura
de tela para a esquerda.

Se
paraele não sem
  parece
o Arquivo  com isso,Salvar
enu e selecione você pode
como...V
  ocê
precisar alterar uma das configurações em
TextEdit. Vá para o menu TextEdit e
selecione
Preferências.E
  m 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>e  lementos. 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
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. ( A
  s 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
código é abaixo.
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.ht

headings.html
ml html

<H1>E
  ste é um ponto principal  </  h1> <h2> E
  ste é um

<h2> título de nível 2 

<h4>E
2  </  h2> <h3>E
  ste é um título de nível 3  </  h3>
  ste é um cabeçalho de nível 4  </  h4> <h5> E
  ste é
um cabeçalho de nível 5  </  h5> <h6> E
  ste é um cabeçalho
<h3> de nível 6 
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>e
  lemento é 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>e  lemento
é 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>
U
  m parágrafo consiste em um ou mais frases
<Html>
<P>
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>T
  exto é 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>I  sto é como nós fazemos uma palavra aparecer < b>n

  egrito.  </  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>c  aracterísticas principais  </  b>e
  m negrito.  </  p>

o < b>e  lemento 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>I  sto é como nós fazemos uma palavra aparecer < i>i  tálico  </  i>
 i> .
 .
Colocando palavras nas tags </ P> <p>É
  uma batata < i>S
  olanum teberosum  </  i>
 i> . </ P> <p>C
 . </   aptain
<I> e </  i>  nós podemos fazer personagens Cook navegou para a Austrália na
aparecem em itálico.
<I>E
  sforço  </  i>
 i> .
 . </
 </ P>
o < i>e  lemento 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
pensamentos ou outros termos
que normalmente seriam em itálico.

45 TEXTO
 sobrescritoartigo
&
subscrito

html capítulo-02 / sobrescrito

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

Resultado
<Sub>
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-spac
branco-space.html
e.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>
Terra.
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

linha-breaks.html
.html
<br />
<P>a
  Terra  <  br />r  ecebe cem toneladas mais pesado
todo dia 
dia  <  br />d  evido à 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-r
horizontal-rules.html
ules.html
regra horizontal entre as seções usando o <  hr

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

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>
combinado. 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 visuaism
  uitas vezes se assemelham Se você copiar e colar texto de um programa visualizações de códigom
  ostrar-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>e  lemento 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>e  lemento, 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>C
  uidado:  </  strong>P
  ickpockets operam em
O uso do <  strong> esta área. 
área.  </  p> <p>E
  ste 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>I  vy foi o primeiro.  </  p> <p> eu acho que < em>
o < em> elemento indica ênfase que Hera  </  em>f  oi o primeiro.  </  p> <p>E
Hera   u acho que Ivy foi a < em>p  rimeiro  </
sutilmente muda o sentido de uma em> .
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.wikip
"http://en.wikipedia.org/wiki/
edia.org/wiki/
oh "> <p> V
Winnie-the-Pooh
Winnie-the-Po   ocê já parou para pensar, e esqueça começar

novamente?  </  p> </ blockquote> <p> C

  omo AA Milne disse, < q>A
  lgumas
pessoas falam
<Blockquote>
o < blockquote>e  lemento é 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>e  lemento
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>e  lemento.

Ambos os elementos podem usar o citar

atributo p
  ara 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 / abbreviation

abbreviations.html
s.html html

<P> <abbr title = "Professor">P

  rof   </  abbr>S
  tephen
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>e
  lemento para acrónimos.
Para explicitar a forma completa da
sigla, a título
atributo foi usado (como com o
<Abbr>e
  lemento de cima). HTML5 só usa
Resultado
o < abbr>e  lemento para ambas as
abreviaturas e acrónimos.

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

html capítulo-02 / citations.h

citations.html
tml
<Cite>
<P> <cite>U
  ma breve História do Tempo  </  cite>p  or 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>e
  lemento pode ser utilizado para
indicar onde a citação é de.

Em HTML5, <  cite>r  ealmente 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>U
  MA < dfn>b  uraco 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>e  lemento é usado para indicar a

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

Alguns navegadores mostram o conteúdo

do < dfn>e  lemento 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>e  lemento tem um bom uso <P> <a href="mailto:h
href="mailto:[email protected]
[email protected]">
rg">
específico: para conter detalhes de [email protected]  </  a> </ p> <p>7  42 Evergreen Terrace,
[email protected]
contato para o autor da página. Springfield.  </  p> </ address>
Springfield.

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-de

insere-e-delete.html
lete.html
<Ins>
<P>F
  oi a < del>p  ior   </  del> <ins>m
  elhor   </  ins>i  déia
que ela jamais tivera.  </  p>
<del>
o < ins>e  lemento pode ser usado para
mostrar o conteúdo que foi inserido em um
documento, enquanto o <  del>e  lemento pode
mostrar texto que foi excluído a partir dele.

Resultado
O conteúdo de um <  ins>e  lemento é geralmente
sublinhado, enquanto o conteúdo de um < del>e  lemento
geralmente tem uma linha através dele.

html capítulo-02 / strikethrough.html

<S>
<P>  Notebook:  </  p> <p> <s> F
  oi de US
$ 995 
995 </  s> </ p> <p> A
  gora apenas US o < s> elemento indica algo que não
$ 375 
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>e
  lemento 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>T
  exto  </  title> </ head>
<body>

<H1>A
  história no livro  </  h1> <h2>C
  apítulo 1  </  h2> <p>M
  olly 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>N
  atureza  </  i>
 i> ,
 , <I>
 <I>
New Scientist 
Scientist  </  i>  ,e
 i> ,   todas as outras revistas científicas seu trabalho tinha aparecido
em, era uma cópia bem manuseado de < cite>N
  a estrada  </  cite>  .T
 cite> .   inha 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>E
  la 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> .E
 q> .   mbora
muitos consideravam seu trabalho pioneiro, desvendando os segredos do llama < título
abreviatura = "ácido desoxirribonucleico">  DNA  </  abbr>  ,p
 abbr> ,   ara ser uma conquista
notável, Molly < em> fez  </  em>a  cho 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).