Machine Translated by Google

Aprender

HTML
e CSS
com w3schools

Hege Refsnes, Ståle Refsnes, Kai Jim Refsnes,

Jan Egil Refsnes com C. Michael Woodward

Editora Wiley
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Publicado pela
Wiley Publishing, Inc.
111 River Street
Hoboken, NJ 07030-5774
www.wiley.com

Copyright © 2010 por Wiley Publishing, Inc., Indianápolis, Indiana

Publicado simultaneamente no Canadá

Número de série: 978-0-470-61195-1

Código de área/CIP: 2010924594

Fabricado nos Estados Unidos da América

10 9 8 7 6 5 4 3 2 1

Nenhuma parte desta publicação pode ser reproduzida, armazenada em um sistema de recuperação ou transmitida de qualquer
forma ou por qualquer meio, eletrônico, mecânico, fotocópia, gravação, digitalização ou de outra forma, exceto conforme permitido
pelas Seções 107 ou 108 da Lei de Direitos Autorais dos Estados Unidos de 1976, sem a permissão prévia por escrito do Editor
ou autorização por meio do pagamento da taxa por cópia apropriada ao Copyright Clearance Center, 222 Rosewood Drive,
Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Solicitações de permissão ao Editor devem ser endereçadas ao
Departamento Jurídico, Departamento de Permissão, 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 fazem representações ou garantias com relação à
precisão ou integridade do conteúdo deste trabalho e especificamente isentam-se de todas as garantias, incluindo, sem limitação,
garantias de adequação a uma finalidade específica. Nenhuma garantia pode ser criada ou estendida por materiais de vendas ou
promocionais. Os conselhos e estratégias aqui contidos podem não ser adequados para todas as situações. Este trabalho é
vendido com o entendimento de que o editor não está envolvido na prestação de serviços jurídicos, contábeis ou outros serviços
profissionais. Se for necessária assistência profissional, os serviços de um profissional competente devem ser procurados. Nem
o editor nem o autor serão responsáveis por danos decorrentes disto. O fato de uma organização ou site ser mencionado neste
trabalho como uma citação e/ou uma fonte potencial de informações adicionais não significa que o autor ou o editor endossa as
informações que a organização ou site pode fornecer ou recomendações que pode fazer. Além disso, os leitores devem estar
cientes de que os sites da Internet listados neste trabalho podem ter mudado ou desaparecido entre quando este trabalho foi
escrito e quando é lido.

Para obter informações gerais sobre nossos outros produtos e serviços, entre em contato com nosso Departamento de
Atendimento ao Cliente nos Estados Unidos pelo telefone (877) 762-2974, fora dos Estados Unidos pelo telefone (317) 572-3993
ou pelo fax (317) 572-4002.

Marcas registradas: Wiley, o logotipo da Wiley e a identidade visual relacionada são marcas registradas ou marcas comerciais
da John Wiley & Sons, Inc. e/ou suas afiliadas, nos Estados Unidos e outros países, e não podem ser usadas sem permissão por
escrito. w3schools e o logotipo da w3schools são marcas registradas da w3schools. Todas as outras marcas comerciais são de
propriedade de seus respectivos donos. A Wiley Publishing, Inc. não está associada a nenhum produto ou fornecedor mencionado
neste livro.

A Wiley também publica seus livros em uma variedade de formatos eletrônicos. Alguns conteúdos que aparecem impressos
podem não estar disponíveis em livros eletrônicos.

Os dados do CIP da Biblioteca do Congresso estão disponíveis na editora.

Machine Translated by Google

Autores/Editores do w3schools
A missão da w3schools é publicar tutoriais on-line bem organizados e fáceis de entender,
com base nos padrões Web do W3C.

Hege Refsnes
Hege é escritora e editora da w3schools. Ela trabalha para melhorar a usabilidade e acessibilidade
da Web.

Hege escreve tutoriais para a w3schools desde 1998.

Ståle Refsnes
Ståle tem dez anos de experiência em desenvolvimento de Internet, desenvolvendo todas as
soluções baseadas na Web para a Federação Norueguesa de Handebol.

Ståle escreve tutoriais para a w3schools desde 1999.

Kai Jim Refsnes

Kai Jim está envolvido com computadores desde a infância e trabalha com eles desde os 14 anos.

Ele escreve tutoriais para a w3schools desde que concluiu o bacharelado em tecnologia da
informação em 2005.

Jan Egil Refsnes

Jan Egil é o presidente e fundador da w3schools.

Ele é um desenvolvedor de sistemas sênior com mestrado em tecnologia da informação e mais de

30 anos de experiência em computação.

“Jani” supervisionou um grande número de projetos de desenvolvimento críticos para empresas de

petróleo como Amoco, British Petroleum, ELF, Halliburton e Brown & Root. Ele também desenvolveu
soluções baseadas em computador para mais de 20 instituições governamentais como a Biblioteca
Nacional, Escolas Secundárias Norueguesas, Hospital Estadual e muitas outras.

Jani fundou a w3schools em 1998.

Machine Translated by Google

Créditos
Editor de Aquisições Vice-presidente e Executivo
Scott Meyers Editora do Grupo
Ricardo Swadley
Produção
Casa Abshier Vice-presidente e Executivo
Editor
Barry Pruett
Editor de Cópias
Casa Abshier
Editora Associada
Jim Minatel
Diretor Associado de Marketing
David Mayhew
Coordenador de Projeto, Cover
Lynsey Stanford
Gerente de Produção
Tim Tate
Designer de capa
Michael Trent
Revisão e Indexação
Casa Abshier
Machine Translated by Google

Índice

Seção I: HTML Básico..........................5

Capítulo 1: Introdução ao HTML ..............................................................7
O que você precisa ...................................................................................................7
Editores HTML .....................................................................................................7
Crie seu próprio site de teste...................................................................................8
Extensão .HTM ou .HTML?.............................................................................8

Capítulo 2: Fundamentos de HTML...................................................................9 Títulos

HTML...................................................................................................9 Parágrafos
HTML...................................................................................................10 Links
HTML...................................................................................................................11

Imagens HTML..............................................................................................................11

Capítulo 3: Elementos HTML.........................................................................13

Elementos HTML ................................................................................................13

Sintaxe de elementos HTML ......................................................................................13

Elementos aninhados ................................................................................................14

Não se esqueça da tag final ....................................................................................15

Elementos HTML vazios.....................................................................................16 Use tags
minúsculas................................................................................................16

Capítulo 4: Atributos HTML........................................................................17

Atributos HTML padrão ................................................................................17

Definindo valores de atributos ...................................................................................17

Referência de atributos HTML...................................................................................18

Capítulo 5: Títulos, regras e comentários HTML.......................................19 Títulos

HTML.................................................................................................19 Regras
HTML (Linhas) ..................................................................................................20
Comentários HTML .............................................................................................21

Visualizando o código-fonte HTML.............................................................................22

Referência de tag HTML.............................................................................................22

V
Machine Translated by Google

Índice

Capítulo 6: Parágrafos HTML ....................................................................23 Parágrafos

HTML................................................................................................23 Quebras de linha
HTML................................................................................................24

Dicas de saída HTML.........................................................................................24

Referência completa de tags....................................................................................26

Capítulo 7: Formatação de texto HTML..............................................................27 Marcadores de

formatação HTML ................................................................................27 Formatação de
texto ................................................................................................28 Texto pré-
formatado ................................................................................................29 Marcadores de

"saída do computador" ..........................................................................30

Endereço..........................................................................................................................31

Abreviações e acrônimos..........................................................................32 Direção do

texto..........................................................................................33

Citações..........................................................................................................34 Texto excluído

e inserido ................................................................................35

Marcadores de formatação de texto ..........................................................................................36

Capítulo 8: Estilos HTML ..........................................................................39 O atributo de estilo

HTML.................................................................................39 Tags e atributos
obsoletos...................................................................40 Estilos HTML
comuns...................................................................................41 Referência completa de
tags.................................................................................44

Capítulo 9: Links HTML..............................................................................45 Links

HTML...................................................................................................45

Abrir um link em uma nova janela do navegador.........................................................46

Hiperlinks, âncoras e links...................................................................47 Sintaxe
do link HTML...................................................................................47 Links na
mesma página...................................................................................50 Criando
um link de e-mail para:...................................................................................52
Criando um link de imagem...................................................................................54

Capítulo 10: Imagens HTML.............................................................................55 Tag img e o atributo

src.............................................................................55 Inserir imagens de diferentes
locais...................................................................57 Imagens de
fundo...................................................................................58 Alinhando
imagens.................................................................................................59 Imagens
flutuantes.................................................................................................61

VI
Machine Translated by Google

Índice

Ajustando tamanhos de imagem .........................................................................................62

Atributo alt........................................................................................................63

Criando um mapa de imagem ......................................................................................63

Capítulo 11: Tabelas HTML..............................................................................65 Criando tabelas

HTML.....................................................................................65 Bordas de
tabelas...................................................................................................68
Tabela sem borda .............................................................................................70

Títulos em uma tabela..............................................................................................71 Tabela

com uma legenda ..............................................................................74 Células que abrangem
várias colunas ................................................................75 Marcadores dentro de uma
tabela................................................................................................76 Preenchimento de
célula ..............................................................................................78 Espaçamento de
célula..........................................................................................79 Cores e imagens de fundo
da tabela ..........................................................80 Cores e imagens de fundo da
célula ..........................................................82 Atributo de
quadro ..........................................................................................84

Usando moldura e borda para controlar bordas de tabela..........................................88

Capítulo 12: Listas HTML.............................................................................90

Listas não ordenadas ..............................................................................................................90
Listas ordenadas......................................................................................................93
Listas de definições...................................................................................................95
Listas aninhadas ............................................................................................................96

Capítulo 13: Formulários e entrada HTML ..............................................................99

Formulários .................................................................................................................99

Tag de entrada e atributos...................................................................................100 Atributo

de ação...................................................................................................106

Exemplos de formulários ................................................................................................106

Capítulo 14: Cor HTML.........................................................................111

Valores de cor .....................................................................................................111
16 milhões de cores diferentes..............................................................................112

Nomes de cores padrão da Web..............................................................................113

Nomes de cores suportados por todos os navegadores ..........................................................113

Cores seguras para a Web? ..............................................................................................114

Tons de Cinza..............................................................................................114

VII
Machine Translated by Google

Índice

Capítulo 15: Lista rápida do HTML 4.01..........................................................116

Documento Básico HTML...................................................................................116

Elementos de título.............................................................................................116
Elementos de texto ...................................................................................................116

Estilos lógicos ....................................................................................................117 Estilos

físicos...................................................................................................117 Links, âncoras e
elementos de imagem ................................................................117 Lista não ordenada
(com marcadores) ................................................................................117
Lista ordenada (numerada) .............................................................................................117
Lista de definições ...................................................................................................118
Tabelas ...............................................................................................................118
Quadros..............................................................................................................118
Formulários ...............................................................................................................118
Entidades .............................................................................................................119
Outros Elementos................................................................................................119

Seção II: HTML/CSS Avançado.....121

Capítulo 16: Layout HTML .......................................................................123 Layout HTML
usando tabelas................................................................................123

Capítulo 17: Quadros HTML.......................................................................125

Tag frameset......................................................................................................125 Tag

frame..............................................................................................................127 Projetando
com Frames...................................................................................128

Capítulo 18: Fontes HTML .........................................................................136 Tag de

fonte .............................................................................................136 Atributos de

fonte ................................................................................................137

Controlando fontes com estilos.........................................................................137

Capítulo 19: Por que usar HTML 4.0?.............................................................140 HTML 3.2 estava
muito errado!................................................................................140 Entra o HTML
4.0................................................................................................140

VIII
Machine Translated by Google

Índice

Capítulo 20: Estilos HTML CSS..............................................................................142 Estilos em

HTML.................................................................................................142 Como usar
estilos.................................................................................................144 Marcadores de
estilo................................................................................................................146

Capítulo 21: Entidades de caracteres HTML......................................................147

Entidades de Personagem .............................................................................................147

Espaço não divisível.........................................................................................148 Entidades

de caracteres comumente usadas..................................................................149

Capítulo 22: Elementos HTML Head e Meta.............................................150

Elemento principal...................................................................................................150
Elemento Meta ...................................................................................................153

Capítulo 23: Localizadores Uniformes de Recursos HTML .......................................157

Localizador Uniforme de Recursos (URL) ...................................................................157

Esquemas de URL...................................................................................................158

Usando Links.......................................................................................................159

Capítulo 24: Scripts HTML .......................................................................160 Inserir um script em

uma página...................................................................................160
Como lidar com navegadores mais antigos........................................................................161

Etiqueta noscript ......................................................................................................162

Etiquetas de script ............................................................................................................162

Capítulo 25: Atributos Padrão HTML.............................................................163

Atributos principais.................................................................................................163

Atributos de idioma..........................................................................................163 Atributos

de teclado..........................................................................................164

Capítulo 26: Atributos de eventos HTML ........................................................165

Eventos de janela.................................................................................................165
Eventos de elementos de formulário.........................................................................................166

Eventos de teclado...................................................................................................166
Eventos do mouse..............................................................................................................166

Capítulo 27: Codificação de URL HTML ..........................................................167 Codificação de

URL ..............................................................................................167 Caracteres comuns de
codificação de URL................................................................168

IX
Machine Translated by Google

Índice

Capítulo 28: Transforme seu PC em um servidor Web .............................................169

Seu PC Windows como um servidor Web...................................................................169

Instalando o IIS no Windows Vista e Windows 7..........................................170

Instalando o IIS no Windows XP e Windows 2000...........................................171
Testando sua Web................................................................................................171
Seu próximo passo: um servidor Web profissional...................................................172

Capítulo 29: Resumo de HTML e CSS ....................................................173

Seção III: Apêndices...................175

Apêndice A: Referência HTML 4.01 1.0.............................................177

Apêndice B: Atributos padrão HTML.........................................185

Apêndice C: Atributos de eventos padrão HTML .................................187

Apêndice D: Elementos HTML e Doctypes Válidos ...........................189

Apêndice E: Conjuntos de caracteres HTML ...................................................193

Apêndice F: Referência HTML ASCII.............................................196

Apêndice G: Referência HTML ISO-8859-1.....................................201

Apêndice H: Referência de entidades de símbolos..............................................207

Apêndice I: Referência de codificação de URL HTML..................................213

X
Machine Translated by Google

Introdução

Bem-vindo ao Learncriar
tentando HTML andpróprias
suas CSS compáginas
w3schools.
da Este
Weblivro é paraHTML,
usando usuários da Web aprenderem-
a linguagem de marcação
padrão da World Wide Web.

w3schools (www.w3schools.com) é um dos principais destinos da Web para aprender HTML e muitas outras
linguagens importantes da Web. Os tutoriais da w3schools são leituras recomendadas em mais de 100
universidades e escolas de ensino médio em todo o mundo. Este livro é um ótimo companheiro para os tutoriais
de HTML e CSS no site da w3schools, que foram escritos por Hege Ref-snes, Ståle Refsnes, Kai Jim Refsnes e
Jan Egil Refsnes.

Assim como os tutoriais on-line do w3schools, este livro apresenta uma breve apresentação de cada tópico,
trocando longas explicações por exemplos abundantes que mostram cada recurso-chave. Este livro, assim como
outros livros do w3schools publicados pela Wiley, apresenta tutoriais diretos e concisos sobre cada tópico, dos
quais o desenvolvedor Web iniciante pode aprender facilmente.
Todo o conteúdo do livro é derivado do conteúdo preciso e testado por usuários da w3schools, usado por milhões
de alunos todos os meses.

HTML
Com HTML, você pode criar seu próprio site. HTML é a tecnologia central na qual todas as páginas da Web são
escritas. Este tutorial ensina tudo sobre HTML. HTML é fácil de aprender — você vai gostar.

O que você já deveria saber

Antes de continuar, você deve ter uma compreensão básica de como usar um navegador para visualizar páginas
na Web.

Se você quiser estudar esses assuntos primeiro, leia The Internet For Dummies, 12th Edition, também da Wiley
Publishing.

O que é HTML?
HTML é uma linguagem para descrever páginas da Web.

8 HTML significa Linguagem de Marcação de Hipertexto.

8 HTML não é uma linguagem de programação, é uma linguagem de marcação.

8 Uma linguagem de marcação é uma coleção de tags de marcação.

8 O HTML usa tags de marcação para descrever páginas da Web.

1
Machine Translated by Google

Aprenda HTML e CSS com w3schools

O que são tags?

8 As tags de marcação HTML são geralmente chamadas de tags HTML ou apenas tags.

8 As tags HTML são palavras-chave cercadas por colchetes angulares, como <html>.

8 tags HTML normalmente vêm em pares, como <b> e </b>.

8 A primeira tag de um par é a tag inicial; a segunda tag é a tag final.

8 As tags de início e fim também são chamadas de tags de abertura e tags de fechamento.

Documentos HTML = Páginas da Web

8 documentos HTML descrevem páginas da Web.

8 documentos HTML contêm tags HTML e texto simples.

8 Documentos HTML também são chamados de páginas da Web.

O propósito de um navegador da Web (como o Internet Explorer ou o Mozilla Firefox) é ler

documentos HTML e exibi-los como páginas da Web. O navegador não exibe as tags HTML, mas
usa as tags para interpretar o conteúdo da página. No seu navegador, parece com a figura I.1.

<html>
<corpo>

<h1>Meu Primeiro Título</h1>

<p>Meu primeiro parágrafo</p>

</corpo>
</html>

No exemplo de código anterior,

8 O texto entre <html> e </html> descreve a página da Web.

8 O texto entre <body> e </body> é o conteúdo visível da página.

8 O texto entre <h1> e </h1> é exibido como um título.

8 O texto entre <p> e </p> é exibido como um parágrafo.

Figura I.1

2
Machine Translated by Google

Introdução

Como usar este livro

Ao longo deste livro, você verá vários ícones:

Experimente você mesmo >>

O ícone Try It Yourself indica uma oportunidade para você praticar o que acabou de aprender. O código e os
exemplos sob este ícone vêm de exemplos no site w3schools, que permitem que você faça alterações no
código e veja os resultados imediatamente. Você não precisa digitar os exemplos de código neste livro; você
pode encontrá-los todos no site w3schools.

O ícone w3schools indica que mais informações estão disponíveis no site w3schools.

Este ícone indica onde você encontrará mais informações sobre um tópico que é abordado mais
detalhadamente em outra parte do livro.

OBSERVAÇÃO
As notas chamam sua atenção para informações importantes que você precisa
saber antes de prosseguir.

DICA
As dicas fornecem atalhos sugeridos e informações para ajudar você a ser mais produtivo.

Este livro está dividido em três seções:

8 Seção I: HTML Básico

8 Seção II: HTML/CSS Avançado

8 Seção III: Apêndices

Se você está ansioso para melhorar suas páginas da Web e adicionar alguma interatividade, pule direto para
o básico de HTML. Muitos exemplos e oportunidades para tentar coisas esperam por você, e a w3schools
estará lá quando você precisar!

3
Machine Translated by Google
Machine Translated by Google

Seção I
HTML Básico

ÿ Capítulo 1: Introdução ao HTML

ÿ Capítulo 2: Fundamentos do HTML

ÿ Capítulo 3: Elementos HTML

ÿ Capítulo 4: Atributos HTML

ÿ Capítulo 5: Títulos, regras e comentários em HTML

ÿ Capítulo 6: Parágrafos HTML

ÿ Capítulo 7: Formatação de texto HTML

ÿ Capítulo 8: Estilos HTML

ÿ Capítulo 9: Links HTML

ÿ Capítulo 10: Imagens HTML

ÿ Capítulo 11: Tabelas HTML

ÿ Capítulo 12: Listas HTML

ÿ Capítulo 13: Formulários HTML e entrada

ÿ Capítulo 14: Cores HTML

ÿ Capítulo 15: Lista rápida do HTML 4.01

Machine Translated by Google
Machine Translated by Google

Capítulo 1

HTML
Começando

Neste capítulo
ÿ O que você precisa

ÿ Editores HTML

ÿ Crie seu próprio site de teste

ÿ Extensão .HTM ou .HTML?

O que você precisa

É simples começar a escrever HTML.

8 Você não precisa de nenhuma ferramenta para aprender HTML com a w3schools.

8 Você não precisa de um editor HTML.

8 Você não precisa de um servidor Web.

8 Você não precisa de um site.

Editores HTML
Neste tutorial, usamos um editor de texto simples (como o Notepad) para editar HTML. Acreditamos
que esta é a melhor maneira de aprender HTML.

No entanto, em vez de escrever texto simples, desenvolvedores profissionais da Web geralmente

preferem usar editores HTML como FrontPage ou Dreamweaver porque eles oferecem atalhos de
escrita de código e recursos úteis.

7
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Crie seu próprio site de teste

Sugerimos que você experimente tudo o que aprendeu neste livro editando seus arquivos da Web com
um editor de texto (como o Bloco de Notas) e abrindo-os no Internet Explorer para visualizar os resultados.

Para criar um Web de teste no seu próprio computador, basta copiar os três arquivos a seguir do site
w3schools para o seu desktop. http://

www.w3schools.com/html/mainpage.htm http://
www.w3schools.com/html/page1.htmhttp://
www.w3schools.com/html/page2.htm

Depois de copiar os arquivos, clique duas vezes no arquivo mainpage.htm e veja seu primeiro site em
ação.

Se o seu Web de teste contiver tags de marcação HTML que você não aprendeu, não entre em pânico.

Você aprenderá tudo sobre tags de marcação nos próximos capítulos.

Extensão .HTM ou .HTML?

Ao salvar um arquivo HTML, você pode usar a extensão .htm ou .html.
Usamos .htm em nossos exemplos. É um hábito do passado, quando o software só permitia três letras em
extensões de arquivo.

Na maioria dos casos, é perfeitamente seguro usar .html.

O site w3schools contém uma riqueza de ferramentas úteis para ajudar você a aprender
HTML, incluindo centenas de exemplos de cortar e colar, um editor de texto online, um
seletor de cores HTML, questionários para testar seu conhecimento e uma abundância de
tabelas de referência para construção de Web. Recomendamos que você consulte o site
com frequência enquanto trabalha neste livro. http://www. w3schools.com/html

8
Machine Translated by Google

Capítulo 2

HTML
Fundamentos

Neste capítulo
ÿ Cabeçalhos HTML

ÿ Parágrafos HTML

ÿ Links HTML

ÿ Imagens HTML

Cabeçalhos HTML
Os títulos HTML são definidos com as tags <h1> a <h6> . Quanto menor o número, maior o
tamanho do título, como mostrado na Figura 2.1.

Não se preocupe se os exemplos usarem tags que você não aprendeu. Você
aprenderá mais sobre tags nos próximos capítulos.

Experimente você mesmo >>

<html>
<corpo>

<h1>Este é o Título 1</h1> <h2>O

Título 2 é menor</h2> <h3>O Título 3
é menor ainda</h3>

</corpo>
</html>

(continua)

9
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua)

Figura 2.1

Parágrafos HTML
Parágrafos HTML são definidos com a tag <p> . A maioria dos navegadores coloca automaticamente
uma quebra de linha e espaço após uma tag </p> , como mostrado na Figura 2.2.

Experimente você mesmo >>

<html>
<corpo>

<p>Este é um parágrafo.</p>
<p>Este é um parágrafo.</p>
<p>Este é um parágrafo.</p>

</corpo>
</html>

Figura 2.2

10
Machine Translated by Google

Capítulo 2: Fundamentos do HTML

Links HTML
Os links HTML são definidos com a tag <a> , conforme mostrado na Figura 2.3.

Experimente você mesmo >>

<html>
<corpo>

<a href="http://www.w3schools.com">Este é um link para o site w3schools.</

a>

</corpo>
</html>

Figura 2.3

O endereço URL é um atributo do elemento link. Você aprenderá sobre atributos no

Capítulo 4, Atributos HTML.

Imagens HTML
Imagens HTML são definidas com a tag <img> . Ela informa ao navegador onde encontrar o
arquivo de imagem e qual tamanho exibi-lo, entre outras coisas. Os resultados deste exemplo de
código são mostrados na Figura 2.4.

Experimente você mesmo >>

<html>
<corpo>

<img src="w3schools.jpg" largura="104" altura="142" />

</corpo>
</html>

11
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Figura 2.4

O nome da fonte e o tamanho da imagem são atributos do elemento de imagem.

Você aprenderá sobre atributos no Capítulo 4, "Atributos HTML".

12
Machine Translated by Google

Capítulo 3

Elementos HTML
Neste capítulo
ÿ Elementos HTML

ÿ Sintaxe do elemento HTML

ÿ Elementos aninhados

ÿ Não esqueça a tag final

ÿ Elementos HTML vazios

ÿ Use tags em letras minúsculas

Elementos HTML
Documentos HTML são definidos por elementos HTML. Um elemento HTML é tudo entre a
tag inicial e a tag final. A tag inicial é frequentemente chamada de tag de abertura.
tag. A tag final é frequentemente chamada de tag de fechamento.

TAG DE ABERTURA CONTEÚDO DO ELEMENTO ETIQUETA DE FECHAMENTO

<p> Este é um parágrafo. </p>

<a href=”default.htm” > Este é um link. </a>

<br />

Sintaxe do elemento HTML

Os elementos HTML seguem um determinado formato, independentemente de como o elemento é usado.

8 Um elemento HTML começa com uma tag de início/abertura.

8 Um elemento HTML termina com uma tag de encerramento/tag de fechamento.

8 O conteúdo do elemento é tudo entre a tag inicial e a final.

8 Alguns elementos HTML têm conteúdo vazio.

8 elementos vazios são fechados na tag inicial.

8 A maioria dos elementos HTML pode ter atributos.

Você aprenderá mais sobre atributos no Capítulo 4, Atributos HTML.

13
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Elementos aninhados
A maioria dos elementos HTML pode ser aninhada (conter ou ser contido dentro de outros
elementos HTML). Documentos HTML consistem em elementos HTML aninhados.

O exemplo a seguir contém três elementos HTML. Observe que o elemento <p> está aninhado
no elemento <body> , que por sua vez está aninhado no elemento <html> . Os resultados dessas
tags são mostrados na Figura 3.1.
<html>
<corpo>

<p>Este é meu primeiro parágrafo</p>

</corpo>
</html>

Figura 3.1

O elemento <p> O elemento <p>

está entre os elementos mais comuns. <p>Este é meu primeiro

parágrafo</p>

8 O elemento <p> define um novo parágrafo no documento HTML.

8 O elemento tem uma tag inicial <p> e uma tag final </p>.

8 O conteúdo do elemento é: Este é meu primeiro parágrafo.

O elemento <body> O elemento <body>

define o corpo do documento HTML.

<corpo>

<p>Este é meu primeiro parágrafo</p>

</corpo>

14
Machine Translated by Google

Capítulo 3: Elementos HTML

8 O elemento tem uma tag inicial <body> e uma tag final </body>.

8 O conteúdo do elemento é outro elemento HTML (um ou mais parágrafos).

Geralmente há dezenas de elementos dentro do elemento corpo.

O elemento <html>
O elemento <html> define todo o documento HTML.

<html>

<body>
<p>Este é meu primeiro parágrafo</p> </
body>

</html>

8 O elemento tem uma tag inicial <html> e uma tag final </html>.

8 O conteúdo do elemento é outro elemento HTML (o corpo).

Não esqueça a tag final

A maioria dos navegadores exibirá o HTML corretamente, mesmo se você esquecer a tag final.

<p>Este é um parágrafo
<p>Este é outro parágrafo

O exemplo anterior funcionará na maioria dos navegadores, mas não confie nele. Esquecer
a tag final pode produzir resultados inesperados ou erros.

OBSERVAÇÃO
Versões futuras do HTML não permitirão que você pule tags finais.

15
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Elementos HTML vazios

Elementos HTML sem conteúdo são chamados de elementos vazios. Elementos vazios podem ser fechados
dentro da tag start.

<br> é um elemento vazio sem uma tag de fechamento. Ele define uma quebra de linha.

Em XML e versões futuras de HTML, todos os elementos devem ser fechados.

Adicionar uma barra ao final da tag inicial, como <br/>, é a maneira correta de fechar elementos vazios, aceita
por HTML e XML.

Mesmo que <br> funcione em todos os navegadores, escrever <br/> em vez disso é mais à prova do futuro.

Use tags em letras minúsculas

As tags HTML não diferenciam maiúsculas de minúsculas: <P> significa o mesmo que <p>. Muitos sites usam
tags HTML maiúsculas em suas páginas.

O w3schools usa tags em letras minúsculas porque o World Wide Web Consortium (W3C) recomenda letras
minúsculas em HTML 4.

16
Machine Translated by Google

Capítulo 4

Atributos HTML

Neste capítulo
ÿ Atributos HTML padrão

ÿ Definindo valores de atributos

ÿ Referência de atributos HTML

Atributos HTML padrão

Atributos fornecem informações adicionais sobre elementos HTML.

8 elementos HTML podem ter atributos.

8 Atributos fornecem informações adicionais sobre o elemento.

8 Atributos são sempre especificados na tag inicial.

8 Atributos vêm em pares nome/valor como: nome=”valor”.

Definindo valores de atributos

Os valores de atributo devem sempre ser colocados entre aspas. Embora as “aspas duplas” sejam
as mais comuns, aspas simples (também chamadas de primos) também são permitidas. Em
algumas situações raras, como quando o próprio valor do atributo inclui aspas, é necessário usar
primos. Por exemplo:

nome='John "Espingarda" Nelson'

Como outro exemplo, links HTML são definidos com a tag <a> . O endereço da Web, entre aspas,
é o valor do atributo do elemento link.
Os resultados aparecem na Figura 4.1.

<a href="http://www.w3schools.com">Este é um link</a> para o

Site w3schools.

Figura 4.1

17
Machine Translated by Google

Aprenda HTML e CSS com w3schools

DICA Os nomes e valores dos atributos não diferenciam maiúsculas de minúsculas. No entanto, o World Wide
O Web Consortium (W3C) recomenda o uso de atributos e valores em letras minúsculas em seu HTML
4 recomendação. Versões posteriores exigem o uso de letras minúsculas.

Referência de atributos HTML

A Tabela 4.1 lista alguns atributos que são padrão para a maioria dos elementos HTML.

Tabela 4.1: Atributos principais

Atributo Valor Descrição

aula class_rule ou style_rule id_name A classe do elemento

eu ia
Um id único para o elemento

estilo definição_de_estilo Uma definição de estilo inline

título texto da dica de ferramenta Um texto para exibir em uma dica de ferramenta

