Crie Seu
Próprio Site
Um guia em quadrinhos para
HTML, CSS e WordPress
Nate Cooper
com ilustrações de Kim Gee
Copyright © 2014 by Nate Cooper. Title of English-language original: Build Your Own Website,
ISBN 978-1-59327-522-8, published by No Starch Press. Portuguese-language edition copyright ©
2015 by Novatec Editora Ltda. All rights reserved.
Copyright © 2014 por Nate Cooper. Título original em inglês: Build Your Own Website,
ISBN 978-1-59327-522-8, publicado pela No Starch Press. Edição em português copyright © 2015 pela
Novatec Editora Ltda. Todos os direitos reservados.
© Novatec Editora Ltda. [2015].
Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida a reprodução desta
obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora.
Editor: Rubens Prates
Ilustração: Kim Gee
Tradução: Lúcia Kinoshita
Revisão gramatical: Marta Almeida de Sá
Editoração eletrônica: Carolina Kuwabata
Assistente editorial: Priscila A. Yoshimatsu
ISBN: 978-85-7522-410-6
Histórico de impressões:
Março/2015
Primeira edição
Novatec Editora Ltda.
Rua Luís Antônio dos Santos 110
02460-000 – São Paulo, SP – Brasil
Tel.: +55 11 2959-6529
Email: [email protected]
Site: www.novatec.com.br
Twitter: twitter.com/novateceditora
Facebook: facebook.com/novatec
LinkedIn: linkedin.com/in/novatec
A No Starch Press e o seu logo são marcas registradas da No Starch Press, Inc. Outros nomes de
produtos ou de empresas mencionados neste livro são marcas de seus respectivos proprietários. Em vez
de usar um símbolo de marca registrada em cada ocorrência de um nome de marca registrada, usamos
os nomes apenas de maneira editorial e em benefício do proprietário da marca registrada, sem intenção
de violação da marca. Este livro não é autorizado ou aprovado pela WordPress Foundation ou Automattic
Inc. WordPress é uma marca registrada da WordPress Foundation.
A No Starch Press/Novatec Editora não se responsabilizam pelo conteúdo do livro, embora toda
precaução tenha sido tomada durante a sua edição. O autor e a No Starch Press, Inc./Novatec Editora
não se responsabilizam perante qualquer pessoa ou entidade com respeito a qualquer perda ou dano
causados, ou alegadamente causados, direta ou indiretamente pelas informações contidas neste livro.
Todos os personagens desta publicação são fictícios ou usados de modo fictício.
OG20150224
Sumário
Sobre o autor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii
Sobre a ilustradora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii
Uma nota do autor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . x
Agradecimentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
1
O primeiro dia de aula . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Introdução à Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
O que é necessário . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Um navegador web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Um editor de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
O que você deve saber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Como um endereço deve ser lido? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
O que são clientes e servidores? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
O que é um host? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2
O problema com o HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Kim conhece as tags HTML básicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Paths e convenções de nomenclatura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Acrescentando imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Organizando arquivos e pastas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Trabalhando com o HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Iniciando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Utilizando tags HTML básicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Incluindo imagens em sua página web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Adicionando um cabeçalho ao seu documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Algumas tags HTML úteis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
17
25
32
38
46
46
48
51
54
57
3
Kim melhora a aparência do site usando CSS . . . . . . . . . . . . . . . . . . . . . . . . 59
Inserindo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kim aprende o básico sobre o CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Explorando o CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kim conhece classes e IDs do CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Cascading Style Sheets (Folhas de estilo em cascata) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Configurando sua folha de estilo e associando-a ao HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Criando sua primeira folha de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
63
72
79
84
93
93
94
CSS: a linguagem do estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Sintaxe do CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Classes, IDs e herança . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
A tag <div> e o alinhamento no CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Margens e preenchimento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Usando <div> para prover estrutura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
4
Kim explora WordPress City . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Bem-vindo a WordPress City . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kim conhece WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kim cria sua primeira página em WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kim organiza o seu site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kim adiciona fotos e outras mídias ao seu site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Introdução ao WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Fazendo login e logout no WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Confira o seu trabalho aos poucos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Conteúdo do WordPress: posts e páginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Planeje o seu site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Criando sua primeira página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Criando um post de blog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Organizando os posts: categorias e tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Imagens destacadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Usando vídeos, fotos e citações com formatos de post . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Administrando e apagando conteúdo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
117
122
128
133
138
145
145
148
149
150
151
164
166
168
169
170
5
Personalizando o WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
O Painel de Aparência . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kim dá superpoderes ao seu site usando plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kim espia por trás das cortinas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Alterando a aparência: básico sobre temas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Personalizando o seu tema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Personalizando o seu menu de navegação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Entendendo a aba Screen Options (Opções de tela) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Configurações personalizadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Personalização avançada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Atualizações . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Mudando de hosts usando o Painel de Ferramentas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Para obter mais ajuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
vi Sumário vi
176
182
186
193
196
199
202
203
205
206
210
213
214
215
6
O grande lançamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Nada como ter o seu web host . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
O portfólio de Kim encontra um lar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Uma rede de amigos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Então você está pronto para criar o seu site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Definindo o hosting: um lar online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Preparando um site HTML e CSS básico para execução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Instalando o WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Conclusão . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
219
228
234
237
239
240
242
244
Índice remissivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
 vii