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: novatec@novatec.com.br
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Paths e convenções de nomenclatura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Acrescentando imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Organizando arquivos e pastas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Trabalhando com o HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Iniciando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Utilizando tags HTML básicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Incluindo imagens em sua página web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Adicionando um cabeçalho ao seu documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Algumas tags HTML úteis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

3
Kim melhora a aparência do site usando CSS . . . . . . . . . . . . . . . . . . . . . . . . 59
Inserindo CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Kim aprende o básico sobre o CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Explorando o CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Kim conhece classes e IDs do CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Cascading Style Sheets (Folhas de estilo em cascata) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Configurando sua folha de estilo e associando-a ao HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Criando sua primeira folha de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Kim conhece WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Kim cria sua primeira página em WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Kim organiza o seu site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Kim adiciona fotos e outras mídias ao seu site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Introdução ao WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Fazendo login e logout no WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Confira o seu trabalho aos poucos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Conteúdo do WordPress: posts e páginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Planeje o seu site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Criando sua primeira página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Criando um post de blog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Organizando os posts: categorias e tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Imagens destacadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Usando vídeos, fotos e citações com formatos de post . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Administrando e apagando conteúdo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

5
Personalizando o WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
O Painel de Aparência . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Kim dá superpoderes ao seu site usando plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Kim espia por trás das cortinas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Alterando a aparência: básico sobre temas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Personalizando o seu tema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Personalizando o seu menu de navegação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Entendendo a aba Screen Options (Opções de tela) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Configurações personalizadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Personalização avançada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Atualizações . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Mudando de hosts usando o Painel de Ferramentas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Para obter mais ajuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

vi Sumário vi
6
O grande lançamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Nada como ter o seu web host . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
O portfólio de Kim encontra um lar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Uma rede de amigos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Então você está pronto para criar o seu site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Definindo o hosting: um lar online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Preparando um site HTML e CSS básico para execução . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Instalando o WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Conclusão . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

Índice remissivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

  vii