OBSERVAÇÃO Um id específico pode aparecer apenas uma vez em uma página da web, enquanto a classe se refere a um
classe de elementos que podem aparecer muitas vezes na mesma página.

Os atributos listados nessas referências são padrão e são suportados por todos os HTML
tags (com algumas exceções). Uma lista completa de atributos legais para cada elemento HTML está
listado na Referência HTML completa do w3schools online em:

http://www.w3schools.com/tags/default.asp

Para obter mais informações sobre atributos padrão, consulte a Referência de Atributos Padrão
HTML online em:

http://www.w3schools.com/tags/ref_standardattributes.asp

18
Machine Translated by Google

Capítulo 5

Cabeçalhos HTML,
Regras e Comentários

Neste capítulo
ÿ Cabeçalhos HTML

ÿ Regras HTML (Linhas)

ÿ Comentários HTML

ÿ Visualizando o código-fonte HTML

Cabeçalhos HTML
Como os usuários podem folhear suas páginas pelos títulos, é importante usar títulos para
mostrar a estrutura do documento. Os títulos são definidos, do maior para o menor, com as
tags <h1> a <h6> .

Os títulos H1 devem ser usados como títulos principais, seguidos pelos títulos H2, depois
os títulos H3 menos importantes, e assim por diante. Você pode comparar a aparência
dos títulos na Figura 5.1.

Experimente você mesmo >>

<h1>Este é um Título 1</h1>

<h2>Este é um Título 2</h2>
<h3>Este é um Título 3</h3>
<h4>Este é um Título 4</h4>
<h5>Este é um Título 5</h5>
<h6>Este é um Título 6</h6>

19
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Figura 5.1

Use títulos HTML somente para títulos. Não use títulos para deixar o texto GRANDE ou em negrito.

Os mecanismos de busca usam seus títulos para indexar a estrutura e o conteúdo de suas páginas da Web.

OBSERVAÇÃO
Os navegadores adicionam automaticamente uma linha em branco antes e depois dos títulos.

Regras HTML (Linhas)

A tag <hr/> é usada para criar uma régua horizontal (linha) na página do navegador.
As regras são frequentemente usadas para separar seções de um documento, como mostrado na Figura 5.2, ou
para mostrar uma quebra visual.

Experimente você mesmo >>

<html>
<corpo>

<p>A tag hr define uma regra horizontal:</p> <hr /> <p>Este

é um
parágrafo</p> <hr /> <p>Este é um

parágrafo</p> <hr /> <p>Este é um

parágrafo</p>

</corpo>
</html>

20
Machine Translated by Google

Capítulo 5: Títulos, regras e comentários em HTML

Figura 5.2

Comentários HTML
Comentários podem ser inseridos no código HTML para torná-lo mais legível e
compreensível. Comentários são ignorados pelo navegador e não são exibidos, como
demonstrado na Figura 5.3.
Os comentários são escritos assim:

Experimente você mesmo >>

<html>
<corpo>

<!--Este comentário não será exibido-->

<p>Este é um parágrafo regular</p>

</corpo>
</html>

Figura 5.3

OBSERVAÇÃO
Observe que há um ponto de exclamação depois do colchete de abertura, mas
não antes do colchete de fechamento.

21
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Visualizando o código-fonte HTML

Você já viu uma página da Web e se perguntou "Ei! Como eles fizeram isso?" Para descobrir,
clique com o botão direito na página e selecione Exibir código-fonte (no Internet Explorer),
Exibir código-fonte da página (no Firefox) ou opções semelhantes para outros navegadores.
Isso abrirá uma janela que mostra o código HTML da página, conforme mostrado na Figura 5.4.

Figura 5.4

Referência de tag HTML

A referência de tag para w3schools contém informações adicionais sobre essas tags e seus
atributos. Uma lista completa de atributos legais para cada elemento HTML está listada na
Referência HTML Completa do w3schools online em:

http://www.w3schools.com/tags/default.asp

22
Machine Translated by Google

Capítulo 6

Parágrafos HTML

Neste capítulo
ÿ Parágrafos HTML

ÿ Quebras de linha HTML

ÿ Dicas de saída HTML

Parágrafos HTML
Documentos HTML são divididos em parágrafos. Parágrafos são definidos com a tag <p> .

<p>Este é um parágrafo.</p>

OBSERVAÇÃO
A maioria dos navegadores adiciona automaticamente uma linha em branco antes e depois dos parágrafos.

Não esqueça a tag final

A maioria dos navegadores exibirá o HTML corretamente mesmo se você esquecer a tag final:

<p>Este é um parágrafo.
<p>Este é outro parágrafo.</p>

Este código funcionará na maioria dos navegadores, mas não confie nele. Esquecer a tag de fim pode
produzir resultados inesperados ou erros. Versões futuras do HTML não permitirão que você pule as
tags de fim.

23
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Quebras de linha HTML

Use a tag <br /> se quiser uma quebra de linha (uma nova linha) sem iniciar um novo parágrafo. O
elemento <br /> é um elemento HTML vazio. Ele não tem tag de fim.
Os resultados desse código são mostrados na Figura 6.1.

Experimente você mesmo >>

<html>
<corpo>

<p>Este é<br />um parágrafo<br />com quebras de linha</p>

</corpo>
</html>

Figura 6.1

NO T Em XML
e versões futuras de HTML, elementos HTML sem tag de fechamento (tag de fechamento)
não são permitidos. Mesmo que <br> funcione na maioria dos navegadores, escrever <br /> em vez disso
é mais à prova do futuro e, portanto, considerado uma prática recomendada.

Dicas de saída HTML

Você nunca pode ter certeza de como o HTML será exibido. Telas grandes ou pequenas,
diferentes marcas de navegadores e janelas redimensionadas criarão resultados diferentes.

Esteja ciente de que com HTML, você não pode alterar a saída adicionando espaços extras ou
linhas extras no seu código HTML. O navegador removerá espaços extras e linhas extras quando
a página for exibida. Qualquer número de linhas conta como um espaço, e qualquer número de
espaços conta como um espaço.

O exemplo a seguir mostra como alguém poderia naturalmente pensar em formatar uma passagem
de texto multilinha, mas os resultados desse código, mostrados na Figura 6.2, lembram que o
navegador não quebra as linhas como você espera sem uma tag <br />.

24
Machine Translated by Google

Capítulo 6: Parágrafos HTML

Experimente você mesmo >>

<html>
<corpo>

<p>
Minha Bonnie está sobre o oceano.
Minha Bonnie está sobre o mar.
Minha Bonnie está sobre o oceano.

Ah, traga minha Bonnie de volta para mim.

</p>

<p>Observe que seu navegador ignora seu layout!</p>

</corpo>
</html>

Figura 6.2

O próximo exemplo demonstra alguns dos comportamentos padrões de elementos de

parágrafo. Como você pode ver na Figura 6.3, apesar do fato de terem sido digitados de
forma bem diferente, os dois primeiros parágrafos acabaram parecendo similares ao terceiro
parágrafo, que não tinha espaços estranhos ou quebras de linha.

Experimente você mesmo >>

<html>
<corpo>

<p>
Este parágrafo contém
muitas linhas

no código fonte, mas o

navegador (continua)

25
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua)
ignora isso.
</p>

<p>
Este parágrafo
contém muitos espaços
na fonte código,
mas o navegador

ignora isso.
</p>

<p>

O número de linhas em um parágrafo depende do tamanho do

janela do seu navegador. Se você redimensionar a janela do navegador, o
número de linhas neste parágrafo mudará.
</p>

</corpo>
</html>

Figura 6.3

Referência de Tag Completa

A referência de tags w3schools contém informações adicionais sobre essas tags e
seus atributos. Uma lista completa de atributos legais para cada elemento HTML está listada em
a referência HTML completa do w3schools online em:

http://www.w3schools.com/tags/default.asp

26
Machine Translated by Google

Capítulo 7

Texto HTML
Formatação

Neste capítulo
ÿ Marcadores de formatação HTML

ÿ Formatação de texto

ÿ Texto pré-formatado

ÿ Etiquetas “Saída do Computador”

ÿ Endereço

ÿ Abreviações e Siglas

ÿ Direção do texto

ÿ Citações

ÿ Texto Excluído e Inserido

Marcadores de formatação HTML

HTML usa tags como <b> e <i> para modificar a aparência do texto, como negrito ou itálico. Essas
tags HTML são chamadas de tags de formatação. Consulte o final deste capítulo para uma
referência completa.

27
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Formatação de texto
O exemplo a seguir demonstra como você pode formatar texto em um documento HTML.
Os resultados aparecem na Figura 7.1.

Experimente você mesmo >>

<html>
<corpo>

<p><b>Este texto está em negrito</b></

p> <p><strong>Este texto está em negrito</strong></p>
<p><big>Este texto está grande</big></p>
<p><em>Este texto está enfatizado</em></p>
<p><i>Este texto está em itálico</i></p>
<p><small>Este texto está pequeno</small></p>
<p>Este é_subscrito e ^sobrescrito</
p>

</corpo>
</html>

Figura 7.1

28
Machine Translated by Google

Capítulo 7: Formatação de texto HTML

Texto pré-formatado
Este exemplo demonstra como você pode controlar quebras de linha, espaços e larguras
de caracteres com a tag <pre> .

Os resultados aparecem na Figura 7.2. Você verá mais exemplos de saída do

computador na próxima seção.

Experimente você mesmo >>

<html>

<corpo>

<pre>
Isso é

texto pré-formatado. ambos

Ele preserva as os espaços
quebras de linha e mostra o texto em uma fonte monoespaçada. </pre>

<p>A tag pre é boa para exibir código de computador:</p>

<pre>
para i = 1 a 10

imprimir i
próximo i

</pre>

</corpo>
</html>

Figura 7.2

29
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Etiquetas de “Saída do Computador”

Este exemplo demonstra como diferentes tags de “saída de computador” serão exibidas.
Os resultados aparecem na Figura 7.3.

Experimente você mesmo >>

<html>
<corpo>

<code>Código de computador</
code>
<br /> <kbd>Entrada de teclado</
kbd>
<br /> <tt>Texto de teletipo</
tt> <br /
> <samp>Texto de amostra</
samp>
<br /> <var>Variável de computador</
var> <br />

<p>
<b>Nota:</b> Essas tags são frequentemente usadas para exibir computadores/
código de programação na página. </p>

</corpo>
</html>

Figura 7.3

30
Machine Translated by Google

Capítulo 7: Formatação de texto HTML

Endereço
Este exemplo demonstra como escrever um endereço em um documento HTML. Os
resultados aparecem na Figura 7.4.

Experimente você mesmo >>

<html>

<corpo>

<endereço>
Pato Donald<br>
CAIXA 555<br>

Disneylândia
EUA

</endereço>

</corpo> </
html>

Figura 7.4

31
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Abreviações e Siglas
Este exemplo demonstra como lidar com uma abreviação ou um acrônimo. Os resultados
aparecem na Figura 7.5.

Experimente você mesmo >>

<html>
<corpo>

<abbr title="Nações Unidas">ONU</abbr> <br />

<acronym title="World Wide Web">WWW</acronym>

<p>O atributo title é usado para mostrar o texto por extenso

versão ao manter o ponteiro do mouse sobre a sigla ou abreviação.</p>

</corpo>
</html>

Figura 7.5

32
Machine Translated by Google

Capítulo 7: Formatação de texto HTML

Direção do texto
Este exemplo demonstra como alterar a direção do texto. Os resultados aparecem na
Figura 7.6.

Experimente você mesmo >>

<html>
<corpo>

<p>
Se o seu navegador suportar substituição bidirecional (bdo), a próxima linha será
escrita da direita para a esquerda (rtl): </p>

<bdo dir="rtl">
Aqui está um texto invertido

</bdo>

</corpo>
</html>

Figura 7.6

33
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Citações
Este exemplo demonstra como lidar com citações longas e curtas. Os resultados aparecem
na Figura 7.7.

Experimente você mesmo >>

<html>
<corpo>

Uma citação em bloco:

<blockquote>
Esta é uma citação longa. Esta é uma citação longa. Esta é
uma longa citação. Esta é uma longa citação. Esta é uma longa citação. </
blockquote>

<p><b>O navegador insere quebras de linha e margens para um

elemento blockquote.</b></p>

Uma breve citação:

<q>Esta é uma breve citação</q>

<p><b>O elemento q não é renderizado como algo especial.</p>

</p>

</corpo>
</html>

Figura 7.7

34
Machine Translated by Google

Capítulo 7: Formatação de texto HTML

Texto Excluído e Inserido

Este exemplo demonstra como marcar um texto que é excluído (tachado) ou inserido
(sublinhado) em um documento. Os resultados aparecem na Figura 7.8.

Experimente você mesmo >>

<html>
<corpo>

<p>
uma dúzia é
<del>vinte</del>
<ins>doze</ins> peças
</p>

<p>
A maioria dos navegadores <del>riscará</del> o texto excluído e <ins>sublinhará</ins> o texto
inserido. </p>

<p>
Alguns navegadores mais antigos exibirão o texto excluído ou inserido como
texto simples.
</p>

</corpo>
</html>

Figura 7.8

35
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Marcadores de formatação de texto

Exemplos dos resultados dessas tags aparecem na Figura 7.9.

OBSERVAÇÃO
Muitas dessas tags estão obsoletas ou logo estarão. A formatação com tags é muito
ruim e deve ser feita com CSS e/ou tags mais descritivas orientadas a conteúdo. Além disso, as tags
<em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var> e <cite> são todas tags de frase. Elas não
estão obsoletas, mas é possível obter um efeito mais rico com CSS.

MARCAÇÃO DESCRIÇÃO

<b> Define texto em negrito

<grande> Define texto grande

<em> Define texto enfatizado
<i> Define texto em itálico

<pequeno> Define texto pequeno

<forte> Define texto forte

<sub> Define texto subscrito

<sup> Define texto sobrescrito

<em> Define o texto inserido

<dele> Define texto excluído

<s> Obsoleto. Use <del> em vez disso

<greve> Obsoleto. Use <del> em vez disso
<você>
Obsoleto. Use estilos em vez disso

Figura 7.9

36
Machine Translated by Google

Capítulo 7: Formatação de texto HTML

Marcadores de saída do computador

Exemplos dos resultados dessas tags aparecem na Figura 7.10.

MARCAÇÃO DESCRIÇÃO

<código> Define texto de código de computador

<kbd> Define o texto do teclado

<amostra> Define código de computador de exemplo

<tt> Define texto de teletipo

<var> Define uma variável

<pre> Define texto pré-formatado

<listagem> Obsoleto. Use <pre> em vez disso

<texto simples> Obsoleto. Use <pre> em vez disso

<xmp> Obsoleto. Use <pre> em vez disso

Figura 7.10

37
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Citações, citações e definições

Etiquetas
Exemplos dos resultados dessas tags aparecem na Figura 7.11.

MARCAÇÃO DESCRIÇÃO

<abrev> Define uma abreviação

<acrônimo> Define uma sigla

<endereço> Define um elemento de endereço

<bdo> Define a direção do texto

<bloco de citação> Define uma citação longa

<q> Define uma citação curta

<citar> Define uma citação

<dfn> Define um termo de definição

Figura 7.11

38
Machine Translated by Google

Capítulo 8

Estilos HTML

Neste capítulo
ÿ Atributo de estilo HTML

ÿ Tags e atributos obsoletos

ÿ Estilos HTML comuns

O atributo de estilo HTML

O atributo style é um novo atributo HTML. Ele introduz o uso de CSS em HTML. O propósito
do atributo style é fornecer uma maneira comum de estilizar todos os elementos HTML.

Os estilos foram introduzidos com o HTML 4 como a nova e preferida maneira de estilizar
elementos HTML. Com os estilos HTML, a formatação e os atributos podem ser adicionados
aos elementos HTML diretamente usando o atributo style , ou indiretamente em Cascading
Style Sheets (arquivos CSS) separados.

Neste livro, usamos o atributo style para apresentá-lo aos estilos HTML e CSS. Você
pode aprender mais sobre estilos e CSS em nosso tutorial, Aprender

CSS com w3schools .

O código no exemplo a seguir e os resultados na Figura 8.1 apresentam uma nova maneira de
adicionar formatação a um documento.

Experimente você mesmo >>

<html>
<estilo do corpo="cor de fundo:Cinza;">

<h1>Olha! Estilos e cores</h1>

<p style="font-family:verdana;color:red">
Este texto está em Verdana e vermelho</p>

<p style="font-family:times;cor:verde">

39
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Este texto está em Times e verde</p>

<p style="font-size:30px">Este texto tem 30 pixels de altura</p>

</corpo>
</html>

Figura 8.1

Como este livro não é impresso em cores, pode ser difícil ver o
resultados que lidam com as figuras. Para ver como os resultados aparecem na tela,
insira este código no editor de texto Try It Yourself em w3schools.com.

Tags e atributos obsoletos

No HTML 4, algumas tags e atributos são definidos como obsoletos. Obsoleto significa
que não serão suportados em versões futuras de HTML e A mensagem é
claro: Evite o uso de tags e atributos obsoletos.

Essas tags e atributos devem ser evitados e, em vez disso, devem ser usados estilos:

MARCADORES DESCRIÇÃO

<centro> Define conteúdo centralizado

<font> e <basefont> Define fontes HTML

<s> e <strike> Define texto riscado

<você> Define texto sublinhado

ATRIBUTOS DESCRIÇÃO

Define o alinhamento do texto

alinhar Define a cor de fundo

cor bgcolor Define a cor do texto

40
Machine Translated by Google

Capítulo 8: Estilos HTML

Estilos HTML comuns

Cor de fundo
<estilo do corpo="cor de fundo:cinza">

O atributo style define um estilo para o elemento <body> . Os resultados do código de estilo
aparecem na Figura 8.2.

Experimente você mesmo >>

<html>
<body style="background-color:gray"> <h2>Olha:
Fundo colorido!</h2>

</corpo>
</html>

Figura 8.2

O novo atributo style torna obsoleto o "antigo" atributo bgcolor , mostrado na Figura 8.3.

Experimente você mesmo >>

<html>
<corpo bgcolor="cinza">

<h2>Olha: Fundo colorido!</h2>

<p>Para HTML à prova do futuro, use estilos HTML:</p>

<p>style="background-color:gray"</p>

</corpo>
</html>

41
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Figura 8.3

Família, cor e tamanho da fonte O atributo style

define um estilo para o elemento <p> , conforme mostrado na Figura 8.4:

Experimente você mesmo >>

<html>
<corpo>

<h1 style="font-family:verdana">Um título</h1> <p style="font-

family:courier new; color:red; font-
tamanho:20px;">Um parágrafo</p>

</corpo>
</html>

Figura 8.4

O novo atributo de estilo torna a antiga tag <font> , mostrada na Figura 8.5, obsoleta.

Experimente você mesmo >>

<html>
<corpo>

<p><font size="2" face="Verdana"> Este é

um parágrafo. </font></p>

42
Machine Translated by Google

Capítulo 8: Estilos HTML

<p><font size="5" face="Times" color="red"> Este é outro

parágrafo. </font></p>

</corpo>
</html>

Figura 8.5

Alinhamento de texto
<h1 style="text-align:center"> O atributo
style define um estilo para o elemento <h1> . Os resultados aparecem na Figura
8.6.

Experimente você mesmo >>

<html>
<corpo>

<h1 style="text-align:center">Este é o título 1</h1>

<p>O título acima está alinhado ao centro desta página.

O título acima está alinhado ao centro desta página.
O título acima está alinhado ao centro desta página. </p>

</corpo>
</html>

Figura 8.6

43
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Embora sejam exibidos de forma semelhante no navegador, o novo atributo style torna
obsoleto o antigo atributo align na Figura 8.7.

Experimente você mesmo >>

<html>
<corpo>

<h1 align="center">Este é o título 1</h1>

<p>O título acima está alinhado ao centro desta página.

O título acima está alinhado ao centro desta página.
O título acima está alinhado ao centro desta página.</ p>

</corpo>
</html>

Figura 8.7

Referência de Tag Completa

A referência de tag w3schools contém informações adicionais sobre essas tags e seus
atributos. Uma lista completa de atributos legais para cada elemento HTML está listada
na Referência HTML Completa w3schools online em:

http://www.w3schools.com/tags/default.asp

44
Machine Translated by Google

Capítulo 9

Links HTML

Neste capítulo
ÿ Links HTML

ÿ Abra um link em uma nova janela do navegador

ÿ Hiperlinks, âncoras e links

ÿ Sintaxe do link HTML

ÿ Links na mesma página

ÿ Criando um link mailto:

ÿ Criando um Link de Imagem

Links HTML
Um link é o “endereço” para um documento (ou um recurso) localizado na World Wide Web ou
em outro lugar dentro do seu próprio servidor Web. Ambos os tipos de links são mostrados no
exemplo de código a seguir.
<html>
<corpo>

<p>
<a href="lastpage.htm"> Este
texto</a> é um link para uma página neste site. </p>

<p>
<a href="http://www.microsoft.com/"> Este texto</
a> é um link para uma página na World Wide Web. </p>

</corpo>
</html>

45
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Você pode ver na Figura 9.1 que links internos e externos são exibidos de forma semelhante no
navegador.

Figura 9.1

Abrir um link em uma nova janela do navegador

O atributo target permite que você controle como o navegador responde quando você clica no
link. O exemplo a seguir demonstra como criar um link para outra página abrindo uma nova
janela para que o visitante não precise sair do seu site.

Os resultados dos códigos são mostrados na Figura 9.2.

Experimente você mesmo >>

<html>

<corpo>

<a href="lastpage.htm" target="_blank">Última página</a>

<p>
Se você definir o atributo target de um link como "_blank", o link será aberto em
uma nova janela. </p>

</corpo>
</html>

Figura 9.2

46
Machine Translated by Google

Capítulo 9: Links HTML

Hiperlinks, âncoras e links

Em termos da Web, um hiperlink é uma referência (um endereço) para um recurso na Web.
Os hiperlinks podem apontar para qualquer recurso na Web: uma página HTML, uma imagem, um
arquivo de som, um filme e assim por diante.

Uma âncora HTML é um termo usado para definir um destino de hiperlink dentro de um documento.
mento.

O elemento âncora <a> define hiperlinks e âncoras.

OBSERVAÇÃO
Usaremos o termo link HTML quando o elemento <a> apontar para um recurso, e o
termo âncora HTML quando o elemento <a> definir um endereço dentro de um documento.

Sintaxe do link HTML

A tag inicial contém atributos sobre o link.

<a href="url">Texto do link</a>

O conteúdo do elemento (texto do link) define a parte a ser exibida. O conteúdo do elemento não
precisa ser texto. Você pode criar um link a partir de uma imagem ou qualquer outro elemento HTML.
mento.

Atributo href
O atributo href define o link “endereço”. O código a seguir será exibido em um
navegador conforme mostrado na Figura 9.3:

Este elemento <a> define um link para w3schools:

<a href="http://www.w3schools.com/">Visite w3schools!</a>

Figura 9.3

47
Machine Translated by Google

Aprenda HTML e CSS com w3schools

O atributo alvo
O atributo target define onde o documento vinculado será aberto.

O exemplo de código a seguir abre o documento em uma nova janela do navegador:

Experimente você mesmo >>

<html>
<corpo>

<a href=http://www.w3schools.com/ target="_blank">Visite w3schools!</a>

<p>
Se você definir o atributo de destino de um link como "_blank",
o link será aberto em uma nova janela.
</p>

</corpo>
</html>

Você pode usar as seguintes opções para o atributo de destino :

OPÇÃO DESCRIÇÃO

_em branco Abre o documento vinculado em uma nova janela

_auto Abre o documento vinculado no mesmo quadro em que estava
clicado (este é o padrão)

_pai Abre o documento vinculado no conjunto de quadros pai

_principal Abre o documento vinculado no corpo completo do

janela

nome do quadro Abre o documento vinculado em um quadro nomeado

48
Machine Translated by Google

Capítulo 9: Links HTML

O nome Atributo
Quando o atributo name é usado, o elemento <a> define uma âncora nomeada dentro
um documento HTML. As âncoras nomeadas não são exibidas de nenhuma maneira especial pelo
navegador porque são invisíveis para o leitor.

Âncoras nomeadas são algumas vezes usadas para criar um índice no início de
um documento grande. Cada capítulo dentro do documento recebe uma âncora nomeada e
links para cada uma dessas âncoras são colocados no topo do documento.

Se um navegador não conseguir encontrar uma âncora nomeada que foi especificada, ele vai para o topo
do documento. Nenhum erro ocorre.

Sintaxe de âncora nomeada:

<a name="label">Qualquer conteúdo</a>

A sintaxe do link para uma âncora nomeada:

<a href="#label">Qualquer conteúdo</a>

O # no atributo href define um link para uma âncora nomeada. Uma âncora nomeada
dentro de um documento HTML:

<a name="tips">Seção de dicas úteis</a>

Um link para a “Seção de Dicas Úteis” de outro lugar no mesmo documento:

<a href="#tips">Ir para a seção de dicas úteis</a>

Um link para a “Seção de Dicas Úteis” de outro documento:

<a href="http://www.w3schools.com/html_tutorial.
htm#tips">Ir para a seção de dicas úteis</a>

DICA Sempre adicione uma barra final às referências de subpastas. Se você

vincular assim: href="http://www.w3schools.com/html", você gerará duas solicitações
HTTP para o servidor porque o servidor adicionará uma barra ao endereço e criará
uma nova solicitação assim: href="http://www.w3schools.com/html/".

49
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Links na mesma página

O exemplo de código a seguir demonstra como usar um link para pular para outra parte de
um documento. Os resultados do código são mostrados na Figura 9.4.

Experimente você mesmo >>

<html>
<corpo>

<p>
<a href="#C4">Veja também Capítulo 4.</a> </p>

<h2>Capítulo 1</h2>
<p>Este capítulo explica ba bla bla</p>

<h2>Capítulo 2</h2>
<p>Este capítulo explica ba bla bla</p>

<h2>Capítulo 3</h2>
<p>Este capítulo explica ba bla bla</p>

<h2><a name="C4">Capítulo 4</a></h2> <p>Este

capítulo explica ba bla bla</p>

<h2>Capítulo 5</h2>
<p>Este capítulo explica ba bla bla</p>

<h2>Capítulo 6</h2>
<p>Este capítulo explica ba bla bla</p>

<h2>Capítulo 7</h2>
<p>Este capítulo explica ba bla bla</p>

<h2>Capítulo 8</h2>
<p>Este capítulo explica ba bla bla</p>

<h2>Capítulo 9</h2>
<p>Este capítulo explica ba bla bla</p>

<h2>Capítulo 10</h2>
<p>Este capítulo explica ba bla bla</p>

<h2>Capítulo 11</h2>
<p>Este capítulo explica ba bla bla</p>

50
Machine Translated by Google

Capítulo 9: Links HTML

<h2>Capítulo 12</h2>
<p>Este capítulo explica ba bla bla</p>

<h2>Capítulo 13</h2>
<p>Este capítulo explica ba bla bla</p>

<h2>Capítulo 14</h2>
<p>Este capítulo explica ba bla bla</p>

<h2>Capítulo 15</h2>
<p>Este capítulo explica ba bla bla</p>

<h2>Capítulo 16</h2>
<p>Este capítulo explica ba bla bla</p>

<h2>Capítulo 17</h2>
<p>Este capítulo explica ba bla bla</p>

</corpo>
</html>

Figura 9.4

51
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Criando um link mailto:

O exemplo a seguir demonstra como vincular a um endereço de e-mail e gerar uma nova
mensagem de e-mail em seu aplicativo de e-mail padrão (isso funciona somente se você
tiver o mail instalado). Os resultados do código são mostrados na Figura 9.5.

Experimente você mesmo >>

<html>
<corpo>

<p>
Este é um link de e-mail:
<a href="mailto:[email protected]?subject=Olá%20
novamente">

Enviar e-mail</a>
</p>

<p>
<b>Observação:</b> os espaços entre as palavras devem ser substituídos por
%20 para <b>garantir</b> que o navegador exibirá seu texto corretamente.
</p>

</corpo>
</html>

Figura 9.5

52
Machine Translated by Google

Capítulo 9: Links HTML

O exemplo a seguir demonstra um link mailto: mais complicado . Este link não só gera um
novo e-mail, como também adiciona um cc, bcc, uma linha de assunto e o corpo da
mensagem. Os resultados do código são mostrados na Figura 9.6.

Experimente você mesmo >>

<html>
<corpo>

<p>
Este é outro link mailto:
<a href="mailto:[email protected]?cc=someoneelse@
microsoft.com&bcc=andsomeoneelse2@microsoft.

com&subject=Festa%20de%20Verão&body=Você%20está%20convidado%20para%20uma%20grande

<p>
<b>Observação:</b> os espaços entre as palavras devem ser substituídos por
%20 para <b>garantir</b> que o navegador exibirá seu texto corretamente.
</p>

</corpo>
</html>

Figura 9.6

53
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Criando um link de imagem

O exemplo a seguir demonstra como usar uma imagem como um link. Clique na imagem
para ir para a página vinculada. Os resultados do código são mostrados na Figura 9.7.

Experimente você mesmo >>

<html>

<corpo>

<p>Criar um link anexado a uma imagem: <a

href="default.htm">

<img src="smiley.gif" alt="Tutorial HTML" width="32" height="32" /> </a></p>

<p>Sem borda ao redor da imagem, mas ainda um link: <a href="default.htm">

<img border="0" src="smiley.gif" alt="Tutorial HTML"

largura="32" altura="32" /> </a></p>

</corpo>
</html>

Figura 9.7

Você aprenderá tudo sobre imagens HTML no Capítulo 10, "Imagens HTML".

54
Machine Translated by Google

Capítulo 10

Imagens HTML

Neste capítulo
ÿ Tag img e o atributo src

ÿ Insira imagens de diferentes locais

ÿ Imagens de fundo

ÿ Alinhando Imagens

ÿ Imagens Flutuantes

ÿ Ajustando tamanhos de imagem

ÿ Atributo alt

ÿ Criando um Mapa de Imagem

Tag img e o atributo src

Em HTML, as imagens são definidas com a tag <img> .

A tag img está vazia, o que significa que ela contém apenas atributos e não tem tag de
fechamento.

Para exibir uma imagem em uma página, você precisa usar o atributo src . src significa “source”.
O valor do atributo src é a URL da imagem que você quer exibir em sua página.

A sintaxe para definir uma imagem:

<img fonte=" URL " />

A URL aponta para o local ou endereço onde a imagem está armazenada. Um arquivo de
imagem chamado "boat.gif" localizado no diretório "images" em "www.w3schools.com" tem a
URL:

