oblaat
a guide to conceiving, creating & publishing your own website
a guide to conceiving, creating & publishing your own website
There are bad ways to organise your possessions and good ways to organise your possessions. What works for one person's collections may not work for another person, and the same is true for websites.
If you keep your pencils in a tub with your markers haphazardly, eventually you will not be able to find the ones you want to draw with. If all of your files are in one folder, it will eventually be almost impossible to tell your images from your web page files. So, in both these situations, you designate new places for your things to go.
If you bought a label maker for home use, you would have a lot of fun labeling your table as TABLE and your jewellery drawer as JEWELLERY—so why is it that so many people working with digital documents, as artists or students, save their files as ghjfhgjfdk.jpg?
As somebody building a website you should not do this lest you get lost in the future.
File names do not have to be short, but it is convenient if they are. Ideally they are short, relevant, and memorable. They may also be very guessable, if you want to be extra kind to your visitors. A web page for your recipes can aptly be called recipes.html.
The "default" page for folder in a website, the first one anyone will see, is usually set up on the server to direct to index.html. As such, your "landing page" should be named this, located in the default folder of your website.
Your images, HTML files and CSS files should ideally all be separate. If you have large sections on your website dedicated to certain topics or motifs, consider separating them too. If you want to change something, you will need to know where to find it!
This example has a few more features than necessary, but a very neat website might be structureed as follows:
My Cool Website ├── css │ ├── main.css │ └── secret.css ├── img │ ├── art │ │ ├── artwork1.png │ │ └── artwork2.jpg │ ├── layout │ │ ├── background.png │ │ ├── banner.png │ │ └── decoration.png │ ├── animation.gif │ └── cute.png ├── pandas │ ├── img │ │ ├── banner.png │ │ ├── pandamother.jpg │ │ ├── pandacub.jpg │ │ └── pandacub2.jpg │ ├── babyphotos.html │ ├── diet.html │ ├── style.css │ └── index.html ├── about.html ├── index.html └── reviews.html
This is a file tree. The "root" folder, My Cool Website, "branches out" to all the other folders and files.
Here there is a folder for CSS stylesheets, a folder for images with folders for specific kinds, a folder for a section about pandas, and some various other HTML pages. If you were editing the site and looking for a specific kind of image or web page, you could find it just from the folders.
I highly recommend thinking of your site in these terms from the very beginning.