Esta tradução está em curso.
Um site da Web consiste em muitos ficheiros: conteúdo de texto, código, folhas de estilo, conteúdo de multimédia, e assim por diante. Quando está a criar um site da Web, precisa de reunir esses ficheiros numa estrutura praticável no seu computador local, certifique-se que eles podem comunicar uns com os outros, e ter todo o seu conteúdo correto, antes de eventualmente enviá-los para um servidor. Lidar com ficheiros, apresenta alguns problemas que deverá estar ciente de que pode configurar uma estrutura de ficheiro praticável para o seu site da Web.
Onde deverá ficar o seu site da Web no seu computador ?
When you are working on a website locally on your own computer, you should keep all the related files in a single folder that mirrors the published website's file structure on the server. This folder can live anywhere you like, but you should put it somewhere where you can easily find it, maybe on your Desktop, in your Home folder, or at the root of your hard drive.
- Choose a place to store your website projects. Here, create a new folder called
web-projects(or similar). This is where all your website projects will live.
- Inside this first folder, create another folder to store your first website in. Call it
test-site(or something more imaginative).
Um aparte sobre maisúsculas/minúsculas e espaçamento
You'll notice that throughout this article, we ask you to name folders and files completely in lowercase with no spaces. This is because:
- Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at
test-site/MyImage.jpg, and then in a different file you try to invoke the image as
test-site/myimage.jpg, it may not work.
- Browsers, web servers, and programming languages do not handle spaces consistently. For example, if you use spaces in your filename, some systems may treat the filename as two filenames. Some servers will replace the spaces in your filenames with "%20" (the character code for spaces in URIs), resulting in all your links being broken. It's better to separate words with dashes, rather than underscores:
The short answer is that you should use a hyphen for your file names. The Google search engine treats a hyphen as a word separator, but does not treat an underscore that way. For these reasons, it is best to get into the habit of writing your folder and file names lowercase with no spaces and with words separated by dashes, at least until you know what you're doing. That way you'll bump into fewer problems later down the road.
Que estrutura deverá ter o seu site da Web?
Next, let's look at what structure our test site should have. The most common things we'll have on any website project we create are an index HTML file and folders to contain images, style files, and script files. Let's create these now:
index.html: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site. Using your text editor, create a new file called
index.htmland save it just inside your
imagesfolder: This folder will contain all the images that you use on your site. Create a folder called
images, inside your
stylesfolder: This folder will contain the CSS code used to style your content (for example, setting text and background colors). Create a folder called
styles, inside your
scripts, inside your
Nota: On Windows computers, you might have trouble seeing the file names, because Windows has an option called Hide extensions for known file types turned on by default. Generally you can turn this off by going to Windows Explorer, selecting the Folder options... option, unchecking the Hide extensions for known file types checkbox, then clicking OK. For more specific information covering your version of Windows, you can search on the web.
Caminhos de ficheiro
To make files talk to one another, you have to provide a file path between them — basically a route so one file knows where another one is. To demonstrate this, we will insert a little bit of HTML into our
index.html file, and make it display the image you chose in the article "What will your website look like?"
- Copy the image you chose earlier into your
- Open up your
index.htmlfile, and insert the following code into the file exactly as shown. Don't worry about what it all means for now — we'll look at the structures in more detail later in the series.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <img src="" alt="My test image"> </body> </html>
- The line
<img src="" alt="My test image">is the HTML code that inserts an image into the page. We need to tell the HTML where the image is. The image is inside the images directory, which is in the same directory as
index.html. To walk down the file structure from
index.htmlto our image, the file path we'd need is
images/your-image-filename. For example, our image is called
firefox-icon.png, so the file path is
- Insert the file path into your HTML code between the double quote marks of the
- Save your HTML file, then load it in your web browser (double-click the file). You should see your new webpage displaying your image!
Some general rules for file paths:
- To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g.
- To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g.
- To link to a target file in the directory above the invoking HTML file, write two dots. So for example, if
index.htmlwas inside a subfolder of
test-site, you could reference
- You can combine these as much as you like, for example
For now, this is about all you need to know.
Nota: The Windows file system tends to use backslashes, not forward slashes, e.g.
C:\windows. This doesn't matter in HTML — even if you are developing your website on Windows, you should still use forward slashes in your code.
O que mais deverá ser feito?
That is about it for now. Your folder structure should look something like this:
- Installing basic software
- What will your website look like?
- Dealing with files
- HTML basics
- CSS basics
- Publishing your website
- How the web works