http://www.w3schools.com/images/boat.gif

NO TE Não é necessário ter acesso administrativo ao arquivo de imagem real ao qual você
está vinculando. Você pode vincular a qualquer imagem, desde que saiba sua URL.

55
Machine Translated by Google

Aprenda HTML e CSS com w3schools

O navegador coloca a imagem onde a tag image ocorre no documento. Se você colocar uma
tag image entre dois parágrafos, o navegador mostra o primeiro parágrafo, depois a imagem
e depois o segundo parágrafo.

O exemplo a seguir demonstra como inserir imagens na sua página da Web. Os resultados
desse código são mostrados na Figura 10.1.

Experimente você mesmo >>

<html>
<corpo>

<p>
Uma
imagem: <img src="constr4.gif" width="144" height="50" /> </p>

</corpo>
</html>

Figura 10.1

NO TE “Não
tente isso em casa!” As imagens para este exemplo residem no servidor w3schools
em vez do seu, então, a menos que você esteja usando o editor Try It Yourself em
www.w3shools.com, você não obterá os mesmos resultados. Se você tentar esse código
exato no seu navegador, a imagem estará faltando.

A próxima seção mostra como apontar para imagens em outros servidores.

56
Machine Translated by Google

Capítulo 10: Imagens HTML

Insira imagens de diferentes locais

O exemplo mostrado na Figura 10.2 demonstra como inserir uma imagem de
outra pasta no seu servidor ou de outro local na Web.

Experimente você mesmo >>

<html>
<corpo>

<p>Uma imagem de outra pasta:</p> <img src="/

images/chrome.gif" width="33" height="32" />

<p>Uma imagem de w3schools:</p> <img

src="http://www.w3schools.com/images/w3schools_green.
jpg" largura="104" altura="142" />

</corpo>
</html>

Figura 10.2

DICA Os arquivos de imagem podem demorar para carregar no navegador, então use-os com moderação.

57
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Imagens de fundo
O próximo exemplo demonstra como adicionar uma imagem de fundo a uma página HTML.
Os resultados aparecem na Figura 10.3.

Experimente você mesmo >>

<html>
<corpo fundo="fundo.jpg">

<h3>Olha: Uma imagem de fundo!</h3>

<p>Arquivos gif e jpg podem ser usados como planos de fundo HTML.</p>
p>

<p>Se a imagem for menor que a página, a imagem será repetida.</p>

</corpo>
</html>

Figura 10.3

58
Machine Translated by Google

Capítulo 10: Imagens HTML

Alinhando Imagens
As Figuras 10.4 e 10.5 demonstram diferentes maneiras de alinhar imagens dentro do
texto.

Experimente você mesmo >>

<html>
<corpo>

<p>O texto está alinhado com a imagem <img

src="hackanm.gif" align="bottom" width="48" height="48"
/>
na parte inferior.</p>

<p>O texto está alinhado com a imagem <img

src="hackanm.gif" align="middle" width="48" height="48"
/>
no meio.</p>

<p>O texto é alinhado com a imagem <img

src="hackanm.gif" align="top" width="48" height="48" /> na parte superior.</p>

<p><b>Observação:</b> O alinhamento inferior é o padrão!</p>

</html>
</corpo>

Figura 10.4

59
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Experimente você mesmo >>

<html>
<corpo>

<p>Esta imagem aparece

<img src="hackanm.gif" width="48" height="48" /> exatamente
onde está colocada no código.</p>

<p><img src="hackanm.gif" width="48" height="48" /> Esta imagem

aparece exatamente onde está colocada no código.</p>
p>

<p>Esta imagem aparece exatamente onde está colocada no

código.

<img src="hackanm.gif" largura="48" altura="48" /></p>

</corpo>
</html>

Figura 10.5

60
Machine Translated by Google

Capítulo 10: Imagens HTML

Imagens Flutuantes
No próximo exemplo, você aprenderá como deixar uma imagem flutuar para a esquerda ou direita de um
parágrafo. Os resultados aparecem na figura 10.6.

Experimente você mesmo >>

<html>
<corpo>

<p>
<img src="hackanm.gif" alinhar="esquerda" largura="48" altura="48"
/>
Um parágrafo com uma imagem. O atributo align da imagem é definido como "left".
A imagem flutuará para a esquerda desta
texto.
</p>

<p>
<img src="hackanm.gif" alinhar="direita" largura="48" altura="48"
/>
Um parágrafo com uma imagem. O atributo align da imagem
idade está definida como "direita". A imagem flutuará à direita deste texto.

</p>

</corpo>
</html>

Figura 10.6

61
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Ajustando tamanhos de imagem

O exemplo a seguir, mostrado na Figura 10.7, demonstra como exibir imagens em tamanhos diferentes
na página.

Os atributos width e height permitem que a página seja renderizada corretamente e de forma mais
eficiente antes que a imagem seja baixada. Sem eles, a página será renderizada uma vez e, em seguida,
renderizada novamente quando cada imagem for carregada.

A imagem será dimensionada para se ajustar à altura e largura declaradas. Às vezes, isso pode ter um
efeito desejado, outras vezes é desastroso.

Experimente você mesmo >>

<html>

<corpo>

<p>
<img src="hackanm.gif" largura="20" altura="20" /> </p>

<p>
<img src="hackanm.gif" largura="45" altura="45" /> </p>

<p>
<img src="hackanm.gif" largura="70" altura="70" /> </p>

<p>Você pode tornar uma imagem menor ou maior alterando os valores dos atributos de altura e
largura.</p>

</corpo> </
html>

Figura 10.7

62
Machine Translated by Google

Capítulo 10: Imagens HTML

Atributo alt
O atributo alt é usado para definir um texto alternativo para uma imagem. O atributo alt informa ao
leitor o que ele ou ela está perdendo em uma página se o navegador não puder carregar imagens.
O navegador exibirá o texto alternativo em vez da imagem.

O valor do atributo alt é um texto definido pelo autor:

<img src="barco.gif" alt="Barco Grande" />

É uma boa prática incluir texto alternativo para cada imagem em uma página para melhorar a
exibição e a utilidade do seu documento para pessoas que têm navegadores somente de texto.

O exemplo a seguir mostra o que acontece quando o arquivo de imagem não está disponível.
Os resultados estão na Figura 10.8.

Experimente você mesmo >>

<html>
<corpo>

<p>
Uma
imagem: <img src="../constr4.gif" alt="Site_Under_Construction" width="200"
height="50" /> </p>

</corpo>
</html>

Figura 10.8

Criando um mapa de imagem

O exemplo a seguir demonstra como criar um mapa de imagem com regiões clicáveis. Cada uma
das regiões é um hyperlink. Os resultados deste exemplo são mostrados na Figura 10.9.

A criação de um link de imagem simples foi abordada no Capítulo 9, “Links HTML”.

63
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Experimente você mesmo >>

<html>
<corpo>

<p>Clique no sol ou em um dos planetas para vê-lo mais de perto:</p>

<img src="planetas.gif" largura="145" altura="126" alt="Planetas"

usemap="#planetmap" />

<nome do mapa="mapaplanetário">
<formato da área="retângulo" coordenadas="0,0,82,126" alt="Sol" href="sol. htm" />
<formato
da área="círculo" coordenadas="90,58,3" alt="Mercúrio" href="mercur.htm" /
> <formato da área="círculo"
coordenadas="124,58,8" alt="Vênus" href="venus.htm" />

</mapa>

</corpo>
</html>

Figura 10.9

Referência de Tag Completa

A referência de tags do w3schools contém informações adicionais sobre essas tags e seus
atributos. Uma lista completa de atributos legais para cada elemento HTML está listada na
Referência HTML Completa do w3schools online em:

http://www.w3schools.com/tags/default.asp

64
Machine Translated by Google

Capítulo 11

Tabelas HTML

Neste capítulo
ÿ Criação de tabelas HTML

ÿ Bordas da tabela

ÿ Tabela sem borda

ÿ Títulos em uma tabela

ÿ Tabela com legenda

ÿ Células que abrangem várias colunas

ÿ Tags dentro de uma tabela

ÿ Preenchimento de célula

ÿ Espaçamento de células

ÿ Cores e imagens de fundo da tabela

ÿ Cores e imagens de fundo de células

ÿ Atributo de quadro

ÿ Usando frame e border para controlar bordas de tabela

Criando tabelas HTML

Tabelas são uma excelente maneira de organizar e exibir informações em uma página. Tabelas são
definidas usando a tag <table> .

Uma tabela é dividida em linhas com a tag <tr> , e cada linha é dividida em células de dados usando a tag
<td> . As letras td significam “dados da tabela”, que é o conteúdo de uma célula de dados. Uma célula de
dados pode conter texto, imagens, listas, parágrafos, formulários, regras horizontais, tabelas e assim por
diante. Uma tabela HTML simples aparece na Figura 11.1.

65
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Figura 11.1

Uma tabela básica inclui as seguintes tags:

8 Cada tabela começa com uma tag de tabela .

8 Cada linha da tabela começa com uma tag tr .

8 Cada dado da tabela (célula) começa com uma tag td .

A seguir está um exemplo de código para uma tabela com uma linha e uma coluna.

Experimente você mesmo >>

<html>
<corpo>

<h4>Uma coluna:</h4>
<tabela border="1">
<tr>
<td>100</td> </
tr> </
tabela>

</html>
</corpo>

66
Machine Translated by Google

Capítulo 11: Tabelas HTML

O código a seguir cria uma tabela com uma linha e três colunas.

Experimente você mesmo >>

<html>
<corpo>

<tabela border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td> </
tr> </
table> </
html> </
body>

O código a seguir cria uma tabela com duas linhas e três colunas.

Experimente você mesmo >>

<html>
<corpo>

<tabela border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td> </
tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td> </
tr> </
tabela>

</corpo>
</html>

67
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Os resultados dessas três tabelas de exemplo aparecem na Figura 11.2.

Figura 11.2

Bordas de mesa
O atributo border controla a aparência das bordas ou linhas da tabela. O
a borda padrão é 0, então se você não especificar um atributo de borda , a tabela será exibida
sem nenhuma borda. Às vezes isso é útil, mas na maioria das vezes, você
deseja que as bordas sejam visíveis. O exemplo a seguir demonstra o uso de bordas de tabela
diferentes. Os resultados deste exemplo são mostrados na Figura 11.3.

Experimente você mesmo >>

<html>
<corpo>

<h4>Com uma borda normal:</h4> <table

border="1">
<tr>
<td>Primeiro</td>
<td>Linha</td>
</tr>
<tr>
<td>Segundo</td>
<td>Linha</td>
</tr>
</tabela>

<h4>Com uma borda grossa:</h4> <table

border="8">

68
Machine Translated by Google

Capítulo 11: Tabelas HTML

<tr>
<td>Primeira</td>
<td>Linha</td> </
tr>
<tr>
<td>Segunda</td>
<td>Linha</td> </
tr> </
table>

<h4>Com uma borda muito grossa:</h4> <table

border="15">
<tr>
<td>Primeira</td>
<td>Linha</td> </
tr>
<tr>
<td>Segunda</td>
<td>Linha</td> </
tr> </
table>

</corpo> </
html>

Figura 11.3

69
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Mesa sem Borda

Se você não fornecer um atributo border , o padrão será none. O exemplo a seguir mostra
duas maneiras de criar uma tabela sem bordas. A Figura 11.4 exibe a tabela como ela
aparece no navegador. A Figura 11.4 exibe a tabela como ela aparece no navegador.

Experimente você mesmo >>

<html>
<corpo>

<h4>Esta tabela não tem bordas:</h4> <table>

<tr>
<td>100</td>
<td>200</td>
<td>300</td> </
tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td> </
tr> </
tabela>

<h4>Esta tabela também não tem bordas:</h4> <table

border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td> </
tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td> </
tr> </
tabela>

</corpo>
</html>

70
Machine Translated by Google

Capítulo 11: Tabelas HTML

Figura 11.4

Cabeçalhos em uma tabela

Os títulos de tabela são definidos com a tag <th>. A Figura 11.5 mostra a tabela como
ela aparece no navegador.

Experimente você mesmo >>

<html>
<corpo>

<tabela border="1">
<tr>
<th>Título</th>
<th>Outro título</th> </tr>

<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td> </tr>

<tr>
<td>linha 2, célula 1</td>
<td>linha 2, célula 2</td>
</tr>
</tabela>
<h4>Cabeçalhos verticais:</h4>
<tabela border="1">
<tr>
<th>Primeiro nome:</th>
(continua)

71
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua)

<td>Bill Gates</td> </tr>

<tr>
<th>Telefone:</th>
<td>555 777 1854</td> </tr>

<tr>
<th>Telefone:</th>
<td>555 777 1855</td> </tr>
</table>

</corpo>
</html>

Figura 11.5

Células vazias em uma tabela

Células de tabela sem conteúdo não são exibidas muito bem na maioria dos navegadores.
Observe que as bordas ao redor da célula de tabela vazia estão faltando (exceto ao usar o
Mozilla Firefox). A Figura 11.6 mostra a tabela como ela aparece no navegador.

Experimente você mesmo >>

<html>
<corpo>

72
Machine Translated by Google

Capítulo 11: Tabelas HTML

<tabela border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td> </tr>

<tr>
<td>linha 2, célula 1</td>
<td></td> </
tr> </
table>

</corpo>
</html>

Figura 11.6

Para evitar isso, adicione um espaço não divisível (&nbsp;) às células de dados vazias para garantir que as
bordas fiquem visíveis, conforme mostrado na Figura 11.7.

Experimente você mesmo >>

<tabela border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td> </tr>

<tr>
<td>linha 2, célula 1</td>
<td>&nbsp;</td> </
tr> </
table>

73
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Figura 11.7

DICA
Os elementos <thead>,<tbody> e <tfoot> raramente são usados, devido a
Suporte ruim ao navegador. Espere que isso mude em versões futuras do HTML.

Tabela com legenda

O exemplo a seguir demonstra como criar uma tabela com uma legenda, conforme mostrado
na Figura 11.8.

Experimente você mesmo >>

<html>
<corpo>

<h4>Esta tabela tem uma legenda e uma borda grossa:</h4> <table border="6">

<caption>Minha legenda</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td> </
tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td> </
tr> </
tabela>

</corpo>
</html>

74
Machine Translated by Google

Capítulo 11: Tabelas HTML

Figura 11.8

Células que abrangem várias colunas

Neste exemplo, você aprenderá como definir células de tabela que abrangem mais de uma linha ou
uma coluna, conforme mostrado na Figura 11.9.

Experimente você mesmo >>

<html>

<corpo>

<h4>Célula que abrange duas colunas:</h4> <table

border="1">
<tr>

<th>Nome</th> <th
colspan="2">Telefone</th> </tr>

<tr>

<td>Bill Gates</td> <td>555

77 854</td> <td>555 77 855</
td> </tr> </table>

<h4>Célula que abrange duas linhas:</h4> <table

border="1">
<tr>

<th>Primeiro nome:</th> <td>Bill

Gates</td> </tr>

<tr>

<th rowspan="2">Telefone:</th> <td>555 77 854</

td>
(continua)

75
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua) </
tr>
<tr>
<td>555 77 855</td> </tr>
</
tabela>

</corpo>
</html>

Figura 11.9

Tags dentro de uma tabela

Este exemplo demonstra como exibir elementos dentro de outros elementos. Os resultados
aparecem na Figura 11.10.

Experimente você mesmo >>

<html>
<corpo>

<tabela border="1">
<tr>
<td>
<p>Este é um parágrafo</p>
<p>Este é outro parágrafo</p>
</td>
<td>Esta célula contém uma tabela:

76
Machine Translated by Google

Capítulo 11: Tabelas HTML

<tabela border="1">
<tr>
<td>Um</td>
<td>B</td> </
tr>
<tr>
<td>C</td>
<td>D</td> </
tr> </
tabela> </
td> </
tr>
<tr>
<td>Esta célula contém uma lista
<ul>
<li>maçãs</li>
<li>bananas</li>

<li>abacaxi</li> </ul> </td>

<td>OLÁ</td> </tr> </

table>

</corpo>
</html>

Figura 11.10

77
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Preenchimento de célula
Este exemplo demonstra como usar preenchimento de célula para criar mais espaço em
branco entre o conteúdo da célula e suas bordas. Os resultados aparecem na Figura 11.11.

Experimente você mesmo >>

<html>

<corpo>

<h4>Sem preenchimento de célula:</h4>

<table border="1">
<tr>

<td>Primeira</td>
<td>Linha</td> </
tr>
<tr>

<td>Segunda</td>
<td>Linha</td> </
tr> </
table>

<h4>Com preenchimento de célula:</h4>

<table border="1" cellpadding="10">
<tr>

<td>Primeira</td>
<td>Linha</td> </
tr>
<tr>

<td>Segunda</td>
<td>Linha</td> </
tr> </
table>

</corpo> </
html>

78
Machine Translated by Google

Capítulo 11: Tabelas HTML

Figura 11.11

Espaçamento de células

Este exemplo demonstra como usar o espaçamento de células para aumentar a distância entre as
células, conforme mostrado na Figura 11.12

Experimente você mesmo >>

<html>
<corpo>

<h4>Sem espaçamento de células:</h4>

<tabela border="1">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr> </
table>

<h4>Com espaçamento de células:</

h4> <table border="1" cellspacing="10">
<tr>
<td>Primeiro</td>
(continua)

79
Machine Translated by Google

Aprenda HTML e CSS com w3schools

<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr> </
table>

</corpo>
</html>

Figura 11.12

Cores e imagens de fundo da tabela

Este exemplo demonstra como adicionar um fundo a uma tabela, conforme mostrado na Figura
11.13.

Experimente você mesmo >>

<html>
<corpo>

<h4>Uma cor de fundo:</h4> <table

border="1" bgcolor="gray">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>

80
Machine Translated by Google

Capítulo 11: Tabelas HTML

<td>Segundo</td>
<td>Linha</td>
</tr> </
table>

<h4>Uma imagem de fundo:</h4>

<table border="1" background="bgdesert.jpg">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr> </
table>

</corpo>
</html>

Figura 11.13

81
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Cores e imagens de fundo de células

O exemplo a seguir demonstra como adicionar um plano de fundo a uma ou mais células de
tabela. O resultado é mostrado na Figura 11.14.

Experimente você mesmo >>

<html>
<corpo>

<h4>Fundos de células:</h4> <table

border="1">
<tr>
<td bgcolor="gray">Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td background="bgdesert.jpg"> Segunda</
td> <td>Linha</
td> </tr> </table>

</corpo>
</html>

Figura 11.14

Alinhando o conteúdo da célula

Este código de exemplo demonstra como usar o atributo align para alinhar o conteúdo das
células e criar uma tabela bem organizada. Os resultados do código são mostrados na Figura
11.15.

Experimente você mesmo >>

<html>

82
Machine Translated by Google

Capítulo 11: Tabelas HTML

<corpo>

<largura da tabela="400" borda="1">

<tr>

<th align="left">Dinheiro gasto em....</th> <th

align="right">Janeiro</th> <th
align="right">Fevereiro</th> </tr>

<tr>

<td align="left">Roupas</td> <td

align="right">US$ 241,10</td> <td
align="right">US$ 50,20</td> </tr>

<tr>

<td align="left">Maquiagem</td> <td

align="right">US$ 30,00</td> <td
align="right">US$ 44,45</td> </tr>

<tr>

<td align="left">Comida</td> <td

align="right">US$ 730,40</td> <td
align="right">US$ 650,00</td> </tr>

<tr>

<th align="left">Soma</th> <th

align="right">$1001,50</th> <th
align="right">$744,65</th> </tr> </table>

</corpo>
</html>

Figura 11.15

83
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Atributo de quadro
Este exemplo demonstra como usar o atributo frame para controlar as bordas ao redor da
tabela. Os resultados desses exemplos aparecem nas Figuras 11.16 a 11.18. Se você não
vir frames ao redor das tabelas no seu navegador, ou seu navegador é muito antigo ou não
suporta o atributo.

Experimente você mesmo >>

<html>
<corpo>

<h4>Com frame="border":</h4> <table

frame="border">
<tr>
<td>Primeira</td>
<td>Linha</td> </
tr>
<tr>
<td>Segunda</td>
<td>Linha</td> </
tr> </
table>

<h4>Com frame="box":</h4> <table

frame="box">
<tr>
<td>Primeira</td>
<td>Linha</td> </
tr>
<tr>
<td>Segunda</td>
<td>Linha</td> </
tr> </
table>

<h4>Com frame="void":</h4> <table

frame="void">
<tr>
<td>Primeira</td>
<td>Linha</td> </
tr>
<tr>
<td>Segunda</td>
<td>Linha</td> </
tr>

84
Machine Translated by Google

Capítulo 11: Tabelas HTML

</tabela>

<html>
<corpo>

Figura 11.16

Experimente você mesmo >>

<html>
<body>
<h4>Com frame="acima":</h4> <table
frame="acima">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr> </
table>

<h4>Com frame="abaixo":</h4> <table

frame="abaixo">
<tr>

(continua)

85
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua)

<td>Primeira</td>
<td>Linha</td> </
tr>
<tr>
<td>Segunda</td>
<td>Linha</td> </
tr> </
table>

<h4>Com frame="hsides":</h4>
<quadro da tabela="hsides">
<tr>
<td>Primeira</td>
<td>Linha</td> </
tr>
<tr>
<td>Segunda</td>
<td>Linha</td> </
tr> </
table> </
body> </
html>

Figura 11.17

86
Machine Translated by Google

Capítulo 11: Tabelas HTML

Experimente você mesmo >>

<html>

<body>
<h4>Com frame="vsides":</h4> <table
frame="vsides">
<tr>

<td>Primeira</td>
<td>Linha</td> </
tr>
<tr>

<td>Segunda</td>
<td>Linha</td> </
tr> </
table>

<h4>Com frame="lhs":</h4> <frame de

tabela="lhs">
<tr>

<td>Primeira</td>
<td>Linha</td> </
tr>
<tr>

<td>Segunda</td>
<td>Linha</td> </
tr> </
table>

<h4>Com frame="rhs":</h4> <tabela

frame="rhs">
<tr>

<td>Primeira</td>
<td>Linha</td> </
tr>
<tr>

<td>Segunda</td>
<td>Linha</td> </
tr> </
table>

(continua)

87
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua)

</corpo>
</html>

Figura 11.18

Usando moldura e borda para controlar

Bordas de mesa
Você pode usar os atributos frame e border para controlar as bordas ao redor da tabela. Se
você não vir frames ao redor das tabelas nesses exemplos, seu navegador não suporta o
atributo frame .

Experimente você mesmo >>

<html>

<corpo>

<quadro da tabela="hsides" borda="3">

<tr>
<td>Primeira linha</td> </
tr> </
table> <br /
> <table
frame="vsides" border="3">

88
Machine Translated by Google

Capítulo 11: Tabelas HTML

<tr>
<td>Primeira linha</td>
</tr> </
tabela>

</corpo>
</html>

Figura 11.19

Etiquetas de tabela

MARCAÇÃO DESCRIÇÃO

<tabela> Define uma tabela

<º> Define um cabeçalho de tabela

<tr> Define uma linha de tabela

<td> Define uma célula de tabela

<legenda> Define uma legenda de tabela

<grupocol> Define grupos de colunas de tabela

<col> Define os valores de atributo para uma ou mais

colunas em uma tabela

<cabeça> Define um cabeçalho de tabela

<corpo> Define um corpo de tabela

<tpé> Define um rodapé de tabela

89
Machine Translated by Google

Capítulo 12

Listas HTML

Neste capítulo
ÿ Listas não ordenadas

ÿ Listas ordenadas

ÿ Listas de definições

ÿ Listas aninhadas

Listas não ordenadas

HTML suporta listas ordenadas, não ordenadas e de definição. Você também pode aninhar uma lista dentro
de outra.

Uma lista não ordenada é uma lista de itens. Os itens da lista são marcados com marcadores (tipicamente
pequenos círculos pretos), como mostrado na Figura 12.1.

Figura 12.1

90
Machine Translated by Google

Capítulo 12: Listas HTML

Uma lista não ordenada começa com a tag <ul> . Cada item da lista começa com a tag <li> .
A Figura 12.2 mostra como ele aparece em um navegador.

Experimente você mesmo >>

<html>
<corpo>

<h4>Uma lista não ordenada:</h4>

<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li> </ul>

</corpo>
</html>

Figura 12.2

Dentro de um item de lista, você pode colocar parágrafos, quebras de linha, imagens, links, outras listas e
breve.

Você pode exibir diferentes tipos de marcadores em uma lista não ordenada usando o atributo type . A
Figura 12.3 mostra listas marcadas com discos, círculos e quadrados.

Experimente você mesmo >>

<html>
<corpo>

<h4>Lista de marcadores do disco:</

h4> <ul type="disc">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li> </ul>

(continua)

91
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continuação)
<h4>Lista de marcadores do círculo:</h4>
<ul type="circle">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li> </ul>

<h4>Lista de marcadores quadrados:</

h4> <ul type="square">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li> </ul>

</corpo>
</html>

Figura 12.3

92
Machine Translated by Google

Capítulo 12: Listas HTML

Listas ordenadas
Uma lista ordenada também é uma lista de itens; os itens da lista são numerados sequencialmente em
vez de marcadores.

Uma lista ordenada começa com a tag <ol> . Cada item da lista começa com a tag <li> .
A Figura 12.4 mostra como a lista ordenada aparece no navegador.

Experimente você mesmo >>

<html>
<corpo>

<h4>Uma lista ordenada:</h4>

<ol>
<li>Café</li>
<li>Chá</li>
<li>Leite</li> </ol>

</corpo>
</html>

Figura 12.4

Diferentes tipos de pedidos

Você pode exibir diferentes tipos de listas ordenadas usando o atributo type . A Figura 12.5 mostra listas
marcadas com letras maiúsculas e minúsculas; a Figura 12.6 mostra listas com numerais romanos
maiúsculos e minúsculos.

Experimente você mesmo >>

<html>
<corpo>

(continua)

93
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua)
<h4>Lista de letras:</h4> <ol
type="A">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limãos</li> </ol>

<h4>Lista de letras minúsculas:</h4> <ol

type="a">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limãos</li> </ol>

</corpo>
</html>

Figura 12.5

Experimente você mesmo >>

<html>
<corpo>

<h4>Lista de números romanos:</h4>

<ol type="I">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limãos</li>

94
Machine Translated by Google

Capítulo 12: Listas HTML

</ol>

<h4>Lista de números romanos minúsculos:</h4>

<ol type="i">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limãos</li> </ol>

</corpo>
</html>

Figura 12.6

Listas de definições
Uma lista de definições não é uma lista de itens únicos. É uma lista de itens (termos), junto com uma
descrição de cada item (termo).

Uma lista de definições começa com uma tag <dl> (lista de definições).

Cada termo começa com uma tag <dt> (termo de definição).

Cada descrição começa com uma tag <dd> (descrição da definição).

A Figura 12.7 mostra como a lista de definições no exemplo a seguir aparece em um navegador.

95
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Experimente você mesmo >>

<html>
<corpo>

<h4>Uma lista de definições:</h4>

<dl>
<dt>Café</dt>
<dd>Bebida preta quente</dd>
<dt>Leite</dt>
<dd>Bebida branca fria</dd> </dl>

</corpo>
</html>

Figura 12.7

Dentro da tag <dd> você pode colocar parágrafos, quebras de linha, imagens, links, outras listas e
assim por diante.

Listas aninhadas
Uma lista aninhada é uma lista dentro de outra lista. Normalmente, a segunda lista é recuada em outro
nível e os marcadores de itens aparecerão de forma diferente da lista original, como mostrado na
Figura 12.8.

Experimente você mesmo >>

<html>
<corpo>

<h4>Uma lista aninhada:</h4>

<ul>
<li>Café</li>

96
Machine Translated by Google

Capítulo 12: Listas HTML

<li>Chá
<ul>
<li>Chá preto</li>
<li>Chá verde</li> </ul>
</li>

<li>Leite</li> </ul>

</corpo>
</html>

Figura 12.8

Listas aninhadas podem ter vários níveis de profundidade, conforme mostrado na Figura 12.9.

Experimente você mesmo >>

<html>
<corpo>

<h4>Uma lista aninhada:</h4>

<ul>
<li>Café</li> <li>Chá

<ul>
<li>Chá preto</li>
<li>Chá verde
<ul>
<li>China</li>
<li>África</li> </ul>
</li> </
ul>
(continua)

97
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua)
</li>
<li>Leite</li>
</ul>

</corpo>
</html>

Figura 12.9

Listar tags
MARCAÇÃO DESCRIÇÃO

<ol> Define uma lista ordenada

<ul> Define uma lista não ordenada

<li> Define um item de lista

<dl> Define uma lista de definições

<dt> Define um termo (um item) em uma lista de

definições

<dd> Define uma descrição de um termo em um

lista de definições

<diretório>
Obsoleto. Use <ul> em vez disso
<cardápio> Obsoleto. Use <ul> em vez disso

98
Machine Translated by Google

Capítulo 13

Formulários HTML
& Entrada

Neste capítulo
ÿ Formulários

ÿ Tag de entrada e atributos

ÿ Atributo de ação

ÿ Exemplos de formulários

Formulários

Formulários HTML são usados para coletar diferentes tipos de entrada do usuário. Um formulário é uma área que pode
conter elementos de formulário.

Elementos de formulário são elementos que permitem ao usuário inserir informações em um formulário (como campos

de texto, campos de área de texto, menus suspensos, botões de opção, caixas de seleção e assim por diante).

Um exemplo de formulário simples aparece na Figura 13.1.

Figura 13.1

99
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Um formulário é definido com a tag <form> :

<formulário>

.
elementos de entrada
.
</form>

Tag de entrada e atributos

A tag form mais usada é a tag <input> . O tipo de entrada é especificado com o atributo type . Os
seguintes tipos são os tipos de entrada mais comumente usados.

Campos de texto

Campos de texto são usados quando você quer que o usuário digite letras, números e assim por diante
em um formulário. O formulário aparece como mostrado na Figura 13.2. Note que o formulário em si não
é visível.

Experimente você mesmo >>

<html>
<corpo>

<form ação="">
Primeiro nome:
<input type="texto" nome="primeironome" /> <br />

Sobrenome:

<input type="text" nome="sobrenome" /> </form>

</corpo>
</html>

Figura 13.2

100
Machine Translated by Google

Capítulo 13: Formulários HTML e entrada

DICA Na maioria dos navegadores, a largura do campo de texto é de 20 caracteres por padrão.

Caixas de seleção

