Crie Seu Próprio Site

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
1
O primeiro dia de aula
Introdução à Web
Agora faça uma saudação ao
sol e... respire...
Estou tão empolgada! Minha aula
de web começa daqui a apenas
algumas horas. Finalmente poderei
entender tudo e criar o meu
portfólio online.
Introdução à Web 3
Namastê!
4 Capítulo 1 O primeiro dia de aula
Oi, Doug!
Oi... Kim...?
Droga!
Ah, oi, Kim. Como
vão as coisas?
Introdução à Web 5
Tudo bem! Acabei de sair da aula de ioga.
6 Capítulo 1 O primeiro dia de aula
Uma turma está indo assistir a
este show hoje à noite, se você
quiser vir conosco.
Hoje à noite não posso,
Doug. Depois que
devolver estes livros
na biblioteca, precisarei
ir à minha aula de
Introdução à Web, às
sete horas. Finalmente é
hora de aprender a criar
um site.
Você quer dizer aquele site
de portfólio sobre o qual você
vem falando?
Sim!
Legal. Bem, me passe o endereço
quando o site estiver pronto!
Preciso correr!
Introdução à Web 7
Oh-oh! Não
quero chegar
atrasada.
8 Capítulo 1 O primeiro dia de aula
Consegui!
Estão todos aqui?
Introdução à Web 9
Bem-vindos à aula de
Introdução à Web. Meu nome
é Nate e venho criando sites
desde 1997. Uso o WordPress
desde 2005 e agora vou
ensiná-los a criar e a colocar
seu site para funcionar.
Parece que estou
no lugar certo.
10 Capítulo 1 O primeiro dia de aula
O que é necessário
Neste livro, você conhecerá os conceitos fundamentais envolvidos na criação de um site.
Discutiremos o básico sobre HTML, CSS e WordPress. Ao final da obra, você saberá tudo o
que for necessário para o lançamento de seu próprio site. Porém um livro pequeno não pode
ensinar tudo sobre o desenvolvimento de sites. Aprender é um processo, e espero que este
livro seja um ponto de partida útil em sua jornada para se tornar um guru da web.
Cabe a você fazer os exercícios e garantir que adquirirá a prática necessária. Este livro
assume a abordagem de “aprender fazendo”. Dois recursos serão necessários em seu
computador para acompanhar o livro.
Um navegador web
Em primeiro lugar, será necessário ter um navegador web. Um navegador web é o que você
utiliza para visualizar páginas web online. Se você estiver usando Windows, recomendo fazer
o download do Chrome, do Firefox ou do Safari em vez de usar o Internet Explorer. Muitas
versões mais antigas do Internet Explorer não estão preparadas para lidar com as convenções
modernas da Web. Embora a maior parte do que faremos neste livro vá funcionar de maneira
adequada com o Internet Explorer, se você se aprofundar mais no desenvolvimento web, ficará
feliz de ter começado a usar esses outros navegadores.
Se estiver em um Mac, você já terá o Safari instalado e poderá permanecer com ele
se preferir. O Firefox ou o Chrome também poderão ser obtidos para testar o seu trabalho.
Apesar de ser um passo a mais, você poderá chegar à conclusão de que prefere alguns dos
recursos desses navegadores.
Ter mais de um navegador é uma ótima ideia para que você possa observar as diferenças
entre eles, além de ver como será a aparência de seu site para os visitantes que estiverem
usando navegadores diferentes.
Um editor de texto
Em seguida, você precisará de um editor de texto ou um editor de código de algum tipo. Por que
se dar o trabalho de obter um programa somente para escrever velhos textos maçantes? Um
bom editor de código foi concebido para ajudar você em algumas partes intrincadas da escrita de
HTML e de CSS. Ao abrir um editor de texto, à primeira vista, ele poderá parecer semelhante ao
Microsoft Word ou a outros processadores de texto. No entanto, após se aprofundar mais, você
verá que ele foi especialmente projetado para exibir código, conforme mostrado na figura 1.1.
Figura 1.1 – Não use o Word nem outro processador de texto para escrever HTML (na parte superior)! Um bom editor de
código facilita o seu trabalho (na parte inferior). Ele irá deixar os pares de tags em destaque, usará uma fonte de tamanho
fixo e salvará os arquivos da maneira correta.
O que é necessário 11
Se estiver em um PC executando Windows, o NotePad++ é uma ótima opção gratuita
(disponível em http://www.notepad-plus-plus.org/). Se estiver em um Mac, você poderá baixar
o Text Wrangler gratuitamente (http://www.barebones.com/products/textwrangler). O Sublime
Text é um editor de código gratuito e excelente, que funciona tanto nos Macs quanto em PCs
(http://www.sublimetext.com/), e eu o recomendo fortemente. Selecione um editor que você goste e
aprenda a usá-lo.
Um navegador web e um editor de texto são tudo de que você precisa para acompanhar
os capítulos sobre HTML e CSS. Se conseguir se familiarizar com um editor de código, no
futuro, poderá valer a pena, no caso de você querer conhecer uma linguagem de scripting
mais sofisticada como PHP, JavaScript ou Ruby.
O que você deve saber
Neste livro, vou supor que você sabe usar um explorador de arquivos (Finder no Mac, Explorer
no Windows) para abrir e salvar arquivos e instalar programas, e que, de forma geral, você
possa lidar com um computador. Há outros tópicos básicos que você também deverá conhecer.
Como um endereço deve ser lido?
Provavelmente você já viu o endereço de um site antes. Ele se parece com http://nytimes.com/,
http://en.wikipedia.org/ ou http://nostarch.com/websitecomic. Como nós, geeks, adoramos nomes
sofisticados, chamamos esses endereços de URL, que é a abreviatura de Uniform Resource
Locator (localizador-padrão de recursos). Por enquanto, porém, nós iremos chamá-los
simplesmente de link ou de endereço.
À medida que outros locais na Web forem acessados, esse endereço mudará, do mesmo modo
que sua localização muda quando você anda pelos quarteirões de uma cidade e vai para outras lojas.
Vamos dar uma olhada com mais detalhes para ver o que cada parte de um endereço faz:
http://nytimes.com/articletitle




u Inicialmente, há o http://. Ele nos permite saber que estamos usando HTTP, que significa
Hypertext Transfer Protocol (protocolo de transferência de hipertexto). É uma maneira
elegante de dizer que o navegador web deve esperar receber um documento HTML.
Criaremos nosso próprio código HTML no capítulo 2.
O HTTP é o protocolo mais comum que você verá na Web. Outro protocolo que vale a
pena conhecer é o HTTPS, que significa Secure HyperText Transfer Protocol (protocolo
seguro de transferência de hipertexto). Você verá esse protocolo sendo usado em páginas
em que são inseridas informações confidenciais, por exemplo, números de cartões de
crédito ou senhas. Outros protocolos também poderão ser vistos de vez em quando, por
exemplo, ftp:// (abreviatura de File Transfer Protocol, ou protocolo de transferência de
arquivos), descrito na seção “Um cliente FTP” na página 14.
v Em seguida, temos o nome do domínio. Nesse caso, é nytimes.
w O .com a seguir indica que esse é um site comercial. Embora .com continue sendo o tipo
mais popular de domínio de mais alto nível, você verá todo tipo de domínio de mais alto
nível hoje em dia.
x O restante do URL aponta para um artigo, uma postagem de blog ou outro recurso ou
outra página em particular.
12 Capítulo 1 O primeiro dia de aula
O que são clientes e servidores?
Você já pensou no que está do outro lado quando você acessa um site ou o que faz a web
funcionar? É somente um conjunto de computadores falando uns com os outros.
Ao acessar a Wikipedia, seu computador conversa com o servidor da Wikipedia. Funciona
mais ou menos da seguinte maneira:
Quero esta
página web.
Sem problemas.
Aqui está ela.
Quando pedimos ao navegador web que acesse um artigo da Wikipedia, o servidor da
Wikipedia (mostrado na figura 1.2) disponibiliza o artigo para nós, da mesma forma que o
garçom em um restaurante traz um cardápio ou um croissant quando você lhe pede.
Figura 1.2 – Um servidor pode ser um simples computador desktop ou podem ser racks de computadores especializados,
como os servidores dessa foto, que disponibilizam páginas da Wikipedia. Quanto mais tráfego seu site tiver, maior e melhor
deverá ser o seu servidor. (Crédito da foto: Victorgrigas).
Até hoje, é provável que você tenha atuado mais como um cliente, solicitando páginas
da web. Bem, agora você passará a disponibilizar essas páginas. Porém você pode estar se
perguntando de que modo você obterá o seu próprio servidor.
O que é um host?
Para garantir que as páginas web que você criar poderão ser vistas pelo mundo, será preciso ter
o seu próprio servidor. Executar um servidor pode ser complicado, de modo que as pessoas, com
frequência, compram espaços no servidor de outra pessoa. Uma empresa que vende espaços em
um servidor é chamada de web host. Mediante o pagamento de uma taxa, um web host armazena
suas páginas web e as mantém ativas e disponíveis durante 24 horas, sete dias por semana, a
qualquer pessoa que queira acessá-las. Normalmente, configurar um host envolve dois passos. Em
primeiro lugar, você deve registrar um domínio (por exemplo, www.natecooper.co) pagando uma
taxa e, em seguida, deverá escolher um host e pagar taxas anuais ou mensais pela hospedagem.
Entretanto não é necessário gastar dinheiro para acompanhar tudo o que estiver sendo
discutido neste livro. À medida que criarmos as páginas web em HTML e CSS, você as
testará em seu computador utilizando o navegador web. Isso significa que você simplesmente
verificará a aparência de suas páginas web em seu próprio computador, sem que essas
páginas sejam divulgadas na Internet.
O que você deve saber 13
Um cliente FTP
Em algum momento, você precisará ter uma maneira de enviar arquivos ao seu host.
É assim que você adicionará páginas e editará artigos. Para isso, será necessário ter
um programa FTP (File Transfer Protocol, ou protocolo para transferência de arquivo).
Um programa FTP gratuito e muito bom, disponível tanto para o Windows quanto
para o Mac, é o FileZilla (http://www.filezilla-project.org/). Depois que se inscrever
para ter um host, você obterá suas informações de login e poderá conectar-se
remotamente a ele por meio de FTP. Ainda não é preciso ter um cliente FTP, porém
você poderá precisar de um posteriormente, quando tiver o seu primeiro site.
Figura 1.3 – O FileZilla é uma aplicação FTP gratuita que permite carregar arquivos de seu computador para um
servidor remoto.
Ao começarmos a trabalhar com o WordPress no capítulo 4, será preciso ter um host,
pois o WordPress utiliza uma tecnologia que exige um servidor para que ele funcione. Para
acompanhar, uma conta gratuita do WordPress poderá ser usada em WordPress.com ou, se
você se inscrever para ter um host junto a um site de terceiros, por exemplo, no Host Gator, o
WordPress poderá ser configurado gratuitamente (veja o capítulo 6).
Retomaremos algumas particularidades sobre a aquisição de um host no último capítulo
deste livro. Por enquanto, anote essa atividade na lista de tarefas a serem feitas em sua
mente. Se você já instalou o seu navegador web e um editor de código, tudo de que você
precisará agora é de um espírito de aventura. Prepare-se para aprender!
14 Capítulo 1 O primeiro dia de aula