1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
---
title: Lidando com arquivos
slug: Learn/Getting_started_with_the_web/Dealing_with_files
tags:
- Arquivos
- Codificação de Scripts
- Guía
- HTML
- Iniciante
- Site
- l10:prioridade
- teoria
translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
original_slug: Aprender/Getting_started_with_the_web/lidando_com_arquivos
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
<div class="summary">
<p>Um site consiste de muitos arquivos: conteúdo em texto, código, folhas de estilo, conteúdo em mídia e por aí vai. Ao criar um site, você precisa reunir esses arquivos em uma certa estrutura no computador local, certificar-se de que eles possam se comunicar e obter todo o conteúdo antes de <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">enviá-los para o servidor</a>. <em>Lidando com Arquivos</em> discute algumas questões às quais você deve estar ciente para que você possa configurar uma estrutura de arquivos para o seu site.</p>
</div>
<h2 id="Onde_seu_site_deve_residir_no_seu_computador">Onde seu site deve residir no seu computador?</h2>
<p>Quando você está trabalhando em um site localmente no seu próprio computador, você deve manter todos os arquivos relacionados em uma mesma pasta que reflete a estrutura dos arquivos do site publicado em um servidor. Essa pasta pode estar em qualquer lugar que você quiser, mas você deve colocá-la em algum lugar de fácil acesso, talvez no Desktop, na sua pasta Home, ou na raiz do seu HD.</p>
<ol>
<li>Escolha um lugar para guardar seus projetos de site. Aqui, crie uma nova pasta chamada <code>projetos-web</code> (ou algo do tipo). Essa é a pasta onde todos seus projetos de site estarão.</li>
<li>Dentro dessa pasta, crie outra pasta para guardar seu primeiro site. Chame ela de <code>site-teste</code> (ou algo mais criativo).</li>
</ol>
<h2 id="Deixando_de_lado_as_maiúsculas_e_espaços">Deixando de lado as maiúsculas e espaços</h2>
<p>Você vai perceber no decorrer desse artigo que nós pedimos para que você nomeie pastas e arquivos completamente em letras minúsculas e sem espaços. Isso acontece porque:</p>
<ol>
<li>Muitos computadores, particularmente servidores web, são case-sensitive. Então, por exemplo, se você colocar uma imagem no seu site em <code><span style="font-family: consolas,monaco,andale mono,monospace;">site-teste</span>/MyImage.jpg</code>, e então em um outro arquivo você tentar chamar <code><span style="font-family: consolas,monaco,andale mono,monospace;">site-teste</span>/myimage.jpg</code>, não vai funcionar.</li>
<li>Navegadores, servidores web e linguagens de programação não lidam bem com espaços. Por exemplo, se você usa espaços no nome do seu arquivo, alguns sistemas vão tratar o nome do arquivo como dois nomes. Alguns servidores vão substituir os espaços no nome do arquivo por "%20" (o código para espaço em URLs), quebrando seus links. É melhor separar palavras com traços, em vez de sublinhado: <code> meu-arquivo.html</code> vs. <code>meu_arquivo.html</code>.</li>
</ol>
<p>A resposta curta é que você deve usar um hífen para os nomes dos arquivos. O mecanismo de pesquisa do Google trata um hífen como separador de palavras, mas não considera um sublinhado dessa maneira. Por esses motivos, é melhor criar o hábito de escrever sua pasta e nomes de arquivos em letras minúsculas, sem espaços e com palavras separadas por traços, pelo menos até você saber o que está fazendo. Dessa forma, você encontrará menos problemas no futuro.</p>
<h2 id="Qual_estrutura_seu_site_deve_ter">Qual estrutura seu site deve ter?</h2>
<p>A seguir, vamos ver qual estrutura seu site teste deve ter. As coisas mais comuns que temos em qualquer projeto de site que criamos são um arquivo de índice HTML e pastas que contém imagens, arquivos de estilo e arquivos de scripts. Vamos criá-los agora:</p>
<ol>
<li><code><strong>index.html</strong></code>: Esse arquivo vai geralmente conter o conteúdo da sua página, ou seja, os textos e as imagens que as pessoas veem quando acessam seu site pela primeira vez. Usando seu editor de texto, crie um novo arquivo chamado <code>index.html</code> e salve dentro da sua pasta <code>site-teste</code>.</li>
<li><strong>pasta <code>imagens</code></strong>: Essa pasta vai conter todas as imagens que você vai usar no seu site. Crie uma pasta chamada <code>imagens</code>, dentro da sua pasta <code>site-teste</code>.</li>
<li><strong>pasta <code>estilos</code></strong>: Essa pasta vai conter os códigos CSS usados para dar estilo ao seu conteúdo (por exemplo, configurando a cor do texto e do fundo da página). Crie uma pasta chamada <code>estilos</code>, dentro da pasta <code>site-teste</code>.</li>
<li><strong>pasta <code>scripts</code></strong>: Essa pasta vai conter todos os códigos JavaScript usados para adicionar funcionalidades interativas para seu site (ex.: botões que carregam dados quando clicados). Crie uma pasta chamada <code>scripts</code>, dentro da sua pasta <code>site-teste</code>.</li>
</ol>
<div class="note">
<p><strong>Nota</strong>: Em computadores com Windows, você deve ter problemas para ver os nomes dos arquivos, porque o Windows tem uma opção chamada <strong>Ocultar as extensões dos tipos de arquivo conhecidos</strong> ativada por padrão. Geralmente você pode desativar essa opção indo no Windows Explorer, selecionando a opção <strong>Opções de pasta...</strong>, desmarque a caixa de seleção <strong>Ocultar as extensões dos tipos de arquivo conhecidos</strong>, e clique em <strong>OK</strong>. Para mais informação sobre sua versão de Windows, procure na web.</p>
</div>
<h2 id="Caminhos_de_arquivo">Caminhos de arquivo</h2>
<p>Para fazer arquivos conversarem entre si, você tem que fornecer um caminho de arquivo entre eles — basicamente uma rota para que um arquivo saiba onde o outro está. Para demonstrar isso, nós vamos inserir um pouco de HTML no nosso arquivo <code>index.html</code>, e fazer mostrar a imagem que você escolheu no artigo <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"</a><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a><a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"</a></p>
<ol>
<li>Copie a imagem que você escolheu antes para sua pasta <code>imagens</code>.</li>
<li>Abra seu arquivo <code>index.html</code> e insira o seguinte código exatamente como está escrito. Não se preocupe com o significado — nós vamos olhar com mais detalhes essa estrutura posteriormente.
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Minha página de teste</title>
</head>
<body>
<img src="" alt="Minha imagem de teste">
</body>
</html> </pre>
</li>
<li>A linha <code><img src="" alt="Minha imagem de teste"></code> é o código HTML que vai inserir uma imagem na página. Nós precisamos dizer ao HTML onde a imagem está. A imagem está dentro da pasta <em>imagens</em>, no mesmo diretório do <code>index.html</code>. Para trilhar o caminho de <code>index.html</code> para nossa imagem, o caminho é <code>imagens/nome-da-sua-imagem</code>. Por exemplo, nossa imagem é chamada <code>firefox-icon.png</code>, então, nosso caminho é <code>imagens/firefox-icon.png</code>.</li>
<li>Insira o caminho dentro do seu código HTML, dentro das aspas do código <code>src=""</code>.</li>
<li>Salve seu arquivo HTML, então carregue em seu navegador web (dê um duplo-clique no arquivo). Você deve ver sua nova página mostrando sua imagem!</li>
</ol>
<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
<p>Algumas regras gerais para caminhos de arquivo:</p>
<ul>
<li>Para linkar para um arquivo no mesmo diretório do arquivo HTML, apenas use o nome do arquivo, ex.: <code>my-image.jpg</code>.</li>
<li>Para linkar um arquivo em um sub-diretório, escreva o nome do diretório na frente, mais uma barra, ex.: <code>subdirectory/my-image.jpg</code>.</li>
<li>Para linkar um arquivo <strong>acima </strong>do arquivo HTML, use dois pontos. Então, por exemplo, se <code>index.html</code> estiver dentro de uma subpasta de <code>site-teste</code> e <code>my-image.png</code> estiver dentro de <code>site-teste</code>, você pode fazer referência a <code>my-image.png</code> em <code>index.html</code> usando <code>../my-image.png</code>.</li>
<li>Você pode combinar isso como preferir, por exemplo <code>../subdiretorio/outro-subdiretorio/my-image.png</code>.</li>
</ul>
<p>Por agora, isso é tudo o que precisamos saber.</p>
<div class="note">
<p><strong>Nota</strong>: O sistema de arquivos do Windows tende a usar barras invertidas, não barras normais , ex.: <code>C:\windows</code>. Isso não importa — mesmo se você estiver desenvolvendo seu site no Windows, você ainda deve usar barras normais no seu código.</p>
</div>
<h2 id="O_que_mais_deve_ser_feito">O que mais deve ser feito?</h2>
<p>Por agora, é isso. Sua pasta deve parecer algo do tipo:</p>
<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;">{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
<h2 id="Neste_módulo">Neste módulo</h2>
<ul>
<li id="Installing_basic_software"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a></li>
<li id="What_will_your_website_look_like"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/com_que_seu_site_vai_parecer">Como será o seu site?</a></li>
<li id="Dealing_with_files"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a></li>
<li id="HTML_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a></li>
<li id="CSS_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/CSS_basico">CSS básico</a></li>
<li id="JavaScript_basics"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/JavaScript_basico">Javascript básico</a></li>
<li id="Publishing_your_website"><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/Publicando_seu_site">Publicando seu website</a></li>
<li id="How_the_web_works"><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a></li>
</ul>
|