Este exemplo demonstra como criar caixas de seleção em uma página HTML como as mostradas
na Figura 13.3. Um usuário pode selecionar ou desmarcar uma caixa de seleção.

Experimente você mesmo >>

<html>

<corpo>

<form ação="">
Eu tenho uma bicicleta:

<input type="checkbox" name="veículo" value="Bicicleta"> <br />

Eu tenho um carro:

<input type="checkbox" name="veículo" value="Carro"> <br />

Eu tenho um avião: <input

type="checkbox" name="vehicle" value="Airplane"> </form>

</corpo>
</html>

Figura 13.3

101
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Botões de rádio
O exemplo demonstrado na Figura 13.4 mostra como criar botões de opção em um formulário HTML.
Quando um usuário clica em um botão de opção, esse botão é selecionado, e todos os outros botões no
mesmo grupo são desselecionados.

Experimente você mesmo >>

<html>

<corpo>

<form ação="">
Macho:

<input type="radio" checked="checked" name="Sexo"

value="masculino">
<br>
Fêmea:

<input type="radio"
name="Sexo" value="feminino">

</form>

</corpo>
</html>

Figura 13.4

Lista suspensa O próximo

exemplo mostra como criar uma lista suspensa simples em uma página HTML.
Uma lista suspensa é uma lista selecionável.

Experimente você mesmo >>

<html>

<corpo>

<form ação="">
<selecione nome="carros">

102
Machine Translated by Google

Capítulo 13: Formulários HTML e entrada

<opção valor="volvo">Volvo</opção> <opção

valor="saab">Saab</opção> <opção valor="fiat">Fiat</
opção> <opção valor="audi">Audi</opção> </
selecionar> </formulário>

</corpo>
</html>

Figura 13.5

Você também pode exibir uma lista suspensa simples com um valor pré-selecionado na lista, conforme
mostrado na Figura 13.6.

Experimente você mesmo >>

<html>

<corpo>

<form ação="">
<selecione nome="carros">

<opção valor="volvo">Volvo</opção> <opção

valor="saab">Saab</opção> <opção valor="fiat"
selecionado="selected">Fiat</opção> <opção valor="audi">Audi</opção> </
selecionar> </formulário>

</corpo>
</html>

Figura 13.6

103
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Área de texto
Usando uma textarea (um controle de entrada de texto multilinha) como o da Figura 13.7, você pode
escrever um número ilimitado de caracteres. Uma textarea pode estar em um formulário ou em outro lugar

em uma página.

Experimente você mesmo >>

<html>
<corpo>

<textarea rows="10" cols="30"> O gato estava brincando no

jardim. </textarea>

</corpo>
</html>

Figura 13.7

Botões
Botões são itens comuns em um formulário. Este exemplo demonstra como criar um botão. Você pode
definir seu próprio texto na face do botão. Os resultados deste código aparecem na Figura 13.8.

Experimente você mesmo >>

<html>
<corpo>

<form ação="">

<input type="button" value="Olá, mundo!"> </form>

104
Machine Translated by Google

Capítulo 13: Formulários HTML e entrada

</corpo> </
html>

Figura 13.8

Conjunto de campos

Um fieldset é um agrupamento de campos de dados. Este exemplo demonstra como desenhar uma
borda com uma legenda ao redor dos seus dados, conforme mostrado na Figura 13.9.

Experimente você mesmo >>

<html>

<corpo>

<conjunto de campos>

<legenda>
Informações de saúde:

</legend>
<form action="">

Altura <input type="text" size="3">

Peso <input type="text" size="3"> </form> </fieldset>

<p>
Se não houver nenhuma borda ao redor do formulário de entrada, seu navegador está
muito velho.

</p>

</corpo> </
html>

Figura 13.9

105
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Atributo de ação
Quando o usuário clica no botão Enviar, o conteúdo do formulário é enviado ao servidor. O
atributo action do formulário define o nome do arquivo para o qual enviar o conteúdo. O
arquivo definido no atributo action geralmente faz algo com a entrada recebida.

<form nome="entrada" ação="html_form_submit.asp"

método="obter">
Nome de usuário:

<input type="text" name="usuário" /> <input

type="enviar" value="Enviar" /> </form>

A Figura 13.10 mostra como ele se parece em um navegador. Se você digitar alguns caracteres
no campo de texto e clicar no botão Enviar, o navegador envia sua entrada para uma página
chamada "html_form_submit.asp". A página mostrará a entrada recebida.

Figura 13.10

Exemplos de formulários
Este exemplo demonstra como adicionar um formulário a uma página. O formulário contém
dois campos de entrada e um botão Enviar. O formulário resultante aparece na Figura 13.11.

Experimente você mesmo >>

<html>
<corpo>

<formulário nome="entrada" ação="html_form_action.asp"

método="obter">

Digite seu primeiro nome:

<input type="text" name="FirstName" value="Mickey" size="20"> <br>Digite seu
sobrenome: <input type="text"
name="LastName" value="Mouse" size="20">
<br>
<input type="enviar" valor="Enviar">

106
Machine Translated by Google

Capítulo 13: Formulários HTML e entrada

</form>

<p>

Se você clicar no botão "Enviar", você enviará sua entrada para uma nova página chamada
html_form_action.asp. </p>

</corpo>
</html>

Figura 13.11

Formulário com caixas de seleção

O formulário a seguir contém três caixas de seleção e um botão Enviar. Os resultados do

código aparecem na Figura 13.12.

Experimente você mesmo >>

<html>
<corpo>

<formulário nome="entrada" ação="html_form_action.asp"

método="obter">
Eu tenho uma bicicleta:

<input type="checkbox" name="veículo" value="Bicicleta"

checked="checked" />
<br />
Eu tenho um carro:
<input type="checkbox" name="veículo" value="Carro" /> <br />

Eu tenho um avião: <input

type="checkbox" name="vehicle" value="Airplane" /> <br /><br /> <input
type="submit"
value="Submit" /> </form>
(continua)

107
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua)
<p>
Se você clicar no botão "Enviar", você enviará sua entrada para uma nova
página chamada html_form_action.asp. </p>

</corpo>
</html>

Figura 13.12

Formulário com botões de opção

A Figura 13.13 exibe um formulário com dois botões de opção e um botão Enviar.

Experimente você mesmo >>

<html>
<corpo>

<formulário nome="entrada" ação="html_form_action.asp"

método="obter">
Macho:

<input type="radio" name="Sexo" value="Masculino"

checked="checked">
<br>
Fêmea:
<input type="radio" name="Sexo" value="Feminino">
<br>
<input type ="enviar" value ="Enviar"> </form>

<p>
Se você clicar no botão "Enviar", você enviará sua entrada

108
Machine Translated by Google

Capítulo 13: Formulários HTML e entrada

para uma nova página chamada html_form_action.asp. </p>

</corpo> </
html>

Figura 13.13

Enviar e-mail de um formulário

O próximo exemplo demonstra como enviar e-mail de um formulário. Os resultados do
código aparecem na Figura 13.14.

Experimente você mesmo >>

<html>

<body>
<form action="MAILTO:[email protected]" method="post"
enctype="texto/simples">

<h3>Este formulário envia um e-mail para W3Schools.</h3> Nome:<br>

<input type="text" name="nome" value="seunome"

size="20">
<br>
Correio:<br>

<input type="text" name="mail" value="seuemail"

size="20">
<br>
Comentário:<br>

<input type="text" name="comment"

value="seucomentário" size="40">
<br><br>

<input type="enviar" valor="Enviar"> <input

type="redefinir" valor="Redefinir"> (continua)

109
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua)

</form>
</corpo>
</html>

Figura 13.14

Marcadores de formulário

MARCAÇÃO DESCRIÇÃO

<formulário> Define um formulário para entrada do usuário

<entrada> Define um campo de entrada

<área de texto> Define uma textarea (um controle de entrada de texto multilinha)

<rótulo> Define um rótulo para um controle

<conjunto de campos> Define um fieldset

<legenda> Define uma legenda para um fieldset

<selecionar> Define uma lista selecionável (uma caixa suspensa)

<grupo de opções> Define um grupo de opções

<opção> Define uma opção na caixa suspensa

<botão> Define um botão de pressão

<isindex> Obsoleto. Use <input> em vez disso

110
Machine Translated by Google

Capítulo 14

Cor HTML
Neste capítulo
ÿ Valores de cor

ÿ 16 milhões de cores diferentes

ÿ Nomes de cores padrão da Web

ÿ Nomes de cores suportados por todos os navegadores

ÿ Cores seguras para a Web?

ÿ Tons de Cinza

Valores de cor
As cores HTML são definidas usando uma notação hexadecimal (hex) para a combinação
dos valores de cor Vermelho, Verde e Azul (RGB). O menor valor que pode ser dado a
uma das fontes de luz é 0 (hex 00). O valor mais alto é 255 (hex FF).

Os valores hexadecimais são escritos como três números de dois dígitos, começando com um sinal #, como
como #9ACD32.

Como este livro não é impresso em cores, pode ser difícil ver o
alguns dos exemplos exibidos neste capítulo. Você pode querer consultar
o site www.w3schools.com/html para estudar o trabalho com cores em HTML
mais de perto.

Os resultados desses códigos são mostrados na Figura 14.1.

Valores de cor

COR COR HEX COR RGB

Preto #000000 rgb(0,0,0)

Vermelho #FF0000 rgb(255,0,0)
Verde #00FF00 rgb(0,255,0)
Azul #0000FF rgb(0,0,255)
Amarelo #FFFF00 rgb(255,255,0)

Ciano #00FFFF rgb(0,255,255)

(continua)

111
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua)

Magenta #FF00FF rgb(255.0.255)

Cinza #C0C0C0 rgb(192.192.192)

Branco #FFFFFF rgb(255.255.255)

Experimente você mesmo >>

<html>
<corpo>

<p estilo="cor-de-fundo:#C0C0C0">
Conjunto de cores usando valor hexadecimal
</p>

<p estilo="cor de fundo:rgb(192,192,192)">

Conjunto de cores usando valor rgb </
p>

<p estilo="cor-de-fundo:cinza">
Conjunto de cores usando o nome da
cor </p>

</corpo>
</html>

Figura 14.1

16 milhões de cores diferentes

A combinação dos valores Red, Green e Blue de 0 a 255 dá a você um total de mais de 16
milhões de cores para brincar (256 x 256 x 256). A maioria dos monitores modernos é capaz
de exibir pelo menos 16.384 cores.

Se você olhar a tabela de cores em http://www.w3schools.com/html/html_colors.asp, verá o

resultado da variação da luz vermelha de 0 a 255, mantendo a luz verde e azul em zero.

112
Machine Translated by Google

Capítulo 14: Cor HTML

Nomes de cores padrão da Web

O World Wide Web Consortium (W3C) listou 16 nomes de cores válidos para
HTML e CSS:

8 Água
8 Preto

8 Azul

8 Fúcsia

8 Cinza
8 Verde

8 Lima

8 Marrom

8 Marinha
8 Azeitona

8 Roxo
8 Vermelho

8 Prata

8 Azul-petróleo

8 Branco

8 Amarelo

Se você quiser usar outras cores, deverá especificar seus valores HEX.

Nomes de cores suportados por todos

Navegadores
Os padrões HTML e CSS do W3C listaram apenas 16 nomes de cores válidos. No entanto,
uma coleção de quase 150 nomes de cores é suportada por todos os principais navegadores.

A lista completa de nomes de cores suportados pelos principais navegadores

está disponível no site w3schools: http://www.w3schools.com/html/
html_colornames.asp.

OBSERVAÇÃO
Esses nomes adicionais não fazem parte do padrão W3C Web. Se você
Se você deseja HTML ou CSS válido, use os valores HEX.

113
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Cores seguras para a Web?

Há alguns anos, quando os computadores suportavam no máximo 256 cores diferentes, uma
uma lista de 216 “cores seguras da Web” foi sugerida como um padrão da Web, reservando 40 cores fixas
cores do sistema. Esta paleta de cores cross-browser foi criada para garantir que todos os
computadores exibissem as cores corretamente ao executar uma paleta de 256 cores.
não é importante agora, porque a maioria dos computadores pode exibir milhões de diferentes
cores.

A lista completa de cores seguras para a Web pode ser encontrada em http://www.w3schools.
com/html/html_colors.asp.

Tons de Cinza
As cores cinzas são exibidas usando uma quantidade igual de energia para todas as fontes de luz.
Para facilitar a seleção da cor cinza correta, compilamos a seguinte tabela de tons de cinza.

Você encontrará a mesma tabela de tons de cinza em http://www.w3schools.com/

html/html_colors.asp.\

TONS DE CINZA COR HEX COR RGB

#000000 rgb(0,0,0)
#080808 rgb(8,8,8)
#101010 rgb(16,16,16)
#181818 rgb(24,24,24)
#202020 rgb(32,32,32)
#282828 rgb(40,40,40)
#303030 rgb(48,48,48)
#383838 rgb(56,56,56)
#404040 rgb(64,64,64)
#484848 rgb(72,72,72)
#505050 rgb(80,80,80)
#585858 rgb(88,88,88)
#606060 rgb(96,96,96)
#686868 rgb(104,104,104)
#707070 rgb(112,112,112)
#787878 rgb(120,120,120)
#808080 rgb(128,128,128)

114
Machine Translated by Google

Capítulo 14: Cor HTML

#888888 rgb(136,136,136)
#909090 rgb(144,144,144)
#989898 rgb(152,152,152)
#A0A0A0 rgb(160,160,160)
#A8A8A8 rgb(168,168,168)
#B0B0B0 rgb(176,176,176)
#B8B8B8 rgb(184,184,184)
#C0C0C0 rgb(192,192,192)
#C8C8C8 rgb(200,200,200)
#D0D0D0 rgb(208,208,208)
#D8D8D8 rgb(216,216,216)
#E0E0E0 rgb(224,224,224)
#E8E8E8 rgb(232,232,232)
#F0F0F0 rgb(240,240,240)
#F8F8F8 rgb(248,248,248)
#FFFFFF rgb(255,255,255)

115
Machine Translated by Google

Capítulo 15

Lista rápida
HTML 4.01
A seguir está uma lista rápida em HTML da primeira metade deste livro.

Você pode visualizar ou imprimir esta lista rápida no site w3schools em www.
w3schools.com/html/html_quick.asp

Documento HTML Básico

<html>
<cabeça>

<title>O nome do documento vai aqui</title>

</cabeçalho>

<corpo>
O texto visível vai aqui
</corpo>
</html>

Elementos de Cabeçalho
<h1>Maior Título</h1>
<h2> . . </h2>
.
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Menor Cabeçalho</h6>

Elementos de texto
<p>Este é um parágrafo</p>
<br /> (quebra de linha)
<hr /> (regra horizontal)
<pre>Este texto está pré-formatado</pre>

116
Machine Translated by Google

Capítulo 15: Lista rápida do HTML 4.01

Estilos Lógicos
<em>Este texto é enfatizado</em>
<strong>Este texto é forte</strong> <code>Este é
um código de computador</code>

Estilos Físicos
<b>Este texto está em negrito</
b> <i>Este texto está em itálico</i>

Links, âncoras e elementos de imagem

<a href="http://www.example.com/">Este é um link</a> <a href="http://
www.example.com/"><img src="URL"
alt="Texto alternativo"></a> <a
href="mailto:[email protected]">Enviar e-mail</a>

Uma âncora nomeada:

<a name="tips">Seção de dicas úteis</a> <a

href="#tips">Ir para a seção de dicas úteis</a>

Lista não ordenada (com marcadores)

<ul>
<li>Primeiro item</li>
<li>Próximo item</li> </
ul>

Lista ordenada (numerada)

<ol>
<li>Primeiro item</li>
<li>Próximo item</li> </
ol>

117
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Lista de definições
<dl>
<dt>Primeiro termo</dt>
<dd>Definição</dd>
<dt>Próximo termo</dt>
<dd>Definição</dd> </
dl>

Tabelas
<tabela border="1">
<tr>
<th>algum cabeçalho</th>
<th>algum cabeçalho</th>
</tr>
<tr>
<td>algumtexto</td>
<td>algumtexto</td> </
tr> </
table>

Molduras
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm"> </
frameset>

Formulários
<form action="http://www.example.com/test.asp" method="post/
obter">
<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">
<input
type="password"> <input
type="checkbox" checked="checked"> <input type="radio"
checked="checked">

118
Machine Translated by Google

Capítulo 15: Lista rápida do HTML 4.01

<tipo de entrada="enviar"> <tipo

de entrada="redefinir"> <tipo de
entrada="oculto">

<selecionar>

<option>Maçãs
<option selected="selected">Maçãs</option> <option
selected>Bananas <option
selected="selected">Bananas</option> <option>Cerejas
<option>Cerejas</option>
</select> <textarea name="Comment"
rows="60"
cols="20"></textarea>

</form>

Entidades
&lt; é o mesmo que <
&gt; é o mesmo que >
&#169; é o mesmo que ©

Outros Elementos
<!-- Este é um comentário -->

<blockquote>
Texto citado de alguma fonte. </blockquote>

<endereço>
Endereço 1<br>
Endereço 2<br>

Cidade<br>
</address>
Fonte: http://www.w3schools.com/html/html_quick.asp.

119
Machine Translated by Google
Machine Translated by Google

Seção II
HTML/CSS
Avançado
ÿ Capítulo 16: Layout HTML

ÿ Capítulo 17: Quadros HTML

ÿ Capítulo 18: Fontes HTML

ÿ Capítulo 19: Por que usar HTML 4.0?

ÿ Capítulo 20: Estilos HTML CSS

ÿ Capítulo 21: Entidades de caracteres HTML

ÿ Capítulo 22: Elementos Head e Meta HTML

ÿ Capítulo 23: Localizadores Uniformes de Recursos HTML

ÿ Capítulo 24: Scripts HTML

ÿ Capítulo 25: Atributos Padrão HTML

ÿ Capítulo 26: Atributos de eventos HTML

ÿ Capítulo 27: Codificação de URL HTML

ÿ Capítulo 28: Transforme seu PC em um servidor web

ÿ Capítulo 29: Resumo de HTML e CSS

Machine Translated by Google
Machine Translated by Google

Capítulo 16

Layout HTML

Neste capítulo
ÿ Layout HTML usando tabelas

Em todo lugar na Web, você encontra páginas que são formatadas como páginas de jornal
usando colunas HTML. Uma prática muito comum com HTML é usar tabelas HTML para formatar
o layout de uma página HTML.

Layout HTML usando tabelas

Uma parte desta página é formatada com Uma <tabela> HTML é usada para dividir
duas colunas, como uma página de jornal. uma parte desta página da Web em duas
colunas.
Como você pode ver nesta página, há
uma coluna esquerda e uma coluna direita. O truque é usar uma tabela sem bordas e
talvez um pouco mais de preenchimento
Este texto é exibido na coluna esquerda
hum.
de célula.

Não importa quanto texto você adicione a

esta tabela, ele permanecerá dentro das
bordas das colunas.

Para obter mais informações sobre como criar e formatar tabelas, consulte "Capítulo
11, "Tabelas HTML".

Dividir uma parte de uma página HTML em colunas de tabela é muito fácil de fazer. Basta
configurá-lo como no exemplo a seguir. Os resultados são mostrados na Figura 16.1.

Experimente você mesmo >>

<html>
<corpo>

<borda da tabela="0" largura="100%" preenchimento da célula="10">

<tr>

(continua)

123
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua)
<td width="50%" valign="top"> Este é um texto.
Este é um texto. Este é um texto.
Este é um texto. Este é um texto.
</td>

<td width="50%" valign="top"> Outro texto.

Outro texto. Outro texto. Outro texto. An-
outro texto. Outro texto. Outro texto.
</td>

</tr>
</tabela>

</corpo>
</html>

Figura 16.1

124
Machine Translated by Google

Capítulo 17

Quadros HTML

Neste capítulo
ÿ Etiqueta do conjunto de quadros

ÿ Etiqueta de quadro

ÿ Projetando com Molduras

Com frames, você pode exibir mais de um documento HTML na mesma janela do navegador.
Cada documento HTML é chamado de frame, e cada frame é independente dos outros.

As desvantagens de usar frames são:

8 O desenvolvedor web deve monitorar mais documentos HTML.

8 É difícil imprimir a página inteira.

8 Os usuários geralmente não gostam deles.

8 Apresenta desafios de ligação.

8 As pessoas costumam usar frames para envolver seus próprios anúncios e marcas em torno do
conteúdo de outras pessoas

Etiqueta do conjunto de quadros

A tag <frameset> define como dividir a janela em frames. Cada frame-set define um conjunto
de linhas ou colunas. Os valores das linhas/colunas indicam a quantidade de área de tela
que cada linha/coluna ocupará.

Conjunto de quadros verticais

O exemplo a seguir demonstra como fazer um frameset vertical com três documentos diferentes. Os
resultados do código de exemplo aparecem na Figura 17.1

125
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Experimente você mesmo >>

<html>
<frameset cols="25%,50%,25%"> <frame
src="frame_a.htm">
<quadro src="frame_b.htm">
<frame src="frame_c.htm"> </
frameset>
</html>

Figura 17.1

OBSERVAÇÃO
Observe que o código não usa a tag <body> quando uma tag <frame-
set> está em uso.

Conjunto de quadros horizontais

O exemplo a seguir demonstra como fazer um frameset horizontal com três documentos
diferentes. Os resultados do código de exemplo aparecem na Figura 17.2

126
Machine Translated by Google

Capítulo 17: Quadros HTML

Experimente você mesmo >>

<html>

<frameset linhas="25%,50%,25%">
<frame src="frame_a.htm">
<quadro src="frame_b.htm">
<frame src="frame_c.htm"> </
frameset>

</html>

Figura 17.2

etiqueta de quadro
A tag <frame> define qual documento HTML será aberto inicialmente em cada quadro.

No exemplo a seguir, como mostrado na Figura 17.3, temos um frameset com duas
colunas. A primeira coluna é definida como 25% da largura da janela do navegador. A
segunda coluna é definida como 75% da largura da janela do navegador. O documento
HTML frame_a.htm é colocado na primeira coluna, e o documento HTML frame_b.htm
é colocado na segunda coluna.

127
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Experimente você mesmo >>

<conjunto de quadros cols="25%,75%">

<quadro src="frame_a.htm">
<quadro src="frame_b.htm">
</conjunto de quadros>

Figura 17.3

OBSERVAÇÃO
O valor do tamanho da coluna do conjunto de quadros também pode ser definido
em pixels (cols="200,500"), e uma das colunas pode ser definida para usar o espaço restante
(cols="25%,*").

Projetando com Molduras

Se um quadro tiver bordas visíveis, o usuário pode redimensioná-lo arrastando a borda. Para
impedir que um usuário faça isso, você pode adicionar noresize="noresize" à tag <frame> .

Etiqueta noframes
Embora sejam menos comuns hoje em dia, é uma boa ideia adicionar a tag <noframes> para
navegadores mais antigos ou baseados em texto que não suportam frames.

128
Machine Translated by Google

Capítulo 17: Quadros HTML

Você não pode usar as tags <body> junto com as tags <frameset> . No entanto, se você
adicionar uma tag <noframes> contendo algum texto para navegadores que não suportam
frames, você terá que colocar o texto entre as tags <body> . Veja como isso é feito no
exemplo a seguir. Os resultados desse código aparecem na Figura 17.4.

Experimente você mesmo >>

<html>

<frameset cols="25%,50%,25%"> <frame

src="frame_a.htm">
<quadro src="frame_b.htm">
<quadro src="frame_c.htm">

<sem quadros>
<body>Seu navegador não suporta frames!</body> </noframes>

</conjunto de quadros>

</html>

(Este navegador suporta frames, então o texto noframes permanece invisível.)

Figura 17.4

129
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Conjunto de quadros mistos

O exemplo a seguir demonstra como criar um conjunto de quadros com três documentos e
como misturá-los em linhas e colunas, conforme mostrado na Figura 17.5.

Experimente você mesmo >>

<html>

<linhas do conjunto de quadros="50%,50%">

<quadro src="frame_a.htm">

<frameset cols="25%,75%"> <quadro

src="frame_b.htm">
<frame src="frame_c.htm"> </
frameset>

</conjunto de quadros>

</html>

Figura 17.5

130
Machine Translated by Google

Capítulo 17: Quadros HTML

Atributo noresize
Este exemplo demonstra o atributo noresize . Os frames não são redimensionáveis.
Ao contrário de outros quadros, se você mover o mouse sobre as bordas entre os
quadros, notará que não é possível arrastar ou mover as bordas do quadro.

Experimente você mesmo >>

<html>

<frameset linhas="50%,50%">
<frame noresize="noresize" src="frame_a.htm">

<frameset cols="25%,75%"> <quadro

noresize="noresize" src="frame_b.htm">
<quadro noresize="noresize" src="frame_c.htm">

</conjunto de quadros>

</html>

Quadro de Navegação Este

exemplo demonstra como fazer um quadro de navegação. Um quadro de navegação

contém uma lista de links com o segundo quadro como alvo. O segundo quadro mostrará
o documento vinculado. Um quadro de navegação de amostra aparece na Figura 17.6.

Experimente você mesmo >>

<html>

<frameset cols="120,*"> <frame

src="tryhtml_contents.htm"> <frame
src="frame_a.htm" name="showframe"> </frameset>

</html>

131
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Figura 17.6

Na primeira coluna, o arquivo chamado tryhtml_contents.htm contém links para três

documentos no site w3schools.com. O código-fonte para os links:

<a href ="frame_a.htm" target ="showframe">Quadro a</a><br> <a href

="frame_b.htm" target ="showframe">Quadro b</a><br> <a href ="frame_c.htm"
target ="showframe">Quadro c</a>

Quadro em linha
Frames também podem ser usados dentro de uma única página HTML. Eles são conhecidos
como frames inline. O exemplo a seguir demonstra como criar um frame inline como o que
aparece na Figura 17.7.

Experimente você mesmo >>

<html>
<corpo>

<iframe src="default.asp"></iframe>

<p>Alguns navegadores mais antigos não suportam iframes.</p>

<p>Se não suportarem, o iframe não ficará visível.</p>

132
Machine Translated by Google

Capítulo 17: Quadros HTML

</corpo>
</html>

Figura 17.7

Pular para

Este exemplo demonstra dois frames. Um dos frames tem uma fonte para uma seção
especificada em um arquivo. A seção especificada é feita com <a name="C10"> no
arquivo link.htm. O resultado é mostrado na Figura 17.8.

Experimente você mesmo >>

<html>

<conjunto de quadros cols="20%,80%">

<quadro src="frame_a.htm">
<frame src="link.htm#C10">
</conjunto de quadros>

</html>

133
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Figura 17.8

Pular para uma Seção Especificada Este exemplo

demonstra dois frames. O frame de navegação (content.htm) à esquerda contém uma lista
de links com o segundo frame (link.htm) como alvo à direita.
O segundo quadro mostra o documento vinculado. O resultado é mostrado na Figura 17.9.

Experimente você mesmo >>

<html>

<frameset cols="180,*"> <frame

src="content.htm">
<frame src="link.htm" nome="showframe">
</conjunto de quadros>

</html>

134
Machine Translated by Google

Capítulo 17: Quadros HTML

Figura 17.9

Um dos links no quadro de navegação está vinculado a uma seção especificada no destino
arquivo. O código HTML no arquivo content.htm se parece com isso:

<a href ="link.htm" target ="showframe">Link sem âncora</a>

a><br><a href ="link.htm#C10" target ="showframe">Link com âncora</a>.

Etiquetas de quadro

MARCAÇÃO DESCRIÇÃO

<conjunto de quadros> Define um conjunto de quadros

<quadro> Define uma subjanela (um quadro)

<sem quadros> Define uma seção noframe para navegadores que não manipulam
quadros

<iframe> Define uma subjanela embutida (quadro)

135
Machine Translated by Google

Capítulo 18

Fontes HTML
Neste capítulo
ÿ fonte Tag
ÿ Atributos da fonte

ÿ Controlando fontes com estilos

NOTA A tag
<font> em HTML está obsoleta. Ela deve ser removida em uma versão futura do HTML.
Mesmo que muitas pessoas a estejam usando, você deve tentar evitá-la e usar estilos em vez dela. A
tag é explicada aqui para ajudar você a entendê-la se você a vir sendo usada em outro lugar na Web.

fonte Tag
Com código HTML como o exemplo a seguir, você pode especificar tanto o tamanho quanto o
tipo da saída do navegador. Você pode ver como os resultados se parecem na Figura 18.1.

Experimente você mesmo >>

<p>
<font size="2" face="Verdana">
Este é um parágrafo. </
font> </
p>
<p>
<tamanho da fonte="3" face="Times">
Este é outro parágrafo. </font> </p>

Figura 18.1

136
Machine Translated by Google

Capítulo 18: Fontes HTML

Atributos da fonte
ATRIBUTO EXEMPLO PROPÓSITO

tamanho="número" tamanho="2" Define o tamanho da fonte

tamanho="+número" tamanho="+1" Aumenta o tamanho da fonte

tamanho="-número" tamanho="-1" Diminui o tamanho da fonte

face="nome-do-rosto" face="Tempos" Define o nome da fonte

cor="valor-da-cor" cor="#eeff00" Define a cor da fonte

cor="nome-da-cor" cor="vermelho" Define a cor da fonte

Controlando fontes com estilos

Embora seja explicado aqui, a tag <font> não deve ser usada! A tag <font>
está obsoleto nas versões mais recentes do HTML, sobre as quais você aprenderá mais em
próximo capítulo.

O World Wide Web Consortium (W3C), uma organização que cria e define
padrões para a Web, removeu a tag <font> de suas recomendações. Em
versões futuras do HTML, folhas de estilo (CSS) serão usadas para definir o layout e
exibir propriedades de elementos HTML.

Fonte
Este exemplo demonstra como definir a fonte de um texto, conforme mostrado na Figura 18.2.

Experimente você mesmo >>

<html>
<corpo>
<h1 style="font-family:verdana">Um título</h1>
<p style="font-family:courier">Um parágrafo</p>
</corpo>
</html>

Figura 18.2

137
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Tamanho da fonte

Este exemplo demonstra como definir o tamanho da fonte de um texto, conforme mostrado na Figura
18.3.

Experimente você mesmo >>

<html>
<body>
<h1 style="font-size:150%">Um título</h1> <p style="font-
size:80%">Um parágrafo</p> </body> </html>

Figura 18.3

Cor da fonte

Este exemplo demonstra como definir a cor de um texto, conforme mostrado na Figura 18.4.

Experimente você mesmo >>

