MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-Learn-Section-Survey

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo do Inglês.

Um site da internet consiste em muitos ficheiros: conteúdo textual, código, folhas de estilo, conteúdo de multimédia, e assim por diante. Enquanto estiver a criar o site, tem que reunir esses ficheiros numa estrutura conveniente no seu computador local, certificar-se que os mesmos podem comunicar uns com os outros e preparar a apresentação do seu conteúdo, antes de eventualmente enviar os ficheiros para um servidor. Este artigo, Lidar com ficheiros, apresenta algumas questões de que deverá estar ciente para poder configurar uma estrutura de ficheiros conveniente para o seu site.

Onde deve ficar o seu site no seu computador ?

Quando estiver a trabalhar num site localmente, no seu computador, deve manter todos os ficheiros relacionados numa única pasta que seja o reflexo da estrutura de ficheiros do site no servidor. Esta pasta pode ficar onde você quiser, mas deve colocá-la num local de fácil acesso: talvez no seu Ambiente de Trabalho, a pasta do seu utilizador, ou a raiz do seu disco rígido.

  1. Escolha um sítio para guaradar os seus projetos relacionados com websites. Lá, crie uma nova pasta com o nome projetos-web (ou um nome semelhante). É aqui que vão morar todos os seus projetos de sites.
  2. Dentro desta pasta, crie outra pasta para guardar o seu primeiro website. Pode-lhe chamar site-de-teste (ou algo mais criativo).

Um aparte sobre nomes de pastas e ficheiros

Ao longo deste artigo poderá notar que os nomes que são dados às pastas e aos ficheiros estão todos em minúsculas e sem espaços. Isto porque:

  1. Muitos computadores, em particular servidores da internet, são sensíveis a maiúsuclas. Por exemplo, se criar um ficheiro de imagem com nome site-de-teste/MinhaImagem.jpg, e depois noutro ficheiro tentar referir-se a ela com o nome site-de-teste/minhaimagem.jpg, provavelmente não vai funcionar.
  2. Navegadores, servidores, e linguagens de programação não tratam os espaços da mesma forma. Por exemplo, se usar espaços no nome do ficheiro, alguns sistemas podem tratá-lo como dois nomes separados. Alguns servidores substituem os espaços por "%20" (código de caracter de espaços em URI), e assim arruínam os seus links.

Por essas razões, é melhor habituar-se a escrever os nomes de pastas e ficheiros sem espaços e com palavras separadas por hífen, pelo menos até saber o que está a fazer. Desta forma, irá encontrar menos problemas mais tarde.

É melhor separar palavras com hífen, em vez de underscoremeu-ficheiro.html em vez de meu_ficheiro.html, pois o motor de pesquisa Google interpreta o hífen como separador de palavras, mas não o underscore.

Que estrutura deverá ter o seu site?

De seguida, vamos discutir as estrutura que deve ter o site de teste. As coisas mais comuns que temos em qualquer site são um fichero "index" e pastas que organizam os ficheiros por tipo: imagens, folhas de estilo e scripts. Vamos criá-las agora:

  1. index.html: Este ficheiro geralmente descreve o conteúdo da sua página principal, ou seja, o texto e imagens que as pessoas vêem quando visitam o site pela promeira vez. Com um editor de texto, crie um ficheiro index.html e guarde-o dentro da pasta site-de-teste.
  2. Pasta images: Esta pasta irá conter todas as imagens do seu site. Crie um pasta com este nome dentro da pasta site-de-teste.
  3. Pasta styles: Esta pasta contém o código CSS que dá estilo ao conteúdo (por exemplo, cor do texto e do fundo). Crie-a dentro da pasta site-de-teste.
  4. Pasta scripts: Esta pasta contém o código JavaScript que dá interatividade ao seu site (como botões que carregam dados quando premidos). Crie-a dentro da pasta site-de-teste.

Nota:Em computadores com Windows, pode ter dificuldade em ver nomes dos ficheiros, porque no Windows tem uma opção, ligada por omissão, para Esconder extensões de ficheiros conhecidas. Em geral pode desligá-la no Explorador do Windows, selecionar Opções de pastas..., desmarcar a opção em questão, na caixa de seleção, e clicar OK. Para mais informações sobre a sua versão específica de Windows, faça uma pesquisa na internet. 

Caminhos de ficheiros

Para permitir a comunicação entre ficheiros, é necessário estabelecer os caminhos entre eles. Para demonstrar, vamos inserir algum HTML no ficheiro index.html que mostra a imagem que escolheu no artigo Qual será a aparência do meu site?

  1. Copie a imagem escolhida para a pasta images.
  2. Abra o ficheiro index.html, e copie o código exatamente como se mostra em baixo. Para já não se preocupe com o que significa — vamos olhar para estas estruturas mais tarde.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My test page</title>
      </head>
      <body>
        <img src="" alt="My test image">
      </body>
    </html> 
  3. A linha <img src="" alt="My test image"> é o código HTML que insere uma imagem na página. É necessário dizer, neste trecho de código HTML, onde está a imagem. A mesma está dentro da diretoria images, a qual está na mesma diretoria que index.html. Para descer na estrutura de ficheiros, de index.html para a imagem, o caminho é images/nome-da-imagem. Por exemplo, se a mesma e chamasse firefox-icon.png, o caminho seria images/firefox-icon.png.
  4. Insira este caminho no código HTML, entre as aspas neste trecho de código: src="".
  5. Guarde o ficheiro HTML, depois carregue-o no seu navegador (com duplo clique). Deve conseguir ver o novo site, com a imagem! 

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

Algumas regras gerais sobre caminos de ficheiros:

  • Para referir um ficheiro na mesma pasta que o ficheiro HTML onde a mesma é referida, utilize o nome desse ficheiro. Ex: minha-imagem.jpg.
  • Para referir um ficheiro numa sub-pasta, escreva o nome dessa sub-pasta antes do nome do ficheiro, seguido de uma barra. Ex: sub-pasta/minha-imagem.jpg.
  • Para referir um ficheiro numa diretoria acima do ficheiro HTML que a refere, escreva dois pontos finais e uma barra. Por exemplo, se index.html estiver numa sub-pasta, que por sua vez está localizada em site-de-teste; e o ficheiro minha-imagem.jpg estiver na pasta site-de-teste, pode referir minha-imagem.jpg (a partir de index.html) com ../my-image.jpg.
  • Pode combiná-los como quiser. Por exemplo, ../subdiretoria/outra-subdiretoria/minha-imagem.jpg.

Por agora é tudo o que precisa de saber.

Nota: O Windows usa barras invertidas, como no caminho C:\windows. Mas em HTML, isso é irrelevante — mesmo que esteja a construir o site num sistema Windows, pode usar a barra normal, /.

Que mais deverá ser feito?

Por agora é tudo. A sua estrutura deverá ser semelhante a esta:

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

 

Neste módulo

Etiquetas do documento e contribuidores

Contribuidores para esta página: diogo-panaca, mdnwebdocs-bot, mansil
Última atualização por: diogo-panaca,