<html>
<body>
<h1 style="color:blue">Um título azul</h1> <p
style="color:red">Um parágrafo vermelho</p> </body>
</html>

Figura 18.4

138
Machine Translated by Google

Capítulo 18: Fontes HTML

As cores descritas nos exemplos de código neste capítulo são mostradas em escala de cinza nas
figuras. Para ver os resultados de amostra em cores completas, vá para:

http://www.w3schools.com/html/html_fonts.asp

Fonte, tamanho da fonte e cor da fonte

Este exemplo demonstra como definir a fonte, o tamanho da fonte e a cor da fonte de um texto ao
mesmo tempo, conforme mostrado na Figura 18.5.

Experimente você mesmo >>

<html>
<body>
<p style="font-family:verdana;font-size:80%;color:green"> Este é um parágrafo
com algum texto verde nele. Este é um
parágrafo com algum texto verde nele. Este é um parágrafo com algum texto
verde nele. Este é um parágrafo com algum texto verde nele. </p> </body> </
html>

Figura 18.5

Mais sobre folhas de estilo Os capítulos

restantes deste livro focam em trabalhar com estilos. Nos capítulos seguintes,
explicaremos por que algumas tags, como <font>, devem ser removidas das
recomendações HTML e como inserir uma folha de estilo em um documento HTML.

Para saber mais sobre folhas de estilo, confira Aprenda CSS com w3schools, também da
Wiley Publishing, e experimente o Tutorial de CSS em w3schools.com.

139
Machine Translated by Google

Capítulo 19

Por que usar HTML 4.0?

Neste capítulo
ÿ HTML 3.2 estava muito errado!
ÿ Insira o HTML 4.0

HTML 3.2 estava muito errado!

O HTML original nunca foi pensado para conter tags para formatar um documento.
As tags HTML foram criadas para definir o conteúdo do documento como:

<p>Este é um parágrafo</p>
<h1>Este é um título</h1>

Quando tags como <font> e atributos de cor foram adicionados à especificação HTML 3.2,
isso começou um pesadelo para desenvolvedores Web. O desenvolvimento de grandes
sites Web onde fontes e informações de cor tinham que ser adicionadas a cada página
Web, tornou-se um processo longo, caro e indevidamente doloroso.

Entre no HTML 4.0

No HTML 4.0, toda a formatação pode ser removida do documento HTML e armazenada
em uma folha de estilo separada. Como o HTML 4.0 separa a apresentação da estrutura do
documento, você finalmente obtém o que sempre precisou: controle total do layout da
apresentação sem bagunçar o conteúdo do documento.

O que você deve fazer sobre isso?

8 Não use atributos de apresentação dentro de suas tags HTML se puder evitar. Comece
a usar estilos! Leia Aprenda CSS com w3schools para saber mais sobre como trabalhar
com folhas de estilo.

8 Não use tags obsoletas. Visite a referência HTML 4.01 do w3schools para ver
quais tags e atributos estão obsoletos:

140
Machine Translated by Google

Capítulo 19: Por que usar HTML 4.0?

http://www.w3schools.com/html/html_reference.asp

OBSERVAÇÃO
O HTML 4.01 oficial recomenda o uso de tags minúsculas.

Valide seus arquivos HTML como HTML 4.01

Um documento HTML é validado em relação a uma Definição de Tipo de Documento (DTD).
Antes que um arquivo HTML possa ser validado corretamente, um DTD correto deve ser adicionado
como a primeira linha do arquivo.

O HTML 4.01 Strict DTD inclui elementos e atributos que não foram descontinuados ou não
aparecem em framesets:
<!DOCTYPE HTML PÚBLICO

"-//W3C//DTD HTML 4.01//EN" "http://

www.w3.org/TR/html4/strict.dtd">

O DTD de transição HTML 4.01 inclui tudo no DTD estrito, além de elementos e atributos
obsoletos:
<!DOCTYPE HTML PÚBLICO

"-//W3C//DTD HTML 4.01 Transicional//EN" "http://www.w3.org/TR/

html4/loose.dtd">

O HTML 4.01 Frameset DTD inclui tudo no DTD de transição, além de quadros também:

<!DOCTYPE HTML PÚBLICO

"-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/

TR/html4/frameset.dtd">

Teste seu HTML com o validador W3C

Se você quiser verificar a validade da marcação de documentos da Web em HTML, insira o
endereço da sua página (como www.w3schools.com) na caixa no Markup Validation Service.
O Validator é mantido pelo W3C.

http://validator.w3.org/

141
Machine Translated by Google

Capítulo 20

Estilos HTML CSS

Neste capítulo
ÿ Estilos em HTML

ÿ Como usar estilos

ÿ Etiquetas de estilo

Estilos em HTML
Com o HTML 4.0, toda a formatação pode ser movida para fora do documento HTML e para
uma folha de estilo separada. Isso torna a criação, atualização e manutenção do site muito
mais fácil.

O exemplo a seguir demonstra como formatar um documento HTML com informações

de estilo adicionadas à seção <head> . Os resultados do código de exemplo aparecem
na Figura 20.1.

Experimente você mesmo >>

<html>
<cabeça>

<style type="text/css"> h1 {cor:

vermelho}
h3 {cor: azul}
</estilo>

</cabeçalho>

<corpo>
<h1>Este é o cabeçalho 1</h1>
<h3>Este é o cabeçalho 3</h3> </
body>

</html>

142
Machine Translated by Google

Capítulo 20: Estilos HTML CSS

Figura 20.1

Link não sublinhado

Os links são sublinhados por padrão na página do navegador. O exemplo a seguir
demonstra como exibir um link que não é sublinhado por padrão, usando um atributo
style . Os resultados do código de exemplo aparecem na Figura 20.2.

Experimente você mesmo >>

<html>
<corpo>

<a href="lastpage.htm"
style="decoração-de-texto:nenhum">
ESTE É UM LINK!

</a>

</corpo>
</html>

Figura 20.2

143
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Link para uma Folha de Estilo Externa Este exemplo

demonstra como usar a tag <link> para linkar para uma folha de estilo externa. Os resultados
do código de exemplo aparecem na Figura 20.3.

Experimente você mesmo >>

<html>
<cabeça>

<link rel="folha de estilo" tipo="texto/css" href="estilos.css" > </head>

<body>
<h1>Estou formatado com uma folha de estilo vinculada</h1>
<p>Eu também!</
p> </body>

</html>

Figura 20.3

As folhas de estilo vinculadas nos códigos de exemplo neste capítulo estão

localizadas no servidor w3schools.com, então o código de exemplo funciona
melhor se você usar o editor Try It Yourself. Vá para http://www.w3schools.com/
html e clique em Try it yourself.

Como usar estilos

Quando um navegador lê uma folha de estilo, ele formata o documento de acordo com as
instruções na folha. Há três tipos de folhas de estilo: externa, interna e inline.

144
Machine Translated by Google

Capítulo 20: Estilos HTML CSS

Folha de Estilo Externa Uma folha

de estilo externa é ideal quando o estilo é aplicado a muitas páginas. Com uma folha
de estilo externa, você pode mudar a aparência de um site inteiro alterando um
arquivo. Cada página deve vincular à folha de estilo usando a tag <link> . A tag <link>
vai dentro da seção <head> .
<cabeça>

<link rel="folha de estilo" tipo="texto/css" href="meuestilo.css">

</cabeçalho>

Folha de Estilo Interna Uma folha

de estilo interna deve ser usada quando um único documento tem um estilo único.
Você define estilos internos na seção <head> com a tag <style> . Os resultados do
código de exemplo aparecem na Figura 20.4.

Experimente você mesmo >>

<cabeça>

<style type="text/css"> corpo {cor de

fundo: cinza} p {margem esquerda: 20px} </
style>

</cabeçalho>

<p>A margem esquerda é recuada em 20 pixels.</p>

Figura 20.4

145
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Estilos em linha
Um estilo inline deve ser usado quando um estilo exclusivo deve ser aplicado a uma única
ocorrência de um elemento. Para usar estilos inline, você usa o atributo style no campo relevante
tag. O atributo style pode conter qualquer propriedade CSS.

O exemplo mostrado na Figura 20.5 demonstra como alterar o fundo

cor e a margem esquerda de um parágrafo.

Experimente você mesmo >>

<p style="cor: vermelho; margem esquerda: 20px">

Este é um parágrafo. Ele é colorido de vermelho e recuado 20px.
</p>

Figura 20.5

OBSERVAÇÃO
Leia Aprenda CSS com w3schools para saber mais sobre como trabalhar com
folhas de estilo.

Etiquetas de estilo

MARCAÇÃO DESCRIÇÃO

<estilo> Define uma definição de estilo

<link> Define uma referência de recurso

<div> Define uma seção em um documento

<período> Define uma seção em um documento

<fonte> Obsoleto. Use estilos em vez disso

<fonte base> Obsoleto. Use estilos em vez disso
<centro> Obsoleto. Use estilos em vez disso

146
Machine Translated by Google

Capítulo 21

Caractere HTML
Entidades

Neste capítulo
ÿ Entidades de Personagem

ÿ Espaço não separável

ÿ Entidades de caracteres comumente usadas

Entidades de Personagem
Alguns caracteres são reservados em HTML. Por exemplo, você não pode usar os sinais de
maior que ou menor que dentro do seu texto porque o navegador pode confundi-los com
marcação. Se você quiser que o navegador realmente exiba esses caracteres, você deve
inserir entidades de caracteres na fonte HTML.

Uma entidade de caractere se parece com isto: &entity_name; ou &#entity_number;

Para exibir um sinal de menor que, você deve escrever: &lt; ou &#60;

A vantagem de usar um nome de entidade em vez de um número é que o nome geralmente é mais fácil de
lembrar. No entanto, a desvantagem é que os navegadores podem não suportar todos os nomes de
entidade (enquanto o suporte para números de entidade é muito bom).

O exemplo a seguir permite que você experimente com entidades de caracteres. Os resultados do código
aparecem na Figura 21.1.

Experimente você mesmo >>

<html>
<corpo>

<h1>Entidades de Caracteres</h1>
<p>Código: &X;</p>
<p>
(continua)

147
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua)
Substitua o "X" por um número de entidade como "#174" ou um
nome da entidade como "libra" para ver o resultado. Use a tabela na próxima
seção para tentar diferentes entidades de caracteres. </p> <p>&cent;</p>

<p>&#174;</p>
<p>&amp;</p> </
body> </html>

Figura 21.1

Espaço Inquebrável
A entidade de caractere mais comum em HTML é o espaço não divisível.

Normalmente, o HTML trunca espaços no seu texto. Se você escrever 10 espaços no seu
texto, o HTML removerá 9 deles. Para adicionar muitos espaços ao seu texto, use a entidade
de caractere &nbsp;.

148
Machine Translated by Google

Capítulo 21: Entidades de caracteres HTML

Entidades de caracteres comumente usadas

OBSERVAÇÃO
Os nomes de entidades diferenciam maiúsculas de minúsculas!

DESCRIÇÃO DO RESULTADO NOME DA ENTIDADE NÚMERO DA ENTIDADE

espaço não divisível &lt; &gt; &#160;

< menor que &#60;
> maior que e &#62;
& comercial &amp; &#38;
¢ cento &cent; &#162;
£ libra &libra; &#163;
¥ iene &ienes; &#165;
€ euro &euro; &#8364;

§ seção &seção; &#167;

© direitos &cópia; &#169;
® autorais registrados &reg; &#174;
marca registrada

Para uma referência completa de todas as entidades de caracteres, visite a Referência de Entidades
HTML do w3schools:

http://www.w3schools.com/tags/ref_entities.asp

149
Machine Translated by Google

Capítulo 22

Cabeçalho HTML e
Meta Elementos

Neste capítulo
ÿ Elemento Cabeça

ÿ Elemento Meta

Elemento Cabeça
O elemento head <head> contém informações gerais, também chamadas de meta-
informações, sobre um documento. Meta significa “informações sobre”. Você pode dizer
que meta-dados significam informações sobre dados, ou meta-informações significam
informações sobre informações. O elemento head inclui informações importantes, como o
título do documento, instruções de estilo e muito mais.

O que há dentro do elemento Head?

De acordo com o padrão HTML, apenas algumas tags são legais dentro da seção head.
As tags legais incluem o seguinte:
8 <base>

8 <título>

8 <meta>

8 <link>

8 <estilo>

8 <script>

Você aprendeu mais sobre as tags <link> e <style> no Capítulo 20, “Estilos HTML
CSS”.

Os elementos dentro do elemento <head> não são destinados a serem exibidos por um
navegador. Veja a seguinte construção ilegal:

150
Machine Translated by Google

Capítulo 22: Elementos Head e Meta HTML

Experimente você mesmo >>

<cabeça>

<p>Este é um texto</p> </head>

Neste exemplo, o navegador tem duas opções:

8 Exibe o texto porque ele está dentro de um elemento <p> .

8 Oculte o texto porque ele está dentro de um elemento <head> .

Como a Figura 22.1 demonstra, se você colocar um elemento HTML como <h1> ou <p> dentro de
um elemento head como este, a maioria dos navegadores o exibirá, mesmo que seja ilegal.

Figura 22.1

Os navegadores devem perdoar você por erros como esse? Nós não achamos. Outros sim.

título Tag
As informações do título do documento dentro de um elemento head não são exibidas na janela do
navegador, mas são usadas para indexação e catalogação. O resultado do código a seguir é
mostrado na Figura 22.2.

Experimente você mesmo >>

<html>

<cabeça>

<title>O título do documento está oculto</title>

</cabeçalho>

<body>
<p>Este texto é exibido</p> </body>

</html>

Figura 22.2

151
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Tag base O

exemplo ilustrado na Figura 22.3 demonstra como usar a tag <base> para permitir que todos
os links em uma página abram em uma nova janela.

Experimente você mesmo >>

<html>
<cabeça>

<base target="_blank"> </head>

<corpo>

<p>
<a href="http://www.w3schools.com"
target="_blank">Este link</a> será
carregado em uma nova janela porque o atributo target está definido como "_blank".

</p>

<p>
<a href="http://www.w3schools.com">
Este link</a>
também será carregado em uma nova janela, mesmo sem um atributo de destino
bute.
</p>

</corpo>
</html>

Figura 22.3

152
Machine Translated by Google

Capítulo 22: Elementos Head e Meta HTML

Etiquetas de cabeça

MARCAÇÃO DESCRIÇÃO

<cabeça> Define informações sobre o documento

<título> Define o título do documento

<base> Define uma URL base para todos os links em uma página
<link> Define uma referência de recurso

<meta> Define meta informação

<!DOCTYPE> Define o tipo de documento e informa ao navegador qual

versão da linguagem de marcação na qual a página foi escrita.
Esta tag vai antes da tag inicial <html> .

Uma lista completa de atributos legais para cada elemento está listada no w3schools Complete
Referência HTML online em:

http://www.w3schools.com/tags

Elemento Meta
Conforme discutido anteriormente na última seção, o elemento head contém informações gerais
(metainformações) sobre um documento.

O HTML também inclui um metaelemento <meta> que fica dentro do elemento head.
O propósito do elemento meta é fornecer meta-informações sobre o documento. Na maioria das vezes,
o elemento meta é usado para fornecer informações relevantes
para navegadores ou mecanismos de busca, como descrever o conteúdo do seu documento.

Os metaatributos no exemplo a seguir identificam o autor do documento, o editor e o software usado

para criar a página.
<html>

<cabeça>

<meta nome="autor"
conteúdo="Jan Egil Refsnes">

<meta name="revisado"
conteúdo="Michael Woodward,14/03/2010">

<meta nome="gerador"
(continua)

153
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua)
conteúdo="Microsoft FrontPage 5.0">

</cabeçalho>

</html>

Você pode ver uma lista completa dos atributos do metaelemento na Referência de tags
HTML 4.01 do w3schools.com:

http://www.w3schools.com/html/html_reference.asp

Palavras-chave para mecanismos de busca

As informações dentro de um metaelemento também podem descrever as palavras-chave do documento,
que são usadas pelos mecanismos de busca para encontrar sua página quando um usuário realiza uma
pesquisa pela palavra-chave.

Experimente você mesmo >>

<html>

<cabeça>

<meta name="description"
content="Exemplos de HTML">

<meta name="palavras-chave"
content="HTML, DHTML, CSS, XML, JavaScript, VBScript">

</cabeçalho>

<corpo>
<p>
Os meta atributos deste documento descrevem o documento e suas palavras-chave. </p> </
body>

</html>

154
Machine Translated by Google

Capítulo 22: Elementos Head e Meta HTML

A intenção dos atributos name e content é descrever o conteúdo de uma página, como:

<meta name="description" content="Tutoriais gratuitos na Web sobre

HTML, CSS, XML e SML" />
<meta name="palavras-chave" content="HTML, DHTML, CSS, XML,
JavaScript" />

Alguns mecanismos de busca na Web usarão os atributos <name> e <content> da meta tag para
indexar suas páginas. No entanto, como muitos Webmasters usaram meta tags para fazer spam,
como repetir palavras-chave para dar às páginas uma classificação de busca mais alta, alguns
mecanismos de busca pararam de usá-las completamente.

Você pode ler mais sobre mecanismos de busca no Tutorial de construção de sites
w3schools.com em:

http://www.w3schools.com/site/

Atributos Meta Desconhecidos

Às vezes, você verá metaatributos que são desconhecidos para você, como:

<meta name="segurança" content="baixo" />

Então você só precisa aceitar que isso é algo exclusivo do site ou do autor do site e que
provavelmente não tem relevância para você.

Redirecionar um usuário

Este exemplo demonstra como redirecionar um usuário se o endereço do seu site tiver mudado.

Experimente você mesmo >>

<html>
<cabeça>

<meta http-equiv="Atualizar"
content="5;url=http://www.w3schools.com"> </head>

<corpo>
<p>

Desculpe! Nós mudamos! A nova URL é: <a href="http://www. w3schools.com">http://

www.w3schools.com</a> </p>

(continua)

155
Machine Translated by Google

Aprenda HTML e CSS com w3schools

(continua)

<p>
Você será redirecionado para o novo endereço em cinco segundos.

</p>

<p>
Se você vir esta mensagem por mais de 5 segundos, clique no link acima!

</p>

</corpo>
</html>

OBSERVAÇÃO
O Consórcio W3 afirma que “Alguns agentes de usuário suportam o uso de
META para atualizar a página atual após um número especificado de segundos, com a
opção de substituí-la por uma URL diferente. Os autores não devem usar essa técnica
para encaminhar usuários para páginas diferentes, pois isso torna a página inacessível
para alguns usuários. Em vez disso, o encaminhamento automático de páginas deve ser
feito usando redirecionamentos do lado do servidor.” Para obter mais informações, visite o site do W3:

http://www.w3.org/TR/html4/struct/global.html#adef-http-equiv

156
Machine Translated by Google

Capítulo 23

Uniforme HTML
Recurso
Localizadores

Neste capítulo
ÿ Localizador Uniforme de Recursos (URL)

ÿ Esquemas de URL

ÿ Usando Links

Localizador Uniforme de Recursos (URL)

Algo chamado de localizador uniforme de recursos (URL) é usado para endereçar um
documento (ou outros dados) na World Wide Web. Quando você clica em um link em um
documento HTML, uma tag <a> subjacente aponta para um lugar (um endereço) na Web
com um valor de atributo href como este:

<a href="lastpage.htm">Última página</a>

O link lastpage.htm no exemplo é um link relativo ao site que você está navegando, e seu
navegador construirá um endereço da Web completo para acessar a página, como:

http://www.w3schools.com/html/lastpage.htm

Um endereço da Web completo segue estas regras de sintaxe:

scheme://host.domain:port/path/filename 8 O esquema

está definindo o tipo de serviço de Internet. O tipo mais comum é

http://www.

8 O domínio está definindo o nome de domínio da Internet como w3schools.com.

8 O host está definindo o host do domínio. Se omitido, o host padrão para http é
www.

8 O :port está definindo o número da porta no host. O número da porta é nor-

malmente omitido. O número de porta padrão para http é 80.

157
Machine Translated by Google

Aprenda HTML e CSS com w3schools

8 O caminho está definindo um caminho (um subdiretório) no servidor. Se o caminho for omitido,
o recurso (o documento) deve estar localizado no diretório raiz da Web
site.

8 O nome do arquivo define o nome de um documento. O nome do arquivo padrão pode

seja default.asp, index.html ou outra coisa dependendo das configurações do
Servidor web.

Esquemas de URL
Alguns exemplos dos esquemas mais comuns podem ser encontrados na tabela a seguir:

ESQUEMAS ACESSO

arquivo
um arquivo no seu PC local

ftp um arquivo em um servidor FTP

http um arquivo em um servidor World Wide Web

gopher um arquivo em um servidor Gopher

notícias um grupo de notícias Usenet

telnet uma conexão Telnet

WAIS um arquivo em um servidor WAIS

Acessando um grupo de notícias

O seguinte código HTML:

<a href="news:alt.html">Grupo de notícias HTML</a>

cria um link para um grupo de notícias.

Baixando com FTP

O seguinte código HTML:

<a href="ftp://www.w3schools.com/ftp/winzip.exe">Baixar
WinZip</a>
cria um link para um diretório FTP. (O link não funciona. Não tente. É apenas um
exemplo. w3schools não tem realmente um diretório FTP.)

Link para seu sistema de e-mail

O seguinte código HTML:

<a href="mailto:[email protected]">alguém@w3schools.
com</a>
cria um link que abre uma nova mensagem de e-mail endereçada ao endereço no link.

158
Machine Translated by Google

Capítulo 23: Localizadores Uniformes de Recursos HTML

Usando Links
O código de exemplo a seguir mostra como usar os três tipos de links de URL descritos.
Os resultados do código aparecem na Figura 23.1.

Experimente você mesmo >>

<html>
<body>
<p><a href="news:alt.html">Grupo de notícias HTML</a></p>

<p><a href="ftp://www.w3schools.com/ftp/winzip.exe">Baixar
WinZip</a></p>

<p><a href="mailto:[email protected]">someone@w3schools.
com</a></p>
</corpo>
</html>

Figura 23.1

159
Machine Translated by Google

Capítulo 24

Scripts HTML
Neste capítulo
ÿ Insira um script em uma página
ÿ Como lidar com navegadores mais antigos

ÿ Etiqueta noscript

ÿ Etiquetas de script

Inserir um script em uma página

Adicione scripts a páginas HTML para torná-las mais dinâmicas e interativas. Um script em
HTML é definido com a tag <script> .

Este exemplo demonstra como inserir um script em seu documento HTML.

Observe que você terá que usar o atributo type para especificar a linguagem de script.
O script a seguir produz a saída mostrada na Figura 24.1.

Experimente você mesmo >>

<html>
<body>
<script type="text/javascript">
document.write("Olá, mundo!") </script>

</corpo>
</html>

Figura 24.1

Para aprender mais sobre scripts em HTML, leia o tutorial de JavaScript da w3schools em:

http://www.w3schools.com/js/

160
Machine Translated by Google

Capítulo 24: Scripts HTML

Como lidar com navegadores mais antigos

Um navegador que não reconhece a tag <script> exibirá o conteúdo da tag
<script> como texto na página. Para evitar que o navegador faça isso, você deve
ocultar o script em tags de comentário. Um navegador antigo (que não reconhece
a tag <script> ) ignorará o comentário e não escreverá o conteúdo da tag na
página. Por outro lado, um novo navegador entenderá que o script deve ser
executado, mesmo que esteja cercado por tags de comentário.
JavaScript: <script
type="text/javascript"> <!— document.write("Olá,

mundo!") //--> </script>

VBScript:
<script type="text/vbscript"> <!— document.write("Olá,

mundo!") '-->

</script>

O exemplo a seguir demonstra como evitar que navegadores que não suportam
scripts exibam texto involuntariamente. Os resultados aparecem na Figura 24.2.

Experimente você mesmo >>

<html>

<corpo>

<script tipo="texto/javascript"> <!--

document.write("Se isso for exibido, seu navegador suporta scripts!") //--> </script> <noscript>Não há
suporte para

JavaScript!</
noscript>

</corpo> </
html>

Figura 24.2

161
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Tag sem script

Além de ocultar o script dentro de um comentário, você também pode adicionar uma tag <noscript> .

A tag <noscript> é usada para definir um texto alternativo caso um script NÃO seja executado.
Esta tag é usada para navegadores que reconhecem a tag <script> , mas não suportam o script dentro
dela, então esses navegadores exibirão o texto dentro da tag <noscript> . No entanto, se um navegador
suportar o script dentro da tag <script> , ele ignorará a tag <noscript> .

JavaScript:
<script type="text/javascript">
<!--
document.write("Olá, mundo!") //--> </
script>
<noscript>Seu
navegador não suporta JavaScript!</
sem script>

VBScript:
<tipo de script="texto/vbscript">
<!—
document.write("Olá, mundo!")
'-->
</script>
<noscript>Seu navegador não suporta VBScript!</noscript>

Etiquetas de script
MARCAÇÃO DESCRIÇÃO

<script> Define um script

<noscript> Define um texto alternativo se o script não for executado Define

<objeto> um objeto incorporado Define as

<parâmetro> configurações de tempo de execução (parâmetros) para um

<applet> objeto Obsoleto. Use <object> em vez disso

162
Machine Translated by Google

Capítulo 25

Padrão HTML
Atributos

Neste capítulo
ÿ Atributos principais

ÿ Atributos da linguagem

ÿ Atributos do teclado

As tags HTML podem ter atributos. Os atributos especiais para cada tag estão listados em
cada descrição de tag. Os atributos listados aqui são os atributos principais e de linguagem
que são padrão para todas as tags (com algumas exceções).

Atributos principais
Não é válido nos elementos base, head, html, meta, param, script, style e title.
mentos.

ATRIBUIR VALOR DESCRIÇÃO

aula class_rule ou style_rule A classe do elemento

eu ia id_name Um id único para o elemento

estilo definição_de_estilo Uma definição de estilo inline

título texto_dica_de_ferramenta Um texto para exibir em uma dica de ferramenta

Atributos de linguagem
Não é válido nos elementos base, br, frame, frameset, hr, iframe, param e script.
mentos.

ATRIBUIR VALOR DESCRIÇÃO

Direto
ltr | rtl Define a direção do texto

língua código_do_idioma Define o código do idioma

163
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Atributos do teclado
ATRIBUIR VALOR DESCRIÇÃO

chave de acesso
personagem Define um atalho de teclado para acessar um elemento
índice de tabulação número Define a ordem de tabulação de um elemento

164
Machine Translated by Google

Capítulo 26

Evento HTML
Atributos

Neste capítulo
ÿ Eventos de janela

ÿ Eventos de elementos de formulário

ÿ Eventos de teclado

ÿ Eventos do Mouse

Uma novidade no HTML 4.0 é a capacidade de permitir que eventos HTML disparem ações no
navegador, como iniciar um JavaScript quando um usuário clica em um elemento HTML. As tabelas a
seguir listam atributos que podem ser inseridos em tags HTML para definir ações de eventos.

Se você quiser aprender mais sobre programação com esses eventos, você deve estudar
os tutoriais da w3schools sobre JavaScript e DHTML:

JavaScript: http://www.w3schools.com/js

DHTML: http://www.w3schools.com/dhtml

Eventos de janela
Esses atributos são válidos apenas em elementos body e frameset .

DESCRIÇÃO DO VALOR DO ATRIBUTO

carregar roteiro Script a ser executado quando um documento é carregado

ao descarregar roteiro Script a ser executado quando um documento é descarregado

165
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Eventos de elementos de formulário

Esses atributos são válidos somente em elementos de formulário .

DESCRIÇÃO DO VALOR DO ATRIBUTO

onchange roteiro Script a ser executado quando o elemento muda

onsubmit roteiro Script a ser executado quando o formulário for enviado

reiniciar roteiro Script a ser executado quando o formulário for reiniciado

ao selecionar roteiro Script a ser executado quando o elemento for selecionado

em desfoque
roteiro Script a ser executado quando o elemento perde o foco

em foco roteiro Script a ser executado quando o elemento recebe foco

Eventos de teclado
Esses atributos não são válidos nos elementos base, bdo, br, frame, frameset, head, html, iframe, meta, param,
script, style e title .

DESCRIÇÃO DO VALOR DO ATRIBUTO

onkeydown roteiro O que fazer quando a tecla é pressionada

onkeypress roteiro O que fazer quando uma tecla é pressionada e liberada

onkeyup roteiro O que fazer quando a chave é liberada

Eventos do Mouse
Esses atributos não são válidos nos elementos base, bdo, br, frame, frameset, head, html, iframe, meta, param,
script, style e title .

DESCRIÇÃO DO VALOR DO ATRIBUTO

ao clicar script O que fazer com um clique do mouse

clique ondbl script O que fazer em um clique duplo do mouse

onmousedown script script script O que fazer quando o botão do mouse é pressionado

emmousemove O que fazer quando o ponteiro do mouse se move

ao retirar o mouse O que fazer quando o ponteiro do mouse se move para fora
de um elemento

ao passar o mouse roteiro O que fazer quando o ponteiro do mouse se move

um elemento

no mouseup roteiro O que fazer quando o botão do mouse é liberado

166
Machine Translated by Google

Capítulo 27

URL HTML
Codificação

Neste capítulo
ÿ Codificação de URL

ÿ Caracteres comuns de codificação de URL

Codificação de URL
A codificação de URL converte caracteres em um formato que pode ser transmitido com segurança pela
Internet.

Como você aprendeu no Capítulo 23, "HTML Uniform Resource Locators", navegadores da Web solicitam
páginas de servidores da Web usando uma URL. A URL é o endereço de uma página da Web como http://
www.w3schools.com.

URLs só podem ser enviadas pela Internet usando o conjunto de caracteres ASCII. ASCII é um conjunto
de caracteres de 7 bits contendo 128 caracteres. Ele contém os números de 0 a 9, as letras maiúsculas e
minúsculas do inglês de A a Z e alguns caracteres especiais.

Consulte o Apêndice G, "Referência HTML ISO-8859-1", para obter o conjunto completo de

caracteres ASCII.

Como URLs geralmente contêm caracteres fora do conjunto ASCII, a URL precisa ser convertida. A
codificação de URL converte a URL em um formato ASCII válido. Ela substitui caracteres ASCII inseguros
por "%" seguidos por dois dígitos hexadecimais correspondentes aos valores de caracteres no conjunto
de caracteres ISO-8859-1. ISO-8859-1 é o conjunto de caracteres padrão na maioria dos navegadores.

Os primeiros 128 caracteres do ISO-8859-1 são o conjunto de caracteres ASCII original (os números de 0
a 9, o alfabeto inglês maiúsculo e minúsculo e alguns caracteres especiais). A parte mais alta do
ISO-8859-1 (códigos de 160 a 255) contém os caracteres usados em países da Europa Ocidental e alguns
caracteres especiais comumente usados.

Consulte o Apêndice H, "Referência de entidades de símbolos HTML" para obter o conjunto

completo de caracteres ISO-8859-1.

167
Machine Translated by Google

Aprenda HTML e CSS com w3schools

URLs não podem conter espaços. A codificação de URL normalmente substitui um espaço por um +
sinal.

Caracteres comuns de codificação de URL

PERSONAGEM CODIFICAÇÃO DE URL

€ %80

£ %A3

© %A9

® %E

UM %C0

Á %C1

 %C2

UM %C3

UM %C4

UM %C5

espaço %20

Veja a Referência de Código de Linguagem HTML do w3schools para o conteúdo completo

Referência de codificação de URL.

168
Machine Translated by Google

Capítulo 28

Transforme seu PC
em um servidor we

Neste capítulo
ÿ Seu PC Windows como um servidor Web

ÿ Instalando o IIS no Windows Vista e Windows 7

ÿ Instalando o IIS no Windows XP e Windows 2000

ÿ Testando sua Web

ÿ Seu próximo passo: um servidor web profissional

Seu PC Windows como um servidor Web

Se você quiser que outras pessoas visualizem suas páginas, você deve publicá-las. Para publicar seu
trabalho, você deve salvar suas páginas em um servidor Web.

Seu próprio PC pode atuar como um servidor Web se você instalar o Internet Information Server (IIS)
ou o Personal Web Server (PWS). O IIS ou o PWS transformam seu computador em um servidor Web.
O Microsoft IIS e o PWS são componentes de servidor Web gratuitos.

Os usuários do Mac OS X também podem executar seu próprio servidor web local sim-
OBSERVAÇÃO : marque a opção "Compartilhamento da Web" na preferência de
Compartilhamento de Sistemas e, em seguida, cole os arquivos .html/.css/..Web na pasta "Sites".
Veja: http://docs.info.apple.com/article.html?path=Mac/10.6/en/8236.html

Servidor de Informações da Internet (IIS)

IIS é um conjunto de serviços baseados na Internet para servidores criados pela Microsoft para
uso com o Microsoft Windows. O IIS vem com o Windows 2000, XP, Vista e 7. Ele também está
disponível para o Windows NT.

O IIS é fácil de instalar e ideal para desenvolver e testar aplicativos Web. O IIS inclui Active Server
Pages (ASP), um padrão de script do lado do servidor que pode ser usado para criar aplicativos Web
dinâmicos e interativos.

169
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Se você quiser saber mais sobre ASP, veja o tutorial ASP da w3schools:

http://www.w3schools.com/asp

Servidor Web Pessoal (PWS)

O PWS é para sistemas Windows mais antigos, como Windows 95, 98 e NT. O PWS é fácil de instalar
e pode ser usado para desenvolver e testar aplicativos Web, incluindo ASP.

OBSERVAÇÃO:
Não recomendamos executar o PWS para nada além de treinamento.
Está desatualizado e tem problemas de segurança.

Versões do Windows Web Server

Nem todas as versões do Windows suportam IIS e/ou PWS, mas a maioria suporta. Aqui está uma lista
relativamente completa.

8 O Windows 7 Home, Professional, Enterprise e Ultimate vêm com o IIS 7.5

8 O Windows Vista Business, Enterprise e Ultimate vêm com o IIS 7

8 O Windows Vista Home Premium vem com o IIS 7

8 O Windows Vista Home Edition não oferece suporte a PWS ou IIS

8 O Windows XP Professional vem com o IIS 5.1

8 O Windows XP Home Edition não oferece suporte a IIS ou PWS

8 O Windows 2000 Professional vem com o IIS 5.0

8 O Windows NT Professional vem com o IIS 3 e também oferece suporte ao IIS 4

8 O Windows NT Workstation oferece suporte ao PWS e ao IIS 3

8 O Windows Me não oferece suporte a PWS ou IIS

8 O Windows 98 vem com PWS

8 O Windows 95 oferece suporte ao PWS

Instalando o IIS no Windows Vista e

Windows 7
Siga estas etapas para instalar o IIS no Windows Vista ou 7:

1. Abra o Painel de Controle no menu Iniciar.

2. Clique duas vezes em Programas e Recursos.

170
Machine Translated by Google

Capítulo 28: Transforme seu PC em um servidor web

3. Clique em “Ativar ou desativar recursos do Windows” (um link à esquerda).

4. Marque a caixa de seleção Serviços de Informações da Internet (IIS) e clique em OK.

Após instalar o IIS, certifique-se de executar o Microsoft Update para instalar todos os patches para bugs e
problemas de segurança. Teste sua Web, conforme explicado mais adiante neste capítulo.

Instalando o IIS no Windows XP e

Windows 2000
Siga estas etapas para instalar o IIS no Windows XP e Windows 2000:

1. No menu Iniciar, clique em Configurações e selecione Painel de Controle.

2. Clique duas vezes em Adicionar ou Remover Programas.

3. Clique em Adicionar/Remover Componentes do Windows.

4. Clique em Serviços de Informações da Internet (IIS).

5. Clique em Detalhes.

6. Marque a caixa de seleção Serviço World Wide Web e clique em OK.

7. Na seleção de componentes do Windows, clique em Avançar para instalar o IIS.

Após instalar o IIS, certifique-se de executar o Microsoft Update para instalar todos os patches para bugs e
problemas de segurança. Teste sua Web, conforme descrito a seguir.

Testando sua Web

Depois de instalar o IIS ou o PWS, siga estas etapas:

1. Procure uma nova pasta chamada Inetpub no seu disco rígido.

2. Abra a pasta Inetpub e encontre uma pasta chamada wwwroot.

3. Crie uma nova pasta em wwwwroot e dê a ela um nome como “MyWeb”.

4. Escreva algum código ASP e salve o arquivo como test1.asp na nova pasta.

5. Verifique se o seu servidor Web está em execução.

6. Abra seu navegador e digite “http://localhost/MyWeb/test1.asp” para visualizar seu

primeira página da Web.

NOTA Procure o símbolo do IIS (ou PWS) no seu menu Iniciar ou barra de tarefas.
O programa tem funções para iniciar e parar o servidor Web, desabilitar e habilitar
o ASP e muito mais.

171
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Instalando o PWS no Windows 95, 98 e Windows

NT
Siga estas etapas para instalar o PWS no Windows 95, 98 e Windows NT:

8 Windows 98. Abra a pasta Add-ons no CD do Windows, localize o PWS

pasta e clique duas vezes em runsetup.exe para instalar o PWS.

8 Windows 95 ou Windows NT. Baixe o Windows NT 4.0 Option Pack

da Microsoft e instale o PWS.

Teste sua Web conforme descrito anteriormente.

Seu próximo passo: uma web profissional

Servidor
Se você não quiser usar o PWS ou o IIS, deverá enviar seus arquivos para um servidor público.
A maioria dos provedores de serviços de Internet (ISPs) oferecerá hospedagem para suas páginas da Web. Se o seu
Se o seu empregador tiver um servidor de Internet, você pode pedir para ele hospedar seu site.

Se você realmente leva isso a sério, você deve instalar seu próprio servidor de Internet.
Antes de selecionar um ISP, leia o Tutorial de hospedagem web da w3schools em:

http://www.w3schools.com/hosting

172
Machine Translated by Google

Capítulo 29

HTML e CSS
Resumo

Você aprendeu HTML, e agora?

Este tutorial ensinou como usar HTML para criar seu próprio site.

HTML é a linguagem de marcação universal para a Web. HTML permite formatar texto, adicionar
gráficos, criar links, inserir formulários, quadros e tabelas, e assim por diante, e salvar tudo em
um arquivo de texto que qualquer navegador pode ler e exibir.

A chave do HTML são as tags, que indicam qual conteúdo será exibido.

Para mais informações sobre HTML, o site w3schools.com oferece duas ferramentas úteis que
você pode estudar:

Exemplos de HTML: http://www.w3schools.com/html/html_examples.asp

Referência HTML: http://www.w3schools.com/tags

O que vem a seguir?

O próximo passo é aprender CSS.

CSS
CSS é usado para controlar o estilo e o layout de várias páginas da Web de uma só vez.
Com CSS, toda a formatação pode ser removida do documento HTML e armazenada em um
arquivo separado. CSS dá a você controle total do layout, sem bagunçar o conteúdo do
documento.

Você pode aprender mais sobre estilos e CSS no livro complementar Aprenda CSS
e HTML com a w3schools ou visitando http://www.w3schools.com/css.

173
Machine Translated by Google
Machine Translated by Google

Seção III
Apêndices

ÿ Apêndice A: Referência HTML 4.01

ÿ Apêndice B: Atributos padrão HTML

ÿ Apêndice C: Atributos de eventos padrão HTML

ÿ Apêndice D: Elementos HTML e Doctypes Válidos

ÿ Apêndice E: Conjuntos de caracteres HTML

ÿ Apêndice F: Referência HTML ASCII

ÿ Apêndice G: Referência HTML ISO-8859-1

ÿ Apêndice H: Referência de entidades de símbolos HTML

ÿ Apêndice I: Referência de codificação de URL HTML

Machine Translated by Google
Machine Translated by Google

Apêndice A

Referência
HTML 4.01

Se você visitar esta referência no site w3schools, encontrará links para cada item na coluna
Propriedade que apontam para sintaxe, exemplos, suporte ao navegador e
breve:

http://www.w3schools.com/tags

DTD

Isso indica em qual DTD HTML 4.01 a tag é permitida. S=Strict, T=Transitional e F=Frameset.

Para obter mais informações sobre DTDs, consulte o Capítulo 19, “Por que usar HTML
4.0?”

Para obter mais informações sobre DTDs, visite a Declaração HTML <!DOCTYPE> de
referência do w3schools em http://www.w3schools.com/tags/tag_doctype.asp.

Ordenado alfabeticamente
MARCAÇÃO DESCRIÇÃO DTD

<!--...--> Define um comentário STF

<!DOCTYPE> Define o tipo de documento STF

<um> Define uma âncora STF

<abrev> Define uma abreviação STF

<acrônimo> Define uma sigla STF

<endereço> Define informações de contato do autor/ STF

proprietário de um documento

177
Machine Translated by Google

Aprenda HTML e CSS com w3schools

MARCAÇÃO DESCRIÇÃO DTD

<aplicativo> Obsoleto. Define um applet incorporado TF

<área /> Define uma área dentro de um mapa de imagem STF

<b> Define texto em negrito STF

<base /> Define um endereço padrão ou um alvo padrão STF

para todos os links em uma página

<fonte base /> Obsoleto. Define uma fonte, cor ou tamanho TF

padrão para o texto em uma página

<bdo> Define a direção do texto STF

Define texto grande STF

<grande> <bloco Define uma citação longa Define STF

de o corpo do documento Define uma STF

citação> <corpo> <br /> quebra de linha única Define um STF

<botão> botão de pressão Define STF

<legenda> uma legenda de tabela STF

<centro> Obsoleto. Define texto centralizado TF

<citar> Define uma citação STF

<código> Define texto de código de computador STF

<col /> Define valores de atributos para uma ou mais STF

colunas em uma tabela

<grupocol> Define um grupo de colunas em uma tabela para STF

formatação
<dd> Define uma descrição de um termo em uma STF
lista de definições

<dele> Define texto excluído STF

<dfn> Define um termo de definição STF

<diretório>
Obsoleto. Define uma lista de diretórios TF

<div> Define uma seção em um documento STF

<dl> Define uma lista de definições STF

<dt> Define um termo (um item) em uma lista de STF

definições

<em> Define texto enfatizado STF

<conjunto de campos> Define uma borda ao redor dos elementos em um STF

formulário

<fonte> Obsoleto. Define fonte, cor e tamanho para texto TF

<formulário> Define um formulário HTML para entrada do usuário STF

178
Machine Translated by Google

Apêndice A: Referência HTML 4.01

MARCAÇÃO DESCRIÇÃO DTD

<quadro /> Define uma janela (um quadro) em um conjunto de quadros F

<conjunto de quadros> Define um conjunto de quadros F

<h1> para <h6> Define títulos HTML STF

<cabeça> Define informações sobre o documento STF

mento

<hr /> Define uma linha horizontal STF

<html> Define um documento HTML STF

<i> Define texto em itálico STF

<iframe> Define um quadro embutido TF

<img /> Define uma imagem STF

<entrada /> Define um controle de entrada STF

<em> Define o texto inserido STF

<isindex> Obsoleto. Define um índice pesquisável relacionado TF

a um documento

<kbd> Define o texto do teclado STF

<rótulo> Define um rótulo para um elemento de entrada STF

<legenda> Define uma legenda para um elemento fieldset STF

<li> Define um item de lista STF

<link /> Define a relação entre um documento e um STF

recurso externo

<mapa> Define um mapa de imagem STF

<cardápio> Obsoleto. Define uma lista de menu TF

<meta /> Define metadados sobre um documento HTML STF

<sem quadros> Define um conteúdo alternativo para usuários TF

que não suportam frames

<noscript> Define um conteúdo alternativo para usuários que STF

não oferecem suporte a scripts do lado do cliente

<objeto> Define um objeto incorporado STF

<ol> Define uma lista ordenada STF

<grupo de opções> Define um grupo de opções relacionadas em uma STF

lista de seleção

<opção> Define uma opção em uma lista de seleção STF

<p> Define um parágrafo STF

<param /> Define um parâmetro para um objeto STF

<pre> Define texto pré-formatado STF

179
Machine Translated by Google

Aprenda HTML e CSS com w3schools

MARCAÇÃO DESCRIÇÃO DTD

<q> Define uma citação curta STF

<s> Obsoleto. Define texto tachado TF

<amostra> Define código de computador de STF

<script> exemplo Define um script do lado STF

<selecionar> do cliente Define uma lista de seleção (lista suspensa) STF

<pequeno> Define texto pequeno STF

<span> Define uma seção em um documento STF

<greve> Obsoleto. Define texto tachado TF

<forte> Define texto forte Define STF

<estilo> informações de estilo para um documento STF

mento

<sub> Define texto subscrito STF

<sup> Define texto sobrescrito STF

<tabela> Define uma tabela STF

<corpo> Agrupa o conteúdo do corpo em uma tabela STF

<td> Define uma célula em uma tabela STF

<área de texto> Define um controle de entrada de texto multilinha STF

<tpé> Agrupa o conteúdo do rodapé em uma tabela STF

<º> Define uma célula de cabeçalho em uma tabela STF

<cabeça> Agrupa o conteúdo do cabeçalho em uma tabela STF

<título> Define o título de um documento STF

<tr> Define uma linha em uma tabela STF

<tt> Define texto de teletipo STF

<você>
Obsoleto. Define texto sublinhado TF

<ul> Define uma lista não ordenada STF

<var> Define uma parte variável de um texto STF

<xmp> Obsoleto. Define texto pré-formatado

Ordenado por função

MARCAÇÃO DESCRIÇÃO DTD

Básico
<!DOCTYPE> Define o tipo de documento STF

<html> Define um documento HTML STF

<corpo> Define o corpo do documento STF

180
Machine Translated by Google

Apêndice A: Referência HTML 4.01

MARCAÇÃO DESCRIÇÃO DTD

<h1> para <h6> Define títulos HTML STF

<p> Define um parágrafo STF

<br /> Insere uma única quebra de linha STF

<hr /> Define uma linha horizontal STF

<!--...--> Define um comentário STF

Formatação
<acrônimo> Define uma sigla STF

<abrev> Define uma abreviação STF

<endereço> Define informações de contato do autor/ STF

proprietário de um documento

<b> Define texto em negrito STF

<bdo> Define a direção do texto STF

<grande> Define texto grande STF

<bloco de citação> Define uma citação longa STF

<centro> Obsoleto. Define texto centralizado TF

<citar> Define uma citação STF

<código> Define texto de código de computador STF

<dele> Define texto excluído STF

<dfn> Define um termo de definição STF

<em> Define texto enfatizado. STF

<fonte> Obsoleto. Define fonte, cor e tamanho para texto. TF

<i> Define texto em itálico STF

<em> Define o texto inserido STF

<kbd> Define texto do teclado STF

<pre> Define texto pré-formatado STF

<q> Define uma citação curta STF

<s> Obsoleto. Define texto tachado TF

<amostra> Define código de computador de STF

<pequeno> amostra Define texto pequeno STF

<greve> Obsoleto. Define texto tachado TF

<forte> Define texto forte Define STF

<sub> texto subscrito Define texto STF

<sup> sobrescrito Define texto teletipo STF

<tt> STF

181
Machine Translated by Google

Aprenda HTML e CSS com w3schools

MARCAÇÃO DESCRIÇÃO DTD

<você>
Obsoleto. Define texto sublinhado. Define uma TF

<var> parte variável de um texto Obsoleto. Define STF

<xmp> texto pré-formatado

Formulários

<formulário> Define um formulário HTML para entrada do usuário STF

<entrada /> Define um controle de entrada STF

<área de texto> Define um controle de entrada de texto multilinha STF

<botão> Define um botão de pressão STF

<selecionar> Define uma lista de seleção (lista suspensa) STF

<grupo de opções> Define um grupo de opções relacionadas em uma STF

lista de seleção

<opção> Define uma opção em uma lista de seleção STF

<rótulo> Define um rótulo para um elemento de entrada STF

<conjunto de campos> Define uma borda ao redor dos elementos em um STF

formulário

<legenda> Define uma legenda para um elemento fieldset STF

<isindex> Obsoleto. Define um índice pesquisável relacionado a TF

um documento

Molduras
<quadro /> Define uma janela (um quadro) em um conjunto de quadros F

<conjunto de quadros> Define um conjunto de quadros F

<sem quadros> Define um conteúdo alternativo para usuários que TF

não suportam frames

<iframe> Define um quadro embutido TF

Imagens

<img /> Define uma imagem STF

<mapa> Define um mapa de imagem STF

<área /> Define uma área dentro de um mapa de imagem STF

Ligações

<um> Define uma âncora STF

<link /> Define a relação entre um documento e um STF

recurso externo

Listas
<ul> Define uma lista não ordenada STF

<ol> Define uma lista ordenada STF

182
Machine Translated by Google

Apêndice A: Referência HTML 4.01

MARCAÇÃO DESCRIÇÃO DTD

<li> Define um item de lista STF

<diretório>
Obsoleto. Define uma lista de diretórios TF

<dl> Define uma lista de definições STF

<dt> Define um termo (um item) em uma lista de definições STF

<dd> Define uma descrição de um termo em uma STF

lista de definições

<cardápio> Obsoleto. Define uma lista de menu TF

Tabelas
<tabela> Define uma tabela STF

<legenda> Define uma legenda de tabela STF

<th> Define uma célula de cabeçalho em uma tabela STF

<tr> Define uma linha em uma tabela STF

<td> Define uma célula em uma tabela STF

<cabeça> Agrupa o conteúdo do cabeçalho em uma tabela STF

<corpo> Agrupa o conteúdo do corpo em uma tabela STF

<tpé> Agrupa o conteúdo do rodapé em uma tabela STF

<col /> Define valores de atributos para uma ou mais colunas STF
em uma tabela

<grupocol> Define um grupo de colunas em uma tabela para STF

formatação

Estilos

<estilo> Define informações de estilo para um documento STF

mento

<div> Define uma seção em um documento STF

<período> Define uma seção em um documento STF

MetaInformações

<cabeça> Define informações sobre o documento STF

mento

<título> Define o título do documento STF

<meta> Define metadados sobre um documento HTML STF

<base /> Define um endereço padrão ou um alvo padrão STF

para todos os links em uma página

<fonte base /> Obsoleto. Define uma fonte, cor ou tamanho TF

padrão para o texto em uma página

183
Machine Translated by Google

Aprenda HTML e CSS com w3schools

MARCAÇÃO DESCRIÇÃO DTD

Programação
<script> Define um script do lado do cliente STF

<noscript> Define um conteúdo alternativo para usuários que STF

não oferecem suporte a scripts do lado do cliente

<aplicativo> Obsoleto. Define um applet incorporado TF

<objeto> Define um objeto incorporado STF

<param /> Define um parâmetro para um objeto STF

184
Machine Translated by Google

Apêndice B

HTML
Padrão
Atributos

Os atributos listados neste apêndice são padrões. Eles são suportados por todos os HTML e tags com algumas
exceções.

Se você visitar esta referência no site w3schools, encontrará links para cada item na coluna Atributo que apontam
para sintaxe, exemplos, dicas, suporte ao navegador e assim por diante:

http://www.w3schools.com/tags/ref_standardattributes.asp

Atributos principais
Não é válido nos elementos base, head, html, meta, param, script, style e title.
mentos

ATRIBUIR VALOR DESCRIÇÃO

aula nome da classe Especifica um nome de classe para um elemento

eu ia eu ia
Especifica um id exclusivo para um elemento

estilo definição_de_estilo Especifica um estilo embutido para um elemento

título texto Especifica informações extras sobre um elemento

185
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Atributos de linguagem
Não é válido nos elementos base, br, frame, frameset, hr, iframe, param e script.
mentos

ATRIBUIR VALOR DESCRIÇÃO

Direto ltr Especifica a direção do texto para o conteúdo

rtl em um elemento

língua código_de_idioma Especifica um código de idioma para o

conteúdo em um elemento. Referência de código
de idioma

Para uma referência completa do código de idioma, visite o site w3schools: http://www.w3schools.com/
tags/ref_language_codes.asp

Atributos do teclado
DESCRIÇÃO DO VALOR DO ATRIBUTO

chave de acesso personagem Especifica um atalho de teclado para acessar um

elemento

índice de tabulação número Especifica a ordem de tabulação de um elemento

186
Machine Translated by Google

Apêndice C

Padrão HTML
Atributos do evento
O HTML 4 adicionou a capacidade de permitir que eventos acionem ações em um navegador, como iniciar um JavaScript
quando um usuário clica em um elemento.

Para saber mais sobre eventos de programação, leia Aprenda JavaScript e Ajax com w3schools, também
da Wiley Publishing, ou visite o tutorial JavaS-cript em www.w3schools.com/js.

Não deixe de visitar também o tutorial DHTML em www.w3schools.com/dhtml

As tabelas a seguir listam os atributos de eventos padrão que podem ser inseridos em
elementos HTML para definir ações de eventos.

Eventos de corpo e frameset

Esses atributos só podem ser usados em <body> ou <frameset>:

DESCRIÇÃO DO VALOR DO ATRIBUTO

carregar roteiro Script a ser executado quando um documento é carregado

ao descarregar roteiro Script a ser executado quando um documento é descarregado

Eventos de formulário
Esses atributos podem ser usados em elementos de formulário .

DESCRIÇÃO DO VALOR DO ATRIBUTO

em desfoque
roteiro Script a ser executado quando um elemento perde o foco

em troca roteiro Script a ser executado quando um elemento muda

em foco roteiro Script a ser executado quando um elemento recebe foco

reiniciar roteiro Script a ser executado quando um formulário for reiniciado

ao selecionar roteiro Script a ser executado quando um elemento é selecionado

em enviar roteiro Script a ser executado quando um formulário é enviado

187
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Eventos de Imagem
Este atributo pode ser usado com o elemento img .

DESCRIÇÃO DO VALOR DO ATRIBUTO

abortar roteiro Script a ser executado quando o carregamento de uma imagem

for interrompido

Eventos de teclado
Válido em todos os elementos, exceto base, bdo, br, frame, frameset, head,
html, iframe, meta, param, script, style e title.

DESCRIÇÃO DO VALOR DO ATRIBUTO

onkeydown roteiro Script a ser executado quando uma tecla for pressionada

onkeypress roteiro Script a ser executado quando uma tecla é pressionada e liberada

em uma tecla roteiro Script a ser executado quando uma tecla for liberada

Eventos do Mouse
Válido em todos os elementos, exceto base, bdo, br, frame, frameset, head,
html, iframe, meta, param, script, style e title.

DESCRIÇÃO DO VALOR DO ATRIBUTO

ao clicar script Script para ser executado com um clique do mouse

clique ondbl script Script para ser executado em um clique duplo do mouse

onmousedown script onmousemove Script a ser executado quando o botão do mouse for clicado

script script Script a ser executado quando o ponteiro do mouse se move

ao retirar o mouse Script a ser executado quando o ponteiro do mouse sai de um

elemento

ao passar o mouse roteiro Script a ser executado quando o ponteiro do mouse se move
sobre um elemento

no mouseup roteiro Script a ser executado quando o botão do mouse for liberado

188
Machine Translated by Google

Apêndice D

HTML
Elementos e
Tipos de documentos válidos

Se você visitar esta referência no site w3schools, encontrará links para cada item na coluna Tag que apontam
para sintaxe, exemplos, dicas, suporte ao navegador e
breve:

www.w3schools.com/tags/tag_doctype.asp

Para obter mais informações sobre DTDs, consulte o Capítulo 19, “Por que usar HTML 4.0?”

Para mais informações sobre DTDs, visite a referência w3schools “HTML <!DOC-TYPE> Declaration” em:

www.w3schools.com/tags/tag_doctype.asp.

A tabela a seguir lista todos os elementos HTML e define em quais declarações de tipo de documento (DTDs)
cada elemento aparece.

MARCAÇÃO HTML 4.01

TRANSITÓRIA RIGOROSA CONJUNTO DE QUADROS

<um> Sim Sim Sim

<abrev> Sim Sim Sim

<acrônimo> Sim Sim Sim

<endereço> Sim Sim Sim

<aplicativo> Sim Não Sim

<área /> Sim Sim Sim

<b> Sim Sim Sim

<base /> Sim Sim Sim

<fonte base /> Sim Não Sim

<bdo> Sim Sim Sim

189
Machine Translated by Google

Aprenda HTML e CSS com w3schools

MARCAÇÃO HTML 4.01

TRANSITÓRIA RIGOROSA CONJUNTO DE QUADROS

<blockquote> Sim Sim Sim

<corpo> Sim Sim Sim

<br /> Sim Sim Sim

<botão> Sim Sim Sim

<legenda> Sim Sim Sim

<centro> Sim Não Sim

<citar> Sim Sim Sim

<código> Sim Sim Sim

<col /> Sim Sim Sim

<grupocol> Sim Sim Sim

<dd> Sim Sim Sim

<dele> Sim Sim Sim

<dfn> Sim Sim Sim

<diretório> Sim Não Sim

<div> Sim Sim Sim

<dl> Sim Sim Sim

<dt> Sim Sim Sim

<em> Sim Sim Sim

<conjunto de campos> Sim Sim Sim

<fonte> Sim Não Sim

<formulário> Sim Sim Sim

<quadro /> Não Não Sim

<conjunto de quadros> Não Não Sim

<h1> para <h6> Sim Sim Sim

<cabeça> Sim Sim Sim

<hr /> Sim Sim Sim

<html> Sim Sim Sim

<i> Sim Sim Sim

<iframe> Sim Não Sim

<img /> Sim Sim Sim

<entrada /> Sim Sim Sim

<em> Sim Sim Sim

190
Machine Translated by Google

Apêndice D: Elementos HTML e Doctypes Válidos

MARCAÇÃO HTML 4.01

TRANSITÓRIA RIGOROSA CONJUNTO DE QUADROS

<kbd> Sim Sim Sim

<rótulo> Sim Sim Sim

<legenda> Sim Sim Sim

<li> Sim Sim Sim

<link /> Sim Sim Sim

<mapa> Sim Sim Sim

<cardápio> Sim Não Sim

<meta /> Sim Sim Sim

<sem quadros> Sim Não Sim

<noscript> Sim Sim Sim

<objeto> Sim Sim Sim

<ol> Sim Sim Sim

<grupo de opções> Sim Sim Sim

<opção> Sim Sim Sim

<p> Sim Sim Sim

<param /> Sim Sim Sim

<pre> Sim Sim Sim

<q> Sim Sim Sim

<s> Sim Não Sim

<amostra> Sim Sim Sim

<script> Sim Sim Sim

<selecionar> Sim Sim Sim

<pequeno> Sim Sim Sim

<span> Sim Sim Sim

<greve> Sim Não Sim

<forte> Sim Sim Sim

<estilo> Sim Sim Sim

<sub> Sim Sim Sim

<sup> Sim Sim Sim

<tabela> Sim Sim Sim

<tcorpo> Sim Sim Sim

<td> Sim Sim Sim

191
Machine Translated by Google

Aprenda HTML e CSS com w3schools

MARCAÇÃO HTML 4.01

TRANSITÓRIA RIGOROSA CONJUNTO DE QUADROS

<tpé> Sim Sim Sim

<º> Sim Sim Sim

<cabeça> Sim Sim Sim

<título> Sim Sim Sim

<tr> Sim Sim Sim

<tt> Sim Sim Sim

<você> Sim Não Sim

<ul> Sim Sim Sim

<var> Sim Sim Sim

192
Machine Translated by Google

Apêndice E

HTML
Conjuntos de caracteres

Para obter mais informações sobre como trabalhar com conjuntos de caracteres, consulte o Capítulo
27, “Codificação de URL”.

Caracteres ASCII
Para exibir uma página HTML corretamente, o navegador precisa saber qual conjunto de caracteres usar. O
conjunto de caracteres para a World Wide Web inicial era ASCII. ASCII suporta números de 0 a 9, o alfabeto
inglês maiúsculo e minúsculo e alguns caracteres especiais.

Para mais informações sobre ASCII, consulte o Apêndice F, “Referência HTML ASCII”.

Uma lista completa do conjunto de caracteres ASCII está disponível em www.w3schools.

com/tags/ref_ascii.asp.

Caracteres ISO-8859-1
Como muitos países usam caracteres que não fazem parte do ASCII, o conjunto de caracteres padrão para
navegadores modernos é ISO-8859-1.

Para mais informações sobre caracteres ISO, consulte o Apêndice G, “Referência HTML
ISO-8859-1”.

Uma lista completa do conjunto de caracteres ISO-8859-1 está disponível em www.

w3schools.com/tags/ref_entities.asp.

193
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Outros conjuntos de caracteres ISO

É a Organização Internacional para Padronização (ISO) que define os conjuntos de caracteres
padrão para diferentes alfabetos/idiomas.

DICA Se uma página da Web usar um conjunto de caracteres diferente do ISO-8859-1, ele deverá ser especificado
identificado na tag <meta> .

Os diferentes conjuntos de caracteres usados ao redor do mundo estão listados na tabela a seguir:

DESCRIÇÃO DO CONJUNTO DE CARACTERES CAPAS

Norma ISO-8859-1 Alfabeto latino parte 1 América do Norte, Ocidental

Europa, América Latina, a
Caribe, Canadá, África

Norma ISO-8859-2 Alfabeto latino parte 2 Europa Oriental

Norma ISO-8859-3 Alfabeto latino parte 3 SE Europa, Esperanto, diversos outros

Norma ISO-8859-4 Alfabeto latino parte 4 Escandinávia/Báltico (e outros-

não em ISO-8859-1)
Norma ISO-8859-5 Latim/Cirílico parte 5 As línguas que estão sendo usadas
um alfabeto cirílico como
Búlgaro, bielorrusso, russo e
macedônio

Norma ISO-8859-6 Latim/Árabe parte 6 As línguas que usam o alfabeto árabe

Norma ISO-8859-7 Latim/Grego parte 7 A língua grega moderna, bem

como os símbolos matemáticos
derivados do grego

Norma ISO-8859-8 Latim/Hebraico parte 8 As línguas que usam o alfabeto hebraico

Norma ISO-8859-9 Latim 5 parte 9 O idioma turco. O mesmo que

ISO-8859-1, exceto que os
caracteres turcos substituem os islandeses
uns

Norma ISO-8859-10 Latim 6 Lapônico, As línguas nórdicas

nórdico, esquimó

Norma ISO-8859-15 Latim 9 (também conhecido como Latim 0) Semelhante ao ISO-8859-1,

mas substitui alguns símbolos
menos comuns pelo símbolo
do euro e alguns outros
caracteres ausentes

194
Machine Translated by Google

Apêndice E: Conjuntos de caracteres HTML

DESCRIÇÃO DO CONJUNTO DE CARACTERES CAPAS

ISO-2022-JP Latim/Japonês parte 1 A língua japonesa

Norma ISO 2022-JP-2 Latim/Japonês parte 2 A língua japonesa
ISO-2022-KR Latim/Coreano parte 1 A língua coreana

Padrão Unicode
Como os conjuntos de caracteres listados na tabela anterior são limitados em tamanho e não
são compatíveis em ambientes multilíngues, o Unicode Consortium desenvolveu o Unicode
Standard. O objetivo do Consortium é substituir os conjuntos de caracteres existentes por seu
Unicode Transformation Format (UTF) padrão.

O Padrão Unicode abrange todos os caracteres, pontuações e símbolos do mundo. O Unicode

permite o processamento, armazenamento e intercâmbio de dados de texto, não importa qual
seja a plataforma, não importa qual seja o programa, não importa qual seja a linguagem.

DICA Os primeiros 256 caracteres dos conjuntos de caracteres Unicode correspondem aos 256
caracteres do ISO-8859-1.

O Padrão Unicode se tornou um sucesso e é implementado em XML, Java, ECMAScript

(JavaScript), LDAP, CORBA 3.0, WML e assim por diante. O Padrão Unicode também é
suportado em muitos sistemas operacionais e todos os navegadores modernos. O Consórcio
Unicode coopera com as principais organizações de desenvolvimento de padrões, como ISO,
W3C e ECMA.

Unicode pode ser implementado por diferentes conjuntos de caracteres. As codificações mais
comumente usadas são UTF-8 e UTF-16, incluindo o seguinte:

DESCRIÇÃO DO CONJUNTO DE CARACTERES

UTF-8 Um caractere em UTF-8 pode ter de 1 a 4 bytes de comprimento.

UTF-8 pode representar qualquer caractere no padrão Unicode.
UTF-8 é compatível com versões anteriores do ASCII.
UTF-8 é a codificação preferida para e-mail e páginas da Web.

UTF-16 O 16-bit Unicode Transformation Format é uma codificação de

caracteres de comprimento variável para Unicode, capaz de
codificar todo o repertório Unicode. O UTF-16 é usado nos
principais sistemas operacionais e ambientes, como Microsoft
Windows 2000/XP/2003/Vista/CE e os ambientes de código de
bytes Java e .NET.

OBSERVAÇÃO
Todos os processadores HTML 4 já suportam UTF-8, e todos os processadores
XML suportam UTF-8 e UTF-16.

195
Machine Translated by Google

Apêndice F

HTML ASCII
Referência
Para obter mais informações sobre como trabalhar com conjuntos de caracteres, consulte o Capítulo
27, “Codificação de URL”.

Conjunto de caracteres ASCII

O conjunto de caracteres ASCII é usado para enviar informações entre computadores na
Internet. ASCII significa American Standard Code for Information Inter-change. Ele foi
projetado no início dos anos 1960 como um conjunto de caracteres padrão para computadores
e dispositivos de hardware como teleimpressoras e unidades de fita.

ASCII é um conjunto de caracteres de 7 bits contendo 128 caracteres. Ele contém os números
de 0 a 9, as letras maiúsculas e minúsculas do inglês de A a Z e alguns caracteres especiais.
Os conjuntos de caracteres usados em computadores modernos, HTML e na Internet são
todos baseados em ASCII.

A tabela a seguir lista os 128 caracteres ASCII e seus códigos de entidade HTML
equivalentes.

Uma lista completa do conjunto de caracteres ASCII também está disponível

em www.w3schools.com/tags/ref_ascii.asp.

Caracteres ASCII imprimíveis

DESCRIÇÃO DO CÓDIGO DA ENTIDADE HTML DO CARACTERE ASCII

&#32; espaço

! &#33; ponto de exclamação

"
&#34; aspas
# &#35; sinal numérico
$ &#36; cifrão
% &#37; sinal de porcentagem

& &#38; e comercial

196
Machine Translated by Google

Apêndice F: Referência HTML ASCII

DESCRIÇÃO DO CÓDIGO DA ENTIDADE HTML DO CARACTERE ASCII

'
&#39; apóstrofo
&#40; parêntesis esquerdo

() &#41; parêntesis direito

* asterisco
&#42;
+ &#43; sinal de mais

, &#44; vírgula

- &#45; hífen
. &#46; período
/ &#47; barra

0 &#48; dígito 0
1 &#49; dígito 1
2 &#50; dígito 2
3 &#51; dígito 3
4 &#52; dígito 4
5 &#53; dígito 5
6 &#54; dígito 6
7 &#55; dígito 7
8 &#56; dígito 8
9 &#57; dígito 9
: &#58; cólon

; &#59; ponto e vírgula

< &#60; menor que

= &#61; igual a
> &#62; maior que
? &#63; ponto de interrogação

@ &#64; arroba
UM &#65; A maiúsculo
B &#66; B maiúsculo
C &#67; C maiúsculo
E &#68; D maiúsculo
E &#69; E maiúsculo
F &#70; F maiúsculo
G &#71; G maiúsculo
O &#72; H maiúsculo

197
Machine Translated by Google

Aprenda HTML e CSS com w3schools

DESCRIÇÃO DO CÓDIGO DA ENTIDADE HTML DO CARACTERE ASCII

EU
&#73; I maiúsculo
Eu &#74; J maiúsculo
E &#75; K maiúsculo
eu &#76; L maiúsculo
M &#77; M maiúsculo
Não &#78; N maiúsculo
O &#79; O maiúsculo
P &#80; P maiúsculo
Pq &#81; Q maiúsculo
R &#82; R maiúsculo
S &#83; S maiúsculo
E &#84; T maiúsculo
você &#85; U maiúsculo
V &#86; V maiúsculo
C &#87; W maiúsculo
X &#88; X maiúsculo
E &#89; Y maiúsculo
Z &#90; Z maiúsculo
[ &#91; colchete esquerdo
\ &#92; barra invertida

] &#93; colchete direito

^ &#94; acento circunflexo

_ &#95; sublinhado
`
&#96; acento grave
um &#97; a minúsculo
b &#98; b minúsculo
c &#99; c minúsculo
e &#100; d minúsculo
e &#101; e minúsculo
e &#102; f minúsculo

&#103; g minúsculo
gh &#104; h minúsculo
eu
&#105; i minúsculo

&#106; j minúsculo
brincadeira
&#107; k minúsculo

198
Machine Translated by Google

Apêndice F: Referência HTML ASCII

DESCRIÇÃO DO CÓDIGO DA ENTIDADE HTML DO CARACTERE ASCII

eu
&#108; l minúsculo

eu &#109; m minúsculo

não &#110; n minúsculo

o &#111; o minúsculo

p &#112; p minúsculo

q &#113; q minúsculo
r &#114; r minúsculo

e &#115; s minúsculo

para
&#116; t minúsculo

você &#117; u minúsculo

você &#118; v minúsculo

c &#119; w minúsculo

x &#120; x minúsculo

e &#121; y minúsculo
por &#122; z minúsculo

&#123; chave esquerda

&#124; barra vertical

{|} &#125; chaveta direita

~ &#126; til

Caracteres de controle de dispositivo ASCII

Os caracteres de controle de dispositivo ASCII foram originalmente projetados para controlar
dispositivos de hardware. Caracteres de controle não têm nada a ver dentro de um documento HTML.

DESCRIÇÃO DO CÓDIGO DA ENTIDADE HTML DO CARACTERE ASCII

NULO &#00; caractere nulo

SOH &#01; início do cabeçalho

STX &#02; início do texto

ETX &#03; fim do texto

EOT &#04; fim da transmissão

ENQ &#05; investigação

ACK &#06; reconhecer

BEL &#07; sino (anel)
BS &#08; retrocesso

199
Machine Translated by Google

Aprenda HTML e CSS com w3schools

DESCRIÇÃO DO CÓDIGO DA ENTIDADE HTML DO CARACTERE ASCII

HT &#09; aba horizontal

LF &#10; avanço de linha

VT &#11; aba vertical

FF &#12; alimentação de formulário

CR &#13; retorno de carro

ENTÃO &#14; mudar para fora

SI &#15; mudança em

DLE &#16; fuga de link de dados

DC1 &#17; controle do dispositivo 1

DC2 &#18; controle do dispositivo 2

DC3 &#19; controle do dispositivo 3

DC4 &#20; controle do dispositivo 4

NAK &#21; reconhecimento negativo

Sincronização &#22; sincronizar
ETB &#23; bloco de transmissão final

PODE &#24; cancelar

EM &#25; fim do meio

SUB &#26; substituir

ESC &#27; escapar

FS &#28; separador de arquivos

GS &#29; separador de grupo

RS &#30; separador de registros

NÓS &#31; separador de unidades

DEL &#127; apagar (apagar)

200
Machine Translated by Google

Apêndice G

Código HTML ISO-8859-1

Referência

Os navegadores modernos suportam vários conjuntos de caracteres:

8 Conjunto de caracteres ASCII (consulte o Apêndice F, “Referência HTML ASCII”)

8 conjuntos de caracteres ISO padrão (consulte o Apêndice E, “Caracteres HTML

Conjuntos”)

8 Formato de Transformação Unicode (UTF) (consulte o Apêndice E, “HTML

Conjuntos de caracteres”)

8 Símbolos matemáticos, letras gregas e outros símbolos (consulte o Apêndice H, “Referência de

entidades de símbolos HTML”)

Norma ISO-8859-1
ISO-8859-1 é o conjunto de caracteres padrão na maioria dos navegadores.

Os primeiros 128 caracteres do ISO-8859-1 compõem o conjunto de caracteres ASCII original (os números de 0 a 9, o
alfabeto inglês maiúsculo e minúsculo e alguns caracteres especiais).

A parte superior do ISO-8859-1 (códigos de 160 a 255) contém os caracteres usados nos países da Europa Ocidental
e alguns caracteres especiais comumente usados.

Caracteres reservados em HTML

Alguns caracteres são reservados em HTML. Por exemplo, você não pode usar os sinais de maior ou menor dentro do
seu texto porque o navegador pode confundi-los com marcação.

Entidades são usadas para implementar caracteres reservados ou para expressar caracteres que não podem ser
facilmente inseridos com o teclado.

Os processadores HTML devem suportar os cinco caracteres especiais listados na tabela a

seguir.

201
Machine Translated by Google

Aprenda HTML e CSS com w3schools

OBSERVAÇÃO
Os nomes de entidades diferenciam maiúsculas de minúsculas.

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE

NÚMERO
"
&#34; &quot; aspas
'
&#39; &apos; (não apóstrofo
funciona no IE)
& &#38; &amp; e comercial
< &#60; &lt; menor que

> &#62; &gt; maior que

Símbolos ISO 8859-1

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE
NÚMERO

&#160; &iexcl; espaço não separável

¡ &#161; ponto de
exclamação invertido

¢ &#162; &cento; cento

£ &#163; &libra; libra

¤ &#164; &curren; moeda
¥ &#165; &ienes; iene
¦ &#166; &brvbar; barra vertical quebrada

§ &#167; &seção; seção

¨
&#168; &uml; espaçamento do trematódeo

© &#169; &cópia; direitos autorais

ª indicador ordinal
&#170; &ordf;
feminino
« &#171; &laquo; aspas angulares
(esquerda)
¬ &#172; &não; negação
&#173; &tímido; hífen suave
® &#174; &reg; marca registrada

¯
&#175; &macr; espaçamento macron
°
&#176; &deg; grau
± &#177; &plusmn; mais ou menos

202
Machine Translated by Google

Apêndice G: Referência HTML ISO-8859-1

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE

NÚMERO
² &#178; &sup2; sobrescrito 2
³ &#179; &sup3; sobrescrito 3
´
&#180; &agudo; espaçamento agudo

µ &#181; &micro; micro

¶ &#182; &para; parágrafo

· &#183; &middot; ponto do meio

¸ &#184; &cedil; espaçamento cedilha

¹ &#185; &sup1; sobrescrito 1
º indicador ordinal
&#186; &ordm;
masculino

» &#187; &raquo; aspas angulares

(direita)
¼ &#188; &frac14; fração 1/4

½ &#189; &frac12; fração 1/2

¾ &#190; &frac34; fração 3/4

¿ &#191; &iquest; ponto de interrogação

invertido

× &#215; &vezes; multiplicação

÷ &#247; &dividir; divisão

Caracteres ISO 8859-1

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE
NÚMERO

UM &#192; &Agrave; maiúsculo a, grave

sotaque

UM &#193; &Aacute; a maiúsculo, agudo

sotaque

UM &#194; &Acirc; a maiúsculo, acento

circunflexo

UM &#195; &Atilde; a maiúsculo, til

UM &#196; &Auml; a maiúsculo, sinal
de trema

UM &#197; &Anel; capital a, anel

Æ &#198; &AElig; capital ae

Ç &#199; &Ccedil; c maiúsculo, cedilha

203
Machine Translated by Google

Aprenda HTML e CSS com w3schools

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE

NÚMERO

É &#200; &Egrave; e maiúsculo, grave

sotaque

É &#201; &É e maiúsculo, agudo

sotaque

Ê &#202; &Ecirc; e maiúsculo, acento

circunflexo

Ë &#203; &Euml; e maiúsculo, sinal

de trema

EU &#204; &Igrave; i maiúsculo, grave

sotaque

EU &#205; &Iacute; i maiúsculo, agudo

sotaque

EU &#206; &Icirc; i maiúsculo, circunflexo

sotaque

EU &#207; &Iuml; i maiúsculo, sinal

de trema

Ð &#208; &ETH; capital eth,

islandês

&#209; &Ntilde; n maiúsculo, til

NÃO &#210; &Ograve; maiúsculo o, grave
sotaque

Ó &#211; &Oacute; maiúsculo o, agudo

sotaque

Ô &#212; &Ocirc; o maiúsculo, acento

circunflexo

Õ &#213; &Otilde; maiúsculo o, til

Ö &#214; &Ouml; maiúsculo o, sinal
de trema

Ø &#216; &Oslash; capital o, barra

Ù &#217; &Ugrave; u maiúsculo, grave
sotaque

Ú &#218; &Uacute; u maiúsculo, agudo

sotaque

Û &#219; &Ucirc; u maiúsculo, acento

circunflexo

Ü &#220; &Uuml; u maiúsculo, sinal

de trema

204
Machine Translated by Google

Apêndice G: Referência HTML ISO-8859-1

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE

NÚMERO

Ý &#221; &Sim; y maiúsculo, agudo

sotaque

Þ &#222; &ESPINHO; ESPINHO maiúsculo,

islandês

ß &#223; &szlig; pequeno e forte s, alemão

homem

um &#224; &agrave; pequeno a, grave

sotaque

um &#225; &aacute; a pequeno, agudo

sotaque

um &#226; &acirc; a minúsculo, circunflexo

sotaque

um &#227; &atilde; a minúsculo, til

um &#228; &auml; a minúsculo, sinal

de trema

um &#229; &aring; pequeno a, anel

æ &#230; &aelig; pequeno ae

ç &#231; &ccedil; c minúsculo, cedilha

é &#232; &egrave; e pequeno, grave

sotaque

é &#233; &eacute; e pequeno, agudo

sotaque

ê &#234; &ecirc; e minúsculo, circunflexo

sotaque

e &#235; &euml; e minúsculo, sinal

de trema

eu &#236; &igrave; pequeno i, grave

sotaque

eu
&#237; &iacute; i pequeno, agudo
sotaque

eu &#238; &icirc; i minúsculo, circunflexo

sotaque

eu &#239; &iuml; i minúsculo, sinal

de trema

ð &#240; &eth; pequeno eth, islandês

ñ &#241; &ntilde; n pequeno, til

ò &#242; &ograve; pequeno o, grave

sotaque

205
Machine Translated by Google

Aprenda HTML e CSS com w3schools

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE

NÚMERO

ou &#243; &oacute; pequeno o, agudo

sotaque

ô &#244; &ocirc; o minúsculo, circunflexo

sotaque

õ &#245; &otilde; pequeno o, til

ö &#246; &ouml; pequeno o, sinal de

trema

ø &#248; &oslash; pequeno o, barra

ù &#249; &ugrave; pequeno u, grave

sotaque

você &#250; &uacute; u minúsculo, agudo

sotaque

û &#251; &ucirc; u minúsculo, circunflexo

sotaque

você &#252; &uuml; pequeno u, sinal de

trema

ý &#253; &yacute; pequeno y, agudo

sotaque

þ &#254; &espinho; pequeno espinho,

islandês

ÿ &#255; &yuml; pequeno y, sinal

de trema

206
Machine Translated by Google

Apêndice H

Símbolo HTML
Referência de Entidades

Esta referência de entidade inclui símbolos matemáticos, caracteres gregos, várias setas, símbolos
técnicos e formas.

OBSERVAÇÃO
Os nomes de entidades diferenciam maiúsculas de minúsculas.

Símbolos matemáticos suportados por HTML

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE

NÚMERO

ÿ &#8704; &para todos; para todos

ÿ &#8706; &part; papel

ÿ &#8707; &existe; existe
ÿ
&#8709; &vazio; vazio
ÿ &#8711; &nabla; nabla
ÿ &#8712; &isin; é

ÿ &#8713; &notin; nada

ÿ &#8715; &ni; não

ÿ &#8719; &prod; prod

ÿ &#8721; &sum; soma

&#8722; &menos; menos

* &#8727; &mais recente; o mais baixo

ÿ &#8730; &radical; raiz quadrada

ÿ
&#8733; &prop; proporcional a
ÿ
&#8734; &infin; infinidade
ÿ &#8736; &ang; ângulo

207
Machine Translated by Google

Aprenda HTML e CSS com w3schools

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE

NÚMERO

ÿ &#8743; &e; e

ÿ &#8744; &ou; ou
ÿ &#8745; &cap; boné

ÿ &#8746; &copo; xícara

ÿ &#8747; &int; integrante

ÿ &#8756; &lá4; portanto

semelhante a
ÿ

&#8764; &sim;
ÿ
&#8773; &cong; congruente com
ÿ
&#8776; &assimp; quase igual
ÿ &#8800; &ne; não é igual
ÿ
&#8801; &equiv; equivalente
ÿ &#8804; &le; menor ou igual
ÿ &#8805; &ge; maior ou igual
ÿ &#8834; &sub; subconjunto de

ÿ &#8835; &sup; superconjunto de

ÿ &#8836; &nsub; não subconjunto de

ÿ &#8838; &sub; subconjunto ou igual

ÿ &#8839; &supe; superconjunto ou igual
ÿ
&#8853; &oplus; circulado mais
ÿ tempos circulados
&#8855; &otimes;
ÿ &#8869; &perp; perpendicular
ÿ

&#8901; &sdot; operador de ponto

Letras gregas suportadas por HTML

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE
NÚMERO

A &#913; &Alfa; Alfa

ÿ &#914; &Beta; Beta

ÿ &#915; &Gama; Gama

ÿ &#916; &Delta; Delta

E &#917; &Épsilon; Épsilon

O &#918; &Zeta; Zeta

208
Machine Translated by Google

Apêndice H: Referência de entidades de símbolos HTML

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE

NÚMERO

ÿ &#919; &Eta; Eta

O &#920; &Teta; Teta

Eu
&#921; &Iota; Iota

ÿ &#922; &Kappa; Kappa

ÿ &#923; &Lambda; Lambda

Eu &#924; &Mu; Mú

ÿ &#925; &Nu; Não

ÿ &#926; &Xi; XI

O &#927; &Ômicron; Ômicron

P &#928; &Pi; Pi

O &#929; &Ró; Ró

indefinido Sigmaf
ÿ &#931; &Sigma; Sigma
ÿ &#932; &Tau; Tau

ÿ &#933; &Upsilon; Upsilon

ÿ &#934; &Phi; Fi

ÿ &#935; &Chi; Chi

ÿ &#936; &Psi; Psi

ÿ &#937; &Ómega; Ómega

um &#945; &alfa; alfa

ÿ &#946; &beta; beta

gama &#947; &gama; gama

ÿ &#948; &delta; delta

e &#949; &epsilon; épsilon

ÿ &#950; &zeta; zeta

ÿ &#951; &eta; eita

ÿ &#952; &teta; teta

eu
&#953; &iota; iota

ÿ &#954; &kappa; kappa

ÿ &#955; &lambda; lambda

um &#956; &mu; eu

ÿ &#957; &nu; não

209
Machine Translated by Google

Aprenda HTML e CSS com w3schools

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE

NÚMERO

ÿ &#958; &xi; xiii

o &#959; &micron; ômicron

ÿ &#960; &pi; pi

ÿ &#961; &rho; Ró

ÿ &#962; &sigmaf; sigmaf

ÿ &#963; &sigma; sigma
ÿ &#964; &tau; tau

ÿ &#965; &upsilon; upsilon

ÿ &#966; &phi; phi

ÿ &#967; &chi; eu

ÿ &#968; &psi; psi

ÿ &#969; &omega; ómega
ÿ &#977; &thetasym; símbolo theta
ÿ &#978; &upsih; símbolo upsilon
ÿ &#982; &piv; símbolo pi

Outras entidades suportadas por HTML

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE
NÚMERO

Œ &#338; &OElig; ligadura maiúscula OE

œ &#339; &oelig; pequena ligadura oe
Š &#352; &Scaron; S maiúsculo com caron
você
&#353; &scaron; pequeno S com caron

Ÿ &#376; &Yuml; Y maiúsculo com

diaeres

ƒ &#402; &fnof; f com gancho

ˆ
&#710; &circ; modificador de
letra acento circunflexo
˜
&#732; &til; pequeno til

&#8194; &ensp; no espaço

&#8195; &emsp; em espaço
&#8201; &thinsp; espaço fino
&#8204; &zwnj; largura zero não-
juntador

210
Machine Translated by Google

Apêndice H: Referência de entidades de símbolos HTML

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE

NÚMERO

&#8205; &zwj; marceneiro de largura zero

&#8206; &lrm; marca da esquerda para a direita

&#8207; &rlm; marca da direita para a esquerda

– &#8211; &ndash; em traço

— &#8212; &mdash; travessão
'
&#8216; &lsquo; aspas simples
esquerdas
'
&#8217; &rsquo; aspas simples
direitas

... &#8218; &sbquo; aspas simples de 9

pontos
“
&#8220; &ldquo; aspas duplas
esquerdas
"
&#8221; &rdquo; aspas duplas direitas

„ &#8222; &bdquo; aspas duplas de 9

pontos

† &#8224; &punhal; punhal

‡ &#8225; &Adaga; punhal duplo
• &#8226; &touro; bala

… &#8230; &hellip; elipse horizontal

‰ &#8240; &permil; por mil
ÿ

&#8242; &prime; minutos

ÿ
&#8243; &Melhor; segundos

‹ &#8249; &lsaquo; aspas simples em

ângulo esquerdo

› &#8250; &rsaquo; aspas simples em

ângulo reto
ÿ

&#8254; &oline; sobrelinha

€ &#8364; &euro; euro

™ &#8482; &troca; marca registrada

ÿ
&#8592; &larr; seta para a esquerda

ÿ &#8593; &uarr; seta para cima

ÿ
&#8594; &rarr; seta para a direita

ÿ &#8595; &darr; seta para baixo

211
Machine Translated by Google

Aprenda HTML e CSS com w3schools

ENTIDADE DE CARÁTER DESCRIÇÃO DO NOME DA ENTIDADE

NÚMERO
ÿ
&#8596; &harr; seta esquerda direita

ÿ &#8629; &crarr; retorno de carro

seta

&#8968; &lceil; teto esquerdo

&#8969; &rceil; teto direito

&#8970; &lfloor; andar esquerdo

&#8971; &rpiso; andar direito

ÿÿÿÿÿ &#9674; &loz; pastilha

ÿ &#9824; &espadas; pá
ÿ &#9827; &paus; clube

ÿ &#9829; &corações; coração

ÿ &#9830; &diams; diamante

212
Machine Translated by Google

Apêndice I

URL HTML
Codificação
Referência

A codificação de URL converte caracteres em um formato que pode ser transmitido com segurança pela
Internet.

Os navegadores da Web solicitam páginas de servidores da Web usando uma URL. A URL é o endereço de
uma página da Web como: http://www.w3schools.com.

Para obter mais informações, consulte o Capítulo 27, “Codificação de URL”.

Codificação de URL
URLs só podem ser enviadas pela Internet usando o conjunto de caracteres ASCII.

Como URLs geralmente contêm caracteres fora do conjunto ASCII, a URL precisa ser convertida. A
codificação de URL converte a URL em um formato ASCII válido. A codificação de URL substitui caracteres
ASCII inseguros por “%” seguido por dois dígitos hexadecimais correspondentes aos valores de caracteres
no conjunto de caracteres ISO-8859-1.

OBSERVAÇÃO
URLs não podem conter espaços. A codificação de URL normalmente substitui um
espaço por um sinal +.

Para mais informações sobre ASCII, consulte o Apêndice F, “Referência HTML ASCII”.

Para mais informações sobre caracteres ISO, consulte o Apêndice G, “Referência HTML
ISO-8859-1”.

213
Machine Translated by Google

Aprenda HTML e CSS com w3schools

Funções de codificação de URL

Em JavaScript, PHP e ASP, há funções que podem ser usadas para codificar uma string em
URL.

Em JavaScript, você pode usar a função encodeURI() . O PHP tem a função rawurlen-code()
e o ASP tem a função Server.URLEncode() .

Para saber mais sobre eventos de programação, leia Aprenda JavaScript e Ajax
com w3schools, também da Wiley Publishing, ou visite o tutorial JavaS-cript em
www.w3schools.com/js.

OBSERVAÇÃO
Na tabela a seguir, alguns números permanecem sem atribuição.

Referência de codificação de URL

CARACTERE ASCII CODIFICAÇÃO DE URL

espaço %20
! %21
"
%22
# %23

$ %24

% %25
& %26
'
%27
%28

() %29
* %2A
+ %2B

, %2C
- %2D
. %2E
/ %2F
0 %30
1 %31
2 %32

3 %33

214
Machine Translated by Google

Apêndice I: Referência de codificação de URL HTML

CARACTERE ASCII CODIFICAÇÃO DE URL

4 %34

5 %35
6 %36

7 %37
8 %38
9 %39
: %3A

; %3B
< %3C
= %3D
> %3E
? %3F
@ %40
UM %41
B %42
C %43
E %44
E %45
F %46
G %47
O %48
EU %49

Eu
%4A
E %4B
eu %4C
M %4D
Não %4E
O %4F
P 50%

Pq %51
R %52
S %53
E %54
você %55

215
Machine Translated by Google

Aprenda HTML e CSS com w3schools

CARACTERE ASCII CODIFICAÇÃO DE URL

V %56

C %57

X %58

E %59

Z %5A

[ %5B

\ %5C

] %5D
^ %5E

_ %5F
`
%60

um %61

b %62

c %63

e %64

e %65

e %66

%67

gh %68

eu %69

%6A

brincadeira %6B

eu %6C

eu %6D

não %6E

o %6F

p %70

q %71

r %72

e %73

para %74

você %75

você %76

c %77

216
Machine Translated by Google

Apêndice I: Referência de codificação de URL HTML

CARACTERE ASCII CODIFICAÇÃO DE URL

x %78

e %79
por %7A

%7B

%7C

{|} %7D
~ %7E

%7F
€ %80

%81

... %82

ƒ %83

„ %84
… %85

† %86

‡ %87
ˆ
%88

‰ %89
Š %8A
‹ %8B
Π%8C

%8D
Ž %8E

%8F

%90
'
%91
'
%92
“
%93
"
%94
• %95
– %96
— %97
˜
%98
™ %99

217
Machine Translated by Google

Aprenda HTML e CSS com w3schools

CARACTERE ASCII CODIFICAÇÃO DE URL

você %9A
› %9B

œ %9C

%9D

ž %9E

Ÿ %9F

%A0

¡ %A1

¢ %A2

£ %A3

%A4

¥ %A5

%A6

|§ %A7
¨
%A8

© %A9
ª %AA
« %AB
¬ %CA
¯
%ANÚNCIO

® %E
¯
%AF
°
%B0

± %B1
² %B2
³ %B3
´
%B4

µ %B5

¶ %B6
· %B7

¸ %B8
¹ %B9
º %BA
» %BB

218
Machine Translated by Google

Apêndice I: Referência de codificação de URL HTML

CARACTERE ASCII CODIFICAÇÃO DE URL

¼ %AC
½ %BD
¾ %SER

¿ %BF
UM %C0
UM %C1
 %C2
à %C3
UM %C4
UM %C5
Æ %C6

Ç %C7
È %C8
É %C9
Ê %CA
Ë %CB
%CC
ÌÍ %CD
EU %CE
EU %CF
Ð %D0
Ñ %D1
Ò %D2
Ó %D3
Ô %D4
Õ %D5
Ö %D6

%D7
Ø %D8
Ù %D9
Ú %DA
Û %DB
Ü %DC
Ý %DD

219
Machine Translated by Google

Aprenda HTML e CSS com w3schools

CARACTERE ASCII CODIFICAÇÃO DE URL

Þ %DE

ß %DF

um %E0

um %E1

um %E2

um %E3

um %E4

um %E5

æ %E6

ç %E7

é %E8

é %E9

ê %EA

e %EB

eu %CE

eu %ED

eu %EE

eu %EF

ð %F0

ñ %F1

ò %F2

ou %F3

ô %F4

õ %F5

ö %F6

÷ %F7

ø %F8

ù %F9

você %FA

û %FB

você %FC

ý %FD

þ %FE

ÿ %FF

220
Machine Translated by Google

Índice

href, 157
Símbolos
<!--...-->, 177, 181 id, 18, 163, 185
teclado, 164, 186 lang,
UM 163, 186 idioma,
<a> elemento, 47 163, 186 minúsculas,
18 <nome>,
<a> tag, 11, 17, 157, 177, 182, 189 </a>
155 pares
tag, 13
nome/valor, 17 onabort,
<abbr> tag, 38, 177, 181, 189
188 onblur,
abreviações, formatação, 32
166, 187 onchange,
atributo accesskey, 164, 186
166, 187 onclick, 166,
<acronym> tag, 38, 177, 181, 189
188 ondblclick, 166,
acrônimos, formatação, 32
188 onfocus, 166, 187
atributo action, 106
onkeydown, 166,
<address> tag, 38, 177, 181, 189
188 onkeypress, 166,
endereços, formatação, 31
188 onkeyup, 166, 188
<a href=”default.htm”> tag, 13 align
onload, 165, 187
atributo, 12 alinhando
onmousedown, 166,
imagens, 59–60
188 onmousemove, 166,
alinhamento
188 onmouseout, 166, 188
conteúdo da célula,
onmouseover, 166, 188
82–83 texto,
onmouseup, 166, 188
43–44 alt atributo,
onreset, 166, 187
63 e comercial, entidade de caractere,
onselect, 166, 187
149 âncoras, links, 47, 49, 117
onsubmit, 166, 187
tag <applet>, 162, 178, 184, 189 tag
onunload, 165, 187
<area>, 178, 182, 189
aspas, 17 src, 55
caracteres ASCII, 193, 196–200
caracteres de controle de dispositivo, padrão, 17–18, 163–
164,
199–200 caracteres imprimíveis,
185–186 estilo, 18, 39–44, 143, 146, 163,
196–199 atributos, 11–13,
185 tabindex, 164, 186 referência de tag,
17–18 tecla de acesso,
22 alvo, 46, 48 título,
164, 186
18, 163, 185 tipo,
ação, 106
91, 93
desconhecido, 155
alinhamento, 40,
44, 82 alt, 63 cor de valores,
definindo, 17–18
fundo, 40–41 borda,
68, 70, largura, 62
88–89 classe, 18,
163, 185 cor, 20
<conteúdo>, B
155 núcleo, 163, 185 dir, 163, <b> tag, 36, 178, 181, 189
186 evento, cores de fundo, 41–42 células,
165–166, 187– 82
tabelas, 80–81
188 fontes, 137 quadro, 84–89 altura, 62

221
Machine Translated by Google

Índice

imagens de fundo, 58 células, caixas de seleção, 101, 107–108

82 tabelas tags de citação, 38
80–81 tag tag <cite>, 36, 38, 178, 181, 190 atributo
<base>, 150, 152–153, 178, 183, 189 tag <basefont>, de classe, 18, 163, 185 tags de

40, 146, 178, 183, 189 tag <bdo>, 38, 178, 181, fechamento, 13, 16
189 tag <big>, 36, 178, 181 tag código, fonte, 22 tag

<blockquote>, 38, 178, 181, <code>, 36–37, 178, 181, 190 tag <col>,
190 elemento <body>, 14–15, 41 tag </body>, 89, 178, 183, 190 tag <colgroup>,
2, 15 tag <body>, 2, 15, 126, 178, 89, 178, 183, 190 cor
180, 190 texto em
negrito, 20 formatação, 27–28 atributo de borda, fundo 41–42 suporte ao
68, 70, 88–89 navegador, 113 fonte, 42–
bordas molduras, 43, 138–139 tons de cinza,
redimensionamento, 128 tabelas, 68– 114–115 notação
71, 84– hexadecimal, 111–112 nomes, padrão,

89 113
RGB, 111
<br> elemento, 16, 24 <br / valores, 111–112

> tag, 13, 24, 178, 181, 190 colchetes, 21 Cores seguras da Web, 114
navegadores Seletor de cores, 8

tamanhos de coluna, conjunto de quadros, 128

conhecimento, 1 comentários, 21
mais antigo, tags de saída do computador,
161 suporte, cores, 113 30 atributo <content>, 155
janelas, links, 46 direitos autorais, entidade de
marcadores, 90– personagem, 149 atributos principais, 185

91 tag <botão>, 110, 178, 182, 190 botões, Estilos CSS, 142–146 tag
104–105, 107–109 botões, rádio, <basefont>, 146 tag
102, 108–109 <center>, 146 tag
<div>, 146 folha
C de estilo externa, 144 tag

legendas, tabelas, 74–75 tag <font>, 146 seção

<caption>, 89, 178, 183, 190 diferenciação <head>, 142–143 estilos

entre maiúsculas e embutidos, 146 folhas

minúsculas, 18 de estilo internas, 145 tag

células, 75–76 cores de <link>, 144, 146 links,

fundo, 82 imagens de fundo, sublinhados, 143 tag

82 conteúdo, alinhamento, 82–83 <span>, 146 atributo

vazio, 72–74 de estilo, 143, 146 folhas de

preenchimento, 78– estilo, externas, 144–145 folhas de

79 espaçamento, estilo, internas, 145 folhas de

79–80 cent, entidade de estilo, vinculadas, 144 tags

caractere, 149 tag <center>, 40, 146, 178, 181, <style>, 145–146
190 entidades de caractere, 147–
149 conjuntos de caracteres, 193–195 E
Caracteres ASCII, 193 <dd> tag, 95–96, 98, 178, 183, 190 listas de
Caracteres ISO, 194–195 definições, 95–96, 118 tags de
Caracteres ISO-8859-1, 193 definições, 38 <del>
Caracteres Unicode, 195 tag, 36, 178, 181, 190 texto excluído,
larguras de caracteres, formatação, 29 35

222
Machine Translated by Google

Índice

tags obsoletas, 36, 40 <p>, 42, 151

caracteres de controle de dispositivo, ASCII, 199–200 <tbody>, 74
tag <dfn>, 36, 38, 178, 181, 190 atributo <tfoot>, 74
dir, 163, 186 tag <dir>, 98, texto, 116

178, 183, 190 tag <div>, 146, 178, <thead>, 74

183, 190 tag <dl>, 95, 98, 178, 183, sintaxe, 13

190 doctypes, 189–192 tag <!DOCTYPE>, dentro de elementos, 76–77

153, 177, 180 <em> tag, 36, 178, 181, 190

documentos, básico, 2, 116 domínio, URLs, endereços de e-mail, links, 52–53 e-
157 download, ftp, 158 mails, formulários, 109–110
Dreamweaver, 7 listas texto enfatizado, 28
suspensas, 102–103 tag células vazias, 72–74
<dt>, 95, 98, 178, elementos vazios, 16
183, 190 linhas vazias, 20, 23
codificação, URLs, 167–168 tags
finais, veja também tags de fechamento, 14–15, 23
E entidades, 119
editores, 7 euro, entidade de caractere, 149
elementos, 13–16 atributos de evento, 165–166, 187–188
<endereço>, 119 eventos de corpo,
âncoras, 117 187 eventos de elementos de formulário,

<blockquote>, 119 166, 187 eventos de

<corpo>, 41 conjunto de quadros,

doctypes, 189–192 187 eventos de imagem, 188

vazios, 16 eventos de teclado, 166, 188

tags finais, 15 eventos de mouse, 166,

formulários, 188 eventos de janela, 165
99 elemento head, 150–153 pontos de

tag <base>, 150, 152–153 tag <! exclamação, 21 extensões,

DOCTYPE>, 153 tag <head>, 8 links externos, 45–46 folhas

153 tag <link>, 150, de estilo externas, 144

153 tag <meta>, 150, 153 linhas extras, 24–26 espaços extras, 24–26

elemento <p>, 151 tag

<script>, 150 tag F
<estilo>, 150 tags, famílias, fontes, 42–43 tag

150–153 tag <título>, <fieldset>, 110, 178, 182, 190 fieldset, 105
150–151, 153 extensões de

títulos, 116 imagem, 117 links, arquivo, 8 validação

117 tags de arquivo, 141 nomes

minúsculas, de arquivo, URLs, 158

16 meta, imagens flutuantes, 61
153–156 atributo fontes, 136–139
<content>, 155 atributos, 137 cor,
palavras-chave, 154–155 42–43, 138–139 controle,
atributo <name>, 155 137–139 famílias, 42–43
mecanismos de busca, 154– tamanho, 42–43,

155 atributos desconhecidos, 138–139 estilos, 137–139

155 redirecionamento de folhas de estilo, 139
usuário, 155–156 aninhados, 14 tag <font>, 40, 136–
139, 146, 178, 181, 190

223
Machine Translated by Google

Índice

eventos de elementos de campos de texto, 100–

formulário, 166 tag <form>, 100, 110, 178, 101 atributo de quadro, 84–89,
182, 190 formatação, texto, 188 quadros, 125–
27–38 abreviações, 135 bordas,
32 endereços, redimensionamento,
31 acrônimos, 128 tamanhos de
32 tag <b>, coluna, 128 desvantagens, 125
27 texto em negrito, tag <frame>, 127–128, 135 tag <frameset>, 125–127, 135
27–28 larguras de conjunto de quadros horizontais, 126–127

caracteres, 29 tags conjunto de quadros verticais, 125–126

de citação, 38 tags de saída de <iframe> tag, 135

computador, 30 tags inline, 132–133
de definição, 38 pular para, 133–134
texto excluído, 35 tags pular para seções, 134–135
obsoletas, 36 texto conjunto de quadros
enfatizado, mistos, 130 navegação, 131–
28 tag <i>, 27 texto 132, 135 <noframes> tag, 128–129,
inserido, 35 texto em 135 atributo noresize, 131
itálico, 27–28 seções, pular para, 134–135 <frame>
quebras de linha, tag, 127–128, 135, 179, 182, 190 <frameset> tag,
29 tags de frase, 36 texto 125–127, 135, 190 conjunto de quadros
pré-formatado, 29 horizontal, 126–127 conjunto de
citações, quadros vertical, 125–126
34, 38 espaços, 29 FrontPage, 7
tachado 35, 35 texto fundamentos, 9–12
subscrito, 28 texto títulos, 9–10
sobrescrito, imagens, 11–12
28 tags, 27, 36 links, 11
direção do texto, 33 parágrafos, 10
texto sublinhado, 35 formulários,
99–110, 118–119 atributo G
de ação, 106 tag tons de cinza, 114–115
<button>, 110 botões, 104–105, maior que, entidade de caráter, 149
107–109 caixas de seleção, 101, Símbolos gregos, 208–210
107–108 listas suspensas, 102–
103 elementos, H
99 e-mails, envio, 109–110 tag <h1> etiqueta, 2, 9, 19, 179, 181, 190
<fieldset>, 105, 110 tag <h6> etiqueta, 9, 19, 179, 181, 190
<form>, 100, 110 tag elemento principal, 150–153
<input>, 100, 110 tag <base> etiqueta, 150, 152–153
<isindex>, 110 tag <!DOCTYPE> etiqueta, 153
<legend>, 110 tag <head> etiqueta,
<optgroup>, 110 tag 153 <link> etiqueta, 150,
<option>, 110 páginas, 153 <meta> etiqueta, 150,
adição, 106–107 botões de 153 <p> elemento,
opção, 102, 108–109 tag <select>,
151 <script> etiqueta,
110 tag <textarea>, 150 <style>
110 controle de entrada etiqueta, 150
textarea, 104 áreas de texto, 104 etiquetas, 150–153 <title> etiqueta, 150–151, 153
Seção <head>, 142–143

224
Machine Translated by Google

Índice

<head> tag, 153, 179, 183, 190 folhas de estilo internas, 145
títulos, 9–10, 19–20 Internet Explorer, 2
elementos, 116 Servidor de informações da Internet (IIS), 169–171
tabelas, 71–72 <isindex> tag, 110, 179, 182
atributo de altura, 62 Caracteres ISO, 194–195
notação hexadecimal, 111–112 Caracteres ISO-8859-1, 193, 201–206
conjunto de quadros horizontais, caracteres reservados, 201–202
126–127 regras símbolos, 202–203
horizontais, 20 texto em itálico, 27–28
host, URLs, 157 atributo href,
Eu
47, 49, 157 <hr /> tag, 20, 179,
181, 190 extensão pular para o conjunto de quadros,
HTM, 8 HTML, 133–134 pular para as seções, 134–135
definido, 1 HTML
3.2, 140 HTML 4.0, 140–
141 Seletor de cores HTML,
Tag K <kbd>, 36–37, 179, 181, 191
8 editores HTML, 7 atributos de teclado, 186
elemento <html>, 15 eventos de teclado, 166
extensão HTML, 8 palavras-chave, 154–155
<html> tag, 2, 15, 179–180, 190
hiperlinks, 47 eu

<label> tag, 179, 182, 191

EU

atributo de idioma, 163, 186

<i> etiqueta, 36, 179, 181, 190 layout, tabelas, 123–124
atributo id, 18, 163, 185
<table> tag, 123
<iframe> etiqueta, 135, 179, 182, 190 <legend> tag, 110, 179, 182, 191
IIS, veja mapas de imagem do Internet menor que, entidade de caractere,
Information Server, 63– 149 <li> tag, 91, 93, 98, 179, 183, 191
64 imagens, 11–12, 55–64, 117 quebras de linha, 10, 24,
alinhamento, 59– 29 linhas, ver
60 atributo alt, 63 regras linhas
plano de fundo, vazio, 20, 23
58 flutuante, extra, 24–26
61 atributo altura, 62 tag <link>, 144, 146, 150, 153, 179, 182, 191 links, 11,
tag <img>, 55–56 45–54, 117 elemento
inserção, 57 <a>, 47 âncoras,
links, 54–55 47, 49 janelas do
mapas, 63–64 navegador, 46 endereços
de e-mail, 52–53 externos,
dimensionamento, 45–46 atributo
62 atributo src, 55 href, 47, 49 hiperlinks,
tamanho, ajuste, 62 atributo largura, 62 47 imagens, 54–
<img> tag, 11, 55–56, 179, 182, 190 55 internos, 45–
quadros embutidos, 132– 46 mailto:, 52–53
133 estilos atributo name,
embutidos, 146 <input> tag, 100, 110, 179, 49 abertura, 46
182, 190 <ins> tag, 36, 179, 181, mesma
190 imagens inseridas, página, 50–51 tag
57 texto inserido,
inicial, 47
35 links internos, 45–46 referências de subpasta, 49

225
Machine Translated by Google

Índice

sintaxe, 47 elemento <html>, 15

atributo alvo, 46, 48 elemento <p>, 14
sublinhado, 143 listas aninhadas, 96–
URLs, 158–159 tag 98 grupos de notícias, acessando,
<listing>, 37 listas, 158 tag <noframes>, 128–129, 135, 179, 182, 191
90–98 espaços não separáveis, 73, 148
marcadores, 90– atributo noresize, conjunto de quadros,
91 tag <dd>, 95–96, 98 131 tag <noscript>, 162, 179, 184, 191
definição, 95–96, 118 tag Bloco de notas, 7–8

<dir>, 98 tag
<dl>, 95, 98 tag O
<dt>, 95, 98 tag <object> tag, 162, 179, 184, 191 <ol>
<li>, 91, 93, 98 tag tag, 93, 98, 179, 182, 191 onabort
<menu>, 98 atributo, 188 onblur atributo,
aninhado, 96–98 166, 187 onchange atributo, 166,
tag <ol>, 93, 98 187 onclick atributo, 166, 188
ordenado, 93, 117 ondblclick atributo, 166, 188
atributo de tipo, 91, 93 tag onfocus atributo, 166, 187 onkeydown
<ul>, 91, 98 não atributo, 166, 188 onkeypress
ordenado, 90–92, 117 estilos atributo, 166, 188 onkeyup atributo,
lógicos, 117 atributos 166, 188 onload atributo, 165, 187
minúsculos, 18 tags onmousedown atributo, 166, 188
minúsculos, 16 onmousemove atributo, 166, 188
onmouseout atributo, 166, 188
M onmouseover atributo, 166, 188 atributo
mailto: links, 52–53 onmouseup, 166, 188 atributo onreset,
mapas, imagem, 63–64 166, 187 atributo onselect, 166, 187
tag <mapa>, 179, 182, 191 tags atributo onsubmit, 166, 187 atributo
de marcação, 8 onunload, 165, 187 links de
símbolos matemáticos, 207– abertura, 46 tags de abertura, 13
208 tag <menu>, 98, 179, 183, 191 tag <optgroup>, 110, 179, 182, 191
elemento meta, 153–156 tag <option>, 110, 179, 182, 191
Atributo <content>, 155 ordenado, 93, 117
palavras-chave, 154– saída, parágrafos,
155 Atributo <name>, 155 24–25
mecanismos de busca, 154–
155 atributos desconhecidos,
155 redirecionamento de
usuário, 155–156 Tag <meta>, 150, 153, 179,
183, 191 conjunto de P
quadros mistos, 130 eventos de mouse, 166 <p> elemento, 14, 42, 151 <p>
Mozilla Firefox, 2, 72 tag, 2, 13, 23, 179, 181, 191
preenchimento, células,
78–79 links de página,
Atributo de nome N , 49, 155 50–51 páginas, adicionar a formulários,
nomes, padrão, 113 pares 106–107 páginas,
nome/valor, 17 quadro scripts, 160 parágrafos, 10,
de navegação, 131–132, 135 elementos 23–26 tags
aninhados, 14 elemento finais, 23 quebras
<body>, 14–15 de linha, 24 saída, 24–25

226
Machine Translated by Google

Índice

<param> tag, 162, 179, 184, 191 <small> tag, 36, 180–181, 191 barras,
caminho, URLs, 158 referências de subpastas, 49 código-
Servidor Web Pessoal (PWS), 170–172 tags fonte, 22 nomes
de frase, 36 estilos de fontes, 12
físicos, 117 tags tamanhos de
<plaintext>, 37 :port, fontes, 12 espaços, 10,
URLs, 157 libras, 24–26, 29 espaçamento,
entidade de caractere, 149 tags células, 79–80 <span> tag, 146, 180,
<pre>, 37, 179, 181, 191 texto pré- 183, 191 atributo
formatado, 29 primos, 17 src, 55 atributos padrão, 17–18, 185–186
caracteres tags de início, veja também tags de abertura, 13–
imprimíveis, ASCII, 196–199 servidores Web 14, 47 <strike> tag, 36, 40, 180–181, 191
profissionais, 172 texto tachado, 35, 35 <strong>
PWS, veja Servidor Web Pessoal tag, 36, 180–181, 191 atributo de estilo,
18, 39–34, 143, 146, 163, 185 estilos, 39–44 cor de
Pq fundo, 41–42
<q> tag, 38, 180–181, 191
questionários, CSS, 142–146

8 aspas, atributos, 17 citações, tag <basefont>, 146 tag

formatação, 34, 38 <center>, 146 tag
<div>, 146 folha
R de estilo externa, 144 tag
botões de opção, 102, 108–109 <font>, 146 seção
<head>, 142–143 estilos
marca registrada, entidade de caractere, 149
caracteres reservados, ISO-8859-1, 201–202 embutidos, 146
RGB, 111 folhas de estilo internas, 145
regras, 20–21 tag <link>, 144, 146 links,
sublinhados, 143 tag
<span>, 146
atributo de estilo, 143, 146
Tag S <s>, 36, 40, 180–181, 191
folhas de estilo, externas, 144–145
Tag <samp>, 36–37, 180–181, 191
folhas de estilo, internas, 145
dimensionamento de
imagens, 62 esquemas, URLs, folhas de estilo, vinculadas,

157–158 scripts, 144 tags/atributos obsoletos, 40

fontes, 137–139
160–162 Tag
<applet>, 162 cor da fonte, 42–43, 138–139
família da fonte, 42–
navegadores, 161 Tag
43 tamanho da fonte, 42–43,
<noscript>, 162 Tag
<object>, 162 páginas, 138–139
lógico, 117
inserção, 160 Tag
físico, 117 atributo de
<param>, 162 Tag <script>,
160–162 estilo, 39–44 alinhamento
de texto, 43–44
Tags, 162 Tag <script>, 150, 160–162, 180, 184,
folhas de estilo, 139
191 mecanismos de busca, 20,
externo, 144–
154–155 seção, entidade de
145 interno, 145 vinculado, 144
caractere, 149 seções, saltando para,
134–135 Tag <select>, 110, Tamanho <style> tag, 145–146. 150, 180, 183, 191 <sub>
180, 182, 191 tag, 36, 180–181, 191 <sup> tag,

fontes, 42–43, 138–139 36, 180–181, 191 referências de

subpasta, links, 49
imagens, 62

227
Machine Translated by Google

Índice

texto subscrito, 28 <a>, 11, 17, 157, 177, 182, 189 </
texto sobrescrito, 28 a>, 13
entidades de símbolo, 207–211 <abrev>, 38, 177, 181, 189
Símbolos gregos, 208–210 <acrônimo>, 38, 177, 181, 189
símbolos matemáticos, 207– <endereço>, 38, 177, 181, 189
208 diversos, 210–211 <a href=”default.htm”>, 13
símbolos, ISO-8859-1, 202–203 <applet>, 162, 178, 184, 189
sintaxe, elementos, 13 <área>, 178, 182, 189
<b>, 36, 178, 181, 189
E <base>, 150, 152–153, 178, 183, 189
atributo tabindex, 164, 186 <basefont>, 40, 146, 178, 183, 189
tabelas, 118 <bdo>, 38, 178, 181, 189
atributo align, 82 <big>, 36, 178, 181
cores de fundo, 80–81 <blockquote>, 38, 178, 181, 190 </
imagens de fundo, 80–81 body>, 2, 15
atributo border, 68, 70, 88–89 <body>, 2, 15, 126, 178, 180, 190 <br /
bordas, 68–71, 84–89 >, 13, 24, 178, 181, 190 <button>,
legendas, 74–75 110, 178, 182, 190 <caption>, 89,
tag <caption>, 89 178, 183, 190 <center>, 40, 146,
células, 75– 178, 181, 190 <cite>, 36, 38, 178, 181,
76 cores de fundo, 82 190 fechamento, 13 <código>,
imagens de fundo, 82 36–37, 178,
conteúdo, alinhamento, 82–83 181, 190 <col>, 89, 178, 183, 190
vazio, 72–74 <colgroup>, 89, 178, 183,
preenchimento, 190 <dd>, 95–96, 98, 178, 183, 190
78–79 definido, 2 <del>, 36, 178, 181, 90
espaçamento, <dfn>, 36,
79–80 tag <col>, 89 38, 178, 181, 190 <dir>, 98,
tag <colgroup>, 178, 183, 190 <div>, 146, 178,
89 criação, 65–68 elementos dentro 183, 190 <dl>, 95, 98, 178,
de elementos, 76–77 183, 190 <!DOCTYPE>, 153,
atributo frame, 84– 177, 180 <dt>, 95, 98, 178, 183,
89 títulos, 71–72 190 <em>, 36, 178, 181, 190 fim,
layout, 123–124 espaços 14–15, 23 <fieldset>, 110, 178,
não separáveis, 182, 190 <font>, 40, 136–
73 dados da tabela, 65 139, 146, 178,
tag <table>, 65–66, 181, 190 <form>, 100, 110, 178,
89 tags dentro, 76–77 182, 190 formatação, 27, 36 <frame>, 127–128,
elemento <tbody>, 135, 179, 182, 190 <frameset>, 125–
74 tag <tbody>, 89 tag 127, 135, 179, 182,
<td>, 65–66, 89 190 <h1>, 2, 9, 19, 179, 181, 190 <h6>, 9,
elemento <tfoot>, 19, 179, 181, 190 <cabeçalho>, 153, 179, 183,
74 tag <tfoot>, 89 190 cabeça, 150–153 <hr />, 20,
tag <th>, 71, 89 179, 181, 190 <html>, 2, 15,
elemento <thead>, 179–180, 190 <i>, 36, 179, 181,
74 tag <thead>, 89 190 <iframe>,
tag <tr>, 65– 135, 179, 182, 190
66, 89 dados da tabela, 65 tag <table>, 65–66,
89, 123, 180,
183, 191 tags, 177–180 <!--...-->, 177, 181

228
Machine Translated by Google

Índice

<img>, 11, 55–56, 179, 182, 190 <u>, 36, 40, 180, 182, 192
<entrada>, 100, 110, 179, 182, 190 <ul>, 91, 98, 180, 182, 192
<ins>, 36, 179, 181, 190 <var>, 36–37, 180, 182, 192
<isindex>, 110, 179, 182 dentro de tabelas, 76–
<kbd>, 36–37, 179, 181, 191 77 <xmp>, 37, 180, 182
<rótulo>, 179, 182, 191 atributo de destino, 46,
<legenda>, 110, 179, 182, 191 48 elemento <tbody>,
<li>, 91, 93, 98, 179, 183, 191 74 tag <tbody>, 89, 180, 183, 191
<link>, 144, 146, 150, 153, 179, 182, 191 tag <td>, 65–66, 89, 180, 183, 191 teste
<listagem>, Web, 8
37 minúsculas, teste, servidores Web, 171
16 <mapa>, 179, 182, tag <textarea>, 110, 180, 182
191 alinhamento de texto, 43–
marcação, 8 <menu>, 98, 179, 44 áreas de
183, 191 <meta>, 150, 153, 179, 183, texto, 104 direção
191 <noframes>, 128–129, 135, 179, 182, 191 do texto, 33
<noscript>, 162, 179, 184, 191 elementos de texto,
<objeto>, 162, 179, 184, 191 116 campos de texto,
<ol>, 93, 98, 179, 182, 191 100–101 formatação
abertura, 13 de texto, 27–
<optgroup>, 110, 179, 182, 191 38 abreviações,
<opção>, 110, 179, 182, 191 <p>, 32 endereços,
2, 13, 23, 179, 181, 191 <param>, 31 acrônimos, 32
162, 179, 184, 191 <texto tag <b>, 27 texto em
simples>, 37 negrito, 27–28
<pre>, 37, 179, 181, 191 larguras de caracteres, 29
<q>, 38, 180–181, 191 tags de citação, 38
<s>, 36, 40, 180–181, 191 tags de saída de
<samp>, 36–37, 180–181, 191 computador, 30 tags
script, 162, 191 de definição, 38 texto
<script>, 150, 160–162, 180, 184 excluído, 35
<select>, 110, 180, 182, 191 tags obsoletas,
<small>, 36, 180–181, 191 36 texto enfatizado,
<span>, 146, 180, 183, 191 28 tag <i>, 27
início, 13–14 texto inserido,
<strike>, 36, 40, 180–181, 191 35 texto em itálico, 27–
<strong>, 36, 180–181, 191 28 quebras de linha,
<style>, 145–146. 150, 180, 183, 191 29 tags de
<sub>, 36, 180–181, 191 frase, 36 texto pré-
<sup>, 36, 180–181, 191 formatado, 29
<tabela>, 65–66, 89, 123, 180, 183, 191 citações, 34, 38
<tbody>, 89, 180, 183, 191 espaços, 29
<td>, 65–66, 89, 180, 183, 191 tachado 35, 35
<textarea>, 110, 180, 182 texto subscrito, 28
<tfoot>, 89, 180, 183, 192 texto sobrescrito, 28 tags, 27,
<th>, 71, 89, 180, 183, 192 36 direção do texto,
<thead>, 89, 180, 183, 192 33 texto sublinhado, 35 controle
<título>, 150–151, 153, 180, 183, 192 <tr>, de entrada textarea, 104 elemento
65–66, 89, 180, 183, 192 <tt>, 37, <tfoot>, 74 tag <tfoot>,
180–181, 192 89, 180, 183, 192 tag <th>, 71, 89, 180, 183, 192 elemento <thead

229
Machine Translated by Google

Índice

atributo de título, 18, 163, 185 W

tag <title>, 150–151, 153, 180, 183, 192 tag <tr>, yen, entidade de caractere,
65–66, 89, 180, 183, 192 tag <tt>, 37, 149 W3C, 16, 18, 113, 156
180–181, 192 atributo de tipo, w3schools.com, 1
91, 93 Cores seguras da Web,
114 Páginas da
Web, 2 Servidores da Web,
Tag U <u>, 36, 40, 180, 182, 192 7, 169–172 Servidor de informações da Internet
Tag <ul>, 91, 98, 180, 182, 192 texto (IIS), 169–171 Servidor da Web pessoal
sublinhado, 35 (PWS), 170–172
Caracteres Unicode, 195 profissional,
localizador uniforme de recursos, ver 172 teste, 171 Windows 7, IIS,
URLs atributos desconhecidos, 170–171 Windows 95, PWS,
155 listas não ordenadas, 90–92, 117 172 Windows 98, PWS, 172
URLs, 157–159 Windows 2000, IIS, 171
tag <a>, 157 Windows NT, PWS, 172
domínio, 157 Suporte do Windows, 170
download, ftp, 158 Windows Vista, IIS, 170–171
codificação, 167–168 Windows XP, IIS, 171
nome do Sites da Web,
arquivo, 7 atributo de largura,
158 host, 157 atributo 62 eventos de janela,
href, 157 links, 165 Windows 7, IIS, 170–171
158–159 grupos de notícias, Windows 95, PWS, 172
acessando, Windows 98, PWS, 172
158 Windows 2000, IIS, 171
caminho, 158 :porta, Windows NT, PWS, 172
157 esquemas, 157–158 redirecionamento de usuário, 155–156
Suporte para Windows, 170
Windows Vista, IIS, 170–171
V Windows XP, IIS, 171
validação, arquivo, 141 World Wide Web Consortium, consulte W3C
valores
atributos, 17–18 X–Z
cores, 111–112 tag XML, 16
<var>, 36–37, 180, 182, 192 versão tags <xmp>, 37, 180, 182
4.0, 140–141 conjunto
de quadros verticais, 125–126
Ver código-fonte da página (Firefox),
22 Ver código-fonte (Internet Explorer), 22
quebras visuais, 20

230